Introduction

Thank you for purchasing our product! We are very glad that you have decided on our Megalith WordPress Theme.

This documentation will help you to set up and use the Megalith WordPress Theme. The theme is very easy to use and we are here to guide and help you, so please read and follow the documentation, if there are some other issues you want to discuss then do not hesitate to contact us on support@teslathemes.com. This documentation is more of a reference work if you do not know what to do, or if you are not familiar to WordPress.

Please read the following very carefully as it will help you set the theme up, we have gone through the setup process multiple times and provided the best possible instructions.

We strongly recommend you to use a fresh install of WordPress and integrate your content into the pages according to the documentation. Of course, you can try to implement the theme into your current WordPress, but we will not provide in-depth support for it. The theme has specific settings that may conflict with your current setup of categories, plugins, javascript use, and more.

We wish you good luck in your work with Megalith WordPress Theme, and of course we would love to see your website and what you come up with by using this theme.

The theme is very easy to use and we are here to guide and help you, so please read and follow the instructions and if you have further questions write us a email support@teslathemes.com. This documentation is more of a reference work if you do not know what to do and need a better understanding on how the template is built write us an email.

Note: You can click on small images to zoom in and then move the mouse to the position you need.

Browser and Devices support

Since Megalith is built on Bootstrap 3 framework, it supports the same browsers as Bootstrap.

This template is responsive and should look fine on all standard mobile devices.

browsers

Installing WordPress

To start working with Megalith you need to have WordPress installed on your server (local,dev or production)

Step 1: Download and Extract

Download and unzip the WordPress package from Download Wordpress.

Step 2: Upload

Copy the extracted contents of wordpress zip to the corresponding path of the server. Make sure WP has permissions to write the folder it is located in.

Now when accessing the corresponding URL you should see the following message:

Wp first

Step 3: Edit the Configuration File

Auto Mode: After clicking on "Create a configuration file" then "Let's Go" you will get the configuration page:

Establishing a connection

If the information is correct and everything works fine you will receive:

Successful

If it's successful then skip the "Manual Mode" if not, follow the instructions bellow.

Manual Mode: You can either rename the file wp-config-sample.php to wp-config.php on your local machine or on you server (you'll still need to tell WordPress your database information).

Open wp-config.php with a txt editor and enter your database information under the section labeled:

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'wordpress');

/** MySQL database username */
define('DB_USER', 'root');

/** MySQL database password */
define('DB_PASSWORD', 'root');

/** MySQL hostname */
define('DB_HOST', 'localhost');

/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');

/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');

After the information is edited upload the file to the server.

Step 4: Site name and login data

If it's all sparky then you click Run the Install and fill all the lines shown bellow:

Login Information

This being the last step you will see a success message.

Success

Click Log in and now you can proceed to you site. Now you can go to installing your Megalith WordPress Theme.

Installing Theme

To install the Megalith WordPress Theme you will need WordPress v3.6 or newer.

Option A

Follow the steps and upload the Theme's installation zip file through the WordPress admin backend:

  1. Download the theme archive, Megalith.zip
  2. Unzip the theme archive
  3. Find the installation file, Megalith.installation.zip
  4. Go to your WP admin – Appearance – Themes – Add New – Upload Theme – Choose file
  5. Upload the Megalith.installation.zip file.

upload

Then, when prompted activate the theme.

Note: If you can't get passed the file upload limit and/or if you get an error message mentioning exhausted memory size or something in those lines, you could try to increase that limit by adding to the "wp-config.php" the following line of code:

define('WP_MEMORY_LIMIT', '64M');

Option B

Uploading directly to the Server:

  1. Download the theme archive, Megalith.zip
  2. Unzip the theme archive
  3. Find the installation folder, Megalith
  4. Connect to your server via FTP or any other way that will allow you to explore and upload files directly.
  5. Navigate to your WP Installation Folder/wp-content/themes/
  6. Upload the Megalith folder here.

If everything went well in Option A or B, the theme should appear under Appearance → Themes like shown below:

cover

Then, when prompted activate the theme. Or go to Appearance->Themes and press the Activate button next to the theme.

Now you are ready to customize your theme.

Blog & Front Pages

Create a page that will serve as homepage - In wordpress admin panel under Pages → Add New, name it for example "Front Page Default". Also, select "Home" as the template used by the page.

Create a page that will serve as the archive page of blog posts - In wordpress admin panel under Pages → Add New, name it for example "Blog". Make sure that the permalink slug is "blog" only. Also, select "Default Template" as the template used by the page.

Set the front page to display as a static page: - Go to Settings → Reading → A static page (select below) → Front page: → Choose your page from the drop-down menu.

Choose your posts page from the drop-down menu. It should be the "Blog" page we have just created.

Your page should look something like:

home page

Tesla Framework

FW tour

All our themes are powered by Tesla Framework ( Tesla Framework Tour ), a powerful administration tool that comprises all our great features and allows you to easily customize the look and functionality of your theme, without advanced knowledge of programming. It gives you the possibility to customize and manage your theme settings from a dedicated area within your Wordpress Admin. Tesla Framework works smoothly, is intuitive and easy to use, once you install one of our themes you will be able to personalize its logo, site background and color, SEO options, social media networks and more; all from one place.

Our Framework is in continuous development and improvement process, we are working hard to provide you an easy administration tool, and we're guided by the latest UX trends and new technologies.

To personalize your theme you need to follow the instructions below.

Note: Options will vary from theme to theme depending on their features.

General Settings

TeslaThemes framework is a powerfull tool that helps to customize your project. Bellow is described all options step by step.

Please understand that all options from framework will be applied globally. In case if you need to change local option such us color element, please use element's options or custom css.

General Options

General Options section

This section has three options that help you to set general view of your project.

  • Option 1: Layout style

    It is the switcher between Wide view and Boxed. This theme has set by default Wide view

  • Option 2: Favicon

    Provide your custom favicon. For best result, we advice you to upload a *.png format between 128 - 16 px (as square).

  • Option 3: Background Settings

    Set background for main project container. Common for boxed view.

Typography

In some case, may need to change typography. You can edit body, a, h1-h6 text color and font anf font-size.

Site colors

For better results we recommend to read this article Web Typography

  • Option 1: Global Typography
  • Option 2: Links Style
  • Option 3: Headings style
Please make sure that you set your type according with visual hierarchy rules.

Customize Defaults

This section is for set up the general color scheme. Megalith has two base color.

SEO Social

The philosophy

Teslathemes changed theme building philosophy. Now we develop a frontend framework, to help developers to reduce time and optimize the theme, also help users to customize their project by himselfs without extra help.

Theme "Megalith", have two base colors. Those colors was used for all our UI elements.

  • For background we have CSS clases:
    .bg-alpha - #ee1d24
    .bg-beta - #555555
  • For text color:
    .text-alpha - #ee1d24
    .text-beta - #555555

Those classes can be used an any HTML element

Header

In our framework we added a section to customize your project header.

Additional Options

Main changes possibile for the headers:

  • Header color
  • Navigation settings
  • Identity settings

Footer

You can edit your project footer as well. Bellow you will find options that can be handy to feet your needs.

Contact Info

Settings available:
  • Option 1: Footer copyright

    Set copyright stuff and other info about your project.

  • Option 2: Footer social networks

    You can show the social networks footer bar by adding URL to your community

On each page you can have switcher between show and hide main footer. This option is handy when you want to use your custom footer.

404 Error

Customize 404 error page very eassy with this options.

Subscription

Developer

Section for hardcoded customization. Here you can drop your cusom CSS or JS. Also, if you using Twitter shotrcode it must to have set your Twitter App.

Typography

Note: This option is a Global one and will affect entire project.

Subscribers

If you use the subscribe for on your project, all incoming data will be showed in thie section.

Subscription

Export/Import Options

To clear, export, import options for the settings explained above, go to WP Admin -> Tesla Theme -> Export/Import Options.

Export/Import Options

Clear Options: Restores all the inputs to default values. You will lose all customization made in the theme options tabs.

Import Demo Options: Imports the options predefined by our developers as seen on demo page.

Note: Importing demo options will not make your website look entirely as on our demo. You still need to import demo content and use specific plugins and widgets if theme requires so.

Export Options: Saves the current options to a file. This file can be later used to import options as described below. Useful when migrating to a new server.

Import Options: Loads options from an earlier exported file.

Warning ! Importing or clearing options will erase your theme current settings from Tesla Theme page . Make sure you make a backup first by "Exporting Options".

Import Demo Content

To import the content that is used on our demo page, go to WP Admin -> Tesla Theme -> Import Demo.

Import Demo

Warning ! Importing Demo Content will add posts and media files to your wordpress. It is not recommended to do it if you already have your own content. It would be better if you back up your data before importing the demo content.

Some error may happen due to permissions or repeating media. If the final message is green and successful just ignore them. If it fails or takes longer than 15 min to load please contact our support team and send the WP + FTP credentials.

Theme Updates

Warning ! You will lose all the customizations made in the parent theme if you make this update. Make sure that you work with Child Theme to keep the customizations during updates.

Wordpress will check for updates each hour and our themes will be displayed on the WP's updates page automatically.

To check for updates manually go to WP Admin -> Tesla Theme and at the top click on the Check Updates button. If there are updates, the newest version will be displayed and the "Go to updates page" button will appear, clicking on it will lead you to the Wordpress' updates page.

Theme Updates

Note: Click on View Changelog before updating to see what has been added or changed.

Select the checkbox next to the Tesla Theme and then click on Update Themes

Theme Updates 2

If you get any errors during this process please be sure that WP has permission to write in /wp-content folder.

Custom Posts & Shortcodes

Custom Posts

