Page Builder Tutorials

The Signifyd website is built in WordPress using the Beaver Builder plugin and a child theme of the Beaver Builder theme. The following tutorials provide guidance on editing existing pages and creating new ones.

IntroductionGetting StartedBuilder Components  |  Existing Pages  |  Home

Introduction

Signifyd's Beaver Builder plugin and child theme setup offers powerful capabilities and accessibility for us to build and manage our site. As you work with the layouts, remember that it is also mobile-responsive. Be sure to frequently browser-check your work in a non-logged-in browser window. In Chrome or Firefox, right-click the screen, Inspect and find the toggle button for mobile formats to view the layout in different sizes of smaller screens. 

Getting started

To use the page builder, you will need to be a user of type Editor, Producer or Administrator. To begin, log in to WordPress on the site via the Login Page. Initial login typically puts you on the WordPress Dashboard, from which you can find your way to lists of Pages, Posts (blog) and other custom post types, such as Customers, Manual pages, FAQs, etc. You can also engage editing while viewing a specific page, which we will cover shortly.

  1. To create a new page or post, find the "+ New" menu at the top, or the "Add New" link within the sidebar for the content type you want to create.
  2. Give your new page a main heading/title
  3. Be aware of your desired publication state
    • Save Draft will create the new Permalink URL and preserve document changes but prevent viewing by anonymous users
    • An alternative, under "Status" is "Pending Review"
    • Publish immediately is the default; you can change this to a future date/time for scheduled publication
    • "Publish" will have the effect of making the page visible to any user.
      • This can be just fine, in the case of Pages, Manual, FAQ, and Fraud 101 content types, which are added to navigation manually. Note: Published pages will be indexed by Google within a few days, if this is not prevented.
      • Customers, Posts (blog) and soon Partners and Events will show up in navigation automatically, typically within about 10 minutes, due to caching.
      • There are a number of scenarios in which it is wise to come back here and change the Status to Draft or Pending Review after working with Builder.
    • You can also make a page or post "Private," and in this state, the user must be logged in to view the page. This is a good state for pages in progress or set aside but saved. 
  4. Note the Permalink once it appears. This can be edited here. Should typically match the heading. Doesn't necessarily change when/if the heading changes.
  5. Some pages are set as Child pages using the Parent selector. A typical scenario is one in which there is a parent campaign landing page, and a child confirmation page. Child pages automatically get nested URLs, e.g. signifyd.com/parent/child/
  6. Generally, the Template is Default. Campaign landing pages, where the site-wide header and footer are stripped away in favor of more basic ones, should use "No Header/Footer."
  7. Builder pages aren't edited in the Text Editor tab here in Edit Page. In fact, doing so will break the page from Builder. Instead, one can click the "Page Builder" tab to switch to Builder mode.
  8. You can also use the "View Page" link once saved as Draft, Pending Review or Published.
  9. Page Builder linkWhile logged in and viewing a page, click the "Page Builder" link in the black header to switch to Builder mode.
Page Builder menus

Builder mode

In builder mode, the page's URL will have "?fl_builder" at the end, and the above menu header appears. 

  1. Under the "+" menu are elements that can be dragged onto or applied to the page
  2. The Main Menu contains higher-level commands, settings and features, both for this page, and for the Builder system
  3. The "Done" button provides for post-editing options for what to do next

1. Components menus

Modules menu: Draggable module components. Click and drag any module into a layout, then edit in the Builder dialog box to configure. * Note the sub-menu for Standard Modules, WordPress Widgets, and Saved Modules.
Rows Menu: Rows are sets of columns that can be dragged into layouts for page structure. Sets of columns can be dragged into other column layouts for more complexity. * Note the sub-menu for Columns vs Saved Rows.
Templates Menu: These are full-page templates that can be applied to an entire page, bringing all of the rows, modules and page-level CSS/Javascript saved for the layout.
Saved Menu: Saved Rows and Modules can be found in this menu. Items marked "Global" are identical wherever they are used. If edited, changes appear on ALL pages where featured.

Working with components

Layouts consist of rows of components, each with it's own features and foibles. 

Some layouts will contain extra components that are only visible in Builder mode. These typically are set up to handle mobile and other small-screen contexts, where it is impractical to have the primary component adapt from full-screen to small-screen. The example at right includes two Apple TV components, one for each context. 

Rows and components are generally set up with CSS and scripts for that row or group, if any, embedded within the group, in an HTML component. Often, this will be a main component with visible content, and the with the style and script tags added at the end. However, it is also common for a separate HTML component to be placed in the group somewhere, typically at the bottom. Hover the component set in Builder mode to discover these components. 

Rows, columns and components are generally set up to be self-managing in their layout. For example, two side-by-side columns will automatically collapse to one column per row in small devices. However, there are settings on the column that can change the normal order of left above and right below, when this is desirable for mobile reading, e.g. to make sure photos are always above copy or vice-versa. 

