Sample Page Builder Blocks
Welcome to the CFAES Page Builder. This tool allows you to easily created complex branded layouts. Below you will find a table of contents to navigate the various types of components you can use to build your page.
This text you are reading now is provided by our Text component and the links in the table of contents below link to our anchor component. When you utilize the anchor component with a link in the Text component (by adding the # and the ID of the Anchor component in your links URL) you can quickly link to different parts of your page.
Table of contents
Example of the Text component
Like the introductory paragraph on this page, this text here is also using the Text component. The Text component provides a "What You See Is What You Get" editor which allows you to bold, italicize, underline, strike-through, superscript, subscript, create bulleted or numbered lists, create links, and insert special characters.
Example of the Text Columns component
The Text Columns component allows you to create two columns of text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras semper auctor neque vitae tempus quam pellentesque. Nunc sed blandit libero volutpat. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Suspendisse ultrices gravida dictum fusce ut. Ornare quam viverra orci sagittis eu volutpat odio. Fermentum odio eu feugiat pretium nibh. Massa sapien faucibus et molestie. Malesuada fames ac turpis egestas integer eget aliquet nibh. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Rutrum quisque non tellus orci ac auctor augue mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras semper auctor neque vitae tempus quam pellentesque. Nunc sed blandit libero volutpat. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Suspendisse ultrices gravida dictum fusce ut. Ornare quam viverra orci sagittis eu volutpat odio. Fermentum odio eu feugiat pretium nibh. Massa sapien faucibus et molestie. Malesuada fames ac turpis egestas integer eget aliquet nibh. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Rutrum quisque non tellus orci ac auctor augue mauris.
Examples of the Teaser component
Examples of the Image with Text component
The Image with Text component provides two ways to display an image along with text, with the image left-aligned or right-aligned. There are three sizes of image to choose from (small, medium, and large), an optional caption, and an optional link.
With left-aligned medium image, no link, with caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras semper auctor neque vitae tempus quam pellentesque. Nunc sed blandit libero volutpat. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Suspendisse ultrices gravida dictum fusce ut. Ornare quam viverra orci sagittis eu volutpat odio. Fermentum odio eu feugiat pretium nibh. Massa sapien faucibus et molestie. Malesuada fames ac turpis egestas integer eget aliquet nibh. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Rutrum quisque non tellus orci ac auctor augue mauris.
With right-aligned large image, with link, with caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras semper auctor neque vitae tempus quam pellentesque. Nunc sed blandit libero volutpat. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Suspendisse ultrices gravida dictum fusce ut. Ornare quam viverra orci sagittis eu volutpat odio. Fermentum odio eu feugiat pretium nibh. Massa sapien faucibus et molestie. Malesuada fames ac turpis egestas integer eget aliquet nibh. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Rutrum quisque non tellus orci ac auctor augue mauris.
Lectus proin nibh nisl condimentum id venenatis a condimentum. Neque convallis a cras semper auctor neque vitae tempus. In hac habitasse platea dictumst quisque. Venenatis cras sed felis eget velit aliquet sagittis. Imperdiet sed euismod nisi porta lorem mollis. Aenean euismod elementum nisi quis eleifend quam adipiscing. Quam pellentesque nec nam aliquam. Sollicitudin ac orci phasellus egestas tellus rutrum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Id leo in vitae turpis massa sed elementum tempus. Eget magna fermentum iaculis eu non diam phasellus. Non sodales neque sodales ut etiam sit amet nisl. Aliquet bibendum enim facilisis gravida neque. Risus feugiat in ante metus dictum at. Nulla at volutpat diam ut venenatis. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Eros in cursus turpis massa tincidunt dui ut.
With right-aligned small image, with link, without caption
Lectus proin nibh nisl condimentum id venenatis a condimentum. Neque convallis a cras semper auctor neque vitae tempus. In hac habitasse platea dictumst quisque. Venenatis cras sed felis eget velit aliquet sagittis. Imperdiet sed euismod nisi porta lorem mollis. Aenean euismod elementum nisi quis eleifend quam adipiscing. Quam pellentesque nec nam aliquam. Sollicitudin ac orci phasellus egestas tellus rutrum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Id leo in vitae turpis massa sed elementum tempus. Eget magna fermentum iaculis eu non diam phasellus. Non sodales neque sodales ut etiam sit amet nisl. Aliquet bibendum enim facilisis gravida neque. Risus feugiat in ante metus dictum at. Nulla at volutpat diam ut venenatis. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Eros in cursus turpis massa tincidunt dui ut.
Examples of the Quote with Text component
To be, or not to be, that is the question: Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take Arms against a Sea of troubles, And by opposing end them: to die, to sleep;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras semper auctor neque vitae tempus quam pellentesque. Nunc sed blandit libero volutpat. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Suspendisse ultrices gravida dictum fusce ut. Ornare quam viverra orci sagittis eu volutpat odio. Fermentum odio eu feugiat pretium nibh. Massa sapien faucibus et molestie. Malesuada fames ac turpis egestas integer eget aliquet nibh. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Rutrum quisque non tellus orci ac auctor augue mauris.
Lectus proin nibh nisl condimentum id venenatis a condimentum. Neque convallis a cras semper auctor neque vitae tempus. In hac habitasse platea dictumst quisque. Venenatis cras sed felis eget velit aliquet sagittis. Imperdiet sed euismod nisi porta lorem mollis. Aenean euismod elementum nisi quis eleifend quam adipiscing. Quam pellentesque nec nam aliquam. Sollicitudin ac orci phasellus egestas tellus rutrum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Id leo in vitae turpis massa sed elementum tempus. Eget magna fermentum iaculis eu non diam phasellus. Non sodales neque sodales ut etiam sit amet nisl. Aliquet bibendum enim facilisis gravida neque. Risus feugiat in ante metus dictum at. Nulla at volutpat diam ut venenatis. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Eros in cursus turpis massa tincidunt dui ut.
Example of the Quote component
Don't judge each day by the harvest you reap but by the seeds that you plant
Image
Sometimes you'll want to display a feature image. The Image component is what you will want. Like the Image with Text component the Image component provides three sizes (small, medium, and large) and allows the image to be linked as well as caption. The large image will span the entire length of the content area. The small and medium options are progressively smaller and centered horizontally in the content area.
Example of Buttons
Example of an Accordion component
These expandable areas can contain text and most Page Builder blocks.
Accordions are a good way to create a page with a lot of reference information easy to navigate.
These expandable areas can contain text and most Page Builder blocks.
Accordions are a good way to create a page with a lot of reference information easy to navigate.
Accordions are a good way to create a page with a lot of reference information easy to navigate.
Example of the Cards component
Can science make tomatoes even better for you?
Cutting-edge in Wooster
An atypical semester begins
Image Row
This block will add a row of images, you can choose how many images to display in each row and accompany each with a caption. This can create a single row of images or a grid. Rows can have between 2 and 6 images.
Spotlight Boxes
Spotlight Boxes add a row of linked images that crop as squares. These are intended as an interface element and will not show up when printing.
Example of the Page Break component
The Page Break component is an invisible component, that is when you use this component nothing will display on the screen. This component is useful when printing to control where you would like the page to break.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras semper auctor neque vitae tempus quam pellentesque. Nunc sed blandit libero volutpat. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Suspendisse ultrices gravida dictum fusce ut. Ornare quam viverra orci sagittis eu volutpat odio. Fermentum odio eu feugiat pretium nibh. Massa sapien faucibus et molestie. Malesuada fames ac turpis egestas integer eget aliquet nibh. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Rutrum quisque non tellus orci ac auctor augue mauris.
Lectus proin nibh nisl condimentum id venenatis a condimentum. Neque convallis a cras semper auctor neque vitae tempus. In hac habitasse platea dictumst quisque. Venenatis cras sed felis eget velit aliquet sagittis. Imperdiet sed euismod nisi porta lorem mollis. Aenean euismod elementum nisi quis eleifend quam adipiscing. Quam pellentesque nec nam aliquam. Sollicitudin ac orci phasellus egestas tellus rutrum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Id leo in vitae turpis massa sed elementum tempus. Eget magna fermentum iaculis eu non diam phasellus. Non sodales neque sodales ut etiam sit amet nisl. Aliquet bibendum enim facilisis gravida neque. Risus feugiat in ante metus dictum at. Nulla at volutpat diam ut venenatis. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Eros in cursus turpis massa tincidunt dui ut.
Example of the Google Map component
Example of the Table component
| Name | Breed | Age | Favorite Treat |
|---|---|---|---|
| Sway | Boston Terrier | 13 | Bacon |
| Jack | Taco Terrier | 9 | Chicken Nuggets |
| Marshmallow | Frenchton | 1mo | TBD |
Example of the YouTube Video component
Example of a "Two Column" builder block
This will enable you to sit to builder instances next to one another. There are some limits to what is allowed to be nested in these blocks, however this will allow you to create different kinds of insets for your page. One side of the block can be given a background and border to set it apart from the content.
A video about the migration process from Drupal 7 to Drupal 9. Added here just to illustrate the two column inset.