Trinity Instructions

Instructions

Trinity Instructions

Version

  • Created:

    01/12/
    2
    016
  • Latest Update:

    01/13/
    2
    016

Thanks for purchasing our Trinity Template.

Special Features

Morph Text
(all packages)

We’ve included a really nice jquery script from the folks at (
http://morphext.fyianlai.com/ ). The ability to morph text from one work or phase to another, using the power of animate.css, also included in your template.

video demonstration:
https://youtu.be/6pl6TpbD6kU

Animated Sections
(all packages)

We’ve included two types of animation scripts in your template. One script (
wow.js ) utilitized the power of animate.css to add a single instance or animation to an element on your page, animating that element once it’s scrolled into view. A second more powerful animation script (
skrollr.js ) allows you to create your own animations and apply them to both the scroll into view, and scroll out of view and visa versa.

For full sections you can apply a pre-scripted
skrollr animation with a simple data attribute. Let’s take a look at the video.

video demonstration:
https://youtu.be/z1szUaFdQsU

Animated Content
(all packages)

Animated content uses the (
wow.js ) animation script combined with
animate.css to add a single event animation, as the content scrolls into view, the animation is triggered.

video demonstration:
http://youtu.be/CX4enUwoxDQ?hd=1

YouTube Video
(all packages)

We’ve created a special video bracket using the outline of a computer monitor, you can see this in action on the index.htm page of your site, and use it elsewhere in your web site if you choose to. You can replace the default youtube video with your own and here’s a video showing you how.

video demonstration:
https://youtu.be/Fkx9dWIVMlg

Getting Started

Installation (all packages)

You really really really should go through this tutorial. Extremely important to open up your website template correctly.

view instructions:
http://www.i3dthemes.com/codex/product-components/installation/

Planning & Preparation (all packages)

Making a plan can save you an INCREDIBLE amount of time. Learn a couple of key steps to save yourself a bunch of time.

view instructions:
http://www.i3dthemes.com/codex/product-components/planning-and-preparation/s

Working with Pages (all packages)

Everything you need to know about creating new pages, working with header regions, adding and removing columns, plus much more.

view instructions:
http://www.i3dthemes.com/codex/product-components/working-with-pages/

Publishing (all packages)

Learn how to publish/transfer your files out to your web space.

view instructions:
http://www.i3dthemes.com/codex/product-components/publishing/

FontAwesome Icons (all packages)

We take advantage of the FontAwesome icon set. Learn how to update the icons in your site.

view instructions:
http://www.i3dthemes.com/codex/product-components/fontawesome-icons/

Logo / Branding

Website Name (all packages)

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

video demonstration:

https://youtu.be/BYiiu0erzdc

 

Tagline (all packages)

Website Name / tagline ( and footer )

 

video demonstration:

https://youtu.be/BYiiu0erzdc

Phone Number (all packages)

Update your phone number across your site.

view instructions:
http://www.i3dthemes.com/codex/product-components/phone-number/

Social Icons (all packages)

Learn how to add/remove and modify the social media icons included with your website.

view instructions:
http://www.i3dthemes.com/codex/product-components/social-icons/

Social Icons Font Awesome  (all packages)

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.

video demonstration:

https://youtu.be/N6rsHTbuVVw

Navigation

Components By Page

Home Page ( index.htm ) (all packages)

Bootstrap Slider

video demonstration:

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

Index Box Carousel

The index box carousel is a variation of the info box carousel, we’ve just renamed it, and removed the image and replaced it with text ( the number ). The other difference is the location of the Library Asset ( include page ).

The video instructions below will instruct you top open (
Library / components / info-box-carousel / info-box-carousel
).

You will actually need to open (
Library / components / carousels / index-carousel / index-carousel
) as this component has been slighly updated from the video, and only being used on the index page.

view instructions:

http://www.i3dthemes.com/codex/product-components/info-box-carousel/

Section Headers

video demonstration:

https://youtu.be/jecpTALIVDw

Sliding Phones

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

Web Packages Isotope Portfolio

The Isotope portfolio you see on the home page displaying thumbnails of the template pages, can be modified and used for your own website. We’ve changed the name of the Library page, and it’s location a bit, to display it separately from the ( Portfolio.htm ) gallery page. The instructions for updating this component are the same for all Isotope Portfolio components. The video instructions below will instruct you to open the:

( Library / components / portfolio / portfolio.htm )

which you’ll need to alter slightly for the modified index page version .. so using the same instructions, just open the

 ( Library / components / portfolio-packages / portfolio-packages.htm ) page instead

video demonstration 1:

https://youtu.be/AVpt4KdKSIc

video demonstration 2:

https://youtu.be/SQX8Pkp9hEQ

Home Page Alternate ( index___alternate.htm ) (all packages)

skills progressbar

video demonstration:
https://youtu.be/yN3lXsywra0

features ( keyboard / mug ) background

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

dividers ( with video background )

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

services ( cell phone images )

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

bs-quotes

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

team carousel

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

counter

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

stay connected social icons

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

contact map background

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

Template Pages

about.htm (standard / pro packages)

Section Heading

video demonstration:
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 demonstration:
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 demonstration:
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 demonstration:
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 (standard / pro packages)

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 demonstration:
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 demonstration:
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 demonstration:
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 (pro packages)

video demonstration:
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 (standard / pro packages)

video demonstration:
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 (standard / pro packages)

FAQ Accordion

video demonstration:
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 (pro packages)

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 demonstration:
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 demonstration:
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 (standard / pro packages)

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 demonstration:
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 demonstration:
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 demonstration:
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 demonstration:
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 (pro packages)

2-column-right-sidemenu.htm (pro packages)

Menu Side

video demonstration:
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 demonstration:
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 (pro packages)

thumb boxes

video demonstration:
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 demonstration:
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 demonstration:
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 (pro packages)

clients carousel

video demonstration:
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 demonstration:
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 demonstration:
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 (pro packages)

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 (pro packages)

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

faq2.htm (pro packages)

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

gallery.htm (pro packages)

video demonstration:
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 (pro packages)

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 (pro packages)

video demonstration 1:

https://youtu.be/AVpt4KdKSIc

video demonstration 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 (pro packages)

Single Carousel

video demonstration:
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 demonstration:
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“>

Isotope Portfolio (pro packages)

Learn how to update the Isotope Portfolio Component.

view instructions:
http://www.i3dthemes.com/codex/product-components/isotope-portfolio/

Sliders

Bootstrap Slider
(all packages)

Place the description here

Smaller description here

Amazing
Default Slider
(all packages)

Often used as the “default” slider in many of our designs, the “Amazing” slider is a versatile component. Learn how to change everything from the captions and images to where the images link to.

view instructions:
http://www.i3dthemes.com/codex/product-components/default-slider/

Fullscreen Slider (pro package)

The Fullscreen Slider displays your images at 100% of the web browsers viewable area. Images will resize to fit, saving you time and effort with image trimming.

view instructions:
http://www.i3dthemes.com/codex/product-components/fullscreen-slider/

Nivo Slider (pro package)

This is probably the most common slider on the web, these days. Learn how to update all the images and captions.

view instructions:
http://www.i3dthemes.com/codex/product-components/nivo-slider/

Parallax Slider (pro package)

The Parallax Slider has an animated slide in/out effect on your text and transparent image object.

view instructions:
http://www.i3dthemes.com/codex/product-components/parallax-slider-2/

Video Slider  (pro package)

The video slider is based off the Amazing slider code, it
just displays Youtube or Vimeo video’s.

view instructions:

https://www.i3dthemes.com/codex/product-components/video-slider/

 

Photo-slideshow (pro package)

TThe SuperSized Slideshow located in the photo-slideshow.htm page is a fantastic full screen slideshow component.

view instructions:
http://www.i3dthemes.com/codex/product-components/photo-slideshow/

Google

Contact Map (pro package)

IIn this tutorial, we ll demonstrate how to update the ‘Contact Map’.

view instructions:
http://www.i3dthemes.com/codex/product-components/contact-map/

Footer

Footer (all packages)

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:

video demonstration:

https://youtu.be/YLDih52eRK0