Each element, row, column and component, also has a control where you can set specific margins and padding when needed (see figure). Note the small icon used to cycle through large, medium and small screen contexts, for different settings on each one. 

Changes to existing pages

The best approach to working with existing pages depends on context. Rapid iteration is possible, even advisable, in certain circumstances. If we see an error or typo, we can usually just edit and publish immediately. Changing the design of a high-value, high-traffic page like Home or How it Works probably calls for a more staged approach, with checkpoints and approvals before publication. When in doubt, ask a supervisor how to proceed. 

Things to keep in mind: 

  • WordPress provides controls for what is seen by anonymous users vs. logged-in company users.
  • Our site uses browser caching for better performance, and the cache lasts about 10 minutes, so it can take this long to see changes to existing pages.
  • Once "Published" a new page or changes to an existing page will be visible to users through site navigation quickly
  • Published pages that aren't linked anywhere in navigation, such as campaign landing pages, aren't likely to be seen quickly, but are likely to get indexed from the sitemap within a week or so.

Strategies for pre-publication

  • New Customers, Partners, Manual, FAQ, Fraud 101 pages:
    In Edit mode, set Status to Draft or Pending Review to suppress anonymous publication. Blog post publication is managed in Kapost. 
  • Pages Taken Down (any type):
    In Edit mode, set Visibility to Private to suppress anonymous publication. Additional steps include setting redirects in WP Engine, and periodically deleting Private pages no longer needed. 
  • High-value, high-traffic pages, e.g. Home, How It Works, etc. 
    In Builder mode, select the "Duplicate Layout" item from the Builder menu, upper left. This creates an exact duplicate of the page you were viewing. You can modify the Title, URL and edit away. 
    • The best way to avoid SEO problems is to set the canonical URL to that of the parent page in the duplicate's Yoast box (Edit mode).
    • When completed and approved, switch URLs to swap pages. Changing which page is used as the Home page requires Admin-level powers.
    • IMPORTANT: If the page is used in any menus, you will need to update the menu item, as menu items "stick" to their pages, not the URLs.

Updating Home Page Popup Videos

Updating the Home page is best accomplished by creating a duplicate page and editing that, and when approved, switching the page selected as Home for in WordPress. Here is a summary of the procedure for changing one of the videos. A video demo of adding an extra slide/video is here. You need Editor powers as a minimum for this activity. 

  • Prepare needed assets, such as the YouTube video ID, a screen capture from the new video for the slide image, and the URL of the customer page where the video lives.
  • Log in to WordPress if not already logged in. 
  • View the current Home page and click the Page Builder button in the admin header. 
  • Use the Page Builder menu, upper left corner and select "Duplicate Layout." You will automatically be taken to the new page in Edit mode.
  • Edit the Title and Permalink to something appropriate.
  • Click the Page Builder button, or View the page, and click Page Builder to enter builder mode. 
  • The slider is made up of 4 components:
    1. Slider module. Contains slides, consisting of an image, some text for the overlay and a button with a blank (#) link
    2. Buttons row. Each button triggers a popup window for the video. Contains HTML for the YouTube iFrame and a link to the customer page. Each button module must have a unique ID. 
    3. Page Builder menu. Layout CSS & JavaScript contains two tabs. The script for the slider is in the JavaScript tab. 
    4. HTML module. Additional CSS and the down arrow link are in this module. Shouldn't need editing under most circumstances.
  • If replacing one of the videos, you can use the button module for the one that is being dropped. If adding a video, duplicate the first column containing a button module (not duplicate the module itself). 
  • Click inside the button module to access it's settings. Update the YouTube video ID and the customer page link. IMPORTANT: Change the ID of the module, on the Advanced tab, to reference the customer, e.g. "customername-button." Save the updated module. 
  • Click inside the slider module to access it's settings. Go to the Slides tab. Edit the slide to be dropped. Change the Slide Label, set the new Background Photo, and edit the Text as needed. Save. 
  • Drag the slides to be in the play order desired. Make note of this order, as it is important to the next step. Save. 
  • Use the Page Builder menu to find Layout CSS & JavaScript and click the JavaScript tab. 
  • ClickHandler1 through 3 each have associations with a specific button, via it's ID. Make sure the IDs of the buttons are listed in the new order of the slides. When satisfied, click Save.
  • Click Done > Publish
  • Test each of the slider buttons to ensure it triggers the correct video popup. 
  • Share the new page's URL with reviewers.
  • To finalize publication, the main site Admin (Stefan) will switch the static Home page under Settings > Reading. Flushing the WP Engine cache is also recommended. 
  • After the new page is live, don't forget to View the old page, enter Edit mode, and change Visibility to Private, to ensure the old page doesn't end up indexed in Google.