G11-V3 Tips and Tutorials by Page

Updated tips and tutorials for the Blacktop Template.

Instructions

G11-V3 Tips and Tutorials

Update Tips All Pages

‘global’ areas and components.

Your web template pages include serveral ‘global’ or ‘common’ areas, where they share the same components. Get off to a running start by first updating the global components, you’ll see progress in no time!

OffCanvasMenu

The OffCanvasMenu is located in your ( Library / shared ) folder: menu-offcanvas.htm. This menu is based off a regular bullet list, where the list items are hyperlinked to your web pages. You can also create ‘category’ links, and sub links by indenting the sub links, and bolding the category links. Before you update the OffCanvasMenu it’ll be a good idea to first create any “new” pages you’ll be needing for your website, even if these pages are just place holders as you can add your content later. For details here’s what we’ll cover in the video demonstration:

  1. where to find
  2. Change the heading
  3. add / remove sub headings
  4. add / remove links
  5. edit the contact form

OffCanvasMenu Video Demonstration

https://youtu.be/deKg61-6p54


Website Name / tagline ( and footer )

We’re including a special tutorial on editing the website name, as it includes a special ‘reverse’ hover effect. If you’re website names uses more than a single word, you can reverse the colors of the words on hover. Here’s what we’ll cover in the following video:

  1. where to find
  2. how to open and edit
  3. remove the logo icon
  4. change the logo icon
  5. replace the logo icon with your own graphic logo
    1. size matters .. how to determine how big your logo can be

Website Name / tagline ( and footer ) video demonstration:

https://youtu.be/BYiiu0erzdc

Graphic Logo Icon / Graphic Logo Image

Links:
Fontawesome

https://youtu.be/2JWse8IOwpo


Breadcrumb

Each page contains a Page Title // page name located in the ‘breadcrumb’ section. Here’s a quick video on how to update. Breadcrumb video demonstration:

https://youtu.be/XMXbfgBRCw4


Text Links

The ‘textlinks’ provide a simple, global navigation element to your web pages, provide links to the most important, or common pages in your website here.

Text Links video demonstration:

https://youtu.be/Sd1CcCTlTjQ


Social Media

The Social Media component uses the Fontawesome ‘brand’ icons. Fontawesome is continuously adding more icons to their already large assortment and all of the most popular icons can be found here.

Social Media video demonstration:

https://youtu.be/N6rsHTbuVVw


Footer

The ‘footer’ section uses much the same makeup of the ‘website name’ component as we only load the logo icon, website name and a tagline into the footer. But still, here’s s quick video on how we recommend updating the footer section: Footer video demonstration:

https://youtu.be/YLDih52eRK0


Copyright

The copyright section located at the very bottom of the page, is the ‘last’ and final ‘global’ section.

https://youtu.be/hC1EWI9c1os


Tips and Tutorials BY PAGE


index.htm

bs-welcome

http://youtu.be/k_pSCMT5cas?hd=1

video background

You’ll need to update the YouTube VideoID in 2 files:

theme-init.js

components.js

The video will explain how to do this, just make sure to also update the videoID in your components.js file, as that information was left out of the video.

here’s a screenshot of the components.js file

http://youtu.be/KN63ynac0uk?hd=1

index jump to section menu

http://youtu.be/sTkXQWu85-E?hd=1

skills progressbar

https://youtu.be/yN3lXsywra0

features ( keyboard / mug ) background

http://youtu.be/E3p0Go1D1Lk?hd=1

dividers ( with video background )

http://youtu.be/VQRbb0akV64?hd=1

services ( cell phone images )

http://youtu.be/0s863tXI6j8?hd=1

bs-quotes

http://youtu.be/k_pSCMT5cas?hd=1

team carousel

http://youtu.be/1G69eyFeUq8?hd=1

counter

http://youtu.be/OaTIWtrbpw4?hd=1

stay connected social icons

http://youtu.be/029avQL109o?hd=1

contact map background

http://youtu.be/nrioNKT18t4?hd=1

about.htm

Section Heading

video: https://youtu.be/mwMwFhd-va8

  • update or remove the face image
  • create your replacement image 55 x 55 pixels
  • save new image to the [ Site / themed-images / headings / (folder) ]
  • change the image as normal

About Carousel

video: https://youtu.be/escjJUcM2Us

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / carousels / about / about / (page) ]

editing options:

  • create your replacement images 870 x 429 pixels
  • save new images to the [ Library / carousels / about / about / (folder) ]
  • add or remove thumb images ( that’s it! )

Whats New!

video: https://youtu.be/AaEkiNZxxho

editing options:

  • add or remove thumbs
  • create replacement images 100 x 100 pixels
  • save new images to the [ Site / themed-images / pages / about / (folder) ]
  • change the image
  • change the description, read more link and date / time

Team Carousel

video: https://youtu.be/lfUZ9Q-VM40

The team carousel works in combination with the ( about-single.htm ) page. Each team member can have their own page. You just need to create a copy of the ( about-single.htm ) page, and rename for each member. This is totally optional of course, you can link the thumb icon to any page or website you like, or remove the link.

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the Library / carousels / team / team / (page)
  • you can add or remove as many thumb slides as you need

