No matches were found...

    Welcome to
    Scape Help Center

    Welcome to
    Scape Video Academy

    Here you can find video Scape theme video tutorials.

    Installation

    Demo Import

    Menu

    Header

    Fonts & Typography

    Icons & Icon Fonts

    Color Palette

    Options Hierarchy

    Blog

    Portfolio

    Sidebars & Widgets

    What's included

    The first step after purchasing the theme from ThemeForest is to download Scape files from your ThemeForest account. For that you should navigate to ThemeForest downloads tab and find Scape theme. After clicking the Download button you are offered two options:

    1. All files & documentation - lets you download a full theme package with all the files.
    2. Installable WordPress file only - lets you download only the installable WordPress theme archive.

    Below is a list of contents included in the full theme package:

    • scape.zip - contains the Scape WordPress theme.
    • Child_theme - contains the child theme that can be used for adjustments.
    • Demo_content - contains the premium sliders and theme-specific sliders for Revolution Slider.
    • Licensing - contains the item general license.

    Licensing

    License information

    The them can be purchased from ThemeForest in two variants - with a standard license or an extended license. The single license means that you need to purchase one single license for every site that uses Scape. Therefore, if you are building 2 websites with Scape, then you are required to purchase 2 separate single licenses. The same principle applies to extended license as well, however extended license allows you to re-sell your end-product which uses Scape.

    More complete information on ThemeForest licenses can be found here.

    Common questions

    • If I need to use Scape on a second site/domain, do I need a second license?
      Yes. One purchase of Scape allows you to use the theme on one finished site/domain. If you need to use it on a second site/domain, it requires you to purchase a second license.
    • Can I use Scape on a test site, then move it to a live site when finished?
      Yes, you can. You can keep the theme on a test site to build it, then move it to the live site once you’re finished. If you activated your purchase code on a test site, then you should first deactivate it, then migrate the site and activate the purchase code again on a new domain.
    • Can I keep a test site and a live site with one Regular License purchase?
      According to the licensing rules set by Envato, this is not allowed. If it is installed in two places permanently, then it requires two licenses.
    • Do I need to buy a new license each time I create a landing page within my site?
      No. As long as it's all on the same domain, a single license is fine.
    • If I purchase an Extended License, do I get a multi-use, multi-client or developer license?
      No. The Extended License is still limited to a single end product, but you can re-sell that product.

    Server requirements

    WordPress

    To use Scape WordPress Theme, you you must be running WordPress 4.8 or higher. You can download a working version of WordPress from WordPress.org.

    Before using any theme, it is important to understand how native WordPress functions work. Here are the links that you may find useful:

    Please note that questions related to WordPress installation and configuration are not covered by the theme support. For more information, please read our Support Policy.

    Server configuration

    In order for Scape to work correctly, please make sure you are running on PHP 7.0 or higher and MySQL 5.6 or higher. You may find that Scape works fine on an older PHP version, but we can only ensure that it is fully tested with PHP 7.0+. Besides that, there is a significant reason to no longer use old PHP versions, since they may expose your site to security vulnerabilities.

    Please also get acquainted with minimum requirements to run WordPress before choosing your host.

    PHP configuration limits

    Many issues that you may run into such as white screen, demo import fail, missing page elements or PHP errors are often related to low PHP configuration limit settings. In this case you need to increase PHP limits. You can either do this on your own, or contact your web host and ask to have the limits increased to the following minimums:

    memory_limit 512M
    upload_max_filesize 128M
    post_max_size 128M
    max_input_vars 2000
    max_execution_time 120

    Verify your PHP limits

    You can check your current PHP configuration limits and verify if they meet the minimum requirements on the Theme Dashboard page.

    In case you need to increase the limits, you can find out how below or you can contact your web host and ask to have them increased.

    Increase your PHP limits

    Updating your php.ini file

    If you use cPanel, go to the Files section and click on the File Manager button. Make sure the checkbox for Show Hidden Files is checked and then click Go. Select your wp-admin folder and find a file called php.ini or php5.ini. If you don’t see it, create one by clicking the New File button in the top left-hand corner. Name the file php.ini and click the Create File button on the pop-up.

    If you follow these instructions and it still doesn’t work, try renaming the file to php5.ini. Once the file is open, add or edit the following lines and then save the file and close it.

    memory_limit 512M
    upload_max_filesize 128M
    post_max_size 128M
    max_input_vars 3000
    max_execution_time 120
    Editing your .htaccess file

    If that addition to your php.ini file doesn’t do the trick, try editing your .htaccess file and add or edit the following code at the very bottom:

    php_value memory_limit 512M
    php_value upload_max_filesize 128M
    php_value post_max_size 128M
    php_value max_input_vars 3000
    php_value max_execution_time 120

    Installation

    Automatic install

    1. Download All Files and Documentation package from Themeforest and unzip it.
    2. In the unzipped folder you will find scape.zip file. DO NOT unzip it one more time.
    3. In your WordPress Dashboard navigate to Appearance -> Themes.
    4. Click on Add New Theme, click Upload Theme and browse the scape.zip file and click Install Now.
    5. After installation is complete click on Activate. This will take you to the Setup Wizard, which will help you to set up the theme.

    Manual install

    1. Download ZIP package from Themeforest and unzip it.
    2. In the unzipped folder you will find scape.zip file. Unzip it one more time.
    3. Put the unzipped theme folder into your wp-content/themes directory.
    4. Activate the theme from Appearance -> Themes page.

    If you are not redirected to Setup Wizard automatically after activating the theme, it is recommended to launch it manually from Appearance -> Setup Wizard

    Setup Wizard

    Setup Wizard is designed to guide you through the key theme setup steps and will help you get started to tweak the theme and build your website. After the wizard is completed, you can run it again any time from Appearance -> Setup Wizard menu. Setup Wizard includes the following steps:

    1. Plugins
      Allows to automatically install all the plugins needed for the theme to work.
    2. Customize
      Contains information on how to customize the website and allows to automatically install the child theme. Installation of a child theme is optional, and you can do it later by running the Setup Wizard again or by installing it manually.
    3. Support
      Information on theme support policy and useful links for getting help.

    Product Activation



    First thing to do when you have successfully installed and activated Scape is to activate the Purchase Code which you received with the theme. You will be offered to do so during the Install Wizard. If you chose to skip this step during Install Wizard, you can always register your license copy on the Scape Dashboard page.

    Apart from verifying the validity of your Purchase Code, activating the theme will also unlock demo content import and shortcode template library. To register the product you will need to enter your Purchase Code and your personal Envato Token.

    How to get your Token:

    1. Login to ThemeForest with the account that was used to purchase Scape.
    2. Click this link to create your Token.
    3. Enter the name for your Token and make sure the following four checkboxes are checked:
      • View your Envato Account username
      • Download your purchased items
      • List purchases you've made
      • Verify purchases you've made
    4. Click the Create Token button, copy the Token and paste it into the Envato Token field.

    Where to get your Purchase Code:

    1. Login to ThemeForest with the account that was used to purchase Scape and navigate to ThemeForest downloads page.
    2. Find Scape in your list of purchases, click the Download button and select License Certificate & Purchase Code.
    3. Copy the Item Purchase Code into the Envato Purchase Code field.

    After registration

    Once you have successfully registered your Purchas Code, you will gain access to demo import, shortcode templates and other premium features.

    It's important to remember that one license is valid on one domain/website only. This means that if you want to create another website using Scape theme, you must purchase another license and activate it on a new website.

    Website migration

    It may happen that you have created your website on a development server or even on a localserver, and want migrate it to the main server at some point. This is totally fine in terms of license terms, until you follow the rules and don't use use your Purchase Code on two different domains. In this case you need to first deactivate the Purchase Code on the development server, then migrate the website, and then activate the Purchase Code on the main server. Purchase Code cannot be active on two or more domains simultaneously as it is a copyright violation.


    Remember Running multiple websites on a single license is a copyright violation and therefore is strictly prohibited. Any discovered multiple usages of one and the same purchase code may result in legal action.

    Plugins

    Plugin licenses

    Premium bundled plugins are distributed under the extended license (with licensee being Scape theme author), which means that they work out of the box and are free to use with the theme. Please note that if you want to use any of the bundled plugins separately from the theme, you must purchase an individual plugin license.

    Included plugins

    Scape theme comes with the following premium bundled plugins: WPBakery Page Builder, Revolution Slider, Layer Slider.

    Another plugin included is Scape Core, which adds core features to the Scape theme. It also extends and modifies the WPBakery Page Builder plugin, which is why we name the latter Scape WPBakery Page Builder throughout the theme. Please note that Scape Core and Scape Visual Composer are required for proper functioning of the theme, therefore it's strongly advised to install them right after the theme is activated.

    Plugins used or utilized:
    • Revolution Slider - premium plugin for creating sliders.
    • Layer Slider - premium plugin for creating sliders.
    • WPBakery Page Builder - premium page builder plugin.
    • Contact Form 7 - free plugin for creating contact forms.
    • WooCommerce - free plugin for creating an online shop.

    Plugin install

    The easiest way to install the required plugins is to run the Setup Wizard after the theme is activated. However, the plugins can also be installed any time from Scape Theme - Plugins page.

    If the aforementioned methods don't work for you, plugins can be installed using classic WordPress method or through FTP:

    Install plugins via WordPress interface:
    1. Unzip the main theme folder scape.zip (full theme package)
    2. Navigate to scape / inc / plugins
    3. Upload the zip archives via the classic WordPress plugins installer on Plugins page
    4. Activate the plugins on Plugins page.
    Install plugins through FTP:
    1. Please unzip the main theme folder scape.zip on your desktop.
    2. Navigate to scape / inc / plugins
    3. Unzip the plugins and upload via FTP into wp-content / plugins / on your server
    4. Activate then the plugins.

    Child theme

    Why use a child theme

    If you are planning to make adjustments to the theme's code, it is recommended to us a child theme for that purpose. It can save you a lot oo headache in the future, as it allows to make changes without affecting the original theme's code, which makes it easy to update the parent theme without erasing your changes and therefore losing the customizations you made. This can also make the process of customization much easier since you can always revert the changes without restoring the original theme's code in case something goes wrong while making adjustments.

    Installing a child theme

    The easiest way to install the child theme is through Setup Wizard, which is run automatically upon theme activation, or can be run manually from Appearance -> Setup Wizard menu. You can find the child theme install button on the Customize page of Setup Wizard.

    Child theme can also be installed manually from the archive that can be found in Child_theme folder in the full theme package. It can be done exactly the same way as the manual theme install. On Appearance -> Themes page click Add new and select the child theme package. Afterwards, activate the child theme.

    Using a child theme

    After installation, the child theme folder will contain two key files - functions.php and style.css. The first one can be used to add your own functions and hooks to the theme (or to override those declared by the parent theme), the second one can be used to add or override CSS styles.

    To override theme template files, they can be copied from the parent theme folder and pasted into the child theme folder, and adjusted to your needs.

    A comprehensive documentation on child themes can be found in WordPress Codex.

    Demo import



    Scape comes with built-in easy to use one-click demo importer. It allows to easily import the content and settings of one of the pre-built demo websites and jumpstart the development process. Demo importer will add the pages, posts, portfolio items, products, widgets, forms and settings of the demo that you choice.

    How to run demo import

    1. First of all, to access demo import, you have to register your Purchase Code, which activates the premium features of Scape. This can be done during the initial Install Wizard or any time from the Scape Theme -> Theme Dashboard page.
    2. Navigate to Theme Options -> Demo Importer, hover the thumbnail with the demo that you want to import and click Import Demo.
    3. You will see the progress bar showing what percentage of demo content has been imported. Don't leave or reload the page until the import is completed. Once it's completed, the page will reload automatically.

    Troubleshooting

    Below are some important things to keep in mind when using the demo importer:

    • Make sure you have activated your Purchase Code, otherwise the Demo Importer will not be available.
    • Make sure your server configuration meets the system requirements on the Theme Dashboard page. It is possible that you will be able to successfully complete demo import with lower configuration than required, however we can only guarantee a successful import if the requirements are met. Depending on your server, you may need to raise you configuration settings even higher (especially for the main demo), e.g. if your server is under a load or you are using a shared hosting. More information on server requirements can be found here.
    • While running the demo import, please be patient and don't reload the page. It may take some time, even 5-15 minutes (it may be especially long for the main demo import, since it includes many posts, portfolio items and images). However, if the demo is being imported for more than 10 minutes and the progress bar is frozen, it's worth checking your browser's JavaScript console. If you see any server-related errors, e.g. 500 (internal server error), you probably need to raise your PHP Memory Limit and run the import once again.
    • If you happen to need to re-run demo import, please bear in mind that some demo content may be duplicated. To avoid that, you need to reset your WordPress database and possibly remove the contents of Uploads folder.

    Smart images

    Smart image sizes

    Scape has a built-in smart image system which takes full advantage of the responsive image technology supported by modern browsers. It allows the theme to load exactly the right image size for each website element so that the images look sharp on any screen, even High DPI displays.

    To set up image sizes to use with the theme, navigate to Theme Options -> General Settings -> Images and enter the image sizes into Responsive image sizes field. Please refer to this section on how to choose and add the image sizes.

    Lazy image loading

    To further increase the performance, Scape has has a built-in lazy image loading system, which can be switched on and off site-wide, and separately for shortcodes that contain images. When switched on, images are loaded asynchronously and only those which are in or near the visible part of the screen. This can significantly increase page load speed, especially on pages with lots of images.

    Image-containing elements will then appear only when the image inside them is fully loaded to avoid glitches and display of partly-loaded images. All appearance animations attached to that element will be postponed to the moment when an inner image is loaded. Preloader animation can be switched on in Theme Options -> General Settings -> Images to indicate that the images are being loaded.

    Theme fonts

    Font pool


    Scape has a built-in font system which makes it really easy to add, manage and use fonts from different sources on your website.

    Font pool allows to import fonts into your theme and then use them site-wide or for specific elements such as headings, text or shortcodes.

    Fonts can be added from a number of different sources: Google Fonts, Adobe Typekit, Font Squirrel, or manually by uploading the font files using the theme's interface.

    To remove the font from the font pool, click the Remove button next to the font. All elements using that font will then be rolled back to default inherited font.

    After a font is added from one of the sources and Theme Options are saved, you need to reload the page to see the changes - a new font will appear in the Font Family field of typography options in Theme Options and Shortcode Settings.

    Adding Google fonts

    Google Fonts has an extensive library of over 800 fonts which you can easily import and use on your website. Browse fonts by alphabet and add to the pool by clicking the Add button next to the font.

    The list of Google Fonts is updated with every theme update, however if you want it to always be up to date, generate a Google API Key and enter it into the Google API Key field.

    Our unique font system is designed to load only those font families, weights, styles and subsets that are used on a particular page, without forcing the website to load all of them without a need. This may significantly improve the page load speed, especially if multiple Google fonts are used on a page.

    Adding Typekit fonts

    Adobe Typekit is another popular font service among designers. With Scape you can simply synchronize your font kit and the fonts will become available for use in the theme. For that you will first have a Typekit account and a font kit created. Next you need to generate an API Token and get your Kit ID, enter them into the respective fields of Adobe Typekit Fonts section, and hit Sync Fonts.

    Adding Font Squirrel fonts

    Font Squirrel offers many free fonts which can be used for commercial use, which you can import to the font pool. Browse fonts by alphabet and add to the pool by clicking the Add button next to the font.

    Please note that some fonts may not work after being imported. The problem is not with the theme, most probably the font files are broken. You can check that by opening Font Squirrel website and downloading the same font to your computer. Most probably you will notice that the font files are empty. Unfortunately, it happens with this service. In this case we suggest you use the same or similar Google font or download the font files from another resource and then upload them using the Custom Fonts upload interface.

    Adding custom fonts

    If the aforementioned font services are not enough, you can always upload your own fonts. Scape allows to create custom fonts by combining multiple font files: .eot, .ttf, .woff, .svg into one font. The font stylesheet is created automatically and you can start using the font right away without any fuss with theme files and CSS code.

    To create a custom font, enter the Font family name and add font files of different formats by clicking the corresponding buttons. You are not obliged to add all types of font files, at least one is required.

    How fonts are loaded

    The main theme font that you choose in Theme Options -> Typography -> General is used in all the elements on your pages unless overridden. That is why all the font weights that are available for that particular font are loaded on each page.

    In contrast to that, whenever you apply a font to an element on your page, the chosen font data is stored with t his element. When rendering a page, Scape collects all the font data from the elements on that page, analyzes and combines it to load only those additional fonts, font styles, weights and subsets that are used on the page, thus saving the bandwidth and optimizing the page load speed.

    While this is designed optimize the page performance speed, you need to remember that if you are using a font on an element that is not the default one, you should always set its weight and style so the system recognizes and loads it.

    Icon fonts

    Included icons

    Scape has an awesome library of icon fonts on board with more than 6000 icons from multiple libraries, including Font Awesome, Linea, and Icon 54. These icon packs offer modern, sharp, pixel-perfect icons which can be used to make your website look better.

    Built-in icon fonts can be used in a variety of elements, e.g., you can add icons to your menu items or use them in shortcode elements, such as: Service, Tabs, Divider etc. Our font system is designed to load only those icon fonts that are used on a particular page, without forcing the website to load all of them without a need.

    Custom icon fonts

    Should you ever run out of icons, you can always add your own to Scape. Thanks to our unique system, you can upload your own custom icon fonts and use them the same way you do with the built-in icon fonts.

    Scape only accepts icon fonts generated with IcoMoon application. If you are not familiar with the service, please read IcoMoon documentation.

    After you have generated and downloaded your icon font from IcoMoon:
    1. Navigate to Theme Options -> Theme fonts -> Icon fonts.
    2. Click Upload new icon font button.
    3. Upload your IcoMoon font archive and click Insert Icon Font .Zip File button.
    4. If done correctly, a new frame will appear below with your new icon font. Icons will be available for use after reloading the page.

    To remove icon font from the theme, click Remove button next to the icon font.

    Theme & Page Options

    Options concept

    Scape comes with literally hundreds of Theme Options, using which you can control nearly any aspect of your website. They are divided into two key levels: Theme Options and Page Options. They are the backbone of your website allowing to fine-tune it without writing a single line of code.

    Page Options can be found on every page, post, portfolio or product single page. They can be used to override the Theme Options for particular pages.

    In addition to Theme and Page options, you will also find dedicated Page, Post, Portfolio and Product options, which extend the basic functional to allow further enhancements.

    Cascade approach

    Cascade approach is used in Theme Options and Page Options to set the layout and look of the pages. It is based on WordPress template hierarchy principles, which means that global settings are overridden by post type settings, which are in turn overridden by single post settings. This way we have achieved maximum flexibility for the settings without sacrificing any speed or convenience for the users.

    Options that utilize the cascade approach control page settings from header to footer. Take a look at Theme Options -> Page Settings - there are four sections: Header, Hero section, Layout and Footer, which control these page parts globally. The same tabs can be found in sections of Theme Options responsible for single post type entries, archive pages and post author page - they override global options. Furthermore, the same options can be found in Page Options, and they will override the two aforementioned. To better understand the whole hierarchy of Page Settings, please take a look at the diargram below.

    To further enhance the flexibility, Scape has a Custom post types option in Theme Options -> General Settings, where you can add your additional custom post types (if you have any), and additional Page Settings section will be generated for these custom post types, allowing for adjusting their page layout.

    Content block

    What is a Content block

    Content block is a block, consisting of any content that you can add to a regular page, and which can be used repeatedly across the website. Technically, Content block is a custom post type with page editing capabilities. You can add any shortcodes or custom code to it, save just like you do it with pages, and then use repeatedly on your pages or within particular page elements.

    New Content block can be created from Content Block -> Add New menu. You can assign categories to your Content blocks (e.g., based on where they are used on your site) to be able to find them easier in the future.

    Usage of Content blocks

    Content blocks can be used in a number or elements on your website:

    • Content block element in header
      When adding elements to your header, drag & drop content block element to your header and then choose the content block you wish to use in Components tab.
    • Hero section
      Hero section is an area on your page that is located above the main page content, right under the header. It usually contains a slider, large image or/and a page title with breadcrumbs. Since it's a repeatable block, we have made it much easier to manage by allowing to use content block as a hero section.
    • Archive pages
      Post and portfolio archive pages use content blocks with Post grid or Portfolio item grid shortcodes within them. This allows to easily manage the content of archive pages, and use additional elements to suit your taste, instead of simply displaying a list of posts or portfolio items without having control over the page content. Please read dedicated articles on how to set up post and portfolio archive pages.
    • Page content
      Content blocks can be easily added to pages using Contenb Block shortcode.
    • Footer
      Use content block to add widgets to your website footer. Learn how it's done here.
    • Utility pages
      Content blocks can be used for setting up custom 404 error page and Maintenance page.

    Updates

    It's worth mentioning that Scape theme an dthe bundled should be better kept up to date, since the updates not only add new features and demo content, but also fix bugs, improve performance and make the software stay compatible with newer WordPress versions.

    Updating the theme

    here are two ways of how to update Scape: automatic and manual.

    Automatic theme update

    The easiest way to update the theme is to use the automatic update method. To enable it, you need to install and activate the Envato Market plugin, which comes bundled with the theme.

    1. Navigate to Settings tab of Envato Market plugin in your Dashboard.
    2. Enter your Envato API Personal Token into the input field and save changes. To generate your Token, please follow this link.
    3. You will then be shown themes and plugins that you have purchased on Envato. Once a new theme version of Scape is available, you will be notified on Envato Market page and will be able to update from the same page.
    Manual theme update

    If by any chance automatic theme update doesn't work for you, you can all ways use the manual method.

    1. Download a new Scape theme version from ThemeForest.
    2. Activate the default WordPress theme in your website's admin area.
    3. Delete the old version of the theme in /wp-content/themes/
    4. Upload and extract the archive with the theme files to the same folder

    Updating bundled plugins

    According to Envato rules, all updates to bundled plugins are provided with the theme updates by theme authors. Therefore to update the bundled plugins, you first need to install the latest version of Scape. To apply the plugin updates:

    1. Update Scape theme.
    2. If there are any updates of bundled plugins available, in your admin area you will see a notice inviting you to update them. If you don't see the notice, navigate to Scape Theme -> Plugins page.
    3. Click Update under the plugin name to install an individual plugin or check the plugins that you want to update, choose Update from Bulk Actions dropdown and click Apply.

    Header

    Header styles

    The process of setting up the site header consists of two key parts - adding elements to the header and styling its look, and choosing the header style and skin to use.

    Styling the header:
    1. Navigate to Theme Options -> Header Settings and choose a section with the header style that you plan to use on your site (different styles can be used for different pages or post types).
    2. Set the header size and font settings, choose logo and set colors for the light and/or dark header skins. Header skins can be used for different pages to make the header more visible on pages with dark or light content, and for separate slides on pages with Fullpage Slider.
    3. Drag & Drop header elements into the header drop zones to build the contents of the header.

    Header builder

    Header builder is a unique Scape feature that allows you to build a highly customizable layout using a user-friendly Drag & Drop interface. Move elements, that you want to add to the header, to the highlighted drop areas. Each header style has two reserved areas - logo and main menu area, which always display the site logo and the main header menu.

    Please note that some elements are restricted from using in particular header areas. In this case you will see these areas marked red after you start dragging that element.
    Available elements are divided into 5 blocks:
    1. Menus
      Contains all the menus, created by a user
    2. Buttons
      • Search button - shows/hides search panel.
      • Sidearea button - shows/hides sidearea panel.
      • Overlay button - shows/hides overlay with content.
      • Primary button - default primary button as styled in Theme Options -> Button. Button text and link can be added in Primary button text / link options in Components tab.
      • Secondary button - default secondary button as styled in Theme Options -> Button. Button text and link can be added in Secondary button text / link options in Components tab.
    3. Widgets & Settings
      • Search field - styled input field for searching.
      • Social icons - icons with links to social media accounts. Can be set up in Theme Options -> General Settings -> Social Media.
      • Login - log in / log out button
      • Login Alt - alternative log in / log out button
      • Language switch - button with language dropdown. Will only be displayed if the site is using WPML plugin.
      • Text info - simple text block. Text content can be added in Text info element content option in Components tab.
    4. Woocommerce
      • Cart - shopping cart button indicating the number of items in the shop cart and showing the cart widget dropdown on hover.
      • Cart alt - alternative shopping cart button.
      • Wishlist - wishlist button indicating the number of items in the wishlist and containing a link to the wishlist page. Will only be displayed if Yith WooCommerce Wishlist plugin is installed and activated on your site.
      • Wishlist alt - alternative wishlist button.
    5. Miscellaneous
      • Content block - a previously created Content Block that can be added into the header. The content block to use can be chosen in Content block option in Components tab.
      • Space - extra horizontal space between header elements.
      • Border - vertical border that can be used to split up header elements or element groups.

    Header style select

    After you have set up your header, navigate to Theme Options -> Page Settings -> Header. Choose the menu to display in the header's main menu area, header style to use, sticky header style and sticky header skin.

    For more information on header options, please refer to this part of the documentation.

    Menu

    Enhanced menus

    Menus are managed on Appearance -> Menus page. Menus in Scape are created just the same way they usually are in WordPress, but Scape has some enhancements to what you can do with your menus. Below you can find the description of additional menu features added by Scape and information on how to use them.


    Adding icons to menu items
    1. Click Select icon button.
    2. Select an icon library from the dropdown menu.
    3. Select an icon.
    4. Click Insert icon button.

    Adding shortcodes to menu

    You can add shortcodes to menu using previously saved Content blocks:

    1. Create a new content block with any shortcodes (e.g., button, image or text info) in it.
    2. On the Menus page open a Content block dropdown on the left hand side in the list of available menu items.
    3. Select a content block and click Add to menu.
    If you don't see the Content block dropdown, press Screen Options in the top right corner of your screen and check Content block.

    Creating a Mega Menu

    Wide Mega Menu that you can see in theme demo can be created the following way:

    1. Find a top-level menu item, for which you want to create a mega-menu.
    2. Choose Yes in Enable mega menu dropdown.
    3. Default mega menu will be the same width as the global site content. To force the menu take the full screen width, set Enable full-width menu option to Yes.
    4. Each 2nd level menu item represents a separate column of the mega menu, while the item itself is not displayed. 3rd level menu items are displayed as menu titles, and 4th level menu items are displayed as actual menu links.
    Creating a onepage navigation

    Onepage menu lets your website's visitors to scroll to different page sections by clicking on menu links (anchors) or links that lead to these sections. To set up onepage navigation:

    1. Assign a unique ID to your row or section.
    2. Add a Custom Link to your menu. In the URL field write your unique ID that you have added to an element previously, with # sign in front of it.
    Hint: If your top level item is located close to the screen's right side, you may find your 3rd level menu dropdown being being displayed partially out off-screen. To avoid that, set 3rd level menu on the opposite side option to Yes.
    Adding menu to a page

    With Scape you can add a menu navigation to almost any place on your page, be it hero section, main page content or footer, with the help of a WP Custom Menu shortcode.

    By default menu will have vertical layout with menu links stacked above each other, but it can be turned into an inline menu by adding a widget-inline-menu class to the menu shortcode or its container.

    Hero section



    Hero section is an area on your page that is located above the main page content, right under the header. Hero section can be Default or utilize a Content Block.

    Default hero section type is a basic section with color or image background, which contains a page title and/or breadcrumbs. Scape offers a variety of options to style a default hero section - a number of size and layout settings, background and typography settings, as well as allows to add modern SVG dividers and a scroll-down button.

    If you choose to use a content block instead of default hero section type, you can add basically any type of content into your hero section through a content block - images, headings, contact forms or sliders. Learn how to use content blocks here.

    Setting default hero section

    Here are the minimum settings required to set up a default hero section:

    1. Navigate to Theme Options -> Page Settings -> Hero Section.
    2. In General tab set Hero Section option to Default.
    3. Choose the layout in Hero section layout option in General tab.

    Setting hero section using a content block

    Here are the minimum settings required to set up a hero section using a content block:

    1. Navigate to Theme Options -> Page Settings -> Hero Section.
    2. In General tab set Hero Section option to Content block.
    3. Choose a content block to use in Content Block dropdown in General tab.

    Please not that when using a content block in hero section, background and typography settings become inactive. All styling and content is set within the content block that is being used.

    For more information and description of hero section options, please read this article.

    Pages

    Creating a new page

    Pages are usually the base of your website. To create a new page:

    1. Navigate to Pages tab in your WordPress admin sidebar and click Add New.
    2. Enter the page title into the title field.
    3. Add content to your page using classic text editor or WPBakery Page Builder (see more on how to use the page builder here).
    4. Set individual options for the page in Page Settings box. Please bear in mind that these options will only affect the current page. They will also override the global options. To set global options for your website, navigate to Theme Options -> Page Settings.

    Full-screen slider

    A page can be turned into one full-screen slider as can be seen in theme demo. This can be useful for onepage websites, home pages or landing pages and help them really stand out from the pack. Instructions on how to make a full screen page slider can be found here.

    Posts

    Creating a new post

    No blog can exist without posts, so first you need to create some. To create a new post:

    1. Navigate to Posts tab in your WordPress admin sidebar and click Add New.
    2. Enter the post title into the title field.
    3. Add content to your post using classic text editor or WPBakery Page Builder (see more on how to use the page builder here).
    4. Choose post format, add media and set up parameters specific to your chosen post format. Learn more on this below in Post formats section.
    5. Add a featured image to your post. This can be done in a box on the right hand side of your page.
    6. Set individual options for the page in Page Settings box. Please bear in mind that these options will only affect the current page. They will also override the global options. To set global options for your website, navigate to Theme Options -> Page Settings.

    Post formats


    When creating a post, you need to choose an appropriate post format to display your post media. This can be done in a box on the right hand side of your screen.

    After choosing any post format (except for Standard) a new Options box will appear under Page Settings box depending on what type of media and data your chosen post format allows to add. Below is the list of available Post formats and related options.

    1. Standard format

      No image or any other media is displayed in a single post and default/masonry blog layouts, only post content is displayed.

    2. Image format

      Image is displayed when viewing blog and single post.

      Post settings
      • Upload an image - add an image to be displayed in a post. It can be the same image as your featured or a different image or your taste.
    3. Gallery

      Image slider is displayed within the post.

      Post settings
      • Add gallery images - add images to be displayed in a post.
      • Slider aspect ratio - aspect ratio that the images in the slider will have. Make sure you enter the ratio in the right format, e.g., 4:3, 16:9.
      • Slider navigation skin - color skin for slider navigation bullets and buttons. Choose based on how dark your images are - for dark images choose light, for light images choose
    4. Video

      Allows to display Youtube, Vimeo or Selfhosted video in a post.

      Post settings
      • Youtube video ID - enter only ID of your video, which goes after watch?v= part. For example, if the full URL is https://www.youtube.com/watch?v=mVrn-TMtRjA, then your video ID will be mVrn-TMtRjA.
      • Vimeo video ID - enter only ID of your video which you can find at the end your video URL. For example, if the full URL is https://vimeo.com/173405377, then your video ID will be 173405377.
      • Self-hosted video file - upload or attach a self-hosted video file to your post.
      • Video poster - an image which is shown to users until the video is played.
    5. Audio

      Allows to display external or selfhosted audio, as well as Soundcloud or Spotify embed in a post.

      Post settings
      • External audio - enter a link to external audio file if you want to add audio from another site/source.
      • Self-hosted audio - upload or attach a local audio file to your post.
      • Audio title optional - add an audio title to be displayed in audio player. Is only used with self-hosted audio.
      • Audio poster optional - add an image to be displayed in audio player. Is only used with self-hosted audio.
      • Audio embed - if you want to add Soundcloud or Spotify embed to your post, paste the full embed code in this field.
      • SoundCloud audio ID / Spotify URI - if you are adding Soundcloud or Spotify embed to your post and are using Masonry blog layout please fill in this field. Below are the images explaining how to find your SoundCloud audio ID and Spotify URI:

        Soundcloud ID
        Spotify URI

    6. Quote

      Image with quote text and author.

      Post settings
      • Quote text - enter the text of a quote.
      • Quote author - enter the quote author name.
      • Background image - upload or attach an image to be used as a background for the quote.

    Setting up a blog


    First of all you need to set up a default blog page the usual WordPress way. To do that, create a new page and name it, let's say, Blog. Then navigate to Settings -> Reading in your WordPress admin panel, and select your freshly created Blog page as the Posts page.

    Scape uses content block system to display posts. This means that the next step is to create a new content block with a Post Grid shortcode in it. You can add any other content to that content block that you want to display on your blog page. Using a shortcode to display blog posts allows you to have a truly unlimited number of blogs with the posts assigned exclusively to these blogs.

    The key here is to set Post Grid Settings -> Query option to Global query. This way the shortcode will use the global blog query to display posts, just as a regular blog page would do.

    After this is done, navigate to Theme Options -> Blog & Posts -> Archive and select a content block to use in Content tab.

    All the page settings (header navigation, hero section, layout and footer) for the default blog page and archive pages is controlled in Theme Options -> Blog & Posts.

    You can create an unlimited number of blogs on your website thanks to Scape's unique post display and navigation system. Learn more about it here.

    Portfolio

    Creating a new portfolio item

    To display your portfolio, you need to first add some portfolio items. To create a new portfolio item:

    1. Navigate to Portfolio tab in your WordPress admin sidebar and click Add New.
    2. Enter the portfolio item title into the title field.
    3. Add content to your portfolio item description using classic text editor or WPBakery Page Builder (see more on how to use the page builder here).
    4. Set up Portfolio item settings depending on what and how you want to display on your portfolio item page. For a detailed description of these settings please read the section dedicated to Portfolio grid.
    5. Set individual options for the page in Page Settings box. Please bear in mind that these options will only affect the current page. They will also override the global options. To set global options for your website, navigate to Theme Options -> Page Settings.

    Portfolio content settings

    Layout tab

    Options here copy the ones you can find in Theme Options -> Portflio -> Portfolio item -> Content tab. If set to anything except Inherit, will override the global options.

    Media tab

    This tab is responsible for portfolio media display on a single portfolio item page. It contains the following options:

    • Show media

      Allows to show or hide media on a portfolio item page. Hiding media may be useful if it's a single image and it is already shown in the Hero Section.

    • Portfolio item page layout

      Option responsible for type of media will be displayed on a portfolio item page. Based on its value the rest of the fields within Media tab will be shown or hidden. The available layouts are:

      1. Image slider
        • Media width - select if you want the image slider to be full-width or the same width as the page content.
        • Add images - upload or attach images to use with the slider.
        • Image aspect ratio - aspect ratio that the images in the slider will have. Make sure you enter the ratio in the right format, e.g., 4:3, 16:9.
        • Navigation arrows - choose light or dark skin based on how light/dark the images are.
        • Navigation bullets - choose light or dark skin based on how light/dark the images are.

      2. Image carousel
        • Media width - select if you want the image slider to be full-width or the same width as the page content.
        • Add images - upload or attach images to use with the slider.
        • Image aspect ratio - aspect ratio that the images in the slider will have. Make sure you enter the ratio in the right format, e.g., 4:3, 16:9.
        • Navigation arrows - choose light or dark skin based on how light/dark the images are.
        • Navigation bullets - choose light or dark skin based on how light/dark the images are.

      3. Vertical gallery
        • Add images - upload or attach images to use with the slider.
        • Grid gutter - distance between the images in the grid.

      4. Justified image gallery
        • Add images - upload or attach images to use with the slider.
        • Grid row height - height that one image row should take on the screen.
        • Grid gutter - distance between the images in the grid.

      5. Masonry image gallery
        • Add images - upload or attach images to use with the slider.
        • Grid gutter - distance between the images in the grid.
        • Grid columns - maximum number of columns in the grid.

      6. Zig-zag / Checkers

        These two layouts allow to divide your portfolio item page into horizontal sections, with each of them containing a heading, text description and an image. You can set configure each section differently to make your portfolio item page look more interesting. Each section has the following options:

        • Heading - title of your portfolio item section.
        • Heading color - color of your title.
        • Description - short textual information.
        • Description color - color of your description text.
        • Image - add image to your portfolio item section.
        • Image position - on the right or on the left.
        • Section background color - background color that your section will have.

      7. Video player

        Allows to add a Youtube, Vimeo or Selfhosted video to your portfolio item.

        • Self-hosted video - upload or attach a self-hosted video file to your post.
        • Youtube video ID - enter only ID of your video, which goes after watch?v= part. For example, if the full URL is https://www.youtube.com/watch?v=mVrn-TMtRjA, then your video ID will be mVrn-TMtRjA.
        • Vimeo video ID - enter only ID of your video which you can find at the end your video URL. For example, if the full URL is https://vimeo.com/173405377, then your video ID will be 173405377.

      8. Audio player

        Allows to display external or selfhosted audio, as well as Soundcloud or Spotify embed in a post.

        • Self-hosted audio - upload or attach a local audio file to your post.
        • Audio poster optional - add an image to be displayed in audio player. Is only used with self-hosted audio.
        • Audio embed - if you want to add Soundcloud or Spotify embed to your post, paste the full embed code in this field.
        • SoundCloud audio ID / Spotify URI - if you are adding Soundcloud or Spotify embed to your post please fill in this field. Below are the images explaining how to find your SoundCloud audio ID and Spotify URI:
          Soundcloud ID
          Spotify URI

      9. Custom layout

        Allows to create any kind of custom layout using WPBakery Page Builder

    Details tab

    Details is a custom field that you can add to your portfolio to specify certain features of its items. Details may help you describe portfolio items better, making it easier for website visitors to assess and compare them. For example, you can add a client, date, materials etc. as detail fields and then specify them for each portfolio item.

    Detail fields should be added in Theme Options -> Portfolio -> Portfolio item -> Content tab. After you save and sort the details in Theme Options, reload the page and the fields will be visible on your Edit portfolio item page.

    List tab

    Options in this tab control the appearance of portfolio items in metro portfolio layout.

    • Item tile width

      Specify how many horizontal columns should the item take in a grid.

    • Item tile height

      Specify how many rows should the item take in a grid.

    • Item overlay color

      Specify item overlay color in a grid. Allows each item to have its own overlay color.

    Setting up a portfolio


    Scape uses content block system to display a portfolio. This means that first of all you need to create a new content block with a Portfolio Grid shortcode in it. You can add any other content to that content block that you want to display on your portfolio archive pages.

    The key here is to set Portfolio Grid Settings -> Query option to Global query. This way the shortcode will use the global portfolio archive query to display portfolio items.

    After this is done, navigate to Theme Options -> Portfolio -> Archive and select your freshly created content block to use in Content tab. Also, set how many portfolio items per page should be displayed in a portfolio grid.

    Shop

    What's needed

    To set an online shop as seen in Scape demo, we recommend using WooCommerce. It's a free plugin which you can find and download from Plugins page in your WordPress panel, or grab your copy here.

    Scape is fully compatible with the plugin, as well as applies theme-specific styling to WooCommerce elements, and adds some unique features. In addition, Scape supports Yith Wishlist plugin, which allows creating user wishlists and add a wishlist button to products. You can use a free version of the plugin or buy a paid version for additional features.

    Setting up shop

    For detailed instructions on how to add products and set up your shop, please read the official WooCommerce documentation.

    If you want to add a wishlist system to your shop, please refer to the official Yith Wishlist documentation.

    Important differences

    Although Scape theme relies on the WooCommerce plugin, it also introduces certain changes to how the plugin interferes with the theme.

    1. Columns

      Shop columns are controlled not by the usual WooCommerce settings, but should be set in Theme Options -> WooCommerce -> Shop page -> Content. There you can set the number of products displayed per page, as well as a maximum number of products or product categories displayed in a row.

      Please note that product grids are responsive and the number of items in a row depends not on the browser window size (as in most themes), but on the grid width, which is more precise and makes the product grid appearance better.

    2. Image size

      WooCommerce provides options to control the image size in the product grid and on the product page. However, Scape theme has an advanced responsive and smart lazy-loading image display system, which works independently from the WooCommerce options.

      In other words, WooCommerce image settings will not work, and instead and appropriate and best-matching image size will always automatically be used based on the real size that the image takes on a page and the user's device pixel density.

    Product carousels

    You may have seen product carousels on Scape demo pages and might be wondering how they are made.

    These are simple product shortcodes that are available in WBPakery Page Builder but with a simple modification. The trick is to add the product-slider class to the parent row or column, which contains the product shortcode. This way Scape will understand that the product grid in this row or column should be transformed into a product slider.

    This works with any product grid shortcodes, e.g. Recent Products, Featured Products, Best Selling Products etc.

    Sidebars & widgets

    Creating sidebars

    To add widgets to your website, you first need to create a sidebar(s). In Scape you can create an unlimited number of sidebars and use them on your pages in different combinations. Separate sidebars can be assigned to individual pages, posts, portfolio items, products, archive pages or the whole website.

    Sidebars can be added in Theme Options -> Components -> Sidebars:

    • Click Add More button to add a new sidebar.
    • Enter sidebar name into the input field.
    • Reorder sidebars by dragging & dropping them.
    • Delete sidebars by clicking Remove button.

    Adding widgets

    After a sidebar is added, please make sure you have saved Theme Options and reloaded the page. Navigate to Appearance -> Widgets in your dashboard and you will see your new sidebar. Drag & drop widgets to a sidebar you want them to appear in.

    Adding sidebars to pages

    When your sidebar is created and filled with widgets, it's time to add it to a page. It can be done in a number of ways. Select your sidebar in a Sidebar to use dropdown in:

    • Globally - in Theme Options -> Page Settings -> Layout.
    • For ablog / portfolio / shop - in Layout tab in a corresponding section in Theme Options.
    • Globally fora single post / portfolio item / product - in Layout tab in a corresponding section in Theme Options.
    • For a separate single page / post / portfolio item / product - in Page settings -> Layout -> Sidebar to use on Edit page.
    For a sidebar to appear, make sure that you have selected a page layout with a sidebar in Page layout option and have selected a valid column width in Sidebar width option.

    Page builder



    Scape uses a customized version of WPBakery Page Builder to allow creating and organizing your content in a very convenient way using a visual page builder.

    Before starting to work with the page builder, you need to make sure it is enabled for all the pages and post types that you are planning to use it for. Navigate to WPBakery Page Builder -> Role Manager and check the necessary post types in relevant user type tabs.

    When you have enabled the page builder, you should see a button switch between the Classic Editor and the Backend Editor on your Edit page.

    For more information on how to use theme-specific shortcodes please read the dedicated section of this documentation. Full page builder plugin documentation can be accessed here, and video tutorials can be found here.

    Templates



    To further enhance your user experience with Scape, the theme comes with 250+ shortcode templates, which allow to create complex and stunning layouts in seconds. It significantly reduces time needed for creating website pages.

    Each template consists of multiple shortcodes (or whole full-screen page sections) with a configured layout, which are already styled and ready to be used on a page. All you need to do is to find a template which you like using theme's template panel and click on tile with the template you want to add to your page. To access the template panel, on your click on a Add Template button in the Page Builder and navigate to Scape templates tab.

    There you will find over 250 carefully crafted and ready-to-use templates. Many of them replicate sections from the theme demos so that you don't need to import the whole demo in case you just need some content elements from it.

    Important notes

    When you add templates to your page, some of them may not look or work exactly the same as in demo or on the preview, and here's why and what to do about it.

    Colors

    Sometimes the colors will be different in a template when you add it to a page. When the color is not important for the design of a particular element, often we have made the elements in templates to use the theme accent color. This way the elements will immediately match your website design.

    Menus

    You can find that menus in templates are either empty or look different from the preview. This happens because the shortcode could not find a menu on your website with the same id as it has saved. All you need to do is to simply assign an existing menu in the menu shortcode settings.

    Contact Forms

    The story with contact forms is similar to the one with menus. You can see the message like MailChimp for WordPress error: There is no form with ID 4511, perhaps it was deleted? for the MailChimp forms or [contact-form-7 404 "not Found" for Contact Form 7 forms. All you need to do is to create a form and assign it's id to the respective shortcode.

    Images

    Since the shortcodes in templates use images which are not present on your website, after being added to a page they display a web image from a demo website. You just need to add your own image from your WP website in shortcode settings, and it will replace the default one. In case you need to remove the default image without adding your own one, you need to first add an image from your website, save the shortcode, and then remove the image in shortcode settings and save it again.

    General settings

    General

    • Layout width
      Maximum width to which your website content expands. Recommended value is 1200.
    • Enable smooth scroll in Chrome and Safari browsers
      While no native smooth scroll is not present in these browsers, you can simulate it by switching this option ON.
    • Disable appearance
      Allows you to globally disable appearance animation for shortcode elements for small screens.

    Images

    • Responsive image sizes
      This is a part of the smart image system, which controls which image sizes are used on your site.

      Every time you upload an image to your WordPress site, smaller versions of that image are created to be used in smaller elements that do not require full-size images. This allows to save the bandwidth and reduce the page load time.

      This option allows to control exactly which image sizes are being saved. This field must contain at least four sizes, which correspond to default WordPress sizes - thumbnail, medium, medium-large, and large, Additional sizes are optional, but are recommended if you are planning to use large sliders, image backgrounds etc.

      The default values are optimized for the theme. Please change them only in case you are aware of what you are doing.

      After you change the values in this field and save Theme Options, you need to regenerate thumbnails, so that new versions of already uploaded images are created. This can be easily done with Regenerate Thumbnails plugin.
    • Image lazy-loading
      Enables asynchronous image loading. Can significantly improve the page load speed on pages with many and/or large images. This affects the majority of images controlled by the theme, it however will not have effect on hard-coded images or images added by any 3rd-party plugins.

      Each shortcode element which contains an image, has a separate option to enable or disable lazy image loading irrespective of what is selected in this global option.

    • Image preloader animation
      Used together with image lazy loading. When enabled, an preloader is shown while the image is being loaded. The preloader can be set up in Theme Options -> Components -> Preloader -> Elements preloader.

      Each shortcode element which contains an image, has a separate option to enable or disable lazy image loading irrespective of what is selected in this global option.

    • Social media
      Here you can enter the URLs to the social accounts that will be used in various social icon elemenst on your website.

    Custom code & analytics

    • Code in <head>
      The code to be placed right before the closing of the <head> tag.
    • Code after <body>
      The code to be placed immediately after the opening of the <body> tag.
    • Code before </body>
      The code to be placed right before the closing of the </body> tag.

    Custom post types

    This option can be used if you are adding custom post types to your website. Scape theme already includes a custom post type name Portfolio, but you can add more if you want. Adding the values into the input fields here will allow you to have separate Page Settings for your custom post types and their archives, just like you have by default for posts and portfolio items. Here's how it should be done:

    Let's say you have created a custom post type with the name Events and the key events by adding a register_post_type() function to your functions.php file.

    register_post_type( 'events', $args );

    events here is your custom post type key. After you add it to the Custom post types option, save the options and reload the page, you will see that a new section has been created for your custom post type in Theme Options, allowing to control the key layout elements on the page.

    Header settings

    Overview and workflow

    Due to the broad variety of options, Header settings page might look a bit confusing at first. However, once you get acquainted with the basic workflow principles and features described here, everything should become clear and straightforward.

    If you are looking for the general information on how to set up the header, please read this article.

    Here's the common workflow of setting up a basic header:

    1. Header styles

      Choose one of the layout styles that you want to use on your website. These sections allow to set individual look for any of the available header layout styles which can be later used on your pages. The alt suffix means that it is the same header style, but can be styled differently (e.g., you have a header with the white background, and you need to have one with a transparent background on one of the pages).

    2. Menu builder

      Menu builder consists of two key areas: header elements and drop zones. First one represents the available elements that can be added to the header, while the second one represents the headed areas in the real header. Simply drag and drop the elements to the areas to add them to your header. They can be reordered and put into other areas later.

      When you start dragging the element, the areas which can accept it will be highlighted with yellow. The areas which don't accept it will be highlighted with red.

      You will notice that some areas have a darker grey color and are unavailable, like logo, menu area, or menu button. They display the key elements in the header and cannot be changed from the menu builder.

    3. Header style settings

      These tabs contain all the options needed to configure the header style, including height, colors, logo and typography settings. More info on these options can be found below.

    Header styles

    This section is designed to describe the options available for the header styles. Since the majority of options can be found in multiple style sections, they are grouped into one list.

    General settings
    tab
    • Header layout
      Only for top header layout styles
      Choose between one of the three available header width layouts.
    • Header top bar height
      Only for some top header layout styles
      Set the height of the header top bar.
    • Header main section height
      Only for top header layout styles
      Set the height of the main header section (the one which contains the main menu and the logo)
    • Header bottom bar height
      Only for some top header layout styles
      Set the height of the header bar located under the main header section.
    • Enable horizontal borders
      Only for top header layout styles
      Enable or disable the display of the horizontal borders between the header top bar, bottom bar, and main section.
    • Menu animation style
      Select the animation style for the top-level menu items in the main menu.
    • Mobile breakpoint
      Set the height and/or width under which the header must be switched to mobile header.
    Logo
    tab
    • Light style logo
      Logo image to be used with the light header skin. Upload the logo file that is at least 2x larger than the size that it should take in your header. This is needed for crisp logo display on high pixel density screens. Image copy of the regular size for normal screens will be created automatically.
    • Dark style logo
      Logo image to be used with the dark header skin. Upload the logo file that is at least 2x larger than the size that it should take in your header. This is needed for crisp logo display on high pixel density screens. Image copy of the regular size for normal screens will be created automatically.
    • Logo size
      Set the height and width of the logo.
    • Logo top offset
      Enter the value in pixels if you want to shift your logo vertically.
    • Logo left offset
      Enter the value in pixels if you want to shift your logo horizontally.
    Typography
    tab
    • Header font style
      Set the fonts style of the main header section.
    • Header menu icon size
      Set the size of the icons that are displayed next to the main menu items. If left blank, icons be the same size as the menu items text.
    • Top bar font style
      Set the fonts style of the header top bar.
    • Bottom bar font style
      Set the fonts style of the header bottom bar.
    Light skin
    tab

    Options in this section control the colors of the elements in default, hover and active/accent (e.g., current menu item) states in the light skin header.

    Dark skin
    tab

    Options in this section control the colors of the elements in default, hover and active/accent (e.g., current menu item) states in the dark skin header.

    Components
    tab

    Options in this section allow to set:

    • Text content of the Text info element.
    • Inner text and link URL of the Primary and Secondary button elements
    • Content block to use in the Content block element.
    Header styles 7 and 8
    The following options belong only to the header styles 7 and 8
    Idle header settings
    tab

    Options here are the same as the General settings described above, they control the always-visible top section of the header.

    Idle header - light skin
    tab

    Options in this section control the colors of the elements in default, hover and active/accent (e.g., current menu item) states in the light skin header's top section.

    Idle header - dark skin
    tab

    Options in this section control the colors of the elements in default, hover and active/accent (e.g., current menu item) states in the dark skin header's top section.

    Overlay layer settings
    tab

    Options in this section control the colors of the elements in default, hover and active/accent (e.g., current menu item) states in the dark skin header's top section.

    Sticky header

    This section controls the look of the top header in sticky state if the sticky header is enabled. Options here duplicate the ones that can be found in the sections dedicated to header styles, except for the General settings tab.

    General settings
    tab
    • Sticky header main section height
      Controls the height of the main header section in the sticky state. Useful when you want your top header to shrink in sticky state.
    • Show top bar in sticky header
      If you have elements in your top bar, this option controls whether the top bar is shown or hidden when the header is in the sticky state.
    • Show bottom bar in sticky header
      If you have elements in your bottom bar, this option controls whether the bottom bar is shown or hidden when the header is in the sticky state.

    Submenu

    This section controls the appearance of the submenu items.

    Colors
    tab

    Options here allows to set the colors of the submenu items in different states.

    Typography
    tab

    Options here allows to set the font style of the submenu items.

    Header overlay panel

    This section controls the appearance of the overlay panel which is triggered by the overlay button.

    • Background color
      Set the background color of the overlay.
    • Color skin
      Select the skin based on the background color lightness. It will affect the colors of the widgets if you put them into the overlay panel.
    • Content block
      Select a content block to use as the content of the overlay panel.

    Side area panel

    This section controls the appearance of the side area panel which is triggered by the sidearea button.

    • Side are width
      Set the width of the side area in pixels.
    • Background color
      Set the background color of the side area.
    • Color skin
      Select the skin based on the background color lightness. It will affect the colors of the widgets if you put them into the side area.
    • Content block
      Select a content block to use as the content of the side area.

    Search panel

    This section controls the appearance of the search panel which is triggered by the search button header element.

    • Post types displayed in search form dropdown
      This option allows the search field to have a dropdown next to it with the registered post types (pages, posts, portfolio, etc.) so a user can choose in which category to search. Unchecking all will remove the dropdown.
    • Panel background color
      Set the background color of the search panel.
    • Panel color skin
      Select the skin based on the background color lightness. It will affect the colors of the widgets if you put them into the side area.
    • Content block
      Select a content block to use as the content of the search panel.
    • Content block display breakpoint
      Enter the screen width and height values under which the content block should be hidden (so that it's not partly off the screen).

    Mobile navigation

    This section controls the appearance of mobile header navigation. Majority of the options here were already described in the section related to header styles, therefore only the ones that are exclusive to the mobile navigation will be explaned.

    • Sticky mobile header style
      Controls the sticky state style of the mobile top header.
      • Disabled - sticky header is not active
      • Default - sticky header is always enabled
      • On scroll up - sticky header is shown only when a user scrolls the page up

    Page settings

    Header navigation

    • Header menu
      The main menu to be displayed in the header. You should first create a menu in Appearance -> Menus.
    • Header style
      Choose a header style to use, or select No header to disable page header. Irrespective of which header style you select, it should be first set up in Theme Options -> Header Settings

      You will notice that some styles here are duplicated with the (alt) suffix. This means that it's the same style as the main one (without the suffix), and can be used when a header variation has to be used on separate pages.

      For example you have a header with a white background, and you want to create a landing page with a transparent header and a different layout - in this case an alternative header can be of use.
    • Header skin
      Choose light or dark header style to use. Each of them can be set in Theme Options -> Header Settings in a corresponding header style sub-section.
    • Sticky header style
      Controls whether and how the sticky header works:
      • Disabled - sticky header is not active
      • Default - sticky header is always enabled
      • On scroll up - sticky header is shown only when a user scrolls the page up
    • Sticky header skin
      Choose light or dark header style to use, similar to Header skin option. Sticky header skins can be set up in Theme Options -> Header Settings in a Sticky Header sub-section.

    Hero section

    General
    tab
    • Hero section
      Choose a header section type to use or leave empty to disable Hero section.
      • Default - standard hero section type, which can be customizedin Theme Options.
      • Content block - lets you display a content block as a hero section.
    • Content block
      Only for content block hero section type
      Choose a content block to display as the hero section.
    • Hero section layout
      Only for default hero section type
      Defines how the page title and breadcrumbs will be positioned in the hero section.
    • Relative height
      Only for default hero section type
      Defines the height of the the hero section as a percentage of screen height. Will be inactive when set to 0 - then the height will be set based the hero section content.
    • Min. height
      Only for default hero section type
      You can set the minimum height that the hero section should take in px. Useful when relative height is used, so that the hero section doesn't become narrower than its content.
    • Additional top padding
      Only for default hero section type
      Base top padding is applied to the hero section based on the header height. If you want more offset from the top, use this option. Padding should be set in px.
    • Additional bottom padding
      Only for default hero section type
      Base bottom padding is applied automatically. If you want more offset from the bottom, use this option. Padding should be set in px.
    Background
    tab
    • Background
      Only for default hero section type
      Background settings for the hero section.
    • Use featured image
      Only for default hero section type
      When switched ON, will still recognize the Background settings, but instead of a predefined image will use a featured image as a background for the hero section. This will work on single pages, like post, page, portfotion item, product pages.
    • Overlay type
      Only for default hero section type
      Color overlay can help you easily fade out the picture to make the text clearly visible or add the hero section a stylish look without the need to use the image editing software.
      • Solid color - single color overlay.
      • Gradient - two color gradient overlay.
    • Overlay color
      Only for default hero section type
      Set the color of the hero section overlay.
    • Overlay color gradient
      Only for default hero section type
      Set the gradient colors for the hero section overlay.
    • Overlay gradient direction
      Only for default hero section type
      Select the color gradient direction for the hero section overlay.
    • Overlay opacity
      Only for default hero section type
      Set the opacity of the hero section overlay from 0 to 1.
    Effects & decoration
    tab
    • Scroll effect
      Only for default hero section type
      Choose between the available scroll effects and no scroll effect.
      • Content zoom in - page content is zoomed out on page load and is zoomed in to normal as the user scrolls down the page.
      • Hero section 3d slide out - hero section is zoomed out as the user scrolls down the page.
    • Full hero section scroll
      Only for default hero section type
      On the first mouse scroll event the hero section is scrolled down fully to the page content. Likewise, it is scrolled back up completely when the user reaches the top of the page content.
    • Image parallax effect
      Only for default hero section type
      Allows to enable the background image parallax effect. Two types of parallax are available:
      • Scroll parallax - vertical parallax effect on page scroll.
      • Mouse move parallax - image moves as the user moves the mouse cursor.
    • Parallax strength
      Only for default hero section type
      Allows to set the strength of the parallax effect.
    • Fadeout effect
      Only for default hero section type
      Allows to add a fadeout effect, when the contents shift and fade out as the user scrolls the page down.
    • Bottom decoration
      You can add an SVG divider decoration to your hero section out of six predefined layouts.
    • Decoration color
      Set the color of the bottom divider decoration. The color should match the color of the background of the section that comes right after the hero section (most often - white).
    • "Scroll-down" button
      Allows to add one of six variants of a scroll-down button to the bottom of your hero section. The button scrolls the page straight to the end of the hero section when clicked.
    • "Scroll-down" button skin
      Select from two available scroll-down button skins. Light should be used for dark background, while Dark is best for use with light background.
    Typography
    tab
    • Title color
      Only for default hero section type
      Color of the page title in the hero section.
    • Title font style
      Only for default hero section type
      Set the font style of the page title in the hero section.
    • Enable breadcrumbs
      Only for default hero section type
      Enable or disable the breadcrumbs.
    • Breadcrumb link color
      Only for default hero section type
      Set the default and hover color of link in breadcrumbs.
    • Breadcrumbs separator color
      Only for default hero section type
      Set the color breadcrumbs separator.
    • Breadcrumbs font
      Only for default hero section type
      Set the font style of breadcrumbs.
    • Breadcrumbs separator
      Only for default hero section type
      Select one of three breadcrumbs separators - slash, angle or circle.

    Layout

    • Layout width
      Sets the maximum width limit to which your website content expands. Choose between Full page width and the Default site width. The latter allows to set the content limit in px.
    • Content width limit
      Only for default site width
      Sets the maximum width to which your website content expands in px.
    • Page background color
      Allows to set the background color of your pages.
    • Content top padding
      Sets the content section's top padding in px - a distance between the hero section and the page content.
    • Content bottom padding
      Sets the content section's top padding in px - a distance between the page content and the footer.
    • Page layout
      Allows to choose one of 5 page layouts. When one of the sidebar containing layout is chosen, the following options can be set.
    • Sidebar width
      Only for layouts with sidebar
      Sets the width of the sidebar in px.
    • Sidebar top padding
      Only for layouts with sidebar
      Adds extra offset at the top of the sidebar to make it align with the page content. Units - px.
    • Sidebar content skin
      Only for layouts with sidebar
      Allows to choose between the light and dark skins. The color skin will affect the colors that will be applied to the widgets within the sidebar. Choose light if the background is light and dark for the dark background.
    • Sidebar to use
      Only for layouts with sidebar
      Select a sidebar which you want to display. If there are no sidebars shown, you need to first create one in Theme Options -> Components -> Sidebars. Read more on using sidebars and widgets here.
    • Sidebar base font size
      Only for layouts with sidebar
      Allows to set the base font size for the sidebar elements in case you want the text to appear smaller or bigger than by default.

    Footer

    General
    tab
    • Enable footer
      Select whether to display footer or not.
    • Content block
      Select a content block to display as the content of your site's footer. You first need to create one. For more information on content blocks, please read this.
    • Footer style
      Select one of two available footer styles. Underlying header is fixed under the page content and is revealed as the user scrolls down towards the end of the page.
    Widgets
    tab
    • Widgets skin
      Allows to choose between the light and dark skins. The color skin will affect the colors that will be applied to the widgets within the footer. Choose light if the background is light and dark for the dark background.
    • Colors
      Color options let you override the colors predefined by the widgets skin option and set custom ones.

    Page


    Header navigation | Hero section | Layout | Footer
    tab

    Options within Header navigation, Hero section, Layout, and Footer tabs duplicate the ones that can be found in Theme Options -> Page Settings, and are described here. These settings follow the same logic as the global ones, but if set differently - will override the global settings.

    Blog & Posts

    Post entry

    These options define how a single post entry page looks like.


    Header navigation | Hero section | Layout | Footer
    tab

    Options within Header navigation, Hero section, Layout, and Footer tabs duplicate the ones that can be found in Theme Options -> Page Settings, and are described here. These settings follow the same logic as the global ones, but if set differently - will override the global settings.

    Content
    tab
    • Post heading font
      Set the font style of the post title.
    • Post content font
      Set the font style of the post content.
    • Author description block on post page
      Choose whether to display a block with post author details after the post content.
    • Comments on post page
      Choose whether to display a comments after the post content.
    Meta elements
    tab
    • Author name in post meta
      Allows to display or hide author name in post meta.
    • Date in post meta
      Allows to display or hide date in post meta.
    • Post category in post meta
      Allows to display or hide post categories in post meta.
    • Post tags
      Allows to display or hide post tags after the post content.
    Social buttons
    tab

    Here you can choose between disabling the share feature, showing the predefined social media share buttons, or entering your custom share buttons code.

    If you choose Predefined buttons, you will be able to choose which buttons to show and which to hide, and also whether to show the Like button.

    Navigation bar
    tab

    Navigation bar is a navigation section on a single post page that allows one-click navigation between the posts and the main blog page.

    • Layout
      Choose one of the three navigation layouts or leave empty to disable the navigation bar:
      • Top - navigation bar will be displayed before the post content.
      • Bottom - navigation bar will be displayed after the post content.
      • Sticky - fixed navigation buttons will be displayed in the bottom left and bottom right corners of the screen
    • Background color
      Set the background color of the navigation bar.
    • Navigation skin
      Choose Light skin if the navigation bar has a light background color, or Dark skin in case of a dark background.
    • "Back to list" button
      Choose whether to display a button that leads back to the main blog page.
    • Navigation buttons
      Choose whether to display a prev and next post buttons.
    Related posts
    tab
    • Related posts display
      Choose to show or hide the related posts block.
    • Relation by
      Select whether related posts should be chosen by category or tag.
    • Total number of related posts shown
      Set the number of related posts to be shown.
    • Slider autoplay speed
      Set the related posts slider autoplay speed in seconds. Or set the slider to 0 to disable autoplay.
    • Display post category
      Select whether to display the post category in the post tile.
    • Display post date
      Select whether to display the post date in the post tile.

    Archives

    These options define how the posts archive pages look like.


    Header navigation | Hero section | Layout | Footer
    tab

    Options within Header navigation, Hero section, Layout, and Footer tabs duplicate the ones that can be found in Theme Options -> Page Settings, and are described here. These settings follow the same logic as the global ones, but if set differently - will override the global settings.

    Content
    tab
    • Content block
      Choose a content block with a Post Grid shortcode in it to display the list of posts on blog archive pages. For more info on how to set up the blog please read this.

    Author page

    These options define how the blog author page looks like.

    Header navigation | Hero section | Layout | Footer
    tab

    Options within Header navigation, Hero section, Layout, and Footer tabs duplicate the ones that can be found in Theme Options -> Page Settings, and are described here. These settings follow the same logic as the global ones. These options inherit values not from the global values right away, but first from the blog Archives section values. If set differently - will override the blog archives settings.

    Content
    tab
    • Content block
      Choose a content block with a Post Grid shortcode in it to display the list of posts on blog archive pages. For more info on how to set up the blog please read this.

    Portfolio

    Portfolio item

    These options define how a single portfolio item page looks like.


    Header navigation | Hero section | Layout | Footer
    tab

    Options within Header navigation, Hero section, Layout, and Footer tabs duplicate the ones that can be found in Theme Options -> Page Settings, and are described here. These settings follow the same logic as the global ones, but if set differently - will override the global settings.

    Content
    tab
    • Content layout
      Allows to choose one of the possible content/media layouts for the portfolio item pages.
      Please note that layouts like left and right don't work with media types that need full content width: image carousel, zig-zag, and checkers.
    • Show title
      Choose whether to display or hide the portfolio item title.
    • Show description
      Choose whether to display or hide the portfolio item description.
    • Show media
      Choose whether to display or hide the portfolio item media.
    • Show like button
      Choose whether to display or hide the like button.
    • Show share button
      Choose whether to display or hide the share buttons.
    • Show details
      Choose whether to display or hide the portfolio item details.
    • Portfolio item details
      Allows to add and sort the portfolio item details fields and add label to them. This allows to add characteristics to each portfolio item separately. Please read more on how to use the portfolio item details here.
    Navigation bar
    tab

    Navigation bar is a navigation section on a single portfolio item page that allows one-click navigation between the portfolio items and the main portfolio page.

    • Layout
      Choose one of the three navigation layouts or leave empty to disable the navigation bar:
      • Top - navigation bar will be displayed before the portfolio item content.
      • Bottom - navigation bar will be displayed after the portfolio item content.
      • Sticky - fixed navigation buttons will be displayed in the bottom left and bottom right corners of the screen
    • Background color
      Set the background color of the navigation bar.
    • Navigation skin
      Choose Light skin if the navigation bar has a light background color, or Dark skin in case of a dark background.
    • "Back to list" button
      Choose whether to display a button that leads back to the main portfolio page.
    • Navigation buttons
      Choose whether to display a prev and next portfolio item buttons.

    Archives

    These options define how the posts archive pages look like.


    Header navigation | Hero section | Layout | Footer
    tab

    Options within Header navigation, Hero section, Layout, and Footer tabs duplicate the ones that can be found in Theme Options -> Page Settings, and are described here. These settings follow the same logic as the global ones, but if set differently - will override the global settings.

    Content
    tab
    • Content block
      Choose a content block with a Portfolio Grid shortcode in it to display the list of portfolio items on portfolio archive pages. For more info on how to set up the portfolio please read this.
    • Display link to portfolio item page in lightbox
      You may want to disable this link if you don't want to display the portfolio pages, and just preview the portfolio items in a lightbox.
    Content
    tab

    You can set a custom portfolio post type name here, if you don't like the default one portfolio. It will then be used in portfolio slug and page names.

    WooCommerce

    Product page

    These options define how a single portfolio item page looks like.


    Header navigation | Hero section | Layout | Footer
    tab

    Options within Header navigation, Hero section, Layout, and Footer tabs duplicate the ones that can be found in Theme Options -> Page Settings, and are described here. These settings follow the same logic as the global ones, but if set differently - will override the global settings.

    Content
    tab
    • Product image ratio
      Set the image ratio for images on a single product page, so that they all appear equal size. Commonly used values are:
      • 1 and 1
      • 4 and 3
      • 16 and 10
    • Product image gallery width
      Set the width of the product image gallery in columns.
    • Thumbnails position
      If a product has more than one image, thumbnail preview images will be displayed next to the main image. They can be placed on the left or under the main image.
    • Display breadcrumbs
      Choose whether to display the breadcrumbs above the product title.
    • Display share module
      Choose whether to display the share and like buttons on product pages.
    • Product title font style
      Set the font style of the product title.
    • Product subtitle font style
      Set the font style of the product subtitle.
    Navigation bar
    tab

    Navigation bar is a navigation section on a single post page that allows one-click navigation between the posts and the main blog page.

    • Layout
      Choose one of the three navigation layouts or leave empty to disable the navigation bar:
      • Top - navigation bar will be displayed before the post content.
      • Bottom - navigation bar will be displayed after the post content.
      • Sticky - fixed navigation buttons will be displayed in the bottom left and bottom right corners of the screen
    • Background color
      Set the background color of the navigation bar.
    • Navigation skin
      Choose Light skin if the navigation bar has a light background color, or Dark skin in case of a dark background.
    • "Back to list" button
      Choose whether to display a button that leads back to the main blog page.
    • Navigation buttons
      Choose whether to display a prev and next post buttons.

    Shop page

    Header navigation | Hero section | Layout | Footer
    tab

    Options within Header navigation, Hero section, Layout, and Footer tabs duplicate the ones that can be found in Theme Options -> Page Settings, and are described here. These settings follow the same logic as the global ones, but if set differently - will override the global settings.

    Content
    tab
    • Number of products shown per page
      Select the maximum number of product on a shop page.
    • Product columns
      Select the maximum number of product tile columns on a shop page.
    • Product category columns
      Select the maximum number of product category tile columns on a shop page.
    • Product appearance animation
      Choose the appearance animation for the product tiles on a shop page.

    Components

    Cetegory tile
    tab
    • Layout
      Select whether the content should be on the left or right side of the category tile.
    • Image padding
      Set top, right, bottom and left padding to higher values if you want to easily add more space around your category image.
    • Image background color
      Set the background color of the category tile. If you are using image padding, make sure that the image background is transparent, or monotone and matches the color selected here.
    • Category image ratio
      Set the image ratio for the category tile images, it will affect the vertical size of the tile. Commonly used values are:
      • 1 and 1
      • 4 and 3
      • 16 and 10
    • Display product count in category
      Select whether to display a badge with the total product count within the category in the category tile.
    • Category title font style
      Set the font style of the category title.
    • Category description font style
      Set the font style of the category description.
    Product tile
    tab
    • Image padding
      Set top, right, bottom and left padding to higher values if you want to easily add more space around your product image.
    • Image background color
      Set the background color of the product tile. If you are using image padding, make sure that the image background is transparent, or monotone and matches the color selected here.
    • Product image ratio
      Set the image ratio for the product tile images, it will affect the vertical size of the tile. Commonly used values are:
      • 1 and 1
      • 4 and 3
      • 16 and 10
    • Show second product image on tile hover
      Select whether to display a second product image when the user hovers over the product tile.
    • Display product subtitle
      Select whether to display the product subtitle in the product tile.
    • Display product rating
      Select whether to display the product rating in the product tile.
    • Display image zoom button
      Select whether to display the image zoom button, by clicking which the user will be shown a lightbox with the product images.
    • Display product preview button
      Select whether to display the product preview button, by clicking which the user will be shown a product preview frame with the product description, details and images.
    • Display share buttons in lightbox
      Select whether to display the share buttons in the lightbox shown after the user clicked zoom or preview buttons.
    • Display link to product page in lightbox
      Select whether to display a link to the product page in the lightbox shown after the user clicked zoom or preview buttons.
    • Display Add to wishlist button
      Select whether to display the Add to wishlist button in the product tile. To enable this button, you must have a YITH WooCommerce Wishlist plugin installed.
    • Product title font style
      Set the font style of the product title.
    • Product subtitle font style
      Set the font style of the product subtitle.
    Upsells
    tab
    These options control the look of the upsells block.
    • Number of products
      Select the total number of products to be shown in the up-sells section.
    • Columns
      Select the number of columns in the up-sells section carousel.
    Related products
    tab
    These options control the look of the related products block.
    • Number of products
      Select the total number of products to be shown in the related products section.
    • Columns
      Select the number of columns in the related products section carousel.
    Product badges
    tab
    • Discount amount
      When a product is on sale, a discount badge is shown. This option allows display the discount amount in % inside the badge.
    • Sale badge color
      When a product is on sale, a discount badge is shown. This option allows to control the background color of the sale badge.
    • Custom product badge color
      Scape allows to add custom product badges to your products in Product details when you Edit your product. This option allows to control the background color of the custom badge.

    Utility pages

    Search page

    Header navigation | Hero section | Layout | Footer
    tab

    Options within Header navigation, Hero section, Layout, and Footer tabs duplicate the ones that can be found in Theme Options -> Page Settings, and are described here. These settings follow the same logic as the global ones, but if set differently - will override the global settings.

    Content
    tab
    • Post types displayed in search form dropdown
      This option controls whether and which post types should be added to the search dropdown on the search page. This dropdown allows users to narrow the search to specific post types. If all post types are unchecked, the dropdown will not be shown on the search page.

    404 page

    Header navigation | Hero section | Layout | Footer
    tab

    Options within Header navigation, Hero section, Layout, and Footer tabs duplicate the ones that can be found in Theme Options -> Page Settings, and are described here. These settings follow the same logic as the global ones, but if set differently - will override the global settings.

    Content
    tab
    • 404 page style
      Choose between the default (pre-styled) 404 page content and a custom one.
    • Content block
      If you selected custom in the previous option, this option will allow you to choose a content block to display as 404 page. For more info on how to work with content blocks, please read this.

    Maintenance page

    Scape has a built-in maintenance system, which allows you to show a maintenance page to logged out users whenever they load any website page.

    • Activate maintenance mode
      Allows to activate the Maintenance mode. The mode will only become active after saving the Theme Options.
    • Maintenance page
      Choose a content block to display as a Maintenance page. For more info on how to work with content blocks, please read this.

    Login page

    Scape allows you to have a theme-styled login page instead of the default WordPress login page style.

    • Custom login page
      Allows to activate the custom login page style. When switched On, reveals other login page options.
    • Logo
      Allows you to replace the default WordPress logo with your own logo.
    • Background
      Allows you to set custom background for the login page.
    • Image overlay color
      Allows you to add a color overlay over the background image so you don't need to edit the image. Color alpha setting controls the opacity of the overlay.

    Button

    Primary button

    • Additional selectors
      Enter the element selectors that you would like the primary button styles to be applied to, comma-separated. It can be a class or an id, for example: .custom-button, #my_button

    Default state
    tab

    Here you can set the text and background color, border, border-radius and shadow/glow effect of your primary button in default state.

    Hover state
    tab

    Here you can set the text and background color, border, border-radius and shadow/glow effect of your primary button on hover.

    Secondary button

    • Additional selectors
      Enter the element selectors that you would like the secondary button styles to be applied to, comma-separated. It can be a class or an id, for example: .custom-button, #my_button

    Default state
    tab

    Here you can set the text and background color, border, border-radius and shadow/glow effect of your secondary button in default state.

    Hover state
    tab

    Here you can set the text and background color, border, border-radius and shadow/glow effect of your secondary button on hover.

    Typography

    General

    • Website font settings
      Set the global font style for your website text. The font size paraeter here will be the base for calculating the font size for the majority of elements on your website.

    Headings

    • Headings typography settings
      Set the global headings font style.
    • H1
      Set the global font style for <H1> tag. Will override the general headings font style.
    • H2
      Set the global font style for <H2> tag. Will override the general headings font style.
    • H3
      Set the global font style for <H3> tag. Will override the general headings font style.
    • H4
      Set the global font style for <H4> tag. Will override the general headings font style.
    • H5
      Set the global font style for <H5> tag. Will override the general headings font style.
    • H6
      Set the global font style for <H6> tag. Will override the general headings font style.

    Colors

    Main theme colors

    Options in this section control the main theme colors. They are also available for quick selection in the colorpicker in the page builder.

    • Main theme accent color
      Used in key UI elements and for highlighting important textual or visual information.
    • Dark color
      Used for headings and other bold elements, as well as for dark backgrounds.
    • Light background
      Used in for light backgrounds in theme UI elements.
    • Default text color
      Used in key as a default text color on your website.
    • Light text color
      Used in secondary UI elements.
    • Border color
      Used for borders.
    • Overlay color
      Used for overlays in images, backgrounds etc., unless overridden by specific element's options.

    Color palette

    Adding colors to the color palette is optional, however may be very useful. Once you've added a new color to the palette and saved the Theme Options, the newly added color will become available for quick selection in the colorpicker in the page builder.

    Components

    Sidebars

    Add, sort and name o the sidebars to be used on your website. Once you add a new sidebar, give it a name and save the Theme Options, it will appear as a new sidebar in Appearance -> Widgets. Learn more about how to use sidebars and widgets here.

    Lightbox

    Options in this section control how the lightbox will look like globally. Lightbox is used to display images, audio, video on your website.

    Design & performance
    tab
    • Lightbox overlay background color
      Sets the color of the lightbox backdrop layer. Control the opacity with the color alpha parameter.
    • Navigation with mouse scroll
      When switched on, items in a lightbox gallery can be switched not only with navigation buttons, but also with the mouse scroll wheel.
    Components
    tab
    • Gallery thumbnails
      Choose whether to display the image preview thumbnails in lightbox for better navigation.
    • Image counter
      Choose whether to display the item counter in lightbox.
    Share buttons
    tab

    In this tab you can choose which social share buttons should be displayed globally in lightbox when they are enabled.

    Preloader

    Website preloader
    tab

    Options in this tab control the preloader animation that is shown while the main website content is being loaded and the necessary calculations are being made, before revealing the website content.

    • Preloader style
      Choose one of the preloader styles to use or choose no preloader to disable preloader animation on page load.
    • Website reveal animation
      Choose the animation for revealing the main website content after preloading has ended.
    • Preloader color
      Set the color of the animated preloader.
    • Preloader screen background color
      Set the color of the screen background during the preloader animation.
    Elements preloader
    tab

    Options in this tab control the preloader animation that is shown while the elements containing images are being loaded.

    This preloader will only be shown if lazy image loading and preloader animation is enabled.
    • Preloader style
      Choose one of the preloader styles to use or choose no preloader to disable preloader animation.
    • Preloader color
      Set the color of the animated preloader.

    Filter

    Options in this section control the style of the filter used in post and portfolio grids.

    Light skin
    tab
    • Accent color
      Set the accent color of the filter.
    • Slider know shadow/glow
      Enable or disable the shadow/glow effect of the knob in slider and multichoice type filters.
    Dark skin
    tab
    • Accent color
      Set the accent color of the filter.
    • Slider know shadow/glow
      Enable or disable the shadow/glow effect of the knob in slider and multichoice type filters.

    To-Top button

    To-Top button appears in the bottom right corner of the screen and allows to quickly scroll to the very beginning of the page.

    • Enable To-Top button
      Lets you enable or disable the button globally.
    • Button style
      Choose one of the available button styles.

    Theme fonts

    Options in this section allow to add text and icon fonts to be used with the theme.

    • You can find a detailed information on how to use text fonts in this section of documentation.
    • Detailed information on how to use icon fonts can be found in this section of documentation.

    Page builder


    About WPBakery Page Builder

    Scape theme utilizes WPBakery Page Builder (formerly Visual Composer) as the main page builder plugin. It comes bundled with the theme for free, so you don't need to purchase a separate license.

    WPBakery page builder allows to edit page content in 2 ways - using Backend Editor, and Frontend Editor. The latter allows you to see how your page looks live without leaving the editor. While many other themes disable the Frontend Editor, thus reducing the flexibility and workflow speed of the users, Scape fully supports the Frontend Editor and allows to create pages, posts, portfolio, products etc. easily and in a matter of minutes.

    Not only Scape utilizes the best sides of WPBakery Page Builder, it also adds unique and convenient styling to the interface elements, and enhances and adds extra features for an even better user experience.

    On top of that, Scape adds 50+ unique or modified* shortcode elements to suit every possible need, each of them having multiple options to provide maximum flexibility.

    *Modified - means that a default shortcode element provided by WPBakery Page Builder is enhanced with new features/options or is completely reworked from scratch.

    Using WPBakery Page Builder

    The page builder is fairly intuitive and easy to use. However, if you are not too familiar with it, please refer to the official WPBakery Page Builder Knowledge Base or the plugin's Video Academy.

    Shortcode overview


    Scape comes adds 50+ unique or modified* shortcode elements to suit every possible need, each of them having multiple options to provide maximum flexibility. Majority of elements have multiple styles (usually from 3 to 5), which increases the variety of possible element combination on a page to a new level.

    *Modified - means that a default shortcode element provided by WPBakery Page Builder is enhanced with new features/options or is completely reworked from scratch.

    List of shortcodes

    Below is a list of unique or modified shortcode elements provided by the theme for the reference:

    • Section
      Modification of the default section element, which can contain multiple rows. Adds unique additional features, comparing to the default version.
    • Row
      Modification of the default row element, a basic container for the content. Adds unique additional features, comparing to the default version.
    • Column
      Modification of the default column element, which is a child of a row element. Adds unique additional features, comparing to the default version.
    • Divider
      Simple divider for content separation.
    • Empty space
      Allows to add vertical space between elements.
    • Section divider
      SVG element, which creates a unique separation between two sections with different backgrounds.
    • Content block
      Allows to add a previously saved content block to a page.
    • Tabs
      Modification of the default tabs element. Adds unique additional features, comparing to the default version.
    • Tour
      Modification of the default tour element. Adds unique additional features, comparing to the default version.
    • Accordion
      Modification of the default accordion element. Adds unique additional features, comparing to the default version.
    • Content box
      Styled container for the elements within a column. Can be used for additional element styling or highlighting.
    • Content slider
      Slider/Carousel, in which slides are containers, which other elements can be put into.
    • Default button
      Primary or secondary button which can be styled in Theme Options.
    • Button - link
      Link-styled minimal button.
    • Button - glowing
      Button with the glowing effect on hover.
    • Button - filling
      Button with filling animation on hover.
    • Button - customizable
      Flexible customizable button with many options available for fine-tuning.
    • Text element
      Modification of the default text block element. Adds unique additional features, comparing to the default version.
    • List item
      List item with a bullet point, which can be an icon, number or text. Multiple items can be combined to make a nice list.
    • Expandable list
      List of sections with title and content, that can be shown or hidden on click. Perfect for F.A.Q. or Q&A sections.
    • Icon
      Customizable icon element. Can include icons from the default or user-added icon libraries.
    • Progress bar
      Modification of the default progress bar element. Adds unique additional features, comparing to the default version.
    • Styled heading
      Customizable responsive heading element.
    • Split text
      Text divided into lines with fancy line-by-line reveal animation.
    • Typed text
      Text element with repeated typing animation. Ideal for eye-catching headings.
    • Testimonial
      Testimonial or review with author photo and/or details.
    • Testimonial slider
      List of testimonials organized into a responsive slider.
    • Rating
      Rating or review of the company or product.
    • Team member
      Element with a person's photo and contact details. Perfect for presenting employees or the management.
    • Team table/h6> Interactive board of employees with photos and details.
    • Pricing box
      Pricing table to describe the product features included into the package/plan.
    • Before/After slider
      Interactive image slider to present the "before" and "after" state.
    • Service
      Basic service box with icon and text content.
    • Image element
      Basic image shortcode with flexible settings.
    • Image cascade
      Multiple overlapping images that create a nice cascade gallery.
    • Image with caption
      Image with caption text block.
    • Image carousel
      Responsive flexible carousel for multiple images.
    • Modal window
      Popup modal window which can be triggered by any button or other link-containing element.
    • Post grid
      Customizable shortcode to display blog posts in a grid.
    • Portfolio grid
      Customizable shortcode to display portfolio items in a grid.
    • Video button
      Button with custom label which launches a lightbox with video.
    • Countdown
      Countdown to a specific time point. Perfect for landing and "coming soon" pages.
    • Counter
      Animated count-up element to present numerical data.
    • Social icons
      Customizable icons with links to social profiles.
    • Message box
      Notification box for showing important information.
    • Banner
      Eye-catching image banner with text and CTA button.
    • Styled Google Map
      Customizable Google Map with multiple styling options.
    • Horizontal steps
      Element for describing a step-by-step progress.
    • Video player
      Video block which launches video in a frame or lightbox.
    • Progress circle
      Animated SVG circle for displaying the progress.

    Colorpicker


    Scape has a unique colorpicker parameter that is more powerful than a default colorpicker, and allows for easy repeated use of a custom color palette. It also allows to apply color gradients to the elements that support them.

    Using the colorpicker

    1. Choose between simple solid color fill and color gradient.
    2. Select the color gradient direction.
    3. Select gradient starting color.
    4. Select gradient ending color.
    5. Clear the color
    6. Select whether you want to choose the color from the palette or select it manually using a colorpicker.
    7. Color palette. Contains the key theme colors set in Theme Options -> Colors -> Main theme colors, as well as additional colors that can be added in Theme Options -> Colors -> Color palette.
    8. Custom colorpicker.

    Design options


    Design options can be found in the Design tab of the row or column settings. They are based on the default WPBakery Page Builder's design options, but have some unique features, allowing for more control over the page content. For example, they allow to shift the content to create nice overlapping effect, as well as allow to set different design options for different screen sizes.

    Using design options


    1. Choose the screen size for which to configure design options.
    2. Set the margins of the element.
    3. Set the border width of the element.
    4. Set the border radius of the element.
    5. Set the padding of the element.
    6. Set the vertical offset of the element. Enter negative value to shift the content up and positive value to shift it down.
    7. Set the horizontal offset of the element. Enter negative value to shift the content to the left and positive value to shift it to the right.
    8. Set the custom z-index of the element. Useful if you want to make an overlapping effect using the content shift (in this case you may want to enter a higher value).
    9. Set the border style of the element.
    10. Set the border color of the element.

    Post grid


    Post grid shortcode is responsible for displaying posts on your website, so it's important to understand how it works. There are 5 different blog layout types available in Scape to suit every taste.

    Using post grid

    Layout
    tab
    • Blog grid type
      Select one of the blog layout types.
    • Post media preview
      Only for default and masonry grid types
      Select whether to display the featured image or the post's media.
    • Number of columns
      Only for minimal and masonry grid types
      Controls the maximum column number in the grid.
    • Post thumbnail width
      Only for side-by-side grid type
      Select the width of the post image thumbnail on a 1-12 column scale.
    • Metro grid layout
      Only for metro grid type
      Select one of the metro grid layouts to use.
    • Grid gutter size
      Only for metro grid type
      Set the distance between the grid items.
    • Hide meta elements
      Allows to hide certain meta if not needed.
    • Estimated reading time
      Only for side-by-side grid type
      Select whether to display the approximate reading time of the post.
    Design
    tab
    • Thumbnail aspect ratio (optional)
      Only for default, side-by-side and masonry grid types
      Set the aspect ratio of the images so they are resized, which adds consistency to the grid item proportions. Leave blank to use initial image ratio.
    • Post excerpt length/h6> For all grid types except for metro
      Set the number of words in post excerpt.
    • Item appearance animation
      Select one the appearance animations for the grid items
    • Grid container background color
      Set the background color of the grid container
    • Item overlay color
      Only for side-by-side and metro grid types
      Set the overlay color of the grid item images. If left blank, the default overlay color will be used.
    Query
    tab
    • Query
      Select the type of query to use.
      • Use settings - allows to choose which post categories to display in a grid.
      • Global query - must be used when the shortcode is added to a content block used to display the main blog and its archives.
      • Custom query - allows to enter the custom query string.
    Filter
    tab
    Filter can only be used with masonry and metro grid types
    • Filter
      Controls whether to display the filter and what filter style to use.
    • Filter alignment
      Controls the alignment of filter buttons
    • Filter buttons layout
      Only for minimalistic filter style
      When set to separated, the Show all button will be aligned to the opposite side.
    • Multichoice filter operator
      Only for multichoice filter style
      Select whether to apply OR or AND operator to the filter.
    • Filter updates hash
      If set to yes, filter will update the page hash navigation, meaning that you can link to the blog page with pre-activated filter.
    • Default category to display (optional)
      Controls which category should be displayed by default. If you are not using the multichoice filter, choose only one category. If no categories are selected, all items are shown by default.
    • Filter background color
      Set the background color for the filter block.
    • Filter skin
      Select the filter color skin based on the background color. Choose light sking for the light background and the dark skin for the dark background.
    • Filter color scheme
      Choose between the default and colorful filter color schemes.
    Navigation
    tab
    • Number of items per page
      Set the number of items displayed per page or lazy-loaded per batch.
    • Navigation
      Allows to add pagination or lazy loading to the post grid.
    • Pagination
      Only for pagination
      Set the pagination skin based on the background. Light skin for the light background, dark skin for the dark background.
    • "Load more" button
      Controls whether the Load more button is shown and after how many lazy-loaded batches it should be repeatedly shown.
    • Number of batches to load
      Allows to set the limit to how many times the items should be loaded. Leave empty to load all the items.
    Typography
    tab
    • Post title font style
      Set the font style of the post title.
    • Excerpt font style
      For all grid types except for metro
      Set the font style of the post excerpt.
    Misc
    tab
    • Extra class name
      Add a class name (optional) so that you can style the element using custom CSS code.

    Portfolio grid


    Portfolio grid shortcode is responsible for displaying portfolio items on your website, so it's important to understand how it works. There are 5 different portfolio layout types available in Scape to suit every taste.

    Using portfolio grid

    Layout
    tab
    • Grid type
      Select one of the portfolio layout types.
    • Metro grid layout
      Only for metro grid type
      Select one of the metro grid layouts to use.
      • Default - allows to choose the number of columns.
      • Individual - allows to set the width and height individually for each item in a portfolio grid. It can be done on the portfolio item page in Portfolio content settings -> List.
      • Predefined - allows to select one of the more complex predefined grid layouts.
    • Number of columns
      Controls the maximum column number in the grid.
    • Grid gutter size
      For all grid types except for panels
      Set the distance between the grid items.
    • Grid item border radius
      For all grid types except for panels
      Set the border radius of the grid items.
    Design
    tab
    • Thumbnail aspect ratio (optional)
      Only for masonry, boxed, square and tiles grid types
      Set the aspect ratio of the images so they are resized, which adds consistency to the grid item proportions. Leave blank to use initial image ratio.
    • Item appearance animation
      Select one the appearance animations for the grid items.
    • Force overlay to always be visible on mobile
      Check to make the overlay to always be visible on mobile devices, where hover is not possible.
    • Item overlay color
      Set the overlay color of the grid item images. If left blank, the default overlay color will be used.
    • Grid container background color
      Set the background color of the grid container.
    • Color skin
      Select the item skin based on the grid background.
    • Slider navigation skin
      Only for panels grid type
      Select the skin of slider navigation buttons based on the lightness of item images in the grid.
    Overlay idle
    tab
    This section is responsible for the overlay layer and its content which is visible on the idle state of the grid items.
    • Item idle overlay
      Select the grid item overlay type.
      • Empty - nothing is displayed over the image.
      • Color overlay - color overlay over the image.
      • Meta centered - color overlay with meta centered and aligned to bottom.
      • Meta middle - color overlay with meta centered and middle-aligned.
      • Meta aligned - color overlay with meta aligned to left and bottom.
    • Item overlay color
      Set the overlay color of the portfolio item.
    • Primary meta info
      Select what data should be displayed in the primary meta field.
    • Secondary meta info
      Select what data should be displayed in the secondary meta field.
    • Category badges
      Only for aligned meta
      Select whether to display the category badges.
    Overlay hover
    tab
    This section is responsible for the overlay layer and its content which is visible on the hover state of the grid items.
    • Item hover overlay
      Select the grid item overlay type.
      • Empty - nothing is displayed over the image.
      • Color overlay - color overlay over the image.
      • Meta centered - color overlay with meta centered and aligned to bottom.
      • Meta middle - color overlay with meta centered and middle-aligned.
      • Meta aligned - color overlay with meta aligned to left and bottom.
      • Action buttons - color overlay with one or two clickable action buttons.
    • Item overlay color
      Set the overlay color of the portfolio item.
    • Action on click
      Select what should happen when the user clicks the portfolio item.
    • Primary meta info
      Select what data should be displayed in the primary meta field.
    • Secondary meta info
      Select what data should be displayed in the secondary meta field.
    • Category badges
      Only for aligned meta
      Select whether to display the category badges.
    • Action buttons
      Only for action buttons overlay type
      Select whether to display the category badges.
    Overlay & content
    tab
    This section is responsible for the overlay layer and meta content of the Square and Tiles portfolio grid layouts.
    • Item overlay content
      Select the grid item overlay type.
      • Empty - nothing is displayed over the image.
      • Icon - color overlay with icon over the image.
    • Action on click
      Select what should happen when the user clicks the portfolio item.
    • Item overlay behaviour
      Select whether the overlay should appear or disappear on hover.
    • Item overlay color
      Set the overlay color of the portfolio item.
    • Primary meta info
      Select what data should be displayed in the primary meta field.
    • Secondary meta info
      Select what data should be displayed in the secondary meta field.
    • Meta alignment
      Set the text alignment of the portfolio item meta.
    Lightbox
    tab
    This section is visible when the portfolio item can trigger the lightbox
    • Primary meta info in lightbox
      Select what should be displayed as a primary meta info under the media in lightbox.
    • Secondary meta info in lightbox
      Select what should be displayed as a secondary meta info under the media in lightbox.
    • Share buttons in lightbox
      Select whether share buttons should be displayed in lightbox and what should be shared.
    Query
    tab
    • Query
      Select the type of query to use.
      • Use settings - allows to choose which post categories to display in a grid.
      • Global query - must be used when the shortcode is added to a content block used to display the main blog and its archives.
      • Custom query - allows to enter the custom query string.
    Filter
    tab
    • Filter
      Controls whether to display the filter and what filter style to use.
    • Filter alignment
      Controls the alignment of filter buttons
    • Filter buttons layout
      Only for minimalistic filter style
      When set to separated, the Show all button will be aligned to the opposite side.
    • Multichoice filter operator
      Only for multichoice filter style
      Select whether to apply OR or AND operator to the filter.
    • Filter updates hash
      If set to yes, filter will update the page hash navigation, meaning that you can link to the blog page with pre-activated filter.
    • Default category to display (optional)
      Controls which category should be displayed by default. If you are not using the multichoice filter, choose only one category. If no categories are selected, all items are shown by default.
    • Filter background color
      Set the background color for the filter block.
    • Filter skin
      Select the filter color skin based on the background color. Choose light sking for the light background and the dark skin for the dark background.
    • Filter color scheme
      Choose between the default and colorful filter color schemes.
    Navigation
    tab
    • Number of items per page
      Set the number of items displayed per page or lazy-loaded per batch.
    • Navigation
      Allows to add pagination or lazy loading to the post grid.
    • Pagination
      Only for pagination
      Set the pagination skin based on the background. Light skin for the light background, dark skin for the dark background.
    • "Load more" button
      Controls whether the Load more button is shown and after how many lazy-loaded batches it should be repeatedly shown.
    • Number of batches to load
      Allows to set the limit to how many times the items should be loaded. Leave empty to load all the items.
    Typography
    tab
    • Primary meta font style
      Set the font style of the primary meta in the overlay layer.
    • Secondary meta font style
      Set the font style of the secondary meta in the overlay layer.
    • Meta text color
      Set the color of the primary and secondary meta in the overlay layer.
    Misc
    tab
    • Extra class name
      Add a class name (optional) so that you can style the element using custom CSS code.

    Section divider


    Section divider is a unique element provided by Scape that allows to create fantastic eye-catching transition between the sections on your website. It uses SVG graphics, which means that the curves and lines will always be crispy and neat irregardless of the screen resolution.

    It should be mentioned that when put on a page, the section divider itself has no physical size. Instead, it overlaps the elements that are located above it on a page. Ideally, it should be placed into a an empty row between the two other rows that you want to separate. The divider color should match the background color of the row that comes after it.

    Using section divider

    Below is a short description of the options availabe for the section divider shortcode element:

    • Divider style
      Select one of the predefined divider styles.
    • Divider color
      Choose the fill color of the section divider. It should match the background color of the subsequent row.
    • Height
      Set the base divider height in pixels.
    • Enable responsiveness
      When enabled, allows to set a different height for smaller screen widths, so that the decoration looks better on tablet and mobile.
    • Extra class name
      Add a class name (optional) so that you can style the element using custom CSS code.
    For better results, make sure that:
    • Row stretch option of the parent column is set to stretch row and content
    • Parent row and column don't have fixed or relative height set
    • Padding of the parent column and row is set to 0
    • Section divider is put into an empty row/column, meaning that there are no other elements in the same row/column.
    In case you are having odd empty space under your section divider, set the font-size to 0 in Typography tab of the Row Settings of the containing row.

    Placing section divider under the content

    As you have noticed, the image above demonstrates how a section divider can be placed under the content of the preceding row, thus dissipating clear edges of the sections on a page and creating a more consistent content flow.

    It's actually very easy to achieve this result. After you have set up your section divider as per instructions above, you need to set the z-index values of the section or row containing the section divider, and the preceding section or row in a way that the former one has a higher z-index than the latter.

    Example: set the z-index of the section/row containing the section divider to 2 and the z-index of the preceding section/row to 1.
    Z-index values for sections/rows can be entered in Section / Row settings -> Design tab

    Google Map


    Google Map shortcode allows to add a map powered by Google Maps API, and has a variety of predefined styles and options. It allows to add unlimited number of markers infowindows, as well as choose which map controls are displayed.

    Using Google Map

    It is currently not possible to use Google Maps API without having a Google API key. Therefore, the first thing to start with is obtaining one and entering it into the Google API key field in Settings tab of the Google Map Settings. You can get your API key and read its usage instructions here. After pasting your API key into the Google API key field, proceed with configuring your map.

    Below is a short explanation of the Google Map options that the shortcode offers:

    • Map layout
      Default map layout means a regular map with adjustable size. Options with the content block mean that a box will be put over the map, in which you can put some additional information about your location(s), e.g. working hours or directions.
    • Relative height
      Available for the default map layout. Allows to set the map height relative to the screen height.
    • Min height
      Available for the default map layout. Allows to set the minimum map height in pixels.
    • Content block
      Available for the layouts with content block. Allows to add more information to the map.
    • Color scheme
      Select one of the 20 predefined map color styles for any occasion.
    • Map border radius
      Sets the border radius of the map container,.
    • Google API key
      API key need to make the map work.
    • Draggable map
      Controls whether the map can be dragged.
    • Zoom on scroll
      Controls whether the map is zoomed with the mouse scroll.
    • Zoom control buttons
      Controls whether to display the map zoom control buttons.
    • Street view control
      Controls whether to display the street view controls.
    • Map type control
      Controls whether to display the map type controls.
    • Map center
      Controls whether the map should be centered automatically based on the marker locations or manually. Manual option allows to set the zoom level, as well as latitude and longitude of the map center.
    • Locations
      Allows to add unlimited number of location markers.
      • Address
        Full location address, where the marker should be put.
      • Info window
        Controls whether the marker will have an info window that will be shown on mouse click and controls its style. Activating the info window allows to add the locations title, description and photo (minimal and colorful info windows only accept the title). You can also choose whether the info window should be displayed on click, on map load or both in the Info window state option.
      • Marker
        Allows to choose whether to use the default marker image, one of the custom animated markers provided by Scape or upload a custom marker image.
    • Extra class name
      Add a class name (optional) so that you can style the element using custom CSS code.
    • CSS Animation
      Add an appearance animation on page load (optional).

    Modal window


    Scape allows to display almost any content in a fancy modal popup window, which can be triggered by clicking on a button, inline link or any shortcode element which supports links. Modal windows can be very useful for displaying contact forms or some additional information for a CTA element.


    Using modal windows

    Modal windows are fairly simple to use, although there are some rules to make them work flawlessly:

    1. Add an empty row to your page and insert a modal window shortcode into it. Fill the modal window with content.
    2. You need to assign an ID to your modal window. Let's say you choose your modal window ID to be my-popup. Add my-popup to the Modal window ID field in Modal window settings.
    3. Add a trigger element to your page, which will display the modal window on click. It can be a button, inline link or any other shortcode element which supports links.
    4. In the URL field (or href attribute in case it's an inline link) of that element, enter your modal window's ID with the prefix #modal-. In our case it will be #modal-my-popup.
    5. That's it! Now save the changes and see your modal window in action.

    Content block


    Content block shortcode basically lets you insert a block with any content that you have previously created using a content block custom post type. It allows to create whole page sections for repeated use on different pages or within different elements.

    To learn more about how content blocks work, please refer to this section.

    Tooltip


    Ever wanted to add some hints or tooltips to your elements or words/phrases in texts? Scape has built-in tooltips just for that, which will be shown when the user hovers an element.

    Using tooltips

    Adding tooltip to a shortcode element

    Tooltips are supported by the following shortcode elements:

    • Default button
    • Button - link
    • Button - glowing
    • Button - filling
    • Button - customizable
    • Icon
    • Pricing box feature

    To add a tooltip to the aforementioned elements, open the corresponding shortcode settings, navigate to Misc tab and enter the tooltip text. This will automatically create a tooltip for that element.

    Adding tooltip to inline text

    Tooltips can also be added to a word or a phrase in text, where html is allowed. To achieve that, just wrap a word or a phrase like this:

    I am a cool <span data-tooltip="I am a tooltip">text</span> with a tooltip.

    In this example the I am a tooltip text will be displayed in a tooltip when the text word is hovered.

    Getting started

    What to use for translation

    For translation and multilanguage websites we recommend using WPML plugin. WPML is the most popular WordPress plugin for multi-language websites. Scape is tested and certified by the WPML official team as fully compatible with the plugin.

    As a free alternative for localization you can use Poedit, Loco Translate or any other solution of your taste.

    Where to save translation files

    If you are using a plugin or software which does not automatically save the translation files to the right location, please save the generated .po and .mo files to wp-content / languages / themes / folder, naming them based on the language used with the theme name prefix, e.g. scape-en_GB.po.

    Translating with WPML

    Initial setup

    First of all, you need to install and activate the core WPML plugins:

    • WPML Multilingual CMS required
    • WPML String Translation recommended
    • WPML Translation Management recommended

    After that you can install other WPML plugins of your choice. For more info about what each plugin is meant for, please read this.

    Before translating, you need to set up WPML plugin from WPML -> Languages in your dashboard. Please refer to WPML Getting Started Guide for detailed information.

    Pages & posts

    To translate a page or post you need to go to Pages or Posts page from your dashboard. In the list you will see columns for each active language, with a:

    • pencil icon for edit translation, or a
    • + icon for add translation next to each page

    Once you go to edit the page you will see a similar interface elements in a tab on the right hand of your screen.

    Read this article on how to easily duplicate your content across translations.

    You can change any settings in Page options for any specific translated page or post, and they will only be active for that specific translation.

    Theme texts and strings

    To translate strings please follow the procedure for Theme and Plugin Localization.

    Go to WPML > Theme and Plugin Localization, and click on Scan the theme for strings. You will see theme strings on WPML -> String Translation page, as well as which ones are translated an which are not. Theme strings are defined by scape context.

    Portfolio

    Interface for translation / duplication of portfolio items is same as for posts and pages.

    One thing that is unique to portfolio items is portfolio details. After you add and save new detail keys in Theme Options -> Portfolio -> Portfolio item in Content tab, new translatable strings will be added to WPML -> String Translation page, so you can translate them just like any other theme strings.

    Menus

    WPML can synchronize menus for you. This means that if some entries, for example some pages, posts or categories, are in the English menu, WPML can generate and keep in synch menus for other languages pointing to the translated versions of these pages, posts or categories. From Appearance > Menus in your dashboard you can see your existing menus, as well as add menu translations and synchronize menus across translations.

    Widgets

    To translate widgets go to WPML -> String Translation and select Widget context.

    Theme Options

    Scape has certain Theme Options that display content based on user input. Those are:

    • Text block
    • Primary / Secondary button text
    • Primary / Secondary button link

    in Header Settings. After you enter values to these fields and save the Theme Options, these strings will appear in WPML -> String Translation.

    Content block

    Since Content block technically is a custom post type, it should be translated just like posts or pages. Translated versions of content blocks will then appear in dropdowns in Theme / Page Options next to original versions. DO NOT select the translated versions. You should always choose the original version of a content block and ignore the translated versions in dropdowns. Scape will automatically show the right version of a content block based on current language.


    For more detailed instructions on how to translate your website, please read the official WPML Guide.

    Multiple blogs and portfolios


    Unique blog and portfolio display system in Scape allows to create an unlimited number of blogs and portfolios with items assigned to them, which don't overlap. This means that you can make posts be displayed on a specific blog's main and archive pages and be hidden on the archive pages that belong to other blogs.

    The same principle applies to the post or portfolio item navigation, which (if set correctly) will display only the items belonging to the same blog as the currently viewed item.

    The following instructions describe how to create multiple blogs. However, multiple portfolios can be created just the same way (but using a portfolio grid shortcode, rather than post grid shortcode).

    Creating multiple blogs

    You should have already gotten acquainted with how to create a default blog in this section. Important thing to note is that if you plan to create multiple blogs, then you should add your blogs in a slightly different way - using the technique described below.

    Let's say we want one blog on the page Blog, and a separate one on the page News, which will technically display posts, but different ones, and will use a different blog layout.

    First, you should create a new regular page for each of your blogs. Let's name them Blog and News. Add a Post Grid shortcode to each page, and select the blog categories that you want to display specifically for the each blog in a way that they don't intersect between the blogs in order for the same posts not to appear on both blogs.

    Assigning posts to a blog

    After your blog page is saved, it's time to add some news posts to it. Add them as you normally do with your posts and assign each post a category from those that you intend to display on this blog page. That is enough to have your separate blog page set up.

    But what if you want your News page to have its own archive pages, or add post navigation to your single news pages? This is possible as well with the following steps:

    1. When creating / updating a news post, navigate to Page Settings -> Navigation.
    2. Choose your parent blog page from the Navigation parent dropdown.
    3. Publish / update your post.

    This will let Scape understand that a post belongs to a specific page with the post grid or portfolio grid shortcode on it. Now, if you repeat these steps with every news post, then the post navigation on a single news post page will only navigate through the posts than belong to the same page as the post that you are viewing.

    Similar, when you click on a category or tag link of a post belonging to one of the blogs, an archive page will open, and it will use the same layout as the parent blog page.

    Don't forget to assign the Navigation parent to each new post that you add to the News blog, as the archive pages identify whether a default or custom blog layout should be used from the Navigation parent setting of the latest post displayed.

    Setting posts per page parameter

    Settings the number of posts (or portfolio items) displayed per page may seem a little bit tricky without a guide, so here is how it should be done for different scenarios.

    • Single blog
      In case you have just one blog on your website (most probably this is the case), the number of posts per page should be set in a default WordPress way - in Settings -> Reading.
    • Single portfolio
      In case you have just one portfolio on your website (most probably this is the case), the number of portfolio items per page should be set in Theme Options -> Portfolio -> Archives -> Content -> Number of portfolio items per page.
    • Multiple blogs or portfolios
      In case you have multiple blogs or portfolios on your website, the number of blog or portfolio items per page should be set in Page settings -> Post/Portfolio grid on the page that you have your Post/Portfolio grid shortcode on.

      In case you are using a Post/Portfolio shortcode on a single page to create a blog or a portfolio grid, you can set the number of items per page in the shortcode settings in Navigation tab. However, the archive pages for this blog/portfolio will still use the "items-per-page" value from the Page settings -> Post/Portfolio grid field.

    Equal height columns


    Equal height columns can be useful if you divide your row's content into multiple columns and want it to be aligned. Here's how to do it:

    1. Add a new row and divide it into multiple columns.
    2. Open Row Settings and make sure that the Columns position option in the Columns tab is set to Stretch. This will make the columns always take full height of the row.
    3. To center the content within columns, set Content position option to Middle.

    Equal height elements


    Equal height content box

    Content box shortcode is a useful container which can be used for adding more accent to the elements inside it and group them. But it can also be used to make the content look clearer and more aligned.

    Let's say you have three columns in your row, each containing some content. Oftentimes this content takes up different vertical space in adjacent columns and we want to align it, but equal columns cannot do the trick. In this case you can align the content boxes:

    1. Add a content box to each of your columns within a row and fill them with content.
    2. Open Content box settings, navigate to Misc tab and set the Same height boxes across adjacent columns option to any value other than Disable. You must do that with each content box in your row which you want to align.
    3. You can also align the content within the content boxes vertically using the Vertical content alignment option in the Layout tab.

    Below are visual illustrations of how different Columns position and Content position settings affect the layout:

    Parallax background


    Scape allows to create stunning image background parallax effects that can help to make a page section really stand out. There are four parallax effect types available:

    • Scroll parallax
      Background image is moved with different speed than the rest of the page during the scroll.
    • Scale effect
      Background image is either scaled up or scaled down during the scroll.
    • Scroll parallax + scale effect
      Scroll parallax and scale effect combined.
    • Mouse move parallax
      Background image is shifted when the user moves the mouse cursor over the element.

    Using parallax background

    Background parallax effect is available for Section and Row shortcodes. To enable it:

    1. Open Section / Row Settings and navigate to the Background tab.
    2. In the Background type dropdown choose Image background.
    3. Add a background image and set the background properties to your taste.
    4. Scroll down and choose the parallax effect in Background effect dropdown.
    5. Set the image parallax intensity / sensitivity. Higher values mean more explicit effect.

    Video background


    Scape allows to set a video as a background for a section or a row. You can use different video sources: YouTube, Vimeo or self-hosted video. To add video background:

    1. Open Section / Row Settings and navigate to the Background tab.
    2. In the Background type dropdown choose Video background.
    3. In the Video background dropdown select the video source to use.
    4. For YouTube and Vimeo video enter the Video ID (only ID should be entered, NOT the full URL). FOr self-hosted video paste the full URL copied from the Media Library.
    5. Select whether you want to mute the video sound or not.
    6. Enable or disable the Video background parallax effect and set its intensity.
    7. Add a video poster, which will be shown until the video is loaded and ready to be played.
    Note: some browsers may restrict automatic video playback or playback with sound. This should be kept in mind when setting up the video background, therefore it is recommended to add a video poster, at least as a fallback.
    Background video is disabled on mobile devices for two reasons:
    1. Videos may consume large network bandwidth, which is not a good practice for mobile-friendly sites.
    2. Automatic video playback may be disabled in some mobile browsers or on the OS level (e.g., iOS).
    Note: on mobile devices, video poster is shown instead of the background video.

    Fragmented background


    Using segmented background

    Segmented background effect is available for Section and Row shortcodes. To enable it:

    1. First you need to add a background image to your section or row. Open Section / Row Settings and navigate to the Background tab.
    2. In the Background type dropdown choose Image background.
    3. Add a background image and set the background properties to your taste.
    4. Navigate to the Animated layer tab.
    5. Select Background segments from the Animated layer dropdown.
    6. Select one of the predefined styles from the Segments style background.
    If you enable the parallax background effect, it will also have an effect on the background fragments, creating even nicer animations.

    Animated background

    Using animated background

    Animated background image effect is available for Section and Row shortcodes. It can be used to create looped background image animations and overlays above the main background image or video. To make add the effect:

    1. Open Section / Row Settings.
    2. (Optional) set up an image or video background in the Background tab.
    3. Navigate to the Animated layer tab.
    4. Select Background image from the Animated layer dropdown.
    5. Add an image that you want to be animated.
    6. Set the animation direction.
    7. Set the animation cycle time in seconds.

    Responsiveness

    It's important to mention that Scape was built with responsiveness in mind. It looks perfect on each and every screen size, owing to its rich responsiveness options that allow precise fine-tuning of many design options for different device screens.

    Columns


    Scape allows to create complex and responsive grid layouts which will not limit your creativity. The theme supports a 12-column layout which has become a standard nowadays, and each column can have its own width on any screen size.

    To access column width and responsiveness options, click on a pencil button at the top of the column and navigate to Responsiveness tab.

    Design options


    Scape provides flexible options to control the appearance of the key container elements, such as sections, rows, columns and content boxes. You can set margins, borders, paddings, vertical and horizontal content shift for these elements individually for different screen sizes. This allows to create truly creative and responsive page layouts.

    To learn more about how the Design options work, please read this article.

    Shifted content

    Shifting content up/down or to the side can create an eye-catching effect and make the page content look more interesting and dynamic. Scape allows to shift section, row or column content out of its place making it overlap the adjacent element.

    To achieve the effect:

    1. Open Section / Row / Column Settings and navigate to Design tab.
    2. Enter the content shift value for X-axis or Y-axis shift. Negative values will shift the content up/left, while positive values will shift it down/right.
    3. You might need to add a custom z-index value so that the contents of current section / row / column are placed over the contents of the adjacent section / row / column. This value should be higher than that of the adjacent elements. If not set, z-index is equal to 1.

    Full screen page slider



    Scape allows a page to be turned into one full-screen slider as can be seen in theme demo. This can be useful for onepage websites, home pages or landing pages and help them really stand out from the pack.

    Full-screen slider works the following way - it turns the sections and top-level rows on a page into full-screen slides. Hero section is automatically disabled on such pages, footer however is not. To set up the full-screen slider:

    1. Add anchors to your top-level sections and rows - it can be done in Section/Row Settings -> Navigation tab. They will be used in hash navigation on slide switch and in slider navigation. If anchor label field is empty a slide index number will be used as a slide anchor and label.
    2. Set Slide skin in Section/Row Settings -> Navigation tab. It will control what skin to apply to the header and page navigation (if used) when a particular slide is active. This significantly improves readability. While all four settings will add individual colors to page navigation, header has only two skins. Therefore Light and Light colorful will apply light skin to the header, and the same will happen with the dark skin. Note that the top header will not switch to sticky header in full screen page slider mode.
    3. Make sure you don't have Relative height or Min. height set on your sections and top-level rows, as it can break the layout.
    4. Make sure that you don't add IDs to elements on your page that match the anchor labels as it may break the layout.
    5. Navigate to Page Settings -> Page Template and set Page template option to Full-screen slider.

    Page navigation


    Page navigation bullets can be added to further improve navigation through the page content. To enable it, choose navigation style in Page navigation option in Page Settings -> Page Template. Multiple navigation styles are available to better fit the page content style.

    Page navigation works with both Default page template and Full-screen slider. Moreover, it can work alongside with the Onepage menu.

    To let the page navigation panel be built automatically, add anchors to your top-level sections and rows - it can be done in Section/Row Settings -> Navigation tab. They will be used in hash navigation on slide switch and in slider navigation. To combine it with other in-page navigation links (e.g. onepage header navigation), copy and paste the anchor label into the Add ID to row field in Section/Row Settings -> Misc. If anchor label field is empty, the ID field will be used as an anchor.

    However, if you are using a full-page slider on your page, DO NOT use IDs, since it may break the slider behaviour. You should just use the anchors in this case.

    Custom metro grid



    Portfolio grid shortcode allows to use a broad variety of customizable metro layouts, however to give you an even better control over the portfolio layout, there is a possibility to set custom size for each item in the portfolio grid.

    Here's how you can do it:

    1. First of all you need to set up your portfolio as described here.
    2. In the Portfolio grid settings select metro grid type and set the Metro grid layout option to individual.
    3. On the Edit screen of your portfolio items navigate to Portfolio content settings -> List and set custom Item tile width and Item tile height. These values represent to how many slots in a grid an item will stretch.

    Contact form


    Scape is fully compatible with the free contact form plugin Contact Form 7. The plugin enables you to create any contact forms with unlimited number of different input fields. Scape also does support MailChimp for WordPress, which allows to collect visitor's emails and many more, and can be easily integrated with MailChimp mailing lists. Scape adds branded styling to these plugins' elements to make them fit into the overall theme design.

    In addition to styling, Scape enhances the Contact Form 7 and MailChimp for WordPress by providing tools that allow more control over the forms and their style. Below is a description of some rules and possibilities that can be used with forms.

    Form styles - Contact Form 7

    Forms can have different appearance styles. This can be controlled by adding a special class to the form's container. You can either wrap the form in the contact form editor, or add the class to the parent row or column in the page builder. Here are the available styles:

    • Default
      Default contact form design, no additional class is needed.
    • Minimal
      Minimalistic contact form design, which is applied by adding cf-minimal class. Please note that input field labels for this design have to be displayed after the input field (not before).
    • Flat
      Flat contact form design, which is applied by adding cf-flat class.
    • Subscribe modern
      Modern contact form design specifically for small subscribe forms, which is applied by adding cf-subscribe-modern class.

    Additionally, each of the available contact form appearance styles has a dark skin, which comes handy when a form is used on a dark background. To activate the dark skin, just add the cf-dark class.

    Form styles - MailChimp for WordPress

    Forms can have different appearance styles. This can be controlled by adding a special class to the form's container. You can either wrap the form in the contact form editor, or add the class to the parent row or column in the page builder. Here are the available styles (in addition to the default look):

    • Minimal
      Minimalistic subscribe form design, which is applied by adding mc-minimal class.
    • Modern
      Modern subscribe form design, which is applied by adding mc-modern class.
    • Bubble
      Subscribe form design, which is applied by adding mc-bubble class.

    Additionally, each of the available subscribe form appearance styles has a dark skin, which comes handy when a form is used on a dark background. To activate the dark skin, just add the mc-dark class.

    GDPR Tools - general info

    What is GDPR

    As of May 25 2018, with the entry into application of the General Data Protection Regulation, there is one set of data protection rules for all companies operating in the EU, wherever they are based. This basically means that, if you are running a website and some of your visitors are from the EU, you’re subject to this law.

    You can find full information on each aspect of GDPR on the official website.

    How this applies to you

    Besides the data and cookies that you collect and process intentionally, you may be using a 3rd-party services on your website, like Google Analytics, Google Fonts, Google Maps, YouTube, Vimeo etc. In these cases some personal data (usually an IP address of a visitor) is sent to the service provider in exchange for the free service. This is the personal data flow that you can hardly control, but which you must make GDPR-compliant by prompting a visitor’s consent before he can use the service.

    In other words, with the new regulation, it’s not enough to simply notify a visitor about what type of data is being collected. You must receive his consent in order to be able to collect this data or use a 3rd-party service that does so. Luckily, Scape gets you covered with its GDPR Compliance Tools.

    Please take a look at the demonstration of GDPR tools in Scape and the way the content is hidden/displayed based on whether a specific consent is obtained - here.

    How Scape helps you comply with GDPR

    It's important to remember that Scape WordPress theme, although being a powerful tool for creating websites, cannot guarantee that your website or organisation is fully compliant with GPDR. But no other software can either. Organizations should assess their unique responsibilities, and ensure that any additional measures are taken that are necessary to meet any obligations required by law, as based on a data protection impact assessment.

    Scape, however, has built-in and utilizes a variety of tools designed to help you with meeting the responsibilities and obligations to GDPR. Let's take a brief look at them.

    To enable some of the features described further, you need to have GDPR plugin installed. The plugin comes bundled with the theme. Scape utilizes the features of this plugin to provide a convenient set of tools for GDPR compliance. Plugin's documentation can be found here.

    Privacy Bar and Privacy Preferences Center

    When GDPR plugin is enabled, your website visitors will see a Privacy Bar at the bottom of the page prompting their consent for collecting their private data.

    By clicking the Privacy Preferences inside the Privacy Bar, a user will open a Privacy Preferences Center, where he will be able to set which type of data-collecting services or cookies he wants to enable. These preferences control which features and services will then be enabled or disabled on the website.

    You can control what cookies and consents you want to display in the Privacy Preferences Center in GDPR -> Settings. By default, when you install the GDPR plugin with Scape, 8 default consents will be created for you, namely: Privacy Policy, YouTube, Vimeo, SoundCloud, Spotify, Google Maps, Tracking, Like System. These will control the respective features of your website. You can remove the ones that you don't need. If you want to add them back after removal, please bear in mind that the id of each consent must be the same as the default ones. This can be easily achieved by naming each new consent exactly the same as described above. The Name -> ID dependency is as follows:

    • Privacy Policy -> privacy-policy
    • YouTube -> youtube
    • Vimeo -> vimeo
    • SoundCloud -> Spotify
    • Google Maps -> google-maps
    • Tracking -> tracking
    • Like System -> like-system

    YouTube, Vimeo, SoundCloud, Spotify

    Scape allows you to add YouTube, Vimeo, SoundCloud and Spotify players on your website, as well as use YouTube and Vimeo video as row or section backgrounds. However, these services collect some user data, and therefore a user must give his consent to use them before you can actually use the media on a page.

    Solution:

    Scape offers you to use self-hosted videos instead of YouTube and Vimeo services and self-hosted audio player in case you need to be strictly compliant with GDPR. Additionally, if you still need to use these services, you can enable the GDPR plugin and allow users to choose whether to include or exclude YouTube, Vimeo, SoundCloud or Spotify media on their pages.

    • Background video - For rows with a background YouTube or Vimeo video don't forget to add a video poster in Row Settings -> Background tab. When there's no user's consent to use this media, this poster will be shown as a row background.
    • Post or Portfolio Item media - If you are using video or audio formats for your blog posts or portfolio items, don't forget to add a video/audio poster, which will be displayed alongside with the standard message about the blocked content for the users who have not given a respective consent. If you display portfolio gallery in a lightbox or use masonry blog layout, the poster will also be displayed in a lightbox instead of the media.

    Google Analytics & other tracking scripts

    If you are running a website, it's highly probable that you are using a Google Analytics or some other script, like Facebook Pixel, on it. Scape allows you to have your custom code and scripts inserted in 3 places on a website: in <head>, right after the opening of the <body> tag, and right before the closing of the </body> tag. If want use a tracking script in any of these areas, you must receive a user's consent first.

    Solution:

    By default the GDPR plugin ask users for a Tracking consent, and if it's not given, the custom JS code areas will be disabled. You can choose which of the three available areas will conform to this consent in Theme Options -> General Settings -> Custom code & analytics. Or if you are using Google Analytics code, you can add ga('set', 'anonymizeIp', true); line to it to enable the IP anonymization (more info here).

    Google Fonts

    While being a very convenient way of adding fonts to your website thanks to Scape's font system, Google Font can prevent you from being fully GDPR-compliant due to the fact that Google stores the IP address of user in exchange for providing the service.

    Solution:

    If you want to be compliant to GDPR policy, it's advisable for you to download the desired font from Google Fonts website and add it to your website's Font Pool using Scape's Custom Font Uploader. Please note that Scape demo importer also imports Google's fonts with demo data, so you might consider replacing them with the local fonts.

    Google Maps

    If you are using Google Maps on your website, a user's IP address is sent to Google in exchange for providing the service, which is not GDPR-compliant without a prior user's consent.

    Solution:

    When you use a Styled Google Map shortcode on your website, the map will not be included on the page unless a consent is given to use Google Maps service.

    Contact Forms

    According to GDPR, you must receive user's consent to process any data, and this is applicable to forms as well since they usually process the user's contact details. Luckily, you can make your forms GDPR-compliant with Contact Forms 7 which is bundled with Scape.

    Solution:

    First, you have to make sure you are including an acceptance checkbox in your form. You can use the following code in your Form tab panel field:

    [acceptance your-consent] I consent to the conditions. [/acceptance]
    Read more on acceptance checkbox for Contact Form 7 here.

    Second, you need to install Flamingo plugin. It's a free plugin by the developer of Contact Form 7, which stores all the user messages, and is required to store the users' consents.

    Please also read this article on How to Make Privacy-Friendly Contact Forms.

    Like System

    You may have noticed that blog posts and portfolio items in Scape have a like button (with a heart icon), which saves the user identification data to the database once likes an entry. By default such way of processing the user data is not compliant with GDPR without a prior user's consent.

    Solution:

    Scape prompts users to give Like System consent to use the Like System, and doesn't include it on a page if the consent is not received.

    Other use cases

    Of course, there may be other occasions where you need to hide some content behind a placeholder unless a consent is given by a user. Specially for that, there are other two useful tools that Scape provides.

    1. Row consent

      Each Row Settings have a Consent tab, in which you can include or exclude the row from the page based on whether specific consent has been obtained. You can also add a poster which will be used as a background for the hidden content notification.

    2. Consent shortcode

      To hide the inline content (e.g. some text or custom code), you can use the scape_privacy_consent shortcode like this:

      [scape_privacy_consent id="inline" include="no" notice="yes"]some very sensitive content[/scape_privacy_consent]

    Support policy

    How to get help

    Scape comes with 6 months item support from purchase date or an extended support period of 12 months (depends on whether extended support was selected at the time of purchase) with the option to extend this period. After this period has passed, in order to receive support, you will need to purchase a support extension from the item page at ThemeForest.

    To renew or extend your support period, login to your ThemeForest marketplace account, navigate to Scape item page and choose one of the item support renew options on the right hand side of the screen.

    For item support please use our dedicated Support Forum.

    Item Support includes:

    • Availability of the author to answer questions
    • Answering technical questions about item features
    • Assistance with reported bugs and issues
    • Help with bundled 3rd party plugins

    Item Support does not include:

    • Customization services
    • Installation services
    • Help and Support for non-bundled 3rd party plugins (i.e. plugins you install yourself later on)

    More details about item support can be found in the ThemeForest Item Support Polity.

    Before submitting a ticket

    Let's make it more efficient

    We strive to provide faster and more effective support to our fellow customers through the ticket system on our Support Forum. When opening a ticket, please ensure that:

    1. You have a valid support period
      If your support period has expired, you will not be able to open a support ticket. You will however still have access to the theme documentation.
    2. You have gone through the checklist below
      Please go through the points in the list below to ensure that the issue is caused by the theme (and therefore falls under the scope of theme support) and it is not yet solved in the latest update.
    3. You have included the relevant information
      Please read the Information to include into support ticket section and make sure you have included the information mentioned into your ticket.

    Troubleshooting checklist

    • Make sure you have the latest version of WordPress installed.
    • Make sure you have the latest version of Scape theme installed.
    • Make sure you have updated the bundled plugins to their latest versions (especially if you feel that the issue is related to one of them).
    • Make sure that you have cleared your browser's cache and flushed your website's cache (in case you are using any caching plugins). This is especially actual when the issue arises after you have updated WordPress, theme or bundled plugins.
    • Disable any additional 3rd-party plugins that you are using to exclude the possiblity of them being the cause.
    • Make sure you have searched our documentation for the solution and haven't found it.
    • If the aforementioned steps didn't help, open a support ticket and our support team will assist you.

    Information to include into support ticket

    To ensure that your support request is resolved as fast as possible, we ask for a little assistance which will save the time otherwise would be spent on additional questions and precisions. Please include the following information into your support request:

    • Related link
      A link to your website's page where the issue can be observed. If the issue is present in the backend, please provide your website's login and password so that our support specialist can log in.
    • Point at the element
      If it's not a general issue that is visible right away, please specify in a detailed way which element on your page doesn't work as prescribed. If the issue is visible only under certain conditions, please describe the steps to achieve them.

    Extra customizations

    What is extra customization

    According to the ThemeForest Item Support Policy, theme support only includes help with the problems that may arise with our software and the bundled premium plugins. Scape theme is sold as is, and any help with theme modifications and adjustments of the theme files is beyond the scope of this service and is not a part of the purchase package.

    Customizations are hereby defined as any adjustments of the theme's code, any additional HTML, PHP, JavaScript and CSS code, or any additional files containing this code which alter the native look and functional of the theme (including user-made theme template files).

    Get extra customization service

    If you need extra customization or modification of your Scape theme copy that is beyond the theme support scope, we suggest you ask for an expert help. Our partners at WP Kraken will help you not only with custom work, but will also assist with your WordPress set-up, plugin installation or server configuration. WP Kraken is a 100% Money Back Guarantee solution for your WordPress extra services.