arrow

A Wordpress Page Builder With Live Preview.

  • Drag & Drop
  • Responsive Elements
  • Unlimited Layouts
  • Device Visisbility
  • Animation On The Fly
  • Unlimited Color Options
  • Parallax & Video BG'S
  • Gradient Elements & BG'S

Arrow Builder is a Wordpress Drag & Drop Page Builder built to give you an effortless page building experience for your Wordpress websites. It is simple, intuitive, and a flexible Backend editor which comes with integrated Live Preview in the backend so you don’t have to switch tabs to view the look and feel of your website. It is available with features like multi-level rows, device visibility, one page capability, gradients, parallax and in-built shortcodes that allow unlimited style variations.

Arrow Builder is a Wordpress utility that helps you create posts, pages and the website as a whole without touching a single line of code.


Note: Please Read This Documentation & FAQs Thoroughly Before Raising A Ticket.

Getting Started

Installation

Once you've purchased the file through Codecanyon, download the Plugin zip file , extract it and locate arrow.zip. Install the Arrow Builder Plugin to Your Theme by doing one of the following:

1. Uploading Plugin Through FTP

To install Arrow Builder through FTP, follow these steps:

  • Step 1: Using FTP client, login to the server where your Wordpress website is hosted.
  • Step 2: Using FTP client, navigate to the /wp-content/plugins/ directory under your Wordpress Website's Root Directory.
  • Step 3: Using FTP client, upload the Arrow Builder to the Plugins Directory on remote server.
  • Step 4: Once installation is complete, your Arrow Builder will be ready to use. You should now see "Arrow Builder" option appear in the Plugins Directory.

2. Uploading Plugin Through Wordpress

  • Step 1: Login to Wordpress Admin.
  • Step 2: Go to Plugins > Add New > Upload New Plugin..
  • Step 3: Click on ‘Choose File’ and select Arrow.zip.
  • Step 4: Click on ‘Install Now.

After you have installed the plugin, please be sure to activate the plugin to start using Arrow Builder.

The Wordpress installation method is explained below:



Plugin
add-plugin
installed-plugin

Activation

After you've installed Arrow Builder, be sure you activate it. You can activate as soon as the plugin is installed or activate it later by going to the Plugin Area in the Worpress Admin Menu. The process for both the steps is shown below:

activate-plugin
activate-plugin

Switching To Arrow

After you've successfully acivated the plugin, you can start using Arrow Builder on new as well as old Pages & Posts.

add-new-page
switch-to-arrow

Using Arrow Builder

To start up with the page builder, Go to Pages option in the admin panel > Select the Page you wish to edit (All Pages/Add New) > Switch From Classic Editor To Arrow Builder.

1.0 ROW & Columns

Under This Section, We Will Cover The Row Features To Create, Add, Delete, Modify And Design Rows For A Specific Post Or Page.

1.1) Adding Rows & Columns

On the Page Builder page, there will be an option of ‘Add Row’. There are 10 pre-defined rows. You can click on any style and a new row will be added to your page.

adding-rows-and-columns

1.2) Adding Columns To Pre-Defined Rows

To add a new column to a pre-defined row, hover at the desired row > row pane options > select the column button > a new column will be added to the hovered row.

adding-columns-to-pre-defined-rows

1.3) Adding Inner Rows (Rows In A Row)

You can add as many rows in a single row as you want. To use this Multi-level row feature, Go to the Top Bar of the Row > Select Row Option > A New Row is added.

You may then add unlimited columns to the respective rows with the available options.

adding-inner-rows

1.4) Deleting Rows Or Columns

  1. To Delete Columns From A Row:

    To delete columns from the row, Click at the delete icon available on each column of the specific row & the column will be deleted.

    delete-columns-from-a-row
  2. To Delete Rows:

    If you want to delete a row, Go to the Row Options Pane of the hovered row > click the delete button > the hovered row will be deleted.

    delete-rows

    NOTE: If it is a one-columned row, you can click the delete icon available on the row and it will be deleted.

1.5) Cloning Rows

Cloning a row creates a copy of the row already existing with the same content and elements added in a row or a particular column.

To clone a row, hover a row > row options pane > select the duplicate button > a duplicate row will be created.

cloning-rows

1.6) Resizing The Columns

To increase or decrease the size of a column of a row, move the cursor intersecting two columns and drag it to left or right to change the size of the column.

resizing-the-columns

1.7) Repositioning Of Rows

To reposition or change the order of rows, use the drag & drop button in the right drag pane to drag a selected row and drop it in the desired area.

repositioning-of-rows

1.8) Setting Up Visibility Of Rows

You can choose to show or hide the visibility of a particular section or row on various digital devices. These devices include mobile phones, tabs and desktops.

  1. Mobile Devices

    For section visibility on mobile phones, Go to the left options pane of a row > click the mobile option > Section / Row display is activated for mobile devices.

  2. Tabs

    For section visibility on tabs, Go to the left options pane of a row > click the tablet option > Section / Row display is activated for tablets.

  3. Desktops

    For section visibility on desktops, Go to the left options pane of a row > click the mobile option > Section / Row display is activated for smart phones.

  4. Deactivating On All Devices

    For section visibility on no phones, Go to the left options pane of a row > click the ban option > Section / Row display is deactivated for all devices.

  5. Visibility On All Devices

    For section visibility on all devices, Go to the left options pane of a row > click the ALL option > Section / Row display is activated for all devices.

Note : You can also chose multiple device options.

Note : As Defined In Our CSS, Mobile Device Start at 767px & below, Tabs Range From 768px to 1024px, & Desktops 1025px & above

setting-up-visibility-of-rows

Row & Column Settings

2.0 Row Settings

To change the Row Settings, hover the Row and click on the pencil icon of the left options pane.

Row Settings include three setting options: Layout Settings, Background Settings and Animations.

edit-row-settings

2.1) Row Layout Setting

Row Layout Settings is further classified into four options. These include:

row-layout-setting
  1. Layout

    You can define the size of the row with the layout as either full width or contained. The Full Width option gives your row the complete width of the theme container and the Contained options make your row to 80% of the Theme Container.

  2. Content With

    Define the width of the content you place in a particular row with the sizes available.

    Note: If you select Contained Width, then the percentage size will be determined from the 80% of the Theme Container.

  3. Equal Height

    Thios option makes the height of the columns present in the particular row equal. Go to Edit option > Row Settings > Equal Height > Save > Update.

  4. Content Position

    You can set the content positon of the columns present in the particular row. Go to Edit option > Row Settings > Content Positon > Top / Middle / Bottom > Save > Update.

  5. One Page ID

    This option is used if you want to create a single page for your website.

    To create a one page site, you need to specify the section name in the One Page ID available in Row Settings (specified row) > Edit option > Row Settings > One Page ID > Save > Update.

    Next, you need to paste the same id in the URL under the custom link section (Appearance > Menus > Custom Links > URL > paste your One Page ID here > Update).

  6. Extra Class Name

    You can create a new class and define its CSS in the row. You can use the same class in other rows if you want the same styling for other rows.

To change the layout settings of a row, Go to ‘Edit’ option of the particular row > a popup window will appear with the Row Settings > click at ‘Layout Settings’ to make your desired changes > Save > Update.

2.2) Row Background Settings

This section allows you to select the Background type and border style of a specific row. The options available for the Background Settings include:

  1. Background Type

    You can select the type of the background you want. There are five types of background available in Arrow:

    1. None

      No background will appear if you select none as the background type of a row.

    2. Solid Color

      With this background type, you can give a solid color to the background of a row and define its opacity.

    3. Gradient Color

      You can choose the start & end colors, define its Gradient Type as Radial or Linear and direction of the gradient color you want to give in the background of a specific row. The Preview Tab is also available to create your unique gradient color.

    4. Image

      This option lets you add an image in the background of a Row. You can either add a simple image or parallax background of a specific row using the image setting options.

      For a Parallax Background, You can choose ‘Enable Parallax’ option and define the Parallax Slider Speed.

    5. Video

      You can embed a video file in the background of the specific row by either uploading the media file from your Device or by mentioning the video link.

  2. Angle

    Arrow Builder lets you select an SVG background for your sections. You can set the same for the section start (Above Style) & section end (below style). To set SVG background for a section, go to the Row Settings > click ‘Background Settings’ > Tick Angle> select Above and Below style > Save > Update.

row-background-settings

To change the background settings of a row, again click at the ‘Edit’ option of the particular row > in the Row Settings, click at ‘Background Settings’ > Save > Update.

2.3) Row Design Options

Row Design Options is further classified into three options. These include: Margin, Padding & Border. To add margin, padding & border to the row.

Go to the ‘Edit’ option of the particular row > in the Row Settings, click at Design Options’ > Save > Update.

row-design-setting

2.4) Row Animations

There are numerous animation styles available for each row.

To add animations to a specific row, click at the ‘Edit’ option of the particular row > in the Row Settings, click at ‘Animations’ > Save > Update.

row-animations

3.0 Column Settings

Column settings include Background Settings and Device Visibility to customize the columns.

3.1) Columns Background Settings

This section allows you to select the Background type and border style of a specific column.

To change the background settings of a column, click at the (…) option from the top left corner of a column > a popup window will appear with the Column Settings > click at Background Settings > Save > Update.

columns-background-settings

3.2) Columns Design Options

Columns Design Options is further classified into three options. These include: Margin, Padding & Border. To add margin, padding & border to the row.

Go to the ‘Edit’ option of the particular row > in the Column Settings, click at Design Options’ > Save > Update.

column-design-setting

3.3) Columns Device Visibility

To adjust the column visibility, click at (…) > From the Column Settings, click at ‘Device Visibility’ > Save > Update.

columns-device-visibility

Content Elements

4.0 Adding The Content Elements Through The Page Builder

Arrow Builder comes with more than 30 content elements (Refer to section 6.0 of this manual). You can add and customize multiple content elements to a single column.

To add a shortcode to a column, Click the add button from the selected column > select a shortcode from the popup window > Insert Shortcode.

Once you have inserted the Content Element, you will find the following options in the Shortcode Element:

4.1) Editing

To edit a shortcode, Go to the Edit Button of the desired shortcode > Change the General / Styling / Animation Settings > Update Shortcode.

4.2) Cloning

To clone a shortcode, Click the cloning button available on the shortcode and a duplicate of the same shortcode will be created.

4.3) Deleting

You can delete a shortcode if you want to remove it from a column by clicking at the delete option available on the shortcode.

4.4) Repositioning

The Repositioning options offered with Arrow Builder helps you to drag a shortcode to a different column and change its position. There are three ways of repositioning content elements:
shortcode-edit-clone-delet-reposition
  1. Changing the position of content elements within the Same Row or Column:

    To reposition the content elements with the same row or column, drap an element and drop it above / in between / or below other elements.

    Note: You can reposition content elements only if there exists two or more elements in a single row or column.

    same-row-or-column
  2. Changing the position of the content element from Column to Column:

    You can use the drag and drop feature for a content element to switch between columns by simply dragging the desired element and placing it in the required column.

    column-to-column
  3. Changing the position of content element from Row to Row:

    You can simply place your cursor on the selected element you wish to move and drag it to the row of your choice.

    row-to-row

