Update Log

Version 1.0.0 - 1 February 2023

• Initial release

What's included

The first step after purchasing the theme from ThemeForest is to download Rendr files from your ThemeForest account. For that you should navigate to ThemeForest downloads tab and find Rendr 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:

• rendr.zip - contains the Rendr 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 Rendr. Therefore, if you are building 2 websites with Rendr, 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 Rendr.

More complete information on ThemeForest licenses can be found here.

Common questions

• If I need to use Rendr on a second site/domain, do I need a second license?

  Yes. One purchase of Rendr 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 Rendr 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 Rendr WordPress Theme, you you must be running WordPress 5.0 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:

• WordPress Codex - General information about WordPress and how to install it on your server.
• First Steps With Wordpress - General information about WordPress.
• FAQ New To WordPress - The most popular FAQ’s regarding WordPress.

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 Rendr 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 Rendr 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.

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:

Installation

Automatic install

1. Download All Files and Documentation package from Themeforest and unzip it.
2. In the unzipped folder you will find rendr.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 rendr.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 rendr.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 Rendr 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 Rendr 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 Rendr.
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 the user's Envato Account username
   • Verify purchases the user has 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 Rendr and navigate to ThemeForest downloads page.
2. Find Rendr 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 Rendr 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.

Plugins

Plugin licenses

Premium bundled plugins are distributed under the extended license (with licensee being Rendr 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

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

Another plugin included is Rendr Core, which adds core features to the Rendr theme. It also extends and modifies the WPBakery Page Builder plugin. Please note that Rendr Core and WPBakary Page Builder 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.
• WPBakery Page Builder - premium page builder plugin.
• Contact Form 7 - free plugin for creating contact forms.
• WooCommerce - free plugin for creating an online shop.
• YITH WooCommerce Wishlist - free plugin for adding shop wishlist functionality.

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 Rendr Theme - Plugins page.

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

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

Rendr 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 Rendr. This can be done during the initial Install Wizard or any time from the Rendr 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

In case you notice that the progress bar hasn't been moving for a couple of minutes - check your browser JavaScript console. If you see a 50X error (e.g. 504 (Gateway Timeout), it may mean that the configuration of your server (e.g. Apache timeout settings) does not allow running long scripts. In this case you need to reload the page and run demo import once again. Each time you re-run the import, you should see your progress grow, and eventually it should reach 100% as your server will be able to process import data in smaller chunks.

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

1. Make sure you have activated your Purchase Code, otherwise the Demo Importer will not be available.
2. 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.
3. Make sure you disable all unnecessary 3rd-party plugins before importing, because they may be using excessive resources.
4. 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.
5. If the import progress freezes, try importing demo with Generate resized image copies and/or Attachments options deselected. Image download and resizing requires a lot of resources, and skipping these steps may eliminate the bottleneck.
6. If unsuccessfully trying to import the main demo, try doing it in parts. For the main demo, the importer allows to import only pages, posts, portfolio items, products or content blocks (or any combination of those).
7. 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.
8. If none of the aforementioned helps, try using manual import as a fallback.
   • In the full theme package locate the Demo-content -> Rendr-demo directory and find the folder corresponding to the demo you want to import.
   • Import the .xml file using WordPress Importer in Settings -> Import.
   • Import the contents of .json file with Theme Options in Theme Options -> Import/Export -> Import from File.

Smart images

Smart image sizes

Rendr 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, Rendr 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

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.

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 Rendr 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. Rendr 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, Rendr 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

Rendr has an awesome library of icon fonts on board with more than 4000 icons from multiple libraries. 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 Rendr. 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.

Rendr 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

Rendr 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, Rendr 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.

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 Rendr 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 Rendr: 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 Rendr 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 Rendr 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 Rendr. To apply the plugin updates:

1. Update Rendr 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 Rendr 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.
3. Drag & Drop header elements into the header drop zones to build the contents of the header.

Header builder

Header builder is a unique Rendr 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.

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.

Menu

Enhanced menus

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

Creating a onepage navigation

Adding menu to a page

With Rendr 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.

Logo & favicon

Logo

To ensure maximum flexibility, logo should be added separately for each header style you are using on your website. Logo file can be added in Theme Options -> Header Settings -> Header Style X -> Logo. You will be offered to add separate logo files for the light or dark header styles (or both in case you are using both on your website). Afterwards, you should set what height and width your logo should be in your header, and its top and left offset.

Favicon

For optimal WordPress usage and theme performance, favicon should be added in a native WordPress way in Appearance -> Customize -> Site Identity option. For more information on how to add a favicon, please read the official WordPress documentation.

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.

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.

Pages

Creating a new page

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

Posts

Creating a new post

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

Post formats

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

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.

Portfolio

Creating a new portfolio item

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

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. Grid gallery

     • 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.
     • Grid gutter - distance between the images in the grid.
     
     

  5. 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.
     
     

  6. 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
     
     

  7. 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

Shop

What's needed

To set an online shop as seen in Rendr 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.

Rendr is fully compatible with the plugin, as well as applies theme-specific styling to WooCommerce elements, and adds some unique features. In addition, Rendr 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 Rendr 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, Rendr 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 Rendr 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 Rendr 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 Rendr 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.

Page builder

Rendr 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 Rendr, 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 Rendr 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. Rendr 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.

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.

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.

Header styles 7 and 8

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.

Submenu

This section controls the appearance 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

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

Page

Blog & Posts

Post entry

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

Archives

These options define how the posts archive pages look like.

Author page

These options define how the blog author page looks like.

Portfolio

Portfolio item

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

Archives

These options define how the posts archive pages look like.

WooCommerce

Product page

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

Shop page

Components

Utility pages

Search page

404 page

Maintenance page

Rendr 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

Rendr 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

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

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.

Preloader

Filter

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

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

Rendr 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, Rendr fully supports the Frontend Editor and allows to create pages, posts, portfolio, products etc. easily and in a matter of minutes.

Not only Rendr 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, Rendr 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

Rendr 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

Rendr 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 Rendr to suit every taste.

Using post grid

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 Rendr to suit every taste.

Using portfolio grid

Section divider

Section divider is a unique element provided by Rendr 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.

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.

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 Rendr 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

Rendr 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 at the bottom of your page and insert a modal window shortcode into it (add the row straight to the page, not to another section). 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? Rendr 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:

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:

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. Rendr 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 / themes / rendr / languages / folder, naming them based on the language used, e.g. 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.

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.

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 rendr 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

Rendr 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. Rendr will automatically show the right version of a content block based on current language.

Multiple blogs and portfolios

Unique blog and portfolio display system in Rendr 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.

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 Rendr 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.

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

Rendr 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

Rendr 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.

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).

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 Rendr 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

