Menu¶

Menu logo can be changed via customize option. To access Site Indentity go to Appearance > Customize > Site Identity where you will be able to change/remove logo image.

Fixed menu¶

To edit logo for the fixed version go to Appearance > Customize > Header & Navigation > Menu Navigation where you will be able to change/remove logo image.

Creating menu¶

Step 1 - Navigate to Appearance > Menus

Step 2 - Click on create a new menu, enter menu Name and click on Create Menu button

Step 3 - From the right side choose pages that you want to add to your menu and click on Add to Menu. Once menu items are added, you can reorder or nest them via drag and drop tool. Remember to click Save Menu when you finish to keep your changes saved.

Step 4 - You can easily rename every menu item in item details.

Step 5 - Optionally you can add to menu other items, like Links or Categories.

Step 6 - Check your menu as Left Primary Menu to set it up as one of 3 menus supported by the theme (Left Primary Menu, Right Primry Menu and Footer Bottom Menu). Select which menu appears in each location.

Step 7 - Always click Save Menu after providing any changes.

Header Decoration¶

Decoration type (Customizer)

You can access this options via Customize > Header & Navigation > Header Elements Option chosen in the customizer will work for all the pages that have set Use global customizer settings in Header settings.

Available header decoration options:

• cloud

• spikes

Changing Header Decoration color (Customizer)

Color of the header decoration can be changed via Customize > Header & Navigation > Header Elements Option using Cloud color and Spikes with stars color option available in the Customizer.

The decoration type of the header can be also set for each page separately. To do so, please go to Pages Add New or choose one already created. At the bottom of the page you will find there section called Header settings. They will allow you to use the decoration set by the Customizer if Use global customizer settings or use a custom settings that can be set for the page you are working on.

Footer Decoration¶

Decoration type (Customizer)

You can access this options via Customizer > Footer > Footer Elements Option.

Available Footer Decoration options:

• cloud

• spikes with stars

Changing Footer Decoration color (Customizer)

Color of the footer decoration can be changed via Customizer > Footer > Footer Elements Option using Cloud color and Spikes with stars color option available in the Customizer.

Section Decoration¶

Decoration type (Section Shortcode)

You can access this options in Section Settings shortcode when Section stretch is set to Stretch section or Stretch section and content in General tab.

Available Section Decoration options:

• None
• Top Cloud

• Bottom Cloud

• Top and Bottom Cloud

• Top Spikes

• Top Spikes with Stars

• Bottom Spikes with Stars

• Top and Bottom Spikes (Bottom with Stars)

Changing Section Decoration color (Section Shortcode)

You can access this options in Section’s shortcode via Puer Settings tab.

Title Decoration¶

Decoration type (Customizer)

This option will work for the headers that are set in the page

You can access this options via Customizer > Header & Navigation > Header Elements

Available Divider Images:

• Curl Lines

• Stars

You can also upload your own custom divider image that will be used instead

Decoration type (Title Header Shortcode)

This option will work for the titles that are adde via Title Header Shortcode that can be access via Page > Add Element > Puer Tab > Title Header.

Available Divider Images:

• Curl Lines

• Stars

You can also upload your own custom divider image that will be used instead

Changing Section Decoration color (Title Header Shortcode)

You can change the color of the Title and Subtitle in the Title Header shortcode using Title Color and Subtitle Color options.

Revolution slider¶

Front-end .. image:: /_images/revolution.png

Have some Question about the slider? Check 10 frequently asked questions.

Back-end .. image:: /_images/revolutionB.png

Post Slider¶

Front-end .. image:: /_images/pot_sliderF.png

Back-end .. image:: /_images/pot_sliderB.png

All the configuration options are available in slider shortcode settings tab General. Below you will find all the options and short descriptions about them.

Source of the images

Choosing style of the slider

To create your own custom slider you can add Widget title that will be visible above the slider. The next step in creating your own slider is decide which type of slider to use. Avaliable slider types are:

• Flex slider type

• Flex slider slide

• Nivo slider

After choosing the style that will be used for the slider you can decide if you want the slides to move on they own or do not move at all. To choose scroll to Auto rotate and choose the slider movement between 3, 5, 10, 15 seconds or choose disable this option.

Thumbnail size will allow to set the size of the slides. Example: thumbnail, medium, large, full defined by current theme. Alternatively enter image size in pixels: 200x100 (Width x Height).

You can also attached Link to each slide so it will lead to the bigger veersion of the image, post from which the image comes or to a custom link.

Choosing number of sliders visible

Not always we want to show all of the images that are available. To decide about the number of images that will be available in this slider please add number to Slider count option. If for some reason you want to show all the beautiful images in one slider add there Enter “All” to display all slides.

Filter slider images

If the issue is not the number of the slides but which images are used just use one of the filtering options that allow you to indicate which image to use.

To filter images you can use:

• Post/Page IDs: Enter page/posts IDs to display only those records (Note: separate values by commas (,)). Use this field in conjunction with “Post types” field.
• Categories: Enter categories by names to narrow output (Note: only listed categories will be displayed, divide categories with linebreak (Enter)).

Order

When you choose which images to show, you cen decide the order of them by sorting them by: ID, Author, Title and many more.

Adding custom changes

For some reason you don’t like the way how the slider looks like or want to add it more custom look? You can achieve it by adding custom css. You can use one of the slider classes but we would suggest to simply add your own class in Extra class name* to style particular content element differently or Element ID (Note: make sure it is unique and valid according to w3c specification)

Contact Us Now¶

Front-end

Markup

<div class="row">
   <div class="col-md-6">
      <label> name </label>
              [text* your-name]
      <label> telephone </label>
              [text* your-number]
      <div class="ct-custom-contactInfo">
         <h4>OUR HEADQUARTERS</h4>
         <p><i class="fa fa-home"></i><span>378 Main Street 09733, Western London</span></p>
         <p class="col-md-4"><i class="fa fa-at"></i><span>info@example.com</span></p>
         <p class="col-md-8"><i class="fa fa-phone"></i><span>+1 (44) 123-45-67</span></p>
      </div>
   </div>
   <div class="col-md-6">
       <label> email </label>
               [email* your-email]
       <label> your message </label>
               [textarea your-message id:ct-textarea-smallerHeight]
       <button type="submit" class="ct-button-outline ct-submitBtn">Send Message <span class="ct-submitBtn-icon"><i class="fa fa-envelope-o"></i></span></button>
   </div>
</div>

Footer Newsletter¶

Front-end

Markup

[email* your-email class:ct-newsletter-footer placeholder "enter email address & press enter"]
[submit class:ct-newsletter-footer-btn ""]

Lets Work Together¶

Front-end

Markup

<div class="row">
   <div class="col-md-12">
      <div class="col-md-6">
         <label> name </label>
                 [text* your-name]
         <label> telephone </label>
                 [text* your-number]
         <label> email </label>
                 [email* your-email]
      </div>
      <div class="col-md-6">
         <label> your message </label>
                 [textarea your-message]
      </div>
   </div>
   <div class="col-md-12 text-center ct-button-lower">
      <button type="submit" class="ct-button-outline ct-submitBtn">Send Message <span class="ct-submitBtn-icon"><i class="fa fa-envelope-o"></i></span></button>
   </div>
</div>

Newsletter¶

Front-end

Markup

[email* your-email class:ct-cta-newsletter placeholder "your e-mail"]
[submit class:ct-cta-newsletter ""]

WC Newsletter¶

Front-end

Markup

[email* your-email class:ct-wc-newsletter placeholder "your e-mail"]
<button type="submit" id="ct-wc-newsletter-btn" class="ct-button-solid">
<i class="fa fa-envelope"></i>&nbsp;&nbsp;SIGN UP NOW!</button>

Recreating the demo look¶