5.0 Content Elements And Its Uses

Content Elements are small bits of Wordpress code used to do amazing things with your websites with a little effort. These help you to embed custom files, create objects or elements on your web page without writing long-length complex code to add a single function.

5.1) Inserting Content Elements

There are two methods to insert a content element in a web page. These are:

  1. Through the Editor
  2. Through the Page Builder

To locate these options, Go to Pages from the Admin Panel > Add New > Editor / Page Builder.

5.1.1) Editor

To add content elements through the Editor, Go to Pages > Add New > Editor > Shortcode (option available in the Toolbar) > Select Shortcode from the desired category.

add-shortcode-by-editor

5.1.2) Page Builder

To add content elements through the Page Builder, Go to Pages > Add New > Page Builder > add button from the selected column > select a shortcode from the popup window > edit through the options available > Insert Shortcode.

add-shortcode-by-page-builder

5.2) Managing The Content Elements

Our content elements have been divided into 6 categories to help you easily locate the needful element.

managingthe-content-elements

5.2.1) Sorting Type

You can look up for the sorting type options when you will open the list of content elements on the upper right. The categories are:

  1. All

    This is the first and the default sorting type option showing the complete list of the content elements.

  2. Content & Elements

    Under this category, you can find content elements including:

    1. Alert
    2. Author
    3. Blog
    4. Bullet
    5. Call to Action
    6. Empty space
    7. Separator
    8. Service Box
    9. Tab
  3. Carousel & Sliders

    The carousel and slider category includes three content elements, namely:

    1. Carousels
    2. Clients, and
    3. Sliders
  4. Typography

    Typography provides two content elements:

    1. Blockquote, and
    2. Dropcap used in the presentation of web content.
  5. Social

    This category includes the Social Icons shortcode to customize and display social icons on your website.

  6. Info-Graphics

    The Infographics category includes content elements to give a graphical presentation of the progress report, timer, and other calculations. It includes:

    1. Counter
    2. Pie progress Bar
    3. Quote Box, and
    4. Skill Bar
  7. Media

    Under this category, you will get content elements to add media elements to a web page. It includes the Audio shortcode.


5.3) Customizing Content Elements

There are multiple options available with each content element to customize it. When you select a Content Element, you will find five tabs to manage the settings and preview the changes. These include:

  1. General

    The General setting includes options to customize the content of the content element.

    To manage general settings in a content element, Select a Content Element > General > Manage the Content, Title, Etc > Insert Shortcode / Update Shortcode.

    general-setting
  2. Style

    All the styling options like backgrounds, borders, etc. are included in the Styling Tab of the content element.

    To change the style of a content element, Select a Content Element > Styling > Manage the Design > Insert Shortcode / Update Shortcode.

    style-setting
  3. Animation

    Animation settings include options to set the animation of a particular content element.

    To manage the animation of a content element, Select a Content Element > Animation > Set the animation style and animation speed > Insert Shortcode / Update Shortcode.

    animation-setting
  4. Preview

    The preview option shows how the content element will appear on the website.

    preview-shortcodes
  5. Shortcode

    In this section, you can preview the shortcode of the content element chosen by you. You can copy this shortcode and paste in other areas to call the shortcode.

    shortcode-code

LIST OF CONTENT ELEMENTS

We have a list of robust content elements to help you in building your web pages with ease. These are:

1. Accordion

A simple, easy to use content element, Accordion is used to add a collapsible effect to various parts of content or titles.

To insert an Accordion, go to Pages > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Accordion > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

2. Alert

The Alert Content Element is used to display warning, important information, note, or a message to alert the user in the viewport.

To insert an Alert, go to Pages > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Alert > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

3. Audio

The Audio element is used to integrate audio files in websites and to embed media files without changing the entire code.

To insert the Audio, go to Pages > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Audio > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

4. Blockquote

This content element is used to add quotations to a web post or quote a section of the content of a web page. There are different styles available to present a quoted text on the weblog.

To insert Blockquote, go to Pages > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Blockquote > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

5. Bullet

Bullet is used to portray web content in bullets or points. There are different styles of bullets like check bullets, arrow bullets, star bullets, etc which can be used to list out important points in your weblogs.

To use this content element in your website, go to Pages > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Bullet > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

6. Button

This content element lets you add a button to your web page. You can customize the button using the settings available with this element.

To insert a Button, go to Pages > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Button > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

7. Call To Action

Call to action is used to create an action button to instigate the customers to click it and interact with the concerned authorities.

To insert a call to action, go to Pages > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Call to Action > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

8. Contact Form

You can add a contact form on your website using this content element. This is used to facilitate a direct interaction between two parties.

To add a contact form to your webpage, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Contact Form > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

9. Countdown

The countdown content element lets you set a timer on your websites. This is generally used to set a countdown for an upcoming event, new launch, etc.

To insert a countdown to your webpage, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Countdown > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

10. Counter

Similar to the Countdown, this content element is used to display the total of a specific thing like the number of visitors, blogs posted, clients, etc.

To insert a Counter to your webpage, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Counter > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

11. Device Slider

This content element is used to display an image slider in a device on the web pages.

We provide four devices to present a device slider to your websites including:

  • iMac
  • iPhone
  • iPad
  • MacBook

To insert a device slider content element to your webpage, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Device Slider > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

12. Devices Video

Like the Device Slider, this element lets you add a video slider in any of the four aforementioned devices on your web page.

To insert a devices video content element to your webpage, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Devices Video > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

13. Dropcap

Dropcap allows you to capitalize the initial letter of a paragraph and change it into a Drop cap.

