Documentation - Lusion - Multipurpose eCommerce WordPress Theme

# Documentation

Live Demo

## Overview

ArrowHiTech Jsc is one of the Vietnamese leading IT outsourcing companies which puts high-quality services and customer’s satisfaction our top priorities. Since our establishment in 2007, we have increasingly widened our skills and our HR so as to meet all the demands of the customer all over the world with our dedicated services focusing on Web design & development, Extension/ Theme building, Mobile applications/ Games development and Internet marketing.

Version: 1.0
Author: ArrowHiTech.
Designed by: ArrowHiTech

## 1. Getting Started

### 1.1 Welcome to Lusion

We would like to thank you for choosing Lusion. Lusion is also based on Kirki Toolkit and empowered by a robust admin panel and a lot of other popular plugins such as Elementor, Slider revolution, WPML, Price Calculation formulas, Mega Menu, Ajax Search, Ajax product filter…. So, it is an assurance that Lusion will bring you a super powerful features of WordPress Theme. You won’t make any mistake here, because our detailed documentation will guide you. If you are unable to find your answer in this documentation, don’t hesitate to sign up & submit a support ticket here: Support

### 1.2 Theme Requirements

You can click here to find out more about requirements of WordPress.

Below are three requirements for working version of WordPress, PHP, and MySQL.

- WordPress 4.0 or higher.
- PHP 5.5 or higher.
- MySQL 5 or higher.

You also need to make sure that your host can comply with follow requirements.

1. Your web host has the minimum requirements to run WordPress.
2. Your host is running the latest version of WordPress.
3. You can download the latest release of WordPress from official WordPress website.
4. Always create secure passwords for FTP and Database.

- Recommended PHP Configuration Limits

Low PHP configuration limits can cause many issues. When related issues occur, you need to increase your PHP limits to a minimum as follows:

- max_execution_time 180
- memory_limit 128M
- post_max_size 32M
- upload_max_filesize 32M

### 1.3 WordPress Knowledge Base

If you haven't had a working version of WordPress, you need to install it first in order to install Lusion theme. You can find many instructions to install WordPress in WordPress Codex or the Instructional Video created by Woo Themes. Below are some helpful links for you about WordPress information.

- WordPress Codex - This link provides overall information about WordPress and WordPress installation guide.
- Instructional Video - Guide to install WordPress video created by Woo Themes.
- First Steps With WordPress - Multiple useful topics about WordPress.
- FAQ New To WordPress - Common questions about WordPress.

## 2. Installation

You can install Lusion theme via 2 ways Via WordPress or via FTP

### 1.1 Via WordPress

Follow these steps below to install Lusion theme via WordPress:

Step 1. Visit Dashboard Appearance Themes Add New.

Step 2. Click Upload Theme.

Step 3. Browse Lusion.zip file (not the theme package zip file) on your computer and click Install Now.

Step 4. Activate Lusion theme.

### 1.2 Via FTP

Follow these steps below to install Lusion theme via FTP:

Step 1. Login your FTP account via FTP software to access your host web server.

Step 2. Extract Lusion.zip file.

Step 3. Upload the extracted folder Lusion to wp-content/themes folder.

Step 4. Activate Lusion theme in Dashboard > Appearance > Themes.

### 2.2 Plugins Installation

#### 2.2.1 Install plugins

In order to use the theme, you should install and activate all required plugins such as Arrowpress Core, Easy Appointments, Elementor, Kirki Toolkit. All other plugins which recommended, it ups to you whether to use it or not. For example, if you don't want to use Shop features, you can deactivate and delete all WooCommerce plugins.

##### - First method

Install plugins via installing plugins message.

After installing and activating the theme you will see the message about installing required plugins at the top of the page.

You should click Begin installing plugins link or go to Appearance > Install Plugins in order to install needed plugins for Lusion theme.

You will be redirected to Install Required Plugins page, here you will find all of the theme required plugins. In order to install these plugins, you just need to check all of them and select install then click apply. It will need to a while to install plugins successfully.

When the installation process is done, you can click Return to Required Plugins Installer and select active then check all plugins to active these plugins.

##### - Second method

Install plugins via WordPress Admin Panel.

Besides, you can install some plugins which available in wordpress.org by navigating Plugins > Add New in admin sidebar. You should enter plugin name to search plugin and click "Install Now" to install the plugin you want. After that, click "Active" button to start using that plugin.

##### - Third method

Install plugins manually (Via FTP)

If you want to manually install plugins, you can follow some basic steps below.

1. Download your WordPress Plugin to your desktop and extract plugin folder if it is a zip archive.
2. With your FTP program, upload the Plugin folder to the wp-content/plugins folder in your WordPress directory online.
3. Go to Appearance > Plugins and find the newly uploaded Plugin in the list.
4. Click Activate to activate it.

After finishing plugin install, you need to configure the plugins.

#### 2.2.2 Plugin Configuration

Some plugins will need to config setting to use.

You can install some plugins such as Elementor, Kirki Toolkit which available in wordpress.org by navigating Plugins > Add New in admin sidebar. You should enter plugin name to search plugin and click "Install Now" to install the plugin you want. After that, click "Active" button to start using that plugin.

##### - Elementor

You can see here for more details.

- After installing the Elementor, please go to Elementor > Settings. In the post types field, you should check all post type as the screenshot below.

- Easily apply a Style to every page of your site automatically using the drag and drop editor. You can apply style as the screenshot below

##### - MailChimp for WP

Go to MailChimp for WP > MailChimp to access general setting page of MailChimp. You should connect to your MailChimp account by entering API Key.

After that, navigate to MailChimp for WP > Forms and create a form with the content below content

    		<input type="email" name="EMAIL" placeholder="Type your email" required />
    		<input type="submit" value="Subscribe" />

If a MailChimp form is already existed, you can do nothing or change the form content and click Save changes to display the form in the front end.

For detail instruction, please click MailChimp for WP.

##### - Contact Form

Go to Contact > Form and create the form you want or edit existing form.

When you want to add a form which displays the same as in our demo site, you should change the content of the contact form in Contact > Form so the form can have a similar style. After changing form content, you can adjust the text or the field to what you want.

Below is the contact form content we used in our demo site. Each form can have different style based in the content in the contact form. If you imported demo content successfully, you can skip this step.

- Contact form in Contact Us

                            <label> Name<span>*</span>
    				[text* your-name] </label>

    			<label> Email<span>*</span>
    				[email* your-email] </label>

    			<label> Phone
    				[text text-881] </label>

    			<label> Content<span>*</span>
    				[textarea* your-message] </label>

    			[submit "Send messages"]

After that, you need to set up Mail tab. Please see this guide for more detail. Mail setting

##### - Woocommerce

WooCommerce is the most popular WordPress eCommerce plugin. Packed full of features, perfectly integrated into your self-hosted WordPress website.

You can see here for more details and woocommerce documentation.

Plugin Advanced AJAX Product Filters

Go to BeRocket > Product Filters to access general setting of BeRocket

After that, in tab JavaScript/CSS, you must add js:

    			jQuery(".woocommerce-ordering h3").append('<span class="theme-icon-download"></span>');
    				 var $title_ordering = jQuery('.woocommerce-ordering h3');
    						$title_ordering.on('click', function () {
    							var $div_ordering = jQuery('.woocommerce-ordering ul');
    							if ($div_ordering.is(':hidden') === true) {
    								$div_ordering.slideDown();
    								$title_ordering.find('span').remove();
    								$title_ordering.append('<span class= "theme-icon-upload"></span>');
    							} else {
    								$div_ordering.slideUp();
    								jQuery(this).find('span').remove();
    								jQuery(this).append('<span class= "theme-icon-download"></span>');
    							}
    						});

    						jQuery(".bapf_stylecolor .bapf_head h3").append('<span class="theme-icon theme-icon-upload"></span>');
    						var $title_color = jQuery(".bapf_stylecolor .bapf_head h3 ");
    						var $div_color = jQuery(".bapf_stylecolor .bapf_body");
    						$div_color.addClass('open_color');
    						$title_color.click(function () {
    							$div_color.slideUp();
    							if ($div_color.hasClass('open_color')) {
    								$div_color.removeClass('open_color');
    								$div_color.addClass('remove_color');
    								$title_color.append('<span class= "theme-icon theme-icon-upload"></span>');
    								$title_color.css('margin-bottom', '10px');
    								jQuery(this).find('span.theme-icon').remove();
    								jQuery(this).append('<span class= "theme-icon theme-icon-download"></span>');
    							} else {
    								$div_color.slideDown();
    								$div_color.removeClass('remove_color');
    								$div_color.addClass('open_color');
    								jQuery(this).find('span.theme-icon').remove();
    								jQuery(this).append('<span class= "theme-icon theme-icon-upload"></span>');
    								$title_color.css('margin-bottom', '27px');
    							}
    						});

    				var $rtl = false;
    					if (lusion_params.lusion_rtl == 'yes') {
    						$rtl = true;
    					}
    				var wdw = jQuery(window).width();
    				jQuery(window).resize(function () {
    				var li = jQuery('.woocommerce ul.products.columns-2 li.product');
    				for (var i = 0; i < li.length; i++) {
    					var widthPrice = jQuery('.' + jQuery(li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .product-price .top-desc span.price').selector).width() + 15;
    					if (wdw > 1024) {
    						if ($rtl == false) {
    							jQuery('.' + li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .woocommerce-loop-product__title').css('padding-right', widthPrice + 'px');
    						} else {
    							jQuery('.' + li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .woocommerce-loop-product__title').css('padding-left', widthPrice + 'px');
    						}
    					} else {
    						if ($rtl == false) {
    							jQuery('.' + li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .woocommerce-loop-product__title').css('padding-right', '0px');
    						} else {
    							jQuery('.' + li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .woocommerce-loop-product__title').css('padding-left', '0px');
    						}
    					}
    				}
    				});
    				var li = jQuery('.woocommerce ul.products.columns-2 li.product');
    				for (var i = 0; i < li.length; i++) {
    					var widthPrice = jQuery('.' + jQuery(li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .product-price .top-desc span.price').selector).width() + 15;
    					if (wdw > 1024) {
    						if ($rtl == false) {
    							jQuery('.' + li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .woocommerce-loop-product__title').css('padding-right', widthPrice + 'px');
    						} else {
    							jQuery('.' + li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .woocommerce-loop-product__title').css('padding-left', widthPrice + 'px');
    						}
    					} else {
    						if ($rtl == false) {
    							jQuery('.' + li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .woocommerce-loop-product__title').css('padding-right', '0px');
    						} else {
    							jQuery('.' + li[i].className.trim().replace(/\s+/g, '.') + ' .product-desc .woocommerce-loop-product__title').css('padding-left', '0px');
    						}
    					}
    				}

After that, in tab Selectors, you must add class:

- Change Image Sizes

You can change the product image sizes in Appearance > Customizer > Woocommerce > Product Image on admin sidebar.

- Product image in Shop page: You should change Thumbnail width

- Product image in single product page: You should change Main Image width

- Change Product Catalog

You can change the product catalog in Appearance > Customizer > Woocommerce > Product Catalog on admin sidebar.

- Enable store notice

Navigate to Appearance > Customizer > Woocommerce > Store Notice, check the box Enable store notice

You can change text in this field

- Change Checkout

You can change the product catalog in Appearance > Customizer > Woocommerce > Checkout on admin sidebar.

- Enable register in My Account page

Navigate to Woocommerce > Settings > Accounts, check the box Enable registration on the "My Account" page

#### 2.2.3 Revolution Slider Configuration

Configuration custom font.

You can download webfonts. Then, You need unzip folder and upload fonts in wp-content\webfonts.

You can go to Revolution Slider -> Globals -> Edit Custom Font -> Add font name and font css URL

For example: font css URL: http://hn.arrowpress.net/lusion-sample/wp-content/webfonts/stylesheet.css

### 2.3. Activate theme

Note: In order to fully use the features of the theme, you need to have the activate theme.

To activate the theme, go to Setting -> Activate theme -> Enter purchase code -> Save

Note: Once Required Plugins are configured, you may be interested in installing sample content as our demo sites. In the next section, we will guide you about demo installation.

### 2.4. Demo Installation

Note: For successfully demo importing, you should make sure to set up Php configuration limit and max_execution_time as theme requirement before importing demo. Please read Install Theme > Installation for all requirements.

Make sure to install and activate all required plugins in Appearance > Install Plugins before installing demos especially ArrowPress Importer plugin

#### 2.3.1 First Method: One click import

1. Go to Appearance > Import Demo Content
2. Import Base Content
3. After successfully importing Base Content, you can go to Appearance > Import demo content and import Home Demos you want

Note: If this method doesn't work with your server, you can try import all demos by the second method.

Note: After the Installation is successful, go to each css (post -.... css) file in Lusion/ wp-content/uploads/elementor/css replace our link site with your site.Ex: Your website is http://hcaresol.pt/teste/ then you replace all http://hn.arrowpress.net/lusion-sample/ into http://hcaresol.pt/teste/

#### 2.3.2 Second Method: One click demo import plugin

Install demo with One click demo import plugin.

1. Install and activate One Click Demo Import plugin.

2. Select file in theme_import/content.xml folder and click "Open".

3. Go to Appearance > Import demo data and choose XML file placed in theme_import/content.xml

4. In Widget import section, you should select import file for widget in theme_import/widget_data.json

5. Click Import button.

6. After successfully finish above process, you should go to Setting > General and select homepage. Go to Appearance > Menu and assign menu to menu location such as Primary Menu. If you don't know how to set menu, please see Build your site > Menu setup.

#### 2.3.3 Third Method (All-in-One WP Migration)

Install demo via All-in-One WP Migration plugins.

Remember that your site database will reset entirely after using this method.

Please follow steps listed below to import demo.

- Step 1: Install and activate All-in-One WP Migration plugin to use this method.

- Step 2: Download Demo backup file.

- Step 3: Navigate to All-in-One WP Migration > Import on admin sidebar

.

- Step 4: Click Import From > File button, select the demo file downloaded in step 2. After that, you should wait for few minutes and click Continue.

- Step 5: Login to the site with the account: Username: admin, Password: admin After login with this account, you can change username and password back to your credentials.

#### 2.3.4 Fourth Method (WordPress importer)

Import demo data manually.

Note: Please remember to install all needed plugins before import demo data. If you have not install plugins, please see Plugins Installation to finish that step.

- Import widget

  - Step 1: Install and activate Widget Importer & Exporter

  - Step 2: Navigate to Tools > Widget Settings Import and click Select a file button.

  - Step 3: Select widget file in theme_import/widget.wie folder and click "Open".

  - Step 4: Click Show Widget Settings.

  - Step 5: Click Select All Active Widgets.

  - Step 6: Click Import Widget Settings.

- Import Data

  - Step 1: Navigate Tools > Import and click on WordPress link. This will bring up a popup box that allows you to install the plugin directly from your website.

  - Step 2: After clicking Install Now button, you should activate plugin by clicking Activate Plugin & Run Importer.

  - Step 3: After that, you will be to the import page. This is where you upload the XML file which will be found in theme_import/content.xml to import data.

  - Step 4: You will then be given the option to assign imported authors to exist authors on your website or create a new account for each author’s posts. Also, there is an option for you to download attachments. If you select this, WordPress will attempt to import all of the images that are attached to the posts and pages you are importing.

- Install plugin Cusomize

  Note: This will overwrite all existing option values, please proceed with caution!

  After extract zip package of Lusion theme. You can install and active Customizer plugin

## 3. Theme Configuration

### 3.1 Set Up Menu

1. Creating your Menu

Step 1- Login to the WordPress Dashboard.

Step 2- From the 'Appearance' menu on the left-hand side of the Dashboard, select the 'Menus' option to bring up the Menu Editor.

Step 3 - Select Create a new menu at the top of the page.

Step 4 - Enter a name for your new menu in the Menu Name box.

Step 5 - Click the Create Menu button. Your menu is now defined, and you can now add pages to it (steps below).

Step 6 - Select the Pages that you want to add by clicking the checkbox next to each Page's title.

Step 7 - Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.

Step 8 Fill information of menu that you want to display.

Step 9 - Assign each Theme Location with a menu. You can assign menus to multiple Theme Locations.

Step 10 - Click the Save Menu button once you've added all the menu items you want. Your custom menu has now been saved.

Menu Home will be displayed.

2. Mega Menu

Mega Menus allow you to add multi-column drop down menus to your navigation with rich media such as images and videos. In this article, we will show you how to easily add a mega menu to your WordPress site.

If you want to use mega menu, you should check the box Enable Mega Menu & Choose Mega Menu

Creating Mega Menu

If you want to mega menu, please see Set Up Template & How to use Elementor . For example, in our theme there were 2 mega menus

Layout 1:

Layout 2:

### 3.2 Set Up Header

Step 1 - From admin Dashboard, navigate to Header Builder > Add New Header

Step 2 - Using Elementor backend editor Lusion then add element to your Header

Step 3 - Build your header style with unlimited layout

Step 4 - Use Elementor to drag or drop element to create header.

Elementor Layout setting

Front end look like :

Step 4 - Navigate to : Apperance > Customize > Header.

Choose your header for page.

Lusion has 9 header styles.

Header 1
Header 1
Header 2
Header 2
Header 3
Header 3
Header 4
Header 4
Header 5
Header 5
Header 6
Header 6
Header 7
Header 7
Header 8
Header 8
Header 9
Header 9

### 3.3 Set Up Home Page

You can quickly build a home page using Elementor for WordPress that is drag and drop frontend and backend page builder plugin that will save you tons of time working on the site content. You will be able to take full control over your WordPress site, build any layout you can imagine – no programming knowledge required

From your Dashboard admin Navigate to Pages

- Select All Pages to see all page then click edit one page you want

- Select Add New to create new page

One page always include a lot of parts like Header , Main Page, Widget Sidebar and Footer. In that section we guide you create Main page by using Elementor.

#### 3.3.1 How to use Elementor

Have you ever used Elementor ? Please follow that guide first : Elementor guide

Official Plugin Documentation For More information about the Elementor check the official documentation.

Backend Editor Lusion

How to use Back End Lusion

a. Add and modify Row Layout

Step 1 - Go to your page / post, first activate the backend editor and click Edit with Elementor

Step 2 - You will see all element in left sidebar, please choose element that you want to use.

or you will see button "Add New Section" ,"Add Template" , please click to button to add element.

Step 3 - To change the Row layout ( number of columns ) you need to click button content will display in leftsidebar.

b. Edit Element

Click on the Edit This Element (pencil icon) to Edit the Row element , when you click to button all content will display in left sidebar follow you can change .

c. Remove Element

Trash Box Icon - To Remove Row, Column or Module you need to click the Trash Box icon.

d. Add Element

Trash Box Icon - To Add Row, Column , please click to add icon.

#### 3.3.2 Page Options

a. Page Attributes

You can select page attributes on right sidebar of page admin layout. Each Page templates have each styles .

b. Page configure default template

For each page you can change the page layout style, custom header , custom footer and much more! Check the screenshot and read the documentation to see how it works .

- General - Select if you want the page to have a Fullwidth layout and config sidebar, ...
- Skin - Select if you want to custom color in customize.
- Breadcrumbs - Select if you want to custom breadcrumb in customize.
- Header Layout - Select if you want to custom header in customize.
- Footer Layout - Select if you want to custom footer in customize.

#### 3.3.3 Set a page as Home Page

Step 1 - Go to Settings > Reading in your WordPress Dashboard panel.

Step 2 - Set "Front page displays" to a "Static Page".

Step 3 - In the drop down menu for "Front Page" choose a page which will be your home page.

Step 4 - In the drop down menu for "Posts Page" choose a page which will be your posts page.

Step 5 - Save changes.

In Lusion has use woocommerce to set up product, if you want to know how to use, please click a link:

Woocommerce .

In our theme has element is " APR Products " to setting product display in homepage, please click to add element --> then choose "APR Products".

In our theme has element is " APR Woo - Categories " to setting product display in homepage, please click to add element --> then choose "APR Woo - Categories".

In our theme has element is "APR Tab " to setting product display in homepage, please click to add element --> then choose "APR Tabs".

### 3.4 Set Up Template

Step 1 - From admin Dashboard, navigate to Elementor > My templates

Step 2 - Click to Add New popup to require add new template is display, please input name your template and click Create Template

Step 3 - Using Elementor backend editor Lusion then add element to your Template

Step 4 - Drag or drop element that you want to build your template style with unlimited layout

Step 5 - Go to page and please click button Add Template

Step 6 - Choose tab My Template and you can add template that has created to page.

### 3.5 Set Up Blog Page

#### 3.5.1 Create the blog post

Step 1 - Log in to your WordPress Administration Panel (Dashboard).

Step 2 - Click the 'Posts' tab.

Step 3 - Click the 'Add New' sub-tab.

Step 4 - Start filling in the blanks: enter your post title in the upper field , you can add content of post by use elementor to create.

Step 5 - As needed, select a category, add tags, fill in the meta setings below the editor.

Step 6 - Upload a featured image for your Post.

Step 7 - Select Post Format and enter suitable content for post format in Post Format box. You can create blog post with a lot of Formats like link, gallery, image ..... Select format on Format box from in right sidebar .

- Video and audio format: you will need to enter embed link of youtube, vimeo or soundcloud or paste the iFrame embed from either Youtube or Vimeo into the Video Embed Code field in Video & Audio Embed Code.

- Project format: If you choose Project format, you will see Image Project box display in the right of page. Image in project will be shown as slider.

- Blockquote format: If you choose Blockquote format, you will need enter quote text

- Link format: For Link format, you will need enter title and link

Step 9 - When your post is ready, click Publish.

#### 3.5.2 Manager current all blogs

Navigate to Posts → All Posts

You can see all informations of you blog post, add new, edit or delete them.

### 3.6 Set Up Footer

Step 1 - From admin Dashboard, navigate to Footer > Add New Footer

Step 2 - Using Elementor backend editor Lusion then add element to your Footer

Step 3 - Build your footer style with unlimited layout

Step 4 - Drag or drop element to create footer.

Footer default.

Change Content footer default

Go to Appeareance > Widget, you can find footer sidebar for each footer.

Front end look like :

Step 4 - After create your footer profile. Navigate to Dashboard->> Homepage and scrolldown until you see Page setting ->> choose Footer and choose footer that you want to use.

Or you can choose footer in Customizer. Navigate to : Apperance > Customize > Footer.

Choose your footer for page.

Lusion has 6 footer styles.

Footer 1
Footer 1
Footer 2
Header 2
Footer 3
Footer 3
Footer 4
Footer 4
Footer 5
Footer 5
Footer 6
Footer 6
Footer 7
Footer 7
Footer 8
Footer 8
Footer 9
Footer 9
Footer 10
Footer 10
Footer 11
Footer 10
Footer 12
Footer 12
Footer 13
Footer 13

### 3.7 Set Up Elementor config

- Settings:

Step 1 - Log in to your WordPress Administration Panel (Dashboard)

Step 2 - Click the ' Elementor'.

Step 3 - Click the 'Settings' .

Step 4 - You will see all tabs for setting of elementor , in General tab

Step 5 - In Style tab you will see all config for style

Step 6 - Intergrations and Advanced display config for elementor.

### 3.8 Woocommerce config

WooCommerce is the most popular WordPress eCommerce plugin. Packed full of features, perfectly integrated into your self-hosted WordPress website.

You can see here for more details and woocommerce documentation.

Plugin Advanced AJAX Product Filters

Go to BeRocket > Product Filters to access general setting of BeRocket

After that, in tab Selectors, you must add class:

- Change Image Sizes

You can change the product image sizes in Appearance > Customizer > Woocommerce > Product Image on admin sidebar.

- Product image in Shop page: You should change Thumbnail width

- Product image in single product page: You should change Main Image width

- Change Product Catalog

You can change the product catalog in Appearance > Customizer > Woocommerce > Product Catalog on admin sidebar.

- Enable store notice

Navigate to Appearance > Customizer > Woocommerce > Store Notice, check the box Enable store notice

You can change text in this field

- Change Checkout

You can change the product catalog in Appearance > Customizer > Woocommerce > Checkout on admin sidebar.

- Enable register in My Account page

Navigate to Woocommerce > Settings > Accounts, check the box Enable registration on the "My Account" page

##### - Regenerate Thumbnails

Regenerate Thumbnails allows you to regenerate the thumbnails for your image attachments. This is very handy if you've changed any of your thumbnail dimensions (via Settings -> Media) after previously uploading images or have changed to a theme with different featured post image dimensions.

You can either regenerate the thumbnails for all image uploads, individual image uploads, or specific multiple image uploads.

You can see here for more details.

Please go Tools > Regen.Thumbnails and click Regenerate All Thumbnails.

Once Required Plugins are configured, you may be interested in installing sample content as our demo sites. In the next section, we will guide you about demo installation.

### 3.9 Create Newsletter

We are using MailChimp for WP plugin for Newsletter subscribe. You can read more about MailChimp from here

Follow that step below to help you can collect email of subscribers.

##### - MailChimp for WP

Go to MailChimp for WP > MailChimp to access general setting page of MailChimp. You should connect to your MailChimp account by entering API Key.

Step 1 - Signup for Mailchimp account then create your lists to collect email .

Step 2 - Install and active plugin MailChimp for WP .

Step 3 - Navigate to MailChimp for WP > MailChimp then connect with your mailchimp account you created from step 1 .

Step 4 - Create mailchimp form to collect email. Navigate to Forms

Import HTML Code below on section Form mark-up Source

Source :

                                <input type="email" name="EMAIL" placeholder="Type your email" required />
                                <input type="submit" value="Subscribe" />

Step 5 - After creating from of your plugin. You must set position where you want to display.

Going Appearance -> Widgets then drag mailchimp widget to Newsletter Sidebar. You can bring that sidebar to every position you want. ( You can drag to left, right sidebar for each page. You can drag to Footer position.... )

### 3.10 Create Contact Form.

Go to Contact > Form and create the form you want or edit existing form.

When you want to add a form which displays the same as in our demo site, you should change the content of the contact form in Contact > Form so the form can have a similar style. After changing form content, you can adjust the text or the field to what you want.

Below is the contact form content we used in our demo site. Each form can have different style based in the content in the contact form. If you imported demo content successfully, you can skip this step.

- Contact form in Contact form 1

                                <label> Name<span>*</span>
                                    [text* your-name] </label>

                                <label> Email<span>*</span>
                                    [email* your-email] </label>

                                <label> Phone
                                    [text text-881] </label>

                                <label> Content<span>*</span>
                                    [textarea* your-message] </label>

                                [submit "Send messages"]

After that, you need to set up Mail tab. Please see this guide for more detail. Mail setting

## 4. Theme Customization

Lusion Theme use Customizer provides an ultra effective and intuitive way to customize theme layout & setting with real-time preview. Bring all of settings to customizer, you do not need to using another theme option anymore

There are 2 ways to access theme options.

1) Click Cusomize link at the top of the page.

2) To access Customizer go to your admin Dashboard Navigate to Appearance >> Customize

After that, you will see a logical tabbed section including a lot of tabs for you to discover. Below sections will go through each tab in detail for you

### 4.1 General

Customize General parts like layout, color, etc.

#### 4.1.1 Layout

Settings General Layout / Site Width / Sidebar Left / Sidebar Right for Site.

#### 4.1.2 Color

Change main color, background color and custom button color for Site.

#### 4.1.3 Typography

Change color, font-size, font family for the heading and text body for Site.

#### 4.1.4 Preloader

Show / Hide Preloader

#### 4.1.5 Breadcrumbs & Page Title

Show / hide and create style for breadcrumb, page title for Site.

### 4.2 Header

Customize header, header sticky.

### 4.3 Footer

Customize footer general, each details footer.

### 4.4 Blog

Customization for Blog pages.

#### 4.4.1 General

Select layout, change title, select sidebar left, right for Blog page.

#### 4.4.2 Blog Archive

Choose layout, number column, post meta, pagination type for Blog page.

#### 4.4.3 Blog Single Post

Select post meta, on / off comment ... for single post.

### 4.5 Shop

Customization for Shop pages and Shop single.

#### 4.5.1 General

Select background color, show / hide button add cart, quickview... for shop pages.

#### 4.5.2 Shop Archive

Select layout, sidebar left / right ... for shop pages.

#### 4.5.3 Shop single

Select layout, sidebar left / right, background color ... for shop single page.

#### 4.5.4 Shopping cart

Show / Hide section cross-sells products for shop single page.

### 4.6 404 Page & Maintenance

Customization for 404 page.

Customization for Coming soon.

### 4.7 Advanced

Add Custom CSS and JS to change style, show / hide go to top button, show / hide animation for site.

## 5. Shortcode

Remember to install and activate Arrowpress Core plugin.

- Go toAppearance > Install Plugins on admin sidebar.
- You should select and install the plugin.
- You should activate plugin.

In order to add shortcodes using elementor, you should enable elementor editor and select the element you want to add.

ArrowPress shortcodes

Shortcodes are some of the easiest ways to add customized content to your site.

In general, We have been making efforts to provide you the most simple and convenient way to help with your content adding process.

As a whole, each shortcode has 3 basic tabs: contents, style and advance. The two first tabs in every shortcode is different in options, aiming to provide flexible selection for building content process. Almost all shortcodes have the same advanced tabs.

For tab Advanced setting:

- Choose advanced to expand: There you can input the number of px for margin and padding you want your section to have, also the z-index number (how many items that your section will float higher than). You can name your section by both unique ID or class to make it easier to style
- Choose background to expand the setting of background: normal or hover, background type: classic or gradient.
- Choose border to expand this setting: normal or hover, type of border, or border radius, box shadow
- Choose responsive to expand this setting: hide on desktop, on tablet or on mobile.
- Tab custom CSS allows you to add your own css code, which is available on Elementor

Here are the instructions

1. Choose your desired shortcode

2. Navigate your desired shortcode, all you need to do is holding and dragging to the area you have created. And boom! it's no need to do anything else, all things are served for you. Discover and enjoy!

We gave you a plenty of shortcodes that are additional things in pro version of elementor - APR Elementor Pro, you just take advantage of it.

With APR Elementor Pro we have an additional icon set, it is not fontawesome like Elementor.

A little note when you use this icon is that you should use it for shortcode of APR ELEMENTOR PRO, with the Elementor shortcode we don't guarantee it will get options in the style tab.

### 5.1 APR Icon Box

Icon boxes come in very handy when building websites. The most common usage is for sections that list features of products or services. You will see the various options you get to customize every element of this widget: the icon, the headline, and the description. The icons are derived from the Font Awesome Icons, and you are able to search through them and pick the right one.

After 1 drag and entering neccessary information, here is the result:

There are 3 kinds of displaying a number of icon box:

Type 1: Default

Type 2: Icon Box Style 2

### 5.2 APR Blog

This shortcode will display list of blogs in grid style, you can have options to adjust the content of those blogs by choosing number of column, blog's category, order, number of posts you want to display. Beside, animation option is also available for your blog to display vividly.

There are 3 kinds of displaying a number of blog:

Type 1

Type 2

Type 3

### 5.3 APR Advanced Tabs

Advanced Tabs show these two elements display and present underlying text. And this is what every business should be looking for- the most appropriate manner to present their content.

Fontend

### 5.4 APR Product

If you have no idea about displaying a number of products, this shortcode'd help you. No need to think!

There are 3 kinds of displaying a number of products:

Type 1

Type 2

Type 3

Type 4

Type 5

Type 6

Type 7

### 5.5 APR Single Product

If you have no idea about displaying a product, this shortcode'd help you. No need to think!

There are 2 kinds of displaying a product:

Type 1

Type 2

### 5.6 APR Heading

This shortcode includes several useful options for you to adjust the heading.

- Frontend:

### 5.7 APR Testimonial

To introduce with visitors about how qualified your employees are or simply quote a famous saying from well-known person, use this shortcode to make your service distinguish or things you can think of.

There are 3 kinds of displaying a number of Testimonial

Type 1:

Type 2:

Type 3:

Type 4:

### 5.8 APR Banner

This is how to show a banner. You have a lot of options to adjust your banner in general, for example: banner type, banner image, image size, content position and also alignment of your image.

There are 5 kinds of displaying a number of Testimonial

Type 1:

Type 2:

Type 3:

Type 4:

Type 5:

### 5.9 APR Slider

Whenever you found that the slider is quite dull and boring to show in default way, you can make exclusive use of your own styled slider and APR slider will help you with add an exellent slider without spending much effort.

In the content section, there are 3 parts: Background, content, style going along with it's options.

Remember that we support you some animation for the slide, there are a various of selection for you to explore.

In content part, it has fields for you to enter, Title fields is splited into 3 sections to style it conveniently: before title, title, after title.

In syle part, there are many different options for styling the whole setting slide, title, description, button, navigation to choose

- Fontend:

### 5.10 APR Revolution Slider

You can select a slider

Note: Create a slider

Then active plugin slider revolution. You select Slider Revolution in sidebar admin

- Step 1: Select Slide Revolution

- Step 2: Select new slider

### 5.11 APR Our Team

To introduce with visitors about how qualified your employees are.

There is a kind of displaying:

Frontend:

### 5.12 APR Contact Form

You prefer a form to contact with customers, visitors, APR Contact Form is regarded to be the most convenient and easy to use.

Frontend:

### 5.13 APR Header Group

Partially make up your header, here you can show / hide options and create style in tab style.

### 5.14 APR Site Logo

Use in the position where you need to display the logo.

### 5.16 APR Instagram

This help you to display a instagram.

There is a kind of displaying a instagram:

### 5.17 APR Elementor Template

This shortcode will display a template in admin Dashboard > Templates > Saved Templates

Choose Template

### 5.17 APR Mailchimp

This shortcode will display the form mailchimp

There

Layout1:

Layout2:

Layout3:

Layout4:

Layout5:

Layout6:

## 6. Widgets

In order to add Widget to sidebar, you should click to the widget which you want to add and select sidebar.

### 6.1 Widget Contact

This widget provides options for you to enter some informations such as address, phone number, email and website link:

### 6.2 Widget Social

This widget provides options for you to enter social link:

### 6.3 Widget Post

Make sure the post has been created

### 6.4 Widget Logo

### 6.5 Widget Instagram

Note: Navigate to Settings > Instagram Settings to access "Instagram Settings" page. You need to enter Access token and User ID of your instagram account in order to get images. Remeber to click Save Changes to save information.

You can find user ID in this link

You can get access token via this website

### 6.6 Widget Brands

### 6.7 Widget Elementor Template

### 6.8 Widget Faceblook page plugin

You need to enter Facebook Page Url, Facebook App ID of your facebook account. Remeber to click Saved to save information.

### 6.9 Widget Latest Tweet

Note: Navigate to Settings > Apr Latest Tweets. You need to enter Twitter Username, Consumer Key, Consumer Secret, Access Token and Access Token Secret of your tweet account to get comments. Remeber to click Save Changes to save information.

## 7. Update

### 7.1 Update Theme

Before updating the theme, we want you to know that updating the theme don't affect to your site data. All of your content and theme settings are preserved.

To avoid the unwanted problem, you should backup the theme files or even theme options you select in Lusion Options. Normally, the theme options you select in Lusion Option won't change after updating the theme

Backup Theme Files

- Backup of the theme folder (Lusion) which located in wp-content/themes/

Backup Theme Options

1. Go to Lusion Options > Import/Export

2. Click Copy Data in Export section. You should paste it to a new file to save it.

Update using FTP

1. Go to http://themeforest.net/downloads and find Lusion theme.

2. Click the Download button next to Lusion theme and choose to download the "Installable WordPress File only" which is just the WordPress file, or choose the "All Files and documentation" which is the entire package that contains everything.

   If you download "All Files and documentation", you should extract it and you will find theme folder named Lusion.zip which is located inside "Theme files" folder. Unzip the theme zip file(Lusion.zip) to get the "Lusion" theme folder. .

3. Replace the old theme folder in wp-content/themes/ with new theme folder you extracted in previous step.

4. If you made changes anything in the theme files in wp-content/themes/Lusion, you will need to update the changes again to the new theme files.

5. If the options you select in Lusion Options is lost, you need install Customizer Export/Import plugin then you can go to Appearance > Customize > Export/Import > Export the content and download Backup Theme Options. Click Import to import theme options.

### 7.2 Update Plugins

For some plugins like WPBakery Page Builder, Ultimate Addons, ArrowPress Core, ArrowPress Importer, you should update manually these plugins.

1. Please go Plugins.

2. Select and deactivate these plugins.

3. Select and delete these plugins.

4. Please go Appearance > Install Plugins.

5. Select and install these plugins.

6. Select and activate these plugins.

## 8. Translation

If you want to use only want language in the site, you can use Loco Translate plugin, otherwise, you can use WPML or Polylang plugin for multilingual website.

### 8.1 Use Loco Translate

Please read Loco translate installation

Translate theme

1. Install and activate the plugin Loco Translate

2. Go to Loco Translate > Theme. Select Lusion theme.

3. Click the “+ New language” button.

4. Select The language you want the texts to be translated and continue.

5. On next screen all the “English text strings” that are inside the theme will be listed. Select text string from the “Source Text” list and then Add your translated text in the textarea below.

6. Click the Save button.

Translate plugins

1. Install and activate the plugin Loco Translate

2. Go to Loco Translate > Plugins. Select plugin you want to translate such as ArrowPress Shortcodes.

3. Click the “+ New language” button.

4. Select The language you want the texts to be translated and continue.

5. On next screen all the “English text strings” that are inside the theme will be listed. Select text string from the “Source Text” list and then Add your translated text in the textarea below.

6. Click the Save button.

NOTE: You need to set your language in Settings > General to display translated text in frontpage

### 8.2 Use WPML

WPML is the most popular plugin for multi language support. Below you will find documentation their team created for using WPML plugin. If you've purchased WPML and have any questions or issues, please check the links below.

- WPML Plugin - The highly recommended plugin to manage multi-lingual sites
- WPML Forum Support - If you bought WPML then you get free support from their amazing team
- Translating Widgets - Tutorial recommended by wpml team for translating widgets

## 9. Site Speed Up

We recommend some following plugins:

- WP Fastest Cache plugin to cache the site.

- Autoptimize plugin to minify HTML, CSS, JS the site.

- EWWW Image Optimizer plugin to reduce image sizes.

## 10. Support

If you don't find the answer for your issues in this document and you want to contact us for support, please contact us by creating new topic in our website ArrowPress Support Site or send an email to our email Arrowpress@arrowhitech.com