Qode Options

You can access Qode Options from the WordPress admin panel. The settings found here are applied globally and will affect all pages of the site. However, note that many of these options can be overridden locally by applying settings on individual pages or on shortcode elements.

General

This section allows you to set up general settings for your site that will affect its look and functionality. The Design Style section has options for setting fonts, colors, and layout. The Settingssection has options for page transitions, animations, scrolling, and more. The Custom Code and SEO sections are where users can add their custom code and SEO settings.

Design Style

• Font Family - Choose a Google font to be used as the default font on your website. It will get applied to the html body tag and will appear on all page elements, unless overridden. To browse through Google fonts, see https://www.google.com/fonts.
• First, Second, Third, and Fourth Main Color - This section allows you to globally manage colors on your site. Many elements (buttons, icons, separators, etc.) will be displayed in one of the four predefined colors. You can define these colors and apply them in order of dominance. The First Main Color will be the most widely used color, and the Fourth Main Color will be the least used color. Keep in mind that these colors can be, in many cases, overridden in shortcode options, should you decide that you want to use a different color on a certain element.
• Content Background Color - Choose a color to be applied to the main page section where content (text, images, etc.) goes.
• Box Background Color - Choose a color to be used as the default background color for any portfolio or blog posts that appear on your pages.
• Text Selection Color - Choose the color viewers see when selecting text on your site.
• Boxed layout - If you choose a boxed layout for your site, the content will be fitted in a centrally positioned grid. Otherwise, your content will be able to cover full width of the page.
  • Page Background Color - Choose a color to be applied to the page background area. This area is underneath the page content area and is visible on the sides of the screen.
  • Background Image - If you wish to use an image in the background, upload it here. For optimal viewing, we recommend that your image is in full HD resolution of 1920x1080 pixels. Your background image will stay fixed on the page and will not scroll down as viewers scroll. We also recommend that your image be in optimized size in order to reduce page loading time.
  • Background Pattern - Alternatively, if you wish to use a pattern for the background, upload your image here. This image will be repeated over the entire background area.

Settings

• Page Transition - Choose a type of Ajax transition for page loading. Select "No animation" if you want pages to load regularly, without Ajax. In order for the transitions to work properly, you should ensure that in Settings > Permalinks > Common Settings, Post name is selected. Otherwise, your transitions might not work properly.
• Loading Animation - Choose "Yes" if you want viewers to see an animated graphic while your site pages load.
  • Loading Animation Graphic - Choose the animation graphic to be displayed. You can customize it further by choosing its color.
  • Loading Image - Alternatively, upload an image or "gif" file to be used as the loading graphic.
• Smooth Scroll - Choose this option to apply a smooth scrolling effect on your site pages (does not apply to Mac and touch devices).
• Elements Animation on Mobile/Touch Devices - For optimal viewing experience of your site on mobile and touch devices, element animation on them is disabled by default (this applies to buttons, icons, images, etc.). Enabling this option might interfere with elements displaying properly, and so we recommend you keep this option disabled.
• Show "Back To Top Button" - Enable this option if you want a "back to top" button to display at the bottom right corner of every page.
• Responsiveness - By default, this option is set to "On" to enable your site layout to adapt to the viewing environment. We recommend you keep this option enabled in order to give viewers optimal user experience across all devices.
• Favicon Image - Upload your favicon image.
  We recommend you upload a 16x16 pixel "ico" file format.
• List of Internal URLs Loaded Without AJAX (Separated With Comma) - If you've enabled Ajax transitions but want certain pages on your site to load without it, you can disable it for those pages by entering their full URLs here (for example: ";http://www.mydomain.com/forum/"). This is important if you're using plugins where Ajax needs to be disabled for them to work properly.

Custom Code

• Custom CSS - Advanced users can enter custom CSS here.
• Custom JS - Advanced users can enter custom JS here. Entered code will be executed on domready.

SEO

• Google Analytics Account ID - If you're using Google Analytics to monitor site traffic, enter your account ID here. For more information on this, see https://www.google.com/analytics/.
• Disable Qode SEO - If you're using your own SEO plugins, you can turn off Qode SEO here. We recommend for beginners to keep Qode SEO active.
  • Meta Keywords and Meta Description - In order to improve your site ranking on search engines, we recommend you fill out the Meta Keywords and Meta Description fields.
  • For "Meta Keywords" enter relevant keywords for your site, separated by commas. For example, "Dog, cat, pet shop, pet toys, New York."
  • For Meta Description, enter a short description of your site. For example, "Tom's wonderful pet shop in New York."

Logo

This is where you can upload your website logos. If your pages use different header styles, you might want different logos to be displayed in different circumstances. In addition, if using a sticky header, you might want a simplified version of your logo to appear on the sticky. This is the place where you can upload and manage all your logo images.

Sizing

The logos displayed on your page are limited in size by header height. For example, if your logo is 100 pixels in height and your header is 90 pixels high, the logo will slightly shrink in size in order to fit into the header area. The same principle applies to logos that appear on sticky; they are limited by sticky section height.

Retina

To make your logos retina ready, upload ones that are twice as high as the header. For example, a header of 90 pixels in height would require a logo that's 180 pixels high. This principle applies to all logos you upload.

Note that you can set your own header and sticky section heights by going to Qode Options > Header.

• Logo Image - normal - This logo is used when no header skin is chosen. We recommend not choosing a header skin in cases where you want to fully customize the header with your own colors. You might want to decide on the look of your header before choosing a logo to upload here.
• Logo Image - Light - This logo is used when "Light" header skin is chosen. A Light header skin has white navigation text and is typically used on dark header backgrounds. A lightly colored logo is appropriate here, in order to be clearly visible on such background. For more information on header skins, see Header.
• Logo Image - Dark - This logo is used when "Dark" header skin is chosen. A Dark header skin has black navigation text and is typically used on light header backgrounds. A darkly colored logo is appropriate here, in order to be clearly visible on such background. For more information on header skins, see Header.
• Logo Image - Sticky Header - This applies when you're using the Sticky or Sticky Expanded header type. It's the logo viewers see once they scroll down and the sticky section appears. It's typically a smaller version of the original logo.
• Logo Image - Fixed Advanced - This applies when using the Fixed Advanced header type. This is the logo viewers see once they scroll down and the fixed section appears. It's typically a smaller version of the original logo.

Header

This section allows you to set up the header area. The first choice to make is whether you'd like to have a top menu or left menu navigation. You can then optionally enable a search bar, side area, header top area, and/or fullscreen menu. Each of these can be customized with text styles, colors, and content alignment.

Furthermore, each hierarchy level in menus can separately be customized. For example, if a menu contains About > Our Staff > John Doe, then About is considered 1st level, Our Staff is 2nd level, and John Doe is 3rd level.

Header Position

Switch to Left Menu - Choose "Yes" if you want to use a left menu for main navigation. This menu stays fixed in place and will not scroll when viewers scroll down the page.

• Left Menu Area Type - There are 2 types to choose from: the left menu can always be open, or it can initially be hidden and open once viewers click on the button.
  • Enable transparent left menu area - Applies when the Always Opened type is chosen. This option makes the left menu background transparent upon page load. Once viewers start scrolling down, the transparency fades and the background comes into view again. This feature is useful if you have a slider or image at the top of your page and don't want the menu background to obstruct it.
  • Button Color - Applies when the Initially Hidden type is chosen. Here you can choose a color for the button that opens and closes the hidden menu.
• Left Menu Area Background Color - Choose a color to be applied to the left menu background.
• Left Menu Area Background Image - If you want to use an image for the left menu background, upload it here. This image will automatically be fitted to cover the entire menu area. If your image is smaller than the menu area, it will get stretched out. A larger image will get shrunk. For optimal viewing, we recommend that your image is the same width as the left menu area and is 1080 pixels high. The background image will stay fixed on the page and will not move as viewers scroll down.
• Left Menu Area Text Color (for Widgets) - Choose a color for widgets (such as social icons) that appear in the left menu area.
• Content Alignment - Choose from left, centered, or right alignment for content in the left menu area.
• 1st, 2nd, and 3rd Level Menu Style - Define text styles for all hierarchy levels that appear in the left menu. Each level can be custom styled and you can choose text color, hover color, font family, font size, line height, font style, and font weight.

Header

• Header in Grid - Choose "Yes" if you want your header content to be fitted in a centrally positioned fixed grid. Otherwise, it will stretch across full width of the page.
• Header Type - Choose your header type from one of the following:
  • Regular - This is a standard header that stays on top of the page. When viewers scroll down, it goes out of view. By default, the logo is aligned left and navigation text is aligned right, both elements in line. This a good choice if you want a simple look for your site.
  • Fixed - This header stays fixed on top of the page when viewers scroll. By default, the logo is aligned left and navigation text is aligned right, both elements in line. This is a good choice if you want your viewers to have access to top navigation at all times.
  • Fixed Advanced - This header stays fixed on top of the page when viewers scroll. But unlike the Fixed header, only the logo is visible after scroll. The menu is hidden and appears on hover. By default, the logo is above navigation text and both elements are centered. This is a good choice for sites with a grid layout.
  • Sticky - This header is initially on top of the page and goes out of view when viewers scroll. It then reappears and stays sticky on top after a certain amount of scroll. By default, the logo is aligned left and navigation text is aligned right, both elements in line. This is similar to the fixed header, and is a good choice if you have content at the top of your pages which you don't want to obstruct by a fixed header.
  • Sticky Expanded - The difference between this header type and the Sticky header is that here, the logo is above navigation text and both elements are aligned left by default. When the sticky header appears, the logo is aligned left and navigation text is aligned right, both elements in line. Since this was a common layout in earlier days of web design, this is a good choice if you want an old-school look.
  • Sticky Divided - The difference between this header type and the Sticky header is that here, the logo is centrally positioned and has menu navigation text on both sides of it. When the sticky header appears, the logo is gone and only the menu stays sticky on top. This is a good choice for sites that have layout in grid.
  
• Scroll Amount for Sticky - This option applies to the sticky header types. Set the amount of scroll (in pixels) after which the sticky header will appear.
• Menu Position - Choose an alignment for your menu.
• Center Logo - Choose "Yes" if you want to center the logo and position it above the menu.
• Animate Centered Logo - This option applies to the Fixed header type. Enable it if you want the centered logo to shrink in size after scroll. Otherwise, it will remain in full size.
• Header Height - Define the header area height in pixels.
  • Initial - refers to the header viewers see upon page load.
  • After Scroll - refers to the fixed or sticky header viewers see after scroll. This applies to all header types other than Regular.
• Header Skin - Choose a predefined header style to be applied. "Light" displays white navigation text and the "Light" logo, while "Dark" displays black navigation text and the "Dark" logo. If you want to set a custom color to navigation links and use the default logo, leave this field empty.
  Note: To manage logos, go to Qode Options > Logo. Define custom color to main navigation links under Qode Options / Fonts section
• Header Background Color - Choose a background color to be applied to the header area.
  • Initial - refers to the header viewers see upon page load.
  • After Scroll - refers to the fixed or sticky header viewers see after scroll. This applies to all header types other than "Regular".
• Header Transparency - Set the transparency level for the header background on a scale of 0 to 1, where 0 is fully transparent and 1 is opaque.
• Header Bottom Border Color - Choose a color for the border underneath the header area.
• Header Bottom Border Transparency - Set the transparency level for the header bottom border on a scale of 0 to 1, where 0 is fully transparent and 1 is opaque.

Menus