We provide three styles to drop cap the first letter:

  • Simple letter
  • Letter in a circle
  • Letter in a square.

To insert a Dropcap to your webpage, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Dropcap > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

14. Empty Space

The Empty space element is used to add space between two and more rows, columns, paragraphs, or other web data.

To insert an empty space to your webpage, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Empty Space > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

15. Gallery

Gallery content element lets you add two or more image galleries to your web pages and web posts with ease.

To insert a gallery to your webpage, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Gallery > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

16. Google Maps

This content element allows you to integrate Google maps anywhere on your web page for the comfort of the users. Users then can mention the latitude and longitude and get the desired location. You can also add a navigation cursor on the maps through this shortcode.

To add Google Maps to your web page, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Google Maps > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

17. Headline

The headline content element lets you customize the header area by adding a background color or an image for the heading. You can also change the font style, color, size and set the desired settings for the headline.

To add a headline to your web page, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Headline > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

18. Icon With Text

Icon with text is useful to add text with an icon on your websites.

To insert an Icon with Text, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Icon with Text > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

19. Image

Add an image to your webpage or website using this content element.

To insert an Icon with Text, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Image > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

20. Modern Separator

The Modern Separator lets you to add stylish separators between two different sections on a web page with a modern touch.

To insert a Modern Separator, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Modern Separator > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

21. Modern Skill Bar

The Modern Skill bar works as an estimation tool which adds a graphical representation of certain variables as skills of employees, fields catered by the firm and the like.

To add a Modern Skill Bar to your web page, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Modern Skill Bar > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

22. Pie Progress Bar

The Pie progress bar is used to display the progress rate in the form of a simple animated circle having the percentage.

To insert a Pie Progress Bar, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Pie Progress Bar > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

23. Pricing Table

Pricing tables are effective for ecommerce websites to display prices of various products available with them.

To include a pricing table to your website, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Pricing Table > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

24. Raw HTML

You can create or paste any raw Html custom code and make it work on your website with this element.

To add a Raw Html code, Go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Raw HTML > Customize through General / Animation Settings > Insert Shortcode > Update.

25. Separator

Separators are helpful in adding a separating line between two different sections on a web page in various available styles.

To add a separator on a web page, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Separator > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

26. Service Box

This content element is used to add a box to fill your desired title, content, color, etc which serves as a service tool box for the audience.

To insert a Service Box, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Separator > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

27. Slider

Slider is an easy to use content element that helps you to add multiple sliders on a single page having as many slides you want for your web page.

To insert a Slider on your web page, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Slider > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

28. Social Icons

Through this shortcode, you can add as many social icons on your website’s wall as you want such as Facebook, twitter, Pinterest, LinkedIn, etc anywhere on your web page.

To insert Social Icons to your website, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Social Icons > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

29. Tab

You can add unlimited tabs to your web pages, blogs, and posts using this element. This helps in adding more content in less space on your websites.

To insert a tab to your web page, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Tab > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

30. Team

This content element lets you add names of your team members and their brief introductions on your web page.

To include the Team element to your website, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Team > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

31. Text

Text element is used to display a text separately on your web pages and posts. You can style you text and change its font style, color schemes, and add media by altering the settings.

To add a separate text to your web page, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Text > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

32. Timeline

Timelines are an attractive way to present on your site, which can be added in your style using this content element.

To add a separate text to your web page, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Timeline > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

33. Title

The Title element is used to add a title on a web page.

To add a Title, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Title > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

34. Video

You can embed videos using this content element on your websites. This is beneficial in making dynamic websites and creating media-rich sites with ease.

To add a video to your website, go to Page > Add New > Editor / Arrow Builder > Add Shortcode Button [+] > Video > Customize through General / Style / Animation Settings > Insert Shortcode > Update.

Adding Custom CSS/JS

Sometimes, the user wants to add a custom code snippet for an added functionality.

You can add a custom functionality to your website by adding a custom CSS or custom JS in the Arrow Builder.

To add Custom CSS:

Pages > Add New > CSS / JSS > Custom CSS > Add custom code > Save > Update.

To add Custom JS:

Pages > Add New > CSS / JSS > Custom JS > Add custom code > Save > Update.

Note: The custom CSS / JS created works for the particular page you write the code for. Please copy & paste the custom code in the specified area if you want similar Css/JS to work on different pages.

custom-css-js
custom-css-js

Creating A Template

You can create any number of design templates and save it with Arrow to use later through the backend panel.

To create a new template, go to Pages > Add New > Select A Row Layout > Customize The Layout > Click On ‘Templates’ >Name your Template in the ‘Create New Template’ Area > Save. You can create multiple templates and save them to use later with these steps.

To Load A Template:

To load a Custom Template, Go to Pages > Add New > Select A Row Layout > Customize The Layout > Click On ‘Templates’ > Default Templates > Select A Template.

1) Go to Pages > Add New.

add-new-page

2) Switch to Arrow Builder.

switch-to-arrow-tab

3) Add Rows.

add-new-row

4) Customize the Rows.

customize-template

5) Click on 'Templates'.

click-template

6) There will be two options: Default Templates and Custom Templates.

choose Templates

7) Click on 'Custom Templates' > Enter the name in 'Create New Templates' > Save.

Create Templates

8) Your Template is Ready.

custom Templates

9) All your custom templates will appear in 'Default Templates'. You can select any of them and start using.

default Templates

Features Overview

Drag and Drop Capabilities

Arrow Builder comes with in-built functionalities of drag and drop to provide you with an effortless designing experience. Move a shortcode, content element, widget, or any other components from one page section to another with a simple click!

Live Preview Editor

