Content:

• Getting Started
  • What's Included
  • Requirements For Theme
  • Installation
  • How to update the theme
  • Theme Support

First, make sure you backup the WordPress Customizer settings by using this plugin.

Update using Envato Market Plugin (recommended)

1. You need to download (.zip) the plugin from here.
2. Go to ThemeForest > You Account > Settings > API Key and copy API Key.
3. Click the ‘Envato Market’ menu in WordPress Dashboard.
4. Enter your API Key and you will be able to see your purchased items which is included Adri theme.

Update using plugin

1. Download the theme from ThemeForest > Download > Adri ..., you can chose to download only the installable files (the theme) or all files. If you download all files inside the main folder is located the theme zip file. Make sure to NOT upload the main folder with all files, just the theme zip file.
2. You need to download and install Easy Theme and Plugin Update.
3. After installing the plugin. Go to Apperance > Themes > Add New > Upload Theme
4. Select “adri-....zip” file and choose “Upgrade existing theme” option to “Yes” and click “Install Now” button

Update it manually via FTP

1. Download the theme from ThemeForest > Download > Adri ..., you can chose to download only the installable files (the theme) or all files. If you download all files inside the main folder is located the theme zip file. Make sure to NOT upload the main folder with all files, just the theme zip file.
2. Login to your FTP account. Navigate to wp-content>themes location, backup the theme
   by simply saving it to your computer.
3. Unzip the theme files, and darg and drop them on the server in wp-content>theme.
   Click Replace when prompted.

Common issues when updating

1. Are You sure you want to do this? If you get this message. Please check with your web host upload file size limit and ask them to increase the limitation.
2. Theme install failed destination folder already exists. This is because WordPress allows you to have only 1 theme with the same name and folder. To get around this issue, please update theme using auto updater or FTP steps above.

All of our themes come with free support and currently we handle all support questions through the item's comment section.

In order to help speed up solution for your requests. Please follow steps below before submitting a new question. This is for the benefit of everyone in order to help find the solution for your question quickly.

1. Make sure you are running the latest version of Theme and the latest version of WordPress.
2. Check out theme documentation and discussion forum for the answer to your question.
3. Disable any additional 3rd party plugins you are using to check if it fixes the issue.
4. If you can find the answer submit your question via the comment section.

Support Includes:

• Responding to questions or problems regarding the item and its features.
• Fixing bugs and reported issues.
• Providing updates to ensure compatibility with new software versions.

Support does NOT include:

• Customization and installation services.
• Support for third party software and plug-ins.

Common issues when updating

Missing stylesheet error? Most common issue that happens with new users installing WordPress theme. Make sure you are NOT uploading the whole main folder that you've download and instead browse inside the main folder to located the theme zip file. In very rare cases the download zip file might get corrupted, so try downloading it again.

Content:

• Demos
  • Import Demo Site
  • Import Single Demo Page
  • Import Demo Issue

When you first install the theme, you won't get all the pages and settings you see in the demos. You chose to import the demo content that you want.

When importing a demo via the demo importer, many processes are happening simultaneously in the background. This is a resource intensive task and will take some time (is not uncommon to take up to 15min or more).

Recommended PHP Configuration Limits

Many issues may occur when importing demo, most of them are related to low PHP configuration limits on your web host. The solution is to increase the settings. Here are the recommended PHP configuration limits:

• max_execution_time 180
• memory_limit 128M
• post_max_size 32M
• upload_max_filesize 64M

Demo Content

If you want to import demo other than main demo and to import quickly all the pages, after you are done importing your demo, you can manually import the pages (see manual import bellow).

IMPORTANT: Demo importer can vary in time. The included required plugins need to be installed and activated before you import demo. Please check the System Status to ensure your server meets all requirements for a successful import. Settings that need attention will be listed in red.

Steps to import the demo content:

1. Install and activate all required plugins before you proceed. This includes recommended plugins - for example if the demo has store you need WooCommerce plugin activated.

2. Prepare the Elementor plugin for importing the demo data - Dashboard > Elementor > Settings > check "Disable Default Colors", check "Disable Default Fonts".

3. Navigate Dashboard > Appearance > Import Demo Data, chose the demo that you want and click import (only once) and wait - it can take up to 15min and more.

4. (optional) If you want to use the mega menus, Max Mega Menu plugin should be installed & active. Then enable the plugin by going - Dashboard > Appearance > Menus > Max Menu Settings > check Enable > Save.

5. After you visit the website, it might have different color. The Customizer settings should be imported but the colors might not be applied, yet. - Just open the Customizer click on random settings and then cancel, don't publish, close the Customizer and do hard browser refresh Ctrl/Cmd + Shift + R. The colors should be applied now.

6. (optional) In case the Slider Revolution slider is not installed via the demo import - import it manually from the main folder > exports > sliders > name of the slider . zip, then Dashboard > Slider Revoultion > Manual Import > drop the slider zip file.

7. (optional) If you use the Portfolio elements - Make this change to Elementor: Open any page with Elementor Page Builder > Top left hamburger menu (3 horizontal lines) > Site Settings > Lightbox > disable Image Lightbox.

That's it enjoy your demo!

IMPORTANT: You can import one demo per WP installation, with the One Click Demo Importer.

You can import a single page as Elementor Template. All the page templates are located in the main download folder exports.zip > elementor.zip > Elementor > elementor-... .json file.

To import a template, create new page, edit it with Elementor, click the templates icon, then import a the template that you want and click insert.

Importing demo content is complicated process that downloads media files from demo server to your server.

There might happen some limited setting on your server to kill the importing process when it reach certain level of server resource usage. This is usually related to your server limitation.

In this cases workaround is to manually import the content with different plugins and import the media manually later.

In case of issue with the import contact the support - via our profile page contact form and share your WordPress admin login credentials.

• Header
  • Setting up Menus
  • Transparent Navigation
  • Mega Menu
  • Header/Hero - Sliders

Menu Locations

The theme comes with 3 menu location:

Create your menus and assign them to this correct locations. Importing the demo data will also import the menus used in the demo.

Adding your logo

Navigate Customize > Site Identity > Site Logo upload your logo.

If you have the transparent navigation option selected, here will be shown Transparent Nav Site Logo - option to show different logo when the navigation is transparent.

Navigation Settings

Numbers on the image left, correspond to the numbers in the explanation list.

1. Make the navigation menu full width or be in a grid with the rest of the content on the page.

2. Transparent navigation settings - see the this section for more info.

3. Transparent navigation settings - see the this section for more info.

4. Transparent navigation accent color - you can set it as your primary color, light or dark color, depending on the background bellow the transparent navigation.
Note: add primary color from the Colors section in the Customizer.

5. Makes the navigation menu stick - be always shown as you scroll down the page.

Show search icon in the menu, at the far right.

Show cart icon in the menu, at the far right - only if you have WooCommerce activated.

Show social media icons at the bottom of the mobile navigation.

5.1. Show and hide social media icons in the nav menu (mobile). To add the icons use the Social Icons section outside of Navigation. Use this shortcode to display the icons - replace with your own content :

[slinks]
[sicon sc_link="#" sc_icon="fab fa-linkedin-in"]
[sicon sc_link="#" sc_icon="fab fa-twitter"]
[sicon sc_link="#" sc_icon="fab fa-tiktok"]
[sicon sc_link="#" sc_icon="fab fa-youtube"]
[/slinks]

6. Change the background color style of the navigation (desktop only) when is not transparent, you can chose between light or dark color.
Note: you can add your own colors from Colors section in the Customizer.

7. Change the background of the dropdown menu - with contrasting menu items.

8. Default (non-transparent) navigation accent color - you can chose the primary color, light or dark color.
Note: add primary color from the Colors section in the Customizer.

---

What about my own custom/brand colors?

The main idea of this theme is to be controlled via two color settings: primary and secondary color. You can adjust those in the Customize > Colors - that will have effect over the whole theme including the navigation.

When the navigation does not have a background and lays on top of a hero or slider or other elements is called transparent navigation.

Enable Transparent Navigation

Click Customize > Navigation > check "Enable transparent menu navbar."

Transparent Navigation Settings

Numbers on the image left, correspond to the numbers in the explanation list.

1. Enable/Disable the transparent navigation - this will make the navbar "see trough" and it will lay on top of the first element usually slider image, adjust the nav. settings so the navigation be visible or contrasting to the background image.

2. Make the transparent navigation show only on the home page, for example when you have hero/slider there, for the other pages the navigation menu will have the standard styling.

3. Option to change the color of the menu items - this will depend on your background, if the background is dark (most cases) - select "Light color style" for the menu items. In cases where the background is white/light select the "Dark color style" for the menu items. This setting only affects the navigation when is transparent.

4. Transparent nav. menu items accent color - the underline color bellow the menu item or arrow color next to the menu item if it has dropdown.
Note: add primary color from the Colors section in the Customizer.

---

When you enable transparent navigation menu, option to add different logo for the transparent navigation will become available in Customize > Site Identity > Transparent Nav Site Logo. Shown in on the image left (with the arrow).

Mega Menu is larger dropdown menu that you can add more content inside, instead of just menu item.

Enable the Mega Menu

1. You need to have Max Mega Menu plugin installed and activated.

Numbers on the image left, correspond to the numbers in the explanation list.

When the plugin is enabled, you will have the settings from the image left in Appearance > Menus.

1. Check to enable/disable the mega menu.

2. Click Save after you checked "Enable" or change other settings.

3. Now when you hover over a menu item, a badge with Mega Menu will appear. Clicking it will open the mega menu creator window. You want to create mega menus only at the top most menu item not nested items.

Numbers on the image above, correspond to the numbers in the explanation list.

1. Select Grid layout to be able to put your content in grids - in most cases this is the setting you need for a mega menu.

2. You add additional content via widgets, selecting and clicking a widget will appear on in the grid bellow.

3. Add columns, when a column is added click on the arrows to increase/decrease its size.

Mega Menu - Widgets

The Text widget uses only as title can be used in a column as a group title.

The theme comes with the custom widget Adri Feature Inline Icon - you can add this to display your services more stylishly in the mega menu.

All the hero/header - sliders are created with Slider Revolution plugin, except in the "Mono" demo, see the this section for more info. "Mono" demo slider is created via the Elementor widget - Thirds Slider.

Content

• Pages
  • Elementor Page Builder
  • Setting up Homepage
  • Setting up One Page Site
  • Setting up Shop

---

Create a New Page

1. Go to Dashboard > Pages > Add New and enter title.

2. When using Elementor to create your pages always set the Page Attribute > Template > Elementor Full Width.

NOTE: To use the Elementor when creating pages always set Page Attribute > Template > Elementor Full Width.

Add Page Title

When using Elementor there is a custom widget Page Title that enables you to create a page title.

You can also create page title via Customize > Page Title, for blog pages that are not created by Elementor.