• Dropdown Menu Item Separators - Choose "Yes" if you want to display horizontal separators between dropdown menu items in a classic menu (vertical separators in wide dropdown menus are enabled by default).
• Border Around Dropdown Menus - Choose "Yes" if you want to have a border around the classic menu.
• Dropdown Menu Item Separator and Border Color - Choose a color for horizontal (classic dropdown) or vertical (wide dropdown) separators between dropdown menu items. This option also applies to border around dropdown menus.
• Dropdown Menu Background - Choose the background color and transparency level for the dropdown menus.

Qode Search

• Enable Qode Search Bar - Choose "Yes" if you want to enable Qode search functionality. A search icon will appear in the header next to main navigation and when clicked, a search bar will unfold at the top of the page. This bar automatically closes when viewers scroll down. You can further customize it with your own background and text colors.
  • Qode Search Background Color - Choose a color to be applied to the search bar background.
  • Qode Search Text Color - Choose a color to be applied to text and icons appearing in the search bar.

Side Area

• Enable Side Area - Choose "Yes" to allow viewers to open a sidebar. A sidebar icon will appear in the header next to main navigation and when clicked, a right sidebar will unfold. You can fill the sidebar with content by adding widgets in Appearance > Widgets.
  
  
  • Side Area Title - Enter a title to appear at the top of the side area.
  • Background Color - Choose a color to be applied to the side area background.
  • Text - Define styles for paragraph text that appears in the side area. You can choose text color, hover color, font size, letter spacing, and font weight.
  • Title - Define styles for title text that appears in the side area. You can choose text color, font size, letter spacing, and font weight.
  • Close Icon Style - Choose a style for the close ("X") button in the upper right corner of the side area. "Dark" displays a black button, and "Light" displays a white button.

Fullscreen Menu

• Enable Fullscreen Menu - Choose "Yes" to allow viewers to open a fullscreen menu. A fullscreen menu icon  will appear in the header next to main navigation and when clicked, the fullscreen menu will open.
  • Logo image for Fullscreen menu - Choose a logo to display on the fullscreen menu. It will appear in the upper left corner and is limited in size by header height. For more information on how logos are displayed, see Qode Options > Logo.
  • 1st and 2nd Level Style - Define text styles for all hierarchy levels that appear in the fullscreen menu. Each level can be custom styled and you can choose text color, text hover color, background hover color, font family, font size, line height, font style, font weight, and letter spacing.
  • Background - Choose a background color and transparency level to be applied to the fullscreen menu.

Header Top

• Show Header Top Area - Choose "Yes" to display the Header Top area, which is a small section that appears at the very top of the page. This area is meant for placing Header Left and Header Right widgets (social icons, language selector, etc.). You can add widgets by navigating to Appearance > Widgets.
  • Hide on Scroll - Choose "Yes" to hide the header top area when viewers scroll down. This applies when fixed or sticky menu types are chosen.
  • Background color - Choose a background color to be applied to the Header Top area.
  • Bottom Border - Define bottom border styles for Header Top area.
    • Border Color - Choose bottom border color for Header Top area.
    • Bottom Border Width - Enter bottom border width for Header Top area.

Mobile Menu

• Mobile Menu Item Separator Color - Choose color for mobile menu horizontal separators.
• Mobile Header&Menu Background Color - Choose color for mobile header&menu background.

Header Button Icons (Search Bar, Side Area, and Fullscreen Icon)

• Color - Choose a color for icons that appear in the header area, in line with main navigation text - the search bar, side area, and/or fullscreen icon.
• Hover Color - Choose a hover color for header icons.
• Font Size - Enter a size for header icons in pixels.
• Side Menu / Fullscreen Menu Icon Size - Choose a predefined size for header icons - Normal, Medium, or Large.

Footer

This section allows you to set up the footer area. There are two footer sections that can either be hidden or shown: the footer top and footer bottom. The footer top can be split into columns and is appropriate for placing widgets, such as menus, images, and social icons. The footer bottom is a simple section at the bottom of the page and is meant for placing copyright text. Both footer "Widgets."

• Uncovering Footer - Choose "Yes" if you want your footer to gradually appear on scroll.
• Footer in Grid - Choose "Yes" if you want your footer content to be fitted in a centrally positioned grid. Otherwise, it will stretch across full width of the page.
• Show Footer Top - Choose "Yes" to show the larger of the two footer sections. The footer top can be split into columns and is appropriate for placing widgets (such as menus, images, and social icons). You can add these by navigating to Appearance > Widgets.
  • Footer Top Columns - Choose the number of columns for your footer top area.
  • Footer Top Colors - Choose colors for various elements in the footer top area.
• Show Footer Bottom - Choose "Yes" to show the smaller of the two footer sections. This area is at the very bottom of the page and is typically used for placing copyright text.
  • Footer Bottom Colors - Choose colors for various elements in the footer bottom area.

Title

This section allows you to set up the title area. You can animate it, define colors or images, add breadcrumbs, and more. For styling the title font, see Fonts.

Title

• Animations - Choose a way to animate the title area upon page load. "Text right to left" will make title text slide in from the right side of the page and then settle into position. "Title area top to bottom" will make the title area gradually unfold. Select "No animation" to have a static page title area.
• Title Text Alignment - Choose from left, centered, or right title text alignment.
  
  
• Text Size - Choose a predefined title text size - Small, Medium or Large.
  Note that you can define styling for each of these sizes by navigating to Qode Options > Fonts.
• Text Shadow - Choose "Yes" if you want your title text to have a drop shadow.
• Background Color - Choose a background color to be applied to the title area.
• Background Image - If you wish to use an image for the title area background, upload it here.
  For optimal viewing, we recommend that your image is in full HD resolution of 1920 pixels in width.
• Background Responsive Image - Choose "Yes" if you want to make the title image responsive.
  Note that title area height will be defined by height of the image after it resizes to fit the browser's width.
  • Parallax Title Image:
    • Choose "Yes" if you want to make the title image parallax.
    • Choose "Yes, with zoom out" if you want viewers to have a perception of zooming out of the image, along with the parallax.
      Your image should be larger than the title area, in order to be able to shrink and not have any gaps appearing at the sides of the page. We recommend a width of 2500 pixels and a height that's at least 20% more than the title area height. The parallax image will be limited in height by title area height (any excess will be cropped). We recommend that your image is at least this height, in order for the parallax effect to work properly.
  • Title Height - Enter a height for the title area in pixels.
• Pattern Overlay Image - If you wish to use a pattern over the title area, upload it here. This image will be repeated to cover the entire title area.
• Show Title Separator - Choose "Yes" if you want a separator to appear under title text.
  • Title Separator Color - Choose a color for the title separator.
  • Title Separator Width - Enter a width for the separator in - pixels.
• Bottom Border - Choose "Yes" if you want the title area to have a bottom border.
  • Bottom Border Color - Choose a color for the bottom border.
• Margin After Title for Default Template - This option applies only for pages that use the Default Template. Here you can set a bottom margin for the title area in pixels.

Breadcrumbs

• Enable Breadcrumbs - Choose "Yes" if you want breadcrumbs to appear in the title area.
  • Breadcrumbs Color - Choose a color for breadcrumb text.

Fonts

This section allows you to set up font properties for different elements on your site, which is essential for achieving a consistent design.

Headings

• H1-H6 Style - Define text styles for all the heading levels.

Text

• Paragraph - Define styles for paragraph text.
• Links - Define styles for link - text.

Header & Menu

• 1st, 2nd Level Menu - Define text styles for 1st and 2nd hierarchy levels in the top navigation menu.
• 2nd Level Wide Menu - Define text styles for the 2nd hierarchy level in the wide menu.
• 3rd Level Menu - Define text styles for the 3rd hierarchy level in the top navigation menu.
• Fixed Menu - This applies when using the Fixed or Fixed Advanced header types. Here you can define text styles for the fixed menu.
• Sticky Menu - This applies when using the sticky header types. Here you can define text styles for the sticky menu.
• Mobile Menu - Define text styles for the narrow version of the menu, as seen on mobile devices.
• Header Top - Define styles for text that appears in the header top area.

