Builder Layouts: Landing Page Example 02

From IThemes Codex
Revision as of 11:21, December 5, 2013 by Cody (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Contents


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:


Landing Page 02.png


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.


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!

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!


← Back to Example Layouts and Views

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox