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 Arangi

It's awesome to know that you decided to purchase Arangi. Arangi 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 Arangi 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 Arangi 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.

2. Installation

2.1 Theme Installation

2.1.1 - Install new theme manually via FTP Client

In order to add a new theme to your WordPress installation, please follow these basic steps:

  1. Download the zip package of the theme in ThemeForest

  2. Unzip the theme zip package which you can find inside Theme files folder.

  3. Connect to your FTP server and navigate to the WordPress installation folder.

    Go to wp-content/themes/ and upload the theme folder.

  4. Open WordPress admin panel (navigate through the web browser to the folder where you have installed the WordPress e.g www.your_domain.com/wp-admin/) and go Appearance > Themes on admin sidebar. Activate the theme.

    theme-install

2.1.2 - Install Theme via WordPress Admin Panel


  1. Open WordPress admin panel (e.g www.your_domain.com/wp-admin/) and go Appearance > Themes on admin sidebar and click "Add New" button.


  2. After that, click Upload Theme link, upload zip package of the theme which you can find inside Theme files folder and click Install Now to install the theme.


  3. You can click Activate link or go to Appearance > Themes on admin sidebar to activate theme.

Once the theme is installed, you need to install Required Plugins to get full working features.


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

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


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

<label><strong>Newsletter</strong> <span>Subscribe </span></label> <h2 class="title2">Newsletter Sign Up</h2> <p class="desc-newsletter">Subscribe to our newsletter and get 10% off your first purchase </p> <div class="form-mail"> <p class="input"> <input type="email" name="EMAIL" placeholder="Enter your email" required /> </p> <p class="submit"> <input type="submit" value="Submit Now" /> </p> </div>

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.


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

<div class="contact-form"> [text* your-name class:your-name placeholder "Your Name"] [email* your-email class:your-email placeholder "Your Email"] [text* subject class:subject placeholder "Subject"] [textarea message class:message placeholder "Your Message"] [submit class:btn class:btn-primary class:btn-radius "Send Message"] </div>

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

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:

$(".filter_color .widget-title").append('<span class="icon ti-minus"></span>'); var $title_color = $(".filter_color .widget-title "); var $div_color = $(".filter_color .widget_berocket_aapf_single ul"); $div_color.addClass('open_color'); $title_color.click(function () { if ($div_color.hasClass('open_color')) { $div_color.removeClass('open_color'); $div_color.addClass('remove_color'); $title_color.append('<span class= "icon ti-minus"></span>'); $(this).find('span.icon').remove(); $(this).append('<span class= "icon ti-plus"></span>'); } else { $div_color.removeClass('remove_color'); $div_color.addClass('open_color'); $(this).find('span.icon').remove(); $(this).append('<span class= "icon ti-minus"></span>'); } }); $(".filter_price .widget-title").append('<span class=" icon ti-minus"></span>'); var $title_price = $(".filter_price .widget-title "); var $div_price = $(".filter_price ul"); $div_price.addClass('open_price'); $title_price.click(function () { if ($div_price.hasClass('open_price')) { $div_price.removeClass('open_price'); $div_price.addClass('remove_price'); $title_color.append('<span class= "icon ti-minus"></span>'); $(this).find('span.icon').remove(); $(this).append('<span class= "icon ti-plus"></span>'); } else { $div_price.removeClass('remove_price'); $div_price.addClass('open_price'); $(this).find('span.icon').remove(); $(this).append('<span class= "icon ti-minus"></span>'); } }); $('.list-view-as li.list-last a').removeClass('active'); $('.list-view-as li.four-2 a').addClass('active');

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

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


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 tArangien 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 Arangi theme. You can install and active Customizer plugin


3. Build Your Site


Note: Please read carefully Installation before performing these follow configurations.

3.1 General WordPress Settings

- WordPress Configuration

First step to build your site is to set your site name, site link and set up homepage.

  • You can change Site Title in Settings > General in admin sidebar.


  • In Settings > Reading page, you can set the number of posts to show in blog pages and select page for Front Page and Posts Page .


  • Discussion settings in Settings > Discussion provide a lot of options for you to explore such as "Default article settings", "Other comment settings". Also, you should choose max 3 levels deep for nested comment display effectively.


  • In Settings > Permalinks, you can select "Post name" option.


3.2 Customize

Arangi provides many options for you to customize your page effectively. These options are organized into logical tabbed sections which will be very easy for you to navigate. Because of the sizable amount of options, we cannot go over them in full detail here in our documentation. We encourage you to please take some time and navigate through each tab to see what we offer. See below for screenshots and short descriptions of Arangi Options panel.

- There are 2 ways to access theme options.

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


2) In Appearance > Customize in admin sidebar.

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

Arangi comes with advanced settings panel that is loaded with options. We have the options organized into logical tabbed sections, and each option has a description of what it will do on the front end. Because of the sizable amount of options Arangi provides, we cannot go over them in full detail here in our documentation. We encourage you to please take some time and navigate through each tab to see what we offer. Go to Appearance > Customize on admin sidebar to access the setting options. See below for screenshot of our Customize panel.



4. Page

4.1 Create A New Page

Step 1 – Navigate to Pages in your admin sidebar and click Add New option.


Step 2 – Enter a new name for your page, then find the Page Attributes box on right side to set your Parent or Template page


4.2 Use Elementor to build page

Step 1

The very first thing that you need to know is you are in Editing with Elementor mode by clicking on Editing with Elementor located at the top of the page, don't forget to login the site so that you have right to edit the page.

– Choose Edit with elementor to edit your page.Then choose button Add new section.


You can import your template by click add template inside button Add new section


Step 2 – Click Drag widget here and select your structure. You can edit section in sidebar


Step 3 – Choose elements to build your page.


Explore more about Elementor here
  1. Find and click on plus sign to start a new section.

    Note: If you make up your mind, because each section is displayed in order, from the top down, therefore, you want to insert another section between 2 available sections, just hover the closest section, find and click on plus sign

    There are some differences between options.

    1. Add a new section next to it, come up with above the current section.
    2. Edit section, clicking on it lead to edition of content for that section.
    3. Duplicate section, useful when this section is repeated inside or outside the page, you just only copy this section and paste to other pages.
    4. Delete the section.
    5. Remove this part from section when hovering it, clicking on the pencil sign.
    6. Duplicate this part in this section.
    7. Edit to change contents.
  2. Select section's structure to determine layout for the content.

    There are some options for you to justify the layout such as width, gap, height, position.

4.3 Header setup

  1. Logo Image

    Go to Cusomize > General > Logo, Favicon and upload your desired logo image.


    If the logo in header don't change or you can't find logo option in Cusomize > General > Logo, Favicon, you should go to Page Options > Header > in Edit page.Then upload your desired logo image for each page.


    You can see other options for header in Cusomize > Header set header you use.

    And Option header for each page in Page Option > Header

  2. Menu setup

    If you haven't setup your menu, you should see Menu > Setup Menu for detail guide.

4.4 Footer setup

  1. Setup

    You can change logo, copyright, show payment, style of footer ... in Cusomize > Footer >.


    And ChangeOption footer for each page in Page Option > Footer


  2. Change Content

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


4.5 How to Change page title

Step 1 – Go to Pages > All Pages. Then point at the page you want to edit. You will see the Quick Edit option.


Step 2 – Edit the title as you want. Delete the current slug. Then select Update. It will automatically generate new slug for your page.


4.6 Create page: Home 1

Adding contents for almost all pages is built thanks to Elementor, so you have to make sure that you have something in mind in create a new section in Elementor. Works done after that is just using shortcode, simply hold and drag into a section you have created. More details in Shortcode section

Home 1 requires you to ultilize some basic shortcodes

  1. APR Resolution Slider to produce a fanstatic slider.

  2. APR Woo Categories : Type 1

  3. APR Heading : Type 1 center

  4. APR Advanced Tab

  5. APR Banner

  6. APR Product: Grid Slider


4.7 How to change color your page

  • Case 1: You choose Edit Page > Skin in Page Option . Then Select color in Primary Color

    Demo:

    Case 2: You want your page show color gradient. You choose Edit Page > Skin in Page Option. Please select color in Primary color & Secondary color

    Demo:

    Case 3: In a page, the color of the text, the button changes according to the color of the slider banner

    How to: You can change color in customize: General > Slide color

    Note: Select the slider that is being used in your site > choose Slider Settings. Please note that the id of the slide must match the id in the javascript segment below

    Demo:

5. Menu

5.1 Create new menu

Detail steps:

  1. Navigate to Appearance > Menus in admin sidebar then click Create a new menu link. Give your new menu a name and click "Create Menu" button.

  2. Add menu item to your new menu by checking the box before item name and click "Add to Menu".

  3. Add menu icon or tip label if you want. For menu icon, you can find a lot of icons in some following link. Font Awesome Icons, Linearicons , Pe stroke icon7. After finding the icon you want, copy icon class to Icon Class field.

  4. If you want to use mega menu, you should check the box Enable Mega Menu to enable mega menu.And Choose Mega Menu

  5. In order to add shortcode to mega menu such as Mega menu 1.You should follow the step below to add it.

    • First, you should add a template content. Go to Template > Add New

    • - Select the type of template you want to work on . You can choose section

      - Enter template Name. Make sure the name of block is not the same with other posts, pages or any other content.

    • Adding content. You can use Elementor to add shortcode. Make sure to turn on Elementor for block content. If you don't know how to enable Elementor for block, please see Plugin Configuration

      Please see Use Elementor to build page to build your template

      To edit your template, you choose Edit with elementor.

    • Click Publish button
  6. Assign menu to "Primary Menu" location.

5.2 How to Edit Menu

Step 1 - Go to Appearance > Menus on admin sidebar. From dropdown list, select a menu to edit then choose Select

– Rename menu name as you wish. If you want to add more menu items, choose them from the left and choose Save Menu.


6. Post

Create Blog Posts

