Limitless – Multipurpose Drag n Drop Theme

This section covers on how to setup the basics of theme. There are two ways to install a theme into WordPress, we will cover both.

  1. Download the zip package from Themeforest and unzip it.
  2. Inside that you will find a zip folder called limitless.zip
  3. Go to Appearance -> Themes on WordPress Dashboard, Click on Install Themes Tab
  4. Click Upload, and navigate the file limitess.zip
  5. Click Install
  6. Sit tight, It take some time!
  7. After Installtion done, Click Activate.
  8. Now The most advanced WordPress themes in installed into your WordPress!
Installation

Sometimes this doesn’t work, for that we have to load the theme manually.

  1. Download the zip package from Themeforest and unzip it.
  2. Inside that you will find a zip folder called limitless.zip
  3. Unzip it again!
  4. Login to your FTP, and copy that unzip folder in to your wp-content/themes folder
  5. After finish moving.
  6. Go to Appearance -> Themes on WordPress Dashboard, Click on Activate
  7. Now The most advanced WordPress themes in installed into your WordPress!

Once the theme has been activated, there are certain plugins that are required to be activated to enjoy full benefits of limitless. The plugins are optional and limitless will work perfectly fine without them. Follow these steps -

  • Click the button in the 3rd window(plugins section) , it will take you to a page where it will show a list of plugins needed to be installed.
  • Click Install.
  • Once Installed , it will ask you to activate them and that’s it.
  • From here you can goto Installer located in Admin Panel -> Advanced Tab -> Misc Sub Tab or follow steps below to setup up theme manually.
After Installation
  1. Create a Page, and name it as Home (or whatever you want)
  2. Goto Settings -> Readings
  3. Set your Home page in Front Page Displays => Front Page = The Created Page in Step 1
  4. Additonally you make want to add menu without touching header constructor. For that goto wp admin then to menu page. Create a menu and add menu items.
  5. Scroll down below and tick Top Menu Holder 1, menu holder. That will show the menu on the top area.

Header Constructor gives you the power to build your header to your needs. Pour your creativity.

To open up Header Constructor, Go to Theme Admin -> Builders -> Header Constructor, Additionally we have Header Constructor per page. The working of header constructor on page is same as the one in Admin Panel.

The Head Area is divided 3 parts -
  • Top Bar- It is the top most bar and designed to be smaller than other areas and has a darker background.
  • Menu Area – This is the middle and main area, by default menu and logo are present in this region.
  • Bottom Bar- It is similar to menu area but divided from the rest by a border.
Pointers
  1. You can toggle the visibility of the menu by clicking eye icon.
  2. You can extra vertical spacing to menu areas, by adding the amount of space you want in VERTICAL SPACE textbox.
Components What it actually do!
You can add text using this component you can set its top, bottom, left and right margins.
The logo that set from Options Panel -> Dashboard -> General Settings -> Logo Settings will display here.
Top Menu 1. Set Top Menu Holder 1 and Top Menu Header 2 in Appearance -> Menu -> Theme Locations.
Your Blog’s Tagline will display using this component. Taglines are set in Settings -> General -> Tagline.
Ajax Search box will display..
You can add a variety of Social networking links there.
Top Menu 2 . Set Top Menu Holder 1 and Top Menu Header 2 in Appearance -> Menu -> Theme Locations.
  1. This picture explains how the vertical spacing works.
  2. This Picture explains how the Margin works.

The Header loaded like this.

To Add a component drag to the area you want to show. To remove it , drag it back to the components area.

Template Chooser

In this Area, you can choose which template you want this for page. You can choose a variety of template from this. 8 Blog Templates, 12 Portfolio Types, 2 Contact Form Types, Sitemap and Custom Post Types.

 

Page Options