Arrow Builder comes with just the perfect backend page building experience. Live preview lets you see the elements exactly as it appears in the frontend. So you can change colors, styles, add icons, animations and customize it as per your design requirements. All of this live and right in the backend.

Layouts

Multiple layouts having sizable, droppable, & draggable rows and columns that you are sure to fall in love with! You can create complex web pages using layouts in a few clicks. No technical or coding skills required!

Content Elements

There are 30+ built in content elements in Arrow Builder to suit the needs of all designers. These elements are fully responsive, retina ready, and optimized to intensify your website building experience.

Customizable Rows

Customizing rows in Arrow Builder is a cakewalk! You can define borders, background colors, add animations & do a lot more nifty things to the complete row!

Responsive Design

Content with Arrow Builder looks great on all desktop and mobile devices. You can exercise full control over the responsive design and see how your content is displayed on various screen sizes.

Gradients

We have included beautiful gradients for the users to use in both backgrounds and elements to enhance its looks without taking third party support.

Unlimited Color Options

Control how each element, unit and page looks by setting colors to various sections and page units with the multiple color options available with this intuitive Backend Editor.

Template System

You can save endless number of templates, custom post types or page sections with Arrow Builder for future use or re-use in existing as well as new web pages.

Multi-Level Rows

Add rows in rows to improve the page layouts and define its style including number of columns, content elements and more with the mutli-level rows option with Arrow Builder.

Device Visibility

Arrow gives you the power to decide the visibility of content on different devices by just clicking on the in-built icons. A content row can be displayed on mobile, tablets, and desktops. You can choose more than one device to show your selected content as per your requirements.

Draft Content

Sometimes we are not sure whether to show a particular content or not. With Arrow Builder, you can put your creativity to work and choose to show / hide it at your will.

Animation on the Fly

Get numerous animation options for each row and content elements of Arrow Builder and add animations and media elements easily.

Parallax Background Made Easy

You can add parallax effects to your rows in a jiffy! You can also adjust other parameters using parallax effects.

Video Backgrounds

Videos can be easily added from rows in Arrow Builder. You can also embed YouTube videos in the background of websites without trouble.

Optimized Code

Arrow Builder has undergone a series of trials and testings to make it super advanced, fully optimized, and lightning fast!

Security

Arrow Builder follows a no tracking policy. The code of our builder is made by professionals who are working with Wordpress since a decade. Hence, we make sure that your data is completely safe and secured.

Premium Support

Our team is always there to listen to you if you face any issues or queries while using Arrow. You can request a new feature, report a bug, ask doubts and seek direct help through our support forum.

Free Updates

Arrow Builder comes with a promise of endless updates to take your page building experience to another level and protecting you from threats and other vulnerabilities simultaneously.

Super-Fast

We tried many page builders and found them to be extremely slow. So we built something sleek and fast! Build superfast websites and invest your time in other important stuff!

One Page Capabilities

You also have the ability to create and control one page layouts by using the Anchor ID in the row settings. This helps in avoiding any third party support to build the kind of webpage or website you want.

FAQs

Arrow Builder is a page builder created to provide simplicity and ease of building web pages. It acts as a drag and drop plugin where in you can drag any elements to your websites, add layouts, and design web pages within minutes!
We have listed Arrow Builder in the Envato Market. You can directly buy our custom page builder from there.
Yes, Arrow Builder is compatible with all WordPress Themes. You can use Arrow with any third party theme you wish to use. Incase, you just want to use Arrow Builder for a single client based or personal work, please buy Codecanyon's Regular Licence. And if you want to develop your own Theme using Arrow Builder, Please Buy Codecanyon's Developer Licence of Arrow Builder.
Yes, it is compatible with the latest versions of WordPress. You can use Arrow builder with any WordPress version from 3.0 and above.

Arrow Builder is built by our team of dedicated expert web developers. Everything including the Speed, SEO, Security, were kept in mind while inventing this page builder.

Here is why Arrow Builder has all these three features:

  1. SPEED: Arrow Builder is the fastest of all page builders you will find in the market. It is built with W3C validation to ensure it works faster than the rest with all WordPress themes!

  2. SEO: The code of Arrow Builder is powerful, well-built, SEO-friendly and validated with W3C standards. So, you can be completely sure of its optimization for search engines!

  3. SECURITY: Our team of proficient developers has spent a lot of time and efforts on building Arrow Builder to keep it safe and secured. It is made with W3C validation to further improve the security levels of your websites.

Page builders provide a seamless website building process to all its users which is extremely beneficial for developers with minimum technical knowledge and is highly time efficient. Hence, it is essential to use a page builder to ease out the development process of websites, customizing the layouts & color schemes of your web pages, and save you not only from the complexities of building websites but also your precious time which you can utilize to focus on other important aspects of building websites!
A lot of time and efforts has been invested by our expert panel to create Arrow Builder. So you can be completely sure of its security, SEO-specific features, flexibility, and other key features. You should use our Builder because it is easy to use, has numerous content elements to serve each and every requirement of the user, drag and drop capabilities, and countless animating options for each row and column.
Arrow Builder comes with a complete guide in the form of documentation and video tutorials to answer each and every tiny bit of your doubts. But if you are still facing problems, then you can use our Express Support Service and place your queries with us. We will answer it immediately or maximum within 48 hours.
We are currently working on the Video tutorials. The same would be available on our YouTube channel to visually explain all our features and steps to use them to smooth out your experience with Arrow Builder!
Content Elements are ready made pieces of WordPress code to insert objects, elements, and custom files to a website without making complex changes in the entire code. These help you add greater functionalities to websites with very little effort and liberate you from the tasks of writing long length, ugly code to bring in a single change.