thumb editing options: for each thumb slide you will need to edit the following:

  • replace the image, default image size 300 x 300 pixels
  • save new images to the [ Library / components / carousels / team / images / (folder) ]
  • modify the ( MEMBER
    NAME )
  • modify the
    ( Describe your members job or position…. )
  • in CODE View modify the link to the ( about-single.htm ) — ( thm-link )
  • in CODE View modify the lightbox image — ( thm-fancy )
  • in CODE View modify social icon links — ( thm-icon1 – thm-icon4 )

about-single.htm

This page was created to work along side the about.htm page. This page was designed to display information about an individual team member. You will need to make a copy of this page for each team member you want to create a bio page for. You can then link the thumb items in the about.htm page, to each individual new page you create. Section Heading The section heading includes a divider that displays a small image. To replace this image with your own do the following:

  • create your new image and resize to 55 x 55 pixels
  • name the image ( about3-small.jpg )
  • save new images to the [ Site / themed-images / pages / about3 / (folder) ] to over write the existing image
  • after that, you can rename the image if you like

Large image

video: https://youtu.be/DfReM_TuhG8

editing options:

  • create a replacement image 640 x 480 pixels
  • name the replacement image about3.jpg
  • save new images to the [ Site / themed-images / pages / about3 / ( folder ) ] to over write the default image
  • after that, you can rename the image if you like

Social Icons

video: https://youtu.be/PhsEp7yhvpw

  • switch to CODE view
  • locate the div class ( about3-icons )
  • update the icon links / or icon brand or remove the icons

Project Carousel

video: https://youtu.be/hNrl5W-0E3g

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the Library / components / carousels / projects /projects ( page )
  • you can add or remove as many thumb slides as you need

thumb editing options:

  • create your replacement images 400 x 400 pixels
  • save new images to the

    [ Library / components / carousels / projects / images
    ( folder ) ]
  • change the image
  • modify the ( PROJECT
    NAME )
  • modify the (
    Describe your project, with a short description…
  • in CODE View modify the social icons ( thm-top-left / thm-top-right / thm-bottom-right / thm-bottom-left )

catalog.htm

video: https://youtu.be/3tekB4Z-jBM

The catalog.htm page was designed along side the product-details.htm page. The catalog.htm page can display a large number of thumbs all with prices and paypal buttons, and each thumb can also link to it’s own product-details.htm page. If you want to include the use of an individual product details page, you will need to make a ‘copy’ of the existing ‘product-details.htm’ page then ‘link’ the thumb in your catalog, to your new page. thumb editing options:

  • create your replacement images 400 x 400 pixels
  • save new images to the [ Site / themed-images / pages / catalog (folder) ]
  • change the image
  • change the PRODUCT
    NAME
  • change the was
    $99
  • change the sale
    $69
  • switch to CODE View and update or remove the link to the product-details.htm page ( both places: thm-cat-cart / thm-cat-details )
  • update or replace the PayPal button ( see resource: PayPal buttons )

The catalog page is sectioned into rows, 4 thumbs per row. You can change the columns displayed by changing the ( col-sm-3 ) to ( col-sm-4 or col-sm-6 ). Links:

PayPal Button Generator

contact.htm

video: https://youtu.be/xlJKEDzF04g

  • Update the HTML top left
  • Company NameCity, State, Country
  • update the Map in the background: ( see resources: Maps )
  • activate the form ( see resources: Forms )

faq.htm

FAQ Accordion

video: https://youtu.be/HansOSzJFPc

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / accordions / faq / faq (page) ]
  • review the resources: Tabs and Accordions

product-details.htm

If you’re using this page, you’ve probably created several copies of it, one new copy for each product you’d like to have detailed information on. If not, you may want to create a copy first, then proceed.

video: https://youtu.be/P1iKAOCCNsM

thumb editing options:

  • create your replacement images 640 x 480 pixels
  • save new images to the [ Site / themed-images / pages / product-details (folder) ]
  • change the image
  • modify the Product Name and description
  • switch to CODE View and update or replace the PayPal button ( see resource: PayPal buttons )

Details Tab

video: https://youtu.be/SZVPm7xxQuw

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / tabs / details / details (page) ]
  • review the resources: Tabs and Accordions

services.htm

The services page includes several Library components, as well as some icon thumb boxes located at the top of the page.

ICON LARGE Thumb boxes

video: https://youtu.be/B8XEflrbxKw

  • click inside the empty thumb icon container ( news-btn-inner )
  • use the Quick Tag Selector to select and ‘Edit’ the <i fa fa.. class > ( see resource: Design View )
  • change the fontawesome icon image
  • modify the ICON LARGE heading
  • modify the ICON LARGE content

Services Tabs

video: https://youtu.be/nYpdfdrr0gw

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / tabs / services / services (page) ]
  • review the resources: Tabs and Accordions

Customers Carousel

video: https://youtu.be/BtoV12K7Iwc

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / carousels / customers / customers (page) ]
  • add or remove slides
  • modify the slide h3 heading ( 1. 24/7 Support )
  • modify the slide paragraph ( Lorem Ipsum is simply dummy text … )
  • modify the slide signature (

    from: I.AM. Happy
    )

Price Switcher

video: https://youtu.be/lks21KH_Mw0

The price switcher is a really cool tool as it provides both a monthly and yearly pricing option, that animates from one state to the other. You can remove the text fields you don’t need, or copy existing fields if you need to add more information or options. When you update the switcher, you can do this in Design view for the most part, but I suggest CODE view, if adding more fields.

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / pricing / switcher / pricing (page) ]
  • review the resources: Price Switcher

2-column-left-sidemenu.htm

2-column-right-sidemenu.htm

Menu Side

video: https://youtu.be/_l4KZJ6rb9k

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / shared / menu-side (page) ]
  • review the resources: Menu Side

Sidebar Tabs Left / Sidebar Tabs Right

video: https://youtu.be/A7mZxIyv1yE

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / tabs / 2-column-left / tabs-left (page) ]
  • OR open the [ Library / components / tabs / 2-column-right / tabs-right (page) ]
  • review the resources: Tabs and Accordions

about2.htm

thumb boxes

video: https://youtu.be/F2hiZDe1f6g

the top of the about2.htm page includes 4 thumbs boxes, each with an image,
Member
Name / their
TITLE / POSITION and 4 social icons.

thumb editing options:

  • create your replacement images 300 x 300 pixels
  • save new images to the [ Site / themed-images / pages / about2 (folder) ]
  • change the image
  • modify the Member
    Name
  • modify the
    TITLE / POSITION
  • select the column where the social icon would be displayed, and use the Quick Tag Selector to update and edit the link or icon
  • switch to CODE View to remove the icon is you don’t need one.

Skills Progressbar

video: https://youtu.be/yN3lXsywra0

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / progressbar / skills / skills (page) ]
  • review the resources: Progressbar

Logo Carousel

video: https://youtu.be/Ptf4xt-DiV4

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / carousels / logos / logos (page) ]
  • add or remove as many slides as required

logo editing options:

  • create your replacement images 128 x 128 pixels
  • save new images to the [ Library / components / carousels / logos / mages / (folder) ]
  • change the image
  • make sure the image is responsive ( see resource: Responsive Images )

clients.htm

clients carousel

video: https://youtu.be/fFSEtFpodgQ

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / carousels / clients / clients (page) ]
  • you can add or remove the ( large ) client (large) and it’s matching client (small)
  • the client (large) slides are loaded first in the page, and each slide can be copied and pasted as normal, or removed as normal
  • the client (small) slides are loaded after all the client (large) slides
  • the client (small) thumbs are unique as 2 slides are ‘grouped’ into one column as the client (small) slides ‘stack one on top of the other on the right side of the page, to do this, the slides are wrapped in a <!– thumb column –>.
  • if you are going to make more slides, you will also need to add more columns first, then update the client (small ) slides within that column.

client (large) editing options:

  • create your replacement images 640 x 480 pixels
  • save new images to the [ Library / components / carousels / clients / images / (folder) ]
  • change the image
  • modify the h3 heading ( Proven Results )
  • modify the h3 sub heading ( with a little help )
  • modify the paragraph text ( Lorem Ipsum is simply dummy text … )

client (small) editing options:

  • use the same image for the client (small) image as you used for the client (large) .. the small image is automatically resized to fit the right column
  • save new images to the [ Library / components / carousels / clients / images / (folder) ]
  • change the image
  • modify the h3 heading ( Proven Results )
  • modify the h3 sub heading ( with a little help )

client carousel video:

clients thumbloader

video: https://youtu.be/zh5BUc-2mKA

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / thumb-loaders / clients / clients (page) ]
  • you can add or remove thumbs as you need

thumb editing options:

  • create your replacement images 100 x 100 pixels
  • save new images to the [ Library / components / thumb-loaders / clients / images / (folder) ]
  • change the image
  • modify the paragraph text (Duis vulputate laoreet sem sed sollicitudin…. )
  • review the resources: Thumbloader

Client Counter

video: https://youtu.be/pRKJz4x1i5s

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / counters / clients / clients (page) ]
  • modify the counter labels starting with: Creative Projects
  • switch to CODE View and modify the ( counter1-icon ) fontawesome icon
  • switch to CODE View and modify the ( data-to=”###” )
  • see resource: Counters

Bottom Thumbs

The bottom of the clients page is unique in that it displays a list of small thumb nails,describes as ‘Our Happy Clients”. These are regular images which you can swap out, and link to other pages or websites if you like.

  • create your replacement images 300 x 300 pixels
  • save new images to the [ Site / themed-images / pages / clients / (folder) ]
  • change the image

comingsoon.htm

Countdown Counter

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Site / javascript / theme-init.js (page) ]
  • scroll down the page and locate the section [ LIBRARY / PRO-COMPONENTS / COUNTERS / COUNTDOWN / COUNTDOWN }
  • you'll be changing the Date object (2015, 12 - 4, 25)