Options What they are for!
Title Area Settings. Here you can choose the title and subtitle area to show/not, It’s font, font-size, Background style, colors, Animation for the Title area.
Layout Settings Here you can choose how the page layout looks, like a page with Sidebar, or a full width or with a sticky sidebar, or a sidebar on top/bottom. An option to Choose Which Sidebar to show is also present here.
Dominant Color This color is used for the dominant color for the hover on featured image of that post to make it unique.
Media. Here you can set Which layered slider to be set or an option to select the featured image or a Slider using the images upload in Slideshow/Slider Images tab(marked as number 6)
Header Constructor. You can create a seperate unique header for the page, the same steps as mention in Header Constructor.
Slideshow/Slider Images You can upload multiple images for the slider in Media Tab.
SEO Settings Here you can put meta keywords, meta describtio, and SEO title for the page.
Portfolio Settings If you choose one of the 12 Portfolio Template, you can tweak its setting here. Like Filtering Portfolio items using our Awesome Query Engine
Blog Settings If you choose a blog template from the Template Chooser, you can tweak its setting here. Like filtering the posts, add post bar, etc.,
Custom Post Type If you choose the Custom Post Type template from the template chooser, then you can tweak its setting here. Like which custom post type to show on the page, also filter its using the Awesome Query Engine.

Setting Featured Media

Limitless Provides you with 12 featured media types. Here is a basic primer on that.

  1. By default featured image is the default featured media which is set from bottom right corner “Set Featured Image”.
  2. You can change this from custom page settings area , click on media tab.
  3. To use slider or gallery, you will need to add images. For that goto slideshow/slider images in same custom page settings area.
  4. Add your images here. Now you show slider or gallery related featured media.
  5. By Default all media elements have fixed height which is set from media tab only. To enable natural height of images, set adaptive height to yes.

Using Revolution Slider

Once revolution slider has been activated in Limitless, in the media tab in custom page settings a dropdown appears from where you can select the revolution slider to show as featured slider.

  1. Create a page. By visiting Pages -> Add New
  2. Choose a blog template using the Template Chooser (a button below the title and above the post editor)
  3. Go to Custom Page Options (Below the Post editor)
  4. You can set any options you want there.
  5. Especially, the Blog Settings. Here you can add a filter to filter the blog using the Query Engine.
  6. For ex: If you want to show only one category on the blog
  7. Click Filter button, and choose a category in “Select Category(if none is selected all categories will be included)”
  8. Click Save Changes.
  9. Publish the Page
  10. You are done!

Dominant Mode allows you to add a unique touch to your portfolio items or posts. In this you set a background color and a opposite color. This color show off in templates, like on hovers in portfolio columns. You can find dominant color in custom page settings in edit post/portfolio in dominant color tab.

If you do not want to use it, click cross in the color picker field and it wont appear.

  1. Create a page. By visiting Pages -> Add New
  2. Choose a Portfolio template using the Template Chooser (a button below the title and above the post editor)
  3. Go to Custom Page Options (Below the Post editor)
  4. You can set any options you want there.
  5. Especially, the Portfolio Settings. Here you can add a filter to filter the Portfolio using the Query Engine.
  6. For ex: If you want to show only one category on the portfolio
  7. Click Filter button, and choose a category in “Select Portfolio Categories”
  8. Click Save Changes.
  9. Publish the Page
  10. You are done!

  1. Create a Portfolio Item. By visiting Portfolio -> Add New
  2. Choose a Single Portfolio template using the Template Chooser (a button named “Set Custom Template” below the title and above the post editor)
  3. Go to Custom Page Options (Below the Post editor) You can set any options you want there.
  4. You can Add Extra Fields to Portfolio.
  5. For ex: If you want to show the portfolio details like Client, Release Date, Technology Used
  6. You can Add Portfolio Extra fields in Theme Admin -> Portfolio -> Single Portfolio Options -> Enter Portfolio Extra Fields Separated by ; = Client; Release Date; Technology Used
  7. Refresh the portfolio page
  8. Add the extra field Values
  9. Hit Publish!

Media Manager allows you to create slider and or galleries. Using it is extremely easy.

  1. Go to Theme Admin -> Media
  2. Give a Slider Name, Click Create Slider.
  3. Click the Pen Icon in the left side of the slider name you just create.
  4. Click Add Slides (To Select Multiple Images hold down control key or cmd for MAC. To select in a row in a single click, hold down shift click on first image then click on last image you want.)
  5. You can edit the image alt text and the caption, by hovering the image and click Edit.
  6. In the Options Tab, you can tweak the whole slider settings.
  7. In the select media type you can select slider variations or gallery.

