ArrowITHiTech 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: ArrowITHiTech.
Designed by: ArrowITHiTech

1. Getting Started

1.1 Welcome to ArrowIT

We would like to thank you for choosing ArrowIT. ArrowIT 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 ArrowIT 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 ArrowIT 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.


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

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

<p class="form-input email"> <input type="email" name="EMAIL" placeholder="Enter Your Email Address*" required /> </p> <p class="form-submit submit"> <input type="submit" value="Subscribe" /> </p>

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 Home Seo

<div class="form-seo"> <div class="row"> <div class="col-lg-6 col-6"> <label>Name*</label> [text* your-name] </div> <div class="col-lg-6 col-6"> <label> Email*</label> [email* your-email] </div> <div class="col-lg-6 col-6"> <label>Phone</label> [text your-phone] </div> <div class="col-lg-6 col-6"> <label>Website URL*</label> [url* your-url] </div> <div class="col-lg-12 col-sm-12"> <label>Monthly budget</label> [text your-budget] </div> <div class="col-lg-12 col-sm-12"> <label>Services interested </label> [select your-services "Choose services" "Services 1" "Services 2" "Services 3"] </div> <div class="col-lg-12 col-sm-12 submit"> [submit "Get Free Report Now"] </div> </div> </div>

- Contact form in Home Software

<div class="form-software"> <div class="row"> <div class="col-lg-6 col-6"> <p class="form-input">[text* your-name placeholder "Full Name*"] </p> </div> <div class="col-lg-6 col-6"> <p class="form-input">[email* your-email placeholder "Email Address*"] </p> </div> <div class="col-lg-6 col-6"> <p class="form-input">[text* your-phone placeholder "Phone*"] </p> </div> <div class="col-lg-6 col-6"> <p class="form-input">[text* your-company placeholder "Company*"] </p> </div> <div class="col-lg-12 col-sm-12"> <p class="form-input">[textarea* your-message placeholder "Message*"]</p> </div> <div class="col-lg-12 col-sm-12 submit"> <p class="form-submit">[submit "Book 60 Minute Consultation"]</p> </div> </div> </div>

- Contact form in Contact Us

<p class="form-input">[text your-name id:your-name class:your-name placeholder "Name"]</p> <p class="form-input">[email* your-email id:your-email class:your-email placeholder "Email Address*"]</p> <p class="form-input">[textarea* your-message id:your-message class:your-message placeholder "Message*"]</p> <p class="form-submit">[submit id:submit class:submit "Send message"]</p>

- Contact form in Footer 02

<p class="form-input">[text* your-name id:your-name class:your-name placeholder "Name*"]</p> <p class="form-input">[email* your-email id:your-email class:your-email placeholder "Email*"]</p> <p class="form-input">[text your-subject id:your-subject class:your-subject placeholder "Subject"]</p> <p class="form-input">[textarea* your-message id:your-message class:your-message placeholder "Message*"]</p> <p class="form-submit">[submit id:submit class:submit "Send"]</p>

- Contact form in Footer 02

<div class="form-row"> <p class="form-input col">[text* your-name id:your-name class:your-name placeholder "Name*"]</p> <p class="form-input col">[email* your-email id:your-email class:your-email placeholder "Email*"]</p> </div> <div class="form-row"> <p class="form-input col">[text* your-phone id:your-phone class:your-phone placeholder "Phone*"]</p> <p class="form-input col">[text your-url id:your-url class:your-url placeholder "Website Url"]</p> </div> <p class="form-input">[textarea* your-message id:your-message class:your-message placeholder "Tell us about your business goal*"]</p> <p class="form-submit">[submit id:submit class:submit "Send"]</p>

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

Note: After the Installation is successful, go to each css (post -.... css) file in arangi/ 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/arangi/ 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 ArrowIT 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

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

3.2.1 General

Customize General parts like layout, color, etc. Layout

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

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

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

Show / Hide Preloader Breadcrumbs & Page Title

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

3.2.2 Header

Customize header, header sticky.

3.2.3 Footer

Customize footer general, each details footer.

3.2.4 Blog

Customization for Blog pages. General

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

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

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

3.2.5 Portfolio

Customization for Portfolio pages.

Select layout, number column... for Portfolio pages.

3.2.6 Shop

Customization for Shop pages and Shop single. General

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

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

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

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

3.2.7 Sidebar

Change title color, link color, content color for sidebar.

3.2.8 404 Page & Maintenance

Customization for 404 page.

3.2.9 Advanced

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

3.2.10 Popup Account

Show / hide and custom stye popup account for site.

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

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

Step 2 - Enter title and using Elementor editor 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.

Option header for each page in Edit page > Page Option > Header

4.4 Footer setup

  1. Setup

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

    And Change Option 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 Tech

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. Image and text

    Split the section into 2 columns, the left contains the image, the right is the text and icon list

  3. APR Heading : Type 1 center

  4. APR icon box: icon box type 1

  5. APR Portfolio: Style 1

  6. APR Heading and Button

  7. APR Heading and APR Blog

  8. APR Heading and APR Testimolial

  9. Image

4.7 How to change color your page

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


    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


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

ArrowIT 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 text

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

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.

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

Type 3: Icon Box Type 2

If you want to have the icon box slider, please follow these steps:

Step 1: Create new section, in tab Advanced > Css Classes , you enter slide-icon-box slide-icon-box-seo

Step 2: Drag apr icon box from the sidebar to the section, you must have at least 4 icon boxes, here is the result:

7.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 5 kinds of displaying a number of blog:

Type 1: Grid style 1

Type 2: Grid style 2

Type 3: Grid style 3

Type 4: Grid Slide 1 (Note: At option Number of Posts please enter number bigger 3)

Type 3: Grid style 2

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

There are 2 kinds:

Type 1: Vertical

Type 2: Horizontal

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

Type 2: List

Type 3: Grid Slide

7.5. APR Heading

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

- Content Tab

Enter Title and Description.

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

7.6. APR Pricing 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.

There are 2 kinds of displaying a number of Pricing table

Pricing Type 1

Pricing Type 2

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.

There are 6 kinds of displaying a number of Pricing table

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

Note:Some text we're leaving white, you can change color or leave the background to see more clearly.

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.


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

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

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




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

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.

7.13. APR Header Group

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

7.15. APR Nav Menu

Use in the position where you need to display the menu. This shortcode is often used in the header.

Front end look like :

7.16. APR Timeline

This help you to display a time line. Presents a series of events over time.

There are 2 kinds of displaying a timeline:

  • Type 1:

  • Type 2:

7.17. APR Counter

First, we recommend creating the background color for the section beyond it to clearly see the text color

There are 2 kinds of displaying a counter:

  • Type 1:

  • Type 2:

    Note: So that the ArrowIT slider counter does not coincide with content couter, you must edit the section containing it:

7.18. APR Portfolio

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

There are 2 kinds of displaying a portfolio:

  • Type 1:

  • Type 2:

7.19. APR Elementor Template

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

Step 1: Choose Template

Option Show Slide only use template includes a similar list.

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

8.6 Widget Brands

8.7 Widget Elementor Template

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

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

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

Backup Theme Files

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

Backup Theme Options

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

  2. Click the Download button next to ArrowIT 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 ArrowIT.zip which is located inside "Theme files" folder. Unzip the theme zip file(ArrowIT.zip) to get the "ArrowIT" 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/ArrowIT, you will need to update the changes again to the new theme files.

  5. If the options you select in ArrowIT Options is lost, you should go to ArrowIT 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 ArrowIT 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:

- WP Fastest Cache plugin to cache the site.


- Autoptimize - makes optimizing your site really easy.


- 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