here's how the dates work

  • starting with the year ( 2015 ) then the number of months in a year ( 12 ), we subtract the number of months to our target month
  • we subtract the number of months from 12 to get to our target month or use the following examples, then replace the ## with the date in that month you want to target
  • Date(2015, 12 - 1, ##) = December
  • Date(2015, 12 - 2, ##) = November
  • Date(2015, 12 - 3, ##) = October
  • Date(2015, 12 - 4, ##) = September
  • Date(2015, 12 - 5 ##) = August
  • Date(2015, 12 - 6, ##) = July
  • Date(2015, 12 - 7, ##) = June
  • Date(2015, 12 - 8, ##) = May
  • Date(2015, 12 - 9, ##) = April
  • Date(2015, 12 - 10, ##) = March
  • Date(2015, 12 - 11, ##) = February
  • Date(2015, 12 - 12, ##) = January

Backwards I know, but it math..

Contact Us Today

  • see resource: Forms

The comingsoon.htm page is designed as a landing page or under construction type page, if your website isn't ready to launch quite yet, but you already have an active domain and potential visitors coming. This may be the case where a marketing strategy has been put into place, business cards or advertising has started for the website, but the website isn't ready to launch go live. There are many reasons you may want to put some sort of 'coming soon / under construction' type page online, and there are a few critical steps to make this happen.

  1. you'll need to rename the comingsoon.htm page, to default.htm
  2. move this page into the root folder
  3. when ready to publish the 'default.htm' page up to your web server, publish the following,

---

  • default.htm (page)
  • Site (folder)
  • LIbrary (folder)

IF there are any other pages you'd like to go live with at this time, publish those as well. You may also consider a few final touches to the 'default.htm' page before you publish. You may not want to include any type of menu or navigation especially IF the pages being linked to are not present on the server yet. Let's review in the video, how to make those final tweaks.

contact2.htm

  • update the google maps ( see resource: Maps )
  • update the contact form ( see resource: Forms )

faq2.htm

  • update the Question / Answer (see resource: Hyperlinks )

gallery.htm

video: https://youtu.be/496ANPqBr4U

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / gallery / gallery (page) ]
  • you can add or remove thumbs as you need

thumb editing options:

  • create your replacement images 700 x 520 pixels
  • save new images to the [ Library / components / gallery / images / (folder) ]
  • your image will be used for both the small and large gallery image
  • change the image in Design View as normal
  • switch to CODE View and update the following to match the name of your replacement image:
    • ( data-largesrc=”../Library/components/gallery/images/team-1.jpg” )
  • stay in CODE View and update the data-title to your members real name or handle
    • data-title=”Member Name 1″
  • switch back to DESIGN View and update the remaining information for your member

history.htm

History Thumb Loader

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / thumb-loaders / history / history (page) ]
  • you can add or remove thumbs as you need

thumb editing options:

  • create your replacement images 300 x 300 pixels
  • save new images to the [ Library / components / thumb-loaders / history / history / (folder) ]
  • change the image
  • FIRST modify the ( history-title ):

    The Year of Hiring
  • THEN modify the ( history-year ): 2015
  • ** the title and year use their own span classes, don’t edit these together, edit separately
  • modify the paragraph: Duis vulputate laoreet sem ….

portfolio.htm

video 1:

https://youtu.be/AVpt4KdKSIc

video 2:

https://youtu.be/SQX8Pkp9hEQ

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / portfolio / portfolio (page) ]
  • you can add or remove thumbs as you need

thumb editing options:

  • create your replacement images 640 x 480 pixels
  • save new images to the [ Library / components / portfolio / images / (folder) ]
  • DESIGN View: change the image
  • modify the h2: Link Title ( fsp-info )
  • modify the paragraph: Link description goes here… ( fsp-info )
  • modify the link:

    View web page
    ( fsp-readmore )
  • CODE View modify the lightbox image ( fancybox )
    • <a class=”fancybox” data-fancybox-group=”group1″ href=”images/portfolio1.jpg”>
  • modify the filter category links at the top of the page
    • <a data-filter=”.group1″ href=”#”>Products</a>
  • modify the ‘group’ filters for each image, to correctly link to your new categories.
    • <li class=”group1″>

project-single.htm

Single Carousel

video: https://youtu.be/oNmdKc_sFQU

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / carousels / single / single (page) ]
  • you can add or remove thumbs as you need

thumb editing options:

  • create your replacement images 800 x 600 pixels
  • save new images to the [ Library / components / carousels / single / images / (folder) ]
  • change the images as normal

Related Carousel

video: https://youtu.be/8tClo-CsJmM

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / carousels / related / related (page) ]
  • you can add or remove thumbs as you need

thumb editing options:

  • create your replacement images 1140 x 800 pixels
  • save new images to the [ Library / components / carousels / related / images / (folder) ]
  • change the images as normal
  • modify the h3 heading: Heading here
  • modify the paragraph: Description goes here
  • switch to CODE View and update the thumb link:
    • <div class=”thm-link”>
      • <a href=”#”>
  • while in CODE View, update the lightbox image to match the new image
    • <a class=”fancybox” data-fancybox-group=”group1″ href=
      “images/related-1.jpg“>

G11-V3 Tips and Tutorials

Update Tips All Pages

‘global’ areas and components.

Your web template pages include serveral ‘global’ or ‘common’ areas, where they share the same components. Get off to a running start by first updating the global components, you’ll see progress in no time!

OffCanvasMenu

The OffCanvasMenu is located in your ( Library / shared ) folder: menu-offcanvas.htm. This menu is based off a regular bullet list, where the list items are hyperlinked to your web pages. You can also create ‘category’ links, and sub links by indenting the sub links, and bolding the category links. Before you update the OffCanvasMenu it’ll be a good idea to first create any “new” pages you’ll be needing for your website, even if these pages are just place holders as you can add your content later. For details here’s what we’ll cover in the video demonstration:

  1. where to find
  2. Change the heading
  3. add / remove sub headings
  4. add / remove links
  5. edit the contact form

OffCanvasMenu Video Demonstration

http://youtu.be/mcQBYYd5OZo?hd=1


Website Name / tagline ( and footer )

We’re including a special tutorial on editing the website name, as it includes a special ‘reverse’ hover effect. If you’re website names uses more than a single word, you can reverse the colors of the words on hover. Here’s what we’ll cover in the following video:

  1. where to find
  2. how to open and edit
  3. remove the logo icon
  4. change the logo icon
  5. replace the logo icon with your own graphic logo
    1. size matters .. how to determine how big your logo can be

Website Name / tagline ( and footer ) video demonstration:

http://youtu.be/mU7YP4GYGXA?hd=1

Graphic Logo Icon / Graphic Logo Image

using your own graphic: http://youtu.be/byaAHgLDTY4?hd=1

updating the font awesome icon

Links:
Fontawesome

http://youtu.be/iXqb257Ermg?hd=1


Breadcrumb

Each page contains a Page Title // page name located in the ‘breadcrumb’ section. Here’s a quick video on how to update. Breadcrumb video demonstration:

http://youtu.be/iGjz_48vBOY?hd=1


Text Links

The ‘textlinks’ provide a simple, global navigation element to your web pages, provide links to the most important, or common pages in your website here. Text Links video demonstration: http://youtu.be/eUUvuaYzRaY?hd=1


Social Media

The Social Media component uses the Fontawesome ‘brand’ icons. Fontawesome is continuously adding more icons to their already large assortment and all of the most popular icons can be found here.

Social Media video demonstration: http://youtu.be/zzx36zNJXYE?hd=1

updating the font awesome icon

Links:
Fontawesome

http://youtu.be/iXqb257Ermg?hd=1


Footer

The ‘footer’ section uses much the same makeup of the ‘website name’ component as we only load the logo icon, website name and a tagline into the footer. But still, here’s s quick video on how we recommend updating the footer section: Footer video demonstration:

http://youtu.be/6xREAZlQLnU?hd=1


Copyright

The copyright section located at the very bottom of the page, is the ‘last’ and final ‘global’ section.

http://youtu.be/q5VtK7_lZ4s?hd=1


Tips and Tutorials BY PAGE


index.htm

bs-welcome

http://youtu.be/q5VtK7_lZ4s?hd=1

video background

You’ll need to update the YouTube VideoID in 2 files:

theme-init.js

components.js

The video will explain how to do this, just make sure to also update the videoID in your components.js file, as that information was left out of the video.

here’s a screenshot of the components.js file

http://youtu.be/9hYcLGsqwI8?hd=1

index jump to section menu

http://youtu.be/k4kifonaUL8?hd=1

skills progressbar

http://youtu.be/PRtptRFQiws?hd=1

features ( keyboard / mug ) background

http://youtu.be/PRtptRFQiws?hd=1

dividers ( with video background )

http://youtu.be/PRtptRFQiws?hd=1

services ( cell phone images )

http://youtu.be/PRtptRFQiws?hd=1

bs-quotes

http://youtu.be/PRtptRFQiws?hd=1

team carousel

http://youtu.be/ch_FR-4mkjk?hd=1

counter

http://youtu.be/PRtptRFQiws?hd=1

stay connected social icons

http://youtu.be/PRtptRFQiws?hd=1

contact map background

http://youtu.be/PRtptRFQiws?hd=1

about.htm

Section Heading

  • update or remove the face image
  • create your replacement image 55 x 55 pixels
  • save new image to the [ Site / themed-images / headings / (folder) ]
  • change the image as normal

About Carousel

video: https://youtu.be/QroZYB8Az-A

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / carousels / about / about / (page) ]

editing options:

  • create your replacement images 870 x 429 pixels
  • save new images to the [ Library / carousels / about / about / (folder) ]
  • add or remove thumb images ( that’s it! )

Whats New!

video: https://youtu.be/wlpyUepQVqQ

editing options:

  • add or remove thumbs
  • create replacement images 100 x 100 pixels
  • save new images to the [ Site / themed-images / pages / about / (folder) ]
  • change the image
  • change the description, read more link and date / time

Team Carousel

video: https://youtu.be/TRp-yA-si4Y

The team carousel works in combination with the ( about-single.htm ) page. Each team member can have their own page. You just need to create a copy of the ( about-single.htm ) page, and rename for each member. This is totally optional of course, you can link the thumb icon to any page or website you like, or remove the link.

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the Library / carousels / team / team / (page)
  • you can add or remove as many thumb slides as you need

thumb editing options: for each thumb slide you will need to edit the following:

  • replace the image, default image size 300 x 300 pixels
  • save new images to the [ Library / components / carousels / team / images / (folder) ]
  • modify the ( MEMBER
    NAME )
  • modify the
    ( Describe your members job or position…. )
  • in CODE View modify the link to the ( about-single.htm ) — ( thm-link )
  • in CODE View modify the lightbox image — ( thm-fancy )
  • in CODE View modify social icon links — ( thm-icon1 – thm-icon4 )

about-single.htm

This page was created to work along side the about.htm page. This page was designed to display information about an individual team member. You will need to make a copy of this page for each team member you want to create a bio page for. You can then link the thumb items in the about.htm page, to each individual new page you create.

Section Heading

video: https://youtu.be/bgzma5jFnWw

The section heading includes a divider that displays a small image. To replace this image with your own do the following:

  • create your new image and resize to 55 x 55 pixels
  • name the image ( about3-small.jpg )
  • save new images to the [ Site / themed-images / pages / about3 / (folder) ] to over write the existing image
  • after that, you can rename the image if you like

Large image

video: https://youtu.be/6azXKoPGYcw

editing options:

  • create a replacement image 640 x 480 pixels
  • name the replacement image about3.jpg
  • save new images to the [ Site / themed-images / pages / about3 / ( folder ) ] to over write the default image
  • after that, you can rename the image if you like

Social Icons

video: https://youtu.be/–m902Mg9wI

  • switch to CODE view
  • locate the div class ( about3-icons )
  • update the icon links / or icon brand or remove the icons

Project Carousel

video: https://youtu.be/Y48uv9_zh2M

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the Library / components / carousels / projects /projects ( page )
  • you can add or remove as many thumb slides as you need

thumb editing options:

  • create your replacement images 400 x 400 pixels
  • save new images to the

    [ Library / components / carousels / projects / images
    ( folder ) ]
  • change the image
  • modify the ( PROJECT
    NAME )
  • modify the (
    Describe your project, with a short description…
  • in CODE View modify the social icons ( thm-top-left / thm-top-right / thm-bottom-right / thm-bottom-left )

catalog.htm

video: https://youtu.be/SR-B_gd7Uyc

The catalog.htm page was designed along side the product-details.htm page. The catalog.htm page can display a large number of thumbs all with prices and paypal buttons, and each thumb can also link to it’s own product-details.htm page. If you want to include the use of an individual product details page, you will need to make a ‘copy’ of the existing ‘product-details.htm’ page then ‘link’ the thumb in your catalog, to your new page. thumb editing options:

  • create your replacement images 400 x 400 pixels
  • save new images to the [ Site / themed-images / pages / catalog (folder) ]
  • change the image
  • change the PRODUCT
    NAME
  • change the was
    $99
  • change the sale
    $69
  • switch to CODE View and update or remove the link to the product-details.htm page ( both places: thm-cat-cart / thm-cat-details )
  • update or replace the PayPal button ( see resource: PayPal buttons )

The catalog page is sectioned into rows, 4 thumbs per row. You can change the columns displayed by changing the ( col-sm-3 ) to ( col-sm-4 or col-sm-6 ). Links:

PayPal Button Generator

contact.htm

video: https://youtu.be/NXStm5giAIo

  • Update the HTML top left
  • Company NameCity, State, Country
  • update the Map in the background: ( see resources: Maps )
  • activate the form ( see resources: Forms )

faq.htm

FAQ Accordion

video: https://youtu.be/Z_2A-QMt7Sg

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / accordions / faq / faq (page) ]
  • review the resources: Tabs and Accordions

product-details.htm

If you’re using this page, you’ve probably created several copies of it, one new copy for each product you’d like to have detailed information on. If not, you may want to create a copy first, then proceed. thumb editing options:

  • create your replacement images 640 x 480 pixels
  • save new images to the [ Site / themed-images / pages / product-details (folder) ]
  • change the image
  • modify the Product Name and description
  • switch to CODE View and update or replace the PayPal button ( see resource: PayPal buttons )

Details Tab

video: https://youtu.be/ghBalYB2Yis

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / tabs / details / details (page) ]
  • review the resources: Tabs and Accordions

services.htm

The services page includes several Library components, as well as some icon thumb boxes located at the top of the page.

ICON LARGE Thumb boxes

  • click inside the empty thumb icon container ( news-btn-inner )
  • use the Quick Tag Selector to select and ‘Edit’ the <i fa fa.. class > ( see resource: Design View )
  • change the fontawesome icon image
  • modify the ICON LARGE heading
  • modify the ICON LARGE content

Services Tabs

video 1:

https://youtu.be/AzPTjqDS1e4

video 2:

https://youtu.be/F5wsggXSpLs

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / tabs / services / services (page) ]
  • review the resources: Tabs and Accordions

Customers Carousel

video: https://youtu.be/lko-nUS6DLs

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / carousels / customers / customers (page) ]
  • add or remove slides
  • modify the slide h3 heading ( 1. 24/7 Support )
  • modify the slide paragraph ( Lorem Ipsum is simply dummy text … )
  • modify the slide signature (

    from: I.AM. Happy
    )

Price Switcher

video: https://youtu.be/SAOpSmQAH_Y

The price switcher is a really cool tool as it provides both a monthly and yearly pricing option, that animates from one state to the other. You can remove the text fields you don’t need, or copy existing fields if you need to add more information or options. When you update the switcher, you can do this in Design view for the most part, but I suggest CODE view, if adding more fields.

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / pricing / switcher / pricing (page) ]
  • review the resources: Price Switcher

2-column-left-sidemenu.htm

2-column-right-sidemenu.htm

Menu Side

video: https://youtu.be/hd2869El2wU

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / shared / menu-side (page) ]
  • review the resources: Menu Side

Sidebar Tabs Left / Sidebar Tabs Right

video: https://youtu.be/-N1efzhTV9U

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / tabs / 2-column-left / tabs-left (page) ]
  • OR open the [ Library / components / tabs / 2-column-right / tabs-right (page) ]
  • review the resources: Tabs and Accordions

