Close

Home

1.Getting Started #

Thank you for purchasing Awesome Box. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Yes No

1.1.Installation of Awesome Box #

Before You Begin

Aweome Box is a extension of LayersWP theme. So, You need to use LayersWP theme. LayersWP theme is absolutely FREE. Layers can be downloaded from http://layerswp.com

NOTE: Awesome Box does not work WITHOUT LayersWP.

DOWNLOAD LAYERS

Safari users take care to ensure Safe Downloads is not enabled in your Preferences. When the download is complete, you should have a zip file on your desktop if you plan to install via WordPress.

Make sure you have a fresh download before you begin.

More Details – http://docs.layerswp.com/doc/install-layers/


 EXISTING SITES

If you have an existing WordPress install with content, back it up!

DOWNLOAD LAYERS

Awesome Box can be downloaded from http://codecanyon.net/downloads. Downloaded zip contains 5 folders which are:

  • Documentation
  • Licence
  • Licensing
  • Awesome Box Installable ( Main Installable zip )
  • Surror Icon Manager ( Required for Awesome Box )
step-1-extract-package

Extracted Package

HOW DO YOU WANT TO INSTALL IT?

  • Install Awesome Box via WordPress
  • Install Awesome Box via FTP
Yes No

1.2.Icon Manager (Required) #

We are happy to introduce our new feature Icon Font Manager for Awesome Box v(1.0.2). You’ll get it with Awesome Box from CodeCanyon.

Recently, We used FontAwesome icon fonts with DropDown such as below:

icon-manager-by-surror-old

Old – Icon Font (Only Font Awesome) selector DropDown

Its too time consuming to search the related icon font from DropDown. Also, We have a limitation to select only font awesome icon fonts.

So, We replaced our old DropDown Icon selector with new Icon Font Manager v(1.0.0). It provide useful 51 Icon Font Packages. So, You’ll be able to select your field related / faviorate Icon Fonts from our existing icon font package.


How to Install “Icon Font Manager”?

Icon Font Manger is supported plugin. Once you buy Awesome Box v(1.0.2) It contains installable .ZIP of Icon Font Manger. Before using Aweome Box please install the Icon Font Manger.

Visit our Video Tutorial at here https://www.youtube.com/watch?v=TkFTRGdvdiM


How to Select Icon Font Package from “Icon Font Manager”?

After installation of ‘Icon Font Manager’ Goto – YOUR_SITE/wp-admin/admin.php?page=surror-icon-manager

It’ll show you available icon font packages such as below:

icon-manager-by-surror-admin

Icon Font Library

Each package contain TOGGLE ( On / Off ) switch. So, You’ll be able to select your favorite icon font package by clicking on / off. Initially ( default ) ‘Font Awesome’ icon font is selected. Select at least one Icon Font Library to use.

NOTE: You’ll be able to use all icon fonts. But, We recommend you to use only few icon fonts. Because, It slow your speed.


How to Use?

After selecting your favorite Icon Font package.

  1. GoTo Customizer -> Add widget Awesome Box -> Click on Select Icon such as below:

    icon-manager-by-surror-step-1-add-icon-font

    Step-1: Select icon font

  2. Click on icon in which you want to use from the list such as below:

How to add own custom Icon font Packages?

Right now it’s not possible. We’ll provide this feature in future.


Used Icon Font Pacakges

/**
* ICON FONTs USED UNDER COMMERCIAL LICENSE
*
* # IconFont Source:
*
* 1. Falticon
* 2. Font Awesome”
*
* ( Total Icon Fonts – 2587 )
*/

