Isotope: Recreating the Demo - Contact Page

Introduction

The Contact example page demonstrates how you can create a beautiful page with the Isotope theme. Here is some information to help you replicate this page as it appears in the demo.

Widgets and Particles

Below is a brief rundown of the widgets and particles used to make up the demo page.

1

Header - Info List (Particle)

2

Above - Block Content (Particle)

3

Mainbar - Page Content

4

Aside - Custom HTML (Particle)

5

Aside - Contact (Particle)

6

Expanded - Custom HTML (Particle)

7

Extension - Custom HTML (Particle)

8

Bottom - Text (Widget)

9

Bottom - Newsletter (Particle)

10

Bottom - Text (Widget)

1. Header
2. Above
3. Mainbar
4. Aside
5. Extension
6. Bottom

Header Section

This area of the page is a Info List particle. You will find the settings used in our demo below.

Particle Settings

Block Settings

Above Section

This area of the page is a Block Content particle. You will find the settings used in our demo below.

Particle Settings

Block Settings

Mainbar Section

The Mainbar section is set to 60% width and both the Sidebar and Aside sections are set to 20%.

The page's contact form is a Contact Form particle.

Settings used in our demo for each of these particles can be found below.

Contact Form

Particle Settings

Block Settings

Aside Section

The Aside section is set to 20% width.

This area of the page is made up of two particles, a Custom HTML particle and a Contact particle.

Custom HTML (Particle)

Particle Settings

Custom Output

Enter the following in the Custom Output text editor.

<p><img src="gantry-media://rocketlauncher/pages/contact/img-01.jpg" alt="image"></p>
<p><strong>Isotope</strong> is only available as part of the Club Subscription. Please use the RocketLauncher to install an equivalent of the demo onto your site.</p>

Block Settings

Contact (Particle)

Particle Settings

Block Settings

Expanded Section

This area of the page is an Infolist particle. You will find the settings used in our demo below.

Info List (Particle)

Particle Settings

Extension Section

This area of the page is an Info List particle. You will find the settings used in our demo below.

Particle Settings

Block Settings

Bottom Section

1

Text (Widget)

2

Newsletter (Particle)

3

Text (Widget)

This area of the page is made up of three particles.

Text (Widget)

The Text widget here was placed in the Bottom A widget position. The widget position is created within the layout manager by using a Widget Position particle. The particle is assigned bottom-a as a key and gantry as its Chrome.

Below, you will find the widget settings we used in the demo:

Widget Settings

Newsletter (Particle)

The Newsletter particle here was placed in the Bottom B widget position. The widget position is created within the layout manager by using a Widget Position particle. The particle is assigned bottom-b as a key and gantry as its Chrome.

Below, you will find the particle settings we used in the demo:

Particle Settings

Text (Widget)

The Text widget here was placed in the Bottom C widget position. The widget position is created within the layout manager by using a Widget Position particle. The particle is assigned bottom-c as a key and gantry as its Chrome.

Below, you will find the widget settings we used in the demo:

Widget Settings

Content

<div class="g-grid g-sample-sitemap">
  <div class="g-block">
    <ul class="nomarginall noliststyle">
      <li><a href="http://demo.rockettheme.com/live/wordpress/isotope/">Home</a></li>
      <li><a href="http://demo.rockettheme.com/live/wordpress/isotope/overview/">Features</a></li>
      <li><a href="http://demo.rockettheme.com/live/wordpress/isotope/typography/"><span class="hidden-tablet">Typography</span><span class="visible-tablet">Content</span></a></li>
      <li><a href="http://demo.rockettheme.com/live/wordpress/isotope/particles/">Particles</a></li>
      <li><a href="http://demo.rockettheme.com/live/wordpress/isotope/block-variations/">Variations</a></li>
    </ul>
  </div>
  <div class="g-block">
    <ul class="nomarginall noliststyle">
      <li><a href="http://demo.rockettheme.com/live/wordpress/isotope/typography/">Buttons</a></li>
      <li><a href="http://demo.rockettheme.com/live/wordpress/isotope/overview/">Pages</a></li>
      <li><a href="http://www.rockettheme.com/docs/wordpress/themes/isotope">Guide</a></li>
      <li><a href="http://www.rockettheme.com/forum/wordpress-theme-isotope">Support</a></li>
      <li><a href="http://www.rockettheme.com/wordpress/themes/isotope">Download</a></li>
    </ul>
  </div>
</div>