Page Title

• Small Type - Define styles for title text of type "Small."
• Medium Type - Define styles for title text of type "Medium."
• Large Type - Define styles for title text of type "Large."

Page Subtitle

• Subtitle - Define styles for subtitle text.
• Large Type - Define styles for subtitle text of type "Large."

Footer

• Footer top title styles - Define styles for titles that appear in the footer top.

Portfolio

• Categories Filter - Define styles for the category filter text.

Elements

This section allows you to set up properties for different elements (shortcodes). Note that these settings can be overridden locally in shortcode options when adding elements to your page.

Separators

• Normal - Define styles for separators of type "Normal".
• Small - Define styles for separators of type "Small".
• Separator with Icon - Define styles for separators with icons.

Buttons

Define styles for the default, white, small, large, and extra large buttons.

Message Boxes

• Message Box Style - Define styles for message boxes.
• Message icon style - Define styles for message box icons.

Blockquotes

• Blockquote Style - Define styles for blockquotes.

Social Icons

• Social Icons style - Define styles for social icons.

Testimonials

• Testimonials Style - Define styles for testimonials.

Counters

• Counters Style - Define styles for counters.

Horizontal Progress Bars

• Progress Bar Style - Define styles for horizontal progress bars.

Pie Charts

• Pie Chart Style - Define styles for pie charts.

Tabs

• Text Style - Define text styles for tabs.
• Border Style - Define border styles for tabs.

Process

• Circles Background Hover Color - Set the process circle's background color on hover.
• Text Style - Define text styles for process shortcode.

Input Fields

• Input Fields Style - Define styles for input fields.

Highlights

• Highlight Color - Choose a color for highlighted text.

Blog

This section allows you to set up blog pages.

Blog List pages are ones that display multiple blog items using one of the predefined blog layout templates. Each of these templates can separately be customized.

Note: In the documentation, when referring to "Masonry," we are referring to both the Blog Masonry and Blog Masonry Full Width page templates.

Blog Single pages are those that display a single blog post.

Blog List

The Text in Box field refers to individual blog posts' accompanying text. Choose "Yes" if you want this block of text to have a different background color from the page content color, giving it a boxed effect.

• Pagination - Choose "Yes" if you want pagination on your blog lists.
• Archive and Category Layout - Choose a default layout to be applied to archived blog lists and category blog lists.
  Note: Viewers will be able to access the archived blog lists (for example, "October 2013") once you activate the Archives widget in Appearance > Widgets.
  Category blog lists contain blog posts from a certain category (for example, "Art") and viewers can access them by following the link in the blog post info bar or sidebar.
• Archive and Category Sidebar - Choose a sidebar layout for your archived blog lists and category blog lists.
• Hide Comments - Choose "Yes" if you want to hide the number of comments from the blog post info bar.
• Hide Author - Choose "Yes" if you want to hide the author's name from the blog post info bar.
• Likes - Choose "Yes" if you want to hide the number of likes from the blog post info bar.
• Pagination Page Range - Enter the number of numerals you want displayed in the pagination. For example, enter "3" to get "1 2 3 ..." Make sure that Pagination is set to "On" for this setting to work.
• Number of Words in Blog Listing - Enter the number of words to be displayed per post on your blog list. This refers to words regardless of character length.
• Number of Words in Masonry - Enter the number of words to be displayed per post on the Masonry blog lists. This setting overrides the Number of Words in Blog Listing entry.
• Number of Words in Large Image - Enter the number of words to be displayed per post on the Blog Large Image lists. This setting overrides the Number of Words in Blog Listing entry.
• Number of Words in Small Image - Enter the number of words to be displayed per post on the Blog Small Image lists. This setting overrides the Number of Words in Blog Listing entry.
• Pagination on Masonry - Choose a pagination type for the Masonry blog lists.
• Show Category Filter on Masonry - Choose "Yes" if you want a category filter to appear at the top of the Masonry blog lists.
• Large Image Style - Define the look of the Blog Large Image and Blog Large Image Whole Post lists.
• Small Image Style - Define the look of the Blog Small Image lists.
  The Text in Box field refers to individual blog posts' accompanying text. Choose "Yes" if you want this block of text to have a different background color from the page content color, giving it a boxed effect.