Yes, Arrow Builder provides 30+ robust Content Elements to enhance your website developing process.

Here is the list of content elements you will get with Arrow Builder:

  1. Accordion
  2. Alert
  3. Audio
  4. Blockquote
  5. Bullet
  6. Button
  7. Call to Action
  8. Contact Form
  9. Countdown
  10. Counter
  11. Device Slider
  12. Devices Video
  13. Dropcap
  14. Empty Space
  15. Gallery
  16. Google Maps
  17. Headline
  18. Icon With Text
  19. Image
  20. Modern Separator
  21. Modern Skill Bar
  22. Pie Progress Bar
  23. Pricing Table
  24. Separator
  25. Service Box
  26. Slider
  27. Social Icons
  28. Tab
  29. Team
  30. Text
  31. Timeline
  32. Title
  33. Video
Updates are improved versions of already existing software by removing bugs found in an existing software service, enhancing security level, adding new features, to match up with the current trends and technologies and to maintain newness in your softwares. Yes, after the release of Arrow Builder, our team will work on its updates which will be launched frequently to help you get the latest functions in your websites with ease.
Yes, you can create one page templates with our custom page builder. To create a one page template, you need to specify the section name in the One Page ID available in Row Settings (specified row > Edit option > Row Settings > One Page ID > Save > Update). Next, you need to paste the same id in the URL under the custom link section (Appearance > Menus > Custom Links > URL > paste your One Page ID here > Update).
Checking on ‘Remove Margin’ option removes the predefined content element’s padding (15 pixels) from left and right, such that the content element becomes End-to-End.
To add a parallax background, you need to select image in the background settings and Enable Parallax. You can define the parallax speed and save changes. The steps for the same will be: Go to ‘Edit’ option of the particular row > Row Settings > Background Settings > Image > Enable Parallax > Parallax Speed > Save > Update.

Developer’s Documentation

This is the complete Developer’s guide to use Arrow Builder. Included in this documentation are the ‘How-tos’ for the various sections of our custom page builder.

1.0 How To Add Custom Shortcodes?

There are 33 shortcodes available with our custom page builder. However, if you wish to create your own shortcode, you can do so by creating a folder of your shortcode inside the Shortcode folder in the Arrow Folder.

For instance, you want to create a Headline Shortcode. So you will have to go to Arrow > Shortcode > Create a folder named ‘Headline’.

In this folder, you will have to create four files, namely:

  1. headline-fields.php

    In this file, you will specify the PHP script for the fields you need in the backend of your shortcode.

  2. headline-shortcode.php

    In this file, you will specify the PHP script for the frontend of your shortcode.

  3. headline.scss

    In this file, you will add the CSS code for your shortcode.

  4. headline.png

    You save your icons in this file.

1.1) How To Add Tabs In Your Field Type Of Your Shortcode?

Our custom settings options for our shortcodes have been categorized into three tabs, namely:

  1. General – This tab contains the general options including type, text fields, etc.
  2. Styling – The style tab contains the typography, color styling, border & radius options.
  3. Animation – This tab gives the options for Animation style and speed for your shortcode.

You can add these tabs to your shortcode by the following method:

1.1.1) How To Add A General Tab

To add a General Tab, you need to specify the type as ‘tab’, the name of the tab which you will mention in the ‘array’ should be unique and the array you will pass in ‘fields’ will include options you want in the general tab. Below, we have specified the array to generate a General Tab for your custom shortcode.

<?php
$this->fields = array(
    'general_tab' => array(
                    'type' => 'tab', // define type
                    'title' => __( 'General', 'npsc' ),
                    'fields' =>  array(
                                   // add your shortcode fields
                                )
                     )
            )

Similarly, you will add a ‘Style’ Tab and ‘Animation’ tab to your generated shortcode. You can follow the same process to add a custom tab along with or in place of the specified tabs.

1.1.2) How To Add Options To Your Tab

You need to have a unique name for the option, specify the title of the option, its type, and default value (if any).

<?php
$this->fields = array(
	'general_tab' => array(
                        'type' => 'tab',  // define type
                        'title' => __( 'General', 'npsc' ),
                        'fields' =>  array(
                                    'headline' => array(
                                                'type' => 'text',
                                                'title' => __( 'Heading', 'npsc' ),
                                                'default' => __('Amazing heading styles')
                                                ),
                               	   )
                     	   )
               	 )

You can also specify the dependency of a field type upon another field type with the following code.

<?php
'style'	=> array(
            'title'   => __('Style', 'npsc'),
            'type'	=> 'dropdown',
            'default' => 'subtitle-top',
            'options' => array(
                            'subtitle-top'  => __('Subtitle Top', 'npsc'),
                            'clip'      => __('Clip', 'npsc'),
                            'horizontal'    => __('Horizontal', 'npsc')
           		)
		 ),
			
'headline' => array(
                'type' => 'text',
                'title' => __( 'Heading', 'npsc' ),
                'default' => __('Amazing heading styles'),
                'dependency' => array('name' => 'style', 'filter' => array('subtitle-top', 'horizontal'))
                ),			

Specify this code in the field file of your shortcode (headline-fields.php in the case defined above).

2.0 How To Call Options Value In The Front End

This is the main styling of your shortcode. You will have to call the options value to display them on the frontend of your shortcode in php file (headline-shortcode.php in the case defined above). The class name should be the folder name of your shortcode.

Consider the following code for a better understanding:

class Npsc_Foldername extends Npsc_Shortcode 
{

}

In function constructor, we pass the shortcode name, category and its description. If you wish to show a preview, then you need to mention ‘true’.

