Theme Installation

---

After purchasing Atomlab, please download the package from ThemeForest. All you need to do is moving your mouse over your login name at the right top corner – after you log in ThemeForest, and then click Downloads.

Here you will find all the items that you have purchased. Hover to Download button next to Atomlab, you will see these download options:

• Installable WordPress file only which you can upload when installing theme

• All files & documentation (full zip folder). You will need to extract and locate the installable WordPress file to upload when installing theme

You should choose to download all files & documentation as a child theme is included there for you to use later.

Install theme via WordPress

Step 1 - Navigate to Appearance > Themes

Step 2 - Click Add New, then click Upload Theme > Choose File

Step 3 - Navigate to the .zip file on your computer, then click Install Now

After activating, you should be redirected to the themes page with TM Atomlab activated:

Install theme via FTP

Step 1: Unzip zip file package – the zip package is inside Atomlab files folder you have downloaded from ThemeForest
Step 2: Connect to your FTP server and navigate to the folder where your WordPress is installed.

Step 3: Go to wp-content/themes/ and upload theme folder (the path will look like this: wp-content/themes/tm-atomlab)
Step 4: Open WordPress admin panel (navigate through the web-browser to the folder where you have installed the WordPress e.g www.yourdomain.com/wp-admin/) and go Appearance > Themes on admin sidebar. Activate Atomlab

IMPORTANT! After theme installation, at the top, you have a box with information about required and optional plugins. To install them and activate, please navigate to Appearance > Install Plugins section, and install only necessary plugins.

Plugin Installation

---

After activating Atomlab, you will see this notice:

Click Begin installing plugins. You will be navigated to Install Required Plugins page.

Simply check all of them (or all of required plugins and some recommended plugins you like) and from the drop down select Install, then hit Apply.

When finishing, it should look like this:

Required plugins: Insight Core, Visual Composer, Revolution Slider
Recommended plugins: Visual Composer Clipboard, Essential Grid, WooCommerce, Contact Form 7, MailChimp for WordPress, WP-PostViews

Plugin Configuration

---

---

---

---

---

---

---

---

Demo Installation

---

Our demo data import lets you have the whole data package in minutes, delivering all kinds of essential things quickly and simply. All you need to do is to navigate to Insight Core > Import. Hit Import this demo.

Have a cup of coffee. The process is within minutes.

When finishing, it should look like this:

Go to Setting > Reading > Front page displays and choose the page you like to be your front page then hit Save changes.

Common Installation Issues

---

If you run into trouble when installing Atomlab, please check out Common Installation Issues for solutions. If it's not there, please contact us for support.

Before Updating

---

1. It Is Always Recommended To Backup Your Current Setup
We recommend you have a current backup of your site. Simply go to Theme Options >> Import / Export and export your backup.

2. Do Not Keep Older Copies of The Theme In WP Theme Folder
You should completely remove all previous theme folders before adding the new updated theme folder. Don't just rename the theme folder. If you rename your theme folder when you update, then the path will be no longer valid. Because WordPress stores menus and widget settings and some other settings by folder path, you will need to rename your theme folder back to what it was before, then your settings, menus, widgets will be restored. So the total renaming process has no meaning.

3. Reset Browser Cache, Server Cache And Plugin Cache
It is always recommended to reset your browser, plugin, and server cache when you update. Visual issues may happen and more often than not, its caused by caches, and they need to be emptied. Each browser allows you to remove cookies, history and other data. If your theme or ThemeMove Core version is not updated after uploading the new files, it is due to a server-side caching system. Some hosting providers have server-side cache systems installed to optimize the speed of content delivery, please clear any server-side cache or ask your host to do it. This is also true for google pagespeed setups or cloudflare setups.

4. Update Child Theme
If you have copied template files from parent theme to child theme, please make sure to revert to parent theme first to confirm if the issue exists there too. If it doesn’t, please update the templates copied to child theme with the parent theme.

