Qi Theme

• created: 04/11/2022
• latest update: 04/11/2022
• by: Qode Themes
• email: gethelp@qodeinteractive.com

Qi Theme

Hi, and welcome to the Qi Theme User Guide. In this User Guide we'll cover all the options and features that you get with the Qi Theme, the first free theme developed by Qode Interactive.

Qode Essential Addons plugin

The User Guide covers all the information needed to use the Qode Essential Addons plugin with your copy of the Qi Theme to build an amazing website. If you need any additional assistance while using our plugin, you can always submit a topic to the support forum at https://wordpress.org/support/plugin/qode-essential-addons/ and our support team will be glad to help you out. You can also send us an email at gethelp@qodeinteractive.com

You can navigate through different sections of the User Guide by clicking on the links in the menu to the left of your screen. You will also notice that we have highlighted certain parts of the text throughout the User Guide, such as important pieces of information and useful tips.

The Qi Theme is powered by the Qode Essential Addons - a completely stand-alone plugin created by Qode Interactive. This plugin is used with all themes developed by Qode Interactive as their vital part. 

The plugin enhances the themes by adding the Portfolio custom post type, the Portfolio List, Blog List, Restaurant Menu List shortcodes as well as numerous other custom options and widgets. In addition to this, the plugin adds the administration panel when used with themes created by Qode. 

Currently, the Qode Essential Addons supports using both Elementor and WPBakery page builder plugins. There are plans to expand the list of compatible page builder plugins in the future.

Although the Qode Essential Addons can be used with any WordPress theme, users will get the most of it when using the plugin in tandem with one of Qode Interactive themes. In the event that the theme you are using was not developed by Qode, you will still enhance your theme with Portfolio List, Blog List and Product List shorcodes, widgets, and certain other features, however the administration panel that is added with Qode Essential Addons as well as all the custom page and global options will not be available. 

Installing Qode Essential Addons

First off, here's a list of minimum requirements as well as recommended hosting parameters for running Qode Essential Addons plugin: 

Minimum Requirements

• WordPress 5.0 or greater
• PHP version 5.6 or greater
• MySQL version 5.0 or greater

Recommended Hosting Parameters

• PHP version 7.0 or greater
• MySQL version 5.6 or greater
• WordPress Memory limit of 128 MB or greater

There are two ways you can go about installing the Qode Essential Addons plugin: 

Installing From Your WordPress Dashboard

1. ​Navigate to your WordPress Dashboard -> Plugins -> Add New
2. Search for Qode Essential Addons
3. Install and Activate Qode Essential Addons from your Plugins page.

Installing Directly From wordpress.org

1. Locate and download Qode Essential Addons on wordpress.org
2. Upload the qode-essential-addons directory to your ‘/wp-content/plugins/’ directory, using your preferred method (ftp, sftp, scp, etc…)
3. Install and Activate Qode Essential Addons from your Plugins page.

Qi Addons for Elementor plugin

Another vital part of the Qi Theme is the Qi Addons for Elementor plugin, the largest free collection of addons for Elementor. This plugin enables you to use a huge selection of custom addons and options for Elementor, and represents another essential part of the Qi Theme. 

You can view a detailed, straightforward user guide dedicated to the Qi Addons for Elementor plugin and all its elements and options here. 

Once you've installed the Qi Theme, you can start building your site. In this section of the User Guide we will explain how you can set up your header, upload your logo, create your menu, set up your footer area, customize the general look and feel of your website, and create your first pages.

Setting Up the Header

One of the first things you might want to do after you have installed and activated your copy of the Qi Theme is to set up your header area. The header contains the logo, menu, search bar, side area icon, and other optional widgets.

To set up your header, navigate to Qode Essential Addons > Header from your WordPress admin panel. The settings you define here will be the default settings for all pages on your site. If you need any help in further understanding any of these options, please refer to the Qode Essential Addons Options section of this User Guide.

Some options, such as the background color or content alignment, can be overridden on a page to page basis from a specific page’s backend. For more information on how local page settings work, please refer to the Pages section of this User Guide.

Uploading Your Logo

To add your logo to the header, navigate to Qode Essential Addons > Logo from your WordPress admin panel and click the upload button next to the Logo field. After you upload your image and save the options, you should have a visible logo in your header area. For more information regarding modifying your logo, please refer to the Qode Essential Addons Options section of this User Guide.

Menu Creation

To create a new menu, navigate to Appearance > Menus from your WordPress admin panel. Enter a name for your new menu and then click Create Menu.

Every page that you have created will be listed in the section on the left named Pages. Simply check the pages that you would like to add to your menu and click the Add to Menu button. Once you have added pages to your menu, you can click and drag the menu items to rearrange them, or nest them one underneath the other.

In the Menu Settings section (which is located underneath the Menu Structure section), check the checkbox next to Main Navigation and click Save Menu. This will activate the menu you have just created, and you should now see a functional menu in your header.

Footer

To set up your footer, navigate to Qode Essential Addons > Footer from your WordPress admin panel.

The settings you define here will be the default settings for all pages on your site. If you would like both the top and bottom footer areas to be displayed, make sure that both the Enable Footer Top Area and Enable Footer Bottom Area options are enabled. If you need any help understanding any of these options, please refer to the Qode Essential Addons Options section of this user guide.

Content is added to your footer via widgets. Navigate to Appearance > Widgets from your WordPress admin panel. On the right side of your page you will see the widget areas for your footer. The widget areas for the top footer are named Footer Top Area - Column 1, Footer Top Area - Column 2, Footer Top Area - Column 3, and Footer Top Area - Column 4, and the bottom footer areas are labeled as Footer Bottom Area - Column 1 and Footer Bottom Area - Column 2. On the left side of the Widgets page you will see the available widgets. To add a widget to one of the Footer widget areas, simply drag the desired widget to one of the Footer Column widget areas on the right.

General Look and Feel

Now let’s set up the general look and feel of your site. If you have imported a demo site and would like to keep its general look and feel, then you do not need to do anything else. Otherwise, you can go to Qode Essential Addons > Typography and in the General Typography section set a default font family and styles for your site. Next, you can navigate to Qode Essential Addons > General, and use the options found in this section to further adjust the look and feel of your website. 

Now that you have set up the basic elements for your site, you’re ready to start building your pages.

In this section of the User Guide we will discuss all the custom options and features for creating and editing pages that become available once you've installed the Qode Essential Addons plugin. 

Let’s go over the custom fields available for pages.

Page Settings

• Page Background Color - Set a color for the page background. 
• Page Background Image - Set a background image for the page. 
• Page Background Repeat - Set a background pattern for the page. 
• Page Background  Image Size - Choose whether you wish to resize the background image to cover the entire background (even if this means streaching or cutting the image), or if you wish to resize the background image to display it in its full size. 
• Page Background Image Attachment - Choose whether the background image will be fixed or can be scrolled. 
• Page Content Padding - Set the padding values for the content on this page. Please input the padding values in the format: top right bottom left (e.g. 10px 5px 10px 5px). 
• Page Content Padding Mobile - Set the padding values for the content on this page on mobile screens (1024px and below). Please input the padding values in the format: top right bottom left (e.g. 10px 5px 10px 5px).
• Page Wrapper Padding - Input values that will define the page wrapper padding. Please input the padding values in the format: top right bottom left (e.g. 10px 5px 10px 5px).
• Page Wrapper Padding Mobile - Input values that will define the page wrapper padding on smaller screens. Please input the padding values in the format: top right bottom left (e.g. 10px 5px 10px 5px).
• Boxed Layout - Set this option to "Yes" if you wish to enable the boxed layout. If you choose a boxed layout for this page, the content will be fitted in a centrally positioned grid.
  • Boxed Background Color - Set a background color for outside the boxed content.
  • Boxed Background Pattern - Set an image you wish to display outside the boxed content. 
  • Boxed Background Pattern Behavior - Choose whether the background image will be fixed or can be scrolled. 
• Initial Width of Content - Set a width for the grid on this page.
• Always Put Content Behind Header - Set this option to "Yes" if you would like the header to cover the top of the page content.

Header Settings

• Header Layouts - Choose a header type to use on this page. Depending on the header type you choose, different options will be available.
• Show Header Widget Areas - Set this option to "Yes" if you wish to display the header widget areas on this page.
  • Choose Custom Header Widget Area - Select a custom header widget area you wish to display. 

Standard Header

• Content in Grid - Set this option to "Yes" if you wish to set the standard header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the standard header on your pages. 
• Header Background Color - Set a background color for the standard header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Menu Position - Choose where you wish to position the menu within the standard header. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding. 

Centered Header

• Content in Grid - Set this option to "Yes" if you wish to set the centered header content in grid. 
• Header Height - Input a value for the header height. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding. 

Minimal Header

• Content in Grid - Set this option to "Yes" if you wish to set the minimal header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the minimal header on your pages. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Menu Position - Choose where you wish to position the menu within the minimal header. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding.  

Vertical Header

• Header Background Color - Set a background color for the vertical header. 
• Header Background Image - Set a background image you wish to display in the vertical header. 
• Header Background Image Repeat - Choose a repeat style for the background image. 
• Header Background Image Size - Pick a size for the background image. 
• Header Background Image Position - Set a position for the background image inside the vertical header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Input a value for the header border width. 
• Header Border Style - Choose one of three header border styles. 

Boxed Header

• Header Top/Bottom Margin - Input values for top and bottom header margins. 
• Header Side Margin - Input values for header side margin. 
• Content in Grid - Set this option to "Yes" if you wish to set the boxed header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the boxed header on your pages. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Menu Position - Choose where you wish to position the menu within the boxed header. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 

Divided Header

• Content in Grid - Set this option to "Yes" if you wish to set the divided header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the divided header on your pages. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding. 
• Header Widgets Next to Menu - Set this option to "Yes" if you wish to display header widgets adjecent to the menu. 

Expanding Header

• Content in Grid - Set this option to "Yes" if you wish to set the expanding header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the expanding header on your pages. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding. 
• Borders Between - Set this option to "Yes" if you wish to display borders between items. 
• Expanding Header Menu Open Icon SVG Path - Input an SVG path for the expanding header menu opener here. 

Vertical Expanding Header

• Header Background Color - Set a background color for the vertical expanding header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Input a value for the header border width. 
• Header Border Style - Choose one of three header border styles. 
• Header Navigation Background Color - Set a background color for the header navigation. 
• Header Navigation Width - Input a value for the header navigation width. 
• Vertical Expanding Header Menu Open Icon SVG Path - Input an SVG path for the vertical expanding header menu opener here. 

Top Area

• Enable Top Area - Set this option to "Yes" if you wish to display the top area on this page.
  • Top Area Options - Set the background color, top area height, and top area side padding for the top area on this page. 

Logo Settings

Header Logo Options

• Logo Height - Set the logo height for this page. 
• Logo - Main - Upload a default logo image to display in the header on this page.

Sidebar Settings

• Sidebar Layout - Choose the desired layout for your sidebar. You can also disable the sidebar here by choosing "No Sidebar".

Title Settings

• Enable Page Title - Use this option to control whether you would like to display the title area on this page or not. 

Title Area

• Title Layout - Chose a type of title area to use.
• Page Title in Grid - Set this option to "Yes" if you would like to set the title area content in grid.
• Height - Set a height for the title area.
• Height on Smaller Screens - Set a height for the title area on smaller screens when the mobile header is displayed.
• Background Color - Set a background color for the title area
• Background Image - Chose a background image for the title area.
• Background Image Behavior - Choose how you would like the background image to behave. 
• Title Color - Choose a color for the title.
• Bottom Border Color - Set a color for the bottom border color. 
• Bottom Border Width - Adjust the bottom border width. 
• Bottom Border Style - Pick one of 3 predefined styles for the title area bottom border. 
• Title Color - Set a color for the title text. 
• Text Alignment - Choose a text alignment style for your title area. 
• Text Alignment - Set an alignment for the title area text. 
• Vertical Text Alignment - Define the vertical alignment setting for the title area content on this page. You can choose to vertically align the title area content from the bottom of the header, or from the top of your browser window. 
• Breadcrumbs Tag - Set a heading tag for the breadcrumbs text. This option is only available if you have selected the breadcrumbs title area layout. 
• Standard Title - This is where you can input a subtitle, pick a subtitle tag, subtitle color, and adjust the subtitle top margin. These options are available only if you selected the standard title area layout. 

In this section of the User Guide we will discuss all the available options for each post, setting up pages to display blog listings, as well as how to change the date format for your posts.

Let’s go over the available custom fields for blog posts.

Post Formats

• Gallery Images - Add images you wish to display for the post if you selected the Gallery post format from the upper right. 
• Video URL - Add a URL for the video if you selected the Video post format from the upper right. 
• Audio URL - Add a URL for the audio if you selected the Audio post format from the upper right. 
• Link URL - Add a URL for the link if you selected the Link post format from the upper right. 
• Link Text - Add the link text if you selected the Link post format from the upper right. 
• Quote Text - Add a text for the quote if you selected the Quote post format from the upper right. 
• Quote Author - Add the quote author name if you selected the Quote post format from the upper right. 

Post Settings

• Enable Featured Image - Set this option to "Yes" if you wish to enable displaying featured image for this post. You can add the image on the right side of the screen from the Featured Image dropdown. 

List Settings

• Post List Image - Add an image you wish to display in blog lists for this posts; this image will be shown instead of the post's Featured Image. 

Page Settings

• Page Background Color - Set a color for the page background. 
• Page Background Image - Set a background image for the page. 
• Page Background Repeat - Set a background pattern for the page. 
• Page Background  Image Size - Choose whether you wish to resize the background image to cover the entire background (even if this means streaching or cutting the image), or if you wish to resize the background image to display it in its full size. 
• Page Background Image Attachment - Choose whether the background image will be fixed or can be scrolled. 
• Page Content Padding - Set the padding values for the content on this page. Please input the padding values in the format: top right bottom left (e.g. 10px 5px 10px 5px). 
• Page Content Padding Mobile - Set the padding values for the content on this page on mobile screens (1024px and below). Please input the padding values in the format: top right bottom left (e.g. 10px 5px 10px 5px).
• Page Wrapper Padding - Input values that will define the page wrapper padding. Please input the padding values in the format: top right bottom left (e.g. 10px 5px 10px 5px).
• Page Wrapper Padding Mobile - Input values that will define the page wrapper padding on smaller screens. Please input the padding values in the format: top right bottom left (e.g. 10px 5px 10px 5px).
• Boxed Layout - Set this option to "Yes" if you wish to enable the boxed layout. If you choose a boxed layout for this page, the content will be fitted in a centrally positioned grid.
  • Boxed Background Color - Set a background color for outside the boxed content.
  • Boxed Background Pattern - Set an image you wish to display outside the boxed content. 
  • Boxed Background Pattern Behavior - Choose whether the background image will be fixed or can be scrolled. 
  • Boxed Background Pattern Size - Choose a size for the boxed background pattern. 
• Initial Width of Content - Set a width for the grid on this page.
• Always Put Content Behind Header - Set this option to "Yes" if you would like the header to cover the top of the page content.

Header Settings

• Header Layout - Choose a header type to use on this page. Depending on the header type you choose, different options will be available.
• Show Header Widget Areas - Set this option to "Yes" if you wish to display the header widget areas on this page.
  • Choose Custom Header Widget Area - Select a custom header widget area you wish to display. 

Standard Header

• Content in Grid - Set this option to "Yes" if you wish to set the standard header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the standard header on your pages. 
• Header Background Color - Set a background color for the standard header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Menu Position - Choose where you wish to position the menu within the standard header. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding. 

Centered Header

• Content in Grid - Set this option to "Yes" if you wish to set the centered header content in grid. 
• Header Height - Input a value for the header height. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding. 

Minimal Header

• Content in Grid - Set this option to "Yes" if you wish to set the minimal header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the minimal header on your pages. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Menu Position - Choose where you wish to position the menu within the minimal header. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding.  

Vertical Header

• Header Background Color - Set a background color for the vertical header. 
• Header Background Image - Set a background image you wish to display in the vertical header. 
• Header Background Image Repeat - Choose a repeat style for the background image. 
• Header Background Image Size - Pick a size for the background image. 
• Header Background Image Position - Set a position for the background image inside the vertical header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Input a value for the header border width. 
• Header Border Style - Choose one of three header border styles. 

Boxed Header

• Header Top/Bottom Margin - Input values for top and bottom header margins. 
• Header Side Margin - Input values for header side margin. 
• Content in Grid - Set this option to "Yes" if you wish to set the boxed header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the boxed header on your pages. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Menu Position - Choose where you wish to position the menu within the boxed header. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 

Divided Header

• Content in Grid - Set this option to "Yes" if you wish to set the divided header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the divided header on your pages. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding. 
• Header Widgets Next to Menu - Set this option to "Yes" if you wish to display header widgets adjecent to the menu. 

Expanding Header

• Content in Grid - Set this option to "Yes" if you wish to set the expanding header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the expanding header on your pages. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding. 
• Borders Between - Set this option to "Yes" if you wish to display borders between items. 
• Expanding Header Menu Open Icon SVG Path - Input an SVG path for the expanding header menu opener here. 

Vertical Expanding Header

• Header Background Color - Set a background color for the vertical expanding header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Input a value for the header border width. 
• Header Border Style - Choose one of three header border styles. 
• Header Navigation Background Color - Set a background color for the header navigation. 
• Header Navigation Width - Input a value for the header navigation width. 
• Vertical Expanding Header Menu Open Icon SVG Path - Input an SVG path for the vertical expanding header menu opener here. 

Top Area

• Enable Top Area - Set this option to "Yes" if you wish to display the top area on this page.
  • Top Area Options - Set the background color, top area height, and top area side padding for the top area on this page. 

Logo Settings

Header Logo Options

• Logo Height - Set the logo height for this page. 
• Logo - Main - Upload a default logo image to display in the header on this page.

Sidebar Settings

• Sidebar Layout - Choose the desired layout for your sidebar. You can also disable the sidebar here by choosing "No Sidebar".

Title Settings

• Enable Page Title - Use this option to control whether you would like to display the title area on this page or not. 

Title Area

• Title Layout - Chose a type of title area to use.
• Page Title in Grid - Set this option to "Yes" if you would like to set the title area content in grid.
• Height - Set a height for the title area.
• Height on Smaller Screens - Set a height for the title area on smaller screens when the mobile header is displayed.
• Background Color - Set a background color for the title area
• Background Image - Chose a background image for the title area.
• Background Image Behavior - Choose how you would like the background image to behave. 
• Title Color - Choose a color for the title.
• Bottom Border Color - Set a color for the bottom border color. 
• Bottom Border Width - Adjust the bottom border width. 
• Bottom Border Style - Pick one of 3 predefined styles for the title area bottom border. 
• Title Color - Set a color for the title text. 
• Text Alignment - Choose a text alignment style for your title area. 
• Text Alignment - Set an alignment for the title area text. 
• Vertical Text Alignment - Define the vertical alignment setting for the title area content on this page. You can choose to vertically align the title area content from the bottom of the header, or from the top of your browser window. 
• Breadcrumbs Tag - Set a heading tag for the breadcrumbs text. This option is only available if you have selected the breadcrumbs title area layout. 
• Standard Title - This is where you can input a subtitle, pick a subtitle tag, subtitle color, and adjust the subtitle top margin. These options are available only if you selected the standard title area layout. 

Blog Lists

After you have created enough posts, you also need to create a blog list where all of these posts will be displayed. To create a blog list, you first need to create a new page on which your blog list will be displayed, and in the page's backend find the Blog List shortcode. For a more detailed look into the Blog List element, refer to the Custom Shortcodes section of this guide. 

Date Format

If you wish to change the date format on blog posts, navigate to Settings > General > Date Format from your WordPress admin, and select your format of choice.

In this section of the User Guide we will discuss the creation of portfolio items, as well as how to add portfolio lists to your website pages.

When used with Qode Interactive themes, Qode Essential addon expands the theme by adding the Portfolio custom post type for creating and displaying portfolio items on your pages. 

Portfolio Items

To create a new portfolio item: 

1. Navigate to ThemeName Portfolio > Add new from your WordPress admin panel.

   

2. Enter a title for your portfolio item in the text field near the top of the page.
3. On the right side of the screen you will see a section named Portfolio Categories. Here you can select the categories that you would like to add this portfolio item to. If you would like to create a new category, click on the + Add New Category link. A text field will appear in which you can enter a category name, and then click Add New Category.
4. Once you have checked the categories you would like to add your post to, click the Publish button.

Beneath the Portfolio Categories section are the Portfolio Tags, Attributes, and Featured Image sections. In the Portfolio Tags section, you can enter tags for this portfolio item. In the Attributes section, you can set the order in which you would like this portfolio item to appear in portfolio lists. In the Featured Image section, you can set an image to be displayed for this item on portfolio lists.

Now that you have set up your first portfolio item, let’s go over the available custom fields for portfolio items.

Portfolio Settings

General Settings

• Single Layout -  Choose a layout for your portfolio single project. You can choose from the following portfolio types:

Gallery - Big

Gallery - Small

Images - Big

Images - Small

Slider - Big

Slider - Small

Gallery - Big - Full Width

Gallery -Small - Full Width

Images - Big - Full Width

Images - Small - Full Width

Slider - Big - Full Width

Slider - Small - Full Width

You can also choose the Custom and Custom Full Width types, if you would like to build your portfolio from scratch via shortcodes, like you would any other page.

• Set Content Order - Choose the order in which you wish to display the content. 

Media Settings

• Media Items - Here you can choose a Media Type you wish to use for each specific media item you wish to display, as well as to add the media itself. Available media types are Gallery, Image, Video and Audio. 

Gallery Layout Settings

• Number of Columns - When using the "Gallery" type of portfolio, you can choose a number of columns to display your images in.
• Space Between Items - When using the "Gallery" type of portfolio, you can set a predefined spacing between images.

Info Settings

• Set Info Item Text Position - Choose a position for the info text section.
• Info Items - Here you can add an info label, some accompanying text, an info item link, and choose whether said link would open in the same or a new browser window for each specific info item. 

• Back To Link - Choose a 'back to' page link to link from this portfolio single page. 

List Settings

• Portfolio List Image - Add an image you wish to display in portfolio lists with masonry behavior type selected. The image added here will be displayed instead of the featured image. 
• Image Dimension - Adjust image dimensions for portfolio lists with masonry behavior type selected. 
• Portfolio Item Custom Padding - Input values for custom item padding for this item when it is displayed in portfolio lists. 

Page Settings

• Page Background Color - Set a color for the page background. 
• Page Background Image - Set a background image for the page. 
• Page Background Repeat - Set a background pattern for the page. 
• Page Background  Image Size - Choose whether you wish to resize the background image to cover the entire background (even if this means streaching or cutting the image), or if you wish to resize the background image to display it in its full size. 
• Page Background Image Attachment - Choose whether the background image will be fixed or can be scrolled. 
• Page Content Padding - Set the padding values for the content on this page. Please input the padding values in the format: top right bottom left (e.g. 10px 5px 10px 5px). 
• Page Content Padding Mobile - Set the padding values for the content on this page on mobile screens (1024px and below). Please input the padding values in the format: top right bottom left (e.g. 10px 5px 10px 5px).
• Page Wrapper Padding - Input values that will define the page wrapper padding. Please input the padding values in the format: top right bottom left (e.g. 10px 5px 10px 5px).
• Page Wrapper Padding Mobile - Input values that will define the page wrapper padding on smaller screens. Please input the padding values in the format: top right bottom left (e.g. 10px 5px 10px 5px).
• Boxed Layout - Set this option to "Yes" if you wish to enable the boxed layout. If you choose a boxed layout for this page, the content will be fitted in a centrally positioned grid.
  • Boxed Background Color - Set a background color for outside the boxed content.
  • Boxed Background Pattern - Set an image you wish to display outside the boxed content. 
  • Boxed Background Pattern Behavior - Choose whether the background image will be fixed or can be scrolled. 
  • Boxed Background Pattern Size - Set a size for the boxed background pattern. 
• Initial Width of Content - Set a width for the grid on this page.
• Always Put Content Behind Header - Set this option to "Yes" if you would like the header to cover the top of the page content.

Header Settings

• Header Layouts - Choose a header type to use on this page. Depending on the header type you choose, different options will be available.
• Show Header Widget Areas - Set this option to "Yes" if you wish to display the header widget areas on this page.
  • Choose Custom Header Widget Area - Select a custom header widget area you wish to display. 

Standard Header

• Content in Grid - Set this option to "Yes" if you wish to set the standard header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the standard header on your pages. 
• Header Background Color - Set a background color for the standard header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Menu Position - Choose where you wish to position the menu within the standard header. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding. 

Centered Header

• Content in Grid - Set this option to "Yes" if you wish to set the centered header content in grid. 
• Header Height - Input a value for the header height. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding. 

Minimal Header

• Content in Grid - Set this option to "Yes" if you wish to set the minimal header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the minimal header on your pages. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Menu Position - Choose where you wish to position the menu within the minimal header. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding.  

Vertical Header

• Header Background Color - Set a background color for the vertical header. 
• Header Background Image - Set a background image you wish to display in the vertical header. 
• Header Background Image Repeat - Choose a repeat style for the background image. 
• Header Background Image Size - Pick a size for the background image. 
• Header Background Image Position - Set a position for the background image inside the vertical header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Input a value for the header border width. 
• Header Border Style - Choose one of three header border styles. 

Boxed Header

• Header Top/Bottom Margin - Input values for top and bottom header margins. 
• Header Side Margin - Input values for header side margin. 
• Content in Grid - Set this option to "Yes" if you wish to set the boxed header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the boxed header on your pages. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Menu Position - Choose where you wish to position the menu within the boxed header. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 

Divided Header

• Content in Grid - Set this option to "Yes" if you wish to set the divided header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the divided header on your pages. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding. 
• Header Widgets Next to Menu - Set this option to "Yes" if you wish to display header widgets adjecent to the menu. 

Expanding Header

• Content in Grid - Set this option to "Yes" if you wish to set the expanding header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the expanding header on your pages. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding. 
• Borders Between - Set this option to "Yes" if you wish to display borders between items. 
• Expanding Header Menu Open Icon SVG Path - Input an SVG path for the expanding header menu opener here. 

Vertical Expanding Header

• Header Background Color - Set a background color for the vertical expanding header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Input a value for the header border width. 
• Header Border Style - Choose one of three header border styles. 
• Header Navigation Background Color - Set a background color for the header navigation. 
• Header Navigation Width - Input a value for the header navigation width. 
• Vertical Expanding Header Menu Open Icon SVG Path - Input an SVG path for the vertical expanding header menu opener here. 

Top Area

• Enable Top Area - Set this option to "Yes" if you wish to display the top area on this page.
  • Top Area Options - Set the background color, top area height, and top area side padding for the top area on this page. 

Logo Settings

Header Logo Options

• Logo Height - Set the logo height for this page. 
• Logo - Main - Upload a default logo image to display in the header on this page.

Sidebar Settings

• Sidebar Layout - Choose the desired layout for your sidebar. You can also disable the sidebar here by choosing "No Sidebar".

Title Settings

• Enable Page Title - Use this option to control whether you would like to display the title area on this page or not. 

Title Area

• Title Layout - Chose a type of title area to use.
• Page Title in Grid - Set this option to "Yes" if you would like to set the title area content in grid.
• Height - Set a height for the title area.
• Height on Smaller Screens - Set a height for the title area on smaller screens when the mobile header is displayed.
• Background Color - Set a background color for the title area
• Background Image - Chose a background image for the title area.
• Background Image Behavior - Choose how you would like the background image to behave. 
• Title Color - Choose a color for the title.
• Bottom Border Color - Set a color for the bottom border color. 
• Bottom Border Width - Adjust the bottom border width. 
• Bottom Border Style - Pick one of 3 predefined styles for the title area bottom border. 
• Title Color - Set a color for the title text. 
• Text Alignment - Choose a text alignment style for your title area. 
• Text Alignment - Set an alignment for the title area text. 
• Vertical Text Alignment - Define the vertical alignment setting for the title area content on this page. You can choose to vertically align the title area content from the bottom of the header, or from the top of your browser window. 
• Breadcrumbs Tag - Set a heading tag for the breadcrumbs text. This option is only available if you have selected the breadcrumbs title area layout. 
• Standard Title - This is where you can input a subtitle, pick a subtitle tag, subtitle color, and adjust the subtitle top margin. These options are available only if you selected the standard title area layout. 

Portfolio Lists

A portfolio list displays a listing of your portfolio items, each of which can be clicked on for a detailed overview of the single portfolio item.

A portfolio list is added to pages via the Portfolio List shortcode. To add a portfolio list to a page, navigate to the backend of that page and add the Portfolio List element to the page via Elementor Page Builder (by entering the Elementor Page Builder view, and then dragging the Portfolio List element from the element selection screen). You can use one more shortcode that comes with Qode Essential Addons for displaying portfolio items - Portfolio Project Info. For a comprehensive overview of all the options provided in the Portfolio List and Portfolio Project Info elements, please see the Custom Shortcodes section of this User Guide.

This section of the User Guide provides a comprehensive overview of all the settings available in the theme's Qode Essential Addons section of your WordPress admin panel once you have installed and activated the Qode Essential Addons plugin. The settings found here are applied globally and will affect all pages on your website. However, note that many of these options can be overridden locally by applying settings on individual pages or on shortcode elements.

It's important to note that these options will be available only when using the plugin with themes developed by Qode Interactive. 

You can look up any of the available global options by typing in the keyword or a part of the option name in the search field located at the top of the screen in the Core Theme options section. 

General

• Page Background Color - Set a background color for your pages.
• Page Background Image - Upload the image for the background. 
• Page Background Repeat - Enabling this option will set the background image as a repeating pattern throughout the page, otherwise the image will appear as the cover background image. 
• Page Background Image Size - Set a size for the background image. 
• Page Background Attachment - Choose whether the background image will be fixed or can be scrolled. 
• Page Content Padding - Set the padding values for the content for your pages. Please input the padding values in the format: top right bottom left (e.g. 10px 5px 10px 5px). 
• Page Content Padding Mobile - Set the padding values for the content for your pages when viewed on smaller screens. Please input the padding values in the format: top right bottom left (e.g. 10px 5px 10px 5px). 
• Page Wrapper Padding - Input values that will define the page wrapper padding. Please input the padding values in the format: top right bottom left (e.g. 10px 5px 10px 5px).
• Page Wrapper Padding Mobile - Input values that will define the page wrapper padding on smaller screens. Please input the padding values in the format: top right bottom left (e.g. 10px 5px 10px 5px).
• Boxed Layout - Set this option to "Yes" if you wish to enable the boxed layout. If you choose a boxed layout for this page, the content will be fitted in a centrally positioned grid.
  • Boxed Background Color - Set a background color for outside the boxed content.
  • Boxed Background Pattern - Set an image you wish to display outside the boxed content. 
  • Boxed Background Pattern Behavior - Choose whether the background image will be fixed or can be scrolled. 
• Initial Width of Content - Set a width for the grid on this page.
• Enable Back to Top - Set this option to "Yes" to display a 'Back to Top' button on your website. 
• Back to Top Type - Choose between a default (SVG icon) and a textual 'Back to Top' button type. 
• Back to Top SVG Path - In the event that you selected the default 'Back to Top' button type, you can input a path for the SVG you wish to use for the button here. 
• Back to Top Text - If you selected the textual 'Back to Top' button type, you can input the text you wish to display on the button here. 
• Back to Top Styles - Here you can stylize your 'Back to Top' button. 

Logo

Header Logo Options

• Logo Height - Set the logo height for your pages. 
• Logo Padding - Input the values for the logo padding (in the top, right, bottom, left order). 
• Logo - Upload a default logo image to display in the header on your pages.

Mobile Header Logo Options

• Mobile Logo Height - Set the mobile logo height for your pages. 
• Mobile Logo Padding - Input the values for the mobile logo padding (in the top, right, bottom, left order). 
• Mobile Logo - Upload a default mobile logo image to display in the header on your pages.

Fonts

• Enable Google Fonts - Set this option to "Yes" if you wish to use Google Fonts on your website.
  • Google Font - Here you can choose which Google Font you wish to use on your site. 
  • Google Fonts Weight - Set default Google Fonts weights for your site. The more options you select, the greater potential impact on page load time gets.
  • Google Fonts Style - Choose default Google Fonts styles for your site. The more options you select, the greater potential impact on page load time gets.

Typography

• General Typography - Here you can set the typography styles for different headings, links and paragraphs. In addition to this, you can set typography styles for individual responsive stages for each heading below. 

Header

General

• Header Layout - Choose a header type to use on your pages. Depending on the header type you choose, different options will be available.

Standard Header

• Content in Grid - Set this option to "Yes" if you wish to set the standard header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the standard header on your pages. 
• Header Background Color - Set a background color for the standard header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Menu Position - Choose where you wish to position the menu within the standard header. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding. 
• Borders Between - Set this option to "Yes" if you wish to display borders between items. 

Centered Header

• Content in Grid - Set this option to "Yes" if you wish to set the centered header content in grid. 
• Header Height - Input a value for the header height. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding. 

Minimal Header

• Content in Grid - Set this option to "Yes" if you wish to set the minimal header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the minimal header on your pages. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Menu Position - Choose where you wish to position the menu within the minimal header. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding. 
• Borders Between - Set this option to "Yes" if you wish to display borders between items. 

Vertical Header

• Header Background Color - Set a background color for the vertical header. 
• Header Background Image - Set a background image you wish to display in the vertical header. 
• Header Background Image Repeat - Choose a repeat style for the background image. 
• Header Background Image Size - Pick a size for the background image. 
• Header Background Image Position - Set a position for the background image inside the vertical header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Input a value for the header border width. 
• Header Border Style - Choose one of three header border styles. 

Boxed Header

• Header Top/Bottom Margin - Input values for top and bottom header margins. 
• Header Side Margin - Input values for header side margin. 
• Content in Grid - Set this option to "Yes" if you wish to set the boxed header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the boxed header on your pages. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Menu Position - Choose where you wish to position the menu within the boxed header. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 
• Borders Between - Set this option to "Yes" if you wish to display borders between items. 

Divided Header

• Content in Grid - Set this option to "Yes" if you wish to set the divided header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the divided header on your pages. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding. 
• Header Widgets Next to Menu - Set this option to "Yes" if you wish to display header widgets adjecent to the menu. 
• Borders Between - Set this option to "Yes" if you wish to display borders between items. 

Expanding Header

• Content in Grid - Set this option to "Yes" if you wish to set the expanding header content in grid. 
• Header Height - Input a value for the header height. 
• Header Side Padding - Set the side padding for the expanding header on your pages. 
• Header Background Color - Set a background color for the header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Set a width for the header border. 
• Header Border Style - Pick one of three header border styles. 
• Header Widgets Side Margin - Input values for the header widgets side margin. 
• Border Follows Padding - Set this option to "Yes" if you wish the borders to follow padding. 
• Borders Between - Set this option to "Yes" if you wish to display borders between items. 
• Expanding Header Menu Open Icon SVG Path - Input an SVG path for the expanding header menu opener here. 
• Expanding Header Menu Icon Styles - Here you can set a color, hover color, icon size, and adjust icon side padding for the expanding header menu icon. 

Vertical Expanding Header

• Header Background Color - Set a background color for the vertical expanding header. 
• Header Border Color - Set a color for the header border. 
• Header Border Width - Input a value for the header border width. 
• Header Border Style - Choose one of three header border styles. 
• Header Navigation Background Color - Set a background color for the header navigation. 
• Header Navigation Width - Input a value for the header navigation width. 
• Vertical Expanding Header Menu Open Icon SVG Path - Input an SVG path for the vertical expanding header menu opener here. 
• Vertical Expanding Header Menu Close Icon SVG Path - Input an SVG path for the vertical expanding header menu closer here. 
• Expanding Header Menu Icon Styles - Here you can set a color, a hover color, and an icon size for the vertical expanding header. 

Top Area

• Enable Top Area - Set this option to "Yes" if you wish to display the top area.
  • Top Area Options - Here you can choose to set the top area in grid, choose a content alignment style, adjust the top area height, side padding, set a background color, border color and width, select one of 3 predefined top area border styles, pick one of 2 widget skin types for for the top area. You can also make the borders follow padding if you choose so. 

Header Skin Options

• Header Skin - Choose a skin for the header. 

Elementor Section Before Header

• Elementor Section Before Header - Pick a previously created elementor section you wish to place above/before the header. 

Additional Header Options

• Active Menu SVG Path - Input an SVG path for the menu when active. 
• Navigation Item Icon - Input the navigation item icon SVG path here. 

Main Menu

• Dropdown Position - Adjust the dropdown position by inputting the percentage value of entire header height. 
• Dropdown Background Color - Set a color for the dropdown background. 
• Dropdown Box Shadow - Adjust the box shadow for the dropdown. 
• Main Menu Typography - This is where you can make adjustments to main menu typography. You can adjust both first and second level main menu typography. Depending on the menu level, you'll have slightly diferent options available; you can adjust color, menu color, active color, inner item padding, background color, background hover color, background active color, pick a font family, font size, adapt line height, letter spacing, font weight, text transform style, font style, text decoration style, hover/active text decoration, and choose whether you wish to apply a draw text decoration on hover/active menu text, as well as to adjust left/right marigns & left/right padding for main menu items. 

Scroll Appearance Section

• Header Scroll Appearance - Choose between none, fixed and sticky header scroll appearance types.
  • Sticky Header Height - Input a value for the sticky header height. 
  • Sticky Header Appearance - Choose a behavior type for the sticky header. 
  • Sticky Scroll Amount - Input a value for scroll amount relative to where you wish the sticky header to appear. 
  • Sticky Header Side Padding - Input a value for the sticky header side padding. 
  • Sticky Header Background Color - Set a background color for the sticky header. 
  • Sticky Header Border Color - Set a color for the sticky header border. 
  • Sticky Header Border Width - Set a width for the sticky header border. 
  • Sticky Header Border Style- Choose a style for the sticky header border. 
  • Border Follows Padding - Set this option to "Yes" if you wish the sticky header border to follow padding. 
  • Sticky Header Box Shadow - Adjust box shadow for the sticky header. 

Elements

• Label Styles - Here you can make adjustments to label styles on your website. You have the option to alter the label color, choose a font family, font size, line height, letter spacing, font weight, text transform style, font style, margin top and margin bottom. 
• Input Field Styles - Here you can make stylistic adjustments to input fields on your site. 
• Button Styles - In this section you have various options related to button appearance on your website. 
• Button Icon Styles - This is where you can define button icon styles on your site. 
• Button Textual Styles - In this section you can adjust the appearance of textual content on your buttons. 
• Slider Arrow Styles - This is where you can modify the appearance of slider arrows on you site. You can input separate SVG paths for the left and the right arrow, or define arrow icons. 
• Pagination Arrow Styles - In this section you can adapt the appearance of pagination arrows on your website. You can input separate SVG paths for left and right pagination arrows, as well as to add a 'Back to Link' icon SVG path, and define the pagination arrow icon style. 
• Navigation Typography - Here you can adjust the navitagion text color, hover color, choose a hover text decoration, font family & size, configure line height, letter spacing, font weight, font style, and input the value for the size of the space between items. 

Fullscreen Menu

• Fullscreen Menu in Grid - Set this option to "Yes" if you wish to set the fullscreen menu in grid. 
• Fullscreen Menu Hide Logo - Set this option to "Yes" if you wish to ommit the website logo from the fullscreen menu.
• Background Color - Set a background color for the fullscreen menu. 
• Background Image - Set an image to be displayed in the fullscreen menu background. 
• Background Image Repeat - Choose a repeat style for the fullscreen menu background image. 
• Background Image Position - Set a position for the background image. 
• Menu Alignment - Choose an alignment style for the fullscreen menu. 
• Active Full Screen Menu Icon SVG Path - Input the full screen menu SVG path to be displayed when the menu is active. 
• Full Screen Menu Open Icon SVG Path - Enter the full screen menu icon SVG path here. 
• Full Screen Menu Close Icon SVG Path - Enter the full screen menu close icon SVG path here.
• Fullscreen Menu Icon Styles - Here you can define the fullscreen menu opener icon style. 

Fullscreen Menu Typography

• Menu 1st Level Typography - Set styles for 1st level menu items in the fullscreen menu.
• Menu 2nd Level Typography - Set styles for 2nd level menu items in the fullscreen menu.
• Fullscreen Menu Typography Responsive - This is where you can define the fullscreen menu typography for devices with screen resolutions below 1024px and 680px, respectively. 

Mobile Header

General Settings

• Mobile Header Layout - Choose mobile header layout you wish to use.
• Mobile Header Open Icon Styles - Here you can adjust a color, hover color, and icon size for the mobile header opener icon, as well as to input an SVG path for the menu opener icon. 
• Side Area Mobile Header - Here you can adjust side area mobile header height, input values for the side padding, and pick a background color for the side area mobile header. 
• Header Height - Set a height for the mobile header. 
• Header Side Padding - Set the side padding for the mobile header. 
• Header Background Color - Set a background color for the mobile header. 

Mobile Menu Settings

• Mobile Menu Typography - This is where you can make adjustments to mobile menu typography; you can adjust color, menu color, active color, inner item padding, pick a font family, font size, adapt line height, letter spacing, font weight, text transform style, font style, text decoration style, hover/active text decoration, and choose whether you wish to apply a draw text decoration on hover/active menu text for both first and second level mobile menu items. 

Title

• Enable Page Title - Use this option to control whether you would like to display the title area or not on your website.
  • Title Layout - Choose a type of title area to use.
  • Page Title in Grid - Set this option to "Yes" if you would like to set the title area content in grid.
  • Height - Set a height for the title area.
  • Height on Smaller Screens - Set a height for the title area on smaller screens when the mobile header is displayed.
  • Background Color - Set a background color for the title area
  • Background Image - Chose a background image for the title area.
  • Background Image Behavior - Choose how you would like the background image to behave. 
  • Bottom Border Color - Set a color for the bottom border. 
  • Bottom Border Width - Set a width for the bottom border. 
  • Bottom Border Style - Choose one of 3 border styles for the title area bottom border. 
  • Title Color - Set a color for the title. 
  • Title Tag - Set a heading tag for titles. 
  • Text Alignment - Set an alignment for titles. 
  • Vertical Text Alignment - Define the vertical alignment setting for the title area content on your pages. You can choose to vertically align the title area content from the bottom of the header, or from the top of your browser window.
  • Breadcrumbs Tag - Set a heading tag for the breadcrumbs text. This option is only available if you have selected the breadcrumbs title area layout. 
  • Subtitle Typography - This is where you can make adjustments to the main subtitle typography; you can set a color, pick a font family, configure font size, line height, letter spacing, font weight, choose a text transform style, font style, and adapt the top margin for subtitles. 

Sidebar 

• Sidebar Layout - Choose a layout for the sidebar on pages.
• Widgets Margin Bottom - Input values for the widget bottom margin. 
• Widgets Title Margin Bottom - Input values for the widget title bottom margins. 

Footer

• Enable Page Footer - Set this option to "Yes" to display the footer on your pages. 

Footer Area

• Widgets Skin - Choose one of two skin types for widgets in the footer area. 
• Top Footer Area in Grid - Set this option to "Yes" if you would like the top footer area to be displayed in grid. 
• Top Area Grid Gutter - Choose a predefined size for the space between columns for top footer area. 
• Top Footer Area Columns - Choose a number of columns you wish to feature in your top footer area. 
• Content Alignment - Choose a content alignment style for the top footer area. 
• Top Footer Area Styles - Input padding values for the footer top, set a background color, background image, top border color, width and style. You can also choose whether you wish the top border to follow padding, whether you wish to display borders between items, and make the top border take up the full width of the viewport. You also have the option to set a size for the widget bottom margin and set a size for the space between widget titles and widget content in the footer top. 
• Bottom Footer Area in Grid - Set this option to "Yes" if you would like the bottom footer area to be displayed in grid. 
• Bottom Area Grid Gutter - Choose a predefined size for the space between columns for bottom footer area. 
• Bottom Footer Area Columns - Set the number of columns for the bottom footer area. 
• Bottom Footer Area Columns Width - Input a value for the bottom footer column width. 
• Content Alignment - Choose a content alignment style for the bottom footer area. 
• Bottom Footer Area Styles - Here you can input values for bottom footer padding, set a background color, top border color and top border width, choose a top border style, make the top border follow padding, set borders between items, and have the top border take up the full width of the viewport. 

Search

• Search Area Background Color - Set a color for the background in search sections on your website. 
• Search Open Icon SVG Path - Input your search icon SVG path. This option is only available if you have selected SVG path as your search icon source. 
• Search Close Icon SVG Path - Input the search close icon SVG path here. This option is only available if you have selected SVG path as your search icon source. 
• Search Open Icon - Here you can define the look and feel for the search opener button. 
• Search Close Icon - Here you can define the look and feel for the search closer button. 
• Search Input Field - This is where you can adjust the appearance of the search input field on your website. 

Side Area

• Background Color - Set a background color for the side area. 
• Background Image - Set a background image to be displayed in the side area. 
• Content Alignment - Pick a content alignment style for the side area. 
• Widgets Skin - Pick one of 2 skin types for widgets in your side area. 
• Side Area Icon SVG Path - Enter your Side Area icon SVG path here. 
• Side Area Close Icon SVG Path - Enter your Side Area close icon SVG path here. 
• Side Area Open Icon - Define the appearance of the side area open icon. 
• Side Area Close Icon - Define the appearance of the side area close icon. 

Blog

General

• Quote/Link Title Tag - Set a heading tag for the quote/link. 
• Quote Padding - Input values for the quote padding. 
• Link Padding - Input values for the link padding. 
• Background Color - Set a background color for the quote/link. 
• Enable Border - Set this option to "Yes" if you wish to display borders around quote/link.
  • Border Color - Set a color for the border. 
  • Border Width - Input a value for the border width. 
• Hide Date - Set this option to "Yes" if you wish to omit post dates. 
• Hide Category- Set this option to "Yes" if you wish to omit showing categories for posts. 

Blog List

• List Appearance - Here you can choose a default appearance style for your blog lists. 
• Item Layout - Select a default layout style for posts in your blog lists. 
• Number of Columns - Set a default number of columns for your blog lists. 
• Space Between Items - Set a default size for the space between items in blog lists. 
• Sidebar Layout - Choose a sidebar layout for blog archive pages.
• Number of Characters in Excerpt - Set a number of characters to be displayed in the excerpt.
• Hide Read More Button - Set this option to "Yes" if you do not wish to display the read more button in your lists.
  • Read More Button Type - Choose a type for the 'Read More' button. 
• Hide Excerpt - Set this option to "Yes" if you wish to hide post excerpts from lists by default. 
• Hide Author - Set this option to "Yes" to hide author names from blog lists. 
• Post Alignment - Pick an alignment style for blog lists. 

Blog Single

• Sidebar Layout - Choose a sidebar layout for blog single posts.
• Enable Related Posts - Set this option to "Yes" to display related posts on blog single pages.
  • Related Posts Layout - The following set of options lets you choose whether you wish to show or hide excepts, media, dates, categories, authors and buttons for related posts. 
• Post Alignment - Choose a default alignment for single posts. 
• Side Padding - Input values for blog single content padding. 
• Featured Image Bottom Padding - Input values for the bottom padding for the featured image. 
• Title Bottom Padding - Input a value for the bottom padding for post titles. 
• Space Between Sections - Set a size for the space between sections on blog singles. 
• Author Info Style - This is where you can set up the appearance of author info sections. 

Post Info Typography

• General Typography - This is where you can make all the typography adjustments to post info textual content, including info text and info links. 

Portfolio

Portfolio List

• List Appearance - Choose between gallery and masonry list appearance types. 
• Item Layout - Choose a style (layout and hover type) for single projects on portfolio archive pages.
• Number of Columns - Set a default number of columns for your portfolio lists. 
• Space Between Items - Set a default size for the space between items in portfolio lists. 
• Content Order - Set an order in which you wish to display items in lists. 
• Content Background Color - Set a color for the content background in lists. 
• Center Content - Set this option to "Yes" if you wish to display content centrally in your lists. 
• Show Button - Set this option to "Yes" if you wish to display a button in portfolio lists. 

Portfolio Single

• Single Layout - Choose a default type for portfolio single pages.
• Set Space Between Images - Adjust the size for the space between images. This option is only available if you selected one of the images single portfolio layouts from the option above. 
• Space Between Items - Adjust the size for the space between media and content on portfolio singles. 
• Title Tag - Set a heading tag for titles on your portfolio single pages. 
• Set Content Order - Choose whether you wish to display media or content first. 

Projects Info Settings

• Set Info Item Text Position - Choose the position for the item info text relative to the image. 
• Portfolio Info Section Margin Top - Adjust the top margin for the info section. 
• Portfolio Info Section Margin Top Mobile - Adjust the top margin for the info section on mobile devices. 
• Portfolio Info Section Margin Bottom - Adjust the bottom margin for the info section. 

Related Projects Settings

• Enable Related Projects - Set this option to "Yes" if you wish to display related projects on your single post pages.
  • Related Projects in Grid - Set this option to "Yes" if you wish to display related projects in a grid layout. 
  • Related Projects Number of Items - Set a number of items you wish to display in your related projects on portfolio singles. 
  • Related Projects Style - This is where you can further adjust the appearance of related projects on portfolio singles. You can adapt top, bottom and side paddings for the related projects. The same set of options is available for mobile device appearance of your related projects. 

Navigation Settings

• Navigation - Set this option to "Yes" if you wish to enable project navigation on portfolio singles.
  • Navigation Through Same Category - Set this option to "Yes" to make portfolio navigation sort through current category only. 
  • Navigation Type - Choose a type for the portfolio navigation on your portfolio single pages. 
  • Enable Navigation Icons - Set this option to "Yes" if you wish to display icons in the navigation. 
  • Enable Navigation Labels - Set this option to "Yes" if you wish to display labels in the navigation. 
  • Navigation Style - This is where you can make further adjustments to navigation. You can configure the top margin, input values for padding, as well as set a color, width and pick a style for both top and bottom navigation borders. 

Portfolio Info Typography

• Category Typography - Here you can adjust the appearance of the project category text. 
• General Typography - This is where you can make all the typography adjustments to project info textual content, including portfolio info labels, text, links, and you can also adjust the navigation label typography here. 

Contact Form 7

Input Fields

• Label Style - This is where you can make visual adjustments to labels in contact forms created using the free Contact Form 7 plugin. 
• Input Fields Style - This is where you can make visual adjustments to input fields in contact forms created using the free Contact Form 7 plugin. 
• Button Style - This is where you can make visual adjustments to buttons in contact forms created using the free Contact Form 7 plugin. 

In this section of the User Guide we will take a comprehesive look at all the custom shortcodes included with the plugin and their repsective options.

Section

The section element is a container element in which you can add other elements (shortcodes) and sort them on your page. Besides the standard Elementor Page Builder options for sections (you can access these options by hovering on a section and clicking the Edit Section button), you also have the custom options which we included with the theme. You can access these options by clicking the Edit Section button on the section of your choice, and then navigating to the Advanced tab located in the Elementor toolbar on the left side of the page. 

Qode Essential Addons Grid

• Make this row "In Grid" - Set this option to "Yes" to set this set this section in a grid layout.

Qode Essential Addons Premium Parallax

• Enable Parallax - Set this option to "Yes" if you wish to apply an animated parallax effect to this section.
  • Parallax Background Image - Add a parallax image you wish to display in the section. 

Qode Essential Addons Premium Dynamic Background Color

• Enable Dynamic Background - Set this option to "Yes" if you wish to display a colored dynamic background in this section.
  • Background Color - Adjust the color for the dynamic background in this section. 

Portfolio List Essentials

The portfolio list shortcode enables you to present a listing of your portfolios on a page.

General

• Custom Class - If you wish to style a particular content element differently, you can use this field to add an extra class name to that element and then refer to that class name in your css file.
• List Appearance - Choose a template for your portfolio list. The template you choose will define how your portfolio list will display.
• Image Proportions - Choose the proportions of the images in your portfolio list.
• Number of Columns - Set the number of columns in which you would like to display your portfolio list.
• Columns Responsive - Choose between 'predefined' columns responsive settings, or set the column responsiveness manually for each responsive stage. 
• Space Between Items - Choose a spacing between portfolio items in the list.
• Enable Pagination - Set this option to "Yes" to enable pagination bullets. 
• Borders - Choose a type of borders you wish to display inside the list. 
  • Borders - Set a color for the borders. 

Pagination

• Pagination - Choose a pagination style you wish to display. In order for this option to become available, you need to enable the pagination bullets in general options. 

Query

• Posts Per Page - Choose how many portfolios you would like to display per page. Enter "-1" do display all portfolios on a single page.
• Order by - Choose how you would like to order your portfolio items.
• Order - Choose between ascending and descending order.
• Additional Params - Here you can choose which additional parameters you wish to define for projects featured in this portfolio list.
  • Post IDs - If you would only like to display certain projects in your portfolio list, enter the IDs of those projects in this field.
  • Taxonomy - Here you can choose to feature portfolios from specific categories or with specific tags only. 
  • Taxonomy Slug - Input a taxonomy slug for the category/tag you wish to limit this portfolio list to. 
  • Taxonomy IDs - Input taxonomy IDs for categories/tags you wish to limit this portfolio list to. 
  • Author Slug - Input the slug corresponding to the author whose work you wish to display in this list. 

Layout

• Item Layout - Choose a style (layout and hover type) for the items in your portfolio list.
• Title Tag - Choose a heading tag for the titles in your portfolio list.
• Use Item Custom Padding - Set this option to "Yes" if you wish to apply custom item padding. 
• Show Category - Set this option to "Yes" if you wish to display item categories in the list. 
• Center Content - Set this option to "Yes" if you wish to align the content centrally. 
• Content Order - Choose the order in which you wish to display content. 
• Title Color - Set a color for titles in the list. 
• Content Background Color - Set a color for the content background. 
• Image Overlay Color - Set a color for the image overlays. 
• Image Overlay Hover Color - Set a color for the image overlays when hovered on. 
• Image Hover - Choose a behavior type for the images when hovered on. 
• Image Hover Background Color - Set a color for the image backgrounds when hovered on. 
• Enable Cursor Follow Image - Set this option to "Yes" if you wish to add an image which will follow the cursor in the list. 
  • Cursor Follow Image - Add the image you wish to follow the cursor in the list. 

Layout Spacing 

• Content Padding - Input values for content padding in the top, right, bottom, left fashion. 
• Post Info Margin - Input values for post info margins. 
• Button Margin - Input values for the button margins. 

Style

• Pagination Load More Style - In the event that you selected the load more pagination style for the list, you can make adjustments to its appearance here and enable customizable borders if you choose so. 

Portfolio Project Info

You can use this shortcode to showcase individual portfolio items along with some additional info of your choosing. 

General

• Custom Class - If you wish to style a particular content element differently, you can use this field to add an extra class name to that element and then refer to that class name in your css file.
• Portfolio Item Info Text Position - Choose a position for the additional item info text. 
• Portfolio Item - Choose a portfolio item you wish to display. 
• Enable Project Category - Set this option to "Yes" if you wish to display the category the selected project belongs to. 
• Categories Label - Input a label you wish to display for the category (category by default). 
• Enable Project Tags - Set this option to "Yes" if you wish to display the tags added to your selected project. 
• Tags Label - Input a label you wish to display for the tags (tags by default). 
• Enable Project Date - Set this option to "Yes" if you wish to display the creation date for your selected project. 
• Date Label - Input a label you wish to display for the date (date by default). 
• Enable Project Author - Set this option to "Yes" if you wish to display the author of the selected project. 
• Enable Project Custom Items - Set this option to "Yes" if you wish to display the custom items. 
• Enable Project Title - Set this option to "Yes" if you wish to display the title of the selected project. 
• Enable Project Image - Set this option to "Yes" if you wish to display the image of the selected project. 
• Label Title Tag - Set a heading tag for labels in the list. 

Style

• Project Info Margin - Input values for the element margins. 
• Label Margin Right - Adjust the right margin for the labels inside the element. 
• Item Margin - Input values for the margins of the item shown inside the element. 
• Data Margin - Input values for the margins of additional data shown inside the element. 

Blog List Essentials

This shortcode allows you to display your blog posts on a page.

General

• Custom Class - If you wish to style a particular content element differently, you can use this field to add an extra class name to that element and then refer to that class name in your css file.
• List Appearance - Choose a template for your blog list. The template you choose will define how your blog list will display.
• Image Proportions - Choose the proportions of the images in your blog list.
• Number of Columns - Set the number of columns in which you would like to display your blog list.
• Columns Responsive - Choose between 'predefined' columns responsive settings, or set the column responsiveness manually for each responsive stage. 
• Space Between Items - Choose a spacing between posts in the list.
• Enable Pagination - Set this option to "Yes" to enable pagination bullets. 
• Borders - Choose a type of borders you wish to display inside the list.
  • Borders - Set a color for the borders. 

Pagination

• Pagination - Choose a pagination style you wish to display. In order for this option to become available, you need to enable the pagination bullets in general options. 

Query

• Posts Per Page - Choose how many posts you would like to display per page. Enter "-1" do display all portfolios on a single page.
• Order by - Choose how you would like to order your posts.
• Order - Choose between ascending and descending order.
• Additional Params - Here you can choose which additional parameters you wish to define for posts featured in this blog list.
  • Post IDs - If you would only like to display certain posts in your list, enter the IDs of those posts in this field.
  • Taxonomy - Here you can choose to feature posts from specific categories or with specific tags only. 
  • Taxonomy Slug - Input a taxonomy slug for the category/tag you wish to limit this blog list to. 
  • Taxonomy IDs - Input taxonomy IDs for categories/tags you wish to limit this blog list to. 
  • Author Slug - Input the slug corresponding to the author whose work you wish to display in this list. 

Layout

• Quote/Link Tag - Set a heading tag for the quote/link text. 
• Title Tag - Set a heading tag for titles in the list. 
• Show Excerpt - Set this option to "Yes" if you wish to display post excerpts for items in the list. 
• Excerpt Length - Set a maximum number of characters to display in the post excerpt.
• Center Content - Set this option to "Yes" if you wish to align the list content centrally. 
• Show Media - Set this option to "Yes" if you wish to display post media in the list. 
• Show Date - Set this option to "Yes" if you wish to display post dates in the list. 
• Show Category - Set this option to "Yes" if you wish to display post categories in the list. 
• Show Author - Set this option to "Yes" if you wish to display post author names in the list. 
• Show Button - Set this option to "Yes" if you wish to display buttons for posts in the list.
• Show Info on Quote Posts - Set this option to "Yes" if you wish to display additional info on quote posts in the list.

Style

Pagination Load More Style

• Pagination Load More Style - In the event that you selected the load more pagination style for the list, you can make adjustments to its appearance here and enable customizable borders if you choose so. 

Style

• Content Background Color - Set a color for the content background. 

Spacing Style

• Content Padding - Input values for content padding. 
• Post Info Margin Bottom - Adjust the bottom margin for the post info section. 
• Title Margin Bottom - Adjust the bottom margin for post titles in the list. 
• Button Margin Top - Adjust the top margin for the buttons in the list. 
• Additional Item Margin Bottom - Adjust the bottom margin for additional items shown in the list. 

Product List Essentials

You can use this shortcode to display a list of your shop products. 

General

• Custom Class - If you wish to style a particular content element differently, you can use this field to add an extra class name to that element and then refer to that class name in your css file.
• List Appearance - Choose a template for your product list. The template you choose will define how your product list will display.
• Image Proportions - Choose the proportions of the images in your product list.
• Number of Columns - Set the number of columns in which you would like to display your product list.
• Columns Responsive - Choose between 'predefined' columns responsive settings, or set the column responsiveness manually for each responsive stage. 
• Space Between Items - Choose a spacing between product items in the list.
• Enable Pagination - Set this option to "Yes" to enable pagination bullets. 
• Borders - Choose a type of borders you wish to display inside the list.
  • Borders - Set a color for the borders. 

Pagination

• Pagination - Choose a pagination style you wish to display. In order for this option to become available, you need to enable the pagination bullets in general options. 

Query

• Posts Per Page - Choose how many products you would like to display per page. Enter "-1" do display all products on a single page.
• Order by - Choose how you would like to order your products.
• Order - Choose between ascending and descending order.
• Additional Params - Here you can choose which additional parameters you wish to define for products featured in this product list.
  • Post IDs - If you would only like to display certain products in your product list, enter the IDs of those products in this field.
  • Taxonomy - Here you can choose to feature products from specific categories or with specific tags only. 
  • Taxonomy Slug - Input a taxonomy slug for the category/tag you wish to limit this product list to. 
  • Taxonomy IDs - Input taxonomy IDs for categories/tags you wish to limit this product list to. 
  • Author Slug - Input the slug corresponding to the author whose work you wish to display in this list. 
• Filter By - Choose how you'd like to filter the products featured in this product list. 

Layout

• Item Layout - Choose a style (layout and hover type) for the items in your product list.
• Title Tag - Choose a heading tag for the titles in your product list.
• Show Category - Set this option to "Yes" to display item categories in the list. 
• Show Price - Set this option to "Yes" to display item prices in the list. 
• Show Rating - Set this option to "Yes" to display item ratings in the list. 
• Center Content - Set this option to "Yes" if you wish to align the list content centrally. 
• Content Background Color - Set a background color for the content. 
• Image Hover Background Color - Set a background color when the images are hovered on. 
• Enable Cursor Follow Image - Set this option to "Yes" if you wish to add an image which will follow the cursor in the list.
  • Cursor Follow Image - Add the image you wish to follow the cursor in the list. 

Layout Spacing 

• Content Padding - Input values for content padding in the top, right, bottom, left fashion. 
• Post Info Margin Bottom - Input a value for post info bottom margin.
• Rating Margin Top - Adjust the top margin for the item ratings in the list. 

Style

• Pagination Load More Style - In the event that you selected the load more pagination style for the list, you can make adjustments to its appearance here and enable customizable borders if you choose so. 

Restaurant Menu List Essentials

You can use this shortcode to display a list containing restaurant menu items. 

General

• Custom Class - If you wish to style a particular content element differently, you can use this field to add an extra class name to that element and then refer to that class name in your css file.
• Menu Items - You can add individual menu items you wish to display here. Each of the items can contain a title, a description, and a price. 

Layout

• Title Tag - Set a heading tag for list titles. 
• Title Color - Set a color for list titles. 
• Description Color - Set a color for the description text. 
• Price Color - Set a color for the price. 
• Line Color - Set a color for the line in the menu list. 

In this section of the User Guide we will discuss the available widgets and widget areas that become available once you have installed and activated the Qode Essential Addons plugin. 

Widgets are easy to manage and can be incredibly useful to have on your site.

We have developed custom widgets and widget areas in order to provide you with even more functionality. You also have the option of creating your own custom sidebars (custom widget areas).

Widgets

• Qode Button - Use this widget to place a customizable button in a desired widget area.
• Qode Icon Svg - Use this widget to place an SVG icon in a desired widget area.
• Qode Search Opener - Use this widget to place the search icon in a desired widget area.
• Qode Side Area Opener - Use this widget to place the icon that opens the side area in a desired widget area. 
• Qode Spacer - Use this widget to place a spacer element to a desired widget area. 

Widget Areas

• Main Sidebar - This is the WordPress default sidebar widget area for blog posts.
• Header - Widget Area - You can use this widget area to add widgets to the header widget area one. This area is located to the upper left, and the order in which the widgets will be placed in the header widget area is left-to-right and top-to-bottom, until the header widget area is filled.
• Header - Widget Area Two - You can use this widget area to add widgets to the header widget area two. This area is located to the adjecent to the header widget area one. 
• Sticky Header Widget Area - You can use this widget area to add widgets to the sticky header widget area one. This area is located to the upper left part of the sticky header, and the order in which the widgets will be placed in the sticky header widget area is left-to-right and top-to-bottom, until the sticky header widget area is filled.
• Sticky Header - Widget Area Two - You can use this widget area to add widgets to the sticky header widget area two. This area is located to the adjecent to the sticky header widget area one. 
• Header Top Area - Left - You can use this widget area to add widgets to the left side of the header top. 
• Header Top Area - Right - You can use this widget area to add widgets to the right side of the header top. 
• Side Area - You can use this widget area to add widgets to your side area.
• Content Bottom - You can use this widget area to add widgets to the content bottom. 
• Fullscreen Menu - Widget Area - You can use this widget area to add widgets to the fullscreen menu. 
• Footer Top Area 1, 2, 3 & 4 – You can use these widget areas to add widgets to the Footer Top columns.
• Footer Bottom Area 1 & 2 – You can use these widget areas to add widgets to the Footer Bottom columns.

Qi Theme is fully compatible with the WPML plugin which lets you create multilingual websites with ease. 

Getting Started

First off, you should make sure that the Qi theme is installed and activated.  You can easily check this by navigating to Appearance → Themes from your dashboard.

Another important step includes installing and activating the Qode Essential Addons plugin – this plugin adds core features and functionalities to the Qi Theme.

Another thing you need to ensure is that the WPML Multilingual CMS, WPML String Translation and WPML Media Translation plugins are installed and activated. 

WPML Translation Tools

WPML provides you with two translation editors for translating the content on your website: 

• WPML classic translation editor (CTE).
• WPML Advanced Translation Editor (ATE) which offers affordable automatic translation, a glossary, spell checker, and more.

The most common way of using the WPML plugin usually includes translating your website content yourself, however there are also some additional options available. 

One alternative is to send your content for translation to a professional translation service.

Another option is to assemble your own team of translators. You can do this from the Translation Roles tab in Translation Management and assign translation jobs to them.

Translating Pages

You can translate your page in the Language of this page section; this is located on the right side of the page editor. Here you get to choose between translating the dynamic content of the page with the WPML’s translation editor, and creating a new page and building the content for another language yourself. 

Translating Posts and Qode Portfolio Singles

Translation of Posts and Qode Portfolio singles is performed in very much the same way as in the case of translating regular Pages, so you can refer to the previous section of this article.

Translating Taxonomies

When it comes to translating categories, tags, and other taxonomies, you will find the translation options when you open one of the items for editing. 

Translating Texts From Qi Theme, Plugins, and Other Places

Aside from the content that comes from posts and pages on your website, you’ll most commonly also have some textual content coming from other sources. Most frequent examples of this type of content are themes and plugins.

If you wish to learn more about translating these kinds of texts, you can check out this documentation page about translating strings.

Translating Menus

WPML lets you easily synchronize menu languages. Alongside this, you can also edit menu languages manually. For more information on translating menus, you can check out this menu translation tutorial.

Getting Help From Support

In case you need help translating your site built using the Qi Theme and WPML plugin, you can visit WPML’s support forum.