Stack - WordPress Theme

Contents

1. Stack - Introduction & Getting Started

2. Stack - How To Install Your Theme

3. Stack - Installing Theme Plugins

4. Stack - Installing WooCommerce

5. Stack - Importing Demo Data (One Click Method)

6. Stack - Importing Demo Data (Fallback Method)

7. Initial Theme Setup

8. Stack - Theme Options Overview

9. Stack - Using Visual Composer

10. Assigning Visual Composer to Portfolio/Ebor Mega Menu Pages

11. Stack - Applying Gradients to a Section

12. Stack - Custom Visual Composer Blocks Overview

13. Stack - Portfolio Overview

14. Stack - Team Overview

15. Stack - Ebor Mega Menu Overview

16. Stack - Post Type Options Overview

17. Stack - Creating Tabbed Sections

18. Stack - VC Rows Special CSS Classes

19. Stack - Troubleshooting Your Installation

20. Setting Up Your Instagram Feed

21. Creating a Google Maps iFrame

22. How do I reorder categories/posts etc?

23. Common Issue Troubleshooting

24. Theme support Policy

25. How To Rate Your Theme

26. Stack - Using Variant Page Builder

27. Stack - Developing with Stack

28. Stack Update Details

29. Stack - Tweaks and Knowledgebase

30. Stack - Creating Single Page Menus

1. Stack - Introduction & Getting Started

2. Stack - How To Install Your Theme

Installing your new theme is very straight forward and should be familiar to anyone who has worked with WordPress to any degree before, however we will outline the process here for you to ensure a trouble-free installation.

To begin, head to your WordPress dashboard and navigate to Appearance in the main menu, from the sub-menu on this page you will then need to select Install Theme, followed by the Upload button. You can see these steps in the animation below.

Its importing you upload the correct zip. By default most users will download the entire package when purchasing a theme, this needs to be unzipped and within this you will see various files and folders covering documentation, demo-data and of course the theme itself - typically the zip you need to upload will have a name similar to ;themename.zip - this is the one to upload here.

Once the upload has taken place, you will need to hit the Activate button to begin using your awesome new theme.

If your working with a fresh installation of WordPress, one final step you may wish to follow is to set your sites permalinks to something a bit nicer to look at (for a details overview of this settings you can view our Blog Post). To apply 'pretty permalinks' to your WordPress installation, just head to Settings > Permalinks and set the option to 'Postname'.

3. Stack - Installing Theme Plugins

When you first install the theme you'll see a popup on your dashboard from the theme asking you to install a number of plugins.

Allow the theme to install these for you. The plugins which are installed are dependent of the theme, the images below are for illustrative purposes only. 

TIP - You can install all plugins at the same time by checking the box at the top of the this list, see below for an example HOWEVER, its advisable to only install the Page Builder you wish to use only, as the demo data provided is in two separate package (one for Variant and another for VC to avoid duplication)

Once done (the process should take no more than a few minutes) You will see a confirmation notice similar to the image below. 

Now you have the themes plugins installed, you can continue to the next stage of the setup and import the demo data without any issues.

4. Stack - Installing WooCommerce

Your theme is ready for WooCommerce if you need eCommerce in your theme. There’s 2 steps to set this up, but you should also consider installing my demo data with WooCommerce pages and posts to make your life easier after setting up the plugin.

Install WooCommerce

 

Go to “plugins” => “add-new” => “install” and search for WooCommerce & then run the installer.

Run the Woo Setup Wizard

 

Once activated, WooCommerce will take you to a setup screen - simply follow along each set of options and the plugin will install and setup the pages for you the pages for you.

Install WooCommerce Demo Data

By far the easiest way to use WooCommerce is to first install the WooCommerce demo data and then configure it to your needs, you already have all the required WooCommerce pages installed so now we just need to populate them.

Head to the Demo XML Data folder in your download, the data we’re after is called woocommerce.xml

For details on importing this data, head to the Installing the demo data section of this documentation.

WooCommerce is now set up

That’s all you need to do to get a fully functioning shop within your theme, with the WooCommerce pages installed and with the WooCommerce demo data installed you’re ready to rock.

You may want a little more help with how to use WooCommerce though, well your theme does not modify any of the default WooCommerce methods of working, so by far the best resource for WooCommerce now is that already written by WooThemes themselves, below is a selection of links worth visiting;

Adding and managing productsGetting Started

Full details of how to add and manage your product base;