Sr. No. Package Name No. Of Icon Fonts Source
1. Font Awesome : 605 – Font Awesome
2. Travel And Tourism Wallet : 15 – Falticon
3. Logistics Delivery World Grid With Placeholder : 100 – Falticon
4. Poi Signals Star And Crescent : 20 – Falticon
5. Office Set Thumbs Up : 50 – Falticon
6. Glypho Video Player Outline : 64 – Falticon
7. Generic Cursor Fill Zoom Out : 30 – Falticon
8. Fitness Line Craft Women Fitness Clothing : 30 – Falticon
9. Saint Valentine Lineal Woman In Love : 50 – Falticon
10. Pet Shop Fill Turtle : 50 – Falticon
11. Music Control Panel Xylophone : 50 – Falticon
12. Cool Cursors Zoom Out : 30 – Falticon
13. Computer Security Webcam : 30 – Falticon
14. Grand Circus Umbrella : 50 – Falticon
15. Carnival Fill Tickets : 40 – Falticon
16. Cameras And Camcorders Webcam : 50 – Falticon
17. Thunderlion Ui Wifi : 56 – Falticon
18. Basic Solid Ui Zoom Out : 104 – Falticon
19. Simple Icon Set User : 42 – Falticon
20. Basic Hand Gestures Fill Zoom In : 30 – Falticon
21. Scientifics Study Water : 50 – Falticon
22. Web Navigation Lc User : 50 – Falticon
23. Glases And Bottles Wine Glass : 36 – Falticon
24. Computer Security Fill Warning : 30 – Falticon
25. Vintage Furniture Wardrobe : 50 – Falticon
26. Camera And Accesories Webcam : 50 – Falticon
27. Car Utensils Wrench : 20 – Falticon
28. Spartan Warrior : 30 – Falticon
29. Easter Rabbit : 30 – Falticon
30. Saint Patrick Day 1 Trumpet : 30 – Falticon
31. Saint Patrick Day 2 Pipe : 15 – Falticon
32. Saint Patrick Day 3 Pipe : 15 – Falticon
33. Coffee Shop Toast : 50 – Falticon
34. Car Repair Car Wash : 25 – Falticon
35. Real Estate Truck : 40 – Falticon
36. Lineal Awards Trophy : 30 – Falticon
37. Danger Symbols Warning : 30 – Falticon
38. Scientific Study Thermometer : 30 – Falticon
39. Landscapes Wetland : 30 – Falticon
40. Rounded Leaves Collection Yew : 30 – Falticon
41. Lineal Landscapes Yacht : 30 – Falticon
42. Office Elements Webcam : 50 – Falticon
43. Rounded Awards World Cup : 20 – Falticon
44. Rounded Transportation Zeppelin : 50 – Falticon
45. Birthday Party Speakers : 50 – Falticon
46. Birthday Party Collection Toasts : 50 – Falticon
47. Party Elements Turntable : 50 – Falticon
48. Party Pictograms Waiter : 20 – Falticon
49. Forest Animals Zebra : 30 – Falticon
50. Sewing Elements Zipper : 40 – Falticon
51. Restaurant Elements Wifi Connection : 30 – Falticon
————————————————————————————-
: 2587 ( Total Icon Fonts )

Updated – 11 – June – 2016

It affects on Website Loading Time?

It’s depends on How much icon fonts packages are you enabled from Icon Font Manager.

Now, only Font Awesome icon font is loaded on FrontEnd.

Hope You’ll enjoy it 🙂

Yes No

1.3.Preset Manager (Required) #

What is Preset Manager?

Preset Manager is a new feature of Awesome Box. We provide’s 202 unique presets. Awesome Box has lots of design possibilities. You can create your own design from available options through your imagination.

  • You can create your own design from available options through your imagination.
    or
  • Use any available preset.

Where to see all available preset?

Preset manager came with Awesome Box. So, No need to install separate plugin for it.

After activation of Awesome Box v1.0.3 the menu Preset Manager appear at WordPress backend such as below:

preset-manager-backend-look

 

Here, You can see all the available presets list.

How / Where to use presets?

You can use preset in a customizer.

  1. Add new widget Awesome Box.
  2. Navigate Add New Column button. Below it Preset Button available. Click on it.
  3. Select preset from abailable preset list.
  4. Click on Add Preset to add the selected preset or Cancel to close the preset list.

how-to-use-presets-for-awesome-box

Yes No

2.Features #

We are trying to provide you lot of design variations with nice UI and better UX with few clicks.

Now, We provide:

  • Dividers for ( main heading & column heading )
  • with Media ( main heading, column heading & button )
  • Styling ( main heading & column heading )
  • Animations ( for column )
  • Presets ( Easy to use available presets )

We’ll add more useful & unique features for Awesome Box in future such as:

  • Row Separator
  • Parallax Background
  • Gradient Background
  • etc.

 

 

Yes No

2.1.DIVIDERS #

( Dividers are used only for Main Heading & Column Headings )

We provide 4 types of dividers for main heading & column heading. To use divider is quite simple. You can create it with few click.

