Skip to content

Interior Page - Layout

Learn how to use the main modules you chose for the homepage layout to create a template for use on internal pages. Make sure you read through the "Why Save a Row, Column, Module or Template?" section under "Saving Templates Important Rules" on the Beaver Builder best practices page before you start following the steps listed in the sections below.

Select Styled Layouts

Picking Styled Modules to Save

Now that the homepage is complete and styled properly, you'll go through the homepage and select certain styled rows, columns and modules that you believe will be used consistently across the site on all interior pages. Before you save any layout from the homepage, make sure it passes the checklist at the end of "Rules for Styling a Module - Before Saving for Reuse" section on the Beaver Builder best practices page:

  • Font family and color haven't been touched unless they differ from the defaults assigned in customizer
  • If the font sizing of the component has been modified for desktop, make sure it's been adjusted for large, medium and small screen devices as well
  • The module has been given a custom class - make sure the class is something unique from another variant of the same module if more than one kind are being saved
  • When saving be sure to give the module a unique and descriptive title

Homepage Hero Row

Once you're happy with how the homepage hero looks and it passes the above checklist:

  • Save the hero row
  • Give it a class like "home-hero"
  • Name it something like "Homepage hero row"

Homepage Content Layouts

For all modules that have been styled in some way to vary from the default settings assigned in the customizer, that have been used on the homepage, and that you plan to use again on the site somewhere: Make sure they pass the checklist, then save them.

Styled modules

To get a better idea of the kinds of modules you should save, here are some examples of modules commonly saved for reuse:

  • Smart headings that have been aligned differently (center is default), colored differently (descriptions are set to black text by default) or made dual
  • H3 headings that have been styled to differ from H2 headings (since the customizer settings only allow separate styling for H1s)
  • Image modules that have been given borders or shadows specific to the branding that should be consistent across the site
  • Buttons that have been styled beyond the default options e.g. adding letter spacing or an icon

You don't have to save everything right away if you aren't sure you'll be using it - just what you think you might use. If you are building out an internal page and realize you used a module somewhere else that you already styled a certain way and haven't saved:

  • Save your progress for the page you're currently building out
  • Open the page you styled the module on in beaver builder
  • Properly name and save the module you wish to use
  • Head back over to the page you're currently building and refresh it
  • You'll find the module under saved modules - use it and swap out the content in it as needed
  • If the module you used somewhere else that you forgot to save was heavily styled, make sure you follow the above steps
  • Don’t just pull another module like it and style it again from scratch - unless you are absolutely sure that you're copying the exact styling you used before - even then, its not a very time efficient approach

Styled columns

If you created callouts for use on the homepage by styling a column a certain way (read how to do this), you may want to use the same styling for columns on interior pages or for columns used as sidebars:

  • Make sure it passes the checklist, then save this callout column
  • Edit the saved column and remove any callout components from it that you wont be using when elsewhere on the site and save it again
  • That way when you reuse the styled column, you wont have to remove each callout component from it every time

Styled rows

If there are rows you styled differently from the others e.g. you subtly styled a row differently to create an alternating appearance on a long-scroll page, you added an image parallax background to a row with a heavy overlay with specifically styled row separators or top/bottom shapes, created a call-to-action row with larger text that usual or exaggerated color styling, chances are you may want to use similar styling again for rows on internal pages.

  • Make sure they pass the checklist, then save them
  • For alternating rows with subtle differences to the main rows or for rows with specifically styled separators or top/bottom shapes, name them something like "Mid Row" or "Alternate Row" and save them - if they have extra modules in them aside from text that you wont repeat on interior pages, edit the saved row and remove those extra modules
  • For call-to-action rows with lots of styling done to both the row and the text inside, name the row accordingly and save it - keep the styled text modules inside so you don't have to re-style them and you can easily swap the content in them as needed

Styled creative modules or row layouts containing them

If you've used a specific kind of module on the homepage, styled it to match the site's branding and may need to use it again on an internal page - make sure it passes the checklist, then save it. Examples of such modules could be: styled list icons, info circles, accordions or tabs, etc.

Interior Page Build-Out

Choose an internal page to start with that has simpler page content - mostly text and a couple rows. If all the pages on the site are very content-heavy or are requested to employ the use of fancier modules, just build out a few content rows for the initial part of this section, and once you have a good template to work with, you can continue building out the rows containing the fancier modules.