about2.htm

thumb boxes

video: https://youtu.be/Y9JFkcPJPGo

the top of the about2.htm page includes 4 thumbs boxes, each with an image,
Member
Name / their
TITLE / POSITION and 4 social icons.

thumb editing options:

  • create your replacement images 300 x 300 pixels
  • save new images to the [ Site / themed-images / pages / about2 (folder) ]
  • change the image
  • modify the Member
    Name
  • modify the
    TITLE / POSITION
  • select the column where the social icon would be displayed, and use the Quick Tag Selector to update and edit the link or icon
  • switch to CODE View to remove the icon is you don’t need one.

Skills Progressbar

video: https://youtu.be/Dmb5neIbjw8

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / progressbar / skills / skills (page) ]
  • review the resources: Progressbar

Logo Carousel

video: https://youtu.be/6L3TazgzDq8

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / carousels / logos / logos (page) ]
  • add or remove as many slides as required

logo editing options:

  • create your replacement images 128 x 128 pixels
  • save new images to the [ Library / components / carousels / logos / mages / (folder) ]
  • change the image
  • make sure the image is responsive ( see resource: Responsive Images )

clients.htm

clients carousel

video: https://youtu.be/T4aluS36lH4

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / carousels / clients / clients (page) ]
  • you can add or remove the ( large ) client (large) and it’s matching client (small)
  • the client (large) slides are loaded first in the page, and each slide can be copied and pasted as normal, or removed as normal
  • the client (small) slides are loaded after all the client (large) slides
  • the client (small) thumbs are unique as 2 slides are ‘grouped’ into one column as the client (small) slides ‘stack one on top of the other on the right side of the page, to do this, the slides are wrapped in a <!– thumb column –>.
  • if you are going to make more slides, you will also need to add more columns first, then update the client (small ) slides within that column.