Adding and managing products

Handling digital downloads;

Digital Downloads

Handling Coupons

Coupons

Finally, if you really need some 101 help with WooCommerce, WPTuts did a great mini-series which you should take a read of;

WooCommerce 101

5. Stack - Importing Demo Data (One Click Method)

We have created a very simple system which can help you get your new theme setup like the demo in just a few clicks, however its crucial that you install all of the themes required plugins prior to beginning the import.

IMPORTANT NOTICE

When setting up stack you have the choice of two page builders - Variant and Visual Composer, its important to select the builder you wish to use and then install the relevant demo data for that page builder. If you were to install Visual Composer and then install the Visual Composer demo data, the process will not work as expected and you will need to restart.

Once you have selected and installed all of the plugins needed + the page builder you want to use, you can go ahead and start importing the data. To begin single click import, you need to head to Appearance > Import Demo Data - you will be greeted by the following choice

From here, simply click the data package you want to setup, and hit 'Import'. Bare in mind, the import process can take anywhere from 5 to 60 minutes (depending on the speed of your server etc) - you must not navigate away from the page whilst the import takes place (though you are free to open a new tab and browser other areas of your WP dashboard).

6. Stack - Importing Demo Data (Fallback Method)

I have created a folder labeled "Demo XML Data" which contains an export for the Live Preview. The place to upload this XML file is in WordPress under Tools > Import.

Once you've arrived on the Import page, you will click on the "WordPress" link: Wordpress - Install the WordPress importer to import posts, pages, comments, custom fields, categories, and tags from a WordPress export file.

The first time you do this you will get a pop-up prompting you to install the "WordPress Importer". You will need to click "Install Now". Then You will have installed the plugin and need to click "Activate Plugin & Run Importer".

From here you will just need click "Choose File" and select the demo-data.xml file. Then click "Upload file and import".

You will then be prompted to Assign Authors. You can read the description at the top as this explains everything. Note: Make sure you Import Attachments.

Check the box "Download and import file attachments". This will download attachments for images included in the Live Preview demo.

You now just need to wait for the importer to finish. This might take a few minutes depending on your hosting server speed.


7. Initial Theme Setup

Ok, so far we have installed the theme, we have installed the plugins and imported the demo data, whats next? 

The final step in getting your new theme setup and ready for you to edit as you wish is to setup your home page and menu. To begin, head to Settings > Reading, here you will need to set your Front Page.

By default WP is set to show your latest posts, however to make your theme just like our demo you should select a static front page from the pages provided in the demo data.


Please note - is important to set the Posts Page here also (you should find a blog page in the demo data)

Finally, if you have not done so already, its highly advisable to update your permalink settings. To do this, head to Settings > Permalinks and select any option other than default. We recommended 'postname' - as you can see below.


8. Stack - Theme Options Overview

The theme offers many options and customization possibilities - to access them simply head to Appearance > Customize within your WordPress dashboard and explore.

Dont see the option you want? Let us know and we will see what we can do. We love feedback here at TommusRhodus

9. Stack - Using Visual Composer

10. Assigning Visual Composer to Portfolio/Ebor Mega Menu Pages

Since Visual Composer 4.8 - the process of activating VC for use on custom post types such as Portfolio items or Mega Menu Items (depending on your theme) has slightly changed.

The area can now be found under the Role Manager Tab within the Visual Composer settings area

Once here, navigate to the Post Type dropdown and switch from Pages Only to Custom - this will then allow you to check each post type you wish to enable Visual Composer on.


11. Stack - Applying Gradients to a Section

12. Stack - Custom Visual Composer Blocks Overview

13. Stack - Portfolio Overview

14. Stack - Team Overview

Heads Up!

Team posts are automatically show at /team/ on your site, though you can use the page builder to add these to a page instead.

Team posts work just like blog posts. Ensure each team post has a featured image set. You’ll also want to set a job title, and some social icons for each team member using the additional inputs underneath the WP Editor/

15. Stack - Ebor Mega Menu Overview

Our mega menu system offers a very simple to use method of creating stunning dropdowns in no time. The process of creating a mega menu is covered above, but for further details do continue reading.

Creating a Mega Menu

To begin, you will need to create your sub menus (the menus you will want to show within a mega menu column), so head to Appearance > Menus and create 1 to 4 menus - these will be used in the next step, so be sure to create all the menus you need (enough to fill the number of columns you wish to display)

Next, head to Ebor Mega Menu within your WP admin, and select Add New

Within the Mega Menu editing screen you will see a regular content area (area A marked below) as well well as a special meta box (B on the image below) and a featured image area (C)

The content area is used to place text etc to the left of a mega menu item, the featured image area is used as the background for this text and finally you can select the menus you created in 1st step and assign hem to Menu Column 1 > 4

16. Stack - Post Type Options Overview

17. Stack - Creating Tabbed Sections

A powerful feature available in Stack is the all-new tabbed content areas. These allow you to create complex but stunning tabbed areas and are incredibly flexible to use. The video above details how it all works, however you will also find details below.

Step 1 - Add The Block To Your Page

To begin, add the 'Tabs Sections' block to your page 

Step 2 - Adding and Setting Up Tabs

Once the Tabs Sections block is added, you will need need to add a Row within this block, like you see below.

As you will also see in the above animation, as we are using a row as a pseudo tabbed area, you need to open the newly added row settings (via the edit icon) and within the Row Type field, type 'tab' - you can also add the title you would like for the Tab in the Tab Title field above.

Depending on your chosen background style for the tab, you may wish to also add one of the complimentary CSS classes such as 'imagebg' - for details on this please see https://tommusrhodus.ticksy.com/article/9990/

Step 3 - Adding More Tabs

Adding more tabs is simply a case of repeating the above step, just click the + icon and add another row as you wish. Remember, each row is a new section within the Tabbed Content area.


18. Stack - VC Rows Special CSS Classes

Stack uses a few key CSS classes which can be used within Rows to alter the background, orientation and text-alignment - using them is very simple, you just take the class from the list below and add it to the custom class area within a rows settings (seen below)

We will now detail the available classes and what they do.

bg--primary

Quite simply, this will give the row a background based on your primary color selection in the theme options

bg--primary-1

Quite simply, this will give the row a background based on your primary color selection in the theme options

bg--secondary

This will give a row a slightly different, but still light background, ideal for creating visual heirachy on long pages containing many sections

bg--dark

This gives you a darker row (with light text). This is perfect for breaking up your pages sections and giving things more visual appeal.

imagebg

Use this class if your using a background image or gradient for a row or section

remove-column-padding

This class allows the columns within a row to have 0 padding

space--lg

This class adds more spacing around a row

unpad--bottom

Remove padding/spacing from the bottom of a row


19. Stack - Troubleshooting Your Installation

  1. Demo data installed correctly, but there's no imges? You either forgot to import attachments when installing demo data, or your server is configured to not allow incoming attachments. You'll need to go through the theme, posts, portfolios and set featured images accordingly.
  2. Seeing a red warning where a revolution slider should be? You just need to import the demo slider included in your themes Demo XML Data folder provided in your package (see video above).
  3. No Menus?! Help! This is simple, go to appearance -> menus and set your registered menus to a theme location.
  4. I'm getting 404 errors on posts & pages. See the permalinks section of this documentation.
  5. My site is slow to load & pages. See this article.

20. Setting Up Your Instagram Feed

For Stack, Foundry, Padre, Somnus, Machine, LaunchKit, Union, Meetup, Pivot, Acomb and Fulford Users - use the following video guide in conjunction with this article.

For Lydia, Lumos, Kwoon, Hygge, Malory, Kubb and Finch Users - use the following video guide in conjunction with this article.

Due to recent changes in the Instagram API - the process for setting up an instagram feed has become a little trickier, but this guide will help with every step of the way. Essentially you need to create a Client (so Instagram know who you are), and then an access token (the thing that gives your site permission to show images)

IMPORTANT NOTE - You will need to follow these steps using the account you wish to display in your feed, you are not able to show another users feed so using one account (your own for instance) to display anothert users images (your client, for example) will not work.

Step 1 - Creating A Client

To begin, you will need to visit https://www.instagram.com/developer/, where you will be greeted by the following screen.

Hit the 'Register Your Application' button to continue to the next step. On the next screen (seen below) hit 'Register a New Client'

Next, you need to fill in the form provided - most of it is self-explanatory, the key thing to remember is to enter the following in the Valid Redirect URL field

http://www.tommusrhodus.com/instagram/

Ok, step 1 is done, you now have a client, and more crucially, you now have the Client ID you need for the next part. Copy this Client ID into a notepad, you will need it again soon.

Step 2 - Edit Client

Now you have a client, your going to need to allow it to authorise use of your images. To do this, hit the Edit link to begin editing your clients settings.

Once in the settings, head to the Security tab and Uncheck the Disable Implicit OAuth option and hit save.

Step 3 - Putting It All Together

Remember that Client ID from before? Your going to need it here.

To create the Token needed (to enter into the theme options) you will need to copy this url into whatever text/code editor you wish

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID-HERE&redirect_uri=http://www.tommusrhodus.com/instagram/&response_type=token&scope=public_content

Replace the CLIENT-ID-HERE text with your actual client ID and then copy the whole URL (complete with your own ID) into your browser.

Next, you will be asked to Authorise access, just hit the Authorise button and continue to the final step.

Once done, you will be presented with this screen.

Copy the Token provided into the theme settings and your done

TROUBLESHOOTING

1. Receiving a 400 error? You must ensure the redirect URL you are entering is EXACTLY as follows (trailing slash included)

http://www.tommusrhodus.com/instagram/

2. Please note that sadly, the way in which Instagram have changed their API means that HashTag based feeds are currently unavailable. We're happy to have created a system to get user feeds back up and running and will re-add HashTag feeds in the future if we can. Your understanding that we're doing everything within our power is appreciated.

3 - When creating your client for the above steps, you MUST make the clients using the account which contains the images you wish to display. You cannot create a client based on one account, and then expect the feed to be able to show another users images - since the Instagram update this simply cannot work.

21. Creating a Google Maps iFrame

When using the Google Maps page builder block, you will need to use the iframe supplied by Google to create your map.

Creating this iframe is simply, but not very clear.

Simply hit the menu icon on the upper left of the screen, then hit Share and within the popup that appears, select the embed tab - this will give you the iframe code as needed



22. How do I reorder categories/posts etc?

Sadly, by default, WordPress has no easy method built into it for taking control of things such as the order of your Posts, categories (Portfolio, Team, Classes etc based on your theme) - Thankfully there is a very handy plugin which can help - Intuitive Custom Post Order

To install the plugin, simply head to Plugins > Add New and search for Intuitive Custom Post Order - once installed, you will need to head to Settings > Intuitive CPO to set things up. Once there you will see the following screen (the items will vary depending on your theme)

Simply Tick the box next to the content you wish to control and hit save.

Now you can quickly and easily re-order your items by simply dragging them within the WP Dashboard - you can see this wonderful plugin in action below. 

23. Common Issue Troubleshooting

Im seeing a 'stylesheet missing' error when trying to upload the theme
Im setting a max_upload_size error when trying to upload the theme
Where is my Visual Composer/Revolution Slider license?
I cant import the demo data, why?
Im getting a 404 error when viewing my portfolio/team etc
My site is slow to load, why?
Iv received an email saying there is an update, what do I do?
I want to translate the theme into my language/change some wording - what do I do?


Im seeing a 'stylesheet missing' error when trying to upload the theme

This means your uploading the wrong zip package. When downloading your theme you have the option to download the full package, or the installable theme itself.

We suggest to download the whole package, then unzip this to locate your theme.zip file (theme name will change based on your purchased theme.


Im setting a max_upload_size error when trying to upload the theme

Some hosting, especially budget shared hosting, may impose file restrictions for uploads to your WP site. In some cases, installing this plugin and work very well https://wordpress.org/plugins/increase-upload-max-filesize/ however if it fails to work then you will need to contact your hosts to they can make the necessary changes from there end as this is something we cannot help with from a theme point of view.


Where is my Visual Composer/Revolution license?

Premium plugins such as Revolution Slider and Visual Composer may request a purchase code during use. This code is used to provide direct updates and support from the plugins creator and as such is not required or supplied for use with our themes. Our frameworks have been carefully create to ensure your running the latest compatible version at all times, so you have no need to worry. Please note that we manually update our bundled plugins after thorough testing as some plugin updates have bugs that we are unhappy to ship to our customers, you will receive updates when we are happy with the plugin. If you truly require auto-updates from these plugins you’ll need to purchase a personal license, please note this is the same for each theme on themeforest that bundles plugins.


I cant import the demo data, why?

Some budget hosting such as godaddy etc are quite poor and offer little in the way of resources so a large task such as importing a whole demo and images etc can be a little too much for them. In cases like this, the 1st thing you should try is the Fallback method - it uses special plugins to lighten the load and helps in 99% of cases.

if the issue persists, then you will need to contact your hosts who can hopefully increase your servers performance to suit the task.


Im getting a 404 error when viewing my portfolio/team etc

WordPress is a rock solid platform in most cases, but sometimes, when working with a new theme for instance, it needs a little nudge to update all of its core settings etc. If your seeing a 404 error or such when trying to view your projects (or team members, clients etc - depending on your theme)

To do this, simply head to Settings > Permalinks and select 'postname' from the options listed - even if this option is already selected, hit save anyway (this is the nudge we mentioned earlier) - Once done, you should be able to view all your content with no issues.

Should any issues remain, this indicates an issue with your server (the theme has no control of this) so you will need to contact your hosts for further support.


My site is slow to load, why?

As you saw when viewing the demos of our themes, our themes are capable of being blisteringly fast, however you may ocationally notice your site is not loading as fast as you hoped – here you can find some tips for ensuring your new site loads as quickly as possible http://www.tommusrhodus.com/speeding-up-wordpress/


Iv received an email saying there is an update, what do I do?

To update your theme to the latest version, you should re-grab the theme files from the downloads page of your themeforest account. You should then use the this article: http://www.tommusrhodus.com/updating-wordpress-theme-themeforest/


I want to translate the theme into my language/change some wording - what do I do?

Like most WP themes, our theme is translatable via the provide PO file - you can read more about this process here http://www.tommusrhodus.com/wp-basics-translating-your-wordpress-theme/ as well as check out this handy video guide for this task 


24. Theme support Policy

Hey There! Please Read The Following:

These Tickets are not for Customisation requests (theme modification, behaviour changes, moving elements, 3rd party plugin integration etc.) Any ticket relating to customisation will be politely forwarded to -- http://www.tommusrhodus.com/contact/ -- and then your ticket will be closed.

"style.css is missing" scroll to the bottom of this message for the answer.

Want your site to load more quickly? A good web host is the best way to do this, we recommend and use WPEngine for all our theme demos.


I run support Weekdays 9am - 5pm GMT. You can expect a response within 12 - 48 hours, Monday to Friday unless there is a national holiday. Here is a list of UK national holidays: https://www.gov.uk/bank-holidays. Note that "bumps" to tickets put you to the back of my queue, be patient, every ticket is answered promptly.


What these tickets are for:

Help using theme features, bug reports & reasonable feature requests for future updates. Need to update your theme? See here: http://www.tommusrhodus.com/updating-wordpress-them...

What these tickets aren't for:

Any issues relating to 3rd party plugins not recommended by the theme, theme customisations, or theme changes your client requires.

What counts as customisation?

If you want to change the appearance or functionality of the theme by editing or extending the theme's code, then that is customisation, and will not be supported through these tickets. Likewise if your client has a function request that does not exist in the theme, these tickets are not the place to have the theme extended for this.

Do you need customisation work?

If that's exactly what you're here for, you can fill out a custom work form here; http://www.tommusrhodus.com/contact/

Things to check when leaving a ticket:

  1. You must leave a link to your site, if not we will ask you to do this anyway and it will result in a delay to your ticket.
  2. Please be descriptive when leaving a ticket, use screenshots if possible, "doesn't work" is not an acceptable descriptive term and you will be asked to explain further.
  3. Disable all non-theme-recommended plugins, undo any code changes, and ensure you're using a default, unmodified version of the theme files. You'll find a lot of the time this fixes your issue.
  4. Tickets without a validated purchase will not be answered. Properly validate your purchase.
  5. If you have a modified theme, or are using a child theme for modification, we cannot help with bugs. Please present bugs to us within the default, unmodified theme, and we will help every time!
  6. Please note Envato's Licensing covers 1 URL per 1 purchase of a theme: http://themeforest.net/licenses/regular - ticket profiles covering multiple URLs with 1 license code, will be stopped until the remaining licenses are provided.

Cheers & Thanks again for your purchase!


A quick point on theme support: All of my themes are tested and thoroughly scrutinised by themeforest support staff and are confirmed 100% working, if you're having any issues you should be 99.9% sure it's a user error, or a bug I will be happy to fix with you. With this in mind, please keep your tone calm & professional, you will always get the same from me. Any tickets left with vulgar language, or with threatening, unprofessional language will be promptly closed and/or deleted. All tickets left with a calm, professional tone will receive awesome support, as always.


"style.css is missing", no it isn't, one of two things has happened and I can help you with both:

  1. You've bought a HTML template. Was your purchase under $17? Then you've not bought a WordPress theme, you've bought a HTML template, contact Envato support, they can help: http://support.envato.com
  2. You've uploaded the main theme .zip, instead, unzip this, inside you'll find documentation and another .zip called themenameWPTheme.zip <= this is what you should be installing.

25. How To Rate Your Theme

26. Stack - Using Variant Page Builder

To begin editing your page with the Variant Page builder simply click the Variant link available in your WP page editing area or the 'Edit with Variant' link in your WP Admin bar.

You will notice that the available sections panel has opened. Add some sections to your page by clicking on the section thumbnail. You will see that once a section is added to the page, it also gets added to your layout map in the sidebar. Try adding some different content sections and reordering them by dragging their titles up and down in the layout map on the sidebar.

Add a navigation by clicking the 'Navigation Styles' button in the sidebar, select your desired style from the list to add it to your page.

Once you have added sections to your page and edited content. Click the Save icon in the menu and you will see a 'Saved' promt pop up to confirm your new page is ready to go.

Right Clicking within Variant

Many elements such as icon/buttons etc can be edited by simply right clicking on them. This will bring up a inline context menu where you can replace icons/edit URLs etc

27. Stack - Developing with Stack

Pages using Variant not showing images after moving domain

Please note this applies to Variant users only. If you have recently moved domain or moved your site from local to web hosting, there is a small chance you may experience some missing images/404s for certain images. This will be noticeable right away, as images will no longer appear if you have been affected.

If your noticing the issue at all, please do create a ticket and we will be happy to assist.

Adding Custom Variant Blocks

If your looking to create your own bespoke blocks, or even to simply modify one of the blocks provided - the process is very simple when working with Stack.

1 - Setup a Child Theme

This almost goes without saying when working with WP themes but if your not already using one, you will need to setup a child theme to begin, for details on this see http://www.tommusrhodus.com/wp-basics-the-world-of-child-themes/

2 - Create variant_templates folder

Within your new themes folder, create a sub-folder called 'variant_templates' - this will be where your new/edited variant blocks will reside.

3 - Copy The Function Provded Within variant_init.php

At the very end of the file you will see this function

function variant_add_extra_sections($sections) {
    //List your extra sections filenames (don't add .php)
    $extra_sections = array(
        'extra-example-section'
    );
 
    // combine the two arrays
    $sections = array_merge($extra_sections, $sections);
 
    return $sections;
}
add_filter('variant_add_sections', 'variant_add_extra_sections');

Copy this to your child theme, and add your new section names to the array like so as you create/edit your sections.

function variant_add_extra_sections($sections) {
    //List your extra sections filenames (don't add .php)
    $extra_sections = array(
        'extra-example-section',
        'extra-example-section-2',
        'extra-example-section-3'
    );
 
    // combine the two arrays
    $sections = array_merge($extra_sections, $sections);
 
    return $sections;
}
add_filter('variant_add_sections', 'variant_add_extra_sections');

4 - Copy An Original Section To Your Child Theme

Now you can copy over any of the blocks you wish to edit (or simply use as a starting point) and edit as you wish.

5 - Add each new block name as shown above and your all set.

The markup within each block is quite simple - lets take a look at cover-image-1 for example

<!--META-->
<section class="vim" id="variant-cover-image-1" vbr="Cover Image 1" vbp="covers">
<section class="cover space--lg unpad--bottom bg--secondary switchable text-center">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="mt--2">
                    <div class="wysiwyg">
                        <h1>Streamline your workflow</h1>
                        <p class="lead">
                            Build lean, beautiful websites with a clean and contemporary look to suit a range of purposes.
                        </p>
                    </div>
                    <a class="btn btn--primary type--uppercase" href="#customise-template">
                        <span class="btn__text">
                            Launch The Builder
                        </span>
                    </a>
                    <div class="wysiwyg"><span class="block type--fine-print">or <a href="/">view the demos</a></span></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-5">
                <img alt="Image" src="<?php variant_page_builder_demo_img('device-3.png'); ?>">
            </div>
        </div><!--end of row-->
    </div><!--end of container-->
</section>
</section><!--end of meta Section container-->

Essentially the outer wrapper (seen below) is the markup so the builder knows the content within is a 'block' so be sure to keep this in place (whilst editing the title and id as you wish) when creating or customising your own sections.

<section class="vim" id="variant-cover-image-1" vbr="Cover Image 1" vbp="covers"></section>


28. Stack Update Details

tags are removed from the variant content editor to ensure a consistent experience. If you need to add JS or CSS to your site you should use a child theme or a plugin such as https://en-gb.wordpress.org/plugins/custom-css-js/ 

Variant - Simple Lightbox Link Editing - You can now specify your lightbox image links via the WP url editor (this means you can use one image to display your project, and link to another image in the lightbox if you wish)

Stack 1.0.6 New Features (April 18th 2017)

WooCommerce 3 Feature Support Added - Stack no offers support for WooCommerce's new 'zoom on hover' function as well as a neat slider for your product gallery images. To use this simply update your WooCommerce version and your all set. For an example please see http://stack-variant.tommusdemos.wpengine.com/product/apple-ipad/

Social Icons Added To Top Bar - You can now add your social links to the top bar (above the main menu area) - to begin simply head to Appearance > Customize > Header Settings > Header Social Settings and add your profiles as you wish.

You can also enable/disable the new social icons area via Appearance > Customize > Header Settings > Sub Header Settings 

Visual Composer - New Modal/Notification Settings - Modal blocks can now have the trigger button disabled which is ideal if your not using a manually triggered modal.

Variant - New Careers Section Added - You will now find a new Careers block which can be used to display your careers in any page - this block also includes an option to display a particular category only also.

Stack 1.0.7 New Features (April 19th 2017)

Header Overrides Now Available for Search, and Custom Post Archives - By popular demand, we have now added override controls for areas which, untill now, would only use the global header setting. To control which header style is used simply head to Header Settings > Archive Header Settings in the theme options and tweak each available override as you wish.


New Target Controls - You can now set the target (for example if you want a link to open in a new window) for the footer and sub header buttons. These new fields can be found under each relevant button option within the theme options.

Automatic Updates Added - You can now update your theme from within the admin area, just like a theme from wordpress.org - for details on this process please see 

Easy Digital Downloads Support Added - We have added basic integration of EDD, however these styles will be further developed within a future update.

Stack 1.0.8 New Features (May 9th 2017)

Variant - Form Blocks Form Override Added - Form blocks, which typically use Contact Form 7 for there forms by design, can now easily be overridden with your own form plugins shortcode should you wish to use an alternative form plugin.

Variant - New Blog Layouts Added - We have expanded our blog layouts with even more choice! We have now added a stylish "Simple List + Sidebar" option.

Dropdown Menu Width Theme Option Added - You can now choose from 3 neat widths for you menu dropdowns - to do this head to Header Settings > Layout Settings and use the option provided 

Typed Text Speed Option Added - You can now control the speed of the typed text effect to suit your needs. This new option can be found under Site Settings > Typed Text Settings

Variant + Visual Composer - Hide On Mobile Etc Fixed - You can now fully control which items are shown and visible on mobile/desktop etc via the included options, which up until now have not been working as they should.

Stack 1.0.9 New Features (May 17th 2017)

New Header Layouts Added - We have added a trio on nav styles to our already massive list of options. You will now find the new 'Overlay header with dark text & logo', 'Overlay header & top bar with dark text & logo' and 'Centered overlay header with dark text & logo' within the available header layouts in both the theme options and page override areas.

Additional Header Override Added - You can now forgo the nav entirely with a page and simply use an in-page navigator instead.

Post Author Box/Bio Added - By popular demand we have added a traditional style author box which can be used in your blog posts (as well as a new option to disable it if you wish also)

New Social Media Icons Added - To keep up with the ever-changing world of social platforms, we have update the list of available icons to included even more of your favourite social sites.

Basic Sensei Plugin Support Added - We have added some basic support for the Sensei WP plugin, this will be expanded on in a future update.

Visual Composer - Modal/Notification Blocks Button Style Setting Added - When using the modal blocks within VC, we have added an option to control the button style used to launch the modal - this allows you to use a nice bold primary button to really grab attention

Variant - In Page Navigator Removed - This block has now been removed from Variant - so to use an in-page navigator please use the page overrides mentioned above.

Stack 1.1.0 New Features (May 19th 2017)

New Theme Option - Enable/Disable Header Cart Icon on mobile/desktop - You can now head to Appearance > Customize > Header Settings > Sub Header Settings to enable or disable the cart icon (if your using WooCommerce of course) on both mobile and desktop menus.

New Theme Option - Choose Between Dropdown Filters and Horizontal Filters - You can now select an alternative filtering style for your filterable items such as blog feeds etc, simply head to Site Settings > Global Settings and choose your desired style.

New Theme Option - Enable/Disable 1st Active Tab and Accordions - By default, tabs and accordions will show the 1st item in full upon page load - you can now disable this (to have the 1st item hidden/all accordions closed by default) via Site Settings > Global Settings in the theme options.



29. Stack - Tweaks and Knowledgebase

Increase the size of the menu fonts on mobiles

@media all and (max-width: 768px) {
    .bar-1 .menu-horizontal>li>.dropdown__trigger, .bar-1 .menu-horizontal>li>a {
        font-size: 14px;
    }
}

Center Align Modal Button

.modal-instance:not(.block) {
    width: 100%;
    text-align: center;
}
.modal-instance:not(.block) .btn, .height-80 .modal-instance:not(.block) .btn:hover {
    background: #4a90e2;
    border-color: #4a90e2;
}

Creating Section IDs and Linking To Them In The Menu (Single Page Style)

To create an in page link, you will need to give each section you wish to link a unique id by editing its title like you see below

Once done, head to Appearance > Menus and start adding your new menu items, These items will need to be Custom Link items, pointing to your new unique ID, like this 

Make the twitter widget only show 1 tweet in the footer.

footer .tweets-feed-2 li:last-child { display: none; }

Reduce Logo Size On Mobile

To reduce the logo on mobiles place the following CSS in your custom css area and tweak as you wish

@media all and (max-width: 768px) {
    .bar .logo {
        max-height: 60px;
    }
}

Make labels that are pill shaped into boxes with rounded corners

.label { border-radius: 6px; }

Change the shape of the back to tope button and change its colours

.back-to-top {
    border-radius: 6px;
    background: red;
    border-color: blue;
}
.back-to-top i {
  color: blue;
}

Increase the size of the logo in the footer

footer .logo {
    max-height: 40px
}

Customize Form Placeholder Text Colour

input[type]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder {
     color: #b3b3b3 ;
}
input[type]:-moz-placeholder,
textarea:-moz-placeholder,
select:-moz-placeholder {
     /* Firefox 18- */
     color: #b3b3b3 ;
}
input[type]::-moz-placeholder,
textarea::-moz-placeholder,
select::-moz-placeholder {
     /* Firefox 19+ */
     color: #b3b3b3 ;
}
input[type]:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select:-ms-input-placeholder {
     color: #b3b3b3 ;
}

Remove Cart From Mobile Menu

@media all and (max-width: 768px) {
    .cart-link {
        display: none;
    }
}

Add A Little Space To Single Team Pages on Mobile

@media all and (max-width: 768px) {
    .single-team .space--sm .team-1 {
        margin-left: 0;
        margin-right: 0;
    }
}

Product Tags display underneath Product Price and Name

.card-7 .card__body .card__title h6, .card-7 .card__body .card__title h5 {
    max-height: none;
}
.card-7 .card__body .card__price {
    position: absolute;
    top: auto;
    right: 2.4375em;
    text-align: right;
    bottom: 2.4375em;
}

Align Mobile Menu Icon With Logo

This can happen if you have a very tall, or oddly proportioned logo - to tweak the positioning you can use the following

.hamburger-toggle i {
    postition: relative;
    top: 22px;
}


30. Stack - Creating Single Page Menus

Creating a single page style menu is simple with Stack - the main logic basically means you simply need to give any section you wish to link to a unique ID, which you then link to via Appearance > Menus. The full process is outlined below.

Assigning Section IDs in Variant

You can apply your own section IDs via the Section Title area as seen here.

To do this, simply edit the section you wish to link to, and replace the title with a unique name/id (be sure to keep it simple, no spaces, underscores or hyphens)

Keep a note of any IDs you apply, as you will need to add these to your menu as outlined below

Applying a Section ID with Visual Composer

To give an area and unique ID, simply head to the row settings (the pencil icon) and under Row ID, enter your unique name/ID (be sure to keep it simple, no spaces, underscores or hyphens)

Adding Custom IDs To Your Menu

To apply your new section IDs to your menu, head to Appearance > Menus - here you will see the Custom Links box available to add to the menu, this is what you will use here.

Simply enter a hash (#) followed by your ID, give your menu item any title you want, and add to your menu.