This example shows multiple types of Page Builder components and some combined used of them.
Simple Content with Insertions
This component only defines the 2 regions where we insert other components.
Special Lists
This Special List component was configured with2 columns, color red, 100% width and placement in the first column of the Simple Content component.
Accordion
This Accordion component was configured with color blue, 100%width and placement in the first column of the Simple Content component.
Por supuesto, el condimentum en sí es muy oscuro, cada uno ama a diam, ama a orci tortor de suspendisse molestie tempus maximus quam quam arcu a leo nisi urn magna purus.
Beber consectetur ex elementum cada uno es fácil portaest suspendisse purus sed interdum quis love vivamus accumsan Phasellus vivamus ut placerat morbi metus Phasellus morbi massa.
La molestia del phasellus de la molestie es como una cierta ensalada, o vivimos en un cierto lugar, o no bebemos, o no bebemos, a menos que bebamos, o no bebemos.
La molestia del phasellus de la molestie es como una cierta ensalada, o vivimos en un cierto lugar, o no bebemos, o no bebemos, a menos que bebamos, o no bebemos.
Carousel Inserted
This Carousel was configured with 100% width, color blue, small images, 1 column, with navigation, autoplay set to Yes, Loop set to Yes, show title set to No and placement in the second column of the Simple Content component.
-
Carousel 2 -
Carousel 3
Read More
Read More example configured with collapsed height set to 150px and color green.
Tincidunt quis facilisis condimentum arcu urna metus eros massa elementum ipsum eu vivamus consectetur scelerisque ut elementum facilisis nec fusce phasellus sed vivamus tempus hendrerit.
Nisi tortor sed nec hendrerit vivamus lacus accumsan morbi enim purus eget euismod ac pellentesque nulla nisl dolor sem pellentesque pellentesque suspendisse facilisis eros quam.
Another Read More example.
This was configured with collapsed height set to 200px and color blue.
Morbi tincidunt sem sed proin quam magna eros quis nulla facilisis bibendum eros sem magna ex a bibendum congue quam et maximus congue rutrum interdum.
Leo enim nulla interdum sollicitudin pellentesque rutrum portaest eget lacus eros vivamus condimentum sed nec aliquam magna a massa fusce maximus fusce eget ut vivamus.
Carousel
This Carousel was configured with 100% width, color blue, image size set to Medium, Navigation set to Yes, Autoplay set to Yes, Loop set to Yes, Show Title set to No.
The component has 3 items configured in 3 columns with 16px column gap.
-
Carousel 2
-
Carousel 3
-
Carousel 4
Image Gallery
This image gallery uses a grid display with 4 columns, 10px column gap, orange color style using 100% of the component width.
Tabs
This example uses Horizontal Tabs configured with blue and green color style, using 80% of the width available for the component and automatic height (each tab's height is determined by it's content).
Interdum proin diam phasellus leo magna tempus orci adipiscing nunc tincidunt erat sem morbi quam tempus placerat eget quisque hendrerit euismod pellentesque dolor magna felis.
Sem quisque bibendum tincidunt morbi nulla interdum sit vivamus rutrum diam quam ex accumsan euismod rutrum proin proin tempus cursus commodo tincidunt phasellus cursus maximus.
Lacus sollicitudin arcu tincidunt eget suspendisse facilisis sem eros aliquam ex nisl nisi ac dolor sollicitudin hendrerit consectetur commodo phasellus euismod eros eu accumsan mi.
- Sem quisque bibendum tincidunt morbi nulla interdum sit vivamus rutrum diam quam ex accumsan euismod rutrum proin proin tempus cursus commodo tincidunt phasellus cursus maximus.
- Lacus sollicitudin arcu tincidunt eget suspendisse facilisis sem eros aliquam ex nisl nisi ac dolor sollicitudin hendrerit consectetur commodo phasellus euismod eros eu accumsan mi.
Simple Content with Image Slideshow
The image in the left pane is actually a slideshow. If a simple content images item is created with more than one images, those are rotated as a slideshow.
Infinite Logos
This component displays an infinite scroll of images. This example was configured to show a tooltip on mouse over the image, each image fitted in a 160x80 px box and an enlarge and display color effect.
Views Example
Example of The Views component that allows the insertion of a list of content dynamically generated. The component was configured using the Boxed Card display type in 3 columns.
The Boxed Card display was configured with a gray 2px border all around, 16px padding, and 8px corner radius.
The view was configured to display only the first 3 items, display the view header, hide the view title and display a full pager.
Rutrum hendrerit purus adipiscing et purus orci erat ipsum tortor varius scelerisque orci purus condimentum euismod felis arcu accumsan proin suspendisse mi ex tristique ac.
Elementum varius…
Rutrum hendrerit purus adipiscing et purus orci erat ipsum tortor varius scelerisque orci purus condimentum euismod felis arcu accumsan proin suspendisse mi ex tristique ac.
Elementum varius…
Rutrum hendrerit purus adipiscing et purus orci erat ipsum tortor varius scelerisque orci purus condimentum euismod felis arcu accumsan proin suspendisse mi ex tristique ac.
Elementum varius…