Below we are showing all the settings that create this look.

Recreating the demo look¶

Below we are showing all the settings that create this look.

Creating Header section

Creating Pie Chart section

Creating Portfolio Item¶

To create new Portfolio elements, navigate in WordPress dashboard to Portfolio items > Add New.

For new portfolio item you can define:

1. Title: Add Team Member name

2. Editior container: Add images that will be part of the portfolio item gallery

3. Feature image

4. Portfolio Categories: Add new or attached to already created categories to group your iteam.

5. Portfolio settings: Add some information about the item

   • Client
   • Client website
   • Details
   • Date

Creating Testimonial Item¶

To create new Testimonial element, navigate in WordPress dashboard to Testimonials > Add New

For new Testimonial item you can define:

1. Title: Add Team Member name

2. Editior container: Add some information about the Team Member

3. Feature image

4. Author: Add some information about the author of this testimonial

   • Name: Add name of the user
   • Title: Add some extra information about the user
   • Rating: Choose the rating

How to add stars rating to testimonials?¶

Star rating can be set in each testimonia item by following this steps.

Step 1 - Go to Testimonials > Add New to create new testimonial item or choose Testimonials > Testimonials if you want to Edit existing item.

Step 1 (b) - If you are editing existing item hover above it and click Edit option that should show up.

Step 2 - After accessing the item scroll down to Author and set there correct value.

Step 3 - Click Update to save changes.

How to change testimonial thumbnails?¶

How to change testimonials slider image/icon?¶

To set image/icons for testimonial slider go to Testimonials > Add New or edit already existing Testimonial item by going to Testimonials > Testimonials and hover above the item you want to edit and click the Edit option. To add image click Seat Feature Image to added image from Media Library or by Uploading files.

Creating Team Member Item¶

To create new Team Member element, navigate in WordPress dashboard to Team Members > Add New

For new Team Member item you can define:

1. Title: Add Team Member name

2. Editior container: Add some information about the Team Member

3. Feature image

4. Team options: Add extra information

   • Title: Team member position
   • Facebook: Add link to FB page
   • Twitter: Add link to FB page
   • Instagram: Add link to FB page

Team display¶

Front-end

Back-end

General

1. Layout:

   • Team Image Circle

     

   • Team Image Square

     

2. Panel Color: Select the Panel Background Color

3. Border Color: Select the Panel Border Color

Filters

1. Limit: Set results limit, use -1 to disable limit

2. Skip X elements: Allows to skip a number of elements from results

3. Order: Order in which data should be fetched

   • Ascending
   • Descending

4. Order by: Order in which data should be fetched:

   • Date
   • ID
   • Author
   • Title
   • Slug
   • Modified
   • Order by parent ID
   • Random order
   • Order by page older

5. Specify ct-team objects: Only selected posts will be displayed

6. Exclude ct-team objects: None of selected posts will be displayed

7. Specify terms of category taxonomy: Only posts with selected terms will be displayed

8. Exclude terms of category taxonomy: None of posts with selected terms will be displayed

9. Specify post tags: Only posts with selected tags will be displayed

10. Keyword search: Show items with certain keyword

How to filter/sort team members?¶

The above shortcode settings gives you a lot of possibilities for displaying only the items that meet the conditions set in the options Filter section.

For example:

• Order by and Order: Decide if the latest added item will be shown first or last.

• Limit: Allow you to show only certain number of items.

• Options like Specify ct-team objects, Exclude ct-team objects, Specify terms of category taxonomy:

  • You can even removed some of the Team Members depending on the category they are added to or by simply selecting the ones you don’t want to show.

Categories and how to use them¶

Categories are very convenient way to organize your faq items, that can be added to more than just one category. To create new FAQ category, navigate in WordPress dashboard to FAQ > Faq Categories

For new FAQ category you can define:

1. Name
2. Slug

Categories allow you to group questions about similar subject into one group. Then they can be show on the page by shortcode’s Category to display option.