Atiframe – is an Online Business WordPress Theme

The documentation is intended to help you to install and setup Atiframe theme. If you have any problems, please send us ticket and we'll help you troubleshoot and solve the issue!

Minimal Requirements for Theme

  • - Wordpress 4.1 or higher.
  • - PHP 5.4 or higher.
  • - MySQL 5 or higher.
  • - PHP.ini settings:
    • - max_execution_time 30
    • - memory_limit 128M
    • - post_max_size 32M
    • - upload_max_filesize 32M

We recommend to use the latest version of WordPress and online version of the documentation.

How to Install WordPress

Installing Wordpress Instruction at WordPress Codex

If you are beginner with WordPress, we recommend that you explore the WordPress Codex

How to Install The Theme

There are 2 way to install WordPress themes – via WordPress admin and via FTP

1st way: Upload via FTP Server

1. Download archive with the theme on your Themeforest account.

2. Unzip archive atiframe-installable.zip and upload it into your WordPress Theme directory /wp-content/themes/.

3. Open the WordPress admin panel by going to www.your_domain.com/wp-admin/.

4. Go to Appearance > Themes on the sidebar.

5. Activate Atiframe theme.

Video

2nd way: Upload via WordPress Admin

1. Open wordpress admin panel (navigate through web browser to the folder where you have installed the WordPress e.g www.your_domain.com/wp-admin/) and go Appearance > Themes on admin sidebar..

2. Click on the Add new button.

3. Click on the Upload Theme button.

4. Click on the choose file button, select "atiframe-installable.zip" and click Open, and than Install Now button.

5. Activate Atiframe theme

Install Plugins & Content: 1 click installer


Acivate the theme.

Install SecretLab Installer plugin.

On the Appearance -> Atiframe page, choose version of design that you want to install and click Start installation button.


Go to Theme Options and save settings. All done!

Video of automatic installation process

Manual Theme Install