Interior Page Hero Row

The hero row on internal pages should be a more "toned down" version of homepage hero, remaining consistent with it in styling and layout.
Guidelines for styling the internal page hero based on the homepage hero's styling:

  • If the homepage hero is a slideshow or video, the internal hero should be a static or parallax image instead
  • If the homepage hero takes up a lot of the screen's height, the internal hero should be shorter in height taking up only about half of the screen or less (unless its been specifically requested to be taller or if it makes sense aesthetically)
  • If any row separator styles / bottom shapes have been added to the homepage hero row's bottom edge, they should also be used on the internal page heroes - if the row separator or shape is heavily exaggerated or very tall, it can be reduced in height or toned down on the internal pages as needed
  • If any color overlays or gradient overlays have been added to the homepage hero, they can also be used on the internal page heroes for branding consistency - they can be increased / decreased in intensity as needed
  • If any exaggerations have been done to the H1 heading in the homepage's hero e.g. font size or fancy text styling, they can be reduced for the H1 heading in internal page heroes
Homepage Hero Row
Internal Hero Row

Steps

Using the homepage hero that you saved, implement the above guidelines to create the internal page hero:

  • Go to your interior page of choice and open beaver builder
  • Find "Homepage hero row" under "saved rows" and drag it onto the page
  • If you've given the homepage hero a class like "home-hero" change it to "interior-hero" on this page
  • Reduce the top and bottom padding
  • Edit the H1 heading styling to remove any excess exaggeration appropriate for the homepage if any
  • If the bottom shape or row separator is to be more pronounced on the homepage, soften it on this internal page row or reduce the height if needed
  • Adjust any row overlays as needed

Making Use of Themer

The following two items are optional modifications to the hero area that make use of Beaver Themer's functionality to automate processes for efficiency. These are not mandatory, but can help a lot by shaving some extra time off the build - they are to be used only if applicable.

Optional adjustment to H1 module

"Make the H1 heading module always pull the page title on which ever page it Is used"

Whether this should be done depends on if the H1 module heading in the hero mirrors the page title and if it will on every internal page. If the H1 module heading is different from the page title, don't do this. Otherwise, follow the steps below:

  • Edit the headings module settings in the hero
  • Click the + to the right of the title field under "heading"
  • Choose "post title" > click "connect"
Internal Page
Step 1
Step 2
Step 3

Optional adjustment to Hero Image

"Allow the background image of the hero row to always pull the assigned featured image of each page its placed on" - its time efficient and its simpler for the customer to change themselves in the future
Step 1
Step 2
Step 4
Step 3
  • Edit the hero row settings
  • Click the + to the right of the photo field under the background photo section
  • Choose "post featured image" > click "connect"
  • Thumbnail (150 x 150) will be chosen by default > change it to "Full Size"
  • You can choose a generic photo background (something relevant to the site) as the default fallback image in case the page doesn't have a featured image set > then save

The hero row will now always pull the assigned featured image of every page its used on as its background image, and in the cases that no featured image is assigned to the page, the default fallback image will appear as the background instead

Template Creation

Interior Page Content

After completing the internal hero layout:

  • Go to your saved rows and pull the next row type you've saved for reuse onto your interior page
  • If you are merely swapping out content and not altering any styling on the row, leave the row class the same
  • If you are adjusting the row slightly for use on interior pages as compared to how its styled on the homepage, change the class from what you called in on the homepage, to something relevant to its use on the interior page
  • Pull any other rows like your alternate row or cta row onto this internal page, or create rows using the modules that you think you'll be using on just about every page with content and images in them that are easily swappable.

Save The Template

When you are happy with the basic few items that you'll use as a foundation for each internal page, and add to or subtract from based on the content, save your layout as a template. Name the template something like "internal page layout."
Step 1
Step 2

Continue with page build

Once your foundation template is saved, add all the extra content and additional rows or features specific to the page you're working on, if any. When you're done, head over to the next page and open beaver builder:

  • Find "internal page layout" under "saved templates" and click it
  • If you've used the optional hero H1 and image modifications with themer, the title and image will auto adjust to that of the new page you're building
  • Swap any content from the template with the content provided for that page
  • Add all the extra content and additional rows or features specific to the page you're working on as needed
Table of Contents
    Add a header to begin generating the table of contents
    Scroll To Top