<?php
 class Npsc_Headline extends Npsc_Shortcode {
 function __construct() {
        parent::__construct();

        $this->title = __( 'Headline', 'npsc' );
        $this->description = __( 'Headline Shortcode', 'npsc' );
        $this->category = __( 'typographics', 'npsc' );
        $this->show_preview = true;
        
        $this->is_container = true;
    }
  1. Shortcode function is used for rendering html from shortcode. Here is the code to render html from your shortcode:

    function shortcode( $atts, $content = null ) 
     {
     
     }
  2. Merge shortcode option array and then extract it by using the following code:

    extract( array_merge(shortcode_atts( $this->get_shortcode_defaults( null, $atts ), $atts ),$atts) );
  3. If you require a value for a specific field, you need to add ‘$’ before the array name. For example, if the array name is ‘headline_title’ and if you wish to get this value name, then you need to write it as

    <?php echo $headline_title; ?>
    

2.1) How To Set The Opacity Of Color

If the type of your field is color, then you can set the opacity of the color by calling the hex2rgb function as described below:

 $bgcolor=Npsc_Shortcodes::hex2rgb($bgcolor, $bgcolor_opacity );

In the above snippet as you notice, the first parameter includes the name of the color field and the second parameter includes its name along with its opacity.

2.2) How We Call Gradient In Shortcodes

For the gradient color function, we have to pass 6 parameters. These are:

  • Parameter 1: This parameter includes the gradient first color.
  • Parameter 2: This parameter includes the opacity of the gradient first color.
  • Parameter 3: This parameter includes the second gradient color.
  • Parameter 4: This parameter includes the opacity of the second gradient color.
  • Parameter 5: This parameter is linear.
  • Parameter 6: This is the last parameter and it represents the direction of the gradient color.

The code for the same is as follows:

$bggradient_color = Npsc_Shortcodes::gradient_color($gradient_start,$gradient_start_opacity, $gradient_end, $gradient_end_opacity, 'linear', $bg_gradient_direction);

3.0 How To Add CSS In The Custom Shortcode?

We are using Bootstrap Sass in shortcodename.scss (headline.scss in the case defined above). Include these files:

@import "bootstrap3/mixins";
@import "bootstrap3/variables";

We are using autoprefixer in this file. Look at the example given below:

.npsc {
//add your custom css here
}

4.0 How To Add A JS / CSS File?

You can add your own JS or CSS file in the assets folder arrow > assets > JS > npsc or arrow > assets > Css. After you have made your own custom JS or CSS, you need to include your custom JS or CSS file in the assets-list folder arrow > assets > asset-list.php.

<?php
 $assets = array( 
            'style' => array(
                        'cssfilename' => array( 'npsc.admin', $asset_path .'/css/npsc/cssfilename.css'),				
                        // add your css file path
                        ),
            )

4.1) How To Call The Custom JS File?

You can call the custom JS file in three areas: backend, frontend and in a specific shortcode.

  1. To call JS File In The Backend:

    npsc_add_script(‘JSfilename’);  // include JS

    The path for the same where you will have to include this code will be: Arrow > Assets > backend_script.php

  2. To call JS File In The Frontend:

    npsc_add_script(‘JSfilename’);  // include JS

    The path for the same where you will have to include this code will be: Arrow > Assets > frontend_script.php/p>

  3. To call JS File in a Particular Folder:

    The following code will help you call your custom JS file in a specific file.

    npsc_add_script(‘JSfilename’);  // include JS

    The path for the same where you will have to include this code will be: Arrow > Shortcode > Shortcode Folder > Shortcodefilename-shortcode.php

4.2) How To Call The Custom CSS File?

You can call the custom CSS file in three areas: backend, frontend and in a specific shortcode.

  1. To call CSS File In The Backend:

    npsc_add_style(‘CSSfilename’);  // include CSS

    The path for the same where you will have to include this code will be: Arrow > Assets > backend_script.php

  2. To call CSS File In The Frontend:

    npsc_add_style(‘CSSfilename’);  // include CSS

    The path for the same where you will have to include this code will be: Arrow > Assets > frontend_script.php

  3. To call CSS File in a Particular Folder:

    The following code will help you call your custom CSS file in a specific file.

    npsc_add_style(‘CSSfilename’);  // include CSS

    The path for the same where you will have to include this code will be: Arrow > Shortcode > Shortcode Folder > Shortcodefilename-shortcode.php

5.0 How To Add Field Type

Currently, Arrow Builder contains 19 field types. You can, if you want, add a custom field type. The list of our field types include:

1. Animation

This field type includes all the animation styles included in the dropdown for shortcodes.

2. Audio

The field type is used to browse audios and media files.

3. Border Width

This field type includes four input value boxes for your top border, bottom border, left border and right border.

4. Check Box

Check box field type is used for true and false values.

5. Color

This field is used to pick colors.

6. Dropdown

Dropdowns are toggleable, contextual overlays for displaying lists of links and more.

7. Editor

Editor lets you customize the text – its color, style, weight, alignment, etc.

8. Np_icon

Icon type allows you to select an icon for your shortcode.

9. Image

This field type lets you browse image from your media library.

10. Image_select

Image_select type lets you select multiple images from the media library.

11. Number

The number field lets you add numbers. You will not be able to add string values in this field.

12. Radio

This field type is used when you want to limit the user to just one selection from a list of preset options.

13. Radius

This field type includes four input value boxes for your top left, top right, border, bottom border and bottom right radius.

14. Range_Slider

This field type is used in animation speed. The minimum range is specified as 0 and maximum as 4000 divided in 5 steps.

15. Repeater

The repeater type is used when you want to add the options repeatedly in endless number.

16. Text

