The Page Builder Simple Content component was designed to allow organizing different types of content in multiple columns.

Item Configurations

There are four types of Simple Content items:

  • Content: any text content, headers for sections, etc.
  • Images: Images to be displayed in the page. If more than one image is added to an image item, they're displays as a slideshow.
  • Region: a placeholder to receive other Page Builder elements.
  • Background: a mechanism to set background color or image to the entire simple content component. There should be no more than one Background item set to "Section Background" per component.

Configurations

For each Simple Content component you can configure:

  • Title
  • If the title is displayed on the page
  • An introduction text before the component grid
  • Number of columns
  • Columns templates to allow different widths for columns
  • Column gap
  • Vertical alignment (top, bottom, center, inherit or streatch)
  • Component width as a percentage of the total width available for the Simple Content group
  • Placement (inline, top of page content, bottom of page content, etc.)
  • Container Settings

Container Settings

Container settings allows the configuration of the container housing the component. It allows the following settings:

  • Padding (in px): top, right, bottom, left. Defaults to 0px for all.
  • Margins (in px): top, right, bottom, left. Defaults to 32px in the bottom.
  • Border (in px): top, right, bottom, left. Defaults to 0px for all.
  • Border Radius (in px): defaults to 0px.
  • Border Color
  • Background
    • Color
    • Text Color
    • Extend text color to items or not
    • Opacity (%)
    • Blur (in px)
    • Media (image / video)
      • Parallax Effect (for Image only)

Content

  • Title
  • Body (text to be displayed)
  • Vertical Alignment (top, bottom, center, inherit, stretch)
  • Padding
  • Grid Columns Span (to allow a text to span more than one column of the group of items)
  • Background color

Image

  • Title
  • One or more images
  • Aspect ratio (landscape, portrait, square)
  • Padding
  • Background Color

Region

  • Title
  • Region ID
  • Padding
  • Background Color

Background

  • Title
  • Type
    • content - the background applies to a cell/column of the component
    • section - the background applies to the entire component
    • items - the background applies to the items area only, leaving off the title and intro text
  • Background Color
  • Height
  • Margin
  • Padding
  • Column span
  • Background Image
  • Image Size (small, medium, large, X large, 2X Large)
  • Parallax
  • Orientation
  • Scale
  • Delay

Example with 2 columns and 90% width

desert forrest

The left column is a slideshow of two images. 

This text was placed in the second column. It was configured with 20px padding and a background color to give a box effect.

The order of the columns is very easy to change.

Example with Insertion of accordion and background

This example was created using a Simple Content component, configured with 2 columns, 100% width, vertical align bottom. Two items of type region were added to the Simple Content component. The accordion on the right column was inserted into the second item of type region. This shows how you can combine different Page Builder elements.

This example uses also a background type item configured with type set to section to create a more engaging display.

The container settings was used only to blur the background image and to set a 32px bottom margin.

The accordion on the right was inserted into an item of type region. This shows how you can combine different Page Builder elements.

This example uses also a background type item to create a more engaging display.

Accordions can be easily added to your page using the intuitive drag-and-drop interface of our Page Builder. Simply select the Accordion element, customize its content and style to fit your needs, and place it wherever you want on your page.

Absolutely! With our Page Builder, you can add as many Accordions as you need to your page. Whether you want to organize different sections of content, create a comprehensive FAQ page, or showcase various product features, you can easily incorporate multiple Accordions to provide a seamless and organized browsing experience for your visitors.

Absolutely! Accordions created with our Page Builder are fully responsive, meaning they will adapt seamlessly to different screen sizes and devices, providing a consistent and user-friendly experience for your mobile visitors.

Full Width with Background Image

The new APB Simple Content has leveled up — you can now create fully customizable background sections with even more visual impact. Whether you choose solid colors, background images, or a combination of both, the layout becomes much more flexible and expressive.

When using a background image, you also have the option to enable a parallax effect, adding depth and subtle motion to the user experience. This feature is perfect for creating visually striking sections that bring energy and personality to your page layout.

people

Image on 2 columns

This component was configured with 3 columns.

The image on the left was created using the Background item type to allow it to span 2 columns and have a parallax effect.

This text falls in the third column. 

This could be used to create rows of text and image with the image alternating left and right.

One column example with Background as a banner

The banner bellow was created using a Background item, configured with type set to content and the grid column span set to Full Width, and Force Full Width checked, parallax checked.

The banner was set to 400px height and to span the full width of the screen.

The image bellow was created using the Background item type, configured with type set to content, grid column span set to auto, parallax unchecked.

This banner spans only the content area with a height of 300px.