Example Layouts and How Tos

Content

  1. Ecommerce Product - Full Width
  2. Ecommerce Product - Right Sidebar
  3. Email Signup Example 1
  4. Email Signup Example 2
  5. Event Example
  6. Features Layout
  7. Hero Banner
  8. Landing Page Example 1
  9. Landing Page Example 2

Eccomerce Site Full Width

Note: For this tutorial we’re using iThemes Exchange as the ecommerce platform. If you’re not using Exchange, you might have to tweak your layout/view accordingly.

The Ecommerce Product - Full Width layout has 2 components.

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

The second component is assigning the particular product to use this layout in Exchange.

Layout

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

Steps to reproduce:

  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. Add a “Content” module with a sidebar on the right. Choose an appropriate width for the sidebar.
  4. Finally, we finish off the layout with a footer module, and again, we’re using the default settings.

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

Assigning the Layout to a Product in Exchange

In the WordPress Dashboard, select Exchange > All Products.

(If you haven’t created a product yet, create your product to continue with the following steps.)

  1. Edit your product.
  2. Under the “Advanced” section at the bottom of the product screen, you’ll find a section labeled "Custom Builder Layout”.

  1. From this section, you can choose which layout you’d like to apply to the individual product.
  2. Choose the "Ecommerce Product - Full Width” layout.
  3. That’s it!

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 if you use it as-is. However, experiment and have fun tweaking this layout or creating your own custom Product layout!

Ecommerce Product Right Sidebar

Note: For this tutorial we’re using iThemes Exchange as the ecommerce platform. If you’re not using Exchange, you might have to tweak your layout/view accordingly.

The Ecommerce Product - Right Sidebar layout has 2 components.

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

The second component is assigning the particular product to use this layout in Exchange.

Layout

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

Steps to reproduce:

  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. Add a “Content” module with no sidebar.
  4. Finally, we finish off the layout with a footer module, and again, we’re using the default settings.

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

Assigning the Layout to a Product in Exchange

In the WordPress Dashboard, select Exchange > All Products.

(If you haven’t created a product yet, create your product to continue with the following steps.)

  1. Edit your product.
  2. Under the “Advanced” section at the bottom of the product screen, you’ll find a section labeled "Custom Builder Layout”.

From this section, you can choose which layout you’d like to apply to the individual product. 4. Choose the "Ecommerce Product - Right Sidebar” layout. That’s it!

Wrapping up

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

[ Download this layout ]

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

Email Signup Example 01

The Email Signup Example 1 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 “Email Signup” 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 "Email Signup Example 1" Layout we’ve created:

Steps to reproduce this layout:

  1. Add a module, selecting “Image”. Upload an image you’ve created to depict your product or advertise your email signup form.
  2. Add a “Content” module below the image module, with no sidebar. You’ll use this module to create your email signup form.
  3. 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 very simple Gravity Forms signup section.

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.

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

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 Email Sign-up pages!

Email Signup Example 02

The Email Signup Example 2 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 “Email Signup” 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 "Email Signup Example 2" Layout we’ve created:

Steps to reproduce this layout:

  1. Add a module, selecting “Image”. Upload an image you’ve created to depict your product or advertise your email signup form.
  2. Add a “Content” module below the image module, with no sidebar. You’ll use this module to create your email signup form.
  3. 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 very simple Gravity Forms signup section.

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.

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

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 Email Sign-up pages!

Event Example

The Event Example 1 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 “Event Layout” or a name of your choosing. (We’ve named ours “Event Example 01” for this tutorial.)
  • 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 “Event Example 01" Layout we’ve created:

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 a sidebar at the appropriate width for your site. The HTML module will hold our embedded map code. Here’s the code we’ve used (replace with your own map):
    <iframe width="100%" height="550" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?ie=UTF8&q=Oklahoma+History+Center&fb=1&gl=us&hq=Oklahoma+History+Center+Oklahoma+City,+OK&cid=0,0,9204641149663086976&t=m&ll=35.504073,-97.501345&spn=0.027949,0.05579&z=14&iwloc=A&output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?ie=UTF8&q=Oklahoma+History+Center&fb=1&gl=us&hq=Oklahoma+History+Center+Oklahoma+City,+OK&cid=0,0,9204641149663086976&t=m&ll=35.504073,-97.501345&spn=0.027949,0.05579&z=14&iwloc=A&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
    
  4. Add a “Content” module below the HTML module, with no sidebar. We’re using this area to add additional information pertaining to our event.
  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.

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!

Features Layout

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:

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.

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.

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:

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 ]

Hero Banner

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:

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.

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!

Landing Page Example 01

The Landing Page Example 1 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 “Landing Page” 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 “Landing Page Example 01" Layout we’ve created:

Steps to reproduce this layout:

  1. Add a “Content” module, with no sidebar.
  2. You’re done!

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.

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.

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 landing pages!

Landing Page Example 02

The Landing Page Example 2 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 “Landing Page” 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 “Landing Page Example 02" Layout we’ve created:

Steps to reproduce this layout

  1. Add a “Navigation" module directly below the header, and select your menu type.
  2. Add an “Image” module with no sidebar. Upload an image pertaining to your landing page.
  3. Create an HTML module with no sidebar. We’ll use this section to highlight the content of the page below and add a button. Here’s the code we’ve used (replace with your own or tweak):
    <div style="text-align: center;">
    <h1>Let's go on a journey.</h1>
    <p>This is an example of a product page. You can use any content you feel necessary to try and persuade the viewer to take action on your product or service.</p>
    <br />
    <br />
    <a class="btn" href="http://demos.ithemes.com/layouts-views">Explore With Us</a>
    </div>
    
  4. Next, we’ll add a “Widget Bar” module with 3 widgets split at 33%/33%/33%. We’ll use this module to showcase testimonials, but you can use it however you’d like.
  5. Add a “Content” module, with no sidebar.
  6. Finally, we’ll 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.

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.

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

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 landing pages!

Have more questions? Submit a request
Powered by Zendesk