5. Required & Recommended Plugins Must Be Updated
When you update the theme, you will see a notification message in your admin telling you the required and recommended plugins need to be updated. Follow the onscreen prompts to install the plugin updates. We have listed some required plugins and they have to be installed and activated for theme features to work. Make sure you are always using the most recent version of these plugins. You will be prompted to install it upon installing or updating your theme. If you dismiss the prompt or do not see it, then you can go to Plugins >> Installed Plugins >> Update Available (if have) and update the plugins there.

Update Theme

---

Firstly, you need to download the new theme package from your Themeforest account. Once you have the new theme package, you can choose to upload the theme via WordPress or via FTP.

1. Update theme via FTP
Step 1 – If you have downloaded Installable WordPress file only, please unzip the tm-Atomlab.zip file. If you have downloaded the All file & documentation package, please unzip the tm-Atomlab.zip file and then unzip the secondary tm-Atomlab.zip file which will give a tm-Atomlab folder.
Step 2 – Connect to your FTP.
Step 3 – Upload the extracted tm-Atomlab folder to: wp-content/themes/. Just replace existing files and folders.
Step 4 – Lastly, update the included plugins. You will see a notification message letting you know the plugins have a new version and need to be updated.

2. Update theme via WordPress
Step 1 – You need to deactivate the current Atomlab theme in Appearance > Themes section by simply activating a different theme. Once you activate a different theme, you can delete the Atomlab.

Step 2 – Retrieve the tm-Atomlab.zip file from your new Themeforest download. If you download All files & documentation, then you need to unzip the archive file you received, the tm-Atomlab.zip file will be inside of it.
Step 3 – Then simply upload and activate the tm-Atomlab.zip file in the Appearance > Themes section like you've done when installing theme.

3. Update theme using Envato Toolkit
Step 1 – You need to generate an API key to link your WordPress site to your ThemeForest account. Login to ThemeForest, go to your dashboard and click on “Settings.” The API Keys screen allows you to generate a free API key.

Step 2 – Download Envato ToolKit, install and activate this plugin. A new menu item, “Envato Toolkit”, will appear in the admin sidebar. Click on the sidebar link and enter your marketplace username and secret API key. Click “Save Settings.” All of your theme purchases will now appear on this page after it refreshes.

Step 3 – The plugin will now alert you to theme updates – so long as you check the toolkit settings regularly. Click on install automatically beside each of your themes to automatically update them. The toolkit settings page also allows you to install themes that you haven’t already uploaded to your site, delete ones you don’t use and view version details. You can also set up theme backups.

WordPress Configuration

---

You can adjust WordPress settings as follows:

1. You can set Site Title, Tagline in Settings > General.

2. You can set Blog pages show at most, Front Page displays in Settings > Reading.

3. You can set Discussion settings in Settings > Discussion.

4. You can set Image sizes in Settings > Media.

We used the following sizes on our demo sites:
Thumbnail size: 150 x 150
Medium size: 300 x 300
Large size: 1024 x 1024

5. You should ensure that a non-default permalink setting is selected, e.g. Day and name in Settings > Permalinks.

Theme Options

---

Atomlab comes with advanced settings panel that is loaded with options. We have the options organized into logical tabbed sections, and each option has a description of what it will do on the front end. Because of the sizable amount of options Atomlab provides, we cannot go over them in full detail here in our documentation. We encourage you to please take some time and navigate through each tab to see what we offer. Go to Appearance > Customize on admin sidebar to access the setting options. See below for screenshot of our Customize panel.

Create A New Page

---

Step 1 – Navigate to Pages in your admin sidebar and click Add New option.

Step 2 – Enter a new name for your page, then find the Page Attributes box on right side to set your Parent or Template page.

Use Visual Composer To Build Page

---

Step 1 – Choose Backend Editor or Frontend Editor to edit your page. Backend Editor gives you the backend interface while Frontend Editor gives you the user interface. Visual Composer works with both.

Step 2 – Choose Add Element to start adding our premade elements to your new page.

Step 3 – Choose elements you want to add to your new page in the element box and start editing them.


Explore more about Visual Composer here.

How To Change Page Title

---

Step 1 – Go to Pages > All Pages. Then point at the page you want to edit. You will see the Quick Edit option.

Step 2 – Edit the title as you want. Delete the current slug. Then hit Update. It will automatically generate new slug for your page.

You can also edit some other options such as parent, template, status... If you want to edit more options, hit Edit instead of Quick Edit.

Page Templete

---

Atomlab provides a few Page Templates which support for specific needs of user. For example; you want a page without Header and Footer you can choose Blank Page. What you need to do it select it in Page section of WordPress admin.

Page template:

Blank Page: This is the Blank page template, when you use this, the header and footer will be removed.
Coming Soon 01: Use pre-made coming soon template
Coming Soon 02: Use pre-made coming soon template
Maintenance: Use pre-made maintenance template
One Page Scroll: Create beautiful full screen scrolling page

How To Select A Page Template

Step 1: Create a new page or edit an existing one.

Step 2: On the right side of the page, you'll find the Page Attributes box.

Step 3: Under the Template option, choose your desired Page Template from the dropdown field. To learn more about what each page template is for, please refer to the section above.

Step 4:b> Once finished, click Save Draft or Publish.

To customize Coming Soon 01, Coming Soon 02, and Maintenance navigate to Appearance >> Customize>> Maintenance


Select the Page Template and change the sections follow your demand.

Set Up A One-page Site

Set Up a One-page Site

---

One-page site is a smart function that let the user show all of your site’s information into one page which split into multiple sections. If you want to know how One page Site works please take a look in Landing product demo Here.

Create One Page Sites

Step 1: Create a new page or edit an existing one.

Step 2: Change to Classic Mode by clicking in Backend Editor

Step 3: Click Add Element >> Choose Row


Step 3: Click Edit this Row

You now see a table like this

Choose the type of Row Stretch you want and keep rolling down

Step 4: Name the Row ID and click Save Change >> Publish or Update


Step 5: Come to Appearance> Menus >> Create a new menu

Step 6: Find Custom Links in the left column

Step 7: Fill URL section by delete http:// and replace by #your row ID in step 4 >> Click Save Menu

Step 8: Back to the page you established and roll down to Page Option >> Header

Step 9: Change Primary Menu to the menu you create in step 5 and Enable One Page Menu

Step 10: Click Update to finish

Header

---

How to set the default Header Style?

Step 1: Navigate to Appearance from your admin dashboard then click Customize
Step 2: Find Header > General

Step 3: Choose the Header style you want in Default Header section. There are 20 different header styles for you to select from.
Now the chosen header style is set to be the default header of all pages. However, you can still a different header style for particular pages, blogs, products or portfolios by setting a style in each section.

Note: If you have imported the demo, the header of the landing page is fixed in page settings (we will discuss this later on in the Page section). Therefore, if you want to try setting up the default header style, you would have to create a new page.

Step 4: Click on Publish button to finish.

1.1.2 How to customize the Header style?

Step 1: Navigate to Appearance from your admin dashboard then click Customize. Next, hit Header. You can see a list of available header styles.

Step 2: Double click on the header style you want to customize.

Step 3: Set the configurations listed on the left sidebar.

Note: If you have imported the demo, you will not be able to see the changes you made because the page already had a fixed header style. For your convenience, refer to the following list to find the corresponding header style of each page.


'Header style 01' =>"App Presentation 02"
'Header style 02' =>"Coming Soon 02"
'Header style 03' =>"Coming Soon 01"
'Header style 04' =>"Product"
'Header style 05' =>"Agency"
'Header style 06' =>"Corporate"
'Header style 07' =>"Medical Clinic"
'Header style 08' =>"Shop 01"
'Header style 09' =>"Finance"
'Header style 10' =>"Creative Agency"
'Header style 11' =>"Blog Homepage"
'Header style 12' =>"Conference"
'Header style 13' =>"Support Center"
'Header style 14' =>"Portfolio Homepage"
'Header style 15' => Bonus Header style
'Header style 16' =>"Landing Page"
'Header style 17' =>"Startup 03"
'Header style 18' =>"Creative Studio Video"
'Header style 19' =>"Portfolio 02"
'Header style 20' =>"Blog Magazine"


Step 4: After customizing, do not forget to click Publish button to save your changes.

List of 20 Header styles:

How to use the Sticky Header?

A sticky header has its position fixed at the top of your webpage even when users scroll down to navigate the page. This allows users to quickly access the menu from any section of the page.

All you need is to hit Header Sticky then Header section.

Now you can enable or disable the Sticky Header.

In addition, you can also customize the height, padding top, padding bottom, color background, etc. of the Sticky Header.

Topbar

---

How to set the default Top Bar?

Step 1: Similarly, first, you need to go to Appearance from your admin dashboard then click Customize.

Step 2: Then hit Top Bar > General



You can see there are 2 types of Top Bar. You can customize them by clicking on Top Bar 1 button or Top Bar 02.





Step 3: Don’t forget to hit Publish before moving on.

1.2.2 How to customize the Top Bar Style?

Step 1: Navigate to Appearance >> Customize >> Top Bar

Step 2: Choose the Top Bar style that you want to customize


Step 3: Make all the necessary changes then hit Publish button to save your settings.

Page Title Bar

---

How to choose the default Page Title Bar?

There is only 1 Page Title Bar style, and you have 2 options to show or to hide it.

Step 1: Navigate to Appearance >> Customize >> Page Title Bar

Step 2: Choose General

Now choose to hide or show style 01.

In case you choose style 01, you can customize its title as belows.

For example: Search Heading

This is how the text you enter in this section will display on the search result page.


To hide Page Title Bar:


To show Page Title Bar Style 01:


Similarly, you can also choose a different Page Title Bar style for particular pages, blog pages, product pages and portfolio pages.

Note: If you have imported the demo, you won’t be able to customize the Page Title Bar in the landing page. Please create a new page if you would like to try to set a default page tittle bar style.

How to customize the Page Title Bar style?

Step 1: Navigate to Appearance >> Customize >> Page Title Bar

Step 2: Click on the Style 01



Step 3: Customize each section of this style. You can change its color, background, padding, font, etc.

Step 4: Hit Publish button to save the changes.

Menu

---

Create A New Menu

Step 1 – Navigate to Apperance > Menus in your admin sidebar and click Create a new menu option.

Step 2 – Give your menu a name, then hit Create Menu.

Step 3 – Choose menu items you want to add from the left and hit Add to Menu.
Then hit Save Menu

Your new menu has been created:

How to Edit A MenU

Step 1 – Go to Appearance > Menus on admin sidebar. From dropdown list, select a menu to edit then hit Select.

Step 2 – Rename menu name as you wish. If you want to add more menu items, choose them from the left and hit Add to menu.

With each menu item, you can rename or drag to make it sub-menu.

Remember to hit Save Menu when you finish editing.

How to create a Mega Menu

Step 1: Navigate to Mega Menu from the admin dashboard >> Add New Menu

Step 2: Give your menu a name

Step 3: Click Backend Editor button.

Step 4: Hit Add Element >> Find Row

Step 5: Choose the type of mega menu to be displayed by clicking on the second option of the top left section.

Step 6: Click “+” button to choose the element you need.

Here we have 5 tabs: Content, Structure, By Atomlab, WordPress Widgets, and Deprecated.

To create a Mega Menu like shown in the demo, choose By Atomlab >> Widget Better Custom Menu.


Fill in all fields of the Widget Better Custom Menu settings as belows:

Widget title: Name the title

Style: Choose a menu style

Style: Choose a menu style