If you cannot finished automatic installation and got any server errors, you can use manual installation. There are step-by-step installation functions - just click and wait. There are 6 steps. Every step can be done automatically by button Do it or manually by link (if it couln't be done automatically).

You can continue installation process from step that got error.

Files for full manual installation is contain at folder /atiframe/import/.

1. Click 1. Begin installing plugins

Select all plugins, choose Install and click Apply.

2. Click 2. Begin activating plugins

Select all plugins, choose Activate and click Apply.

3. Refresh the page.

4. Click 4. Import Sliders on Atiframe page. Click Import Slider on the screen that comes up.

5. Click 5. Import Theme Option Set on Atiframe page. Open file with theme option settings in the /import/name_of_design/ folder. For example, /import/name_of_design/theme-options.json. Copy all text data, click button import from file, paste the data into the textarea, and click Importbutton.

6. Click 6. Import Dummy Data on Atiframe page. Choose the dummy_data.xml file in the /import/name_of_design/ folder. Choose the one you need, select the xml file, click Upload file and import

When import process finished you can see inscription All done. Have fun!.

If you receive either the Request Timeout or 500 Server Internal Error it means the import process was unable to finish for 1 step. You can solve this in the way:

Press key F5 (refresh page) and click button Resend data if your browser prompts you to do so. This second option may take 10 to 15 repetitions to complete.

After the import process completes, you will got a screen like this:

7. Click 7. Import Widgets, choose file with widgets - widgets.wie file and click Import Widgets.

Theme Update

Before you are start to update theme, make data backup please.

There are 2 ways to update the theme:

1. Update by Update tab on Atiframe page.

- Make token and set in to the token field.

- After theme update, deactivate and and delete plugins Layer Slider, Revolution Slider, SecretLab Shortcodes, SecretLab Stack, King Composer, KC Pro and install it via yellow message at the top of admin page. The message appear when you delete some required plugins.

- After theme update go to Theme Options and click button "Save changes".

2. By FTP

- Download installable archive with theme from ThemeForest.

- Upzip atiframe-installable.zip on you computer and unpack it.

- Upload /atiframe/ folder at your hosting by ftp into /wp-content/themes/ folder. And say "Yes, replace all files".

- After that - go to Theme Options and click button "Save changes".

- Update plugins from folder /atiframe/lib/. You need to update Layer Slider, Revolution Slider, SecretLab Shortcodes, SecretLab Stack, King Composer, KC Pro.

Troubleshooting

If you get any error - check please your php error server logs.

If you cant get access to php error logs, go to wp-config.php and find a line with define('WP_DEBUG', false);. Replace the live with:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

After this, go to page when you get error, refresh it. And if you get error again, go to /wp-content/debug.log to read information about the error. When you know what is the problem, you can solve it or send message to your hosting to fix it.


Cant change color scheme?

These colors from color scheme savings into CSS-file after you click "Save Changes" button at theme options. If color scheme doesnt changes, check writable permission for file and folder for CSS files:

/wp-content/themes/atiframe/
/wp-content/themes/atiframe/style.css

It should be 755 or 777 for folder and 644 or 666 for file.


Contact 7 Troubleshooting

Be sure that you are set the form properly like this:

If your message doesnt sent by form, ask you hosting to check php mail function problem.

Install or Update of plugins

Update plugins Layer Slider, Revolution Slider, SecretLab Shortcodes, SecretLab Stack, King Composer, KC Pro.

If you want update any plugins which provides with the theme, follow these steps after theme update:

1. Delete these plugins.

2. Click Begin installing plugins at notice at top of the page.

3. Choose all plugins you want to install and click Apply button.

4. Click Return to required plugin installer link

5. Choose all plugins you want to install, choose Activate at dropdown menu and click Apply button.

6. All done. You can start configure and use these plugins


Installation of Plugins

If you want install only plugins without other content, follow these steps:

1. Click Begin installing plugins at notice at top of the page.

2. Choose all plugins you want to install and click Apply button.

3. Click Return to required plugin installer link

4. Choose all plugins you want to install, choose Activate at dropdown menu and click Apply button.

5. All don. You can start configure and use these plugins

License Keys for plugins

We bought developer extended licenses for Layer Slider and Slider Revolution. We must not share these keys (we have no permission to do it) - we provide updates of plugins with update of the theme.

You will get updates of plugins with theme update.

Documentation for Plugins

King Composer

Video tutorials on Youtube is https://www.youtube.com/channel/UChCzbn8UHAl7xF8smrgPK1w/videos
Online documentation is here

Introducing to Page Builder

Slider Revolution

Online documentation is here

Videos is here https://www.youtube.com/watch?v=0lPPUZCIouc&list=PLSCdqDWVMJPPDcH_57CNZvLckoB8cimJF

Layer Slider

Online documentation is here

Videos is here https://www.youtube.com/user/kreaturamedia/videos

Online documentation for another plugins

General Setting

You can set your Google Map API key, choose your home page and configure page loader.

Layout

On the Layout tab, you can set transition time for hover effects, choose page layout and sidebar options.

Portfolio

On the Portfolio tab, you can set slug and heading with description for portfolio archive page.

Color Scheme

You can edit colors of the design. Also you can load presets of colors.

Design

Options sidebar, buttons and inputs. Padding for boxed background.

Typography

Powerful setting for typography with 750+ Google Fonts

Translate

On the Translate tab, you can write text for 404 error page.

Custom CSS/JS

On the Custom CSS/JS tab, you can add any custom CSS and JS code and turn off the Scroll to top button.

Shop

Select slider, background and sidebar options for your store.

Blog

This is where you customize your blog display options. Select slider, page layout and sidebar options. These options work for the Post post type, that include all categories and subcategories.

Import / Export

You can download and import Theme option settings.


Where to edit?


Theme Translation

1) Download POEdit tools from https://poedit.net/

2) Open /language/ directory and file atiframe.pot with Poedit

3) In the Poedit click on "Create New Translation" and write language code

4) Make translation for every line you want to translate

5) Go to File -> Save as and name the file in language code like de_DE.po

5) Go to File -> compile to MO and name the file in language code like de_DE.mo

6) Upload these files to /language/ directory and set your language in Wordpress Settings.


Sidebars: How Does Sidebar System Work?

Best way ti create sidebar is a create Composer Block with type Widget and than set Composer Content Block widget to the sidebar.

For any page or post you can add individual sidebar setting by our SecretLab Stack plugin

For Shop - Theme Options -> Shop. You can add necessary widgets in Appearance -> Widgets at Left Shop Sidebar and Right Shop Sidebar

For Blog - Theme Options -> Blog. You can add necessary widgets in Appearance -> Widgets at Left Blog Sidebar and Right Blog Sidebar.

We recommend put all your blog's categories into Blog category with slug /blog/ for proper operation of blog's settings.

Global Settings, exclude blog and shop. - Theme Options -> Design -> layout. You can add necessary widgets in Appearance -> Widgets at Left Sidebar and Right Sidebar

Elements/Shortcodes

The theme using a lot of elements from King Composer and SecretLab Shortcodes plugins. You can find full information about these plugins at official documentations for King Composer

Videotutorials on Youtube is https://www.youtube.com/channel/UChCzbn8UHAl7xF8smrgPK1w/videos
Online documentation is here

Secretlab Shortcodes

Description of elemenets from SecretLab Shortcodes is here.

SecretLab Shortcodes

Background Label

Displays an inscription on the background of a column or row with absolute positioning. It is displayed in the lower layer, so sometimes it can be difficult to select this element with the mouse for editing, because it is under another element.

Contact Forms

Displays feedback forms with unlimited design patterns and colors from the Contact Form 7 plugin. Required plugin Contact Form 7.