client (large) editing options:

  • create your replacement images 640 x 480 pixels
  • save new images to the [ Library / components / carousels / clients / images / (folder) ]
  • change the image
  • modify the h3 heading ( Proven Results )
  • modify the h3 sub heading ( with a little help )
  • modify the paragraph text ( Lorem Ipsum is simply dummy text … )

client (small) editing options:

  • use the same image for the client (small) image as you used for the client (large) .. the small image is automatically resized to fit the right column
  • save new images to the [ Library / components / carousels / clients / images / (folder) ]
  • change the image
  • modify the h3 heading ( Proven Results )
  • modify the h3 sub heading ( with a little help )

client carousel video:

clients thumbloader

video: https://youtu.be/61LIvg8t6kI

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / thumb-loaders / clients / clients (page) ]
  • you can add or remove thumbs as you need

thumb editing options:

  • create your replacement images 100 x 100 pixels
  • save new images to the [ Library / components / thumb-loaders / clients / images / (folder) ]
  • change the image
  • modify the paragraph text (Duis vulputate laoreet sem sed sollicitudin…. )
  • review the resources: Thumbloader

Client Counter

video: https://youtu.be/Cd5Kt60Z0nc

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / counters / clients / clients (page) ]
  • modify the counter labels starting with: Creative Projects
  • switch to CODE View and modify the ( counter1-icon ) fontawesome icon
  • switch to CODE View and modify the ( data-to=”###” )
  • see resource: Counters

Bottom Thumbs

video https://youtu.be/xmkhAXvfchs The bottom of the clients page is unique in that it displays a list of small thumb nails,describes as ‘Our Happy Clients”. These are regular images which you can swap out, and link to other pages or websites if you like.

  • create your replacement images 300 x 300 pixels
  • save new images to the [ Site / themed-images / pages / clients / (folder) ]
  • change the image

comingsoon.htm

Countdown Counter

video: https://youtu.be/1uqJJKfBSwk

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Site / javascript / theme-init.js (page) ]
  • scroll down the page and locate the section [ LIBRARY / PRO-COMPONENTS / COUNTERS / COUNTDOWN / COUNTDOWN }
  • you'll be changing the Date object (2015, 12 - 4, 25)

