Builder Layouts: Features Layout

From IThemes Codex
Jump to: navigation, search

Contents


The Features Layout layout has 3 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.

Finally, we’ll talk about using Builder’s “Widget Content” feature to populate the feature list.

We’ll walk through each step below.

Layout

  • In the WordPress Dashboard, select My Theme > Layouts and Views.
  • Create a new layout, and name it “Features Layout” 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 “Features" Layout we’ve created:


Features Layout.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 HTML module with no sidebar. We’ll use this section to highlight the content of the page below. Here’s the code we’ve used (replace with your own or tweak):
    <br /><div style="background: #2FC587; color: #FFF; padding: .1em 1em; width: 100%; text-align: center; box-sizing: border-box; font-size: 2em; font-weight: 300;"><br /> <p>Highlight Features using a Widget Bar and the Widget Content post type. This HTML module highlights the page.</p><br /> </div><br />
    
  4. Add a “Widget Bar” module below the HTML module. We’ve decided to use a 3-widget Widget Bar, split evenly at 33%/33%/33%. This is where we’re going to add our “features”.
  5. Add a “Content” module next, with no sidebar. We’re using this area to add additional information pertaining to our features/site.
  6. 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. You might add simple information that describes your features in further detail.

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.

Adding features with Widget Content

Widget Content allows for easy creation of content that can then be added to a sidebar by using the Widget Content widget. We’ll make use of it for our features.

In the WordPress Dashboard, select Widget Content > Add New.

Name your Widget Content appropriately, and add content just like you would add to your pages and/or posts. The beauty of Widget Content is that you can utilize all of the standard formatting features of WordPress, along with inserting media and other content.

We’ve created 6 separate “features” using Widget Content that we’ll add to our Widget Bar Module on our features layout.

In the WordPress Dashboard, select My Theme > Layouts and Views.

If you hover over the Features layout in the layout list, you’ll see a link to “Widgets” for that layout.


Widgets Hover.png


Click this link, and you’ll be taken to that particular layouts’ widget page. The great thing about this is that you won’t have to see all of the widgets for other layouts, only the widgets pertaining to this (Features) layout.

On the widgets page, add your features to the each widget as you deem fit. Here’s a screenshot showing our finalized arrangement:


Widgets Arrangement.png


Check your page and make sure everything looks like you want, and edit where necessary.

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 “features” layout/pages!


← Back to Example Layouts and Views

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox