Prerequisite Topics


In Page Builder, modules are used to add content to the page. Each module is listed below with a brief summary, suggestions for use, and a link to its Page Builder knowledge base article for more details.

Layout


Rows

A row is a block of content that spans the whole width of the content area. Think of rows as sections on your page. You can set a background and border, and you can set styles that will apply to all content within a row. You can add content to a row by dragging and dropping columns and modules into it.

Access rows under Row Layouts. Each row has a different number of columns, but this number is not set in stone. You can always add or remove columns from a row later.

Row Layouts Overview



Columns


A column is a block of content within a row. Columns are a great way to group content within rows and create layouts. You can stack multiple columns within a single row. You can also nest columns within columns.

You can access columns under Row Layouts. To add as a column instead of another row, drag and drop the row with the desired number of columns into an existing row on the page.

Column Layouts Overview



Basic Modules


Audio


Audio module in playlist view

The Audio module is a great way to showcase any recorded work you, your department or your organization has made. Insert audio files from the Media Library or with a link from an external source. You can choose if it plays automatically, or if it plays in a loop.

You can also add multiple media files to create a playlist. When you have two or more audio files, playlist styling options will appear, and you can adjust the appearance of your playlist.

Audio Module Overview



Button

An example of a Page Builder button

Insert a button anywhere on your page to lead your visitors to another page on your site or to an external link.

Customize size, border, and alignment. You can style your button to be any color you want, though it's recommended you use EWU colors found under Color Presets. You have the choice of three button styles, each with different effects.

Button Module Overview



HTML

Use the HTML module to insert custom code into your page, without potential interference from the WordPress Text Editor.

HTML Module Overview



Heading

Insert a heading or title into a row. The heading module allows more customization than using a heading in the text editor. You can change font size, color, alignment and more. You can also make the heading a link.

While the heading module does have more flexibility, remember to be conscious of EWU branding.

Heading Module Overview



Photo

Insert a photo from your Media Library or with a URL. You have several options for styling, including size, cropping, and layout.

When you upload an image to your Media Library, WordPress will automatically create several versions of different sizes. To make your page load faster, use the smallest image you can. You can also minimize load times by optimizing your photo with a photo-editing program (like Photoshop), or with TinyPNG.

A note on accessibility: when you add an image to your Media Library, it is important that you fill out the Alternate Text section. This text provides a description of the image to people who cannot see images. This includes users with visual impairments and users of screen readers. Alt text should be a description of the image. If your image contains text, that text should be included in the alt text description.

Photo Module Overview



Separator

Separator styles: solid, dashed, dotted, and double

The separator is a horizontal line used to separate content. You can customize its color, size, and spacing.

Separator Module Overview



Text Editor

Use the Text Editor to add a block of text anywhere on your page. You can format your text just as you can in the standard WordPress editor. You can also insert media from the media library.

To follow EWU branding, use the drop-down in the upper left corner of the text editor to select text styles.

Text Editor Module Overview



Video

If you, your department or organization has created a video, use the Video module to display it on your page. Insert a video from the WordPress Media Library, or use an embed code from a third party such as Youtube.

You can select an image as a cover to display before the video plays. You can also choose if it plays automatically and if it loops.

Video Module Overview


Advanced Modules


Accordion

Accordion module

Use the Accordion module to create a vertical list where each item can be expanded to show more detail. Accordions work well for FAQs, Q&As, and other lists. They are particularly useful if you have a lot of content, but don’t want to stretch out the page.

Accordions have a few options for customizing appearance. You can choose border color, label size, and options for collapsing or expanding each section.

Accordion Module Overview



Callout & Call to Action

Callout module

Callout

Call to Action module

Call to Action

These two modules are very similar. Use these modules to draw your users’ attention and lead them to an action. For example, briefly describe a facet of your organization, and then have the button or link lead to a page that offers more information.

Though similar, the Callout and Call to Action modules do have some differences. The Callout allows an optional image or icon, with the ability to position it above, below, left or right of the text. The Call to Action requires the use of a button, while a button is optional in the Callout module. There are also some slight styling differences.

Find more examples of use, as well as a more detailed description of the differences between Callout and Call to Action, in the Page Builder article below.

Callout & Call to Action Modules Overview



Content Slider

Content slider module

Content sliders are a great way to feature content in a visual way, particularly because they offer many options for styling and content. They are typically used on landing pages, but you could use them anywhere.

You can choose photo, video, or color backgrounds for each slide. Then you can insert headers, text, and buttons as an overlay, or side by side with the background. You can also customize playback options to make the slider loop automatically or to add navigation so users can cycle through manually.

Content Slider Module Overview


Countdown

Countdown timer module

If you have an event coming up, use this module to insert a countdown timer. You can specify the exact date and time, including time zone, that the time will count down to. You can customize the appearance of the countdown in the settings.

Countdown Module Overview



Gallery

If you have multiple images you want to display, use the Gallery module. You can display a collection of images from your Media Library and customize its appearance. Images can be organized as a mosaic or a grid on your page. Then, when an image is clicked on, it can open a larger version of the image or a lightbox with previous and next arrows. You also have the option to add captions.


A note on accessibility: when you add an image to your Media Library, it is important that you fill out the Alternate Text section. This text provides a description of the image to people who cannot see images. This includes users with visual impairments and users of screen readers. Alt text should be a description of the image. If your image contains text, that text should be included in the alt text description.

Gallery Module Overview



Icon & Icon Group

Icon module with text

Icon group module

The Icon module and Icon Group module are both very similar. Both modules let you insert icons, style them, and add a link to each icon.

The Icon Module comes with the option to add text to the right of the icon, while the Icon Group module does not.

The Icon Group module allows you to add multiple icons and adjust the space between them.

Icons can add visual interest to your page, help your visitors navigate, and display information. For example, you could display links to your social media pages as icons instead of text links.

Icon & Icon Group Modules Overview



Map

Google Maps module

Help your users find you. Insert a Google Map onto your page with a marker pointing to an address you specify. This could be the building your department resides in, the venue of an event, or anything else.

Map Module Overview



Menu

Insert a custom menu anywhere in your layout. The menu module gives you more options for content, style, and layout than the menu in the theme or widget area.

However, for the sake of consistency with other EWU sites, it is recommended that you do not replace the theme's menu. The Menu module works best as a supplement. For a few examples of use, check out Page Builder's article below.

Menu Module Overview



Number Counter

Number counter module

Display numbers in an animated fashion, with the counter going from zero to the number or percent you specify. Choose between different views and customize color, size and more.

The Number Counter module is great for showing things like statistics or sales in a visual way. For example, if you held a fundraiser, you could use a Number Counter to display how much you raised, or how close you are to your goal.

Number Counter Module Overview



Posts, Posts Carousel & Posts Slider

Insert a display of posts or pages into a layout.

Posts, Posts Carousel and Posts Slider all offer a way to insert a display of posts or pages into a layout. The difference between them is the way the posts or pages are displayed and the configuration options for layout, content, and style. The Posts module and the Posts Carousel both have multiple layouts you can choose from, while the Posts Slider has only one.

For an in-depth look at each module and its available layouts, refer to Page Builder's article:

Posts, Posts Carousel & Posts Slider Modules Overview



Pricing Table

Pricing table module

If your site sells a product or a series of products, the Pricing Table module will let your users easily compare them. You have the option to display the product name, price, frequency for recurring costs, features, and a button.

Pricing Table Module Overview



Slideshow

Slideshow module

If you have a gallery of images or even just a few, use the Slideshow module to display them. The Slideshow module will cycle through one image at a time. You can set the slideshow to play automatically at any speed, or you can add navigation controls to allow the user to cycle through manually. Customize your slideshow with playback and control settings.

Slideshow Module Overview



Social Buttons

Social buttons module

With the social buttons module, visitors can like or share your content on their social media pages. If visitors post your content, it will automatically insert a link to the current page or any URL you specify.

Social Buttons Module Overview



Tabs

Use the Tabs module to insert tabbed content into your page. Tabs are useful for displaying a large amount of content in a small space. For example, this article uses the Tabs module.

Each tab has a label and a text box, which functions just like the WordPress Text Editor. You can also add media from the Media Library. You can display your tabs in either a horizontal or vertical layout.

Tabs Module Overview



Testimonials

Testimonials module

A basic set of sliders where you can display images and text. They don’t necessarily need to be testimonials. You could have a selection of photos with captions, or a collection of inspiring quotes.

You can add as many slides as you would like. Each slide has a Text Editor box, so you can add anything a WordPress Text Editor accepts, such as headings, text, and images. You also have options to customize autoplay, animation effects, and navigation.

For a more complex slider, refer to Slideshow.

Testimonials Module Overview