Introduction
Welcome
First of all THANK YOU for purchasing Sense Theme. Before you get started, please be sure to always check out these documentation files. This document covers the installation, set up and use Sense - we encourage you to read this document thoroughly if you are experiencing any difficulties. Sense can only be used with WordPress and we assume that you already have WordPress installed and ready to go. If you do not, please see our section on WordPress to help you get started.
If you have any questions that are beyond the scope of this documentation, we encourage you to join our Support Forum. If you are unable to find it anywhere, then please go to our support forum and open a new ticket with all details we need. Please be sure to include your site URL as well. Thank you, we hope you enjoy using Sense!
Introduction
What's Included
Before you start playing around with this Theme, let's check what you've downloaded so far:
- Sense Theme Folder - contains the sense-theme.zip file
- Sense Theme Child Folder - contains the sense-theme-child.zip file
- Demo Content Folder - contains the demo-content.xml and sample Revolution Slider files
- Languages Folder - contains all files ready for translations
Introduction
Before You Post on Forum
To help speed along your request, please follow the steps below before posting a new ticket on the forum. This is for benefit of everyone and will help make the entire more efficient.
- Step 1 - Always check the Documentation. Most questions can be answered in this area.
- Step 2 - Always perform a Forum Search and Forum FAQ before you post, its very possible your issue has already been brought up and has been answered.
- Step 3 - If your question has not been brought up, then please open a new ticket. Always be as descriptive as possible. Enter the theme version, and the live URL to your home page or the page that shows the issue in question. You can also provide us with your login information to WordPress dashboard and FTP server in private ticket. All login info stays private with our support team.
- Step 4 - Patiently wait. We answer as quickly as possible.
Installation
WordPress Installation
To install this theme you must have a working version of WordPress already installed. For information in regard to installing Wordpress see the Wordpress Codex or you can watch the Instructional Video created by WooThemes.
Installation
Theme Installation via WordPress
- Step 1 - Navigate to Appearance > Themes
- Step 2 - Click Add New Theme and hit Upload Theme button
- Step 3 - Now you just need to find the sense-theme.zip file in the Sense Theme folder and hit Install Now
- Step 4 - Wait while the theme is uploaded and installed.
- Step 5 - Activate the newly installed theme. Navigate to Appearance > Themes and acivate Sense Theme.
- Step 6 - Then you will notice list of required (WPBakery Visual Composer) and recomended plugins. You just need to click Begin installing plugin and follow the steps to install and activate these plugins.
Common Install Error: Are You Sure You Want To Do This? If you get the "Are You Sure You Want To Do This? message when installing sense-theme.zip file via WordPress, it means you have an upload file size limit. Install the theme via FTP if this happens, or call your hosting company and ask them to increase the limit.
Installation
Theme Installation via FTP
- Step 1 - Login to your FTP account and navigate to your WordPress installation directory.
- Step 2 - Navigate to the folder /wp-content/themes
- Step 3 - Upload the "sense-theme" folder (not the .zip file) into your server.
- Step 4 - Activate the newly installed theme. Navigate to Appearance > Themes and acivate Sense Theme.
- Step 5 - Then you will notice list of required (WPBakery Visual Composer) and recomended plugins. You just need to click Begin installing plugin and follow the steps to install and activate these plugins.
Installation
Setting Up the Demo Content
This Theme includes a demo-content.xml file which allows you to upload some content to your site to help you get started with the Sense and get to know the functionality. Please note, that the demo-content.xml file doesn't include images and includes only sample slider data. To import our demo content, please see the steps below.
- Step 1 - Install and activate these plugins before you proceed: WPBakery Visual Composer, Gravity Portfolio, Gravity Widgets, Gravity Testimonials, Gravity Faq, Gravity Team Members, WooSidebars, Slider Revolution, Contact Form 7, WooCommerce. WooCommerce is only needed if you want an online shop.
- Step 2 - Navigate to Tools > Import.
- Step 3 - Click on WordPress. If you haven't imported anything yet, you will need to install Importer plugin.
- Step 4 - Select the demo-content.xml file in the Demo Content folder.
- Step 5 - Now make sure to Select the Menu in Appearance > Menus (Read more) and set up Home as front page (Read more) and Blog as posts page under Seetings > Reading (Read more).
- Step 6 - Navigate to Appearance > Theme Options and click "Save Changes" button to save settings.
- Step 7 - Navigate to Appearance > Widgets and add custom widgets (see Setup Widgets section).
Be aware that downloading Demo Content may take a while, depending on the speed of your internet connection!
Installation
Translating the Theme
Sense comes with translation file: en_EN.mo and en_EN.po that are located in the Languages folder inside your package. These files can be used to translate the theme into your language.
- Step 1 - Open the en_EN.po file in POEdit
- Step 2 - Use the translation field to make replacements
- Step 3 - Go to File → Save Us... and save file with your language name, for example: fr_FR.po for French translation. It will generate both a .po and .mo files
- Step 4 - Edit wp-config.php file located in the root folder of WordPress and define WPLANG prefix with your language name, for example: fr_FR for French translation
- Step 5 - Go to your server via FTP, navigate to the theme folder and find the "languages" folder located in wp-content > themes > sense-theme
- Step 6 - Upload the language files into the "languages" folder
First Steps
Upload Your Logo & Favicons
Sense Theme comes with the option to upload your logo as an image file. The logo can be any size. You can also upload your logo 2x Retina version.
Follow This Steps to Insert the Logo
- Step 1 - Navigate to Appearance > Theme Options > Global > Logo section
- Step 2 - Upload your standard logo to Logo field
- Step 3 - Enter the standard logo height. It is required field (only numerical value - no px)
- Step 4 - If you want to use Sticky menu upload optional Sticky Logo, Sticky Retina Logo and enter sticky logo height (if you don't upload sticky logo, the standard logo will be visible)
- Step 5 - If you want the text logo instead of graphic logo, enter text to Text Logo field (leave it empty if you want graphic logo)
Adding the Favicons
Favicons are an icons associated with the url that are displayed in browser's address bar or next to the site name in a bookmark list. The Favicons Options are in the Appearance > Theme Options > Global > General tab and upload small 16x16px icon
First Steps
Set Up Home Page
Setting up Home Page is the same as setting up any other pages except that you need to specify which page will be your main page. Sense Theme comes with several pre-defined home page layouts. You can import pre-defined layout or build your own home page using shortcodes and Page Builder
- Step 1 - Navigate to Settings > Reading
- Step 2 - Select a static page options
- Step 3 - Choose the page you want as your home page from the dropdown list
First Steps
Set Up Blog Page
Setting up Blog Page is the same as setting up any other pages except that you need to specify which page will be your blog page.
- Step 1 - Navigate to Settings > Reading
- Step 2 - Select a static page options
- Step 3 - Choose the page you want as your posts page
First Steps
Create Post
- Step 1 - Navigate to Posts and click Add New
- Step 2 - Enter a title for your post
- Step 3 - Add content to your post using standard visual editor or click Backend Editor and use Visual Composer Page Builder. This allows you to build post using the Shortcodes. Take a look at the Shortcode section for how to use them
- Step 4 - Add Categories from the right side. To assign it to the post, check the box next to the Category name
- Step 5 - Add Tags from the right side. Type the name of the tag in the field, separate multiple tags with commas
- Step 6 - Click Set featured image on the right side and select image you want to use in post
- Step 7 - Select one of 8 post formats on the right side. When you click Gallery, Video, Audio, Quote or Link post format you will see an additional options below the content editor. See more details in Using Post Format section below
- Step 8 - Select sidebar on the right side. If you leave Default Sidebar Position, settings from Appearance > Theme Options > Sidebars > General "Post Sidebar Layout" field will be visible. When you disable default sidebar select sidebar position and dipslayed widget area
- Step 9 - Setup settings from Page Options, Post Options, Header & Footer Options
- Step 10 - Once it's all done hit "Publish" button
Post Formats
Sense Theme offers 8 post formats: Standard, Aside, Image, Gallery, Video, Audio, Quote and Link Post Format. When you select some of them you will see various options.
- Standard - this is the default post format without any additional options
- Aside - this is post format where only post content will be visible, your title and featured image will not (title will be visible on single page only)
- Image - this is post format where only featured image will be visible on blog page. Your post content will be visible on single page
- Gallery - this is post format where you can select slider or one of grid gallery type. After selecting gallery type Hit "Add Media" button and add images to the default WordPress Gallery. Finally select number of columns if you choose one of the grid gallery type. Your slider/gallery will be visible instead of the featured image. Your title and content will be visible like in standard post
- Video - this is post format where you can paste the URL to video on Vimeo, YouTube or one of these services or paste the URL to your local mp4 and webm file (optionaly paste image/poster for local video). Your video will be visible instead of the featured image. Your title and content will be visible like in standard post
- Audio - this is post format where you can paste the URL to your local mp3 and ogg file. Your featured image will be visible above the audio player. Your title and content will be visible like in standard post
- Quote - this is post format where only quote options like: quote, author and link will be visible. Your content and featured image will not (title will be visible on single page only)
- Link - this is post format where only post content will be visible, your featured image will not (title will be visible on single page only)
Showing Posts
After creating posts create a new page, select one of the Blog Page Templates, fill in the meta settings and hit Publish.
First Steps
Create Projects to Portfolio
You need to create project so they will show up on portfolio page. Sense Theme offers several options for projects like categories, skills and much more. Categories are the filters you see above the projects that allows the user to sort the projects. Skills add additional meta info to projects. See below for information on how to create projects.
- Step 1 - Navigate to Portfolio and click Add New
- Step 2 - Enter a new name for your project
- Step 3 - Add content to your page using the Visual Composer Page Builder. The pages is built using the Shortcodes. Take a look at the Shortcode section for how to use them
- Step 4 - Add Categories from the right side. To assign it to the project, check the box next to the Category name. These Categories are the filters that will sit above your project images and allow you to filter the different types of projects
- Step 5 - Add Skills from the right side. Type the name of the skill in the field, separate multiple skills with commas
- Step 6 - Click Set featured image on the right side and select image you want to use in project listing
- Step 7 - Select any number of header and footer options, like title, background color or image background, parallax effect, breadcrumbs and text color
- Step 8 - Select sidebar position from the right side and choose sidebar widget area
- Step 9 - Select project layout from Project Options section. You can use standard layout where all project info like skills, categories, client info, description will be below the featured image. In right side layout project info will be on the right and in left side layout on the left. In custom layout project info will not be displayed. You can add it in Visual Composer Editor
- Step 10 - Enter any number of project options, like description, client name, project URL and select if you want to show up the related projects at the bottom of the page
- Step 11 - You can choose the overlay background color visible on hover when you select this style on portfolio page
- Step 12 - For a slider/gallery project, select Enable Gallery options and choose slider or one of grid gallery type. Hit "Add Media" button and add images to the default WordPress Gallery. Finally select number of columns if you choose one of the grid gallery type
- Step 13 - For a video project you can paste the URL to video on Vimeo, YouTube or one of these services or paste the URL to your local mp4 and webm file (optionaly paste image/poster for local video)
- Step 14 - Once it's all done hit "Publish" button
Showing Portfolio
- Step 1 - Navigate to Pages and click Add New
- Step 2 - Enter a new name for your page
- Step 3 - Select the Portfolio Standard page Template located in the Page Attributes box
- Step 4 - Select any number of page options, like Header Options, Footer Options, and Sidebar Options
- Step 5 - Select number of columns, portfolio categories you want to show, item type, pagination and other settings from Portfolio Options
- Step 6 - Add content to your page using the Visual Builder or Text editor. The content will be visible above the projects
- Step 7 - Once it's all done hit "Publish" button
You can also show portfolio on your page by using portfolio shortcode. Take a look at the Shortcode section for how to use it.
First Steps
Create Team Members
- Step 1 - Navigate to Team Members and click Add New
- Step 2 - Enter a team member title
- Step 3 - Add team member content using standard visual editor
- Step 4 - Add Categories from the right side. To assign it to the post, check the box next to the Team Member Category name
- Step 5 - Click Set featured image on the right side and select image you want to use as a team member's image
- Step 6 - Fill in the meta settings in the Team Members Options like position, department and social datas
- Step 7 - Once it's all done hit "Publish" button
Showing Team Members
After creating team member post you need to use team member shortcode on your page. Take a look at the Shortcode section for how to use it.
First Steps
Create Testimonials
- Step 1 - Navigate to Testimonials and click Add New
- Step 2 - Enter a testimonial title
- Step 3 - Add testimonial content using standard visual editor
- Step 4 - Add Categories from the right side. To assign it to the post, check the box next to the Testimonial Category name
- Step 5 - Click Set featured image on the right side and select image you want to use as an author's image
- Step 6 - Fill in the meta settings in the Testimonials Options like author and subtitle
- Step 7 - Once it's all done hit "Publish" button
Showing Testimonials
After creating testimonials post you need to use testimonials shortcode on your page. Take a look at the Shortcode section for how to use it.
First Steps
Create FAQ
- Step 1 - Navigate to FAQ and click Add New
- Step 2 - Enter a faq question in field title
- Step 3 - Add faq answer/content using standard visual editor
- Step 4 - Add Categories from the right side. To assign it to the post, check the box next to the FAQ Category name
- Step 5 - Once it's all done hit "Publish" button
Showing FAQ
After creating FAQ post you need to use FAQ shortcode on your page. Take a look at the Shortcode section for how to use it.
Shortcodes
Shortcodes
Sense includes many shortcodes that allow you to build unique layouts. All shortcodes are accessed in the Visual Editor and the easiest way to use them is the Backend Editor with drag and drop page builder.
- Step 1 - Open a page and click on the Visual editing tab
- Step 2 - Make sure you have Backend Editor enabled
- Step 3 - Click Add Element button
- Step 4 - In the popup window, select the shortcode you want, choose the shortcode options and click Save
Each shortcode has its own unique options. Below you can find the list of shortcodes with options.
Row
[vc_row type="" bg_image="" bg_position="" text_color="" custom_text_color="" text_align="" padding_top="" padding_bottom=""]
Row Content
[/row]
- type: one of these values: in-container, full-width-content or full-width-content-pad.
Use "in-container" if you want centered content with background (color, image or video) or use it if you select page template with sidebar.
Use "full-width-content" if you want your content across the entire width (optional with background) or "full-width-content-pad" to add small padding on both sides
- full_width_rows: one of these values: yes or no. If yes padding between columns will be remove
- bg_image: the ID of image
- bg_position: one of these values: left top, left center, left bottom, center top, center center, center bottom, right top, right center, right bottom
- bg_repeat: one of these values: no-repeat or repeat
- parallax: one of these values: yes or no. It will enable or disable parallax effect
- bg_color: a hex value for background, e.g. #f5f5f5
- video_bg: one of these values: yes or no. It will show or hide the video for background
- video_overlay: one of these values: no, dark, light, custom-color or custom-image
- video_overlay_color: a hex value for text if you select custom-color in video_overlay option above
- video_overlay_image: the ID of image
- video_mp4: URL to mp4 video file. You must include this format & the webm format to render your video in all browser. OGV file is optional
- video_webm: URL to webm video file
- video_ogv: URL to ogv video file (optional)
- video_image: the ID of poster image
- text_color: one of these values: dark, light or custom
- custom_text_color: a hex value for text if you select custom in text_color option above
- text_align: one of these values: left, center or right
- padding_top: only numerical value, default is 42 (no "px")
- padding_bottom: only numerical value, default is 42 (no "px")
- shadow: one of these values: no, inner, outer, effect-1 or effect-2
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
Column
[vc_column animation="" delay="" text_align=""]
Column Content
[/vc_column]
- width: one of these values: 1/1, 1/2, 1/3, 1/4, 1/6, 2/3, 3/4, 4/6 or 5/6
- animation: one of these values: no, fade-from-left, fade-from-top, fade-from-right, fade-from-bottom, flip-vertical, flip-horizontal, grow-in, grow-in-up, bounce-in, bounce-from-left, bounce-from-top, bounce-from-right, bounce-from-bottom or infinite-jump
- delay: numerical value in milliseconds, e.g. 300
- text_align: one of these values: none, left, center or right
- boxed: one of these values: yes or no. If yes the background will be visible
- boxed_bg: one of these values: dark, light or custom
- boxed_custom_bg: a hex value for text if you select custom in boxed_bg option above
- boxed_text_color: one of these values: dark, light or custom
- boxed_custom_text_color: a hex value for text if you select custom in boxed_text_color option above
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
Heading
[tg_heading title="Heading" subtitle="This is subtitle" level="h2" looks_like="h3" color="" align="" weight="" show_icon=""]
- title: the text for title
- subtitle: the text for subtitle
- level: one of these values: h1, h2, h3, h4, h5 or h6
- looks_like: one of these values: h1, h2, h3, h4, h5 or h6. You can change styling/size of heading element
- color: one of these values: default or custom
- custom_color: a hex value for text if you select custom in color option above
- keep_color: one of these values: yes or no. Keep default icon color when custom color is selected
- align: one of these values: left, center or right
- weight: one of these values: normal or right
- text_transform: one of these values: normal or uppercase
- border: one of these values: yes or no. If yes border will be visible
- border_width: one of these values: 100, 80, 70, 60, 50, 40, 30, 20, 10, 100px, 80px, 60px, 40px, 20px
- border_height: one of these values: small, medium or large
- border_position: one of these values: bottom, top or center
- border_type: one of these values: solid, double, dashed or dotted
- border_color: one of these values: dark, light or custom
- border_custom_color: a hex value for text if you select custom in border_color option above
- show_icon: one of these values: yes or no. If yes icon will be visible
- icon: one of these set of icons
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
Separator
[tg_separator style="dashed" top_margin="" bottom_margin="" width="70" align=""]
- style: one of these values: solid, double, dashed, dotted, shadow-top, shadow-bottom or none
- color: one of these values: dark or light
- top_margin: only numerical value, default is 21 (no "px")
- bottom_margin: only numerical value, default is 21 (no "px")
- width: in percent, one of these values: 100, 80, 70, 60, 50, 40, 30, 20 or 10 (no units)
- align: one of these values: center or left
Back to top
[tg_button text="Button" size="medium" type="outlined" style="rounded" text_transform="" color="orange" link="#link" link_title="Link Title" icon_location="after" icon_on_hover="yes" icon=""]
- text: the text you want to use in button
- size: one of these values: mini, small, medium, large, x-large, jumbo
- full_width: one of these values: yes or no
- type: one of these values: solid or outlined
- style: one of these values: flat, rounded, pill or 3d
- text_transform: one of these values: default or uppercase
- color: one of these values: primary, accent, blue, green, red, orange, yellow, turquoise, navy, light-gray, gray, black or white
- link: the link you want the button to go to, including http://
- link_title: the text for title attributes (optional)
- target: one of these values: _blank for new window, _self for same window or modal for modal window
- icon_location: one of these values: no, before or after
- icon_on_hover: one of these values: yes or no. If yes icon will be visible and animate on hover
- icon: one of these set of icons
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
Animated Icon
[tg_icon icon="tg-icon-mouse" size="small" color="primary" align="block" style="" animation="fade-from-top" animation_delay="300" text_align="center"]
- icon: one of these set of icons
- size: one of these values: tiny, small, medium, large or x-large
- color: one of these values: default, primary, accent, blue, green, red, orange, yellow, turquoise, navy, light-gray, gray, black, white or custom
- custom_color: a hex value for text if you select custom in color option above
- align: one of these values: inline or block
- style: one of these values: default, light-gray, light-gray-hover, dark-gray, dark-gray-hover, white, white-hover, color-light-gray-hover, color-dark-gray-hover or color-white-hover
- animation: one of these values: no, fade-from-left, fade-from-top, fade-from-right, fade-from-bottom, flip-vertical, flip-horizontal, grow-in, grow-in-up, bounce-in, bounce-from-left, bounce-from-top, bounce-from-right, bounce-from-bottom or infinite-jump
- animation_delay: only numerical value (no px)
- link: the link you want to go, including http://
- target: one of these values: _blank for new window, _self for same window or modal for modal window
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
Single Image
[tg_single_image image="" align="left" style="border" action="none"]
- image: the ID of image
- align: one of these values: left, center or right
- style: one of these values: default, border, round or round-border
- action: one of these values: none, popup or link
- hover_effect: one of these values: none, color, color-icon, color-cursor, dark, dark-icon or dark-cursor
- link: the link you want to go, including http:// (displayed only when action link is selected)
- link_title: the text for title attributes (displayed only when action link is selected)
- link_target: one of these values: _blank for new window, _self for same window or modal for modal window (displayed only when action link is selected)
- animation: one of these values: no, fade-from-left, fade-from-top, fade-from-right, fade-from-bottom, flip-vertical, flip-horizontal, grow-in, grow-in-up, bounce-in, bounce-from-left, bounce-from-top, bounce-from-right, bounce-from-bottom or infinite-jump
- delay: numerical value in milliseconds, e.g. 300
- alt: add alternate text for an image, if the image cannot be displayed (good for seo)
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
Image Gallery
[vc_gallery type="grid" images="" columns="4" hover_effect="dark-cursor"]
- type: one of these values: basic_slider, grid, grid_gap, grid_big or grid_gap_big
- images: list of id separated by coma, e.g. 20,21,22
- interval: numerical value in milliseconds, e.g. 5000
- columns: one of these values: 3, 4, 5, 6 or 7
- action: one of these values: none or popup
- hover_effect: one of these values: none, image-zoom, color, color-image-zoom, color-icon, color-cursor, color-cursor-image-zoom, dark, dark-image-zoom, dark-icon, dark-cursor or dark-cursor-image-zoom
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
Modal Window
[tg_modal position="top-left" overlay="dark" width="500" bg_color="#ffffff" text_color="dark" open_when="click" id="" class=""]
- position: one of these values: top-left, top-center, top-right, center-overlay, bottom-left, bottom-center or bottom-right
- overlay: one of these values: dark or light
- width: numerical value (no px)
- bg_color: a hex value for background, e.g. #ffffff
- text_color: one of these values: dark or light
- open_when: one of these values: click or scroll
- scroll_position: one of these values: 100, 90, 80, 70, 60, 50, 40 or 30
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
Audio
[tg_audio mp3="" ogg="" embed=""]
- mp3: URL to mp3 audio file
- ogg: URL to ogg audio file for browser compatybility (optional)
- embed: URL to your embed audio file on SoundCloud or one of these supported sites
Back to top
Video
[tg_video mp4="" webm="" ogv="" embed=""]
- mp4: URL to mp4 video file. You must include this format & the webm format to render your video in all browser. OGV file is optional
- webm: URL to webm video file
- ogv: URL to ogv video file (optional)
- embed: URL to your embed file on YouTube, Vimeo or one of these supported sites
Back to top
List
[tg_list size="" id="" class=""]
[tg_list_item title="List Title" icon="tg-icon-check" color="orange"]
[tg_list_item title="List Title 1" icon="tg-icon-heart" color="green"]
[/tg_list]
- size: one of these values: small, medium or large
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
- title: the text for list item
- icon: one of these set of icons
- color: one of these values: primary, accent, blue, green, red, orange, yellow, turquoise, navy, light-gray, gray, black or white
Back to top
Accordion
[tg_accordion style="1" active_tab="1" toggle="yes" control_icon="1" icon_position="after" numeric="no" id="" class=""]
[tg_accordion_item title="Title" show_icon="yes" icon="tg-icon-heart2" id=""][/tg_accordion_item]
[tg_accordion_item title="Title 1" show_icon="yes" icon="tg-icon-check" id=""][/tg_accordion_item]
[/tg_accordion]
- style: one of these values: 1, 2, 3, 4 or 5
- active_tab: numerical value to show active accordion item on load
- toggle: one of these values: yes or no. This will allow accordion items to be collapsible
- control_icon: one of these values: 1 (plus/minus icon) or 2 (arrows)
- icon_position: one of these values: before or after
- numeric: one of these values: yes or no. If yes numeric accordion will be visible
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
- title: the text for accordion item heading
- show_icon: one of these values: yes or no. If yes icon will be visible
- icon: one of these set of icons
- id: add a unique ID to style accordion item differently
Back to top
Tab
[tg_tab type="vertical-left" style="1" active_tab="1" id="" class=""]
[tg_tab_item title="Title" show_icon="yes" icon="tg-icon-heart2" id=""][/tg_accordion_item]
[tg_tab_item title="Title 1" show_icon="yes" icon="tg-icon-check" id=""][/tg_accordion_item]
[/tg_tab]
- type: one of these values: vertical-left, vertical-right, vertical-block, horizontal-left or horizontal--right
- style: one of these values: 1, 2 or 3
- active_tab: numerical value to show active tab item on load
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
- title: the text for tab item heading
- show_icon: one of these values: yes or no. If yes icon will be visible
- icon: one of these set of icons
- id: add a unique ID to style tab item differently
Back to top
Featured Box
[tg_featured_box heading_level="h4" icon_size="small" icon_color="orange" show_button="yes" button_size="medium" button_type="outlined" button_text_transform="" button_color="blue"]
Your content here...
[/tg_featured_box]
- title: the text for title
- heading_level: one of these values: h1, h2, h3, h4, h5 or h6
- boxed: one of these values: yes or no. If yes background will be visible
- icon_type: one of these values: font-icon or image-icon
- icon: one of these set of icons
- icon_size: one of these values: small, medium or large
- icon_color: one of these values: primary, accent, blue, green, red, orange, yellow, turquoise, navy, light-gray, gray, black, white or custom
- icon_custom_color: a hex value for icon if you select custom in icon_color option above
- image: the ID of image
- icon_style: one of these values: inline, left or center
- icon_circle: one of these values: yes or no. If yes the circle under icon will be visible
- icon_circle_style: one of these values: light-gray, light-gray-hover, dark-gray, dark-gray-hover, white, white-hover, color-light-gray-hover, color-dark-gray-hover or color-white-hover
- show_button: one of these values: yes or no. If yes the button will be visible
- button_text: the text you want to use in button
- button_size: one of these values: mini, small, medium, large
- button_type: one of these values: default or outlined
- button_style: one of these values: flat, rounded, pill or 3d
- button_text_transform: one of these values: default or uppercase
- button_color: one of these values: primary, accent, blue, green, red, orange, yellow, turquoise, navy, light-gray, gray, black or white
- button_link: the link you want the button to go to, including http://
- button_link_title: the text for title attributes (optional)
- button_target: one of these values: _blank for new window, _self for same window or modal for modal window
- button_icon_location: one of these values: no, before or after
- button_icon_on_hover: one of these values: yes or no. If yes icon in button will be visible and animate on hover
- button_icon: one of these set of icons
- animation: one of these values: no, fade-from-left, fade-from-top, fade-from-right, fade-from-bottom, flip-vertical, flip-horizontal, grow-in, grow-in-up, bounce-in, bounce-from-left, bounce-from-top, bounce-from-right, bounce-from-bottom or infinite-jump
- delay: only numerical value in milliseconds
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
[tg_promo_box style="2" title="Promo Box Title" subtitle="Your subtitle" text_style="normal" show_button="yes" button_icon_location="after" button_icon_on_hover="yes" button_icon="tg-icon-target"]
- style: one of these values: 1 (Title and button side by side) or 2 (Title, subtitle and button below each other)
- title: the text for title
- subtitle: the text for subtitle
- text_style: one of these values: normal or light
- text_align: one of these values: left or center
- text_color: one of these values: dark or light
- show_button: one of these values: yes or no. If yes the button will be visible
- button_text: the text you want to use in button
- button_size: one of these values: mini, small, medium, large, x-large, jumbo
- button_type: one of these values: default or outlined
- button_style: one of these values: flat, rounded, pill or 3d
- button_text_transform: one of these values: default or uppercase
- button_color: one of these values: primary, accent, blue, green, red, orange, yellow, turquoise, navy, light-gray, gray, black or white
- button_link: the link you want the button to go to, including http://
- button_link_title: the text for title attributes (optional)
- button_target: one of these values: _blank for new window, _self for same window or modal for modal window
- button_icon_location: one of these values: no, before or after
- button_icon_on_hover: one of these values: yes or no. If yes icon in button will be visible and animate on hover
- button_icon: one of these set of icons
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
Notification
[tg_notification type="info" text_align="center" close_button="yes" show_icon="yes" icon="tg-icon-mouse"]Your content here...[/tg_notification]
- type: one of these values: info, success, warning, error or custom
- custom_bg: a hex value for background if you select custom in type option above
- custom_text_color: a hex value for text if you select custom in type option above
- text_align: one of these values: left, center or right
- close_button: one of these values: yes or no. If yes close button will be visible
- show_icon: one of these values: yes or no. If yes icon will be visible
- icon: one of these set of icons
- icon_color: one of these values: dark or light
- animation: one of these values: no, fade-from-left, fade-from-top, fade-from-right, fade-from-bottom, flip-vertical, flip-horizontal, grow-in, grow-in-up, bounce-in, bounce-from-left, bounce-from-top, bounce-from-right, bounce-from-bottom or infinite-jump
- delay: numerical value in milliseconds, e.g. 300
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
Progress Bar
[tg_progress_bar label="WordPress" value="60" unit="%" size="medium" color="#2e96db" type="animated" label_position="inside"]
- label: add label here
- value: only numerical value within a range 1-100 e.g. 50 (no "%" or any symbol)
- unit: add symbol you want to show next to percentage value
- size: one of these values: small, medium or large
- color: a hex value for main bar, e.g. #2e96db
- background: a hex value for lower bar, e.g. #e2e2e2
- type: one of these values: solid, striped or animated
- label_position: one of these values: inside, above or below
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
Pie Chart
[tg_pie_chart label="WordPress" value="60" unit="%" color="#2e96db"]
- label: add label here
- value: only numerical value within a range 1-100 e.g. 50 (no "%" or any symbol)
- unit: add symbol you want to show next to percentage value
- color: a hex value for main bar, e.g. #2e96db
- background: a hex value for lower bar, e.g. #e2e2e2
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
Counter
[tg_counter label="WordPress" value="160" suffix="%" speed="3000" size="medium" show_icon="yes" icon="tg-icon-heart" icon_color="primary"]
- label: add label here
- value: only numerical value e.g. 120 (no "%" or any symbol)
- prefix: add symbol you want to place after value
- suffix: add symbol you want to place before value
- speed: numerical value in milliseconds, e.g. 300
- size: one of these values: small, medium or large
- style: one of these values: normal or light
- text_transform: one of these values: normal or uppercase
- color: a hex value for counter, e.g. #2e96db
- show_icon: one of these values: yes or no. If yes icon will be visible
- icon: one of these set of icons
- icon_color: one of these values: default, primary, accent, blue, green, red, orange, yellow, turquoise, navy, light-gray, gray, black, white or custom
- icon_custom_color: a hex value for icon if you select custom in icon_color option above
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
Countdown
[tg_countdown type="side-by-side" end_date="2016-11-10 10:20" size="medium" color="dark" show_years="yes" show_months="yes" show_weeks="yes" show_hours="yes"]
- type: one of these values: side-by-side, below or below-with-bg
- end_date: enter date in this format: 2016-12-20 10:20:00
- size: one of these values: small, medium or large
- color: one of these values: dark or light
- align: one of these values: left or center
- show_years: one of these values: yes or no. If yes year will be visible
- show_months: one of these values: yes or no. If yes months will be visible
- show_weeks: one of these values: yes or no. If yes weeks will be visible
- show_days: one of these values: yes or no. If yes days will be visible
- show_hours: one of these values: yes or no. If yes hours will be visible
- show_minutes: one of these values: yes or no. If yes minutes will be visible
- show_seconds: one of these values: yes or no. If yes seconds will be visible
- year_label: the text for year label
- years_label: the text for years label
- month_label: the text for month label
- months_label: the text for months label
- week_label: the text for week label
- weeks_label: the text for weeks label
- day_label: the text for day label
- days_label: the text for days label
- hour_label: the text for hour label
- hours_label: the text for hours label
- minute_label: the text for minute label
- minutes_label: the text for minutes label
- second_label: the text for second label
- seconds_label: the text for seconds label
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
Pricing Table
[tg_pricing_table]
[tg_pricing_table_item show_button="yes"]
[tg_list]
[tg_list_item title="List Title" icon="tg-icon-check" color="accent"]
[tg_list_item title="List Title 1" icon="tg-icon-check" color="accent"]
[tg_list_item title="List Title 2" icon="tg-icon-check" color="accent"]
[/tg_list]
[/tg_pricing_table_item]
[tg_pricing_table_item featured="yes" featured_color="custom" featured_custom_color="#ad27ba" show_button="yes"]
[tg_list]
[tg_list_item title="List Title" icon="tg-icon-check" color="accent"]
[tg_list_item title="List Title 1" icon="tg-icon-check" color="accent"]
[tg_list_item title="List Title 1" icon="tg-icon-check" color="accent"]
[/tg_list]
[/tg_pricing_table_item]
[tg_pricing_table_item show_button="yes"]
[tg_list]
[tg_list_item title="List Title" icon="tg-icon-check" color="accent"]
[tg_list_item title="List Title 1" icon="tg-icon-check" color="accent"]
[tg_list_item title="List Title 1" icon="tg-icon-check" color="accent"]
[/tg_list]
[/tg_pricing_table_item]
[/tg_pricing_table]
- columns: one of these values: 2, 3, 4 or 5
- striped: one of these values: yes or no. If yes striped table will be visible
- background_color: a hex value for table background, e.g. #f5f5f5
- border_color: a hex value for borders in table, e.g. #e6e6e6
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
- title: the text for title
- subtitle: the text for subtitle
- featured: one of these values: yes or no. If yes the column will be featured column
- featured_color: one of these values: primary, accent, blue, green, red, orange, yellow, turquoise, navy, light-gray, gray, black, white or custom
- featured_custom_color: a hex value for column if you select custom in featured_color option above
- price: only numerical value e.g. 29
- currency: the symbol for currency next to the price
- interval: the text for interval e.g. per year
- show_button: one of these values: yes or no. If yes the button will be visible
- button_text: the text you want to use in button
- button_size: one of these values: mini, small, medium, large
- button_type: one of these values: default or outlined
- button_style: one of these values: flat, rounded, pill or 3d
- button_text_transform: one of these values: default or uppercase
- button_color: one of these values: primary, accent, blue, green, red, orange, yellow, turquoise, navy, light-gray, gray, black or white
- button_link: the link you want the button to go to, including http://
- button_link_title: the text for title attributes (optional)
- button_target: one of these values: _blank for new window, _self for same window or modal for modal window
- button_icon_location: one of these values: no, before or after
- button_icon_on_hover: one of these values: yes or no. If yes icon in button will be visible and animate on hover
- button_icon: one of these set of icons
Back to top
Social Icons
[tg_social_icons twitter="" facebook="" linkedin=""]
- show_twitter: one of these values: yes or no. If yes Twitter icon will be visible
- twitter: the Twitter page/profile URL
- show_facebook: one of these values: yes or no. If yes Facebook icon will be visible
- facebook: the Facebook page/profile URL
- show_google: one of these values: yes or no. If yes Google+ icon will be visible
- google: the Google+ page/profile URL
- show_pinterest: one of these values: yes or no. If yes Pinterest icon will be visible
- pinterest: the Pinterest page/profile URL
- show_dribbble: one of these values: yes or no. If yes Dribbble icon will be visible
- dribbble: the Dribbble page/profile URL
- show_github: one of these values: yes or no. If yes GitHub icon will be visible
- github: the GitHub page/profile URL
- show_flickr: one of these values: yes or no. If yes Flickr icon will be visible
- flickr: the Flickr page/profile URL
- show_vimeo: one of these values: yes or no. If yes Vimeo icon will be visible
- vimeo: the Vimeo page/profile URL
- show_youtube: one of these values: yes or no. If yes YouTube icon will be visible
- youtube: the YouTube page/profile URL
- show_linkedin: one of these values: yes or no. If yes LinkedIn icon will be visible
- linkedin: the LinkedIn page/profile URL
- show_lastfm: one of these values: yes or no. If yes Last.fm icon will be visible
- lastfm: the Last.fm page/profile URL
- show_skype: one of these values: yes or no. If yes Skype icon will be visible
- skype: the Skype page/profile URL
- show_tumblr: one of these values: yes or no. If yes Tumblr icon will be visible
- tumblr: the Tumblr page/profile URL
- show_instagram: one of these values: yes or no. If yes Instagram icon will be visible
- instagram: the Instagram page/profile URL
- show_yelp: one of these values: yes or no. If yes Yelp icon will be visible
- yelp: the Yelp page/profile URL
- show_rss: one of these values: yes or no. If yes RSS icon will be visible
- rss: the RSS feed URL
- show_stumbleupon: one of these values: yes or no. If yes StumbleUpon icon will be visible
- stumbleupon: the StumbleUpon page/profile URL
- show_deviantart: one of these values: yes or no. If yes DeviantART icon will be visible
- deviantart: the DeviantART page/profile URL
- show_delicious: one of these values: yes or no. If yes Delicious icon will be visible
- delicious: the Delicious page/profile URL
- show_reddit: one of these values: yes or no. If yes Reddit icon will be visible
- reddit: the Reddit page/profile URL
- show_forrst: one of these values: yes or no. If yes Forrst icon will be visible
- forrst: the Forrst page/profile URL
- show_soundcloud: one of these values: yes or no. If yes SoundCloud icon will be visible
- soundcloud: the SoundCloud page/profile URL
- show_picasa: one of these values: yes or no. If yes Picasa icon will be visible
- picasa: the Picasa page/profile URL
- show_stackoverflow: one of these values: yes or no. If yes Stackoverflow icon will be visible
- stackoverflow: the Stackoverflow username
- show_dropbox: one of these values: yes or no. If yes Dropbox icon will be visible
- dropbox: the Dropbox page/profile URL
- show_500px: one of these values: yes or no. If yes 500px icon will be visible
- 500px: the 500px username
- show_behance: one of these values: yes or no. If yes Behance icon will be visible
- behance: the Behance username
- show_slideshare: one of these values: yes or no. If yes SlideShare icon will be visible
- slideshare: the SlideShare username
- show_xing: one of these values: yes or no. If yes Xing icon will be visible
- xing: the Behance username
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
[tg_share_buttons love_it="yes" twitter="yes" facebook="yes" google="yes" pinterest="yes" effect="zoom-in"]
- love_it: one of these values: yes or no. If yes Love It icon will be visible
- love_it_tooltip: the text for Love It tooltip
- love_it_tooltip_done: the text for previously clicked Love It button
- twitter: one of these values: yes or no. If yes Twitter icon will be visible
- twitter_tooltip: the text for Twitter tooltip
- facebook: one of these values: yes or no. If yes Facebook icon will be visible
- facebook_tooltip: the text for Facebook tooltip
- google: one of these values: yes or no. If yes Google+ icon will be visible
- google_tooltip: the text for Google+ tooltip
- pinterest: one of these values: yes or no. If yes Pinterest icon will be visible
- pinterest_tooltip: the text for Pinterest tooltip
- linkedin: one of these values: yes or no. If yes Dribbble icon will be visible
- linkedin_tooltip: the text for LinkedIn tooltip
- email: one of these values: yes or no. If yes GitHub icon will be visible
- email_tooltip: the text for Email tooltip
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
- style: one of these values: default, square, round or circle
- size: one of these values: small, medium or large
- color: one of these values: dark, light, gray or color
- type: one of these values: default, fill, outline, text or text-icon
- align: one of these values: left, center, right or full-width
- effect: one of these values: zoom-in, up, down or color-effect
Back to top
Google Map
[tg_google_map height="300" type="map" lat="40.7218493" long="-73.9773738" zoom="12" controls="yes" stylized="yes" color="#39442e" saturation="-20" brightness="-20" marker_image="image" marker_image_custom="" marker_animation="yes" marker="yes" marker_lat="40.7218493" marker_long="-73.9773738"]
- height: only numerical value e.g. 300
- type: one of these values: map, satellite, terrain or hybrid
- lat: only numerical value. You can use this converter to convert address to latitude & longitude
- long: only numerical value. You can use this converter to convert address to latitude & longitude
- zoom: one of these values: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19 or 20
- controls: one of these values: yes or no. If yes controls will be visible
- stylized: one of these values: yes or no. If yes you can colorize the map
- color: a hex value for map color, e.g. #f5f5f5
- saturation: only numerical value in range from -100 to 100
- brightness: only numerical value in range from -100 to 100
- marker_image: one of these values: default (default marker), default-theme (marker image from Theme Options) or image (custom marker image)
- marker_image_custom: the ID of image
- marker_animation: one of these values: yes or no. If yes the marker animation will be visible
- marker: one of these values: yes or no. If yes the marker 1 will be visible
- marker_lat: only numerical value. You can use this converter to convert address to latitude & longitude
- marker_long: only numerical value. You can use this converter to convert address to latitude & longitude
- marker_info: text for active marker 1
- marker2: one of these values: yes or no. If yes the marker 2 will be visible
- marker2_lat: only numerical value. You can use this converter to convert address to latitude & longitude
- marker2_long: only numerical value. You can use this converter to convert address to latitude & longitude
- marker2_info: text for active marker 2
- marker3: one of these values: yes or no. If yes the marker 3 will be visible
- marker3_lat: only numerical value. You can use this converter to convert address to latitude & longitude
- marker3_long: only numerical value. You can use this converter to convert address to latitude & longitude
- marker3_info: text for active marker 3
- marker4: one of these values: yes or no. If yes the marker 4 will be visible
- marker4_lat: only numerical value. You can use this converter to convert address to latitude & longitude
- marker4_long: only numerical value. You can use this converter to convert address to latitude & longitude
- marker4_info: text for active marker 4
- marker5: one of these values: yes or no. If yes the marker 5 will be visible
- marker5_lat: only numerical value. You can use this converter to convert address to latitude & longitude
- marker5_long: only numerical value. You can use this converter to convert address to latitude & longitude
- marker5_info: text for active marker 5
- marker6: one of these values: yes or no. If yes the marker 6 will be visible
- marker6_lat: only numerical value. You can use this converter to convert address to latitude & longitude
- marker6_long: only numerical value. You can use this converter to convert address to latitude & longitude
- marker6_info: text for active marker 6
- marker7: one of these values: yes or no. If yes the marker 7 will be visible
- marker7_lat: only numerical value. You can use this converter to convert address to latitude & longitude
- marker7_long: only numerical value. You can use this converter to convert address to latitude & longitude
- marker7_info: text for active marker 7
- marker8: one of these values: yes or no. If yes the marker 8 will be visible
- marker8_lat: only numerical value. You can use this converter to convert address to latitude & longitude
- marker8_long: only numerical value. You can use this converter to convert address to latitude & longitude
- marker8_info: text for active marker 8
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
Testimonial
[tg_testimonials type="slider" num_of_testimonials="6" categories="cat-1,cat-2" show_photo="yes" slider_style="dots"]
- type: one of these values: slider or masonry
- num_of_testimonials: only numerical value e.g. 4
- categories: add the slug of testimonial categories you want to display in, separated by comma, e.g. cat-one,cat-two
- order_by: one of these values: date or author
- order: one of these values: desc or asc
- show_photo: one of these values: yes or no. If yes photo will be visible
- photo_position: one of these values: top or bottom
- align: one of these values: left, center or right
- slider_style: one of these values: arrows, dots, arrows-dots or no-controls
- slider_speed: numerical value in milliseconds, e.g. 3000
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
Team Member
[tg_team_members type="slider" num_of_team_members="6" categories="cat-1,cat-2" show_description="yes" slider_style="dots"]
- type: one of these values: slider or grid
- num_of_team_members: only numerical value e.g. 4
- categories: add the slug of team members categories you want to display in, separated by comma, e.g. cat-one,cat-two
- order_by: one of these values: date or title
- order: one of these values: desc or asc
- columns: one of these values: 1, 2, 3, 4 or 5
- show_description: one of these values: yes or no. If yes description will be visible
- align: one of these values: left, center or right
- background: one of these values: yes or no. If yes background will be visible
- round_photo: one of these values: yes or no. If yes photo will be rounded
- show_tooltip: one of these values: yes or no. If yes tooltip will be visible
- slider_style: one of these values: arrows, dots, arrows-dots or no-controls
- slider_speed: numerical value in milliseconds, e.g. 3000
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
FAQ
[tg_faq num_of_faq="4" categories="cat-1,cat-2" order_by="date" order="desc" style="style1"]
- num_of_faq: only numerical value e.g. 4
- categories: add the slug of faq categories you want to display in, separated by comma, e.g. cat-one,cat-two
- order_by: one of these values: date or title
- order: one of these values: desc or asc
- show_filter: one of these values: yes or no. If yes filter will be visible
- style: one of these values: style1, style2, style3 or style4
- arrow_style: one of these values: 1 (plus/minus icon) or 2 (arrows)
- align: one of these values: left, center or right
- multiply: one of these values: yes or no. If yes multiply questions could be open
- numeric: one of these values: yes or no. If yes numeric questions will be visible
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
Blog
[tg_blog posts="6" columns="3" categories="all" order_by="" order="asc" style="timeline" hover_style="dark-cursor" slider="yes" num_scroll_posts="3" slider_autoplay="yes"]
- posts: only numerical value e.g. 4
- columns: one of these values: 1, 2, 3, 4, 5 or 6
- categories: add the slug of categories you want to display in, separated by comma, e.g. cat-one,cat-two
- order_by: one of these values: date or title
- order: one of these values: desc or asc
- style: one of these values: grid, list, small-list, timeline, small-timeline or widget-list
- hover_style: one of these values: none, image-zoom, color, color-image-zoom, color-icon, color-icons, color-text, color-cursor, color-cursor-image-zoom, dark, dark-image-zoom, dark-icon, dark-icons, dark-text, dark-cursor or dark-cursor-image-zoom
- slider: one of these values: yes or no. If yes slider will be enabled
- num_scroll_posts: only numerical value e.g. 1
- slider_style: one of these values: arrows, dots, arrows-dots or no-controls
- slider_effect: one of these values: scroll or fade
- slider_autoplay: one of these values: yes or no. If yes autoplay slider will be enabled
- slider_speed: numerical value in milliseconds, e.g. 3000
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
Back to top
Portfolio
[tg_portfolio projects="6" columns="3" categories="all" order_by="" order="asc" type="box-cursor" meta_type="date" slider="yes" num_scroll_projects="3" slider_autoplay="yes"]
- projects: only numerical value e.g. 4
- columns: one of these values: 1, 2, 3, 4, 5 or 6
- categories: add the slug of portfolio categories you want to display in, separated by comma, e.g. cat-one,cat-two
- order_by: one of these values: date or title
- order: one of these values: desc or asc
- type: one of these values: box-none, box, box-icon, box-icons, box-text, box-cursor, box-color, box-color-icon, box-color-icons, box-color-text, box-color-cursor, color-box, color-box-icon, color-box-icons, color-box-text, color-box-cursor, simple, simple-icon, simple-icons, simple-text, simple-cursor, simple-color-icon, simple-color-icons, simple-color-text, simple-color-cursor, style-box, style-box-icon, style-box-icons, style-box-text, style-box-cursor, style-box-color-icon, style-box-color-icons, style-box-color-text, style-box-color-cursor, style-color-box, style-color-box-icon, style-color-box-icons, style-color-box-text, style-color-box-cursor, zoomin-photo, zoomin-photo-cursor, photo, photo-cursor, color-photo, color-photo-cursor, motion-photo, motion-photo-icon, motion-photo-icons or motion-photo-cursor
- align: one of these values: left or center
- meta_type: one of these values: category or date
- slider: one of these values: yes or no. If yes slider will be enabled
- num_scroll_projects: only numerical value e.g. 1
- slider_style: one of these values: arrows, dots, arrows-dots or no-controls
- slider_effect: one of these values: scroll or fade
- slider_autoplay: one of these values: yes or no. If yes autoplay slider will be enabled
- slider_speed: numerical value in milliseconds, e.g. 3000
- id: add a unique ID to style this element differently
- class: add a class or multiple classes to style this element differently
How To's
Sense Theme allows you to build one page scroll website. When you click on menu item it will scroll to the specific section of the page. Please see below information how to set this up.
- Step 1 - Navigate to Pages > Add New to create a new page
- Step 2 - Click Backend Editor and add some rows with content. You should divide a page to as many sections as menu items you have in your menu
- Step 3 - Open every Rows Settings that begins a section and add descriptive and unique name to ID field, eg. about-me (see below image). Remember that it is not allowed to add spaces to ID's
- Step 4 - Select "One Page Scroll" option in "Page Options" panel at the bottom of the page
- Step 5 - Save Page
- Step 6 - Navigate to Appearance > Menus section and click create a new menu link or select and edit menu that you already have
- Step 7 - Add custom links with Link Text as menu title and URL in this form: #{your section id from created page}, eg. #about-me (see image below)
- Step 8 - After setting up your menu, scroll down to the bottom of the page to assign menu to the "Primary Menu" location in the Display Location box. Once it's all done hit "Save Menu" button
- Step 9 - Navigate to Settings > Reading and select the created page as a Front page in static page section
- Step 10 - Click "Save Changes"
Useful
Theme Update via WordPress
You can update your theme in two ways through WordPress, or via FTP but the first thing you need to do is download the new theme from Mojo Marketplace.
- Step 1 - You need to deactivate the current Sense Theme in Appearance > Themes section by simply activating a different theme.
- Step 2 - Once you activate different theme, you can delete the Sense Theme. Don't worry, your content will not be lost. Click Theme Details on Sense Theme and hit Delete button.
- Step 3 - Click Add New Theme and hit Upload Theme button
- Step 4 - Now you just need to find the sense-theme.zip file in the Sense Theme folder and hit Install Now
- Step 5 - Wait while the theme is uploaded and installed.
- Step 6 - Navigate to Appearance > Themes and acivate Sense theme.
Important Update Info
Important Backup Information: Whenever you update the theme, it's always a good idea to backup your current theme folder. Log into your server and make a copy of the Sense Theme folder located at /wp-content/themes. If you are using the Revolution Slider and have added custom css, please make a backup of the styles because those files will be removed when you update. You can also backup your theme options on the Import / Export Options inside Appearance > Theme Options panel.
- Do Not Rename the Theme Folder - If you rename your theme folder when you update, then the path is no longer valid. WordPress stores menus and widget settings and some other settings by folder path. You need to rename your theme folder back to what it was before, and your settings, menus, widgets will be restored. If you need to keep your previous theme folder, then simply make a copy of it before you upload the new theme
- Reset Browser Cache - It is always recommended to reset your browser, plugin, server cache when you update. Visual issues may happen, its only cache that needs emptied. Each browser allows you to remove cookies, history and other data.
Useful
Theme Update via FTP
You can update your theme in two ways through WordPress, or via FTP but the first thing you need to do is download the new theme from Mojo Marketplace.
- Step 1 - Login to your FTP account and navigate to /wp-content/themes location.
- Step 2 - Backup your "sense-theme" theme folder located on your server by saving it on your computer.
- Step 3 - After backup this folder, delete "sense-theme" folder on your server. Don't worry, your content will not be lost.
- Step 4 - Then simply drag and drop the new sense-theme folder (not the .zip file) into /wp-content/themes on your server.
- Step 5 - Activate the updated theme. Navigate to Appearance > Themes and acivate Sense Theme.
Important Update Info
Important Backup Information: Whenever you update the theme, it always a good idea to backup your current theme folder. Log into your server and make a copy of the sense-theme folder located at /wp-content/themes. If you are using the Revolution Slider and have added custom css, please make a backup of the styles because those files will be removed when you update. You can also backup your theme options on the Import / Export Options inside Appearance > Theme Options panel.
- Do Not Rename the Theme Folder - If you rename your theme folder when you update, then the path is no longer valid. WordPress stores menus and widget settings and some other settings by folder path. You need to rename your theme folder back to what it was before, and your settings, menus, widgets will be restored. If you need to keep your previous theme folder, then simply make a copy of it before you upload the new theme
- Reset Browser Cache - It is always recommended to reset your browser, plugin, server cache when you update. Visual issues may happen, its only cache that needs emptied. Each browser allows you to remove cookies, history and other data.
Useful
Speed Optimization
Your website load speed matters a great deal to ensure good search engine ranking and a great user experience. You can follow these steps to speed up your website and improve customer satisfaction. You can visit the additional links for even more tips.
- Get a Good Host. We recommend Bluehost.
- Use a Content Delivery Network (CDN). We recommend MaxCDN or CloudFlare.
- Install a WordPress Caching Plugin. We recommend W3 Total Cache.
- Install a Database Optimizer Plugin. We recommend WP Optimize.
- Install an Image Compress Plugin. We recommend EWWW Image Optimizer.
- Reduce the number of plugins.
- Reduce the number of posts on the page.
- Use smaller images. Don't upload images wider than 1920px.
- Keep in minimal. Use less Visual Composer shortcodes.
Additional Links
Useful
Child Theme
Sense Theme comes with a Child Theme. If you want to use it, unzip sense-theme-child.zip into .../wp-content/themes/ folder.
What is a Child Theme
A child theme is a theme that inherits the functionality of another theme, called the parent theme (Sense Theme). Child themes allow you to modify, or add to the functionality of that parent theme. A child theme is the best, safest, and easiest way to modify an existing theme, whether you want to make a few tiny or extensive changes. By keeping your customization in a child theme you can always keep the parent theme up-to-date without losing your modification.
Additional Links
Changelog
Sense is constantly being updated with new features and adjustments. You can always view the most recent update information on the Mojo Marketplace item page, or view the full changelog in the changelog.txt file inside the package zip file. You can also view the full changelog below.
Version 1.0.0 - 01-13-2017