Corporate Weebly Theme Instructions

1. Introduction

Thank you for purchasing the Corporate Weebly Theme designed by WebfireThemes.com.
This theme has been designed using Webfire Theme's new Design platform and includes great features to help you build a professional website easily, quickly and with great results.
This theme comes with the option to purchase Content Ready page layouts. These are pre-designed page layouts for the homepage and about us page (the two most visited pages on any website) with a mixture of drag and drop areas and hard-coded content areas which can be edited simply by clicking and entering the content you want. If you have not taken this option, you can add the content ready pages as a bolt on to this theme via our website.
In the theme, we have also included all instructions as helper boxes which are visible via the weebly editor. These will not be published with the site and will only ever be visible via the weebly control panel.

CONFIG and LIVE Page Layouts

Each Page Layout (with the exception of "coming-soon") has two variations:

Config - for building and configuring the page in the weebly dashboard
Live - for the live version published to the web
Whichever page layout you decide to use for your website, you should select the *-config version first. Build your site using the config variation of the page layout.
This includes all the helper boxes. Once you've created your website and are ready to put it live you should switch your page layout to *-live.
This will remove the helper boxes for your published website (The reason this is important is because google still reads the content on the helper boxes,
which is BAD for SEO (Search Engine Optimisation).
If you need to make further changes to your site, and need the helper boxes to appear again, simply change your page back to *-config to make the changes

The page layouts available are as below:

1a. "cr-homepage1-config.html" - This is the Content Ready Homepage (with slider). Use the *-config.html version to build the site.
1b. "cr-homepage1-live.html" - Once you have built the site, point the page to the *-live.html version and publish to make live.
2a. "cr-homepeage2-config.html" - This is the Content Ready Homepage (without slider). Use the *.config.html version to build the site.
2b. "cr-homepage2-live.html" - Once you have built the site, point the page to the *-live.html version and publish to make live.
3a. "CR-about1-config.html" - This is the content Ready About page. Use the *.config.html version to build the page
3b. "cr-about1-live.html" - Once you have built the site, point the page to the *-live.html version and publish to make live.
4a. "homepage-slider-config.html" - This is the standard homepage (with slider). Use the *-config.html version to build the site.
4b. "homepage-slider-live.html" - Once you have built the site, point the page to the *-live.html version and publish to make live.
5a. "homepage-noslider-config.html" - This is the standard homepage (without slider). Use the *-config.html version to build the site.
5b. "homepage-noslider-live.html" - Once you have built the site, point the page to the *-live.html version and publish to make live.
There are also a page layout for portfolio, sidebar (global and non global) these both follow the same principle as the ones listed above.

Now you're ready to get started. We strongly advise you read through the instructions page before getting started...

2. Getting Started

Before you make a start, you'll notice the homepage is set to be this instructions file. We recommend the first step you take is to create a new page for "instructions" and associate it to the index.html page layout. This way you will be able to refer back to this instruction file whenever you need to without keeping it as the homepage. Alternatively you can copy and paste the contents of this page into a word document and refer back to that. To setup the page like we recommend do this:
1. Click on pages > ADD > Standard Page
2. Name the page Instructions
3. Ensure the Index.html page layout is selected.
4. Change the Home page to the page layout you want to use.
5. Click Save and Edit.
Now you can set your homepage to use your preffered page layout.

3. Icons

this theme makes the most of two sets of icons. Icons can be used in text or in many of the widgets.
There is no way to integrate these icons directly with the weebly dashboard so you do need to change these manually in the code. The instructions in this file clearly show you where to change the code.

Font Awesome Icons
You can find the list of icons and their codes in the Font Awesome Icon set at this link http://fortawesome.github.io/Font-Awesome/icons/
Wherever there is a widget being used that includes an icon, you will see a line of code that looks like this: <i class="fa fa-twitter"></i>
To change the icon just replace the code for that icon. EG: <i class="fa fa-facebook"></i>

Custom Icon Set
We have also included a set of custom icons that can be used. To view these Icons, please go to this link: http://wft-corporate.weebly.com/icons.html

4. Custom HTML Widgets

On any Drag and Drop content area we have included html code below that can be inserted into the Embed Custom Code element via the weebly dashboard. Simply copy and paste the code below to insert the widget via the drag and drop section.
The text that is BOLD in the code below is where you insert your own text after copying and pasting.
Anywhere you see this *LINK* should be replaced with a link. EG: <a href="*link*"> would be replaced with <a href="http://www.google.com">
To see the widgets in action, take a look at our demo page http://wft-corporate.weebly.com

Accordion

<div class="accordion"> <a class="accordion-item" href="#">Accordion Item 1</a> <div class="accordion-item-content"> <p>CONTENT</p> </div> <a class="accordion-item" href="#">Accordion Item 2</a> <div class="accordion-item-content"> <p>CONTENT</p> </div> <a class="accordion-item" href="#">Accordion Item 3</a> <div class="accordion-item-content"> <p>CONTENT</p> </div> </div>

Toggle

<div class="toggle"> <a class="toggle-item" href="#">Toggle Item 1</a> <div class="toggle-item-content"> <p>CONTENT</p> </div> <a class="toggle-item" href="#">Toggle Item 2</a> <div class="toggle-item-content"> <p>CONTENT</p> </div> <a class="toggle-item" href="#">Toggle Item 3</a> <div class="toggle-item-content"> <p>CONTENT</p> </div> </div>

Tabs

<div class="tabs-container"> <ul class="tabs-menu fixed"> <li><a href="#content-tab-1-1">TAB 1</a></li> <li><a href="#content-tab-1-2">TAB 2</a></li> <li><a href="#content-tab-1-3">TAB 3</a></li> </ul><div class="tabs"> <div class="tab-content" id="content-tab-1-1"> <p>CONTENT</p> </div><div class="tab-content" id="content-tab-1-2"> <p>CONTENT</p> </div><div class="tab-content" id="content-tab-1-3"> <p>CONTENT</p></div></div></div>