Builder Layouts: Hero Banner

From IThemes Codex
Jump to: navigation, search

Contents


The Hero Banner layout has 2 components.

The first component is the layout that contains the building blocks of the page.

The second component is assigning the layout to a page we’ve created.

We’ll walk through both steps below.

Layout

In the WordPress Dashboard, select My Theme > Layouts and Views. Create a new layout, and name it “Hero Banner” or a name of your choosing. Choose a width. To decide on a width, you would most likely base it off of the width of the rest of your site. Of course, you can choose any width with Builder.

Below the settings section, you’ll find the Design options. This is where you’ll start to add modules to create a new layout.

Here’s a screenshot of the “Hero Banner" Layout we’ve created:


Hero Banner.png


Steps to reproduce this layout:

  1. Add a module, selecting “Header”. Use the default settings.
  2. Add a “Navigation" module directly below the header, and select your menu type.
  3. Create an “Image” module with no sidebar. You’ll want to upload an image you’ve created to act as the “hero” element on the page.
  4. Add a “Content” module below the image module with a sidebar at the width of your choosing.
  5. Finish by adding a “Footer” module, with the default settings.


That’s it for the layout portion. Now, let’s talk about the assigning the layout to a page.

Assigning the Layout

In the WordPress Dashboard, select Pages > Add New.

Name your Page, and add your content. We’ve added simple information along with a photo at the top.

Depending on your settings, you should see a block on your page’s edit screen labeled “Custom Builder Layout”. Choose the layout you’ve created for this page by selecting it in the drop-down list.


Email Subscription 01 Selection.png


Publish or Update your page, and you’re done! (Be sure to add a link to the page so visitors can find it!

If you’d like to add information to the sidebar of the HTML module, you can either choose to use a text widget, or you can add a new “Widget Content” widget. That’s what we’ve chosen to do in this example.

Wrapping up

You can download this layout and view combination to import into your own site below:


[Download this layout]


Be sure to upload your own photo to the layout if you use it as-is. However, experiment and have fun tweaking this layout or creating your own custom event pages!


← Back to Example Layouts and Views

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox