You can use "Evolve FAQ" component. This page has been created using this component.

For this perform the following steps:

1. Create a new page and assign to it appropriate slug (eg. "faq-items"). In CKEditor press "Create Div Container" button and in the field "Stylesheet classes" enter value "question" and click "OK". Then type a question. After that, once again, create a DIV element with a class "answer" and type your answer. Repeat this process as many as you need.

2. Create a new page  and assign to it appropriate slug. Add this page to the menu. In CKEditor put shortcode like this:

{% evolve-faq "faq-items" %}

NOTE: For using shortcodes plugin DynPages must be installed on your site.

For using with theme's template files in the tempalate file put code like this:

<?php get_component_with_params('evolve-faq', array( array('faq-items'))); ?>

Component structure:

get_component_with_params('evolve-faq', array( array(slug,slug,...), int active_tab_nr=1))

Variable active_tab_nr can have the following values: Number, "all" or "none". If entered a number - then an active will be listed Tab. If entered value "all" - then an active will be all Tabs. If "none" - all Tabs will be closed. If a variable is not assigned - an active will be first Tab.

In an Evolve Theme, the main slideshow organized using JSSOR script. New slideshow creating and parameter assignment is performed on the themes administration page in the area "Jssor Slider settings". Each parameter field has context-sensitive help (Tooltips), which explains the purpose of the field. Slider and captions transitions can be set using the buttons "Transitions" which are located above each field. For effects selecting  using a special window that instantly shows the selected effect functioning:

You can assign as transitions as you need. Slider name set in the field "Slider ID". All changes applied to this slider. If you need to create a new slider - set different name in the field "Slider ID".

Each slider uses its own parameter file. This is a Javascript file that is created automatically and can be found in the path: "theme/Evolve/scripts/jssor/". Slider changes performed in 2 stages: Establishing all required parameters and saved the changes made (button "Save Settings"). After that performed the script generation process (button "Generate").

Slider content is formed from the data page(s). For content formation you can use multiple files or a single file

Slider content must have the necessary structure source. How to do it you can see when open the data file "slider-1.xml" or "slider-2.xml" provided in the catalog "Demo".

Component structure:

get_component_with_params('evolve-main-slider', array(string slider_id='slider1_container', array(slug,slug,...), bool inner_div=true, bool show_thumbs=false, bool show_bullets=false))

Component call - insert in your template next code examples:

1. <?php get_component_with_params('evolve-main-slider', array('slider1_container', array('slider-1', 'slider-2'))); ?>

insert Jssor slider from 2 source files. Insert inner div structure. Thumbnail and bullets structures not used. Activate Javascript settings file: "slider1_container.js".

2. <?php get_component_with_params('evolve-main-slider', array('slider2_container', array('slider-1',), 'false', 'true', 'true')); ?>

insert Jssor slider from 1 source file. Not used inner div structure. Insert Thumbnail and Bullets structures. Activate Javascript settings file: "slider2_container.js".

If plugin DynPages installed in your site you can use shortcodes, like this:

{% evolve-main-slider slider1_container 'slider-1' false true %}

The parameters used in the captions transitions description:

More information and examples can be found on JSSOR slider documentation page.

Component structure:

get_component_with_params('evolve-accordion', array(array(slug,slug,...), bool excerpt=false))

Component call - insert in your template next code examples:

1. <?php get_component_with_params('evolve-accordion', array(array('index', 'index-1', 'index-2'))); ?>

insert 3 Accordion tabs; with content from pages: index, index-1, index-2; outputs - full pages content.

2. <?php get_component_with_params('evolve-accordion', array(array('index', 'index-1'), 400)); ?>

insert 2 Accordion tabs; with content from pages: index, index-1; outputs - pages excerpts 400 simbols length.

If plugin DynPages installed in your site you can use shortcodes, like this:

{% evolve-accordion "index index-1" 400 %}

Component structure:

get_component_with_params('evolve-animated-number', array(array(text&number&increase,text&number&increase,...), string class_name=auto))

Component call - insert in your template next code examples:

1. <?php get_component_with_params('evolve-animated-number', array(array('Happy Customers&856&300', 'Site Previews&4586&800'))); ?>

insert 2 elements; with values: For first element - text "Happy Customers", displays the number "856", number increase dimension "300". For second element - text "Site Previews", displays the number "4586", number increase dimension "800". Elements class name is assigned automatically.

2. <?php get_component_with_params('evolve-animated-number', array(array('Happy Customers&856&300', 'Site Previews&4586&800', File Downloads&1500), "four")); ?>

insert 3 elements; with values: For first element - text "Happy Customers", displays the number "856", number increase dimension "300". For second element - text "Site Previews", displays the number "4586", number increase dimension "800". For third element - text "File Downloads", displays the number "1500", number increase dimension assign automatically to "500". Elements class name is assigned to "four columns".

If plugin DynPages installed in your site you can use shortcodes, like this:

{% evolve-animated-number "Happy Customers&856&300_Site Previews&4586&800_File Downloads&1500" %}

First, create source page(s) and add to it the necessary images using a graphic editor (eg. CKEditor). You can also insert a links to selected photos.

Component structure:

get_component_with_params('evolve-camera-gallery', array(array(slug,slug,...), int animation_start=800, int animation_increase=400))

Component call - insert in your template next code examples:

1. <?php get_component_with_params('evolve-camera-gallery', array(array('index', 'index-1'))); ?>

Create Camera gallery from 2 source files. Slides animation starts after 8 sec, all other slides changes with 4 sec increase time value.

2. <?php get_component_with_params('evolve-camera-gallery', array(array('gallery'), 1000, 500)); ?>

Create Camera gallery from source file with slug "gallery". Slides animation starts after 10 sec, all other slides changes with 5 sec increase time value.

If plugin DynPages installed in your site you can use shortcodes, like this:

{% evolve-camera-gallery "index index-1" %}

First, create source page(s). Add to it the necessary customer image or thumb using a graphic editor (eg. CKEditor), fill image ALT field with customer name / duties. Create new line (press Enter) and write opinion. If necessary repeat the process.

Component structure:

get_component_with_params('evolve-customers-carousel', array(array(slug,slug,...), int navi_style=2, string navi_arrows="icon-angle"))

Component call - insert in your template next code examples:

1. <?php get_component_with_params('evolve-customers-carousel', array(array('index', 'index-1'), 4, 'icon-chevron')); ?>

Create Customers Carousel from 2 source files. Use navigation elements style #4. Set "icon-chevron" icon image for navigation elements.

2. <?php get_component_with_params('evolve-customers-carousel', array(array('opinion-1, 'opinion-2', 'opinion-3'))); ?>

Create Customers Carousel from 3 source files. Use navigation elements style #2. Set "icon-angle" icon image for navigation elements.

You can use navigation elements styles from #1 to #4.

If plugin DynPages installed in your site you can use shortcodes, like this:

{% evolve-customers-carousel "opinion-1 opinion-2 opinion-3" %}

First, create source page(s). Add to it the necessary contents.

Component structure:

get_component_with_params('evolve-featered-boxes', array(array(slug,slug,...), array(box-icon,box-icon,...), string video_effect, int page_excerpt, string column_width=auto, bool inherit_structure=false, string elements_style="circle-1", string alignment=false, bool show_read_more=true))

To create an image of icons you can use any of the classes represented in the fonts Font Awesome and / or Typicons. The topology of these fonts can be found here.

If the icon class uses several class names for space between them use low underscore mark "_".

Component call - insert in your template next code examples:

1. <?php get_component_with_params('evolve-featered-boxes', array(array('index', 'index-1'), "typcn_typcn-chart-bar-outline icon-share-sign", flipInX, 118, "one-third column", true, "circle-2", right, false)); ?>

Create Featered boxes from 2 source files. Set icons images; video effect; page excerpt 118 symbols; element column width; elements inherit structure; style to "circle-2"; alignment to right; not show Read more button.

2. <?php get_component_with_params('evolve-featered-boxes', array(array('index', 'index-1', 'index-2'), "typcn_typcn-thumbs-up typcn_typcn-cog-outline typcn_typcn-shopping-cart", fadeInDown, 200, "four columns", false, "icons-center", false, false)); ?>

Create Featered boxes from 3 source files. Set icons images; video effect; page excerpt 200 symbols; element column width; elements structure not inherit; style to "icons-center"; alignment not set (left); not show Read more button.

If plugin DynPages installed in your site you can use shortcodes, like this:

{% evolve-featered-boxes "index index-1" "typcn_typcn-thumbs-up typcn_typcn-cog-outline" fadeInDown 118 "four columns" false circle-1 false false %}

First, create source page(s). Add to it in first line the necessary background image using a graphic editor (eg. CKEditor), fill image ALT field with page slug. Add to it the necessary contents.

Component structure:

get_component_with_params('evolve-parallex-content', array(array(slug,slug,...), bool show_page_title=false))

Component call - insert in your template next code examples:

1. <?php get_component_with_params('evolve-parallex-content', array(array('parallex-1'), true)); ?>

Create page with parallex background from source file. Shows page title and slug.

2. <?php get_component_with_params('evolve-parallex-content', array(array('parallex-2'))); ?>

Create page with parallex background from source file. Will not shows page title and slug.

If plugin DynPages installed in your site you can use shortcodes, like this:

{% evolve-parallex-content "parallex-3" %}

This component supports encapsulation. It is in the component source file you can use DynPages shortcodes for other components and data sources call.

First, create source page(s). Add to it in new line the requared partner image using a graphic editor (eg. CKEditor), fill image ALT field. If necessary repeat the process.

Component structure:

get_component_with_params('evolve-partners-carousel', array(array(slug,slug,...)))

Component call - insert in your template next code examples:

1. <?php get_component_with_params('evolve-partners-carousel', array(array('partners'))); ?>

Insert Partners Carousel from source file.

If plugin DynPages installed in your site you can use shortcodes, like this:

{% evolve-partners-carousel partners %}

First, you must create the necessary structure source file(s). How to do it you can see when open the data file "pie-charts" provided in the catalog "Demo".

Component structure:

get_component_with_params('evolve-pie-chart', array(array(slug,slug,...)))

Component call - insert in your template next code examples:

1. <?php get_component_with_params('evolve-pie-chart', array(array('pie-charts'))); ?>

Insert Pie Chart from source file.

If plugin DynPages installed in your site you can use shortcodes, like this:

{% evolve-pie-chart pie-charts %}

First, you must create the necessary structure source file(s). Add to it in new line the requared image using a graphic editor (eg. CKEditor), fill image ALT field.  Click CKEditor "Source" button and add to image data-field that has name "data-like" and requared digital value (eg. data-like="10"). If necessary repeat the process.

Component structure:

get_component_with_params('evolve-portfolio-carousel', array(slug), bool show_img_title_alt=false, bool show_img_likes=false, string animation='fadeInDownBig', bool use_container_structure=false, bool use_showbiz_structure=false, string use_ul_class=false, int show_elements="all")

Component call - insert in your template next code examples:

1. <?php get_component_with_params('evolve-portfolio-carousel', array(portfolio, true, true)); ?>

Insert Portfolio Carousel section from source file. Show images Alt and Title fileds values. Show images "Like" data field values.

2. <?php get_component_with_params('evolve-portfolio-carousel', array(array(portfolio, false, false, false, true, true, "one-third column", 6))); ?>

Insert Portfolio Carousel section from source file. Will not show images Alt and Title fileds values. Not show images "Like" data field values. Set animation to "fadeInDownBig". Use Outer container and ShowBiz structures. Set class "one-third column" to UL element. Limit the display items up to 6.

If plugin DynPages installed in your site you can use shortcodes, like this:

{% evolve-portfolio-carousel portfolio true true %}

Component structure:

get_component_with_params('evolve-service-box', array(array(title&text&icon,title&text&icon,...), string class_name=auto, string element_padding=none))

To create an image of icons you can use any of the classes represented in the fonts Font Awesome and / or Typicons. The topology of these fonts can be found here.

Component call - insert in your template next code examples:

1. <?php get_component_with_params('evolve-service-box', array(array('Clock Icon&Service Box with "typcn-time" icon.&typcn typcn-time'), 'three columns', '10px')); ?>

insert 1 Service box element with values: title "Clock Icon", box text "Service Box with "ss-clock" icon.", use icon image "ss-clock". Set div class for elements "three columns". Set padding for elements to "10px".

If plugin DynPages installed in your site you can use shortcodes, like this:

{% evolve-service-box "Shopping Cart&Service Box with "typcn-shopping-cart" icon.&typcn typcn-shopping-cart" %}

Component structure:

get_component_with_params('evolve-skill-bars', array(array(text&number,text&number,...)))

Component call - insert in your template next code examples:

1. <?php get_component_with_params('evolve-skill-bars', array(array('Web Design&30%, Programming&80%, GetSimple&95%'))); ?>

insert 3 Skill bars elements with text and numbers with percent values.

If plugin DynPages installed in your site you can use shortcodes, like this:

{% evolve-skill-bars "Web Design&30%_Programming&80%_GetSimple&95%" %}

Component structure:

get_component_with_params('evolve-tabs', array(array(slug,slug,...), int active_tab=1, bool excerpt=false))

Component call - insert in your template next code examples:

1. <?php get_component_with_params('evolve-tabs', array(array('index', 'index-1', 'index-2'))); ?>

insert 3 Tabs with content from pages: index, index-1, index-2; set active first tab; outputs - full pages content.

2. <?php get_component_with_params('evolve-tabs', array(array('index', 'index-1'), 0, 400)); ?>

insert 2 Tabs; with content from pages: index, index-1; no active tabs; outputs - pages excerpts 400 simbols length.

If plugin DynPages installed in your site you can use shortcodes, like this:

{% evolve-tabs "descr-1 descr-2" 2 500 %}

Component structure:

get_component_with_params('evolve-tagline', array(slug, hex background_color="#232d37"))

Component call - insert in your template next code examples:

1. <?php get_component_with_params('evolve-tagline', array('index')); ?>

insert Tagline with content from page: index; set background-color="#232d37".

2. <?php get_component_with_params('evolve-tagline', array('prices'), '#FF0000'); ?>

insert Tagline with content from page: prices; set background-color to red.

If plugin DynPages installed in your site you can use shortcodes, like this:

{% evolve-tagline "tagline" "efefef" %}

For this purpose, you can take advantage of Magnific Popup Plugin.

In your text editor (eg. CKEditor) in the content of the page insert thumbnail or image, set to it desired width and height. Highlight this object and assign to it a link with path to original image, go to the Tab "Advanced" and in the field "Stylesheet Classes" enter class name "mfp-image". If necessary repeat the process.

For this purpose, you can take advantage of Magnific Popup Plugin.

In your text editor (eg. CKEditor) in the content of the page insert thumbnail or image, set to it desired width and height. Highlight this object and assign to it a link with path to video file, go to the Tab "Advanced" and in the field "Stylesheet Classes" enter class name "mfp-video". If necessary repeat the process.

For this purpose, you can take advantage of Magnific Popup Plugin.

In your text editor (eg. CKEditor) in the content of the page insert thumbnail or image, set to it desired width and height. Highlight this object and assign to it a link with URL to this video on streamline server, go to the Tab "Advanced" and in the field "Stylesheet Classes" enter class name "mfp-online". If necessary repeat the process.

Note on localhost servers (like XAMPP or MAMPP), this method will not work. Instead, use the video files hosted on local server.