Text field type is used to add a single line text.

17. Textarea

This field type is used to add multiple lines of text.

18. Video

This field type is used to add a single video to the shortcode.

But if you wish to create your own field type, you need to follow the following steps:

Step 1: Create a file in this location Arrow > inc > fields > filename.php . The name of this file should be the name of your field type.

Step 2: Create a class and render the type field you wish to create inside this class.

class Npsc_Field_Text extends Npsc_Field {
}

Step 3: We use the render function to convert html to string. This function returns the output field type.

protected function render() {
}

Step 4: After you have created your PHP file, you will now have to include this field in Arrow > inc > fields > fields.php . Your field type is now ready for use.

You can refer to the example below:

Suppose, you wish to create a field type, number. So you’ll have follow the below steps:

  1. Create a file in this location Arrow > inc > fields > number.php .
  2. Render the type field by using:

<?php
/*
* Class Npsc_Field_Number
* Used to create number field type.
* @since 1.0
*/
class Npsc_Field_Number extends Npsc_Field {
	// convert html to string
	protected function render() {
	    
		$output = '';
		$output .= '<div class="dialog number"<';
		$output .= '<input type="number" min="0" name="'.$this->id.'" id="'.$this->id.'" value="'.$this->value.'"<';
                $output .= $this->description;
                $output .= '</div>';
		return $output;
	}
	// object initialization 
	public function render_init_script() {
			return '$(".dialog.number").change(npscRefreshPreview);';
		}


Your number field type is ready! If you want to use this field type in a particular shortcode, then you have to define the type as ‘number’ in that shortcode.

Refer to the screenshot given below:

<?php
 'title_size' => array(
                'type' => 'number',
                'title' => __( 'Sub Text Size', 'npsc' ),
                'default'  => '',
                'dependency' => array('name' => 'custom_typo_chk', 'filter' => array('yes'))
                ),


6.0 Theme Support

We have added Theme support functionality in Arrow Builder. This allows you to create your custom shortcodes in your Wordpress theme without editing the code of Arrow Builder. This allows Arrow Builder to be completely independent of your Theme and vice versa.

6.1) Adding Shortcode To Your Wordpress Theme

To add a custom shortcode to your Wordpress theme:

Step 1: Create a folder of your desired name in your theme root. Example: you created a folder named ‘myfolder’.

Step 2: Include a PHP file in this folder where you will create an array and pass these four values:

<?php
$ab_integration_folder=get_template_directory().'/myfolder';
$ab_integration_uir=get_template_directory_uri().'/myfolder';
$ab_integration_field=$ab_integration_folder.'/fields';
$arrow_var=array(
    'shortcode_url'     =>  $ab_integration_uir.'/myshortcodefolder',
    'shortcode_path'    =>  $ab_integration_folder.'/myshortcodefolder',
    'field_path'        =>  $ab_integration_folder.'/fields',
    'field_list'        =>  array(
                                   /* 'field_class_name'  =>  'field_file_path',*/
                                    'Npsc_Field_Dropdown'  =>  $ab_integration_field.'/dropdown.php',
                                   
                                )
    );
//unserialize
if(empty(get_option('ab_integration_folder'))){ add_option('ab_integration_folder',$arrow_var); }else{ update_option('ab_integration_folder',$arrow_var); }
?>
  1. Shortcode URL

    You will pass the path of the shortcode folder. You can pass the value in either http or https form.

    <?php
    'shortcode_url'     =>  $ab_integration_uir.'/myshortcodefolder',
    ?>
    
  2. Shortcode Path

    You will pass the physical path of the shortcode folder.

    <?php
    'shortcode_path'    =>  $ab_integration_folder.'/myshortcodefolder',
    ?>
    
  3. Field Path

    If you want to create a new field, then you will pass the path for the field folder.

    <?php
    'field_path'        =>  $ab_integration_folder.'/fields',
    ?>
    
  4. Field List

    You will the pass the class name and the path of the PHP file for the fields you have created in the field folder.

    <?php
    'field_list' =>  array(
                     /* 'field_class_name'  =>  'field_file_path',*/
                    'Npsc_Field_Dropdown'  =>  $ab_integration_field.'/dropdown.php',               
                   )
    ?>
    

    Step 3: Include four folders in your ‘myfolder’:

    Folder 1: You will include all your shortcodes in this folder which you can name as ‘myshortcodefolder’.

    Folder 2: This will your ‘assets’ file. Here, you will include your CSS and JS folders.

    Folder 3: This will be the ‘fields’ folder where you can add your new fields which you wish to use.

    Folder 4: This is an optional folder to add images to your shortcode.

Changelog

Version 1.0 - Nov 14th 2016
Arrow Builder Released.

Version 1.1 - Dec 1st 2016
1. Added Raw HTML shortcode.
2. Added functionality for custom Css.
3. Added functionality for custom JS.
4. Added support for Vimeo Video in Row Background.
5. Added Theme Support

Version 2.0 - Mar 4th 2017
1. Added Equal Height option for Rows.
2. Added Content Position option for Rows.
3. Added SVG backgrounds for Rows.
4. Added Design Option Tab in Rows & Columns.
5. Added option to input Margin for Rows & Columns.
6. Added option to input Padding for Rows & Columns.
7. Modified Border option to input borders for 4 sides in Rows & Columns.
8. Fixed Bug for Inner Row Content width.
9. Fixed Issue in Gallery Shortcode.
10. Fixed Issue in Animation.
11. Parallax set to OFF on Mobile.
12. Fixed Issue for Youtube Video Background In Loop.
13. Fixed Bug in custom CSS/JS.
14. Fixed other Bugs & Issues.