To ease the process of creating a website our TeslaFramework combines Theme Options, Custom Posts, Shortcodes and Templates.

Most of the custom posts are linked with a shortcode that you can use on any page. Some will need a specific page template to be called on. Others have their own placement and will be used as content for static locations.

The best way to understand and start working with our custom posts and shortcodes is to Import Demo Content and modify it.

Next we will explain each custom post in part. It's parameters and limitations of use. But don't be afraid to experiment.

Note: In the following screens, the colors from WP Admin match the generated content on the frontend.

Theme Philosophy

"Megalith" is a theme based on "Visual Composer" and "Revolution Slider". Those plugins give you opportunity to customize the theme without any coding knowledge. By the way, theme can be used as well without this plugins, by we recommend to have it.


This theme has three custom posts, tons of shortcodes

Custom posts:
  • Portfolio
  • Testimonials
  • Timeline
Shortcodes

All shortcodes via Visual Composer are self explained and if you need our help you can use our support forum.


Page Structure

All pages from "Megalith" theme was built trough Visual Composer plugin. To understand better, we recommend you to import demo content and switch Visual Composer to "Classic mode" and you will descover regular shortcodes.

To customize the theme we prepare couple CSS helper classes:

Available helper CSS classes for better experience with Megalith theme
Class Name Action
text-left Move text to left
text-right Move text to right
text-center Center align text
uppercase Text Transform: all caps lock
text-alpha Set for primary color
text-beta Set for beta color
text-white text color white
align-left Floating element to left
align-right Floating element to right
align-center Center element
bg-alpha Fill background with primary color
bg-beta Fill background with secondary color
bg-black Fill background with black color
bg-white Fill background with white color


Please see how is look a page builted with Visual Composer

test

Shortcodes

Visual Composer

vc

Visual Composer for WordPress is drag and drop frontend and backend page builder plugin that will save you tons of time working on the site content. You will be able to take full control over your WordPress site, build any layout you can imagine – no programming knowledge required. Moreover, now you can choose either work on a backend or move your page building process to frontend and instantly see changes you make.

Have you ever noticed how much time you spend fighting with [shortcodes]? No more trial and errors with “shortcodes magic” – Visual Composer will take care of that.

With the Visual Composer your are able to work with responsive design – check out how you website will look on mobile devices during page building process with one click only.

Add columns, rows and choose from 40+ predefined elements divided in logic groups with single click, by using intuitive and handy UI. Then simply use your mouse to drag elements around to re-arrange them. Or use your creativity and skills to extend Visual Composer with unique elements by using our developer API.

Visual Composer is #1 Best Selling drag and drop frontend and backend page builder with 70k+ websites already powered. Join now and create beautiful websites in shortest possible time and with minimum efforts and of course – no coding and [shortcodes].

For more information about Visual composer you can find here: http://kb.wpbakery.com/index.php?title=Visual_Composer

Shortcodes Available in Visual composer

shortcode
  • Row

    Insert Row

  • Text Block

    Insert text using default editor

  • Separator

    Insert horizontal line

  • Separator width text

    Insert header with line

  • Message box

    Insert Alert box

  • facebook, Twitter, Google+, Pinterest

    Insert social sharing buttons

  • FAQ

    Insert FAQ toggle

  • Single Image

    Insert single image

  • Image Gallery

    Insert gallery

  • Image carousel

    Insert carousel

  • Tabs

    Insert Tabs

  • Tour section

    Insert Tour section

  • Accordion

    Insert Accordion

  • Post grid

    Insert Post grid

  • Carousel

    Insert Carousel width posts

  • Posts Slider

    Insert Posts Slider

  • Widgeted sidebar

    Insert Widgeted sidebar

  • Buttons

    Insert Buttons

  • Call to action

    Insert Call to action

  • Video player

    Insert Video player

  • Google Map

    Insert Google Map

  • Raw HTML, JS

    Insert Raw HTML, JS

  • Flickr Widget

    Insert Flickr Widget

  • Progress bar

    Insert Progress bar

  • Pie chart

    Insert Pie chart

  • Revolution Slider

    Insert Revolution Slider

  • Empty Space

    Insert whitespace with custom height

  • Custom Heading

    Heading text with lot of options

  • Member

    Team member

  • Counter fact

    Counter facts

  • Dribbble feed

    Dribbble feed

  • Subscribe form

    Subscribe form

  • Fancy list

    Create lists with icons as bullets

  • Testimonials

    Show testimonials

  • Portfolio

    Show portfolio

  • Knob

    Show portfolio

  • Pricing table

    Pricing table

  • Contact form

    Contact form

  • Twitter

    Latest tweets

  • Vector map

    Display vector map

  • Custom Header

    Used to change header view. Best for one-pages

  • Timeline

    Show timeline




Revolution Slider



revslider

Create a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page! Customize this slider with our convenient drag&drop backend to your very needs.

This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects.