Corporate Weebly Theme Instructions

Contents

1. Introduction
2. Getting Started
3. Icons
4. Custom HTML Widgets
5. Fullwidth Sections

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...

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 instructions.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 instructions.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.

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

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
<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>
<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>
<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>
<div class="icon-box-1">
<i class="ifc-alarm_clock"></i>
<div class="icon-box-content">
<h5><a
href="#">TITLE</a></h5>
<p>CONTENT</p>
<a href="#">LINK TEXT</a>
</div></div>
TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum auctor ultricies est.
Morbi venenatis, ex eu suscipit cursus.

LINK
<div class="icon-box-2">
<i class="ifc-cloud_storage"></i>
<div class="icon-box-content">
<h5><a
href="#">TITLE</a></h5>
<p>CONTENT</p>
</div></div>
TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum auctor ultricies est.
Morbi venenatis, ex eu suscipit cursus.

<div class="icon-box-2">
<i class="ifc-coffee"></i>
<div class="icon-box-content">
<h1><span class="text-
highlight">NUMBER</span>
<small><a href="#">TITLE</a></small></h1>
<p>CONTENT</p>
</div></div>

12 Great things

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum auctor ultricies est.
Morbi venenatis, ex eu suscipit cursus.

<div class="icon-box-4">
<i class="ifc-user_male3"></i>
<div class="icon-box-content">
<p>CONTENT</p>
</div></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum auctor ultricies est.
Morbi venenatis, ex eu suscipit cursus.

<div class="icon-box-3">
<i class="ifc-checkmark"></i>
<div class="icon-box-content">
<h5><a href="#">TITLE</a></h5>
<p>CONTENT</p>
</div></div>
This is a Tick box

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum auctor ultricies est.
Morbi venenatis, ex eu suscipit cursus.

<div class="icon-box-5">
<span class="ifc-home"></span>
<div class="icon-box-content">
<h5>Address</h5>
<p>ADDRESS LINE 1
<br>ADDRESS LINE 2
<br>ADDRESS LINE 3
</p>
</div>
</div>

<div class="icon-box-5">
<span class="ifc-phone1"></span>
<div class="icon-box-content">
<h5>Telephone</h5>
<p>PHONE NUMBER</p>
</div>
</div>

<div class="icon-box-5">
<span class="ifc-message"></span>
<div class="icon-box-content">
<h5>E-Mail Address</h5>
<p><a href="mailto:#">EMAIL ADDRESS</a></p>
</div>
</div>
Address

1 Webfire House
Theme Lane
WE3 BLY

Telephone

01234 567 890

E-Mail Address

email@mail.com

<div class="team-member">
<span2><img src="/files/theme/IMAGENAME.png" alt="">
</span2><h3>NAME</h3>
<p>DESCRIPTION</p>
<div class="social-media">
<a class="facebook-icon social-icon" href="#">
<i class="fa fa-facebook"></i></a>
<a class="twitter-icon social-icon" href="#">
<i class="fa fa-twitter"></i></a>
<a class="pinterest-icon social-icon" href="#">
<i class="fa fa-pinterest"></i></a>
<a class="googleplus-icon social-icon" href="#">
<i class="fa fa-google-plus"></i></a>
</div></div>
<div class="pricing-table">
<h3>Begginer</h3>
<div class="pricing-table-header">
<h1>10 <sup>$</sup></h1>
<p>Lorem ipsum dolor amet conse.</p>
</div><!-- end .pricing-table-header -->
<div class="pricing-table-offer">
<ul>
<li>2 Users</li>
<li>15 emails</li>
<li>more list items</li>
<li>more list items</li>
<li>more list items</li>
<li>more list items</li>
<li class="mute">Unlimited Dashboard</li>
</ul>
</div><!-- end .pricing-table-offer -->
</div><!-- end .pricing-table -->

