Callisto: Recreating the Demo - Pricing Page

Introduction

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

Any Custom HTML particles are available and set in the Layout Manager, not as Custom HTML modules.

Layout Manager

This is a look at the Layout Manager for the Callisto - Pages - Pricing outline. We have detailed the various particles represented here in the sections below.

Modules and Particles

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

1

Header - Logo

2

Header - Icon Menu

3

Navigation - Menu

4

Navigation - Social

5

Showcase - Custom HTML

6

Mainbar - Custom HTML

7

Mainbar - Custom HTML

8

Mainbar - Custom HTML

9

Mainbar - Custom HTML

10

Mainbar - Custom HTML

11

Mainbar - Custom HTML

12

Mainbar - Content List

13

Mainbar - Info List

14

Mainbar - Info List

15

Mainbar - Info List

16

Extension - Custom HTML

17

Footer - Custom HTML

18

Footer - Newsletter

19

Footer - Custom HTML - Copyright

20

Copyright - Copyright

1. Header
2. Navigation
3. Showcase
4. Mainbar
5. Extension
6. Footer
7. Copyright

Header Section

1

Logo (Particle)

2

Icon Menu (Particle)

The Header section is made up of a position and two particles set in two rows. The first row hosts the System Messages position which remains invisible unless a system message is being displayed to the visitor.

In the second row, we have a Logo particle and an Icon Menu particle which make up the visual body of this area of the site. Settings used in our demo for each of these particles can be found below.

Logo (Particle)

Particle Settings

Block Settings

Icon Menu (Particle)

Particle Settings

Block Settings

Navigation Section

1

Menu (Particle)

2

Social

The Navigation section is made up of two particles. The first is a Menu particle which displays a CMS-sourced menu which can be enhanced through Gantry's Menu Editor. The second particle in the section is the Social particle, displaying social links.

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

Menu (Particle)

Particle Settings

Block Settings

Social (Particle)

Particle Settings

Block Settings

Showcase Section

The Showcase section contains a single Custom HTML particle. Settings used in our demo for this particle can be found below.

Custom HTML (Particle)

Particle Settings

Custom HTML

<div class="g-layercontent g-layercontent-small">
    <h2 class="g-layercontent-title">Awesome Plans</h2>
    <div class="g-layercontent-subtitle">Choose the Plan That Suits Your Needs</div>
</div>

Block Settings

Mainbar Section

1

Custom HTML 1

2

Custom HTML 2

3

Custom HTML 3

4

Custom HTML 4

5

Info List 1

6

Info List 2

The Mainbar section itself renders as 100% of the page width as there are no particles or positions assigned to the Sidebar section. With this in mind, the Mainbar section is set to 67% width and the Sidebar section to 33%.

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

Custom HTML 1 (Particle)

Particle Settings

Custom HTML

<ul class="g-pricingtable">
    <li class="g-pricingtable-title">Basic</li>
    <li class="g-pricingtable-price">$28</li>
    <li class="g-pricingtable-desc">Globally incubate standards compliant channels</li>
    <li class="g-pricingtable-item">5GB Storage</li>
    <li class="g-pricingtable-item">10 Users</li>
    <li class="g-pricingtable-item">20 Emails</li>
    <li class="g-pricingtable-item">Online Store</li>
    <li class="g-pricingtable-item">Custom Domain</li>
    <li class="g-pricingtable-item">Unlimited Departments</li>
    <li class="g-pricingtable-cta"><a href="http://www.rockettheme.com/joomla/templates/callisto" class="button button-3">Sign Up</a></li>
</ul>

Block Settings

Custom HTML 2 (Particle)

Particle Settings

Custom HTML