here's how the dates work

  • starting with the year ( 2015 ) then the number of months in a year ( 12 ), we subtract the number of months to our target month
  • we subtract the number of months from 12 to get to our target month or use the following examples, then replace the ## with the date in that month you want to target
  • Date(2015, 12 - 1, ##) = December
  • Date(2015, 12 - 2, ##) = November
  • Date(2015, 12 - 3, ##) = October
  • Date(2015, 12 - 4, ##) = September
  • Date(2015, 12 - 5 ##) = August
  • Date(2015, 12 - 6, ##) = July
  • Date(2015, 12 - 7, ##) = June
  • Date(2015, 12 - 8, ##) = May
  • Date(2015, 12 - 9, ##) = April
  • Date(2015, 12 - 10, ##) = March
  • Date(2015, 12 - 11, ##) = February
  • Date(2015, 12 - 12, ##) = January

Backwards I know, but it math..

Contact Us Today

  • see resource: Forms

The comingsoon.htm page is designed as a landing page or under construction type page, if your website isn't ready to launch quite yet, but you already have an active domain and potential visitors coming. This may be the case where a marketing strategy has been put into place, business cards or advertising has started for the website, but the website isn't ready to launch go live. There are many reasons you may want to put some sort of 'coming soon / under construction' type page online, and there are a few critical steps to make this happen.

  1. you'll need to rename the comingsoon.htm page, to default.htm
  2. move this page into the root folder
  3. when ready to publish the 'default.htm' page up to your web server, publish the following,

---

  • default.htm (page)
  • Site (folder)
  • LIbrary (folder)

IF there are any other pages you'd like to go live with at this time, publish those as well. You may also consider a few final touches to the 'default.htm' page before you publish. You may not want to include any type of menu or navigation especially IF the pages being linked to are not present on the server yet. Let's review in the video, how to make those final tweaks.

contact2.htm

  • update the google maps ( see resource: Maps )
  • update the contact form ( see resource: Forms )

faq2.htm

  • update the Question / Answer (see resource: Hyperlinks )

gallery.htm

video: https://youtu.be/InNqSl9UCyQ

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / gallery / gallery (page) ]
  • you can add or remove thumbs as you need

thumb editing options:

  • create your replacement images 700 x 520 pixels
  • save new images to the [ Library / components / gallery / images / (folder) ]
  • your image will be used for both the small and large gallery image
  • change the image in Design View as normal
  • switch to CODE View and update the following to match the name of your replacement image:
    • ( data-largesrc=”../Library/components/gallery/images/team-1.jpg” )
  • stay in CODE View and update the data-title to your members real name or handle
    • data-title=”Member Name 1″
  • switch back to DESIGN View and update the remaining information for your member

history.htm

History Thumb Loader

video: https://youtu.be/ll9VxNqCgWo

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / thumb-loaders / history / history (page) ]
  • you can add or remove thumbs as you need

thumb editing options:

  • create your replacement images 300 x 300 pixels
  • save new images to the [ Library / components / thumb-loaders / history / history / (folder) ]
  • change the image
  • FIRST modify the ( history-title ):

    The Year of Hiring
  • THEN modify the ( history-year ): 2015
  • ** the title and year use their own span classes, don’t edit these together, edit separately
  • modify the paragraph: Duis vulputate laoreet sem ….

portfolio.htm

video: https://youtu.be/da8rV3C6LVU

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / portfolio / portfolio (page) ]
  • you can add or remove thumbs as you need

thumb editing options:

  • create your replacement images 640 x 480 pixels
  • save new images to the [ Library / components / portfolio / images / (folder) ]
  • DESIGN View: change the image
  • modify the h2: Link Title ( fsp-info )
  • modify the paragraph: Link description goes here… ( fsp-info )
  • modify the link:

    View web page
    ( fsp-readmore )
  • CODE View modify the lightbox image ( fancybox )
    • <a class=”fancybox” data-fancybox-group=”group1″ href=”images/portfolio1.jpg”>
  • modify the filter category links at the top of the page
    • <a data-filter=”.group1″ href=”#”>Products</a>
  • modify the ‘group’ filters for each image, to correctly link to your new categories.
    • <li class=”group1″>

project-single.htm

Single Carousel

video: https://youtu.be/avYCw8Mwiow

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / carousels / single / single (page) ]
  • you can add or remove thumbs as you need

thumb editing options:

  • create your replacement images 800 x 600 pixels
  • save new images to the [ Library / components / carousels / single / images / (folder) ]
  • change the images as normal

Related Carousel

video: https://youtu.be/eRK5CHGHhR4

  • right click on the placeholder image ( Open file or Open Library item )
  • OR open the [ Library / components / carousels / related / related (page) ]
  • you can add or remove thumbs as you need

thumb editing options:

  • create your replacement images 1140 x 800 pixels
  • save new images to the [ Library / components / carousels / related / images / (folder) ]
  • change the images as normal
  • modify the h3 heading: Heading here
  • modify the paragraph: Description goes here
  • switch to CODE View and update the thumb link:
    • <div class=”thm-link”>
      • <a href=”#”>
  • while in CODE View, update the lightbox image to match the new image
    • <a class=”fancybox” data-fancybox-group=”group1″ href=
      “images/related-1.jpg“>