Here you can create you own content types (Own Post Types, no need of a plugin)

  1. Go to Theme Admin -> Content Types
  2. Enter the Post Names and Click “Create Custom Post”
  3. Click the Pen Icon in the left side of the Custom Post name you just create.
  4. Enter all the necessary texts.
  5. You can also Add Meta Boxes in the Meta Box Tab.
  6. Click Meta Boxes -> Add Meta Box -> Click the Pen Icon -> Enter the Details -> Choose a Input type (Text field, textarea or a Upload field). You can also give a default value for text and text area fields.
  7. For Example: If I create a Movie Post type.
  8. I can create meta boxes like Movie Length, Movie Rating (PG, PG-13 etc.,) in the Meta Boxes with a Input type of text field and some default value
  9. Save Changes.
  10. Back to Dashboard.
  11. All Set to go for the newly created Post Types! :)

As soon as the custom post type is created, it becomes available to all the widgets, Rad components and shortcode which supports showing posts in any manner.

To show custom posts in a template -

  1. Create a new page.
  2. Open Set Custom Template Section, by clicking on the button Set Custom Template above Editor.
  3. Set the last template, that is Custom Post Template.
  4. Now Scroll down to the custom page settings area and open the Custom post settings tab.
  5. In the dropdown, select the post type you want to show. Additionally you can set no of posts and filter them using Query Engine.
  6. Hit Publish, That’s it.

RAD Builder is an extremely easy to Builder. To activate RAD editing you can do that from either WP Admin dashboard, by clicking on RAD Editor. Or you can go to page click on RAD Live Editing button just above editor. Unpublished pages will not have that button enabled !

To add a widget drag it on the website, A lightbox will pop up with options. You can play with it until you get the desired result. You also adjust the widget from top right corner of lightbox.

To sort the elements click on Power Sort. This makes the widgets sortable.

You can also add containers to create logical divisions, they are extremely useful when used with RAD styler.

Each Widget and container on the page created by RAD Builder can be styled individually. For that goto Visual tab , then click on the element or container you want to styler and start styling. You can discover so much this amazing just by playing with it.

Enigma styler is an amazing and very easy to use visual styler. To open in , goto WP Admin dashboard, click on Enigma Styler. Once it is opened. You can select the panel you want to style, open and start styling !

Enigma Styler, also provides way of saving style templates. So you can maintain revisions. To create the template enter you template name and hit create. It will create and make that template as active template. You can also export or import styles.

  1. Goto WP Admin Dashboard
  2. Click on Enigma Styler Link
  3. When it opens, near the delete button. There is import/export button ( one with cloud icon. ).
  4. Click on it , A lightbox opens. Open style file, copy all text and paste it in Add Text from Template to import text box and click import.
  5. Once imported, it will appear in select template dropdown. Select and click load to activate it.

Enigma Styler, also provides way of saving style templates. So you can maintain revisions. To create the template enter you template name and hit create. It will create and make that template as active template. You can also export or import styles.

17. Credits.

We would like to thank you to awesome people , who have shared some amazing resources with the community.

Images -
  • Free Images from unsplash.com
  • Stock Images from Photodune and Fotolia
  • Icons on Home page from Media Loot
JS Scripts -
  • Charts from www.chartsjs.org
  • Twitter Bootstrap
  • BX Slider http://bxslider.com/
  • Isotope Plugin www.isotope.metafizzy.co
  • Prettyphoto lightbox http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
  • jQuery Transit ricostacruz.com/jquery.transit/
  • Easy Pie Chart http://rendro.github.io/easy-pie-chart/
  • Waypoints http://imakewebthings.com/jquery-waypoints/
  • HoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html
  • jQuery Easing http://gsgd.co.uk/sandbox/jquery/easing/
  • jQuery Bower https://github.com/ded/bowser
CSS -
  • Animate.css http://daneden.me/animate/
  • Font Awesome www.fortawesome.github.io/Font-Awesome/
  • Entypo http://www.entypo.com/