Builder Layouts: Email Signup Example 02

From IThemes Codex
Jump to: navigation, search

Contents


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:


Email Subscription 02.png


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.


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


← Back to Example Layouts and Views

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox