Skip to content

All Modules Demo

This page shows examples of modules for you to use in WordPress. It’s not in a specific order but is a guide for you to see how each module can look and its settings in the builder. In each module, you can change things like color, illustrations, buttons, photos, and spacing. The shown example is a starting point, and you can customize it in the builder based on your needs.

Hero CTA

Text styles

These are the text styles you have to work with throughout the site.

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Standard Content Editor, Heading 2, full width

This is the section named “Standard Content Editor”.

Use Headings 2-6 for section headings. Heading 1 should be reserved only for the hero.

This text you’re reading is paragraph copy, set at full width. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Standard Content Editor, Heading 2, 3/4 width

This is the section named “Standard Content Editor”.

Use Headings 2-6 for section headings. Heading 1 should be reserved only for the hero.

This text you’re reading is paragraph copy, set at 3/4 width. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Standard Content Editor, Heading 2, 2/3 width

This is the section named “Standard Content Editor”.

Use Headings 2-6 for section headings. Heading 1 should be reserved only for the hero.

This text you’re reading is paragraph copy, set at 2/3 width. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Standard Content Editor, Heading 2, 1/2 width

This is the section named “Standard Content Editor”.

Use Headings 2-6 for section headings. Heading 1 should be reserved only for the hero.

This text you’re reading is paragraph copy, set at 1/2 width. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Standard Content Editor, Heading 2, 1/3 width

This is the section named “Standard Content Editor”.

Use Headings 2-6 for section headings. Heading 1 should be reserved only for the hero.

This text you’re reading is paragraph copy, set at 1/3 width. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Standard Content Editor, Heading 2, 1/4 width

This is the section named “Standard Content Editor”.

Use Headings 2-6 for section headings. Heading 1 should be reserved only for the hero.

This text you’re reading is paragraph copy, set at 1/4 width. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Standard Content Editor, Heading 2, 1/4 width

Paragraph copy, 3/4 width. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Standard Content Editor, Heading 2, 1/3 width

Paragraph copy, 2/3 width. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Standard Content Editor, Heading 2, 1/2 width

Paragraph copy, 1/2 width. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Standard Content Editor, Heading 2, 3/4 width

Paragraph copy, 1/4 width. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Standard Content Editor, Heading 4, 1/3 width

This is how you can set text in columns. This text you’re reading is paragraph copy, set at 1/4 width. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Standard Content Editor, Heading 4, 1/3 width

This is how you can set text in columns. This text you’re reading is paragraph copy, set at 1/4 width. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Standard Content Editor, Heading 4, 1/3 width

This is how you can set text in columns. This text you’re reading is paragraph copy, set at 1/4 width. Lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet. Lorem ipsum dolor est sit amet lorem ipsum dolor est sit amet.

Accordion header, Heading 2

This is the section for accordions. If you have intro copy to the accordions below, it can go here. If you don’t, you may delete this text. Lorem ipsum dolor est sit amet.

This one has paragraph text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This one has a bulleted list.

  • Bullet 1
  • Bullet 2
  • Bold bullet 3

This one has a CTA.

Accordion CTA

This is a good place for some intro copy about the bullet points below. You may also delete the bullet list if it isn’t applicable to your content.

  • Lorem ipsum dolor est. Lorem ipsum dolor est. Lorem ipsum dolor est.
  • Lorem ipsum dolor est. Lorem ipsum dolor est. Lorem ipsum dolor est.
  • Lorem ipsum dolor est. Lorem ipsum dolor est. Lorem ipsum dolor est.
  • Lorem ipsum dolor est. Lorem ipsum dolor est. Lorem ipsum dolor est.
  • Lorem ipsum dolor est. Lorem ipsum dolor est. Lorem ipsum dolor est.
  • Lorem ipsum dolor est. Lorem ipsum dolor est. Lorem ipsum dolor est.

  • Lorem ipsum dolor est. Lorem ipsum dolor est. Lorem ipsum dolor est.
  • Lorem ipsum dolor est. Lorem ipsum dolor est. Lorem ipsum dolor est.
  • Lorem ipsum dolor est. Lorem ipsum dolor est. Lorem ipsum dolor est.
  • Lorem ipsum dolor est. Lorem ipsum dolor est. Lorem ipsum dolor est.
  • Lorem ipsum dolor est. Lorem ipsum dolor est. Lorem ipsum dolor est.
  • Lorem ipsum dolor est. Lorem ipsum dolor est. Lorem ipsum dolor est.

Alternating Image/Content Simple

This section is called Alternating Image/Content. Lorem ipsum dolor est. Lorem ipsum dolor est sit amet.

Alternating Image/Content Simple

This section is called Alternating Image/Content. As you stack these sections together, they will automatically switch image and text positions. Lorem ipsum dolor est.

Alternating Image/Content Illustration Parallax

This is another variation of the Alternating Image/Content section called “Illustration Parallax.” You have 13 different illustration backgrounds to choose from. The one you’re looking at is “Cactus”. The button below can be turned on / off.

Call to action

Standard Grid Items

This section is called “Standard Grid Items”. You have 6 options for how many items appear in each row, and how wide those items are. You may also choose the background color for this section. This example shows 4 items. In theory, you may add as many items as you’d like, but try to stay between 2-12 items.

Lorem ipsum

This description is optional.

Dolor Est

This description is optional.

Sit Amet

This description is optional.

Dolor Amet

This description is optional.

Full Width Image with heading

Copy block for full width image with heading section

See what's happening

Palm Dome

At 67 feet high with over 3,000 panes of glass, this iconic greenhouse is the…