<ul class="g-pricingtable">
    <li class="g-pricingtable-title">Standard</li>
    <li class="g-pricingtable-price">$58</li>
    <li class="g-pricingtable-desc">Globally incubate standards compliant channels</li>
    <li class="g-pricingtable-item">5GB Storage</li>
    <li class="g-pricingtable-item">10 Users</li>
    <li class="g-pricingtable-item">20 Emails</li>
    <li class="g-pricingtable-item">Online Store</li>
    <li class="g-pricingtable-item">Custom Domain</li>
    <li class="g-pricingtable-item">Unlimited Departments</li>
    <li class="g-pricingtable-cta"><a href="http://www.rockettheme.com/joomla/templates/callisto" class="button button-3">Sign Up</a></li>
</ul>

Block Settings

Custom HTML 3 (Particle)

Particle Settings

Custom HTML

<ul class="g-pricingtable">
    <li class="g-pricingtable-title">Pro</li>
    <li class="g-pricingtable-price">$88</li>
    <li class="g-pricingtable-desc">Globally incubate standards compliant channels</li>
    <li class="g-pricingtable-item">5GB Storage</li>
    <li class="g-pricingtable-item">10 Users</li>
    <li class="g-pricingtable-item">20 Emails</li>
    <li class="g-pricingtable-item">Online Store</li>
    <li class="g-pricingtable-item">Custom Domain</li>
    <li class="g-pricingtable-item">Unlimited Departments</li>
    <li class="g-pricingtable-cta"><a href="http://www.rockettheme.com/joomla/templates/callisto" class="button button-3">Sign Up</a></li>
</ul>

Block Settings

Custom HTML 4 (Particle)

Particle Settings

Custom HTML

<h2 class="g-title">Try it Out for 10 Days Free</h2>
<ul>
    <li>All plans come with awesome support by email and phone. There is no hidden fee!</li>
    <li>Free <strong>10 days trial</strong> on all plans. No credit card needed! Need a bigger plan? <a href="http://www.rockettheme.com/joomla/templates/callisto">View Professional Plan</a>.</li>
</ul>

Block Settings

Info List 1 (Particle)

Particle Settings

Block Settings

Info List 2 (Particle)

Particle Settings

Block Settings

Extension Section

The Extension section contains a single Custom HTML particle. Settings used in our demo for this particle can be found below.

Custom HTML (Particle)

Particle Settings

Custom HTML

<div class="g-layercontent">
    <h2 class="g-layercontent-title">No Hidden Fees</h2>
    <div class="g-layercontent-subtitle">No Credit Card Required and No Long-Term Contracts</div>
    <a href="#" class="button button-2">Sign Up</a>
</div>

Block Settings

Footer Section

1

Custom HTML 1

2

Newsletter

3

Custom HTML 2

The Footer section is made up of three particles in a single row. This includes a Newsletter particle surrounded by two Custom HTML particles.

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

Custom HTML 1 (Particle)

Particle Settings

Custom HTML

<h2 class="g-title">About Callisto</h2>

<p>All demo content is for sample purposes only, intended to represent a live site.</p>

<p>The sample pages are intended to show how Callisto can be constructed on your site.</p>

Block Settings

Newsletter (Particle)

Particle Settings

Heading Text

Subscribe to our newsletter and stay updated on the latest developments and special offers!

Block Settings

Custom HTML 2 (Particle)

Particle Settings

Custom HTML

<h2 class="g-title">Sample Sitemap</h2>

<div class="g-grid">
    <div class="g-block">
        <ul class="nomarginall noliststyle">
            <li><a href="#">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Typography</a></li>
            <li><a href="#">Particles</a></li>
            <li><a href="#">Variations</a></li>
        </ul>       
    </div>
    <div class="g-block">
        <ul class="nomarginall noliststyle">
            <li><a href="#">Buttons</a></li>
            <li><a href="#">Pages</a></li>
            <li><a href="#">Guide</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#">Download</a></li>
        </ul>       
    </div>  
</div>

Block Settings

Copyright Section

The Copyright section contains a single Copyright particle. Settings used in our demo for this particle can be found below.

Custom HTML (Particle)

Particle Settings

Block Settings