Menu: Choose the menu you have created in Menus

Extra Class name: (optional)

Remember to hit Save Changes.

Step 7: Click Publish to apply the settings.

To add a new mega menu to your site, navigate to Appearance >> Menus then choose among available menus for a suitable place for your new mega menu:

After successfully creating your mega menu, you’ll need to add it to the Menus.

Step 8: Navigate to Appearance >>Menus

Step 9: Click on Select a menu to edit then choose the menu you want to add into the mega menu.

Step 10: Find the Mega Menus section

Step 11:Mark the menu you want to show then hit “Add to Menu”. You can drag then drop them to make them follow your desired order of display. Remember to hit Save Menu to save all of your changes. Note: You cannot add more than 1 mega menu in the parent menu section.

Create A New Slider

---

Step 1 – Navigate to Slider Revolution > New Slider.

Step 2 – Enter a Slider Name (1) and Slider Alias (2), and click "Save Settings".

Quick Note:

• Before saving, you can select several of the slider's settings from this page. But choosing these settings are not required to officially create a new slider, as they can be adjusted afterward.
• The slider's "Title" can be anything, but the "Alias" should not have any special characters or spaces (but dashes and underscores are ok).

Step 3 – You'll now be redirected to the plugin's main admin page where you'll see your new slider listed.

Hover to your new slider, a pen which means "Edit" will appear. Choose that to start building your slider.

Edit Your Slider

---

Step 1 – Go to Slider Revolution and hit the slider you want to edit.

Step 2 – Choose Main/Background Image if you want to change it, then hit Media Library or Object Library depending on where you want to get your image.

Navigate to other tabs: General Settings, Thumbnail, Slide Animation, Link & Seo, Slide Info, Nav. Overwrite to customize. You just have to follow those comprehensive instructions.
To setting the Slider, please read more in Revolution Documentation.

How to Add Slider in Page

---

There are 2 ways for you to add Slider in Page

Way 1: Create a new page >> WP Bakery Page Builder >> Plus button >> Choose Revolution Slider 5.

Way 2: Find Sliders section in Page Options box.

Revolution Slider: Choose the available slider you want.

Slider Position: There are 2 positions: Above Header and Below Header.

Create a Footer Style

---

Step 1: Navigate to Footer >> Add new


Step 2: Name the Footer style and change it from Backend Editor to Classic Mode
Step 3: Click to Add Element and find the element you want to appear in Footer.

Step 4: You can change the Effect and Styling in Footer Options box.

Note: There are 2 Footer effect; Normal and Parallax. Parallax is the effect that help footer rolls from below.

Step 5: Do not forget to Publish it.

Set Default Footer

---

Step 1: Appearance >> Customize >> Footer

Step 2: Choose the Footer style you want.


Note: If you have imported the demo, you will not be able to see the changes you made because the page already had a fixed footer style. Please choose a random page for example: Blog page to test it.

Step 3: Click Publish to save the change.

Note: In the case you choose specific Footer style in the Page Option then it will be prior.

How to Create Portfolio

---

Step 1: Navigate to Portfolio >> Add New

Step 2: Name the Porfolio
Step 3: Add the content of porfolio you need in the box

Step 4: Roll down to Page Options. You can customize all the sections here.

Single Portfolio style : You can choose the suitable style for your porfolio

Gallery: Add the image you want by clicking to Upload button.

Video Url: in the case you want to add video in thís page, you fill the link of video in this section. (The video from youtube and Vimeo only).

There are other section for example Awards, Team for you to use.

You also can add Feature image by upload image in the right box of the screen.

Step 5: Click Publish to save it.

How to Customize The Default of Portfolio

---

Step 1: Appearance >> Customize >> Porfolio

Step 2: You can see Portfolio Archive and Portfolio Single. Choose what you want to customize and click in it.

Step 3: Customize follow what you want.

Step 4: Hit Publish.

How to Create a Sidebar

---