Dividers List:

  1. Border – ( Quick View – Video )
  2. Border with ICON – ( Quick View – Video )
  3. Border with IMAGE – ( Quick View – Video )
  4. Border with TEXT – ( Quick View – Video )
Yes No

2.1.1.Border #

1.divider-border

Options

  • DIVIDER – BORDER COLOR
  • DIVIDER – BORDER WIDTH – (PX / %)
  • DIVIDER – BORDER HEIGHT – (PX)
Yes No

2.1.2.Border with ICON #

2.divider-border-with-icon

Options

  • DIVIDER – ICON
  • ICON COLOR
  • ICON SIZE
  • ICON SHAPE ( CIRCLE / SQUARE / DIAMOND )
  • ICON BACKGROUND COLOR
  • ICON – HAS SHADOW?
  • ICON SHADOW COLOR
Yes No

2.1.3.Border with IMAGE #

3.divider-border-with-image

Options

  • DIVIDER – IMAGE
  • IMAGE – SIZE ( PX )
  • IMAGE – HAS SHADOW?
  • IMAGE SHADOW COLOR
Yes No

2.1.4.Border with TEXT #

4.divider-border-with-text

Options

  • DIVIDER – TEXT
  • TEXT – SIZE ( PX )
  • TEXT COLOR
Yes No

2.1.2.WITH MEDIA #

( Used for Main Heading, Column Heading & Buttons )

You can add icon / image for main heading, column heading or button. You can also be able to set the direction of the icon / image.

Yes No

2.1.2.1.Icon #

5.with-media-icon

Options

  • ICON
  • DIRECTION ( LEFT / RIGHT )
  • ICON COLOR
  • ICON SIZE
  • ICON SHAPE ( CIRCLE / SQUARE )
  • ICON BACKGROUND COLOR
  • ICON – HAS SHADOW?
  • ICON SHADOW COLOR
Yes No

2.1.2.2.Image #

6.with-media-image

Options

  • IMAGE
  • DIRECTION ( LEFT / RIGHT )
  • IMAGE – SIZE ( PX )
  • IMAGE – HAS SHADOW?
  • IMAGE SHADOW COLOR
Yes No

2.1.2.3.STYLING #

( Used for Main Heading & Column Heading )

7.extra-styling

 

Options

  • LAYOUT – ( BOXED / FULL WIDTH )
  • BORDER STYLE
  • BORDER COLOR
  • BORDER (PX)
  • PADDING (PX)
  • MARGIN (PX)
Yes No

2.1.2.3.1.Layout #

2.1.2.3.4.BUTTON STYLES #

( For only Column Buttons )

Yes No

2.1.2.3.4.1.Flat #

2.1.2.3.4.2.Outline #

2.1.2.3.4.5.ANIMATIONS #

( For Main Heading & Description & Whole Column )

Yes No

2.1.2.3.4.5.1.Select Animation #

2.1.2.3.4.5.2.Animation Delay - in (ms) #

2.1.2.3.4.5.3.Animation Duration - in (ms) #

2.1.2.3.4.5.4.Animate on Visible ( YES / NO ) #

2.1.2.3.4.5.5.Repeat Animation ( YES / NO ) #

3.Sources and Credits #

4.Changelog #


# Layers - Awesome Box Changelog

=======
##1.0.3
###

* **Added** – 202 Presets for columns and Preset Manager which showing all the available presets.
* **Tweak** – Removed recently added 6 presets.
* **Fixed** – Loading assets ( JS / CSS ) only on required places
* **Tweak** – Compatibility with layerswp 1.5
* **Tweak** – Removed unwanted assets

=======
##1.0.2
###

* **Added** – Icon Font support with simple Icon Picker interface
* **Added** – 51 Icon Font Packages support by using Surror Icon Font Manager plugin
* **Fixed** – RGBA Color picker issue
* **Tweak** – Compatibility with layerswp 1.5

=======
##1.0.1
###

* **Added** – Introducing ‘Presets’ for colouns. Now end user will use predefined preset from preset list.
* **Added** – For animation added option “Restart on Viewport” to restart animation when its revisable on viewport.
* **Added** – For ‘Divider with TEXT’ added option ’rounded_border’ to add rounded border for text divider.
* **Tweak** – Divider CSS fixes.

=======
##1.0.0
### 26 Jan 2016

** Initial release of Awesome Box.

Yes No