Icon Divider

Displays divider with SVG icon

Icon Box

Displays an icon and description with unlimited design templates and colors.

MailChimp Forms

Displays forms from MailChimp for the Easy Forms for MailChimp plugin. Required plugin Easy Forms for MailChimp.

Blog Post Grid

Displays posts of different types with unlimited design and color settings.

Menu

Displays menu unlimited design and color options.

Multiple Title

Displays a title from several parts with different tags and font and color settings.

Slider Revolution

Displays a slider from Revolution Slider plugin.

Benefits Icon Grid

Displays a block with 5 icons and 1 description to show your advantages to you customers. A few design telmplates is available.

Sidebar

Displays a sidebar in any place.

Menu: Mega Menu Configuration

To display any of your menus from Appearance -> Menu , you can use our Menu element for King Composer.

You can customize the overall appearance in the General element's tab:

  • Settings for the appearance of the main unit, the button and the main unit of the mobile menu are located on the Styling -> Box
  • The settings for the appearance of the blocks of all the wraps of the menu items of the first level are on the tab Styling -> Item Box
  • The settings for the appearance of the blocks of all the links of the menu items of the first level are on the tab Styling -> Item
  • The settings of the icons of the first level menu items placed on the tab Styling -> Icon
  • The settings of the dropdown icon of the first level menu items placed on the tab Styling -> Caret
  • The settings of the search icon placed on the tab Styling -> Search
  • The settings of the shopping cart placed on the tab Styling -> Cart
  • The settings of the block of the second level menu items placed on the tab Styling -> Box 2 Lvl
  • The settings of the wraps of the second level menu items placed on the tab Styling -> Item Box 2 Lvl
  • The settings of the links of the second level menu items placed on the tab Styling -> Item 2 Lvl
  • The settings of the bliconsock of the second level menu items placed on the tab Styling -> Icon 2 Lvl
  • The settings of the dropdown icon of the second level menu items placed on the tab Styling -> Caret 2 Lvl
  • The settings of the block of the third level menu items placed on the tab Styling -> Box 3 Lvl
  • The settings of the wraps of the third level menu items placed on the tab Styling -> Item Box 3 Lvl
  • The settings of the links of the third level menu items placed on the tab Styling -> Item 3 Lvl
  • The settings of the icons of the third level menu items placed on the tab Styling -> Icon 3 Lvl
  • The settings of the megamenu (dropdown menu block with a few columns) placed on the tab Styling -> Mega Menu Box

In addition, you can customize the type and appearance of each menu item in the Appearance -> Menu of the site's administrative panel:

  • The menu item type settings are located in the Choose the menu type: .
    • Use as DropDown - an ordinary drop-down menu
    • Use as Mega Menu - drop-down menu with several columns and advanced settings (the number of columns is specified using the second level nesting menu items)
    • Use as Search Form - an icon and search form to search through the website
    • Use as Woocommerce Cart - a shopping cart block of a Woocommerce store with the amount, quantity of goods and a link to the order page.
  • The link settings for the menu item are located in the Link & Icon Settings:
  • Individual design settings for the menu item are in the block Design:

Icon Fonts & Icon Font Manager

The theme is supplied with icon font set: Native icon set that contacin ~1000 icons. You can find zip archives with the icon sets at Icon fonts folder.

Icon Manager support upload icon fonts, that was prepared at Iconmoon App. You can create icon font and upload .zip archive to Icon manager to use icons for display through King Composer.

Website Speed Optimization and Cache Plugins

Best result of site load speed optimization displays by W3 Total Cache plugin.
- Go to Performance > General Settings
- At the end of this page you'll find "Import / Export Settings" section which you can import "w3-total-cache-config.json" file. The mentioned file is available via Package Content Folder > IncreasePageSpeed


Sometimes we used W3 Total Cache + Cloudflare or King Composer's Cache + Cloudflare, but it displays not so high speed of page loading, but more points in website speed test services like https://gtmetrix.com or https://www.webpagetest.org or https://tools.pingdom.com. But these services are out of date a little bit. Because now you can use HTTP/2 protocol that let your website loads faster, because unlimited files can loads in parallel mode, instead of classic HTTP protocol, when files loads consistently.


Information below is out of date if you are using HTTPS and HTTP/2 protocols.


These 2 easy steps let you increase page load speed.

1) Best way to increase website loading speed is CDN (Content Delivery Network). For example, cloudflare.com, it's free for use. Go to cloudflare.com and set your website, it's free. If you dont want to use CDN, you can use only cache plugin. Settings for cloudflare below:

2) King Composer contain its own cache options:

Cloudflare and King Composer Cache displays good result of page load speed optiomization.


W3 Total Cache with Cloudflare also displays good results. If you would like to setup it:

- Go to Performance > General Settings
- At the end of this page you'll find "Import / Export Settings" section which you can import "w3-total-cache-config.json" file. The mentioned file is available via Package Content Folder > IncreasePageSpeed


Also I've been tested the theme compatibility with other cache plugins:

  1. WP Super Cache - set it like that
  2. WP Rocket width some scripts to minifying exclusions:
    /wp-content/plugins/revslider/public/assets/js/jquery.themepunch.revolution.min.js
    /wp-content/plugins/revslider/public/assets/js/jquery.themepunch.tools.min.js

Slides and Slider Revolution Plugin

You can choose slider:

  1. All website pages - at Theme Options -> Design -> Header
  2. Blog and blog posts that contain at /blog/ slug - at Theme Options -> Blog
  3. Shop and product pages - at Theme Options -> Shop
  4. For any pages, include services, testimonials, teammates and portfolio/cases. The option is at the bottom of page, when you are edit it.

Slider Revolution Documentation

Online documentation is here

Video Tutorials at Youtube

Layer Slider Documentation

Online documentation is here

Videos is here https://www.youtube.com/user/kreaturamedia/videos

Content Editing

King Composer is the main plugin for content building. The header and footer of the site can also be edited with King Composer in the Composer Block . At the moment we are preparing a video tutorial on working with the page builder, but if you have questions, do not hesitate to ask us in our support panel - this will help us make more convenient and useful lessons.

King Composer contains an administrator's editor, available by clicking on the blue button (circled in red on the screenshot) and a live editor available by clicking on the green button or the blue button on the top panel (buttons in the screenshot without a red frame).

Videotutorials on Youtube is https://www.youtube.com/channel/UChCzbn8UHAl7xF8smrgPK1w/videos
Online documentation is here

Page Options

At the right of the page you can find:

  • customize the header and footer of the site,
  • page layout (full-size or limited in width),
  • enable / disable sidebars,
  • choose a slider or image to display in the header of the page.

Footer & Header

You can edit footer section or create a new one at Composer Block plugin. These footer is editable with King Composer

You can set footer and header that you want to display on Theme Options -> General Settings. Individual header and footer for any page you can set in right setion Page Layout.

Favicon

Go to Appearance -> Customize -> Site Identity.

How to change HTTP to HTTPS

It is better to initially install WordPress on a domain with HTTPS, but if you did not, then you need to switch from the old version of HTTP correctly.

                
                        
  1. Go to Theme Options -> Import / Export and export the options for the theme options
  2.                     
  3. Delete the .htaccess file in the website folder
  4.                     
  5. Export the SQL file of your database, make a backup copy
  6.                     
  7. Find and Replace "http://YourDomain.com" to "https://YourDomain.com" in the SQL file
  8.                     
  9. Import the SQL file into your database
  10.                     
  11. Go to https://yourdomain.com/wp-admin/options-permalink.php and click Save button
  12.                     
  13. Go to Theme Options -> Import / Export and import the options options for the theme
  14.                     
  15. Everything is done!
  16.                 

Also you can write to .htaccess:

RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]

SEO Settings

Every pages, posts and categories has SEO settings.

You can configure titles and meta-data for custom post types, categories, tags etc at SEO -> Title & Metas page.

You can configure Breadcrumbs and Permalins at SEO -> Advanced page.

Full documentation for Yoast SEO plugins is here

How to get Google API key

Theme options required Google API key to let you receive Google Fonts updates

You can gget Google API key here

You should add the key to Theme Options -> General Settings tab.

Support Desk

Please remember you have purchased a very affordable theme. You have not paid for a full-time web design agency. Occasionally, we will help with small tweaks, but these requests will be put on a lower priority due to their nature. Support is also 100% optional and we provide it for your convinience, so please be patient, polite and respectful.

Please visit our profile page or ask question http://secretlab.pw/helpdesk/

Our theme support includes:
  • * Responding to questions or problems regarding the theme and its features
  • * Fixing bugs and reported issues
  • * Providing updates to ensure compatibility with new software versions
Theme support does not include:
  • * Customization and installation services
  • * Support for third party software and plug-ins
Before seeking support, please...
  • * Make sure your question is a valid Theme Issue and not a customization request.
  • * Make sure you have read through the documentation and any related video guides before asking support on how to accomplish a task.
  • * Make sure to double check the theme FAQs.
  • * Try disabling any active plugins to make sure there isn't a conflict with a plugin. And if there is this way you can let us know.
  • * If you have customized your theme and now have an issue, back-track to make sure you didn't make a mistake. If you have made changes and can't find the issue, please provide us with your changelog.
  • * Almost 80% of the time we find that the solution to people's issues can be solved with a simple "Google Search". You might want to try that before seeking support. You might be able to fix the issue yourself much quicker than we can respond to your request.
  • * Make sure to state the name of the theme you are having issues with when requesting support via ThemeForest.