• Masonry Style - Define the look of the Masonry blog lists.

Blog Single

• Sidebar Layout - Choose a sidebar layout for your blog single posts.
• Sidebar to Display - Choose a custom widget area to display in your sidebar.
• Show Blog Author - Choose "Yes" if you want your blog single posts to contain an "About the author" section.

Quote / Link

• Box Background Color - This option applies to blog posts that are either in Quote or Link format. The box color you set here will be visible on both Blog List and Blog Single pages.

Portfolio

This section allows you to set up page properties when displaying a single portfolio project.

Portfolio Single Project

• Portfolio Type - Choose a default layout for portfolio single projects from one of the following:
  • Portfolio small images - All images are displayed in a column, with accompanying text in a right sidebar.
  • Portfolio small slider - A slider is displayed, with accompanying text in a right sidebar.
  • Portfolio big images - All images are displayed across full width of the page content area, with accompanying text underneath.
  • Portfolio big slider - A slider is displayed across full width of the page content area, with accompanying text underneath.
  • Portfolio custom - Choose this option if you want to build your portfolio pages as you would a regular page, without your content following one of the predefined layouts. As with regular pages, you can choose between in grid (fixed) or full width template.
  • Portfolio gallery - All images are displayed in a gallery layout, with accompanying text underneath.
• Likes - Choose "Yes" to display the number of likes.
• Lightbox - Choose "Yes" if you want viewers to be able to click on images and have a lightbox slideshow open up.
• Number of Columns for Gallery Style - Choose the number of columns for the Portfolio Gallery single project layout.
• Sidebar layout - Choose a sidebar layout for your portfolio singe projects.
• Sidebar to Display - Choose a custom widget area to display in your sidebar.
• Portfolio Single Slug - If you wish to use a different URL slug for the portfolio single projects, enter it here. After saving, navigate to Settings>Permalinks and click "Save Changes" (without modifying anything else) in order for this setting to take effect.
• Sticky Side Text - This option applies to single project layouts that contain the text in a right sidebar. Choose "Yes" to make this text sticky.

Social

This section allows you to manage social sharing on your site. You can select which social networks to enable, what elements of your site can be shared, and upload social share icons.

Social Sharing

• Enable Social Share - Choose "Yes" to enable social sharing on your site.

Show Social Share

• Posts - Choose "Yes" to enable social sharing on blog posts.
• Pages - Choose "Yes" to enable social sharing on pages.
• Media - Choose "Yes" to enable social sharing for images and videos.
• Portfolio Item - Choose "Yes" to enable social sharing on portfolio items.

404 ERROR PAGE

Here you can set up the "404" page viewers see when an error occurs.

• Title - Enter a title to appear on the 404 page.
• Subtitle - Enter a subtitle to appear on the 404 page.
• Text - Enter text to appear on the 404 page.
• Back to Home Button Label - Enter a label for the "back to home" button.

Contact Page

This section allows you to manage the contact page. You can display a Google map with up to 5 different addresses pinned on it. Additionally, you can enable a contact form and an optional title area above it.

Contact Page

• Enable Google Map - Choose "Yes" to display a Google map on your contact page.
• Show Upper Section - Choose "Yes" if you want to display a title/subtitle section above the contact form.
• Enable Contact Form - Choose "Yes" to display a contact form.

Google Map Settings

