TABLE DESIGNS

• Category: Content
• Friday, 02 September 2011 14:19
• Hits: 1231

Some table designs:

MINIMAL STYLE

The below exemple has the class set to ".minimal-style"

BOX STYLE

The below exemple has the class set to ".box-style"

ZEBRA STYLE

The below exemple has the class set to ".zebra-style"

ONE COLUMN STYLE

The below exemple has the class set to ".onecol-style"

SIMPLE STYLE

The below exemple has the class set to ".simple-style"

Code for table:

<table class="minimal-style">
    <thead>
        <tr>  
            <th scope="col">Country</th>
            <th scope="col">Population</th>
            <th scope="col">Area</th>
            <th scope="col">Official languages</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>United States of America</td>
            <td>306,939,000</td>
            <td>9,826,630 km2</td>
            <td>English</td>
        </tr>
        <tr>
            <td>United Kingdom</td>
            <td>61,612,300</td>
            <td>244,820 km2</td>
            <td>English</td>
        </tr>
        <tr>
            <td>India</td>
            <td>1,147,995,904</td>
            <td>3,287,240 km2</td>
            <td>Hindi, English</td>
        </tr>
        <tr>
            <td>Canada</td>
            <td>33,718,000</td>
            <td>9,984,670 km2</td>
            <td>English, French</td>
        </tr>
        <tr>
            <td>Germany</td>
            <td>82,060,000</td>
            <td>357,021 km2</td>
            <td>German</td>
        </tr>
    </tbody>
</table>

BUTTON DESIGNS

• Category: Content
• Friday, 02 September 2011 14:19
• Hits: 811

CALL TO ACTION BUTTONS

Shortcode:

You can also use straight css class like .big-button (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="big-button yellow">This is a big yellow button</a>

Shortcode:

You can also use straight css class like .big-button (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="medium-button yellow">This is a medium yellow button</a>

Shortcode:

You can also use straight css class like .big-button (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="small-button yellow">This is a small yellow button</a>

CUSTOM BUTTONS

The shortcode for buttons:

The below examples have the style="1" to the shortcode:

The below examples have the style="2" to the shortcode:

PRICING TABLE DESIGNS (2)

• Category: Content
• Friday, 02 September 2011 14:20
• Hits: 764

Some pricing table designs: asd

FEATURES PRICING TABLE

COLOR STYLE PRESETS

Presets: orange, blue, purple, yellow, turqoise, darkred, red, green, green-lemon

SHORTCODE EXAMPLE:

[pricing_table cols="4" style="orange"]
    [pricing_column title="STARTER" currency="$" price="6.99" order="first" description="starting price per month" button_title="Order Now" button_link="#"]
        [pricing_features]
            <ul>
                <li>2 Users</li>
                <li>2 Workspaces</li>
                <li>5 Clients</li>
                <li>1GB Storage</li>
                <li>Max file size 10mb</li>
                <li>[separator]</li>
                <li>-</li>
                <li>-</li>
            </ul>
        [/pricing_features]
    [/pricing_column]
    [pricing_column title="STANDARD" currency="$" price="9.99" description="starting price per month" button_title="Order Now" button_link="#" highlight="true"]
        [pricing_features]
            <ul>
                <li>5 Users</li>
                <li>5 Workspaces</li>
                <li>10 Clients</li>
                <li>2.5GB Storage</li>
                <li>Max file size 50mb</li>
                <li>[separator]</li>
                <li>Tech Support</li>
                <li>-</li>
            </ul>
        [/pricing_features]
    [/pricing_column]
    [pricing_column title="PROFFESIONAL" currency="$" price="13.99" description="starting price per month" button_title="Order Now" button_link="#"]
        [pricing_features]
            <ul>
                <li>10 Users</li>
                <li>10 Workspaces</li>
                <li>15 Clients</li>
                <li>5GB Storage</li>
                <li>Max file size 100mb</li>
                <li>[separator]</li>
                <li>Tech Support</li>
                <li>High Security</li>
            </ul>
        [/pricing_features]
    [/pricing_column]
    [pricing_column title="ULTRA" order="last" currency="$" price="99.99" description="starting price per month" button_title="Order Now" button_link="#"]
        [pricing_features]
            <ul>
                <li>Unlimited Users</li>
                <li>Unlimited Workspaces</li>
                <li>40 Clients</li>
                <li>15GB Storage</li>
                <li>Max file size 200mb</li>
                <li>[separator]</li>
                <li>Tech Support</li>
                <li>High Security</li>
            </ul>
        [/pricing_features]
    [/pricing_column]
[/pricing_table]

AND TO HAVE A FIRST FEATURE COLUMN (like in the Features Pricing Table):

[header_column title="PLAN" description="PRICING ?" ]
    <ul>
        <li>Users count [help_tip sign="?" content="Nulla dui augue, pretium ac pulvinar ac, molestie ac libero. Praesent sodales convallis nunc, at lacinia tellus ultrices non."]</li>
        <li>Workspaces Count [help_tip sign="?" content="Nulla dui augue, pretium ac pulvinar ac, molestie ac libero. Praesent sodales convallis nunc, at lacinia tellus ultrices non."]</li>
        <li># Clients [help_tip sign="?" content="Nulla dui augue, pretium ac pulvinar ac, molestie ac libero. Praesent sodales convallis nunc, at lacinia tellus ultrices non."]</li>
        <li>Storage [help_tip sign="?" content="Nulla dui augue, pretium ac pulvinar ac, molestie ac libero. Praesent sodales convallis nunc, at lacinia tellus ultrices non."]</li>
        <li>Max file size</li>
        <li>[separator]</li>
        <li>Tech Support [help_tip sign="?" content="Nulla dui augue, pretium ac pulvinar ac, molestie ac libero. Praesent sodales convallis nunc, at lacinia tellus ultrices non."]</li>
        <li>High Security [help_tip sign="?" content="Nulla dui augue, pretium ac pulvinar ac, molestie ac libero. Praesent sodales convallis nunc, at lacinia tellus ultrices non."]</li>
    </ul>
[/header_column]