Need help understanding how your new theme works?

# Check out our extended

## FAQ & DOCUMENTATION

- General FAQ
- Theme Docs
  - Exposure
  - Philanthropy
  - Paws and Claws
  - In Shape
  - The Flavour
  - Games Zone
  - Tapptastic
  - Paradise Cove
  - Freelancer
  - Beat Heaven
  - Collective
  - Evangelist
  - Auto Trader
  - Kiddo Turf
  - Metro Vibes
  - The Muse
  - Conexus
  - Interakt
  - Voyage
  - News Setter
  - Just Married
  - Home Quest
  - The Practice
  - Cloud Host
  - Coffee Lounge
  - Photo Artist
  - Sportedge
  - Medica
  - Writer
  - Welcome Inn
  - Envision
  - The Core

## Install a Fresh Copy of WordPress Intermediate Intermediate tutorials require familiarity with basic web design concepts, as well as basic knowledge of HTML, CSS and JavaScript.

### Tips before installing WordPress

- You should have a domain name (Ex: http://yourwebsite.com) and a good webhosting company (Ex: WP Engine, Media Temple, Hostgator, Bluehost)
- A text editor (Ex: Notepad++, TextEdit)
- An FTP Client (Ex: FileZilla)
- A web browser of your choice (Ex: Chrome, Firefox)

### The famous 5 minute install

This method refers to manually installing WordPress using FTP (File Transfer Protocol)

1. Go to WordPress.org and download the latest version of WordPress (Link: http://wordpress.org/download/)
2. Unzip the WordPress files and use the FTP software to upload the files into your web host directory
3. Create a MySQL database
   - Go to your Hosting Control Panel (Ex: cPanel) to create a database
   - In the cPanel web hosting screen select the MySQL Databases icon
   - In the next screen enter the name of your database and click the Create Database button
4. Configure WordPress to connect to your newly-created database
   - Access the URL where you uploaded the WordPress files (Ex: http://yourwebsite.com)
   - In the page that appears click the Create a Configuration File button
   - Next you should press the Let’s go button
   - On the next page fill in the form with the necessary information and click the Submit button
   - Next click Run the Install button
5. Complete the installation process and set up your site user
   - In the next screen you'll need to provide your website’s information (title, username, password, email)
   - Click Install WordPress button
   - On the next screen, you will see the Success note with your username and password

### Installing WordPress through QuickInstall

QuickInstall is a script auto-installer. It makes installing WP easy and will automatically upgrade your WP to the latest available version.

1. Log into the control panel of your web hosting company
2. Find and click the QuickInstall icon
3. On the QuickInstall page click the WordPress link
4. In the screen displayed, click on the Continue button
5. On the next page select your Installation Preferences (location, blog title, user credentials)
6. Press the Install Now button
7. In the next window click the Login Link (Ex: http://yourwebsite.com/wp-admin) and enter the username and password

### Installing WordPress through Softaculous

By following the next steps you will successfully install WordPress within few clicks.

1. Log into the control panel of your web hosting company
2. Find and click the Softaculous icon
3. In the displayed Softaculous dashboard select the Blogs menu
4. Click the WordPress submenu
5. On the next page press the Install button
6. In the screen that appears enter the required information (domain name, directory, database name)
7. In the Database settings section, you should change the table prefix to improve the site security
8. Down the page in the Admin Account enter a username, a password, you email and click the Install button
9. Go to http://yourwebsite.com/wp-admin and enter your Login information

### Installing WordPress through Fantastico

Fantastico is a web application that users can apply to efficiently and easily install WordPress. The following tips explain how you can use it to install WordPress.

1. Log into the control panel of your web hosting company
2. Find and click the Fantastico icon
3. In the displayed Fantastico control panel select the Blogs menu
4. Click the WordPress submenu
5. Then press the New Installation link
6. On the next page enter the domain and directory name
7. In the Admin access data section enter your username and password
8. Under the Base Configuration enter your admin nickname, email address, site title and description
9. Once you have finished, click the Install WordPress button
10. In the next window you should press Finish installation button
11. Go to http://yourwebsite.com/wp-admin and enter your Login information

### Installing WordPress on your PC (localhost)

You may easily install WordPress on your personal computer for learning and testing purposes. The process of installing WordPress on your PC is considered as setting up a localhost. Usually, you may want to install WordPress in a local server environment for several reasons:

- to design and develop themes
- testing plugins and new versions of WordPress
- create and verify posts, before releasing them live

Installing WordPress on your PC using WAMP (WampServer)

1. Download and install WAMP by following the instructions Link: http://www.wampserver.com/en/
2. Click on WAMP icon and on the next page press on PHPMyAdmin
3. In the displayed window click on Databases menu
4. Enter a database name and click the Create button
5. Extract and copy the WordPress folder
6. Go to C:\wamp\www and paste WordPress folder there
7. In the page that appears click the Create a Configuration File button
8. On the next page, enter your database information and click the Submit button
9. In the next screen click the Run Install button
10. Then, complete the installation by filling in the form with the required information and press the Install WordPress button
11. Finally, you can proceed with inserting your login information (Link: http://localhost/your-wordpress-install/wp-admin)

## How to Install Your WordPress Theme Novice Novice tutorials require no prior knowledge of any specific web programming language.

Here is a step by step tutorial on how to install your The Core WordPress theme:

1. Download the theme .zip file from your ThemeFuse account (or Envato account if you've purchased the theme from ThemeForest.
2. Log in to your WordPress Dashboard (Ex: http://yourwebsite.com/wp-admin).
3. Go to Appearance > Themes.
4. On the next page, click the Add New button and then Upload Theme.

5. Choose the downloaded the-core-parent.zip and press the Install Now button.

6. In the next screen, click on the Activate link.

7. After the activation you'll be redirected to the Auto Setup page. Choose one of the 2 auto install methods or skip the auto install all together.

8. You'll be redirected to the Demo Content Install page. On this page you can choose what demo content you want to install. Press the Install button for the theme you want.

9. Done.

Information

Our themes work only for self-hosted WP.org users, since the WP.com doesn't work with premium themes. More about self-hosted WordPress (WordPress.org) and WordPress.com in this article.

## How to Install the Demo Content Novice Novice tutorials require no prior knowledge of any specific web programming language.

By installing one of the demo content, your theme will look like the one you see on our demo. This install is not necessary but will help you get the core pages, categories and meta setup correctly. This action will also let you understand how the theme works by allowing you to modify a content that is already there rather than creating it from scratch.

Important

You need to have The Core theme installed before you can choose to Import any Demo Content. Install the theme by following this tutorial.

1. With the theme installed and activated go to Tools > Demo Content Install.

2. On this page you can choose what demo content you want to install. Press the Install button for the theme you want.

3. After the set up, you'll be redirected to the front-end. Your website should look like our demo preview (but with blurred images).

Important

By installing one of the demo content all your current content will be deleted and replaced with the new one but not before we make a back-up that can be restored anytime from the Backup page. In order to go back and restore your previous content all you have to do is go to Tools > Backup, choose the archive you want to restore and click the Restore Backup button.

Information

Note that the all the images on your website are blurred. This is normal, we blurred them on purpose, find out why from this article.

## All the Demo Content Images are Blurred. Why? Novice Novice tutorials require no prior knowledge of any specific web programming language.

After you install the demo content all your images on the website will look like this:

This happens because we blur the images on purpose. We do not have the legal rights to redistribute those images. We buy our images from stock photography websites like iStockphoto, Veer, Photos or Dreamstime for single use in one project and not for redistribution. You can find free to use photos on Unsplash or PhotoPin.

All our clients change the images with their own and it wouldn't make sense for us business wise to spend a lot of cash for redistribute rights when the images will be replaced anyway.

## What are Parent and Child Themes? Novice Novice tutorials require no prior knowledge of any specific web programming language.

A WordPress child theme takes the functionality of another theme, named parent theme. It gives you the possibility to customize an existing theme. Instead of modifying the theme files directly, you can activate the child theme and work within it.

All customizations are stored in the child theme and anything in the child takes priority over the parent. So if the same file exist in both child and parent, the file from the child will control that aspect of the theme.

Working with child themes, your customizations are safeguarded from future upgrades because you only upgrade the parent theme, which you never edit, while the customizations are protected in your child theme which you don’t upgrade.

### Why use a Child theme?

Safe Updates. You can easily modify your website using child themes without ever changing the parent theme. When a new version of the parent theme appears, you can safely update it as all your modifications are saved in the child theme.

Easy to Extend. A child theme has a great flexibility. It does not require writing a lot of code. You can modify only those template files and functions that you need.

Attention

When you install one of our themes you must upload both parent and child theme folders to /wp-content/themes/ but you should only activate the Child theme via Appearance > Themes.

### Modifying files from the Parent theme folder

While you should never edit files in your Parent theme, if you really must, the safest way to do it is to download a copy of the file you want to modify on your computer, make the changes, and then upload it into your child theme folder.

Information

This way of modifying the files can be used for any files from the parent theme — note that you must re-create the same folder structure in your child theme that exist in the parent theme in order for the modifications to take effect.

## Advanced Ways to Modify Your Theme's Code Advanced Advanced tutorials require advanced knowledge of web design concepts and languages such as HTML, CSS, JavaScript.

The important options (used by most of the users) that will let you customize your theme are built into the admin, like changing the color palette, logo, header type, footer, etc. Other important page changes can be made directly from the visual composer of that page by adding the built in shortcodes.

However there might be more advanced changes that you'll want to make that require code editing. These changes should happen in one of the following ways:

Important

Don't change anything in the parent theme folder, ever. All the modifications are done in the child theme folder, this way all the future updates made by us will not impact your changes. All the modifications done in the parent folder will be lost on the first update of the theme because the files will be over written.

1. Use hooks - provided by WordPress to allow your code to 'hook into' the rest of WordPress; that is, to call functions at specific times, and thereby set your code in motion. There are two kinds of hooks: Filters and Actions. More about each and how to use them can be found in this article.

2. Rewrite functions in functions.php file from the child theme - the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)

Add your custom function to functions.php file from child theme. The function will do the exact same job from there too, with the advantage that it will not be affected by future updates of the parent theme. Do not copy the full content of functions.php of the parent theme into functions.php in the child theme.

Functions that are conditionally declared can be replaced in child theme by simply declaring them in functions.php from the child theme.

        function declared in parent theme
        if ( ! function_exists( ‘fw_theme_featured_posts' ) ) :
        function fw_theme_featured_posts() {
            //  Do something.
        }
        endif;
        can be overridden  in functions.php in child theme
        function fw_theme_featured_posts() {
        //  Do something.
        }

3. Copying a file from parent to child - your child theme can override any file in the parent theme: simply include a file of the same name in the child theme directory (keeping the folder structure), and it will override the equivalent file in the parent theme directory when your site loads.

For instance, if you want to change the PHP code for the site header, you can include a header.php in your child theme's directory, and that file will be used instead of the parent theme's header.php. Use this method if you want to modify the entire file or make big changes to it, otherwise we advise you to use one of the two ways above.

## Self Hosted WordPress vs WordPress.com Novice Novice tutorials require no prior knowledge of any specific web programming language.

WordPress is a publishing platform that makes it easy for anyone to publish online. You can use this platform in two ways:

- WordPress.com
- Self Hosted WordPress

Let's compare the WordPress.com and the self hosted WordPress by preseneting the differences and explaining the advantages of one and the other.

### Self hosted WordPress advantages

- You can install and use our themes
- You have full control on your website data. You don’t have any strict terms of service imposed by someone
- You can use plugins any type of plugins: free, paid, custom
- You can customize and modify themes
- You can use any ad service on your website and you are free to sell as many ads as you want
- Custom Analytics are possible

Important

This theme works only with self hosted WordPress. In fact the theme upload feature is disabled in the admin if you are using WordPress.com.

### Self hosted WordPress disadvantages

- You should find a host, install the custom theme by yourself

### WordPress.com advantages

- They provide hosting and backups
- It gives the possibility to integrate your social networks
- There’s no need to install plugins. It provides such features as: comments, sharing, stats, etc.
- Support and WordPress.com forums access.

### WordPress.com disadvantages

- You are not allowed to sell ads on your site unless you have a specific number pageviews per month
- You are restricted to use plugins
- You are not allowed to use custom analytics software
- You cannot use our themes. You follow their choice of themes which are used on lots of websites. Thus, it somehow affects your uniqueness
- You should always abide their Terms of Service

## The Dashboard Novice Novice tutorials require no prior knowledge of any specific web programming language.

The Dashboard is the first window you see when you log into the administration area of your website.

The Dashboard includes the following components that are called modules:

1. At a Glance: provides brief information about your posts, pages, comments, theme, and spam. At the bottom of this section will be indicated the WordPress Version you're running on and the current theme that is installed on your site
2. Quick Draft: allows the users to quickly and easily create new drafts. You can write a title or add new content in a post. In this section also are displayed links to the most recent drafts
3. Activity: allows you to manage easily manage comments directly from the Dashboard
4. Your Stuff: shows all the links to your recent activities
5. WordPress News: presents the latest news from the official WordPress blog
6. Welcome: displays the links for some of the most common activities when creating a new website

## Staying up to Date Novice Novice tutorials require no prior knowledge of any specific web programming language.

The Dashboard Update Screen provides information on available updates. The number of available updates appears as a notification bubble next to the Updates menu item.

1. Click on the Dashboard panel
2. Click the Check Again button to check for the latest available updates

From this page you can update:

1. WordPress - updated regularly with security patches, make sure you always have the latest version of WordPress installed. You have the option to download the latest version and update your WordPress manually (this is usually done by developers and users that are familiar with WordPress. We advise you to use the regular, automatic install)

2. Plugins - One of the most important plugins that you need to keep updated is Unyson. Your theme needs this plugin in order to work properly so it's a good thing to keep it up to date.

3. Themes - in this section you'll find the themes that you can update. Select the theme you want to update from the list and click the Update Themes button. We frequently release updates and bug fixes so please keep your theme up to date.

Reminder

Note that any customization you've made to the theme files will be lost (if they were made in the parent theme folder). Please consider using the Child Theme for modifications. Read more about parent and child themes.

4. Extensions - If you see this text: New extensions updates available press the Update Extensions button in order to update your extensions. These are very important as they are the back bone of your theme and it's important to keep them up to date.

Here is how this screen should look if you are up to date with everything:

## Add a New Blog Post Novice Novice tutorials require no prior knowledge of any specific web programming language.

In order to add a blog post you should follow the following steps:

1. Log in to your WordPress Dashboard (Ex: http://yourwebsite.com/wp-admin)
2. Click the Blog Posts tab
3. Click the Add New sub-tab
4. Start filling in the blanks:
   - Title: introduce in the upper field the title of your blog post
   - Content: enter any information you want to display on your blog post

Reminder

You must complete at least the title field to successfully create a blog post. Avoid using the same title twice as that will cause confusions!

5. As needed, you may also fill in the following fields:
   - Categories: select the general topic your blog post can be post in.
   - Post Tags: refers to sub-categories for your blog.
   - Image: add an image that is relevant for your blog post.
   - Excerpt: a summary of your blog post displayed on the front page/categories/archives.
   - Author: select your name from the drop-down menu.
   - Format: select blog post format.
   - Slug: edit the blog post URL.

Information

Check out how to add an image to your blog post.

6. In the right sidebar by default, your new blog post will be Draft. If you want to wait to publish your post, check the Pending Review option. If you want to publish immediately, select Published.
7. You may want to click Preview button that allows you to view the blog post before officially publishing it.

Attention

It is possible to schedule your blog post for publishing at a future date and time. Learn more about Future Publishing.

8. When you are ready, click Publish. Your blog post should now be visible on your website unless you've set a future publication date.

## Edit an Existing Blog Post Novice Novice tutorials require no prior knowledge of any specific web programming language.

### Quick edit an existing blog post

Quick edit is a tool which allows you to update the details for a particular blog post. You can change the title, the permalink, the slug or edit the date and publishing settings. You can also change categories, add tags, enable or disable comments, or change the status of the blog post. All these actions can be performed by following the next steps:

1. Open WordPress Dashboard (Ex: http://yourwebsite.com/wp-admin)
2. Click the Blog Posts tab
3. Hover your blog post title you want to edit in the list provided
4. Click Quick Edit from this menu:

5. Make the necessary changes
6. Click the Update button to save any changes you have made

### Edit the content of an existing blog post

1. If you want to change the content of the blog post you need to click the Edit link

2. Make the changes that you want
3. Once you have finished, click the Update button

Reminder

You can also edit multiple blog posts at once!

4. Select multiple blog posts from the blog post list
5. Select Edit from the Bulk Actions menu at the top and then click Apply
6. You can bulk change the category, tags, author and other parameters for all the selected blog posts at once

## The WordPress Editor Novice Novice tutorials require no prior knowledge of any specific web programming language.

The WordPress Text Editor includes three sections: the Visual Editor, the HTML Editor and the Media Uploader.

1. Click the Visual tab at the top right hand side of the text editor box. The first row of options displays the most useful icons and their functions.

Starting from left to right:

- Text Editing Tools - Bold, Italic, Strikethrough, Unordered and Ordered lists, Blockquote, Separator and Align (Left, Center, Right).
- Insert, Edit and Remove Links - These two buttons allow you to create/edit or remove a hyperlink. In order to insert a link you need to click on the Insert/Edit link button with the relevant text selected in the editor. The same applies for the Remove Links button.
- Insert More Tag - This button allows you to cut off that part from your blog post that you want to be displayed on the home and/or archive pages.
- Toggle Toolbar - This button toggles a second row of options that looks like this:

- Paragraph/Heading - Choose the type of paragraph or heading you want to write with.
- Underline - This button will underline your text.
- Justify - This button will make your text justify.
- Text Color - This option will let you change your text color.
- Paste As Plain Text/ Paste From Word - This button will help you with editing the information you have selected from external sources.
- Clear Formatting - The formatting button removes all formatting: italics, bold, colors from a highlighted section of text.
- Special Characters - By clicking on this button you can insert special characters and symbols in your blog post if needed.
- Increase/Decrease Indent - By clicking one of these buttons you can increase/decrease the text indent from your blog post.
- Undo/Redo - You can Undo or Redo actions by pressing one of these buttons .
- Keyboard Shortcuts - Rather than reaching for your mouse to click on the toolbar, use these access keys (Windows and Linux use Ctrl + letter. Macintosh uses Command + letter)
- Full screen - By clicking on this button you can create/edit your blog post in full screen mode.

2. The Text tab supports HTML and the most frequent used tags are here for you to use. From making the text bold and adding a link to adding lists or images.

3. The Media Uploader is used to add images, photos and galleries to your blog post.

Information

Find out more about using the Media Library. You can also check out how to add an image to your blog post.

### How to create a link?

You may want to link to websites on the web, or to other pages on your own site to provide additional information for your readers. Or you may want to use an image as a link. The generic video below will help you learn how to create links in WordPress.

## Add an Image to a Blog Post Novice Novice tutorials require no prior knowledge of any specific web programming language.

A great way to add interest and visual context to a blog post is through images. With WordPress adding and managing them is easy.

### To add an image to your blog post:

1. Open WordPress Dashboard (Ex: http://yourwebsite.com/wp-admin)
2. Click the Blog Posts tab
3. Select the blog post you want to add an image to.
4. Click the Add Media button

5. You can add images in a couple of ways:
   - Upload Files - click the Select Files button to select a file on your desktop.

- Media Library - choose from previously uploaded images from Media Library.
- Insert from URL - enter the URL path to the image.

6. Click Insert into post
7. After you've added the image into your blog post, don't forget to press the Update button in order to save your changes

## Using Categories and Tags Novice Novice tutorials require no prior knowledge of any specific web programming language.

WordPress provides two ways to organize your blog posts — categories and tags. Categories and Tags allow you to subdivide the content of multi-item pages into smaller subsets which can be identified more easily by your visitors, thus making the content of your site systematic.

### Categories vs. Tags: Which one should I choose?

- Categories: are used to group your blog posts. They are usually indicators of what your blog post is really about. Categories help your visitors to find the right type of content on your website. They are hierarchical and you can also create subcategories.

Reminder

You should always categorize your blog post otherwise your blog post by default is shown under "Uncategorized" category!

- Tags: are the keywords that are used to specifically describe your content. They represent the macro data that you can use to micro-categorize your content. Tags are not hierarchical and are optional, as compare to categories.

### Adding a new category

One of the key functions in WordPress is organizing the blog posts with categories. Follow the next steps to successfully create a new category:

1. Open the WordPress Dashboard (Ex: http://yourwebsite.com/wp-admin)
2. Go to the Blog Posts tab
3. Select the Categories sub-tab.

4. In the Add New Category section (on the left side of the page) fill in the following fields:
   - Name: introduce the name of your category
   - Description: enter category description
   - Slug: edit the category URL
   - Parent: categories are hierarchical and you can also create subcategories

5. Once you have finished, press the Add New Category button

### Adding a new tag

1. Open the WordPress Dashboard (Ex: http://yourwebsite.com/wp-admin)
2. Go to the Blog Posts tab
3. Click the Tag sub-tab
4. In the Add New Tag panel (on the left side of the page) fill in the following fields:
   - Name: introduce the name of your tag
   - Description: enter tag description
   - Slug: edit the tag URL

5. Once you have finished, press the Add New Tag button

## Schedule a Blog Post and Blog Post Visibility Novice Novice tutorials require no prior knowledge of any specific web programming language.

### Schedule a blog post

You can schedule blog posts to automatically publish themselves at any time in the future:

1. In the Publish section (in the sidebar) press the Edit link next to Publish immediately

2. Select the future date/time when you want the blog post to publish itself and click OK

3. In the next screen you will see the date and time you have specified and by clicking the Schedule button your blog post will be automatically scheduled

### Post visibility

The visibility option lets you set who can read you blog posts:

1. In the Publish section (in the sidebar) press the Edit link next to Visibility

2. A couple of options are available:
   - Public - the blog post will be visible to everyone (this is the default state)
   - Password Protected - the blog post is protected with a password you set
   - Private - blog posts can be viewed only by Editors and Administrators. Private blog posts are not visible by regular visitors and they don't appear in feeds, or in any search.

Information

More about users and roles can be found in this article.

3. Press the OK button to save the changes.

## How to Embed a Video Novice Novice tutorials require no prior knowledge of any specific web programming language.

### Embedding a video with a URL

1. To easily embed a video, you should copy its URL from the web browser’s address bar:

2. Paste the video URL into the content area of your post

## Managing Comments Novice Novice tutorials require no prior knowledge of any specific web programming language.

Comments are the feedback that your visitors express regarding the content of your blog posts. They represent an important element of the WordPress websites.

### Managing comments. The comments page

1. Open the WordPress Dashboard (Ex: http://yourwebsite.com/wp-admin)
2. Click the Comments tab.

3. In the Author column you'll find:
   - the author's name
   - email address
   - website URL
   - the commenter’s IP address
4. By hovering any comment from the following options will appear:
   - Approve
   - Reply
   - Quick Edit
   - Edit
   - Spam
   - Trash
5. In the In Response To column you can find:
   - The posts title
   - The View Post link that leads you to the post itself.

### WordPress comments setting

1. Open the WordPress Dashboard (Ex: http://yourwebsite.com/wp-admin)
2. Go to the Settings Menu
3. Click on the Discussion sub-menu. On this page there are several settings that you could change depending on your needs:

## Undoing Mistakes With Blog Post Revisions Novice Novice tutorials require no prior knowledge of any specific web programming language.

Blog Post Revisions is a WordPress feature that allows you to undo the changes or the mistakes you've accidentally done and go back to an earlier version of the post.

1. Open the WordPress Dashboard (Ex: http://yourwebsite.com/wp-admin)
2. Go to the blog post that you want to see the revisions for.
3. In the Publish section click the Browse link next to Revisions.

4. To see your Revisions, scroll the bar at the top or you may use the Previous and Next buttons. The changes will be highlighted in green and pink
5. Scroll to the revision that you need, then click on the Restore This Revision button.

Reminder

The Revisions screen will not show until you have made some revisions!

## Blog posts vs. Pages Novice Novice tutorials require no prior knowledge of any specific web programming language.

WordPress includes different content types. Blog Posts and Pages are two of them. As a beginner, you are probably interested what is the main difference between them?

### Blog Posts vs. Pages: Which one should i choose?

If you're new to WordPress, you might be a little confused about the difference between blog posts and pages. Blog posts and pages serve a specific purpose to add relevant content to your WordPress website. So, which one should you use?

- Blog Posts are content entries chronologically arranged on your website. Blog posts can be displayed in the Archives, Categories, Recent Posts, and widgets. The blog posts can be viewed in the RSS feed of the blog and they have a built-in commenting feature that allows visitors to comment on your blog posts.
- Pages are static and not listed by date. About Us, Contact Us, Terms of Service pages usually are (classic examples) included in this category. They are not displayed in your RSS feed. Pages do not have the purpose to be social and thus they do not include the comment section.

### Key differences

- Blog posts are timely vs. Pages are timeless.
- Blog posts can be categorized vs. Pages are hierarchical.
- Blog posts are included in RSS feed vs. Pages are not.
- Blog posts are social vs. Pages are not.
- Pages have custom template feature vs. Blog posts do not.

### How many blog posts/pages can i have?

There is no limit on the number of blog posts or pages you can create.

## Using The Media Library Novice Novice tutorials require no prior knowledge of any specific web programming language.

Media consists of the images, video, recordings, and files that you upload and use in your website.

### Add files to your media library

1. Open the WordPress Dashboard (Ex: http://yourwebsite.com/wp-admin)
2. Click the Media menu. The Media Library page will show all of the media items you currently have in your library

4. You can add new media to your library in two ways:

   - Upload Files - click the Select Files button to select a file from your computer
   - Drop Files - you can drag & drop files from your computer directly on the page

### Editing images in the media library

1. Open the Media menu
2. Hover the image you want to edit and click the Edit Image button that appears under the file name
3. Click the Edit Image button under the image in order to enter the edit mode. You can crop, rotate, flip or scale the image to your liking. Hit Save when you are done
4. Don't forget to click the Update button from the sidebar

### Media library multi-file uploader

If you have more than one file to upload at once, you can easily switch to the multi-file uploader.

1. Open the Media page from the main menu
2. Now, just drag & drop multiple files on the page
3. Files will be added to your WordPress Media Library

### The media library pop-up

You don't always need to access the Media library from the main menu in order to upload an image or asset. We have different options built into the theme that require you to upload an image and in these cases you'll be able to access the Media Library in a pop up directly on the page you are in:

Information

You will not be able to edit the image directly in the media library pop up, but if you click the Edit Image link from the sidebar, you'll be redirected to the Media Library page where you can edit the image to your liking.

## How is Image Resizing Working in This Theme Novice Novice tutorials require no prior knowledge of any specific web programming language.

When you upload an image to use in your website, we are creating a couple of instances (different sizes) of that image to use across the theme. We create these different sizes based on where the image might be used: shortcodes, blog, portfolio, etc.

Attention

If you are using this theme with your existing image content, you'll need to create the different image sizes specific for this theme by your self: follow this step by step tutorial to learn how.

These images can't be seen in the media library, but they exist on the server. If you check your media library you'll see only the original image you have uploaded. Here is how your image folder on the server looks like:

Together with the images we have a smart script that operates in the background and delivers the best image size based on the content created, resolution of the browser and device used to view the website (mobile, tablet, desktop). The retina displays are factored in as well, if the original image is large enough (resolution wise), the script will load the appropriate image for the retina display users.

Keep in mind

The images you originally upload need to be as large as possible (resolution wise). This will ensure you cover the retina users as well. Don't panic if you don't have large images to upload, the script will choose the next best thing.

## How to regenerate the image sizes needed for this theme Novice Novice tutorials require no prior knowledge of any specific web programming language.

If you are using this theme with your existing image content from your previous website, you'll have to regenerate all the image sizes needed for this theme. This needs to be done only once for the images that are already on your server, all the new uploaded images will be taken care of automatically. Here is how to do it:

1. Go to Plugins > Add New in the main menu.

2. Search for Regenerate Plugins and hit Enter. The plugin we are looking for should appear first in the search results.

3. Install and Activate the plugin.

4. Go to Tools > Regen. Thumbnails in the main menu and click the Regenerate All Thumbnails button.

5. Wait for the plugin to do its thing.

6. You don't need the plugin again, go to Plugins > Installed Plugins in the main menu and Deactivate then Delete the plugin.

Information

You may still see images on your website that are not resized accordingly or stretched. This is not because the plugin didn't do the job, but because the original image it resized was not large enough (resolution wise). What you need to do is upload that image again in a larger resolution.

## Blog Post Formats Novice Novice tutorials require no prior knowledge of any specific web programming language.

Post Formats is a theme feature introduced with Version 3.1 and are considered to be meta information that can be used by themes to customize presentation of a blog post. It represents the method of styling a specific blog post. If you apply the blog post format feature your blog becomes more user-friendly.

In short, you can change how each post looks by choosing a Post Format from a radio-button list.

### Supported formats by this theme

- Standard - the regular default styling, we recommend you to use this one all the time
- Aside - typically styled without a title, similar to a Facebook note update.
- Image - a single image. The first `<img />` tag in the post could be considered the image. Alternatively, if the post consists only of a URL, that will be the image URL and the title of the post (post_title) will be the title attribute for the image.
- Video - a single video or video playlist. The first `<video />` tag or object/embed in the post content could be considered the video. Alternatively, if the post consists only of a URL, that will be the video URL. May also contain the video as an attachment to the post, if video support is enabled on the blog (like via a plugin).
- Audio - an audio file or playlist, could be used for Podcasting.
- Quote - a quotation, probably will contain a blockquote holding the quote content. Alternatively, the quote may be just the content, with the source/author being the title.
- Link - a link to another site. Themes may wish to use the first `<a href=””>` tag in the post content as the external link for that post. An alternative approach could be if the post consists only of a URL, then that will be the URL and the title (post_title) will be the name attached to the anchor for it.
- Gallery - a gallery of images, the post will likely contain a gallery of images added from the media library.

## Add a Header Image to a Blog Post Novice Novice tutorials require no prior knowledge of any specific web programming language.

In this theme we've built a couple of options that let you change the header image for your posts and post categories.

By using the header image options you can:

- Set a global default image for all your Blog Posts - this is done from the Theme Settings page, and the image will be used for all your posts if you didn't set one for a specific post.
- Set a default image for a blog category - lets you set a header image for a specific category.
- Set an image for a specific blog post - the blog post will have this image as the header image. This will overwrite the image set in the Theme Settings.

### Set a global default image for all your blog posts

1. Go to Appearance > Theme Settings in the main menu
2. On the Theme Settings page go to Posts > Blog tab and under the Single Posts Header section you'll find the option to upload an image that will be displayed in the header for all your blog posts.

Information

There are more options here like header height, overlay color and more. These options are explained and addressed in this article.

### Set a default image for a blog category

1. Go to Blog Posts > Categories in the main menu
2. Click on the category you want to edit and find the Header Image option. The image uploaded here will be used in the header of this blog category only.

### Set an image for a specific blog post

1. Go to Blog Posts > All Posts in the main menu
2. Click on the post you want to edit and find the Header Image option in the sidebar. The image uploaded here will be used in the header of this specific post and will over write the image set in Theme Settings.

## Add Visual Builder Shortcodes to Your Blog Posts Novice Novice tutorials require no prior knowledge of any specific web programming language.

There are two ways of adding shortcodes in your website:

- Using the Visual Page Builder - this is available only for Pages. Learn all about it from this article.
- Using the Default Editor - this is available only for posts: blog posts, portfolio posts, event posts.

### Activating the page builder extension for blog posts

In order to be able to add any shortcodes you'll need to make sure the Page Builder is activated for your Blog Posts. Follow these steps to activate it:

1. Go to Unsyon in the main menu and locate the Page Builder extension in the Active Extensions list

2. Click the Settings link, check the Blog Posts option and then hit the Save button. Now we have enabled the shortcodes button in the blog posts editor.

### Add shortcodes to your blog posts using the default editor

1. Go to Posts > All Posts and then click the post you want to edit. In the post page, you'll notice a new button on the first line of the editor.

2. Add a shortcode to your post content by clicking one of the shorcodes in the dropdown. Note that the shortcode will be added at the position of the cursor in the content editor.

3. To edit a shortcode, just click on it and a pop-up with the shortcode options will appear.

Keep in mind

You can't create a section and column structure like in the visual page builder. All the shortcodes added will be full width by default.

## The Visual Page Builder Novice Novice tutorials require no prior knowledge of any specific web programming language.

The Visual Page Builder comes with a bunch of built in shortcodes and is one of the core extensions from the Unyson framework. In order to start visually building a a new page all you have to do is:

1. Go to Pages > Add New in order to add a new page.
2. Press the Visual Page Editor button in order to bring the visual page builder up.

The builder is composed of elements that can be added on the page by dragging & dropping them (or by clicking on them). These elements are separated on 3 sections:

1. Layout Elements - composed mainly of different column elements and a custom full width section used to create the page structure

2. Content Elements - composed of shortcodes used to create the page content. You'll find all you need here, from buttons, quotes and tables to contact forms, testimonials and tabs.

3. Media Elements - composed of shortcodes used to add media to your page: galleries, images, sliders, slideshows and video.

Every shortcode be it a column, section, content or media has different options built in. In order to bring the options up all you need to do is click the shortcode:

Another useful feature is called Templates. You can use it to save any templates you want for later use:

Information

More about saving and loading templates can be found in this article.

## Using Visual Builder Templates Novice Novice tutorials require no prior knowledge of any specific web programming language.

The Visual Page Builder comes with a Template feature that lets you save pages or parts of it for later use in other pages.

Keep in mind

The Template feature can only be used on pages created using the Visual Page Builder and not on Default WordPress pages.

To use this feature, go to Pages and open an existing page or create a new one. You can open the Templates dropdown by clicking on the Templates link from the right side of the builder.

### Saving templates

The templates are separated in three categories:

- Full Templates - lets you save an entire page.

- Sections - lets you save a section and all its contents.

- Columns - lets you save a column and all its contents.

Saving a template lets you give it a name.

### Loading Templates

Once a template is saved, it will appear in the Templates dropdown under Load Template.

Click on a template name in order to load it into your current page.

Important

Loading a full template will overwrite the content of the current page while loading a section or column template will place its content at the end of your current page.

## Using Page Templates Novice Novice tutorials require no prior knowledge of any specific web programming language.

There are two different page templates you can use in this theme:

- Default Template - used for default WordPress pages. You can't use the Visual Page Builder with this template. Every time you create a new page the Default Template will be selected. You can change the page template from the Page Attributes box in the sidebar:

- Visual Builder Template - used for pages built with the Visual Page Builder.

Information

The page template will change automatically to Visual Builder Template if you bring the visual builder up by pressing the Visual Page Editor button. The same will happen with the Default Template fi you press the Default Editor button.

The main two difference between the two page templates are:

1. The way you set the header image
2. The way you set a sidebar

### 1. How to set a header image

- For the Default Template you need to upload an image in the Header Image box in the sidebar

Keep in mind

You can set a default header image for all your pages that use the Default Template from the Theme Settings page. Learn out how to do it from this article.

- For the Visual Builder Template you need to create the header image yourself using the shortcodes

### 2. How to set a sidebar

- For the Default Template, go to Appearance>Widgets and set a sidebar to the page from the Manage Sidebars tab. Find out more about this here.

- For the Visual Builder Template, you can do it by using the Widget Area Shortcode. Find out more about this here.

## Add a Header Image to a Page Novice Novice tutorials require no prior knowledge of any specific web programming language.

In this theme we've built a couple of options that let you change the header image for your pages. This applies only if the page is using the Default Template.

By using the header image options you can:

- Set a global default image for all your Pages - this is done from the Theme Settings page, and the image will be used for all your pages that use the Default Template.
- Set an image for a specific page - the page will have this image as the header image. This will overwrite the image set for the page in the Theme Settings.

Tip

Think of it like this: Global Setting < Page. The Page being more specific beats the Global Setting.

### Set a global default image for all your Pages

1. Go to Appearance > Theme Settings in the main menu
2. On the Theme Settings page go to Pages and under the Pages Header section you'll find the option to upload an image that will be displayed in the header of all your pages that use the Default Template.

Information

There are more options here like header height, overlay color and more. These options are explained and addressed in this article.

### Set an image for a specific page

1. Go to Pages > All Pages in the main menu
2. Click on the page you want to edit and find the Header Image option in the sidebar. The image uploaded here will be used in the header of this specific page and will overwrite the image set in the Theme Settings.

Keep in mind

You can set a specific page header image only for pages that use the Default Template and not the Visual Builder Template.

## Add a New Event Novice Novice tutorials require no prior knowledge of any specific web programming language.

Add a new event by following this step by step tutorial:

1. Go to Events > All Events. Here is where all your added events are listed.

2. Press the Add New button from the top of the page, or select Add New sub menu in the sidebar.

3. Add a title and input all the event related info like event location, full day event, date & time of the event, ticket price and the ticket link.

Tip

Use the Ticket Link option to link to your shopping page.

If you can't find your location, press the Can't find location link and you'll be prompted with a map module that will help you find your address. Just type the venue or address and the map will reflect that automatically.

4. When you are done, hit the Publish button in the sidebar in order to publish your event. You can save the event as Draft or even schedule it to be posted on a future date. See more about posts visibility and future publishing in this article.

## Add a Header Image to an Event Novice Novice tutorials require no prior knowledge of any specific web programming language.

In this theme we've built a couple of options that let you change the header image for your events and event categories.

By using the header image options you can:

- Set a global default image for all your events - this is done from the Theme Settings page, and the image will be used for all your events if you didn't set one for a specific post.
- Set a default image for an event category - lets you set a header image for a specific category.
- Set an image for a specific event post - the event will have this image as the header image. This will overwrite the image set in the Theme Settings.

### Set a global default image for all your Events

1. Go to Appearance > Theme Settings in the main menu
2. On the Theme Settings page go to Posts > Events tab and under the Single Events Header section you'll find the option to upload an image that will be displayed in the header for all your event posts.

Information

There are more options here like header height, overlay color and more. These options are explained and addressed in this article.

### Set a default image for an event category

1. Go to Events > Categories in the main menu
2. Click on the category you want to edit and find the Header Image option. The image uploaded here will be used in the header of this event category only.

### Set an image for a specific event

1. Go to Events > All Events in the main menu
2. Click on the event you want to edit and find the Header Image option in the sidebar. The image uploaded here will be used in the header of this specific event and will overwrite the image set in Theme Settings.

## How to Display Your Events on the Front End Novice Novice tutorials require no prior knowledge of any specific web programming language.

There are two ways of displaying the events on your website:

- By adding the Events Category page in the main navigation.
- By adding a Calendar Shortcode into any page using the Visual Page Builder.

### The events category page

Your events will be displayed in a listing of posts, similar to blog posts, something like this:

Information

More about how your menus work and how to add your events category page in the main navigation can be found in this article.

### The calendar shortcode

Go to Pages and create a new page or edit an existing one. Add the calendar shortcode from the Content Elements tab.

Click on the shortcode and select Events in the Population Method option.

Information

There are more options here, explained and addressed in this article.

Your events will be displayed in a calendar that will looks like this:

## Add Visual Builder Shortcodes to Your Event Posts Novice Novice tutorials require no prior knowledge of any specific web programming language.

There are two ways of adding shortcodes in your website:

- Using the Visual Page Builder - this is available only for Pages. Learn all about it from this article.
- Using the Default Editor - this is available only for posts: blog posts, portfolio posts, event posts.

### Activating the page builder extension for event posts

In order to be able to add any shortcodes you'll need to make sure the Page Builder is activated for your Event Posts. Follow these steps to activate it:

1. Go to Unsyon in the main menu and locate the Page Builder extension in the Active Extensions list

2. Click the Settings link, check the Events option and then hit the Save button. Now we have enabled the shortcodes button in the event posts editor.

### Add shortcodes to your blog posts using the default editor

1. Go to Events > All Events and then click the post you want to edit. In the post page, you'll notice a new button on the first line of the editor.

2. Add a shortcode to your post content by clicking one of the shorcodes in the dropdown. Note that the shortcode will be added at the position of the cursor in the content editor.

3. To edit a shortcode, just click on it and a pop-up with the shortcode options will appear.

Keep in mind

You can't create a section and column structure like in the visual page builder. All the shortcodes added will be full width by default.

## Add a New Project Novice Novice tutorials require no prior knowledge of any specific web programming language.

Add a new project by following this step by step tutorial:

1. Go to Portfolio > All Projects. Here is where all your added projects are listed.

2. Press the Add New button from the top of the page, or select Add New sub menu in the sidebar.

3. Add a title and input all the project related info like gallery and cover image.

4. When you are done, hit the Publish button in the sidebar in order to publish your project. You can save the project as a Draft or even schedule it to be posted on a future date. See more about posts visibility and future publishing in this article.

## Add a Header Image to a Project Novice Novice tutorials require no prior knowledge of any specific web programming language.

In this theme we've built a couple of options that let you change the header image for your projects and project categories.

By using the header image options you can:

- Set a global default image for all your project posts - this is done from the Theme Settings page, and the image will be used for all your projects if you didn't set one for a specific post.
- Set a default image for a project category - lets you set a header image for a specific category.
- Set an image for a specific project post - the project post will have this image as the header image. This will overwrite the image set in the Theme Settings.

### Set a global default image for all your project posts

1. Go to Appearance > Theme Settings in the main menu
2. On the Theme Settings page go to Posts > Portfolio tab and under the Single Projects Header section you'll find the option to upload an image that will be displayed in the header for all your project posts.

Information

There are more options here like header height, overlay color and more. These options are explained and addressed in this article.

### Set a default image for a project category

1. Go to Portfolio > Categories in the main menu
2. Click on the category you want to edit and find the Header Image option. The image uploaded here will be used in the header of this project category only.

### Set an image for a specific project

1. Go to Portfolio > All Projects in the main menu
2. Click on the project you want to edit and find the Header Image option in the sidebar. The image uploaded here will be used in the header of this specific project and will overwrite the image set in Theme Settings.

## Add an Icon to a Portfolio Category Novice Novice tutorials require no prior knowledge of any specific web programming language.

By default the portfolio categories don't have icons but you can add one following these steps:

1. Go to Portfolio > Categories
2. Select the portfolio category you want and find the Category Icon option. Choose an icon from the list. You can filter icons by categories from the select above. By default the theme comes with Font Awesome icon font.

Keep in mind

You can deselect an icon by clicking the same icon again.

This is how it will look on the front end

## Add Visual Builder Shortcodes to Your Portfolio Posts Novice Novice tutorials require no prior knowledge of any specific web programming language.

There are two ways of adding shortcodes in your website:

- Using the Visual Page Builder - this is available only for Pages. Learn all about it from this article.
- Using the Default Editor - this is available only for posts: blog posts, portfolio posts, event posts.

### Activating the page builder extension for portfolio posts

In order to be able to add any shortcodes you'll need to make sure the Page Builder is activated for your Portfolio Posts. Follow these steps to activate it:

1. Go to Unsyon in the main menu and locate the Page Builder extension in the Active Extensions list

2. Click the Settings link, check the Projects option and then hit the Save button. Now we have enabled the shortcodes button in the portfolio posts editor.

### Add shortcodes to your portfolio posts using the default editor

1. Go to Portfolio > All Projects and then click the post you want to edit. In the post page, you'll notice a new button on the first line of the editor.

2. Add a shortcode to your post content by clicking one of the shorcodes in the dropdown. Note that the shortcode will be added at the position of the cursor in the content editor.

3. To edit a shortcode, just click on it and a pop-up with the shortcode options will appear.

Keep in mind

You can't create a section and column structure like in the visual page builder. All the shortcodes added will be full width by default.

## Changing the Projects Display Type and Style Novice Novice tutorials require no prior knowledge of any specific web programming language.

You can change the way your portfolio projects are displayed on the front page in two ways:

- Changing the Display Type - this is a category option and you can choose from Portrait, Landscape and Square and the number of columns for your projects.
- Changing the Display Style - this is a global option that applies over the whole project and can be found in the Theme Settings page.

### Changing the display type

1. Go to Portfolio > Categories.
2. Select the category you want to change the display type for.
3. Select the Display Type found under the Category Icon option. You can select to view all your projects from this category in portrait or in landscape.

Keep in mind

By default the display type is set to portrait.

Portret

Landscape

Square

### Changing the display style

1. Go to Appearance > Theme Settings
2. Then Posts > Portfolio tab
3. Select one of the three display styles found under the Portfolio section

Style 1

Style 2

Style 3

Information

More about project styles can be found in this article.

## How to Display Your Projects on the Front End Novice Novice tutorials require no prior knowledge of any specific web programming language.

There are two ways of displaying your projects on the website:

- By adding the Portfolio Category page in the main navigation.
- By adding a Portfolio Shortcode into any page using the Visual Page Builder:

### The portfolio category page

Your projects will be displayed on a grid, and all the categories will be displayed as a filter.

Information

More about how your menus work and how to add your portfolio category page in the main navigation can be found in this article.

### The portfolio shortcode

Go to Pages and create a new page or edit an existing one. Add the portfolio shortcode from the Content Elements tab.

Clicking on the shortcode in the content area will open an options pop-up.

Information

On the front end your projects will be displayed in a similar way as the portfolio category the only difference being the java script animation that will happen when you change the project categories.

## How to Create a New Slider Novice Novice tutorials require no prior knowledge of any specific web programming language.

This theme comes with a couple of built in sliders. Here is how you can create a new one from scratch:

1. Go to Appearance > Sliders. Here you'll find a list with all the already created sliders.

2. Click the Add New button from the top.
3. Choose the type of slider you want to create

Keep in mind

Note that different sliders come with different population methods and options. Switch between the slider types to check out the possibilities. Most of the options can be edited after the creation of the slider.

4. When you are done click the Create button from the sidebar.

Keep in mind

Note that the slider type and population method can't be changed once the slider is created. You'll need to create a new slider if you want a different design style or population method.

5. Now it's only a matter of adding new slides in your slider by pressing the Add New slide block. Don't forget to hit the Save button in the sidebar after you are done adding the slides.

6. All the sliders come with a Configuration Panel in the sidebar. Here you'll find all the options you need for your slider.

- Slider Title - for internal use only, this title will not be displayed on the website.
- Slider Height - lets you set the height of the slider in pixels.
- Slides Interval - use this option to set the slide interval in milliseconds.
- Overlay Color - lets you enable the overlay color for your slides. You can set a color and opacity. This overlay color will be applied for all the slides that compose the slider.
- Custom Style - lets you change the fonts and button style.

## Revolution Slider Novice Novice tutorials require no prior knowledge of any specific web programming language.

This theme comes with Revolution Slider out of the box. An easy way to see if Revolution Slider is installed and activated for your theme is to notice the Revolution Slider entry in the sidebar:

Information

The Revolution Slider it is automatically installed if you choose to start with one of our demos. Installing the demo content for one of the themes ensures that all the necessary plugins are automatically installed, including the Revolution Slider.

### Getting started with Revolution Slider

In order to start creating your sliders, you'll need to understand how the Revolution Slider works, create slides, make different general settings and more.

The guys behind the plugin created an extensive documentation covering all you need to know that can be found online on their website: Revolution Slider Documentation.

Information

More about the Revolution Slider shortcode and how you can use the visual page builder to add the slider to a page can he found here.

## Add a slider to a Page Novice Novice tutorials require no prior knowledge of any specific web programming language.

You can add an already created slider to any page by following these steps:

1. Go to Pages > All Pages and edit the page you want to add a slider to, or create a new page by pressing the Add New button from the top.

2. Add the Slider Shortcode found under the Media Elements tab.

3. Click the shortcode and select the slider you want from the pop up.

Note that if you don't have any sliders added your pop up will look like this.

4. Hit the Save button at the bottom of the pop-up and then the Update button from the sidebar.

Information

More about the slider shortcode can he found here.

## Add a New Contact Form to a Page Novice Novice tutorials require no prior knowledge of any specific web programming language.

Add a contact form to any page by adding the Contact Form Shortcode via de Visual Page Builder.

### Adding the contact form shortcode to a page

1. Go to Pages > All Pages
2. Create a new page or click on an existing page that is already created
3. Click on the Contact Form shortcode in order to add a new contact form to your page

### Creating the contact form

1. Click on the Contact Form Shortcode added to the page and this will open a pop up with the Contact Form Builder

2. Use this builder in a similar way as the visual page builder in order to create your desired contact form by dragging & dropping any of the form fields on the page.

3. Click any shortcode to access the options for that field. From here you can control different settings depending on the field: label, mandatory setting, restrictions, placeholder text, etc.

Tip

We advise you to go through every field and check every option in order to tailor your contact form to your needs.

### Things you might find helpful

- Every contact form field comes in its own default 2/3 column that can be changed using the arrows.

- The Title and Subtitle area is "set in stone" and can't be deleted. If you choose not put anything in these fields then the title and subtitle will not be displayed.

- You can edit any label by clicking on it.

- You can toggle the mandatory field option directly from the main screen by clicking the red star in the top right corner of the column.

- All the fields have simplified representations containing helpful info about that field. It can be the placeholder text in the case of single line text, or the first choice in the case of a multiple choice field.

Important

Make sure your contact form is set up accordingly by checking your message options and sending methods from the Settings Tab. You can also stylize your contact form from there.

## Message Settings and Sending Methods Novice Novice tutorials require no prior knowledge of any specific web programming language.

Setting up your message settings and sending method is important as it will let you:

- control all the messages displayed to the user when the form is sent
- control the emails, messages you receive when a form is send by a user
- control the method of sending the form (wp-mail or SMTP)

All these options can be found on the Settings Tab in the Form Builder pop up. Here you'll see three subcategories:

- Options - lets you change message options
- Mailer - lets you set sending methods for your form
- Styling - lets you style the form, change fonts, colors, background and more. More about styling can be found in this article

### Options

- Subject Message - this text will be used as subject message for the email.
- Submit Button - let you change the style / typography of the submit button.
- Success Message - the user will see this text if the form will be successfully sent.
- Failure Message - this text will be displayed when the form will fail to be sent.
- Email To - the admin email where the form will be sent, make sure to use an email address that you verify often as all the emails sent from this form will go to to this email.

### Mailer

- Send Method - this is the send method and you have two options: wp-mail (the most used, all the settings are done, you'll use your standard WordPress mailer to send the form) and SMTP (used if you want to use your SMTP server to send your emails).
- From Name - when you (the admin) will receive the notification that a new form was submitted from the website you'll see this name in the From field in your email client
- From Address - when you (the admin) will receive the notification that a new form was submitted from the website you'll see this email address in the email from field in your email client

If the sending method is not set, a notification bubble will be displayed on the shortcode after you save/update the entire page from the Update button on the sidebar.

## Styling Your Contact Form Novice Novice tutorials require no prior knowledge of any specific web programming language.

The contact form styling page can be found on the Settings Tab and it looks like this:

### The styling options

- Typography Options - lets you control the fonts and colors for: Title, Subtitle, Input Text, Instruction for Users and Success / Error Messages.
- Form Bg Color - lets you change the background color of your form.
- Form Padding - lets you control de form top, right, bottom and left paddings paddings.

- Fields Border - use this option to set a border for all your form's fields (input, textarea, etc)

- Fields Bg Color - lets you set the background color for all your form's fields (input, textarea, etc)

- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution between 480px - 678px (smartphones both portrait and landscape).

## Overview Novice Novice tutorials require no prior knowledge of any specific web programming language.

The shortcodes are part of the visual page builder that comes with this theme. The elements (or shotcodes) can be added to your website by dragging & dropping them on the page and are separated in 3 categories:

- Layout Elements - used to create your page structure.
- Content Elements - composed of shortcodes used to create the page content.
- Media Elements - used to add media to your page: images, sliders, slideshows and video.

### Layout Elements

### Content Elements

### Media Elements

Information

Learn how to use the Visual Page Builder to create a new page.

Every shortcode be it a column, section, content or media has different options built in. In order to bring the options up all you need to do is click the shortcode:

Most of the shortcodes have a Custom CSS option that you could use to further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

Information

More on the basics of CSS styling using the custom.less files can be found in this article.

## Columns Novice Novice tutorials require no prior knowledge of any specific web programming language.

The Columns Shortcodes are part of the back bone page structure and they come in different predefined sizes for you to use:

After you've added a column on the page, you can modify its size from the arrows on the left hand side:

When you hover your mouse on any column these 4 icons will appear on the right hand side:

- Save As Template - allows you to save the column as a template

Information

For more information regarding templates and how to use them, check out this article.

- Edit - brings up the option pop up for the column
- Duplicate - duplicates the column and contents
- Remove - deletes the column

### The column options

Every column comes with a bunch of built in options. Click a column to bring up the options pop up:

- Default Spacing - this refers to the left and right spacings between columns. Because we use bootstrap, the default left and right spacing is set to 15px. Select NO if you want to remove this spacing for the given column.

- Additional Spacing - we've built this option to let you have full control on the column paddings. This option comes 0 by default. Here is an example on how this works:

We have this structure

that looks like this in the front end

If we add an Additional Spacing of 50 (px) to the green column, then the front end will change to this:

Keep in mind

The additional spacing option is just that, additional spacing to the default one. So in our example above, we'll end up with 65px on right and left, that is because we have the default spacings on (15px on each side).

- Height - this option lets you control the height of the column. The height can be Auto (the default value), in which case it will adjust according to its content, or Custom allowing you to set a fixed height. It also has 3 preset choices (small, medium and large). These presets were created in order to help you keep all your sections heights consistent across your website.

Keep in mind

Using Fixed Heights on columns might impact the responsive behavior of your website in a negative way. Read this article for more information and best practices.

- Background - this option will let you control the section background. You can add an image and set its position, set an overlay color and opacity, add a parallax effect.

- Border - this option lets you add a border to your column. You may control its width or color.

- Shadow - this option lets you add a shadow to your column. You may control its position, blur, size or color.

- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.

- Responsive Behavior - lets you control how this column behaves on mobile devices as follows:

  1. Devices with the resolution between 768px - 990px (tablet portrait):

     - Tablet Display - you may choose whether or not this column will be displayed on tablets

     - Display Layout - by default, the column will inherit its original layout (width) but you may change this from the dropdown options for tablets

     - Additional Spacing - this option lets you overwrite the additional spacing option for tablets only. Its important to note that changing the default value will overwrite your column spacing and not add to it while leaving it blank will allow the column to inherit its spacing from the general column options.

       Keep in mind

       Responsive wise, landscape tablets will behave the same as Desktops. As such, the options mentioned above will only apply to portrait display tablets

  2. Devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets):

     - Smartphone Display - you may choose whether or not this column will be displayed on smartphones

     - Additional Spacing - this option lets you overwrite the additional spacing option for smartphones only. Its important to note that changing the default value of 0 will overwrite your column spacing and not add to it while leaving it blank will allow the column to inherit its spacing from the general column options

       Keep in mind

       On smartphones all columns are set on 1/1 (full-width) by default.

- Custom Class - you can use this options to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Sections Novice Novice tutorials require no prior knowledge of any specific web programming language.

The Section Shortcode is as important as the columns as it comes with a lot of nifty options that will let you create some cool and unique pages:

Note that the sections are always full width and you can drag columns inside them:

Keep in mind

Sections can't be dragged into columns

Same as on the columns if you hover your mouse on any section these 4 icons will appear on the right hand side:

- Save As Template - allows you to save the section as a template

Information

For more information regarding templates and how to use them, check out this article.

- Edit - brings up the option pop up for the section
- Duplicate - duplicates the section and its contents
- Remove - deletes the section

### The section options

Every section comes with a bunch of built in options. Click a section to bring up the options pop up:

- Section Name - this option allows you to name your section. This is for internal use only and it helps you go through the page structure a lot easier when you try to find something.

- Full Width Content - this refers to the content inside the section. If you want to make the content inside this section full width select YES. It comes NO by default.

Full width content set to NO:

- Default Spacing - this option lets you choose if you want to use the default top and bottom spacings built into the theme. We've built an option called Content Density that lets you select from the 3 preset top and bottom spacings. This option can be found in Appearance > Theme Settings > General under the Global Settings section.

Default spacing set to NO:

- Vertical Allign - this option will vertically center the content inside the section.

Important

The vertical align option works with any number of columns as long as they are on a single row.

- Height - this option lets you control the height of the section. The height can be Auto (the default value), in which case it will adjust according to its content, or Custom allowing you to set a fixed height. It also has 3 preset choices (small, medium and large). These presets were created in order to help you keep all your sections heights consistent across your website.

Keep in mind

Using Fixed Heights on sections might impact the responsive behavior of your website in a negative way. Read this article for more information and best practices.

- Background - this option will let you control the section background. You can add an image and set its position, set an overlay color and opacity, add a parallax effect. You may also set a video or a solid color as the section's background.

- Section Overlap - this option lets you set the overlap value in pixels. The content that follows will overlap the section with the specified pixel amount. You can input a custom value or select from the 3 preset choices (small, medium and large). These presets were created in order to help you keep all your sections overlap values consistent across your website.

- Link ID - you can enter a cutom css ID for this shortcode. Use this ID in any URL link in the page in order to anchor link to this shortcode (e.g http://link/#custom_id)

- Responsive Behavior - lets you control how this section behaves on mobile devices as follows:

  - Tablet Display - you may choose whether or not this section will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this section will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this options to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Accordion Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode will let you create an accordion. In order to add one to your page, just drag & drop, or click it.

Back-end

Front-end

### The accordion options

Click on the shortcode to bring up the options:

- Tabs Color - lets you add a background color to the accordion tab

- Content Background - lets you add a background color to the content of an accordion

- Tabs - lets you add content to your accordion. Click the Add button in order to add a tab to your accordion. You can input the title, the content, choose if your your tab's default state (opened or closed) or add an icon.

- Content Padding - lets you adjust the interior padding of your accordion content.

- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.

- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:

  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Button Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a button to your page by dragging & dropping, or clicking on it:

Back-end

Front-end

### The button options

Click on the shortcode to bring up the options:

- Style - lets you select the button style. We've built in three choices of buttons.
- Corner Radius - lets you adjust the corner radius of the button.
- Normal & Hover Color - lets you select the color of the button background as well as its color while hovered
- Label - this is the text that appears on your button.
- Link - a URL link that your button will link to. Select YES in the next option if you want your link to open in a new window.
- Button Size - choose from the three built in sizes or type in your own custom button size value for both width and height. Select YES in the next option to make the button full width. The full width button will be calculated based on the container where the button is. If for e.g. you have the button in a 1/2 column, then the button's full width will be 1/2 of the page.
- Alignment - you can select the button alignment in the container.
- Icon - use this option if you want to add an icon to your button. You may also choose the icon position and its size
- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Calendar Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a calendar to your page by dragging & dropping, or clicking on it:

Back-end

Front-end

### The calendar options

Click on the shortcode to bring up the options:

- Population Method - select how your calendar will be populated with events. Custom lets you add events right here in the shortcode and Events lets you select an event category to be displayed in the calendar.
- Events - lets you add events right here in the shortcode and comes with its set of options in a new pop up.

- Calendar Type - lets you select the type of calendar you want on the front end. You can choose between Daily, Weekly and Monthly and they look like this:

Keep in mind

The Weekly and Monthly calendar types work well in full width (1/1 columns).

- Start Week On - select the first day of the week: Monday or Sunday
- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Contact Form Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a contact form to your page:

Back-end

Front-end

### Creating the contact form

1. Click on the Contact Form Shortcode added to the page and this will open a pop up with the Contact Form Builder.

2. Use this builder in a similar way as the visual page builder in order to create your desired contact form by dragging & dropping any of the form fields on the page.

3. Click any shortcode to access the options for that field. From here you can control different settings depending on the field: label, mandatory setting, restrictions, placeholder text, etc.

### The contact form options

Click on the shortcode to bring up the options and click the Settings tab. Here we've separated the settings in three sub sections: Options, Mailer and Styling.

### Options

- Subject Message - this text will be used as subject message for the email.
- Submit Button - this allows you change the style of the submit button as well as its label text.
- Success Message - the user will see this text if the form will be successfully sent.
- Failure Message - this text will be displayed when the form will fail to be sent.
- Email To - the admin email where the form will be sent, make sure to use an email address that you verify often as all the emails sent from this form will go to to this email.

### Mailer

- Send Method - this is the send method and you have two options: wp-mail (the most used, all the settings are done, you'll use your standard WordPress mailer to send the form) and SMTP (used if you want to use your SMTP server to send your emails).
- From Name - when you (the admin) will receive the notification that a new form was submitted from the website you'll see this name in the From field in your email client
- From Address - when you (the admin) will receive the notification that a new form was submitted from the website you'll see this email address in the email from field in your email client

### Styling

Allows you to customize your fonts throughout the contact form, add a background color or a padding for your contact form content as well as customize the form fields. Moreover, you may also set the responsive behavior of your contact form from here.

- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

## Countdown Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode will let you create a countdown. In order to add one to your page, just drag & drop, or click it.

Back-end

Front-end

### The countdown options

Click on the shortcode to bring up the options:

- Format - lets you choose the format of your countdown and customize it.
- Countdown Expire Date - lets you set the expire date for your countdown.
- Alignment - lets you choose the alignment of your countdown.
- Text - lets you set the text that will appear once the countdown expires.
- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Divider Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a divider to your page:

Back-end

Front-end

### The divider options

Click on the shortcode to bring up the options:

- Type - lets you choose the type of the divider: single line, dashed, double line and more.
- Thickness - lets you input a custom line thickness in pixels.
- Height - lets you choose one of the predefined heights or input a custom one.
- Width - the width of the divider in percentage or you may input a custom one.
- Alignment - allows you to adjust the alignment of the divider

- Color - the divider color.
- Add Element - you can use this option to add a text or an icon to your divider. You may also upload your own image for the purpose of adding it as your divider icon. The front end result might look like this

- Link ID - you can enter a cutom css ID for this shortcode. Use this ID in any URL link in the page in order to anchor link to this shortcode (e.g http://link/#custom_id)

- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.

- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:

  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Icon Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add an icon to your page:

Back-end

Front-end

### The icon options

Click on the shortcode to bring up the options:

- Icon - lets you select the icon you want on the page.
- Icon Size - lets you set the size of the icon.
- Icon Color - lets you set the color of the icon.
- Border - lets you add a border to this shortcode as well as its size and color
- Icon Position - the icon position dependent on the title.
- Title - the icon title and its styling.
- Link - the title URL link.
- Content Alignment - lets you set the alignment of the icon shortcode content

- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.

- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:

  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Icon Box Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add an icon box to your page:

Back-end

Front-end

### The icon box options

Click on the shortcode to bring up the options:

- Style - lets you select the icon box style.
- Title - the icon box title.
- Description - the icon box description.
- Icon - lets you select the icon, icon size, icon color and background type.
- Button - lets you to add a button to your icon box and customize it.

- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.

- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:

  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Image Box Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add an image box to your page:

Back-end

Front-end

### The image box options

Click on the shortcode to bring up the options:

- Style - lets you select the image box style. Each style comes with a different set of options like Bg Color or Overlay Color. Switch between them to check out the possibilities.
- Title - the image box title.
- Subtitle - the image box subtitle.
- Description - the image box description.
- Text Alignment - lets you select the text alignment.
- Content Padding - lets you adjust the padding of your image box.
- Button - lets you to add a button to your image box and customize it.

- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.

- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:

  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Latest Posts Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add the latest posts from your blog into any page:

Back-end

Front-end (Grid View OFF)

Front-end (Grid View ON)

Keep in mind

The grid view works well in larger size columns like 3/4 or 1/1.

### The latest posts options

Click on the shortcode to bring up the options:

- Blog Style - lets you choose between two different blog styles.
- Grid View - lets you display the blog posts on a grid of 2 or 3 columns.
- Display From - select a blog category from where you want to display the posts from.
- No of Posts - the number of latest posts displayed. We advise you to keep the number low: 3, 6, 9.

- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.

- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:

  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## List Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a list into your page:

Back-end

Front-end

### The list options

Click on the shortcode to bring up the options:

- List Items - lets you add items to your list and potentially sublist items.
- Add Element - use this options in order to add an icon or make your list a numbered list.
- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution bup to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

Keep in mind

The list shortcode usually works best in smaller columns like 1/4 and 1/3.

## Map Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a map into your page:

Back-end

Front-end

### The map options

Click on the shortcode to bring up the options:

- Population Method - lets you select the population method: Custom (add custom locations on your map) or Events (display events from a specific category on your map).

Information

The Map Shortcode lets the user add multiple map locations for your maps.

- Map Type - select the default map type.
- Map Pin - lets you upload a custom map pin to display for your location.
- Map Height - using this option you can set the map height in pixels.
- Map Zoom - lets you select the default zoom level of your map.
- Map Style - you may choose the style of your map by copying the id code from here and you may also build one from scrath; otherwise the map style will be the default Google Map one.

- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Portfolio Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add portfolio projects into your page:

Back-end

Front-end

### The portfolio options

Click on the shortcode to bring up the options:

- Display From - lets you select the category you want to display projects from. If the selected Category has sub categories then a filter will appear on the front end letting users filter the projects.
- No of Projects - the number of projects you want to display. We advise you to use this shortcode to display only a small no. of projects (6, 9).
- Display Type - the projects display type: portrait, landscape or square and the number of columns for your portfolio: 2, 3 or 4.
- Project Style - select one of the 3 built in project styles and customize it as you see fit by changing the fonts, the sepparator, the alignment, the coloring as well as a few other effects like border or shadow.
- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

Keep in mind

You need to have a least one Portfolio Category in order to be able to use this shortcode.

## Quote Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a quote into your page:

Back-end

Front-end

### The quote options

Click on the shortcode to bring up the options:

- Quote Sign - lets you add a quote sign to your quote and customize its font, color and position.
- Text - the quote's text.
- Text Alignment - lets you select the quote's text alignment.
- Separator - lets you add a separator and customize it.
- Author - the author.
- Link - the author URL link.
- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## RAW Code Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a raw code area into your page:

Back-end

### The raw code area options

Click on the shortcode to bring up the options:

- Code - lets you input your own HTML, Javascript or CSS code
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

## Space Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a space into your page:

Back-end

Front-end

### The space options

Click on the shortcode to bring up the options:

- Height - lets you select one of the 3 built in heights or input a custom one (in pixels).
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

## Special Heading Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a heading into your page:

Back-end

Front-end

### The special heading options

Click on the shortcode to bring up the options:

- Title - the heading title.
- Size - lets you set the heading size of the title, H1 being the largest as well as customize it.
- Subtitle - the heading subtitle and its styling.
- Alignment - you can align the title and subtitle using this option.
- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Table Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a table into your page:

Back-end

Front-end

### The table options

Click on the shortcode to bring up the options:

- Table Styling - lets you choose the styling of your table: pricing or tabular data table.
- Columns - you can add a maximum of 5 columns and select from the 3 preset stylings:

1. Default (default styling).
2. Highlight (makes the column stand out).
3. Description (styles the column as a description column where you can put explanation text for the rows in the table) for each column.

- Rows - you can add as many rows as you like and they come with the following styling:

1. Default (default styling)
2. Heading (styles the row as a heading row).
3. Pricing (lets you input price and subscription period).
4. Button (lets you add a button for every column).
5. Switch (adds a YES / NO feature switch for every column).

- Custom Style - lets you customize the table by changing its fonts, background color and border.
- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Tabs Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add tabbed content into your page:

Back-end

Front-end

### The tabs options

Click on the shortcode to bring up the options:

- Type - lets you select the tabs type.
- Tabs - use this option to add the actual tabs content into your shortcode. Press the Add button and another options pop up will appear where you will be able to input your tab Title and Content and even add an icon. You may also customize fonts, background color and border.
- Content Padding - lets you adjust the inner padding of your tab content.
- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Team Member Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a team member into your page:

Back-end

Front-end

### The team member options

Click on the shortcode to bring up the options:

- Image - use this option to upload an image for your team member. You may also customize it by changing its ratio, making it round, adding a border or changing its size.
- Name - the name of the team member.
- Job Title - the team member's job title.
- Description - the description.
- Background Color - add a background color for the team member.
- Content Alignment - lets you set the alignment of your team member content.
- Content Padding - lets you adjust the interior padding of your team member content.
- Social Links - the team member's social links.
- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

Keep in mind

The team member shortcode usually works best in smaller columns like 1/4 and 1/3.

## Testimonials Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a testimonial into your page:

Back-end

Front-end

### The testimonial options

Click on the shortcode to bring up the options:

- Style - lets you select one of the 2 display styles.
- Title - the testimonial title and styling.
- Image Size - lets you set a custom size for your client images and add a border to them.
- Display in Slider - use this option to display your testimonials in a slider. You can control the slide duration in milliseconds and the transition effect between the slides. If you choose NO the testimonials will be displayed one under the other based on the order in the testimonial list.
- Testimonials - the actual testimonials. Press the Add button to add the testimonials.
- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Text Block Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a text block into your page:

Back-end

Front-end

### The text block options

Click on the shortcode to bring up the options:

- Content - lets you enter the text content and stylize it.
- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Widget Area Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a widget area into your page:

Back-end

Front-end

### The widget area options

Click on the shortcode to bring up the options:

- Sidebar - lets you select one of the widgets area that you previously created in the Appearance > Widgets section. More about available widgets can be found in this article.

- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.

- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:

  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Gallery Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a gallery into your page:

Back-end

Front-end

### The gallery options

Click on the shortcode to bring up the options:

- Style - use this option to pick the style of your gallery.
- Images - this option lets you upload the images of your gallery and customize the text displayed when hovering.
- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Image Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add an image into your page:

Back-end

Front-end

### The image options

Click on the shortcode to bring up the options:

- Image - use this option to upload an image that you can also make round or add a border to it
- Image Format - use this option to choose one of the following image formats: 16:9, 4:3, 2:1, 9:16, 3:4, 1:2, 1:1 or simply leave it in its original ratio
- Size - lets you control the size of your image.
- On Click - use this option to control what happens when you click the image.
- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Revolution Slider Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a revolution slider into your page:

Back-end

Front-end

### The revolution slider options

Click on the shortcode to bring up the options.

important

You can't create the sliders directly in the shortcode. Use the revolution slider plugin from the admin interface menu to create your revolution sliders and then come back to add them using the shortcode. More about revolution slider can be found in this article.

- Select Slider - lets you select any revolution slider created using the revolution slider plugin.

## Slider Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a slider into your page:

Back-end

Front-end

### The slider options

Click on the shortcode to bring up the options. If you don't have any sliders created your options pop up will look like this:

important

You can't create the sliders directly in the shortcode. Use the sliders module from Appearance > Sliders to create your sliders and then come back to add them using the shortcode. Learn how to create a new slider from this article.

After you've create your first slider your shortcode's option pop up will look like this:

- Select Slider - lets you select any slider created using the sliders module.
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

## Slideshow Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a slideshow into your page:

Back-end

Front-end

### The slideshow options

Click on the shortcode to bring up the options:

- Image Slider - use this option to upload images into your slideshow.

- Auto Slide - lets you toggle the auto slide on / off and also the time between slides in milliseconds. It also allows you to pause the slideshow while hovering.
- Animation - use this option to control the animation type and time in milliseconds.
- Format - this feature allows you to set the ratio of your slideshow box by choosing from one of the preset ratios.
- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Video Novice Novice tutorials require no prior knowledge of any specific web programming language.

This shortcode lets you add a video into your page:

Back-end

Front-end

### The video options

Click on the shortcode to bring up the options:

- Video - use this option to input your Youtube or Vimeo video URL.
- Width - lets you control the width of your video.
- Video Border - allows you to add a border to your video box and customize it.
- Animation - enables you to create an animation entrance or exit for this shortcode. Demo previews for the animations can be found here.
- Responsive Behavior - lets you control how this shortcode behaves on mobile devices as follows:
  - Tablet Display - you may choose whether or not this shortcode will be displayed on tablets and devices with the resolution between 768px - 990px (tablet portrait).
  - Smartphone Display - you may choose whether or not this shortcode will be displayed on smartphones and devices with the resolution up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

- Custom Class - you can use this option to add a class and further style the shortcode by adding your custom CSS in the custom.less file. This file is located on your server in the /child-theme/styles-less/ folder.

## Global Settings Novice Novice tutorials require no prior knowledge of any specific web programming language.

The theme settings can be found under Appearance > Theme Settings. Locate the Global Settings section under General > General Tab. The page looks like this:

### The global settings options

Here you'll find general options to control your website's width, background, logo and more. The options are as follows:

- Website Width - lets you set a custom width for your website. By default this option is set to full width but if you select the custom option you'll be able to select the width you want from the slider, the top and bottom margin in pixels, the container background color and your website's alignment.

- Website Background - lets you select a background color for your website and also set a pattern overlay (choose one from the built in options or upload your own)

- Logo Type - lets you select the logo type: Text or Image. The image option comes with an image upload field that lets you upload a logo for your website. Upload twice the size (px) of the logo you want to use if you set the Retina option to YES.

- Favicon - upload a favicon image or favorite icon, it's visible by your users and appears here:

- Content Density - this option lets you choose the default top and bottom spacings built into the theme and it's related to the sections that compose the pages of your website. You can choose between: Compact (40px top and bottom), Cozy (80px top and bottom) and Comfortable (110px top and bottom). Use this option in order to have your website's sections more spaced out or less spaced out. Cozy is set up by default.

Keep in mind

The section shortcode from the visual page builder has a Default Spacing setting tied directly with the Content Density option. You can enable or disable the Default Spacing for an individual section directly from the visual builder by setting the option to YES / NO.

Important

The Content Density option controls only the top and bottom spacings for a section. The spaces created by shortcodes like Space, Separators, or others inside a section will not be affected by the Content Density option.

- 404 Error Page - use this option in order to select a custom 404 error page. The users will be redirected to this page when the page they are looking for is not found.

- Coming soon / Maintenance Page - lets you set a maintenance page or coming soon page. Use this option when you want to work on your website. The users will be redirected to this page when they are not logged in.

Keep in mind

You need to disable the maintenance page manually in order to make your website accessible again.

## Social Profiles Novice Novice tutorials require no prior knowledge of any specific web programming language.

Go to Appearance > Theme Settings. Locate the Social section under General > Social Profiles Tab. The page looks like this:

### The social profiles options

Here you'll find the option to add your social profiles that will be used in your website:

- Social Links - lets you add your social profile links by clicking the Add button.

Information

This option is directly linked with the social icons displayed in the header and footer.

## Blog Posts Novice Novice tutorials require no prior knowledge of any specific web programming language.

Go to Appearance > Theme Settings. Locate the blog posts settings under Posts > Blog Tab. The page looks like this:

### The blog posts options

Here you'll find option related to your blog posts. We've separated them in two sections:

### Posts

- Blog Style - use this option to choose the display style for your blog posts.

- Grid View - lets you display your blog posts on a grid. The posts will be displayed on a 2 columns grid if the page has a sidebar or on a 3 columns grid if it doesn't.

- Blog Titles - lets you style your blog titles.
- Comments Number - lets you enable or disable the number of comments for posts and choose one of the 5 built in display styles.

- Blog Button - change the style / typography of the blog read more button.
- Image Alignment - lets you select the default image alignment for a new post. Your choice will not apply to posts that are already published, but it will set the default value for image alignment when you create new posts.
- Use Round Image - use this option to set the default image roundness for new posts. Your choice will not apply to posts that are already published, but it will set the default value for image roundness when you create new posts.

- Featured Image - lets you enable or disable the use of the featured image in the post details page. Your choice will not apply to posts that are already published, but it will set the default value for when you create new posts.
- Image Border - add a border to all your blog images.

- Post Date - allows you to enable the display of the post publishing date.
- Post Author - allows you to enable the display of the post author.
- Post Categories - allows you to enable the display of the post categories.
- Author Box - allows you to enable the display of the author box.

- Post Navigation - enables or disables the posts navigation module from the post details page.

- Related Articles - displays the related articles section on the post details page. It appears on the bottom and it displays posts containing the same tags as the article you are reading. If no tags match, it displays articles from the same category.

- Default Blog Avatar - lets you set a default blog avatar. This is the default avatar used when the user doesn't have one set.

### Single Posts Header

- Header Height - lets you set the header height. Comes Auto by default and it also has 3 preset choices (small, medium and large). These presets were created in order to help you keep all your header heights consistent across the website.

- Header Image - lets you change the default header image for all your posts if you didn't set one for a specific post. This is a global setting and will take effect for all your posts that doesn't have an image set. Learn more about how to set an image for a specific post from this article.

- Overlay Color - use this option if you want to set a color overlay for your image. You can select one of the 5 default colors or input a custom one. Use the opacity slider in order to control the overlay color opacity.

Backend

Frontend

- Header Image Overlap - lets you select the header image overlap value in pixels. The content that follows will overlap the header with the specified pixel amount.

- Title - lets you select what title will be displayed in the posts header. You can choose to display the Post Title, the Category Title or a Custom Title.

Backend

Frontend

Important

The title option applies only to blog post details page (single) and will be displayed only if you have a header image set (in the post or in the theme settings).

Keep in mind

If you choose the category as a title and the post is included in multiple categories, the first category in alphabetical order will be displayed as the header title.

- Content Position - this option takes values in pixels and lets you adjust the content vertical position. It is mostly used when you want to fine tune the header content position on the vertical axis (e.g. the logo and main menu are positioned absolute and you want the header content moved up or down). Input a negative value if you want your content to go up or a positive value if you want your content to go down.

## Portfolio Posts Novice Novice tutorials require no prior knowledge of any specific web programming language.

Go to Appearance > Theme Settings. Locate the portfolio post settings under Posts > Portfolio Tab. The page looks like this:

### The portfolio posts options

Here you'll find option related to your portfolio posts. We've separated them in two sections:

### Portfolio

- Project Style - lets you select one of the 3 predefined project display styles for your portfolio page. More display options for your projects like number of columns or image ratio can be found in the portfolio categories. Read more in this article.

- Portfolio Filter - use this option to enable the portfolio category filter.

- No of Projects per Page - lets you choose how many projects will be displayed on a page.

Important

The Portfolio options apply only to default portfolio categories from WordPress and not the portfolio shortcode used with the Visual Builder.

### Single Projects Header

Important

The header options are similar for all the post types: blog, portfolio, events. A more detailed explanation with included image examples can be found in the Blog Posts settings.

- Header Height - lets you set the header height. Comes Auto by default and it also has 3 preset choices (small, medium and large). These presets were created in order to help you keep all your header heights consistent across the website.

- Header Image - lets you to change the default header image for all your posts if you didn't set one for a specific post. This is a global setting and will take effect for all your posts that don't have an image set. Learn more about how to set an image for a specific post from this article.

- Overlay Color - use this option if you want to set a color overlay for your image. You can select one of the 5 default colors or input a custom one. Use the opacity slider in order to control the overlay color opacity.

- Header Image Overlap - lets you select the header image overlap value in pixels. The content that follows will overlap the header with the specified pixel amount.

- Title - lets you select what title will be displayed in the posts header. You can choose to display the Post Title, the Category Title or a Custom Title.

Important

The title option applies only to portfolio details page (single) and will be displayed only if you have a header image set (in the post or in the theme settings).

Keep in mind

If you choose the category as a title and the post is included in multiple categories, the first category in alphabetical order will be displayed as the header title.

- Content Position - this option takes values in pixels and lets you adjust the content vertical position. It is mostly used when you want to fine tune the header content position on the vertical axis (e.g. the logo and main menu are positioned absolute and you want the header content moved up or down). Input a negative value if you want your content to go up or a positive value if you want your content to go down.

## Event Posts Novice Novice tutorials require no prior knowledge of any specific web programming language.

Go to Appearance > Theme Settings. Locate the event post settings under Posts > Events Tab. The page looks like this:

### The event posts options

Here you'll find option related to your event posts:

### Single Events Header

Important

The header options are similar for all the post types: blog, portfolio, events. A more detailed explanation with included image examples can be found in the Blog Posts settings.

- Header Height - lets you set the header height. Comes Auto by default and it also has 3 preset choices (small, medium and large). These presets were created in order to help you keep all your header heights consistent across the website.

- Header Image - lets you to change the default header image for all your posts if you didn't set one for a specific post. This is a global setting and will take effect for all your posts that doesn't have an image set. Learn more about how to set an image for a specific post from this article.

- Overlay Color - use this option if you want to set a color overlay for your image. You can select one of the 5 default colors or input a custom one. Use the opacity slider in order to control the overlay color opacity.

- Header Image Overlap - lets you select the header image overlap value in pixels. The content that follows will overlap the header with the specified pixel amount.

- Title - lets you select what title will be displayed in the posts header. You can choose to display the Post Title, the Category Title or a Custom Title.

Important

The title option applies only to event details page (single) and will be displayed only if you have a header image set (in the post or in the theme settings).

Keep in mind

If you choose the category as a title and the post is included in multiple categories, the first category in alphabetical order will be displayed as the header title.

- Content Position - this option takes values in pixels and lets you adjust the content vertical position. It is mostly used when you want to fine tune the header content position on the vertical axis (e.g. the logo and main menu are positioned absolute and you want the header content moved up or down). Input a negative value if you want your content to go up or a positive value if you want your content to go down.

## Product Posts Novice Novice tutorials require no prior knowledge of any specific web programming language.

Go to Appearance > Theme Settings. Locate the product post settings under Posts > Products Tab. The page looks like this:

Important

Keep in mind that the Products tab appears only when the WooCommerce plugin is installed and activated.

### The product posts options

Here you'll find options related to your product posts:

### Single Products Header

Important

The header options are similar for all the post types: blog, portfolio, events and products. A more detailed explanation with included image examples can be found in the Blog Posts settings.

- Header Height - lets you set the header height. Comes Auto by default and it also has 3 preset choices (small, medium and large). These presets were created in order to help you keep all your header heights consistent across the website.

- Header Image - lets you change the default header image for all your posts if you didn't set one for a specific post. This is a global setting and will take effect for all your posts that doesn't have an image set. Learn more about how to set an image for a specific post from this article.

- Overlay Color - use this option if you want to set a color overlay for your image. You can select one of the 5 default colors or input a custom one. Use the opacity slider in order to control the overlay color opacity.

- Header Image Overlap - lets you select the header image overlap value in pixels. The content that follows will overlap the header with the specified pixel amount.

- Title - lets you select what title will be displayed in the posts header. You can choose to display the Post Title, the Category Title or a Custom Title.

Important

The title option applies only to product details page (single) and will be displayed only if you have a header image set (in the post or in the theme settings).

Keep in mind

If you choose the category as a title and the post is included in multiple categories, the first category in alphabetical order will be displayed as the header title.

- Content Position - this option takes values in pixels and lets you adjust the content vertical position. It is mostly used when you want to fine tune the header content position on the vertical axis (e.g. the logo and main menu are positioned absolute and you want the header content moved up or down). Input a negative value if you want your content to go up or a positive value if you want your content to go down.

## Pages Novice Novice tutorials require no prior knowledge of any specific web programming language.

Go to Appearance > Theme Settings. Locate the pages settings under Pages. The page looks like this:

### The pages options

Important

These options apply only to pages created with the default template (default WordPress pages) and not with the Visual Builder. More on using page templates can be found here.

Here you'll find option related to your pages:

### Pages Header

- Header Height - lets you set the header height. Comes Auto by default and it also has 3 preset choices (small, medium and large). These presets were created in order to help you keep all your header heights consistent across the website.

- Header Image - lets you to change the default header image for all your pages if you didn't set one for a specific page. This is a global setting and will take effect for all your pages that don't have an image set. Learn more about how to set an image for a specific page from this article.

- Overlay Color - use this option if you want to set a color overlay for your image. You can select one of the 5 default colors or input a custom one. Use the opacity slider in order to control the overlay color opacity.

- Header Image Overlap - lets you select the header image overlap value in pixels. The content that follows will overlap the header with the specified pixel amount.

- Title - lets you style the title that appears on your header (the title displayed will be the actual page title).

- Content Position - this option takes values in pixels and lets you adjust the content vertical position. It is mostly used when you want to fine tune the header content position on the vertical axis (e.g. the logo and main menu are positioned absolute and you want the header content moved up or down). Input a negative value if you want your content to go up or a positive value if you want your content to go down.

Keep in mind

The page header options are similar to posts detail pages. A more detailed explanation with included image examples can be found in the Blog Posts settings.

## The Header Novice Novice tutorials require no prior knowledge of any specific web programming language.

Go to Appearance > Theme Settings. Locate the header settings under Header. The page looks like this:

In this theme the header is composed from two parts:

- The Header - contains the logo and main menu of your website.
- The Header Top Bar - used to display the header social icons and an info text usually used for an email address or phone no. It can be turned ON or OFF.

### The header options

- Header Type - lets you select from the 4 predefined header types.

Type 1

Type 2

When you first choose the type 2 header, your header will look like this:

Information

You'll need to select a top secondary menu from the Menu Locations in order to make your header display as intended. Learn how to add a menu for this header from this article.

Type 3

Type 4

- Background Color - lets you change the background color for the header. Choose one of the 5 predefined colors or input a custom one.
- Dropdown Bg Color - controls the dropdown background color.
- Dropdown Links Color - lets you change the links color from the dropdown.
- Absolute Header - enable this option to make your header positioned absolute. This absolute positioning will put the header on top of the header image.

Important

Set a background color for your absolute header even if the opacity is set to 0. The reason you'd want to do this is because on smartphones the absolute header option is disabled and you'll want a background color for your logo (the opacity is set by us to 100%).

- Sticky Header - lets you make your header stick with the scroll

### The header top bar options

- Header Top Bar - select YES if you want to enable your Header Top Bar.

- Background Color - lets you control the background color for the top bar.
- Text - this top bar text is usually used for an email address or phone no (it supports HTML).

- Social Icons - use this option to enable the display of your social icons. Your social links can be set from the Social Profiles tab under the General settings. Learn how to add/edit your social links from this article.

- Social Icons Color - controls the icons color.

- Icon Size - lets you set the social icons size in pixels.
- Socials Position - controls the social icons position on the bar.

Keep in mind

The text option will be positioned based on the positions of the social icons. For example If you choose to have the icons on the left, then the text will be positioned on the right.

### The search options

- Search - select YES to enable the search on your website.

- Type - lets you select the type of the search field: Input Search or Icon Search.
- Position - use this option to position your search on the header or on the top bar. Play with the different positions to see what suits your needs better.

Keep in mind

You can't control where your search will be displayed on the top bar or header, this will happen automatically based on your choices made on the other options.

## How to Enable the Header Social Icons Novice Novice tutorials require no prior knowledge of any specific web programming language.

Here is how you can enable your header social icons on your website:

1. Go to Appearance > Theme Settings.
2. Locate the Header Top Bar option under Header.

3. Enable the Header Top Bar by selecting YES.

4. Select YES to enable the Social Icons.

Keep in mind

Your social icons need to be set from General > Social Profiles. Learn how to add/edit your social links from this article.

5. Hit the Save Changes button in order to save your changes.

## How to Enable the Header Search Novice Novice tutorials require no prior knowledge of any specific web programming language.

Here is how you can enable your header search on your website:

1. Go to Appearance > Theme Settings.
2. Locate the Search option under Header.

3. Enable the Search by selecting YES.

4. Choose your search Type and use the styling options to stylize your search to your liking

5. Choose your search Position. The options are Top Bar or Menu Bar.

Keep in mind

You can't control where your search will be displayed on the top bar or header, this will happen automatically based on your choices made on the other options.

6. Hit the Save Changes button in order to save your changes.

## The Footer Novice Novice tutorials require no prior knowledge of any specific web programming language.

Go to Appearance > Theme Settings. Locate the footer settings under Footer. The footer is composed of 3 areas as follows:

- The Footer Widgets - where you can display different widgets from Appearance > Widgets.
- The Menu Bar - used to display a footer menu navigation.
- The Copyright Area - where you can display your footer social icons and the copyright text.

### The footer widgets options

Back-end

Front-end

- Footer Widgets - select YES to enable the footer widgets to be displayed.
- Number of Columns - lets you choose between 3 or 4 columns.
- Background - select the background for your widget area.
- Titles Color - use this option to change the titles color.
- Body Text Color - any body text in the widgets will have the color set here.

Information

Learn how you can set the widgets that appear in the footer from this article.

### The menu bar options

Back-end

Front-end

- Menu Bar - lets you enable the footer menu bar.
- Footer Menu - choose if you want a navigation menu displayed on the Menu Bar.

Information

You can set this navigation menu from Appearance > Menus. Note that only the top level items will be displayed. Learn how to set a navigation menu for the footer from this article.

- Footer Logo - lets you add a logo on your menu bar. You can choose the position of the logo on the menu bar and the navigation menu will adjust accordingly.
- Logo Position - lets you select the logo position on the menu bar.
- Background - select the background for your menu bar.

### The copyright area options

The copyright area is composed of 2 elements:

- The Footer Social - lets you enable the display of the social icons in the footer.
- The Copyright - used to display a copyright text in the footer.

### The footer socials

Back-end

Front-end

- Footer Socials - select YES to enable the footer social icons.
- Social Icons Color - lets you select the social icons color.
- Social Icons Hover Color - lets you select the social icons hover color.
- Icon Size - lets you set the social icons size in pixels.

Keep in mind

Your social icons need to be set from General > Social Profiles. Learn how to add/edit your social links from this article.

### The copyright

Back-end

Front-end

- Copyright - use this field to input the copyright on the footer bottom bar.
- Position - the copyright position. Based on your selection here, the social icons will be positioned accordingly.
- Spacing - lets you control de top and bottom spacing in pixels.
- Background Color - the bottom bar background color.

Keep in mind

The copyright can't be turned off.

## How to Add Widgets to Your Footer Novice Novice tutorials require no prior knowledge of any specific web programming language.

Here is how you can add widgets to your footer widgets area:

1. Go to Appearance > Widgets.
2. Locate the Footer Columns 1 through 4 in the right side of the page.

Keep in mind

The Footer Columns can't be removed.

3. Click one of the columns to expand it and add the widgets you want from the left side by dragging and dropping.

4. Done. No need to save, this is updated in real time and the page saves it self when you add the widgets.

Important

Your need to have the footer Widget Area enabled from the Appearance > Theme Settings > Footer in order for the widgets to be displayed. Note that if you select to display only 3 columns, the widgets added in the 4th column will not be displayed.

## How to Set a Footer Navigation Menu Novice Novice tutorials require no prior knowledge of any specific web programming language.

Here is how you can set a footer navigation menu:

1. Go to Appearance > Menus.
2. Click on the Manage Locations tab.

3. On the Footer Menu option select the menu you want from the list. You can create a new one. Learn out how from this article.

4. Click the Save Changes button in order to save your changes.

Important

Your need to have the footer Menu Bar and Footer Menu options enabled from the Appearance > Theme Settings > Footer in order for the navigation menu to be displayed.

## Theme Requirements Novice Novice tutorials require no prior knowledge of any specific web programming language.

The Requirements settings is a script that checks the compatibility of your Wordpress Environment and Server Environment with this theme as well as offer improvement suggestions. Go to Appearance > Theme Settings under Requirements. The page looks like this:

The requirements page is composed from two parts:

- Wordpress Environment - contains the minimum requirements of your Wordpress Environment in order to be compatible with the theme
- Server Environment - contains the minimum requirements of your Server Environment in order to be compatible with the theme

### Wordpress Environment

- Home URL - displays information regarding the URL of your site's homepage

- Site URL - displays information regarding the root URL of your site

- WP Version - checks the compatibility of your Wordpress version with the theme and suggests improvements as necessary for this theme to be compatible. You can learn how to update your Wordpress here.

- WP Multisite - checks if you have Wordpress Multisite enabled

- WP Debug Mode - displays whether or not your Wordpress is in debug mode and recommends that you set it to off for an optimal user experience. You can learn how to do that here.

- WP Memory Limit - displays the maximum amount of RAM memory that your site can use at one time and offers recommandation as to how to set it to an optimal limit (256MB). You can learn how to do that here.

Keep in mind

The Wordpress Memory Limit is directly linked with the compilation of LESS from Theme Settings. For optimal performance, it is recommended that you meet this requirement. More about saving the theme settings and LESS can be found here.

### Server Environment

- Server Info - displays information regarding the web server that is currently hosting your site

- PHP Version - checks the compatibility of the PHP version installed on your hosting server with this theme and suggests improvement as necessary. Contact your hosting provider to update it.

- PHP Post Max Size - checks the largest file size that can be contained in one post and suggests increasing it to an optimal maximum size for this theme, if necessary. You can learn how to do that here.

- PHP Time Limit - checks the amount of time (in seconds) that your site will spend on a single operation before timing out in order to avoid server lockups and offers recommendation into setting it to an optimal amount for this theme, if necessary. You can learn how to do that here.

- PHP Max Input Vars - displays the maximum number of variables your server can use for a single function to avoid overloads and suggests changing it to a maximum number for this theme to be compatible, if necessary. You can learn how to do that here.

- SUHOSIN Installed - checks if you have SUHOSIN installed on your server and recommends to configure it to increase its data submission limit to an optimal amount for this theme, if necessary. You can learn how to do that here.

- ZipArchive - checks if you have ZipArchive installed on your server and suggests contacting your hosting provider to instal it, if necessary. ZipArchive is required for importing demos.

- MySQL Version - checks the compatibility of the MySQL version installed on your hosting server with this theme and suggests improvement as necessary.

- Max Upload Size - displays the largest file size that can be uploaded to your Wordpress installation and offers recommendation to set it to a maximum upload file size optimal for this theme, if necessary. You can learn how to do that here.

- fsockopen/cURL - checks if you have fsockopen or cURL installed on your server and suggests contacting your hosting provider to install it, if necessary. fsockopen/cURL permits payment gateways to communicate with remote servers in order to authorize payments.

Keep in mind

Your theme might work even if you don't meet some of the items in the Requirements page.

## How to Set A Maximum File Upload Size Advanced Advanced tutorials require advanced knowledge of web design concepts and languages such as HTML, CSS, JavaScript.

Setting a maximum file upload size in Wordpress requires the user to have access to the server FTP where he is hosting his website.

Keep in mind

If you do not have access to your website FTP, contact your hosting provider to give you access or simply inform him to make the modifications for you.

The change can be done in two different ways:

- Modifying .htaccess files
- Use the ini_set() PHP function

### Modify .htaccess files

1. Go to your site's root directory
2. Open the .htaccess file there
3. Edit the file and paste the code below
4. Make sure you upload the .htaccess file back in the site's host root directory once that is done.

        php_value upload_max_filesize 128M
        php_value post_max_size 128M

### Use the ini_set() PHP Function

1. Go to your site's root directory
2. Open the wp-config.php file
3. Edit the file and paste the code below
4. Make sure you upload the file back in the site's host root directory once that is done.

        @ini_set( 'upload_max_size' , '128M' );
        @ini_set( 'post_max_size', '128M');

Keep in mind

The recommended file size for this theme is 128 MB.

Warning

Modifying a server setting might have unforseen consequences. If you are not sure of what you are doing or you are not proficient with changing files on a server, please notify your hosting provider and they will make the modifications for you.

## How to Increase the Maximum Input Variables Limit Advanced Advanced tutorials require advanced knowledge of web design concepts and languages such as HTML, CSS, JavaScript.

Setting a maximum input limit for variables in Wordpress requires the user to have access to the server FTP where he is hosting his website.

Keep in mind

If you do not have access to your website FTP, contact your hosting provider to give you access or simply inform him to make the modifications for you.

The change can be done by modifying your .htaccess file

1. Go to your site's root directory
2. Open the .htaccess file there
3. Edit the file and paste the code below in it
4. Make sure you upload the .htaccess file back in the site's host root directory once that is done.

        php_value max_input_vars 8000

Keep in mind

The recommended input variables limit for this theme is 8000.

Warning

Modifying a server setting might have unforseen consequences. If you are not sure of what you are doing or you are not proficient with changing files on a server, please notify your hosting provider and they will make the modifications for you.

## How to Set A Maximum Execution Time Advanced Advanced tutorials require advanced knowledge of web design concepts and languages such as HTML, CSS, JavaScript.

Setting a maximum execution time in Wordpress requires the user to have access to the server FTP where he is hosting his website.

Keep in mind

If you do not have access to your website FTP, contact your hosting provider to give you access or simply inform him to make the modifications for you.

The change can be done in two different ways:

- Modifying .htaccess files
- Use the ini_set() PHP function

### Modify .htaccess files

1. Go to your site's root directory
2. Open the .htaccess file there
3. Edit the file and paste the code below
4. Make sure you upload the .htaccess file back in the site's host root directory once that is done.

        php_value max_execution_time 200

### Use the ini_set() PHP Function

1. Go to your site's root directory
2. Open the wp-config.php file
3. Edit the file and paste the code below
4. Make sure you upload the file back in the site's host root directory once that is done.

        @ini_set( 'max_execution_time', '200' );

Keep in mind

The recommended maximum execution time for this theme is 200.

Warning

Modifying a server setting might have unforseen consequences. If you are not sure of what you are doing or you are not proficient with changing files on a server, please notify your hosting provider and they will make the modifications for you.

## Saving The General Settings Novice Novice tutorials require no prior knowledge of any specific web programming language.

All the styling options from the Theme Settings page are built with LESS. In this article you'll find:

- What is LESS?
- Theme settings & saving time
- Errors & solutions

### What is LESS?

LESS is a dynamic stylesheet language that allows you to write CSS in a smarter way by combining functions, mixins, operations and more. This means you write more concise style information and can reuse things like colors and styles more easily.

### Theme settings & saving time

Any changes you make in the Theme Settings page will take effect after you press the Save Changes button. When you press the Save button your server compiles all the LESS files and generates a single CSS file containing all the styling.

Because the compiling of the LESS files is done on the server side, the time it takes for the settings to be saved has nothing to do with the actual WordPress theme itself but is directly related with your server resources (RAM, processing power, etc) and the server settings.

- The downside - the saving time can greatly vary from server to server, usually around 7-10 seconds but it can take up to 1, 2 minute(s).
- The advantage - faster loading pages for your users. LESS is processed by your server before hand and when a user tries to access any content, the styling is delivered from a static file rather then making requests to the database every time.

Keep in mind

The General Settings options are the only options built with LESS and the time you'll spend on this page is very short in comparison with the time you'll spend actually creating your website. In our experience you'll be done with this page in a couple of days and very rarely adjust something in the General Settings after that.

### Errors & solutions

When you are saving the General Settings you may encounter one of the following errors:

- Memory limit exhausted

How to solve

The default memory limit is usually 40MB but we advise you to increase it to 256MB (check your WP Memory Limit on the Theme Requirements page). Learn how you can increase the WP Memory Limit from this article.

- Execution time exceeded

How to solve

Increasing the maximum execution time will ensure that your site does not time out when compiling the LESS files. We recommend you set the max execution time to 200. Learn how you can do this from this article.

## Colors Novice Novice tutorials require no prior knowledge of any specific web programming language.

The colors settings can be found under Appearance > Theme Settings. Locate the Color Settings section under Colors. The page looks like this:

### The color options

Here you can change:

- The Color Palette - composed of 5 different colors, it lets you globally control the colors on your website. A detailed explanation about the color palette containing examples and images can be found in this article.

- Links Color - refers to text links from body text and lets you set the normal and hover colors.

Keep in mind

This is a general default setting. These colors will be used across your website if you don't change them specifically from a shortcode, page content editor or custom css.

- Buttons Color - lets you control the default button background colors.

Keep in mind

This is a general default setting. These colors will be used for all the buttons if you don't change them specifically from a shortcode (in the visual builder) or custom css.

## The Color Palette Novice Novice tutorials require no prior knowledge of any specific web programming language.

The Color Palette module is one of the most important option when it comes to style your website. Go to Appearance > Theme Settings > Colors in order to access this option. It looks something like this:

The color palette is composed of 5 different colors that you can set. When you change one of them two things happen:

- Front-end impact - you'll change all the instances of this color from the front-end.
- Admin impact - you'll change the default color in all the options across the admin.

Lets take the 2nd color from the Color Palette and analyze what happens on the front-end and back-end if we change it:

### Front-end impact

Changing any color from the color palette will change all the elements from the front end where that color was used.

### Admin impact

Changing any color from the color palette will also change the default color in all the options across the admin. What this means is that every color option from the back end (it doesn't matter where the option is: footer, shortcode, etc) will have the default color palette updated with the new color.

Important

If you have a default color selected (in any color option in your admin), and that default color is changed from Theme Settings > Colors, the new color will reflect on the front end immediately. You don't need to go through every option to adjust the colors to the new change.

Keep in mind

Use the default colors from options as often as possible when you create new content for your website. This will easily enable you to keep a visual consistency across your website and make fast global color changes from Theme Settings > Colors.

## Typography Novice Novice tutorials require no prior knowledge of any specific web programming language.

The typography settings can be found under Appearance > Theme Settings. Locate all the font options under Typography. The page looks like this:

Keep in mind

We've implemented Google Fonts, so you have over 700 fonts to choose from. Check out the their open font library and then select the font you want from the drop down list in the WordPress admin.

### The typography options

In order to make them easy to go through, we've separated the typography options in 5 sections:

- Typography - here you'll find general typography options like headings (H1, H2, etc), subtitles and body text.

- Blog - lets you control the title links from the widgets and the spacings between sidebar widgets.

- Header - typography options related to the header: fonts, menu item spacings.

- Footer - typography options related to the footer: fonts, menu item spacings.

- Forms - default options related to forms: labels and form inputs.

## Custom CSS Novice Novice tutorials require no prior knowledge of any specific web programming language.

Sometimes you'll need to make quick CSS changes so that is why we've built a way of allowing you to add CSS directly from the admin. The Custom CSS can be found under Appearance > Theme Settings. The page looks like this:

Important

Take note of the word Quick from the title. This option was built to help you make small (Quick) adjustments. If you need to change major portions of the theme please add your custom CSS in the custom.less file. This file is located on your server in the /child-theme/style-less/ folder.

Apply the CSS changes you need in the Quick CSS field and hit the Save Changes button in order to save your changes.

Back-end

Front-end

Information

All the CSS from this theme is built with .less. Find out the basics of less and how to work with variables in CSS from this article.

## The Styling Pop-up Novice Novice tutorials require no prior knowledge of any specific web programming language.

The Styling option can be found throughout the entire theme in many different shortcodes and features. Below are a few examples of places where you may find the Styling option.

Clicking the Styling button will bring up the Styling Pop-up option that lets the user visually customize shortcodes, features or general options in a variaty of ways. The options from the Styling Pop-up differ from element to element affecting the way the element looks on the front-end.

The Styling Pop-up comes with two buttons:

- Reset - lets the user reset the styling settings of that element to the default theme settings
- Save - lets the user save the styling settings as custom, overwriting the default ones in the theme settings

## Less Basics Intermediate Intermediate tutorials require familiarity with basic web design concepts, as well as basic knowledge of HTML, CSS and JavaScript.

The styling of this theme is made using LESS which lets us dynamically change CSS properties like coors, spacings and more.

LESS allows you to write CSS in a smarter way by combining functions, mixins, operations and more. This means you write more concise style information and can reuse things like colors and styles more easily.

It's not mandatory to know less in order to change something in the style of your theme because regular CSS still applies, but it's important to understand the basics of how it works in order to make it work in your advantage if you decide using it.

### Modifying CSS in your theme

All the less files can be found in the /styles-less/ folder on your server. For an easy way to identify and modify the files, we've separated the styling of elements in different less files (header.less, images.less, portfolio.less, etc).

There are 2 ways to go in order to start modifying CSS in your theme:

- Adding CSS to custom.less - in your child theme, locate the custom.less file in the /styles-less/ folder. Open the file and add your custom CSS.

Information

This method is the recommended way to go when you want to modify any CSS in your theme.

- Copying the entire css file in the child theme - if you need to make big changes in one of the css files, copy that file in the child theme, recreating the exact folder structure from the parent.

Important

Once you've copied a less file in the child theme folder, the file from parent will not be included in the theme anymore, so future updates made by us in that CSS file will not reflect on your website.

### Less variables

The main advantage of using less is the use of variables and functions. Get acquainted with the variables used in this theme by opening the variables.less file found in parent-theme/styles-less/

For example, if you'd like to add this CSS snippet:

        .widget-title {
        color: red;
        margin-bottom: 20px;
        }

You can write the code in less using a color variable:

        .widget-title {
        color: @theme-color-5;
        margin-bottom: 20px;
        }

@theme-color-5 - is a color variable. If you modify this variable the color will modify for all the classes the variable was used for. If we have the color property as red in 100 places, we would have to go through all 100 classes and modify the color red to green for example, but with the use of CSS variables we only modify the variable and the color changes apply in all 100 classes.

        @theme-color-5: green
        .widget-title {
        color: @theme-color-5; // color: green;
        margin-bottom: 20px;
        }

Some variables like the color palette can be changed from the WordPress admin. Other more specific color options are preset by us in the variables.less file. These variables can be changed by re-writing the CSS in the custom.less file from the child theme folder (see above). Modifying only the variables that you need: spacings, paddings, colors, etc enables you to make big changes very fast.

important

The changes made in the less files on your server will take effect only after you press the Save button in the admin Theme Settings page. When you press the Save button your server compiles all the less files and generates a single CSS file containing all the styling.

## What is responsive web design? Novice Novice tutorials require no prior knowledge of any specific web programming language.

Responsive Web Design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience across a wide range of devices (from desktop computer monitors to mobile phones). Basically a website should respond to the user’s behavior based on screen size, platform and orientation.

The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences.

This theme has all the tools in place to let you build your website with a responsive approach in mind. Here is how a page looks on different devices:

Desktop

iPad (landscape orientation)

iPad (portrait orientation)

Smartphone (landscape orientation)

Smartphone (portrait orientation)

Information

More about the responsive options built into the theme can be found in this article.

## The Responsive Options Novice Novice tutorials require no prior knowledge of any specific web programming language.

This theme comes with a couple of options that let you control the responsive behavior of your website on different resolutions and devices (tablets & smartphones).

The responsive options were added to every section, column and shortcode and can be accessed by clicking the Settings button in the options pop-up:

By using the responsive options you can:

- Turn off sections, columns and shortcodes on responsive devices - lets you choose if a section, column or shortcode is displayed on tablets or smartphones.
- Change the responsive display for a column (tablets only) - lets you force a column to be a certain width (1/2, 2/3, 1/1, etc) on tablets only.
- Overwrite the additional spacing for a column (tablets and smartphones) - use this option to overwrite the additional spacing option for tablets and smartphones.

Important

Before continuing it's mandatory to understand that the tablet changes apply on devices with resolutions between 768px - 990px (tablet portrait orientation) and the smartphone changes apply on devices with resolutions up to 767px (smartphones both portrait and landscape as well as some low-resolution tablets).

Information

We choose not to include responsive options for tablets landscape because they are very close to desktop resolutions and in our experience the major changes in responsive behavior appears on tablets portrait and smartphones.

## How to turn off elements on responsive devices Novice Novice tutorials require no prior knowledge of any specific web programming language.

In order to turn off sections, columns and shortcodes on responsive devices, follow these steps:

1. Click a section, column or shortcode to bring up the options pop-up.
2. Locate the Responsive Behavior option at the bottom.
3. Click the Settings button.

3. Choose if you want your section, column or shortcode not to be displayed on Tablets or Smartphones and hit the Save button.

Keep in mind

The visibility options come YES by defaul. Remember, Tablet Display applies only to tablets on portrait orientation and Smartphone Display applies to smartphones on both portrait and landscape orientations.

## How to change the responsive display for a column Novice Novice tutorials require no prior knowledge of any specific web programming language.

In order to change the display for a column on tablet devices, follow these steps:

1. Click a column to bring up the options pop-up and locate the Responsive Behavior option at the bottom.
2. Click the Settings button.

3. Choose to make the column a different width on tablet and hit the Save button.

Keep in mind

The Tablet Display applies only to tablets on portrait orientation.

### Example

Back-end - we've set a column to be displayed as a 1/1 column on tablets

Desktop - nothing changes

Tablet (landscape orientation) - nothing changes because the tablet landscape resolution and up is not affected by this option.

Tablet (portrait orientation) - notice that the column is now 1/1. More over the following columns were set to be 1/2 and you can easily see that each one occupy half the screen.

## How to overwrite the additional spacing for a column Novice Novice tutorials require no prior knowledge of any specific web programming language.

In order to overwrite the additional spacing for a column on tablet and smartphone devices, follow these steps:

1. Click a column to bring up the options pop-up and locate the Responsive Behavior option at the bottom.
2. Click the Settings button.

3. Change the Additional Spacing option for tablets and/or smartphones and hit the Save button.

Keep in mind

The Additional Spacing overwrites the spacing option from the general column options and not add to it. Leaving the options blank will allow the responsive column to inherit its spacing from the general column options.

### Example

Back-end - we choose to leave the additional spacings blank for tablet and modified the spacings for smartphone.

Desktop (and tablet landscape) - nothing changes, the changes made don't apply to desktop and tablet landscape and the default column spacings are used.

Tablet (portrait orientation) - the default column spacings are used because we choose to leave the options blank.

Smartphone (both landscape and portrait orientations) - notice that the spacings changed on the smartphone. The new Additional Spacings values are applied.

## Best Practices Novice Novice tutorials require no prior knowledge of any specific web programming language.

Here are some tips, tricks and best practices to keep in mind when you create your (responsive) website using the built in options:

1. Always use columns in the page structure
2. Use auto heights on sections and columns
3. Don't create spacings using line-height
4. Don't create text aligns using the < br > HTML tag
5. Remove empty columns from smartphones
6. Change the columns width on tablets when possible
7. Create smart spaces on tablets and smartphones

### 1. Always use columns in the page structure

Make a habit to always use columns when you create your page structure. All the shortcodes work outside of columns as well but because columns have important responsive options it's good to maximize your control by using columns every time you want to add something to your page.

Keep in mind

The responsive options from columns let you individually overwrite: the width of the column (on tablets) and the spacing of the column (on tablets and smartphones).

### 2. Use auto heights on sections and columns

Try to always use the default Auto height option on sections and columns. Creating a fixed height for a section or column might create problems on responsive devices. If the content's height is larger then the section's or column's height, then part or the content will not be displayed. Use a fixed height for your sections or columns only when you specifically want to hide part of the content or want to create a particular structure for your page. Note that on smartphones (both landscape and portrait) we've automatically set the height for sections and columns to auto.

Tip 1

Set the height on Auto and use Space Shortcodes on top and bottom in order to create the height you want for your section or column. This way you can use the Responsive Behavior options from the shortcode in order to turn the spacings off on tablets and smartphones. Learn how to do it from this article.

Tip 2

Set the height on Auto and use the top and bottom Additional Spacing option from the column in order to create the height you want. This way you can use the Responsive Behavior options from the column in order to overwrite the additional spacings on tablets and smartphones. Learn how to do it from this article.

### 3. Don't create spacings using line-height

There are shortcodes or cases where you'll have a title and subtitle to set or a title and body text. Don't create spacings between them using the line-height options from the fonts. This might be a good solution if you were designing your website for desktop resolutions only but when you start decreasing the resolution (tablets & smartphones), the titles, subtitles and body texts start occupying more then one row and you'll get something like this:

Back-end

Desktop

Tablet (portrait orientation)

### 4. Don't create text aligns using the < br > HTML tag

Always be aware that you are actually building a website that needs to have the content accessible on multiple resolution devices at once. With that in mind don't use the < br > HTML tag to create alignments for texts. Other wise you might get something like this on lower resolution devices (tablets & smartphones):

Back-end

Desktop

Phone (portrait orientation)

### 5. Remove empty columns from smartphones

On smartphones, all columns will come with a default spacing of 20px top and bottom. Also, all columns are 1/1 by default so every empty column in your structure will add a 40px space because of the default spacings.

Back-end

Phone (portrait orientation)

Information

Learn how to turn off columns on your smartphone from this article.

### 6. Change the columns width on tablets when possible

Every column can be forced to another width on tablet (portrait orientation). Use this option whenever possible to deliver a truly responsive experience to your users.

Back-end

Desktop

Tablet (portrait orientation)

Information

Learn how to change the width of your columns on tablets from this article.

Important

Using the example above, an odd number of columns on a row can't be made in an even number on tablets because of how the HTML is built.

### 7. Create smart spaces on tablets and smartphones

Sometimes you'll want some space on your responsive website (tablet portrait and smartphone) but not that large as in the desktop (and tablet landscape) versions. Lets say you have a Space Shortcode of 300px. What you can do is split the shortcode in two space shortcodes (150px each), and turn one off on the device you need. This will allow you to have 2 x 150px (300px) on desktop and only 150px on tablet portrait for example.

Back-end (before)

Back-end (after)

Information

Learn how to turn off shortcodes using the Responsive Behavior option from this article.

## Overview & Server Requirements Novice Novice tutorials require no prior knowledge of any specific web programming language.

This theme is compatible with WooCommerce (one of the most popular WordPress eCommerce plugins). What this means is that we've created and stylize all the necessary page templates that the plugin uses:

- Product listing
- Product detail page
- Account
- Cart
- Checkout

Important

If you choose to start with one of our demos the Woo Commerce plugin will be installed by default. If you choose to start from scratch and not install one of our demos, you'll need to install WooCommerce your self. Learn out how from this tutorial.

### Server Requirements

Here are the minimum server requirements in order for the WooCommerce plugin to work:

- PHP 5.2.4 or greater
- MySQL 5.0 or greater
- The mod_rewrite Apache module (for permalinks)
- fsockopen support (for payment gateway IPN access)
- (optional) An SSL certificate if you choose to install any direct payment gateways
- (optional) Some plugins for WooCommerce require CURL
- (optional) Some plugins for WooCommerce require SOAP

### Getting started with WooCommerce

In order to start creating your online shop, you'll need to understand how WooCommerce works, create products, make different settings regarding payments and shipping and more.

The guys behind the plugin created an extensive documentation covering all you need to know that can be found online on their website: WooCommerce Documentation.

## Installing WooCommerce Novice Novice tutorials require no prior knowledge of any specific web programming language.

(Video from WooCommerce documentation)

Upon activation, WooCommerce will install several items it requires to function properly:

- New pages for handling things like the shop, cart and checkout
- Custom post types and taxonomies for orders and products
- New widgets and shortcodes
- User roles for shop managers and customers

### Automatic Installation

Automatic installation is the most straightforward option, as WordPress handles the file transfers itself without you needing to leave your Web browser.

1. Log in to your WordPress admin panel
2. Go to: Plugins > Add New
3. Type ‘WooCommerce’ into the search field and click Search Plugins. Once found, you can view details such as the the point release, rating and description.
4. Click Install Now. After clicking the link, you’ll be asked if you’re sure you want to install the plugin.
5. Click Yes. WordPress will automatically complete the installation.

Important

It’s possible at this stage that you’ll be taken to a page requesting FTP details of your web server. This happens if you haven't installed a plugin on this particular installation of WordPress. If so, fill in your details to complete the installation.

6. Finally, select Install WooCommerce Pages to get started.

### Manual installation

Manual installation involves downloading the plugin and uploading it to your web server via your favorite FTP application.

1. Download the plugin to your computer.
2. Unzip the file.
3. Upload the unzipped plugin folder to your WordPress installation’s wp-content/plugins directory, using an FTP program or your hosting cPanel.
4. Activate the plugin from the Plugins menu within the WordPress admin.
5. After you’ve installed and activated the plugin, select Install WooCommerce Pages to get started.

## Add a Header Image to a Product Novice Novice tutorials require no prior knowledge of any specific web programming language.

In this theme we've built a couple of options that let you change the header image for your products and product categories.

By using the header image options you can:

- Set a global default image for all your products - this is done from the Theme Settings page, and the image will be used for all your products if you didn't set one for a specific post.
- Set a default image for a product category - lets you set a header image for a specific category.
- Set an image for a specific product post - the product will have this image as the header image. This will overwrite the image set in the Theme Settings.

### Set a global default image for all your Products

1. Go to Appearance > Theme Settings in the main menu
2. On the Theme Settings page go to Posts > Products tab and under the Single Products Header section you'll find the option to upload an image that will be displayed in the header of all your product posts.

Information

There are more options here like header height, overlay color and more. These options are explained and addressed in this article.

### Set a default image for a product category

1. Go to Products > Categories in the main menu
2. Click on the category you want to edit and find the Header Image option. The image uploaded here will be used in the header of this product category only.

### Set an image for a specific product

1. Go to Products > Products in the main menu
2. Click on the product you want to edit and find the Header Image option in the sidebar. The image uploaded here will be used in the header of this specific product and will overwrite the image set in Theme Settings.

## Available Widgets Novice Novice tutorials require no prior knowledge of any specific web programming language.

Widgets add content and features to your Sidebars. In order to access the widgets page go to Appearance > Widgets. The Widgets area on the left hand side is composed of 2 sections:

- Available Widgets - all the widgets you can use in your sidebars.

Some of the available widgets have a -TF in the name. These widgets are custom made by us and TF stands for ThemeFuse. The rest are standard default widgets that come with WordPress.

- Inactive Widgets - drag widgets here to remove them from the sidebar but keep their settings.

Information

Learn how to add widgets to your sidebars from this article.

## How to Add a Sidebar to a Page or Blog Post Novice Novice tutorials require no prior knowledge of any specific web programming language.

This theme comes with a special built in sidebar module that will let you add different sidebars to different pages or disable the sidebar all together for certain posts or pages. Follow these steps in order to add a new sidebar to a page or blog post:

1. Go to Appearance > Widgets and find the sidebar manager on the lower right hand side of the page.

2. Lets add a new sidebar to a specific blog post. In order to do that, select the For Specific Pages tab.
3. Select Blog Post from the list and type to search the blog post you want to set a new sidebar for. You can add multiple posts if you want.

4. Select the position of your sidebar.

5. Create a new sidebar (or select an existing one from the list).

6. Press the Add Sidebar button in order to create your new sidebar.

7. Add widgets in your newly created sidebar by dragging & dropping the widget in the sidebar placeholder

8. Done. No need to save, this page automatically saves it self as you go along.

Important

You can't add sidebars to pages created with the visual builder using the Sidebar Manager. In order to add a sidebar to a page created with the visual builder use the Widget Area shortcode.

## Building Custom Menus Novice Novice tutorials require no prior knowledge of any specific web programming language.

Go to the Appearance > Menus in the sidebar in order to load the Menu Editor page. From this page you can control anything related to your website menus.

### Create a new menu

1. Click the create a new menu link at the top of the page.

2. Enter a name for your new menu in the Menu Name box.
3. Click the Save Menu button.

### Adding items to a menu

Once a menu is created, you can add items into it. On the left column you can find different custom links, pages or categories that can be added to your menu.

1. Select the Pages tab.
2. Press the View All link to bring up the pages published on your website.
3. Select the Pages you want to add by selecting the checkbox next to each Page title.

4. Click the Add to Menu button to add your selection(s) to the menu that you've just created.
5. Click the Save Menu button on the right hand side once you have added all the menu items you want.

### Deleting a menu item

1. Select the menu item that you want to delete from the menu editor screen.
2. Press on the arrow icon in the top right-hand corner of the menu item/box to expand it.
3. Click on the Remove link. The menu item/box will be immediately deleted.

4. Click the Save Menu button on the right hand side to save your changes.

### Customizing menu items

Each Menu Item includes a configuration panel. Click the small gray arrow on the right side of the item title to open it. You may temper with different options depending on the item menu:

- The Navigation Label - what your readers will see when visiting your website.
- The Title Attribute - this text will be shown when the user’s mouse hovers the menu item.
- Description (HTML) - this option is not supported by the current theme.
- CSS Classes - lets you further style a menu item using CSS. By default this option is not visible, you need to enable it from Screen Options panel on the top.

Information

This theme comes with a ready to use CSS class: menu-separator. Use this class if you want an item to act as a menu separator. What this class does is strips down all the css related to a menu item: link, hover color, etc.

Back-end

Front-end

- Icon - lets you add an icon to your menu item.
- Move - use this option to change the item's position in the menu.

Once you have finished, press the Save Menu button to save your changes.

## Adding a Menu to Your Website Novice Novice tutorials require no prior knowledge of any specific web programming language.

The following steps will allow you to successfully add a menu to your website:

1. Go to Appearance > Menus
2. Click on the Manage Locations tab on the top of the page.

2. On the Theme Locations tab you'll find a list of theme locations for which you can assign a menu. In this case you can set a menu for the Top Primary Menu (Header) and Footer.

Keep in mind that for the Footer Menu only the top level items will be displayed.

3. Once you have assigned the menus you want, click the Save Changes button.

Keep in mind

The Theme Locations list might differ depending on other options set in the theme. A different header type for example.

## How to Create a Header Mega Menu Novice Novice tutorials require no prior knowledge of any specific web programming language.

The Mega Menu is a user-friendly, highly customizable drop down menu and it looks something like this in our theme:

You can create one in the same way you create a regular menu and there are a couple of steps you should follow:

1. Go to Appearance > Menus
2. Enable a top level menu item to be used as a Mega Menu

3. Add columns in your mega menu by adding lvl 2 items.

Important

All the lvl 2 items in a mega menu are columns. These are usually used to create the structure thus having the Hide option enabled for the title.

4. Add text or links in the different columns by adding lvl 3 items.

5. When you are done, hit the Save Menu button in order to save your changes.

## How to Create a Split Menu for Header Type 2 Novice Novice tutorials require no prior knowledge of any specific web programming language.

When you select to use the Header Type 2 as your website's header (from Appearance > Theme Settings > Header) you will expect to see something like this on the front end:

But instead your header will look like this:

That happens because the Top Secondary Menu option from Menus is not set yet.

Tip

Think of it like 2 separate menus, one on the left of the logo (the Top Primary Menu) and one one the right (the Top Secondary Menu).

Follow these steps in order to set your Top Secondary Menu:

1. Go to Appearance > Menus.
2. Click on the Manage Locations tab on the top of the page.
3. Assign a menu as the Top Secondary Menu.

Tip

What you'll want to do is create 2 different new menus (maybe name them Left and Right) with fewer links so that they'll fit nicely on the left and right side of your logo.

4. Click the Save Changes button.

## Installing Plugins Novice Novice tutorials require no prior knowledge of any specific web programming language.

WordPress Plugins have the function to improve or add new features to your website. They include php scripts that develop the functionality of WordPress. Usually WordPress Plugins are optional, however there are few plugins that were built into this theme and are required in order for your theme to work as you see on our live preview:

- Unyson Framework - the back bone of your WordPress theme. Without it you will not be able to use most of the features this theme comes with like visual page builder, SEO settings, analytics and more.
- WooCommerce - brings shopping functionality to the table (one of the most popular WordPress eCommerce plugins).
- Revolution Slider - a premium plugin that comes free with this theme (usually $19). A very powerful and popular Slider Module.
- Layer Slider - a premium plugin that comes free with this theme (usually $18). Used to build some of the sliders from the theme.

Important

If you choose to install one of our demos all the plugins will be installed automatically. If you choose to start from scratch and not install one of our demos, you'll need to install all the plugins your self. The Unyson framework is a must in order for your theme to work as intended.

Here is a generic video that will help you understand how to install, activate and delete a plugin:

You can install plugins in one of two ways:

### Automatic Installation

1. Go to the Plugins menu. Here you'll find a list with all your Installed Plugins.

2. Click the Add New button from the top to go to the Add Plugins page.

3. Use the Search to find the plugin you want to install and click the Install Now button.

4. After the installation is done click the Activate Plugin button.

### Manual Installation

1. Download the WordPress plugin that you want from WordPress.org.

2. On the Add New page click the Upload Plugin button on the top.

3. Upload your plugin.

4. Go to Plugins > Installed Plugins and activate your newly uploaded Plugin by clicking the Activate Plugin button.

## Unyson Novice Novice tutorials require no prior knowledge of any specific web programming language.

The Unyson framework plugin is the back bone of this WordPress theme. Without it you will not be able to use most of the features this theme comes with like visual page builder, SEO settings, analytics and more.

An easy way to see if Unyson is activated for your theme is to notice the Unyson entry in the sidebar:

Information

The installation of Unyson is part of the initial theme installation process so there is no reason why it should not appear in the sidebar. If for some reason it doesn't, here is a tutorial on how you can install and activate plugins.

On the Unyson page you'll see a list of extensions separated in two sections:

- Active Extensions - different extensions that are currently active and used by your theme like Analytics, Sliders, SEO, Page Builder and more.

Some extensions have specific settings that can be accessed by pressing the Settings link

- Available Extensions - extensions not yet downloaded from our servers. These extensions are not used by the theme.

## Analytics Extension Settings Novice Novice tutorials require no prior knowledge of any specific web programming language.

The Analytics Extension enables the possibility to add the Google Analytics tracking code that will let you get all the analytics about visitors, page views and more.

Here is how you can set the Google analytics tracking code:

1. Go to Unyson, locate the Analytics extension in the list and click the Settings link.

2. Login into your Google Analytics account and locate the analytics code of your website.

3. Copy/Paste your analytics code in the Unyson extension

4. Click the Save button in order to save your changes.

Keep in mind

Wait up to 24 hours for the analytics data to start showing in your Google Analytics account.

## SEO Extension Settings Intermediate Intermediate tutorials require familiarity with basic web design concepts, as well as basic knowledge of HTML, CSS and JavaScript.

The SEO Extension enables you to have a fully optimized WordPress website by adding optimized meta titles, keywords and descriptions to your pages.

The SEO settings page has all the options divided in 3 main tabs:

1. General - lets you control general settings about SEO, like the use of meta keywords and search engines webmaster verification codes.

Reference

More about Google Webmaster verification codes can be found in the Google Webmaster's docs.

2. Sitemap - helps you generate a sitemap that you'll submit to search engine web crawlers like Googlebot. This file tells Google and other search engines about the organization of your site content and helps web crawlers to crawl your website more intelligently.

Reference

More about sitemaps can be found in the Google Webmaster's docs.

3. Titles & Meta - lets you set different options and variables on how your titles and meta is generated for for all your pages.

## Page Builder Extension Settings Novice Novice tutorials require no prior knowledge of any specific web programming language.

The Page Builder Extension lets you easily build countless pages with the help of the drag and drop visual page builder that comes with a lot of already created shortcodes.

Use the settings page in order to activate the page builder for different modules of your website:

## General Settings Novice Novice tutorials require no prior knowledge of any specific web programming language.

The General Settings page controls some of the most basic configuration settings for your site: your site's title and location, who may register an account at your site, and how dates and times are calculated and displayed.

- Site Title - lets you enter the name of your site (or blog).
- Tagline - your sites's slogan, or short phrase, or sentence, used to convey the essence of the site and is often funny or eye-catching.
- WordPress Address (URL) - the full URL of the directory containing your WordPress core application files (e.g., wp-config.php, wp-admin, wp-content, and wp-includes). For example, if you installed WordPress into a directory called "blog", then the WordPress address would be http://example.net/blog (where example.net is your domain). If you installed WordPress into your web root, this address will be the root URL http://example.net.
- Site Address (URL) - the address you want people to type in their browser to reach your WordPress site. This is the directory where WordPress's main index.php file is installed. The Site address (URL) is identical to the WordPress address (URL) (above) unless you are giving WordPress its own directory.
- E-mail Address - the e-mail address to which you want WordPress to send messages regarding the administration and maintenance of your WordPress site. For example, if you allow new users to register as a member of your site (see Membership below), then a notification will be sent through e-mail to this address.
- Membership - check this checkbox if you want anyone to be able to register an account on your site.

- New User Default Role - this pull-down box allows you to select the default Role that is assigned to new users. More about users and available roles can be found in this article.

- Timezone - lets you select your timezone, choose a city that is in the same timezone as you are.

- Date Format - the format in which to display dates on your site.
- Time Format - the format in which to display times on your site.
- Week Starts On - lets you select your preferred start date for WordPress calendars from the drop-down box, Monday being the default setting.
- Site Language - the WordPress dashboard language.

## Using permalinks Novice Novice tutorials require no prior knowledge of any specific web programming language.

Permalinks are the permanent URLs of your blog posts or pages on your WordPress site. By default, WordPress URLs structure looks like this: http://www.yourwebsite.com/?p=54. Here is a generic video explaining permalinks:

1. Go to Settings > Permalinks

2. Select one of the available formats:
   - Default: http://www.yourwebsite.com/?p=123
   - Day and name: http://www.yourwebsite.com/2008/03/31/sample-post/
   - Month and name: http://www.yourwebsite.com/2008/03/sample-post/
   - Numeric: http://www.yourwebsite.com/archives/123
   - Post name: http://www.yourwebsite.com/sample-post
   - Custom structure in the box enter the custom structure you want to use. For example: /archives/%year%/%monthnum%/%day%/%postname%/
3. In the Optional section you'll find 2 prefixes used in URLs for category and tag archives:
   - Category base box enter the custom prefix for your category URLs.
   - Tags base write the custom prefix for your tag URLs
4. Don't forget to click the Save Changes button
   - After, you should receive two messages regarding your .htaccess
   - In case your .htaccess is writeable you will receive this message: Permalink structure updated
   - In case you .htaccess is not writeable you will get this message: You should update your .htaccess

## How to Create a Backup Schedule Novice Novice tutorials require no prior knowledge of any specific web programming language.

Creating a backup schedule is a must and you should take 1 minute to create one as soon as possible. This will potentially save a lot of headache and time along the road. Create a back up schedule by following these steps:

1. Go to Tools > Backup.

2. Cilck the Create Backup Schedule button to bring up the options pop-up.

You can set up 2 different backup schedules:

- Full Backup - creates a full back of all your files including the data base.
- Data Base Backup - creates a backup for your data base only.

Keep in mind

Because a website doesn't change that much from day to day or even from week to week it is advisable to set up a longer period for the full back up and a shorter one for the data base backup. For example you can set a monthly full backup and a weekly data base backup, but this largely depends on how often your website changes. If you have a news website for example and you post articles every day, you'd want a shorter backup interval.

Each backup type comes with the same options:

- Backup Interval - where you select how often do you want to backup your website. The options are: Daily, Weekly and Monthly.

- Backup Age Limit - lets you set the age limit of backups in days. After the days pass the backup will be deleted from the server.

Tip 1

Keep the age limit for you backups higher then the backup interval in order to give the system time to make another backup before the old one is deleted. In this way you ensure you have a back up in case of a crash. More over make a habit of downloading a full backup on your computer (once a month).

Tip 2

Make a habit of downloading a full backup on your computer from time to time. If something happens with your server it's possible to lose the backups as well (because they are stored locally on your server).

## How to Create a Full Backup and Restore a Previous One Novice Novice tutorials require no prior knowledge of any specific web programming language.

You can create or restore a backup of your website at any time by following the next steps:

1. Go to Tools > Backup.

2. Cilck the Create Full Backup Now button in order to create a full back on the spot. This might take a minute or two, please be patient.

All the backups made are listed down in the page.

3. Restore one of the backups at any given time, by selecting the one you want and clicking the Restore Backup button

## User Roles & Profiles Novice Novice tutorials require no prior knowledge of any specific web programming language.

WordPress uses a concept of Roles, designed to give the site owner the ability to control what users can and cannot do within the site. A site owner can manage the user access to such tasks as writing and editing posts, creating Pages, defining links, creating categories, moderating comments, managing plugins, managing themes, and managing other users, by assigning a specific role to each of the users.

### User roles

There are five user roles:

- Administrator - has complete control over all administrative options and features.
- Editor - has access to all posts and pages and can review posts submitted by contributors.
- Author - can write and publish their own posts.
- Contributor - has no right to publish posts but can write and edit their own blog posts.
- Subscriber/Follower - can read and comment on the blog posts and pages.

### Changing user role

Only the Administrator of the blog has the right to change other users roles.

1. Go to the Users > All Users.
2. Select the user you want and select the desired role from the Change role to… dropdown.

3. Click the Change button.

### Removing users

Only the Administrator of the blog can remove users from your website.

1. Go to the Users > All Users.
2. Hover the username you want to remove, and click the Delete link.

### User profile

1. Go to the Users > Your Profile.

2. Your Profile options are separated in 4 sections as follows:

- Personal Options - different options regarding your experience using WordPress.
- Name - lets you change the name and nickname and how your name is displayed publicly.
- Contact Info - let you set an email and website.
- About Yourself - use the options in this section in order to add your bio and change your password. Note that the bio is shown publicly.

Didn't find what you are looking for? submit a ticket Go to my Activities