• Google Map Address - Enter up to 5 addresses to be pinned on the Google map. Enter them in standard address format, for example, "Louvre Museum, Paris, France."
• Pin Image - Upload an image to mark your addresses on the map.
• Map Height - Enter a height for the map in pixels.
• Map Zoom - Choose a zoom factor for the map. The higher the number, the greater the zoom.
• Zoom Map on Mouse Wheel - Choose "Yes" if you want your viewers to be able to zoom in on the map with their mouse wheel. Otherwise, they will scroll over it.
• Custom Map Style - Choose "Yes" if you want to custom edit your map.
  • Color Overlay - Choose a color overlay for your map.
  • Saturation - Choose a level of saturation. The greater the number, the greater the saturation will be.
  • Lightness - Choose a level of lightness. The greater the number, the lighter your map will appear.

Upper Section Settings

• Section Alignment - Choose an alignment for the upper section.
• Title - Enter a title to be displayed in the upper section.
• Subtitle - Enter a subtitle to be displayed in the upper section.

Contact Form Settings

• Mail Send To - Enter an email address where you wish to receive data submitted through the contact form.
• Email From - Enter a default value to appear in the "From" field when you receive data through the Contact Form.
• Email Subject - Enter a default value to appear in the "Subject" field when you receive data through the Contact Form.
• Hide Website Field - Choose "Yes" if you want to hide the Website field in the contact form.
• Contact Form Heading - Enter a heading to be displayed above the Contact Form.
• Use reCAPTCHA - Choose "Yes" if you want to have a reCAPTCHA box under the Contact Form.
  • reCAPTCHA Public Key - Enter your reCAPTCHA public key here. For more information on this, see https://www.google.com/recaptcha.
  • reCAPTCHA Private Key - Enter your reCAPTCHA private key here. For more information on this, see https://www.google.com/recaptcha.

Parallax

This section contains options for parallax images used on your site.

• Parallax on Touch Devices - For optimal viewing experience, we recommend keeping this option disabled, as touch devices might not optimally display the parallax effect. When disabled, a static image will be displayed without the parallax functionality.
• Parallax Min Height - Enter a minimum height for parallax images as displayed on screen. This feature is meant to prevent them from appearing too small in height on smaller screens (phones, tablets, etc.).

Content Bottom

This section allows you to set up the content bottom area, which appears right above the footer. In order to fill it with content, choose a custom widget area to display. For example, you might want a Call to Action widget to appear here. For more information on this, see "Widgets."

• Enable Content Bottom Area - Choose "Yes" to enable the content bottom area on your site pages.
• Sidebar to Display - Choose a custom widget area to display in the content bottom.
• Display in Grid - Choose "Yes" if you want the content bottom area to be fitted in a centrally positioned grid.
• Background Color - Choose a background color for the content bottom area.

Contact Form 7

Here you can create up to 3 different custom styles that can later be applied to forms you create via the Contact Form 7 shortcode.

 

When referring to form elements, we are referring to text input fields, text areas, and select lists. When viewers click on a particular element, that element is in "focus;" you can stylize it differently from the rest to make it stand out. 

• Form Elements' Background - Define styles for the form elements' background.
• Form Elements' Border - Define styles for the form elements' border.
• Form Elements' Text Style - Define text styles for the form elements.
• Form Elements' Padding - Set padding amount for form elements.
• Form Elements' Margin - Enter margins for form elements.
• Button Background - Define background styles for the form button.
• Button Border - Define border styles for the form button.
• Button Text Style- Define text styles for the button.
• Button Height - Enter button height in pixels.

Maintenance Mode

This section allows you to set a single page for visitors to see while your site is under construction. While Maintenance Mode is enabled, they will see this page no matter what section of your site they try to access. However, note that all pages will still be visible to you while you are logged into admin.

• Maintenance Mode - Choose "Yes" to enable Maintenance Mode.
• Maintenance Page - Choose the page you wish to be displayed to viewers. Note that only pages you've created using the Landing Page template will appear in the drop down list. For more information on page templates, see Pages.

Reset

• Reset to Defaults - Choose "Yes" and save changes if you wish to reset all Qode Options values to defaults.