Step 1: Navigate to Insight Core>> Sidebars

Step 2: Hit Add New Sidebar button.

Step 3: Name the Sidebar

Step 4: Hit agin to Add Sidebar

How to Add Widget in Sidebar

---

Step 1: Appearance >> Widgets. You can see all of the Sidebar here.

Step 2:Choose the Widgets you want and drag it to the Sidebar you want or click on it to choose the Sidebar.

In the case you want to delete its settings, drag it back.

How to choose Sidebar for a group of Page

---

Step 1: Appearance >> Customize >>Sidebar
Step 2: Choose the Sidebar you need for each type of page.

Important note:

Sidebar 2 can only be used if sidebar 1 is selected.

Sidebar position option will control the position of Sidebar 1. If Sidebar 2 is selected, it will display on the opposite side.

Step 3: Hit Publish to save the setting.

For individual page, you can choose the Sidebar in Page Option box.

Create A New Post

---

Step 1 – Navigate to Posts > Add New in your WordPress admin sidebar.
Step 2 – Create a title, and insert your post content in the editing field.
Step 3 – For setting the type of your post, just choose from the Format field on the right sidebar.
Step 4 – Add Categories from the right side. Categories is meta information you create for the post. Each category is a meta link that your viewer can click to view similar type of posts. To assign it to the post, check the box next to the Category name. You can also access and edit Categories from the Post sidebar item in your WordPress admin sidebar.
Step 5 – Add Tags from the right side. Tags is meta information you create for the post. Each tag is a link that your viewer can click to view similar type of posts. Type the name of the tag in the field, separate multiple tags with commas. You can also access and edit Tags from the Post sidebar item in your WordPress admin sidebar.
Step 6 – For a single image, click the first Featured Image Box, select an image and click the Set Featured Image button.
Step 7 – Once you are finished, click Publish to save the post.
Here is the screenshot that shows the various areas of the blog post page:

Create a Category

---

Step 1: Post >> Categories

Step 2: Name the category and fill to other section below.

Step 3: Hit Add New Category . Your new Category will aprear in the table of all category immediately.

Similar to Category, you can create a new Tag in the same way.

Create a Blog Archive Page

---

Step 1: Come to Page >> Add New

Step 2: Name the Page and change from Backend Editor to Classic Mode. Step 3: Choose Blog element.

Step 4: Fill all the options in Blog Settings table, especially choose the Blog Style you want.

Step 5: Hit Save Changes to finish.

Step 6: Customize Page Options in WPBakery Page Builder.


Step 7: Hit Publish to save your page.

Set Up An Online Store

---

In this section, you’ll learn to set up an online store with WooCommerce plugin
Step 1 – Be sure that you’ve installed WooCommerce. Check the plugin section.

If you haven’t install or activate WooCommerce, get back to Plugin Installation section.
Step 2 – Configure general settings for your WooCommerce store such as currency, tax, checkout, shipping, etc. by navigating to WooCommerce > Settings

Step 3 – To create new order: Hit Orders > Add Order.

Step 4 – To create new Coupon: Hit Coupons >> Add Coupon.

For more settings of WooCommerce, click here.

Customize Your Online Store

---

Navigate to Appearance > Customize > Shop. Here you will see three tabs: Shop Archive, Product Single, Cart page.

What Are Common Installation Issues

---

When you install Atomlab, you may encounter some problems. Check for clarifications here.

How To Change Color

---

First, you need to go to Appearance > Customize > Site. These are parts that have color options: Main Color, Link Color...

How To Change Site Indentity

---

Hit Apperance > Customize > Site Indentity.

Edit the site title and hit Save & Publish.

How To Edit A Widget

---

Hit Appearance > Widgets. Choose a widget you want to edit.

Then choose its area as you wish and hit Add Widget.

Then go to the right where you will notice a just-added widget. Type information and hit Save.

How To Change Logo

---

Hit Appearance > Customize > Logo. Here you can set your default and mobile logo.