Builder Layouts: Event Example 01

From IThemes Codex
Jump to: navigation, search

Contents


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:


Event Example 01.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 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.


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.


Screen-Shot-2013-11-26-at-12.35.42-PM.png


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