<div class="milestone">
<div class="milestone-content">
<span class="milestone-value" data-speed="2000" data-stop="1000"></span>
<div class="milestone-description">
HEADLINE
</div></div></div>
<div class="pie-chart" data-barcolor="#6dcff6"
data-barsize="270"data-linecap="round" data-
linewidth="5" data-percent=
"30"
data-trackcolor="transparent"><div
class="pie-chart-
percent"><span></span> %
</div><span class="pie-chart-custom-
text">
DESCRIPTION
</span>
</div>
<div class="fixed">
<div class="wft-progress-bar-description">
DESCRIPTION
<span style="left:50%;">
50%
</span></div><div class="wft-progress-bar">
<span class="wft-progress-bar-outer" data-width="50">
<span class="wft-progress-bar-inner"></span></span>
</div></div>
<ul class="horizontal-process-builder five-items fixed">
<li><img alt="" src="files/theme/140x140-1.png"></li>
<li><img alt="" src="files/theme/140x140-2.png"></li>
<li><img alt="" src="files/theme/140x140-3.png"></li>
<li><img alt="" src="files/theme/140x140-4.png"></li>
<li><img alt="" src="files/theme/140x140-5.png"></li>
</ul>
<ul class="horizontal-process-builder four-items fixed">
<li><i class="ifc-fantasy"></i></li>
<li><i class="ifc-briefcase"></i></li>
<li><i class="ifc-upload2"></i></li>
<li><i class="ifc-trophy"></i></li>
</ul>
<ul class="horizontal-process-builder three-items fixed">
<li>
<h1>TEXT</h1>
</li><li>
<h1>TEXT</h1>
</li><li>
<h1>TEXT</h1>
</li></ul>
  • 1

  • 2

  • 3

Small
<a class="wft-btn" href="#">BUTTON TEXT</a><br>
BUTTON TEXT

Large
<a class="wft-btn wft-btn-large" href="#">BUTTON TEXT</a><br>
BUTTON TEXT

Small with Icon
<a class="wft-btn" href="#">BUTTON TEXT <i class="ifc-right"></i></a><br>
BUTTON TEXT

Large with Icon
<a class="wft-btn wft-btn-large" href="#">BUTTON TEXT<i class="ifc-right"></i></a>
BUTTON TEXT

Small
<a class="wft-btn wft-btn-black" href="#">BUTTON TEXT</a><br>
BUTTON TEXT

Large
<a class="wft-btn wft-btn-large wft-btn-black" href="#">BUTTON TEXT</a><br>
BUTTON TEXT

Small with Icon
<a class="wft-btn wft-btn-black" href="#">BUTTON TEXT<i class="ifc-right"></i></a><br>
BUTTON TEXT

Large with Icon
<a class="wft-btn wft-btn-large wft-btn-black" href="#">BUTTON TEXT<i class="ifc-right"></i></a>
BUTTON TEXT

List with Filled Circle
<ul class="fill-circle">
<li>ENTER TEXT</li>
<li>ENTER TEXT</li>
<li>ENTER TEXT</li>
<li>ENTER TEXT</li>
<li>ENTER TEXT</li>
<li>ENTER TEXT</li>
</ul>

List with Hollow Circle
<ul class="right-circle">
<li>ENTER TEXT</li>
<li>ENTER TEXT</li>
<li>ENTER TEXT</li>
<li>ENTER TEXT</li>
<li>ENTER TEXT</li>
<li>ENTER TEXT</li>
</ul>
Fade in up
<p class="animate" data-animation="fadeInUp" data-animation-delay="0.3">***YOUR TEXT HERE***</p>
Fade in down
<p class="animate" data-animation="fadeInDown" data-animation-delay="0.3">***YOUR TEXT HERE***</p>
Fade in left
<p class="animate" data-animation="fadeInLeft" data-animation-delay="0.3">***YOUR TEXT HERE***</p>
Fade in right
<p class="animate" data-animation="fadeInRight" data-animation-delay="0.3">***YOUR TEXT HERE***</p>
<div class="testimonial-slider">
<ul class="slides">
<li>
<div class="testimonial fixed">
<blockquote>
<p><em>ENTER TEXT</em></p>
</blockquote><img alt="" src="/files/theme/180x180px.png.png">
<div class="testimonial-author">
<h4>AUTHOR</h4>
<p>JobTitle/Company</p>
</div></div></li><li>
<div class="testimonial fixed">
<blockquote>
<p><em>ENTER TEXT</em></p>
</blockquote><img alt="" src="/files/theme/180x180px.png.png">
<div class="testimonial-author">
<h4>AUTHOR</h4>
<p>JobTitle/Company</p>
</div></div></li><li>
<div class="testimonial fixed">
<blockquote>
<p><em>ENTER TEXT</em></p>
</blockquote><img alt="" src="/files/theme/180x180px.png.png">
<div class="testimonial-author">
<h4>AUTHOR</h4>
<p>JobTitle/Company</p>
</div></div></li></ul></div>

Each Fullwidth Section througout the theme has a background ID. There are 10 Background ID's available which all have their own specific styling.
To change the background styling on any fullwidth section you will need to find the section in the html page layout and change the BG Identifyer.
The Code in the HTML page layout will look like this: <div class="fullwidth-section" id="bg-1">
You just need to change BG-1 to the appropriate BG Identifyer (EG: BG-3)
You can see how all of the fullscreen sections are styled here: http://wft-corporate.weebly.com/section-styles.html