Astron is a perfectly scalable, responsive, retina ready, performance and SEO optimized, multipurpose WordPress theme. It will fit every project, Huge or tiny. From huge corporate portals to studio or personal sites. Astron is a clean, modern and responsive WordPress and BuddyPress theme that can be used for, basically, any type of website or content. This theme is not dependent on BuddyPress or bbPress, and functions awesome without them.This Theme is built on the awesome Visual Swirl Framework and offers support for the WPML MULTI LANGUAGE plugin, in case you require it. Astron will be a great foundation for your next project!
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user contact page form here. Thanks so much!
Ensure that you have installed the latest and stable version of WordPress before installing this theme. Now follow the steps below.
After you have installed the theme successfully, you can optionally import the supplied demo data in order to get a feel for things. If you would rather skip that and continue setting up your theme, please continue below.
This theme is packaged with tons of awesome and powerful features that give you the ability and tools to create beautiful and unique layouts with no hassle!
The options panel comprises all of the theme's extensive configuration options.
Astron provides you with a powerful way to feature any content your heart desires that makes adding, editing, ordering and deleting media so much easy.
Visual Swirl Slider – Comes packaged with a parallax slider and video backgrounds that can be illustrated unlimited number of times with several positions, hardware enhanced, touch-friendly, configuration options for pagination & arrows.
The theme’s most powerful and state of the art feature, Visual Swirl has spent a lot of time developing extensive, yet easy to use set of shortcodes that will enhance your site dramatically.
Whenever you are dealing with columns it is vital that you observe the “Last Column” check box for the last column in every row.
NB: To achieve a row, it is of paramount importance that the columns in that row must add up to one whole. If these requirements are not met, your columns will not do function correctly as intended. Columns can display anything specified into them, including all shortcodes except for the carousel shortcode, which should be on its own and not in a column.
Astron provides you options to create full width sections on your pages. This shortcode extends its backgrounds to stretch all the way across the screen. You can either select a solid color of your choice or upload an image that will be used as the background of this shortcode. This shortcode also gives you the option to parallax the background if you uploaded an image, which is useful when creating more fascinating sections.
NB: This feature can only be used on full width pages (with no sidebars) - Thus it will function if you use it on blog posts or on the portfolio more details page.
This shortcode allows you to animate a given image that will respond or commence when the user scrolls to the image’s location on the page. You are given three options to choose which allow you to control the uniqueness of your layouts.
This allows you to display your specified testimonials in a well formatted slider, and goes well with the full width section for a more appealing area to show off your testimonials.
This shortcode aligns the heading tag in the center and comes with an optional subheader below it. This is ideal to use at the top of pages or to present a new section in a page.
This shortcode makes a divider to separate your sections.
NB: There is only one option available to select and it will regulate whether or not to show a line in the divided space.
The button shortcode is a simple way to add a styled button quickly to your page. Simply choose the suitable size, fill out the two fields and that’s it.
This theme is packaged with the FontAwesome web fonts. To choose your icon, select your desired size and add the shortcode to the editor.
NB: The size attribute is very vital in determining how the icon will display, so make sure you set it to an appropriate size.
This shortcode creates a toggle panel or an accordion that expands and displays more content when the user clicks on the title.
This shortcode creates a tabbed interface for the user to click through and alter or adjust the content appropriately. To create this shortcode just add or remove tabs as desired until you are prepared to place the shortcode in the editor.
The Bar Graph shortcode creates an animated horizontal bar that propagates to the given percentage, which is ideal for displaying a info graph or other data that you desire to visually present.
The team shortcode takes in all the information that you specify for a team member and formats it pleasantly. It is recommended to use a 1/3 column for this shortcode. If you provide more than 3 team members, you are given the option to create a carousel and add each team member on a slide.
This shortcode comes with two configuration options for your suitability. Simply choose your desired settings and add the shortcode into the editor.
NB: The carousel shortcode inserts the format of the shortcode and leaves the content empty for you to fill in. Reasonably the carousel will contain other shortcodes or images which are best done in the editor first, and not inside the shortcode generator.
This shortcode allows you to setup all of your clients in either a column or carousel based layout. Simply select the desired number of columns, check whether or not you would like a carousel, and start uploading your images.
This shortcode allows you to display any pricing, plans, membership options or payment options you wish to arrange in an attractive manner. This shortcode comes with one option to choose. After you choose your desired number of columns, the shortcode will be inserted into your text editor, where can you edit as desired.
These shortcodes allows you to have control over where you want to show your recent content. You are given the configuration option to whether or not to display the titles that you indicated in the theme’s options panel.
Here is where you will control, adjust and produce all of the work associated items that you desire to place in your portfolio.
Categories that you create for your portfolio will spontaneously be added to the "Sort Portfolio" list.
NB: Remember to allocate your items into a specific category for your user to be able to sort through them.
Attributes will automatically appear below the description you created for the assignment on the "More Details" page. The attributes that you describe will appear in every single work item creation page for you to mark off all that is necessary. The convenience of this is you don't have to re-describe attributes that are reoccurring on projects.
It is imperative to understand how the portfolio works with the featured images provided.
NB: always upload your portfolio images at a minimum width of 800px. This will make sure that it appears attractive in different variation of screen sizes e.g. computer, mobiles and tablets. Moreover automatic resizing will take into effect in all places not including the “More Details" page displays in its totality.
If you need to show many images on a specified portfolio item, just attach a WordPress gallery in your editor and select the checkbox in the "Project Configuration" on whether or not to turn that gallery into a slider.
To feature a video for a project just fill out the video meta box with the associated information.
NB: Self-hosted videos require you to upload a .ogv and .m4v file formats as well as supply an image. Otherwise, If the video is hosted on Vimeo or Youtube, simply copy the embed code into the box and you're done,
If you wish to make use of the "Masonry Item Sizing" option, you must be careful of the sizes your featured images will get cropped at:
NB: Make sure that you use these sizes when uploading your images, otherwise the images will be out of proportion and won’t fit the grid as they are supposed to.
Custom page layouts can be used on any page simply by choosing the desired layout from the “Page Attributes” widget.
Your homepage includes 4 options for your page layout: Recent Posts, Recent Work and Slider.
Every layout will comprise of the home slider, the content you specify in the editor, and the recent applicable information below. See the Home Slider section of this guide for more info.
The portfolio page layout creates a attractive grid of all your projects. The grid is also re-organized via the “Sort Portfolio” button. See the Portfolio Post Type section of this guide for more information.
Custom page options are additional boxes that you will notice on every page you create or edit. This gives you more control on arranging your pages.
The “Page Header Settings” box allows you to arrange your page header in two ways. Either a regular clean title & subtitle, or a full width image background with the title & subtitle overlaid.
NB: The Page Header Settings will be disregarded for certain pages including: The blog page an all of the home layouts.
This theme is packaged with a couple of custom widgets for your convenience.
This widget shows a thumbnail of the featured image and date and operates the same as the core WordPress recent posts widget with the exception of the featured image and date.
The recent projects widget will display your chosen number of the most recent projects added to the portfolio post type.
In some circumstances extra functionality can be attained from the use of CSS classes that is if you know how to implement your own styling’s, for more information on this subject click here
To make use of a mega menu, navigate to the Appearance > Menus tab in the admin section and be certain that the "CSS Classes" are turned on in the screen options tab located in the upper right corner of your screen. When the required box is checked, you’ll notice an input field for "CSS Classes (optional)" in each of your menu items. As described in the screenshot below:
Simply enter "megamenu" and there you have it. You will be given the default amount of three column mega menu unless you specify one of the following in the second:
E.g. if you desired a 4 column mega menu, simply insert " megamenu columns-4" into your CSS class box (NB: insert without the quotes).
This theme supports & is intergrated with some of the top and most handy WordPress plugins that I thought you might like. Therefore if you desire to make use of the functionality of these categories, I recommend you use the following:
NB: Demonstrative Content will be included in the next short-term release. Thank you and sorry for the inconvenience.