BANC

Framed Section Block

The Framed Section Template defines the HTML structure and content displayed within the Gutenberg editor for the Framed Section Block. It is responsible for displaying an image, a heading, and an excerpt in a framed layout.

Content Editor Fields

Heading

  • Description: The main heading text displayed in the section.
  • Usage: Use this field to provide a clear title for the section.
  • Optional: If no heading is provided, this element will not be displayed.

Excerpt

  • Description: A short description or paragraph of text displayed in the section.
  • Usage: Use this field to provide more context or information about the section.
  • Optional: If no excerpt is provided, this element will not be displayed.

Image

  • Description: The image to be displayed in the section.
  • Usage: Use this field to select the image.
  • Optional: If no image is provided, the image area will be empty.

Size

  • Description: The size of the image.
  • Usage: Use this field to define the size of the image.
  • Optional: If no size is provided, the default size will be used.

Example Usage:

Steps:

  1. Add the block: Insert the Framed Section Block into your page or post.
  2. Fill the fields:
    • In the block settings, fill the "Heading", "Excerpt", "Image" and "Size" fields.
  3. Save the Block: Your Framed Section block is now ready for display!

Result:

When properly configured, the Framed Section Block will render a section with an image, a heading, and an excerpt. The image and the text will be displayed side by side.

framed-section with image

Preview in the editor (body):

framed-section in body

Customization:

You can customize the Framed Section Block display in the following ways:

  • Content Customization: Change the heading and excerpt text directly within the block settings.
  • Image Customization: Change the image in the "Image" field.
  • Size Customization: Change the size of the image in the "Size" field.

Benefits:

  • Clear Structure: The template provides a simple and organized HTML structure.
  • Dynamic Content: The template allows for dynamic content to be inserted.
  • Easy to Use: It is simple to configure for the end user.
  • Customizable: The block is customizable.