Aether Wordpress Theme Documentation

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to post your queries on our support forum. Thanks so much!


Author: Designova
Support: Through Forum Only
Author URL: Designova
Item URL: Check Demo Now
Current Theme Version: 1.0
Aether Shortcodes Version: 1.0
Aether Posttypes Version: 1.0
Documentation Version: 1.0
Created: 29-Apr-2016
Modified:

WordPress Technical Requirements

  • for localhost you can use xampp, wamp or any Apache with PHP and ourSQL server.
  • Microsoft IIS with PHP 5.2.4+ and ourSQL 5.0+ support.
  • Livesite (preferably a sub-domain for testing) with PHP 5.2.4+ and ourSQL 5.0+.
  • For Manual Theme Installation, you need a full installation package for WordPress, so download here and don't forget about WordPress Server Requirements, or you may already have a WordPress powered website.

Manual Theme Installation

This refers to installing the theme on your WordPress powered website. This means you already have a website powered by wordpress CMS.So here's what you have to do:

  • Unpack all files and folders of the Package file you downloaded from Themeforest and open the Aether Theme folder.
  • Copy the Aether.zip file to your desktop for your convenience.
  • Log-in to your WordPress back-end ( http://www.your-website.com/wp-admin or http://localhost/our-website/wp-admin ).
  • Go to Appearance menu in the left sidebar and click Themes.
  • Click Install Themes tab and then click the Upload link just below. This will show a file upload form.
  • Click Browse and find the installation file Aether.zip (should be on your desktop as we instructed you just above), click the file when found and then click the Open button.
  • Click Install Now button. The theme is now installed.
  • Go to Manage Themes tab and find the newly installed theme.
  • When found, click the Activate link just below it.

Alternatively you can install the theme though FTP method. Here are the steps

  • Unpack all files and folders of the Package file you downloaded from Themeforest and find the Aether folder.
  • Upload the folder to wp-content/themes folder of your wordpress installtion using any FTP clients like Filezilla
  • Log-in to your WordPress back-end ( http://www.your-website.com/wp-admin or http://localhost/our-website/wp-admin ).
  • Go to Appearance menu in the left sidebar and click Themes.
  • Go to Manage Themes tab and find the newly installed theme.
  • When found, click the Activate link just below it.

Required Plugins Installation

Aether theme requeries Aether Shortcode plugin to get all the page builder elements available for this theme. This plugin is an extension for Visual Composer Page builder. You can find the plugin files inside the downloadpack under Plugins folder. Before activating the plugin ensure that you have installed Visual Composer plugin.

Here are the steps to install the plugin

  • Unpack all files and folders of the Package file you downloaded from Themeforest and find the Aether Shortcode folder inside the Plugins folder.
  • Upload the folder to wp-content/plugins folder of your wordpress installtion using any FTP clients like Filezilla
  • Log-in to your WordPress back-end ( http://www.your-website.com/wp-admin or http://localhost/our-website/wp-admin ).
  • Go to Plugins menu in the left sidebar
  • Go to Installed Plugins tab and find the newly installed plugin.
  • When found, click the Activate link just below it.

You must install WP Retina 2x plugin from Wordpress Plugin Repository to make your graphics looks great on HiDPI devices.

For easy plugin installation we have included automatic plugin installation class which will help you to install all required plugins.


One-Click Demo Installer

We have included an option for easier demo data installtion.You can install the demo with just one click from Theme Options >> Import Demo Data.


Classic Demo Data Installation

Ingore the following steps if you are using one-click demo importer

For beginner users and those who want to take a look at the demo content, you can install the demo data:

  • Unpack all files and folders of the Package file you downloaded from Themeforest and open the Demo Data folder.
  • Copy the demo.xml file to your desktop for your convenience.
  • Log-in to your WordPress back-end ( http://www.your-website.com/wp-admin or http://localhost/our-website/wp-admin ).
  • Go to Tools menu in the left sidebar and click Import.
  • Click WordPress and then install the Wordpress Imported plugin.
  • Once installed go back to Tools menu in the left sidebar and click Import.
  • Click Browse and find the demo.xml file on your desktop (should be on your desktop as we instructed you just above), click the file when found and then click the Open button.
  • Click Upload now and import. It will take a minute to download the demo images from our demo site, but after that, the demo data is installed.

Click on images to open them in new tab for better view

Getting Started

After activating the theme click on the Theme Options link inside the Appearance tab (Dashboard >> Theme Options)


You can upload your brand logo on the logo field, which will be displayed on top left of the header bar aswell as left side of the footer

Footer Cover Image: This theme features a slide out menu. The menu has a dark background image in cover mode. If you want to change the default image you can use this option

Footer Text Left: Text that appears on the bottom left of the footer.

Footer Text Right: Text that appears on the bottom right of the footer. You can add limited html elements like a tag

Footer Cover Image: Footer section has a dark background image by default. By uploading an image through this option you can change that. Please prefer dark image as the text above is white


Social Media Links

Add respective account handles, icon will appear on the footer. You can add your own icons also. Kindly follow the fotrmat described under the 'Custom Social Media' field.

                            
                            <li><a href="URI">TEXT</a></li>
                            
                        
Footer Explained


Custom CSS

Custom CSS option is to create your own styles for the theme. You can also use this feature to override some existing css rules.


Colors

Choose highlighted areas color for the site. For row ,column and many other elements, there will be color choosers in Visual Composer


Fonts

You can choose fonts for four major text items, heading, bolder heading , body font and speciality headings. You can choose anyfont from google fonts pallete for all of them


Backup

You can export your theme options settings for backup , migration etc. Its a standard feature for Redux Framework.


Create new page

To create a new page, open your DashboardPagesAdd New:

This is how you can add a page. You need to choose the right template and configure the meta options properly to make the pages appear as displayed in our demos

In the following sections we will explain page templates and use of meta options in detail based on the usages in our demo website.

Aether supports Visual Composer PageBuilder. We have created an extension for Visual Composer with theme specific components. We have also included the Visual Composer and its documentation inside the download pack

Aether Addon details has been explained later on this docs

  • Default Template
  • Content Only - No footer or title section
  • Mini Footer - For smaller footer
  • Video Page - For Video backgrounds

Page Meta Options

Page Meta Options

Sample Page


Aether has got one custom post type for portfolio.

The posts will be displayed through 'Visual Composer' -> Aether -> Portfolio Grid.

Please ensure that you have installed and activated 'Aether Posttypes Plugin'


Portfolio

Drag and Drop 'portfolio grid' or 'Portfolio - Split Style' from 'Aether' group in VC page builder elements. The grid item can be expanded as three types lightbox image, light box video and standalone project page.

There are three layouts available for the portfolio grid, 2 column, 3 column, 4 column. For proper layouting you should use uniform thumbnail sizes. Kindly follow the image dimensions as shown in our demos.

To add a new portfolio item DashboardPortfolioAdd New Project:

Add the title and necessary contents and add your projects to respective categories. You can add a portfolio item in more than one categories.

We have added another taxonomy for the 'Portfolio' post type called 'Group'. This is for grouping various portfolio layout. You can choose the layout style and sorting group from portfolio grid shortcode option

Please do check the theme demo, where we have employed this technique to sort the portfolios in many differnt layouts.

Portfolio- Split Layout

A slider like layout for portfolio - arrange the items in two differnt groups and choose the groups for either sides in VC shortcode options. The shortcode is 'Portfolio - Split Style', which will be explained later on shortcodes section

See the shortcode in action

Portfolio Post Meta Options

The portfolio metaboxes are grouped in three differnt segments Portfolio Thumbnail Image , Portfolio Item Options and Standalone Project Page Options. You must upload a Thumbnail image otherwise the item will be omitted from the portfolio grid.

Portfolio Thumbnail Image

Thumbnail Image: Upload your thumbnail image for the the portfolio item. If you are using square layouts try to upload images with same resolution.

Portfolio Item Options

Thumbnail Click Action: Set the user experience while clicking a portfolio item. You can set three differnt mods for a portfolio item. Lightbox image, lightbox video and standalone project page.

Lightbox Image (based on the Click Action):

To show a single image on lightbox popup.


Lightbox Video (based on the Click Action):

To show a single video from youtube/vimeo on lightbox popup. Please add video id only. It will automatically decide between youtube/vimeo id to show


Single Project Page Options

Video Cover:

If yes, rest of the fields will appear


Choose video type and add respective video id to get displayed on cover section of single project page. You can add vimeo or youtube video id

If you want to show text above the video, you can add that conent to ' Content Over Video' field


Check this sample project page in our demo

Posts

You can display your blog items through 'Posts'. Its a default wordpress feature. To show posts as in in the picture above, please use 'Blog Posts Wall' shortcode from VC > Aether Tab

Aether supports Visual Composer, install Visual Composer provided with this downloadpack (Auto install option available with theme through TGM Plugin Activation. Follow the instructions from Admin notice bar after theme install). We have created an extension for the Visual Composer with theme specific componenets. You can see them inside 'Aether' tab on VC builder elements.



You need to adjust some of the default styles for Visual Composer. Go to Dashboard => Visual Composer => General Settings => Role Manager (Tab)




Shortcodes Explained


Masonry Image Stack

A set of images arranged in masonry layout. For proper result choose the images with proper resolutions as in our demo


Promo Paragraph

Custom themed heading and paragraph text with color chooser.


Service Item

Its a composition layout with a heading , icon and a block of text. In our demo we use SVG icons, you can either use SVG or PNG.


Section Heading

Underlined heading with text color choose option


Approach Info

Creatively designed text block with an accordion style click to expand content area. The expanded area can be devided in to columns (half/full) to sort contents accordingly

See this in action

Testimonials

Client testimonials in carousel format. See the following image to learn more about adding them


Brands Carousel

Carousel of brand icons with link option.


Team Members Carousel

Team members displayed in carousel format. It has member photo, designation and three social icons option


Price Table

Single price table. In our demo these are arranged in three differnt columns with zero padding

Arragement in backend

Configuring a table


Blog Posts Wall

This shortcode will show blog posts in a grid style as shown in following picture

See it in action

Blog Posts Wall

This shortcode will show blog posts in a grid style as shown in following picture

See it in action

Social Tile

Check the following image to learn about this shortcode

A tile is added on a VC column without any padding.

See it in action

Google Map

Add Lattitude and longitude of your location and it will show google map as in the following picture

1. See it in action
2. Get lattitude and longitude of your place

Contact Form

A simple ajax based contact form which sends messages from customers to your email id

See it in action

Featured Slider

Slider with scroll based item slide effect. You need to upload images for left and right sides as seen in following picture

Please make sure that you are using 'Content Only' page template for the page which has this slider.

See it in action

Fullscreen Split Slider

This slider is very much similar to 'Featured Slider'. You have to upload images for both left and right sides. Unlike 'Featured Slider' this has only one link box. In our demo we have devided an image in to two parts and uploaded on both sides to get that effect.

See it in action


Please make sure that you are using 'Content Only' page template for the page which has this slider.


Agency Slider

A carousel of images with link box. You can link the images to respective project pages or websites or any URL

See it in action


Please make sure that you are using 'Content Only' page template for the page which has this slider.


Dual Slider

A fullscreen carousel of images with link box. You can link the images to respective project pages or websites or any URL

See it in action


Please make sure that you are using 'Content Only' page template for the page which has this slider.


Full Screen Background Video

Background video with text above

See it in action


Please make sure that you are using 'Video Page' page template for the page which has this slider.


Portfolio - Grid

Its a dedicated portfolio theme and you can set many differnt portfolio layouts with this single shortcode and portfolio post type. The setup is simple and all you want to take care of is about grouping the type of posts to respective 'Categories' and 'Groups'. The concept of 'Groups'; an extra taxonomy for portfolio posts has been explained already on the post type section.

We have included three differt types of portfolio layouts (for grid) to choose from

  • 2 Column
  • 3 Column
  • 4 Column
1. Masonry Three Column
2. Two Column
3. Four Column

Please do upload thumbnail images according to the layout you are choosing. For square layouts uploading images with same height and width is mandatory otherwise you may end up in creating pretty weired layout


Please do set Visual Composer row to Full width (no padding) to display the grid as in theme demo


We have also included an option to show or hide filter and hide all button in filters


Portfolio - Split Style

Show portfolio posts through a slider layout. Please see the following link to learn more about it

See it in action


Please make sure that you are using 'Content Only' page template for the page which has this slider.


Full Screen Slider

Full Screen Image Caroseul. Upload images and you are done. Its as simple as that

See it in action



Block Heading

Theme styled heading black background and white text as shown in the following picture.

See it in action



Project Spec Sheet

Add your projects spec list as shown in this picture

See it in action



Aether Button

Button Shaped Link. There are three variants choose from, the theme colored, white and the hard black.





/*Text Alignments*/

.text-left
.text-center
.text-right
.pad-top
.pad-bottom

You can use this classes on builder elements with Custom CSS attributes.

We have tried to cover all basic stuffs needed for you to quickly customize this template. That is all for the initial setup and basic customization. If you need help, we will be always in your reach though our support forum. We appreciate you follow us on twitter, we are @designovastudio on twitter. We hope you have found this quick tutorial as helpful. If you like our works, please rate our themes at themeforest (theme’s page). This will help us to produce more awesome themes. http://www.themeforest.net/user/designova. Please visit our fb page for more new stuffs and freebies.