Arangi support several post formats such as: Video, blockquote, link, audio, project.

Step 1 – Navigate to Posts in your WordPress admin sidebar.

Step 2 – Click on the Add New option to make a new post. Create a title, and insert your post content in the editing field.

Step 3 – Add Categories from the right side. To assign it to the post, check the box next to the Category name.

Step 4 – Add Tags from the right side. Type the name of the tag in the field, separate multiple tags with commas.

Step 5 – Click the first Featured Image Box, select an image and click the Set Featured Image button.

Step 6 - Add content for "Description".

Step 7 - Select Post Format and enter suitable content for post format in Post Format box.


- 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 and quote author


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


Step 8 – Select options in Post Options > Post

Step 9 – Once you are finished, click Publish to save the post.



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

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

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

There are 3 kinds of displaying a number of blog:

Type 1: Grid type 1

Type 1: Grid type 2

Type 1: Grid slider

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

There are 2 kinds:

Type 1: Vertical

Type 2: Horizontal

7.3. APR Product

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

There are 4 kinds of displaying a number of products:

Type 1: Grid

Type 2: List

Type 3: Grid Slide

Type 4: Packery Grid

7.4. APR Heading

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

- Content Tab


- Select heading type: We offer you 2 sorts of heading. Each will have alternative showing that go along with each type's options for creating content.

  • Type 1:

    There is one thing you may be confused, that is, "Title" is the main and visible title, in constrast. "After title" is something you want to put behind main title and it's usually blurred.

  • Type 2:

    You can see that we make it intentionally so as it looks unique.

- Style Tab: This tab allows you to customize title as: color, typography, margin



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

Besides, you have a great deal of options to add more banner content: title, description, discount information, moreover, you can choose whether you want to display button, add animation or not.

There are absulutely options for styling text and things inside the banner, feel free to discover them.

7.6. APR Price table

This is the table listing all service/product's price with necessary information

It consists of 4 parts: Header-label for the table, Outstanding Price to catch user's attention, Features give a list of markable items, which also serves you with icon and icon's color and Footer-for the button to lead user to somewhere in your site.

Each part has styling options to customize.

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

This's kind of slide, so we have some slide option for you to animate it smoothly.

And there are so various option to style the slide content in Style Tab - Images, Name, Description, Navigation, make it become your own style.

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

slider-op1

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

slider-op2

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.

slider-result

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

slider-result

7.9. APR Woo Categories

This help you to display the category of products, this shortcode'd help you. Like other shortcodes, Content with animation and Style are designed for you

There are 2 kinds of displaying a category of products:

  • Type 1:

    result-woo-category
  • Type 2:

    result-woo-category

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

7.11. APR Store Locator

Before using this shortcode, make sure that you have installed Store Locator plugin already. That means you entered Google Maps API

And don't forget to have some locations for you shop, it will help to show.

This shortcode will be useful for you to help visitors navigate your store's location visually without going to find the store themselves, it's fairly simple with some available options: zomming effect, height for section to show,...

locator-op

Result:

locator-res

7.12. APR Count Down

To show how many days left, or time is passed by to promote visitors to consume the service, this can be useful. The count down section is designed to have a background going with some text to explain more about which thing will be expired after that date. No need to wonder the word "before" or "after" if you see them, because this is done intentionally by our team to make it styled unique. Also, you can like to another page by clicking on it.

Click on Countdown and Change label text to expand this settings

In Countdow, you are able to enter a day that plays as an expired date, hide or show unit of time here.

In Change label text, you are allow to change it into other unit, in other words, you can change the language for it.

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

First thing to do is selecting "Contact us" form to start a new form, there are options for fields such as style, background color, alignment; for form in general, for instance, title color, input color, border style which includes 4 types: Solid, dotted, Double, Dashed, border color, border color when focused, rounded corners.

And a various number of options for styling a button.

Here is one of possible result after selecting things.

8. Widgets

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

8.1 Widget Contact

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


8.2 Widget Social

This widget provides options for you to enter social link:


8.3 Widget Post

Make sure the post has been created


8.4 Widget Logo



8.4 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


8.4 Widget Brands



9. Update

9.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 Arangi Options. Normally, the theme options you select in Arangi Option won't change after updating the theme

Backup Theme Files

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

Backup Theme Options

  1. Go to Arangi 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 Arangi theme.

  2. Click the Download button next to Arangi 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.

    Arangi-doc

    If you download "All Files and documentation", you should extract it and you will find theme folder named Arangi.zip which is located inside "Theme files" folder. Unzip the theme zip file(Arangi.zip) to get the "Arangi" 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/Arangi, you will need to update the changes again to the new theme files.

  5. If the options you select in Arangi Options is lost, you should go to Arangi Options > Import/Export > Import from File > Paste the content you save in Backup Theme Options steps. Click Import to import theme options.


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

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

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


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

11. Site Speed Up

We recommend some following plugins:

- W3 Total Cache plugin to cache the site.

Arangi-doc

- EWWW Image Optimizer plugin to reduce image sizes.


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