Design options

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. Rendr allows to shift section, row or column content out of its place making it overlap the adjacent element.

To achieve the effect:

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.

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

Rendr 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. Rendr 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. Rendr adds branded styling to these plugins' elements to make them fit into the overall theme design.

In addition to styling, Rendr 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.
  <p class="vc_col-sm-6"> <label for="your-name">Name*</label> [text* your-name] </p> <p class="vc_col-sm-6"> <label for="your-phone">Phone*</label> [tel* your-phone] </p> <p class="vc_col-sm-6"> <label for="your-email">Email*</label> [email* your-email] </p> <p class="vc_col-sm-6"> <label for="your-subject">Subject</label> [text your-subject] </p> <p class="vc_col-sm-12"> <label for="your-message">Your Message</label> [textarea your-message] </p> <p class="vc_col-sm-12">[submit "Submit"]</p> Copy form code

• 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).
  <p class="vc_col-sm-6"> <label for="your-name">Name*</label> [text* your-name] </p> <p class="vc_col-sm-6"> <label for="your-phone">Phone*</label> [tel* your-phone] </p> <p class="vc_col-sm-6"> <label for="your-email">Email*</label> [email* your-email] </p> <p class="vc_col-sm-6"> <label for="your-subject">Subject</label> [text your-subject] </p> <p class="vc_col-sm-12"> <label for="your-message">Your Message</label> [textarea your-message] </p> <p class="vc_col-sm-12">[submit "Submit"]</p> Copy form code

• Flat

  Flat contact form design, which is applied by adding cf-flat class.
  <p class="vc_col-sm-6"> <label for="your-name">Name*</label> [text* your-name] </p> <p class="vc_col-sm-6"> <label for="your-phone">Phone*</label> [tel* your-phone] </p> <p class="vc_col-sm-6"> <label for="your-email">Email*</label> [email* your-email] </p> <p class="vc_col-sm-6"> <label for="your-subject">Subject</label> [text your-subject] </p> <p class="vc_col-sm-12"> <label for="your-message">Your Message</label> [textarea your-message] </p> <p class="vc_col-sm-12">[submit "Submit"]</p> Copy form code

• Subscribe modern

  Modern contact form design specifically for small subscribe forms, which is applied by adding cf-subscribe-modern class.
  <p class="vc_col-sm-8 no-padding-left"> [email your-email placeholder "Enter your email"] </p> <p class="vc_col-sm-4 no-padding-right"> [submit "Subscribe"] </p> Copy form code

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.
  <div> <input type="email" name="EMAIL" placeholder="Enter your email" required /> <button type="submit" value="Subscribe"> <span class="mc-arrow"></span> </button> </div> Copy form code

• Modern

  Modern subscribe form design, which is applied by adding mc-modern class.
  <div> <input type="email" name="EMAIL" placeholder="Enter your email" required /> <input type="submit" value="Subscribe"> </div> Copy form code

• Bubble

  Subscribe form design, which is applied by adding mc-bubble class.
  <div> <input type="email" name="EMAIL" placeholder="Enter your email" required /> <button type="submit" value="Subscribe"> <span class="mc-arrow"></span> </button </div> Copy form code

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, Rendr gets you covered with its GDPR Compliance Tools.

How Rendr helps you comply with GDPR

It's important to remember that Rendr 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.

Rendr, 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.

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 Rendr, 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

Rendr 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:

Rendr 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. Rendr 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 Rendr'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 Rendr's Custom Font Uploader. Please note that Rendr 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 Rendr.

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 Rendr 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:

Rendr 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 Rendr 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 rendr_privacy_consent shortcode like this:

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

Support policy

How to get help

Rendr 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 Rendr 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)

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 Rendr 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. Rendr 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.

Get extra customization service

If you need extra customization or modification of your Rendr 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.