Kraken: Recreating the Demo - Contact Page

Introduction

The Contact example page demonstrates how you can create a beautiful page with the Kraken 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

Showcase - Custom HTML (Particle)

2

Above - Custom HTML (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

Footer - Custom HTML (Particle)

9

Footer - Custom HTML (Particle)

10

Footer - Custom HTML (Particle)

1. Showcase
2. Above
3. Mainbar
4. Aside
5. Extension
6. Bottom
7. Footer

Showcase Section

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

Custom HTML (Particle)

Particle Settings

Custom HTML

<div class="g-layercontent g-layercontent-small">
  <h2 class="g-layercontent-title">Contact</h2>
  <div class="g-layercontent-subtitle">Keep in Touch with Us</div>
</div>

Block Settings

Showcase Section

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

Custom HTML (Particle)

Particle Settings

Custom HTML

<div class="g-grid">
  <div class="g-block box-blue center  size-33-3">
    <div class="g-content ">
      <span class="fa fa-envelope fa-3x"></span>
      <h2 class="g-title">Email</h2>
      <p>Collaboratively administrate empowered markets via available great networks.</p>
      <a class="button button-4" href="/">Send Email</a>
    </div>
  </div>
  <div class="g-block box-orange center  size-33-3">
    <div class="g-content ">
      <span class="fa fa-phone fa-3x"></span>
      <h2 class="g-title">Phone</h2>
      <p>Collaboratively administrate empowered markets via available great networks.</p>
      <a class="button button-4" href="/">Talk Now</a>
    </div>
  </div>
  <div class="g-block box-grey center  size-33-3">
    <div class="g-content ">
      <span class="fa fa-comments fa-3x"></span>
      <h2 class="g-title">Chat</h2>
      <p>Collaboratively administrate empowered markets via available great networks.</p>
      <a class="button button-4" href="/">Ask Us</a>
    </div>
  </div>
</div>

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>Kraken</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 a Custom HTML particle. You will find the settings used in our demo below.

Custom HTML (Particle)

Particle Settings

Custom HTML

<div class="g-layercontent">
  <h2 class="g-layercontent-title">Got Billing and Payments Questions?</h2>
  <div class="g-layercontent-subtitle">Email Us for Questions Involving Payments, Billing, and Membership.</div>
  <a href="http://www.rockettheme.com/wordpress/themes/kraken" class="button button-2">Send Email</a>
</div>

Block Settings

Footer Section

1

Logo (Particle)

2

Horizontal Menu (Particle)

3

Social (Particle)

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

Logo (Particle)

Particle Settings

Block Settings

Horizontal Menu (Particle)

Particle Settings

Block Settings

Social (Particle)

Particle Settings

Block Settings