Purchase for 59$

Bifrost Theme Docs

Simple WordPress Theme (Elementor)

Introduction

Welcome to documentation. First of all thanks for purchasing our theme. We hope you will be satisfied with our work, and this theme will be useful in your projects.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly.

Note: For better performance disable the default colors and fonts in Elementor > Tools.

WordPress General

First of all, to install our theme and run it you need the content management system which is called WordPress.

  1. Installing WordPress - WordPress is well-known for its ease of installation. Under most circumstances, installing WordPress is a very simple process and takes less than five minutes to complete. Many web hosts now offer tools (e.g. Fantastico) to automatically install WordPress for you. However, if you wish to install WordPress yourself, the following guide will help.
  2. First Steps With WordPress - Let’s take a step-by-step tour through your WordPress site and see how the different functions work and how to make your new site your own. During the first part of this tutorial, please don’t change anything within the program unless it is part of the tutorial. After following these steps, you’ll soon be changing everything.
  3. New To WordPress - Where to Start - If you are new to WordPress, here is a step-by-step plan for getting started. If you need help along the way, plenty of options for assistance are listed in this article. Welcome to the exciting world of WordPress!

Server Requirements

If you are installing your theme from the WordPress theme installer, but get a message that says Are you sure you want to do this?, most likely your web server is configured with low PHP settings that only allow a certain size ZIP file to be uploaded via WP admin.

Most hosting companies configure their servers to only have the maximum file upload size limit at 8-10 MB, some are less. Our theme ZIP is currently about 15 MB in size which is due to the included plugins and all the demo content. So if you get this error, your web server is rejecting the upload due to the overall size of the zip file. WordPress is, unfortunately, giving you a rather ambiguous message in response. This is not a theme issue or bug.

PHP Recommendations

Memory Size: memory_limit = 256M
Script execution time: max_execution_time = 400
Number of input variables: max_input_vars = 4000

If you don’t have access to the php.ini file, you can add the following values in your .htaccess file: 

php_value max_execution_time 400
php_value memory_limit 256M
php_value upload_max_filesize 10M

Be careful using these settings, some hosting companies don’t allow users to change php settings, if you experience any problem after making these changes, please revert these in your .htaccess file, using your FTP client.

Also, there is another way to prevent this error, you can upload your theme via FTP.

Theme General

Front End Builder & Options: Very powerful features of our theme are front-end page builders, theme options are built on the live customizer of WordPress and the elements are built with the most powerful front-end page builder Elementor.

Customizer: With the very powerful innovative WordPress Live Customizer you will be able to preview the changes made to your WordPress website in real time before pushing them live. Lots of options will make it a breeze for you to modify the structure and the visuals of your theme, including color scheme, typography, portfolio, blog, shop layout, and much more.

Elementor: Elementor is the ultimate WordPress page builder, the key difference is that you can reach a high level of design while designing live and on the front end of your site. Elementor is a page builder plugin that replaces the basic WordPress editor with a live frontend editor, so you can create complex layouts visually, and design your website live, without having to switch between the editor and the preview mode. The page builder enables you to reach a top-notch quality of design without needing to use code or CSS and doesn't require code knowledge.

Inherit Option: Most of the options in the elements have the option to inherit the values from the theme options. With this option, you can create multiple pages or have multiple elements with the same settings inherited from the theme options. No worries, inherit is not the only option from the select, the inherit option usually stands at the top which is followed by the normal options.

Support: To have someone cover your back 24/7 is really something when it comes to the questions that are related to the product. The satisfaction of the client is what motivates us to work more and more. Currently, our author rating from our clients stands at 4.98 from 5 with more than 450 reviews with 5 stars. Start by creating a ticket at our support system at https://neuronthemes.ticksy.com

Getting Started

Installing Theme & Plugins

Theme

  1. Installing theme is quite easy, all you have to do is download the installable WordPress file only from your downloads tab at ThemeForest, the downloads tab on ThemeForest can be found when you mouseover your user.
  2. There are two ways to install the theme into your WordPress, one from WordPress dashboard and the other one manually from FTP
    • WordPress Dashboard: Go to Appearance > Themes and press Add New, upload the installable zip file that you've downloaded from ThemeForest.
    • FTP: Go to the WordPress > wp-content > themes. In the FTP the file should be folder, not zip file, so extract it and you're good to go.

Plugins

After activating the theme, notices will appear on the top of WordPress, if there are no notices, please go to Appearance > Install Plugins. We have divided the plugins into two sections required and recommended.

Required:
  • Advanced Custom Fields: Theme uses the Advanced Custom Fields plugin to create custom field data.
  • Elementor: The most powerful front-end page builder, all the elements are created inside it.
  • Neuron Core: A core plugin which adds options and custom functionalities to the theme. The theme recommend it and it is included directly on the theme at location bifrost > includes > plugins, you can install it anytime at Appearance > Install > Plugins.
Recommended:
  • Slider Revolution: Slider Revolution is an innovative, responsive WordPress Slider Plugin that displays your content the beautiful way.
  • WooCommerce: It's required if you want to have an online store, it's the most popular eCommerce platform online.
  • One Click Demo Import: It's a must if you want to import the demo content and start working without to create everything from scratch.
  • Contact Form 7: It can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup.

One Click Demo Import

Make sure to install the recommended plugin One Click Demo Import.

When you import the data, the following things might happen:

  • No existing posts, pages, categories, images, custom post types or any other data will be deleted or modified.
  • Posts, pages, images, widgets, menus, and other theme settings will get imported.
  • Please click on the Import button only once and wait, it can take a couple of minutes.

Navigation Menus

The menus can be created on the Appearance > Menus. You can add your posts/pages or categories to the menu then assign the menu on Main Menu location, which stands for the primary menu on the theme.

Front Page

The front page usually on demo import assigns itself, but that can be changed easily to any page you want at Settings > Reading > Front Page.

Blog Page

You can create a blog page which will play the role of the collector of all posts inside your WordPress, to assign that page you first need to create a blank page and then at Settings > Reading > Blog Page assign that page

Child Theme

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme. To use the child theme of our theme, you have to download the whole package from ThemeForest and then extract it, while extracting it you'll find a zip file called theme name-child.zip, upload that one after you upload the main theme and it will be ready for use.

Customizer

General

  • Layout: Change the layout of theme, default is normal. You can change it to boxed, with boxed means the content will be boxed in a specified width and a background color will be applied behind, also a new option will pop up where you can select the color of the background.
  • Custom Fields Panel: You can enable here the Advanced Custom Fields Panel, you can use the Advanced Custom Fields plugin to take full control of your WordPress edit screens & custom field data. It requires code knowledge.
  • Comments Notice: When you close the comments and there are already some comments, a notice will be displayed that notifies that comments are closed, with this option you can hide that notice.
  • Custom Sidebar: With this option, you can create new sidebars, you can use new sidebars later on the page builder. Do not forget to enter the title and the description of the sidebar.
  • Image Size: You can create new image sizes and use them later as in Portfolio, Blog, Shop and much more. Enter only the number without the unit, the number is represented in pixels

Header

Layout
  • Skin: You can change the skin of the header on this option, by changing skin you change the header background and the element of the header color. What does that mean? If you select the light skin, the skin will be oriented on the light color, the background of the header will be light and the elements will have a dark color, which will be a great combination between these two colors.
  • Position: The position of header usually stands at a static version which means, the header comes first with its properties then all the elements below it. With the absolute option, you'll move the content to the top and the header will stay onto it.
  • Transparency: A very effective option which is needed for many websites, if you want to have the header fixed when you scroll you have to enable this option of transparency.
  • Autohide: If you selected the transparency to sticky, you can play around if you want to hide the header when scrolling down, so it will be displayed only when you scroll up.
  • Container: The container is another fancy word for box, so if you enable this option the header will stay inside the container, around 1140 pixels wide.
Logo
  • Dark: Upload the logo that will appear on all headers, it is used as a normal logo, it won't be visible only in the light skin.
  • Light: Upload the logo that will appear on the light skin.
  • Width: Use this option to change the width of the image, it can be used when you want to upload larger logos for better resolution, like 2x retina.
  • Height: Use this option to change the height of the image, it can be used when you want to upload larger logos for better resolution, like 2x retina.
  • Width & Height: You can also change the width and the height via Custom CSS in responsive for 991 pixel wide screens and smaller.
@media (max-width: 991px) {
    .a-logo.a-logo--image a {
        width: 100px;
        height: 100px;
    }
}
Search
  • Visibility: Show or hide the search icon on the menu, the search is placed as a sliding bar from the top when you click over the search icon on the menu.
  • Mobile: With this option, you'll be able to hide the search from the menu on mobile devices (991px and smaller), can be really helpful sometimes when you need to hide the search due to a better structure.
Top Header
  • Visibility: Show or hide the top header section, the top header is placed above the menu and can be customized for really helpful purposes.
  • Menu: Select which menu you want to display on the top header, the menus can be created on the Appearance > Menus.
  • Alignment: Select the alignment of content in the top header, if left is selected the menu will move on the right and vice versa. The default option of alignment is left.
  • Skin: Select the skin of top header, if the light is selected the background will be light and the elements will be dark, and vice versa if the dark option is selected the top header will turn dark with light elements.
  • Container: The container is another fancy word for box, so if you enable this option the top header will stay inside the container, around 1140 pixels wide.
  • Mobile: With this option, you'll be able to hide the top header on mobile devices (991px and smaller), can be really helpful sometimes when you need to hide the top header due to a better structure.
Sliding Bar
  • Visibility: Show or hide the top sliding bar, the sliding bar will come as a slide from the right and will be opened by an icon which is placed to the menu. And the elements inside it comes from the sidebar, check the option number four.
  • Mobile: With this option, you'll be able to hide the sliding bar on mobile devices (991px and smaller), can be really helpful sometimes when you need to hide the sliding bar due to a better structure.
  • Skin: Select the skin of sliding bar, if the light is selected the background will be light and the elements will be dark, and vice versa, if the dark option is selected the sliding bar, will turn dark with light elements.
  • Sidebar: Select the sidebar you want to get the elements from to the sliding bar, do not forget you can create new sidebars at the general section on the customizer. You can place widgets inside the sidebar on Appearance > Widgets.
Shopping Cart
  • Visibility: Show or hide the shopping cart on the menu, the shopping cart is very handy when someone adds a product to the cart, it automatically updates the number of products on the cart, without reloading the page. You'll be able also to view the mini cart via the shopping cart icon.
  • Mobile: With this option, you'll be able to hide the shopping cart on mobile devices (991px and smaller), can be really helpful sometimes when you need to hide it due to a better structure.

Portfolio

Portfolio is mostly based on the element called Posts, so everything is created easily from there.

Functionality
  • Prefix: Generally the portfolio item URL will look like this: yourdomain.com/portfolio/the-name-of-your-item. But you can change the "portfolio" prefix easily on this text field, do not forget to click save changes on the permalinks after doing this one, sometimes it may not work properly without flushing the permalinks.
Portfolio Item
  • Share: Show or hide the social media elements that offer you the option to share the portfolio item through the different social media, to use this feature make sure to install and activate the plugin NeuronThemes Share, because without that plugin this won’t be available.
  • Navigation Visibility: A good-looking navigation will appear on the bottom of each portfolio item where you can navigate through them, with this option you’ll be able to show or hide it.
  • Navigation Category: If you’re interested to make the navigation work only in the same category you’ll be able to do it with this option.
  • Gallery Columns: Change the columns of the gallery items inside a portfolio item.
  • Gallery Animation: Change the initial animation of the gallery items inside a portfolio item.

Blog

Functionality
  • Type: The blog element is divided into two great types, one is the meta inside and the other one is meta outside, the meta inside means the title, category, and other blog information are located inside the feature image cube, for more precisely on the hover, and vice versa for the meta outside, the title, category, and the other information are located below the featured image.
  • Sidebar: Select the placement of the sidebar on the left or on the right, you can also hide with the third option when you hide the column of posts will become full width. You can place the widgets on the blog sidebar at Appearance > Widgets, that’s the location of this sidebar.
  • Pagination Visibility: Select the pagination visibility. The pagination will not be displayed if there are less posts than posts per page number, even if the option is show.

Style

  • Columns: Change the columns of the blog, this option is exclusively for the blog grid element and the blog static page, because the metro layout and the carousel use their own columns system. The default option is three columns per row.
  • Animation: Select the initial loading animation for blog posts, the default option is fade in, so when the page loads the blog posts will fade in smoothly with a great effect, there are a few options to choose from, you can also select none which will disable the animation effect.
  • Spacing: The spacing between blog posts by default is 30 pixels, so 30 pixels on each side from portfolio to portfolio, with this option you can override this value from 30 to any value from 0 to 100.
  • Hover Visibility: The hover usually displays in both types, in meta inside and in meta outside, sometimes you want to remove it, for example in meta outside there is an icon which shows as hover on the blog post, with this option you’ll hide completely the hover visibility.
  • Hover Animation: There are two types of hover animation, the scale, and the translate effect, you can choose between these two when you mouseover the elements will fade in with these two different animations.
  • Meta: Show or hide the meta tags on the blogs.

Thumbnail: With this option, you can enable the thumbnail resizer, so all the portfolio thumbnails will be cropped to certain sizes, after setting it on, a new field will appear below where you can select the image size, new image sizes can be created in general theme options

Post
  • Thumbnail: Show or hide the thumbnail image or the featured image on the post single, you can hide it for a better structure of the posts.
  • Navigation Visibility: A good-looking navigation will appear on the bottom of each portfolio item where you can navigate through them, with this option you’ll be able to show or hide it.
  • Navigation Category: If you’re interested to make the navigation work only in the same category you’ll be able to do it with this option.
  • Share: Show or hide the social media elements that offer you the option to share the portfolio item through the different social media, to use this feature make sure to install and activate the plugin NeuronThemes Share, because without that plugin this won’t be available.
  • Sidebar: Select the placement of the sidebar on the left or on the right, you can also hide with the third option when you hide the column of posts will become full width. You can place the widgets on the blog sidebar at Appearance > Widgets, that’s the location of this sidebar.
Static
  • Title: Enter the title that will appear on the blog page, the blog page can be selected on the settings > reading > blog page.
  • Content: Enter the content that will appear on the blog page, the blog page can be selected on the settings > reading > blog page.

Shop

Functionality
  • Type: The shop element is divided into two great types, one is the meta inside and the other one is meta outside, the meta inside means the title, category, and other product information are located inside the feature image cube, for more precisely on the hover, and vice versa for the meta outside, the title, category, and the other information are located below the featured image.
  • Sidebar: Select the placement of the sidebar on the left or on the right, you can also hide with the third option when you hide the column of products will become full width. You can place the widgets on the shop sidebar at Appearance > Widgets, that’s the location of this sidebar.
  • Result Count: With this option, you’ll be able to show or hide the result count paragraph, it’s usually placed above the shop products which explains the total result of products on this page with the total.
  • Catalog Ordering: Show or hide the catalog ordering which is placed above the shop products, you’ll be able to filter the products for example low to high or by average rating.
  • Default Order: Change the default order of the catalog order.
  • Pagination Visibility: Select the pagination visibility. The pagination will not be displayed if there are less posts than posts per page number, even if the option is show.
  • Pagination Style: There are two types of paginations included in the shop, the normal one and the show more. The normal one is destined to work by reloading the page and going in numbers like 1, 2 and more, it depends on the number of posts per page, and in the other hand there is the show more pagination which works with a button with ajax load more, so it will display the products in a nice way without reloading the page.
  • Posts Per Page: Enter the number of products you want to display on the first page, a pagination will be created if there are more products than this number. This option will be available on the archives not in elements, elements have their own option for post per page.
Style
  • Columns: Change the columns of the shop, this option is exclusively for the shop grid element and the shop archive page, because the metro layout and the carousel use their own columns system. The default option is three columns per row.
  • Animation: Select the initial loading animation for shop products, the default option is fade in, so when the page loads the shop products will fade in smoothly with a great effect, there are a few options to choose from, you can also select none which will disable the animation effect.
  • Spacing: The spacing between shop products by default is 30 pixels, so 30 pixels on each side from product to product, with this option you can override this value from 30 to any value from 0 to 100.
  • Hover Visibility: The hover usually displays in both types, in meta inside and in meta outside, sometimes you want to remove it, for example in meta outside there is an icon which shows as hover on the product, with this option you’ll hide completely the hover visibility.
  • Hover Animation: There are two types of hover animation, the scale, and the translate effect, you can choose between these two when you mouseover the elements will fade in with these two different animations.
  • Thumbnail: With this option, you can enable the thumbnail resizer, so all the product thumbnails will be cropped to certain sizes, after setting it on, a new field will appear below where you can select the image size, new image sizes can be created in general theme options.
Product
  • Sidebar: Select the placement of the sidebar on the left or on the right, you can also hide with the third option when you hide the column of products will become full width. You can place the widgets on the shop sidebar at Appearance > Widgets, that’s the location of this sidebar.
  • Navigation Visibility: A good-looking navigation will appear on the bottom of each product where you can navigate through them, with this option you’ll be able to show or hide it.
  • Share: Show or hide the social media elements that offer you the option to share the product through the different social media, to use this feature make sure to install and activate the plugin NeuronThemes Share, because without that plugin this won’t be available.
  • Gallery Alignment: Select the alignment of the gallery, if the selected option is left, the gallery will be placed on the left and the content of the product will be displayed on the right and vice versa.
  • Gallery Width: With this option, you’ll be able to change the width of the gallery, the rest of the columns will be attached to the description of the product. The default option is one half of the full content.
  • Related Products: Show or hide the related products in the product. Products can be Related to each other in three ways: Up-Sells, Cross-Sells or by having the same tags or categories.
  • Related Products Columns: Select how many products you want to display in the related section.

Utility

Title
  • Page Title: Show or hide the title of the page on all pages, this option is easily changeable on each page you can inherit the value or set it custom.
  • Post Title: Show or hide the title of the post on all posts, this option is easily changeable on each post you can inherit the value or set it custom.
  • Product Title: Show or hide the title of the product on all products, this option is easily changeable on each product you can inherit the value or set it custom.
  • Portfolio Item Title: Show or hide the title of the portfolio item on all portfolio items, this option is easily changeable on each portfolio item you can inherit the value or set it custom.
Breadcrumbs
  • Separator: Enter here the symbol that will play a role as a separator between links on the breadcrumbs section, the default separator is |.
  • Page Visibility: Show or hide the breadcrumb on all pages, this option can be changed for each page individually.
  • Post Visibility: Show or hide the breadcrumb on all posts, this option can be changed for each post individually.
  • Product Visibility: Show or hide the breadcrumb on all products, this option can be changed for each product individually.
  • Shop Visibility: Show or hide the breadcrumb on the archive shop.
  • Portfolio Item Visibility: Show or hide the breadcrumb on all portfolio items, this option can be changed for each portfolio item individually.
  • Archives Visibility: Show or hide the breadcrumb on all archive types like categories, tags, and custom taxonomies like portfolio category or product category.
Hero
  • Visibility: Show or hide the hero, all posts and pages will have the option to inherit this value or set it individually. The hero is a large section attached to each post/page which has the title field, the title field has the option to grab the page/post title or set it custom.
  • Height: Enter the height of the hero, do not forget to add the unit too, for example, px/vh/rem/em/%. The default option is 45vh, the ‘vh’ unit means 45 % of the total height of the screen.
  • Container: The container is another fancy word for box, so if you enable this option the hero content will stay inside the container, around 1140 pixels wide.
  • Alignment: Select the alignment of the title on the hero, the default option is center.
  • Image: Select the image you want to display as hero background image, you have the option to use the theme default image, the featured image or a custom image where you can upload a .png or a .jpeg image.
  • Repeat: The background-repeat property sets if/how a background image will be repeated. Tip: The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.
  • Attachment: The background-attachment property sets whether a background image scrolls with the rest of the page or is fixed.
  • Position: The background-position property sets the starting position of a background image.
  • Size: The background-size CSS property specifies the size of the element's background image. The image can be left to its natural size, stretched to a new size, or constrained to fit the available space while preserving its intrinsic proportions.
  • Overlay: Show an overlay for the background image.
  • Overlay Opacity: Change the opacity of the overlay, a range from 0 to 1. That is the transparency of the overlay background color.
  • Overlay Color: Change the color of the overlay.
  • Title: Select which title you want to display on the hero, you can use the post/page title or set it a custom title, each post/page has the option to inherit this value or to set it custom.
  • Title Animation: Select the initial loading animation for the title, the default option is fade in, so when the page loads the title will fade in smoothly with a great effect, there are a few options to choose from, you can also select none which will disable the animation effect.
To Top
  • Visibility: Show or hide the to top button, when you press the button it will take the user to the top of the page.
  • Skin: Select the skin of the to top button.
  • Animation: There are two types of animation the scale effect and the translate effect, the effect will be shown when the page loads.
Search
  • Columns: Select the columns of the search page, the default option is three columns per row.
  • Sidebar: Select the placement of the sidebar on the left or on the right, you can also hide with the third option when you hide the column of posts will become full width. You can place the widgets on the blog sidebar at Appearance > Widgets, that’s the location of this sidebar.
  • Post Type: Select which post types you want the search query to look for, do not leave it empty it may not find any post or page.
  • Hero Content: Enter the content that will appear below the title.
  • Hero Image: Upload an image to the hero of the search page.
  • Hero Overlay: Show an overlay for the background image.
Erorr 404
  • 404 Title: Change the actual title of the 404 page, which simply writes ‘404’.
  • Description: Change the actual description of the 404 page, which writes ‘The page you were looking for couldn't be found. The page could be removed or you misspelled the word while searching for it.’
  • Button URL: The default URL of the button is the homepage.
  • Button Text: The default text of the button is back to the homepage.
  • Hero Image: Upload an image to the hero of the search page.
  • Hero Overlay: Show an overlay for the background image.
  • Hero Overlay Opacity: Change the opacity of the overlay, a range from 0 to 1. That is the transparency of the overlay background color.
  • Hero Overlay Color: Change the color of the overlay.

Typography

Note: Make sure when you change font size or other font properties enter the unit too, for example 15px, 1.3rem.
General
  • Primary: All these selectors will be affected when you change the font family at this option.
    h2, .h2, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, b, strong, ul.menu.m-header-default-menu li.menu-item > a, .o-hero .o-hero__content .o-hero__content__title, input[type=submit], button, .button, .a-button, .o-breadcrumb .o-breadcrumb__list .o-breadcrumb__list__item, .o-comments .o-comments__area .o-comment .o-comment__details .o-comment__author-meta .comment-reply-link, .o-mini-cart .o-mini-cart__holder .o-mini-cart__holder__cart-list .o-mini-cart__holder__cart-list__item .o-mini-cart__holder__cart-list__item__meta .title, .o-mini-cart .o-mini-cart__total-holder .o-mini-cart__total-holder__total .price .amount, .tagcloud a, .woocommerce .o-product .m-product-summary .product_meta > span, .woocommerce .o-product .woocommerce-tabs ul.tabs li a, .woocommerce .o-product .woocommerce-tabs .woocommerce-Tabs-panel.woocommerce-Tabs-panel--additional_information table tr th, .a-woo-badge, .woocommerce .o-product .m-product-summary table.variations tr td label, .t-404 .o-hero .o-hero__content .o-hero__content__title h2
  • Secondary: All these selectors will be affected when you change the font family at this option.
    body, input, textarea, select, code, .woocommerce .o-product .m-product-summary .product_meta > span span, .woocommerce .o-product .m-product-summary .product_meta > span a

Headings: Change the font properties like font size, line height, letter spacing, and the text-transform of all headings from 1 to 6. The headings have a heavy usage on all elements, so be careful when you change them a lot of elements will be overridden from these options.

Paragraphs: Change the font properties like font size, line height, letter spacing, and the text-transform of the paragraphs on the theme.

Main Menu: Change the font properties like font size, line height, letter spacing, and the text-transform of the main menu, submenu parent and submenu children.

Mobile Menu: Change the font properties like font size, line height, letter spacing, and the text-transform of the mobile menu and the submenu of the mobile.

Top Menu: Change the font properties like font size, line height, letter spacing, and the text-transform of the top menu navigation and the content.

Portfolio: Change the font properties like font size, line height, letter spacing, and the text-transform of the portfolio filters, title, and the category.

Portfolio Item: Change the font properties like font size, line height, letter spacing, and the text-transform of the portfolio item title and subtitle, the tabs also can be customized, for example, the tab title, tab content or the tab link.

Blog: Change the font properties like font size, line height, letter spacing, and the text-transform of the blog title and the blog meta information, the meta information includes category, date, and author.

Blog Post: Change the font properties like font size, line height, letter spacing, and the text-transform of the blog post title and the blog post meta information, the meta information includes category, date, and author.

Shop: Change the font properties like font size, line height, letter spacing, and the text-transform of the shop title and the price.

Product: Change the font properties like font size, line height, letter spacing, and the text-transform of the product title, price, and the meta.

Product Tabs: Change the font properties like font size, line height, letter spacing, and the text-transform of the menu title, panel title, attribute title, and the attribute content.

Widgets: Change the font properties like font size, line height, letter spacing, and the text-transform of the widgets title, widgets list, and widgets tag clouds. Tags and categories have tag clouds.

Breadcrumbs: Change the font properties like font size, line height, letter spacing, and the text-transform of the breadcrumb title and the breadcrumb navigation, the navigation holds all the links which explain you in which directory you are.

Hero: Change the font properties like font size, line height, letter spacing, and the text-transform of the hero title and the hero subtitle.

Error 404: Change the font properties like font size, line height, letter spacing, and the text-transform of the title and the content.

Forms: Change the font properties like font size, line height, letter spacing, and the text-transform of the labels, input, buttons and the site search.

Social Media

Social Media: In this section, you have to provide the URLs of all social media you need to use later. You have the option also to make them open in a new window.

Page Builder

Elementor is the ultimate WordPress page builder, the key difference is that you can reach a high level of design while designing live and on the front end of your site. Elementor is a page builder plugin that replaces the basic WordPress editor with a live frontend editor, so you can create complex layouts visually, and design your website live, without having to switch between the editor and the preview mode. The page builder enables you to reach a top-notch quality of design without needing to use code or CSS and doesn't require code knowledge.

Posts

Note: Do not forget to install the plugin Neuron Core, without the plugin none of the elements won't be available for use.

Content Tab

Functionality:
  • Post Type: Select the post type that you want to get on your isotope grid or carousel slider, new options will appear right after choosing different post type.
  • Layout: Select between the isotope grid layout or the carousel slider, new options will appear on the select.
  • Layout Type: Select between different isotope layouts, masonry fits the images like a wall, in metro you can change the column for each post indivdually on the query field and the fitrows is the option that fits the images on a row without messing around like masonry. This option is available only when isotope is selcted as layout.
  • Layout Model: The posts element is divided into two great types, one is the meta inside and the other one is meta outside, the meta inside means the title, category, and other post information are located inside the feature image cube, for more precisely on the hover, and vice versa for the meta outside, the title, category, and the other information are located below the featured image.
  • Query: Select the categories you want to get the posts from, if you do not select any category, all posts will be displayed on this element, if you select metro as layout model.
  • Posts Per Page: Enter the number of posts you want to display on the first page, a pagination will be created if there are more posts than this number.
Layout
  • Columns: Change the columns of the isotope grid, this option is exclusively when layout is isotope and the layout type is not metro, because the metro layout and the carousel use their own columns system.
  • Animation: Select the initial loading animation for posts, the default option is fade in, so when the page loads the posts will fade in smoothly with a great effect, there are a few options to choose from, you can also select none which will disable the animation effect.
  • Spacing: The spacing between posts by default is 30 pixels, so 30 pixels on each side from post to post, with this option you can override this value from 30 to any value from 0 to 100.
Meta
  • Thumbnail: Show or hide the thumbnail image, new options will appear at style tab when thumbnail is shown.
  • Title: Show or hide the title of the post, new options will appear at style tab when title is shown.
  • Date: Show or hide the date of the post, this option is valid only when post is selected as post type and layout model is meta inside.
  • Categories: Show or hide the categories of the post, this option is not valid in the shop.
  • Tags: Show or hide the tags of the post, this option is valid only when post is selected as post type and meta outside as layout model.
  • Excerpt: Show or hide the excerpt of the post, this option is valid only when post is selected as post type and meta outside as layout model.
  • Author: Show or hide the author of the post, this option is valid only when post is selected as post type and meta outside as layout model.
  • Price: Show or hide the price of the post, this option is valid only when product is selected as post type.
  • Results Count: Show or hide the result counts of the posts, this option is valid only when product is selected as post type.
  • Catalog Ordering: Show or hide the catalog ordering of posts, this option is valid only when product is selected as post type.
  • Default Order: Change the default order of the posts, can be very handy to select popular items and so on, this option is valid only when product is selected as post type.
Carousel
  • Items: Enter the number of the portfolio items you want to see on the screen on a slide.
  • Margin: Enter the margin space, the number will be represented in pixels.
  • Height: Select if you want to use auto height from images or set them custom.
  • Loop: Infinity loop. Duplicate last and first items to get loop illusion.
  • Mouse Drag: It enables the drag with the mouse.
  • Touch Drag: It enabled the touch drag.
  • Navigation: Shows the prev and next buttons on the carousel.
  • Dots: Shows the dots.
  • Autoplay: It plays by itself.
  • Pause on mover house: You will stop the play on mouseover.
  • Stage Padding: Padding-left and right on stage (can see neighbors).
  • Start Position: Enter from which element you want to start the position of the carousel.
  • AutoPlay Timeout: Autoplay interval timeout, the number is represented in seconds.
  • Smart Speed: Speed Calculate, the number is represented in seconds.
Filters
  • Visibility: Show the categories as filters. Make sure to add the categories in the query field.
  • Query: Select the categories you want to display as filters, this option does not affect the query, is created only to display filters on metro layout type..
  • Show All Filter: Show a filter which is able to filter all posts.
  • String: Change the text of the show all filter.
Pagination
  • Visibility: Select the visibility of pagination, the pagination will not visible in case there are less posts than the posts per page number.
  • Pagination Style: Select the pagination style, normal is with numbers and arrows and Show More is with button, normal works with pages and th show more button works with ajax, without reloading the page..
Thumnbail
  • Resizer: Activate a thumbnail resizer, it will crop all the images to a given width & height. It is very handy to save space on your host.
  • Thumbnail Sizes: Select the thumbnail size, you can add more thumbnail sizes at Appearance > Customize > General Options, or you can set the last value to custom and a new field will appear where you can add the width and the height..

Style Tab

Hover
  • Visibility: Select the visibility of hover, you can show or hide it via this option, new options will appear if show is selected.
  • Animation: Select between two great animations, scale and transition.
  • Active Hover: With this option the hover will appear on standing, so you don't need to mouseover the element to see the hover, it will be visible all the time.
  • Background: Change the background properties of the hover, you can add background image, gradient, plain color and much more.
  • Meta Vertical Alignment: Change the vertical alignment of metas, it's available only in meta inside.
  • Icon: Show or hide the icon of posts, it's available only in meta outside, except in shop where is avilable in both layouts.
  • Icon Vertical Alignment: Change the vertical alignment of icon.
  • Icon Horizontal Alignment: Change the horizontal alignment of icon.
  • Icon Color: Change the color of the icon.
Post Box
  • Border Type: Add a border to the post box, it wraps all around the item box of the post. It's visible only in meta outside.
  • Border Width: Change the border width, this option is available when the type is not selected none.
  • Border Color: Change the border color, this option is available when the type is not selected none.
  • Border Radius: Change the border radius of the post box.
  • Box Shadow: Add box shadow to the post box.
Meta Box
  • Margin: Add margin to the meta box, which is around the title and other meta tags, is also visible only in meta outside.
  • Padding: Add padding to the meta box, which is around the title and other meta tags, is also visible only in meta outside.
  • Background: Change the background properties of the hover, you can add background image, gradient, plain color and much more, is also visible only in meta outside.
  • Border Type: Add a border to the post box, it wraps all around the item box of the post. It's visible only in meta outside.
  • Border Width: Change the border width, this option is available when the type is not selected none.
  • Border Color: Change the border color, this option is available when the type is not selected none.
  • Border Radius: Change the border radius of the post box.
Title
  • Color: Change the color of the title.
  • Typography: Change the typography of the title.
  • Text Shadow: Add text shadow to the title.
  • Alignment: Change the alignment of the title.
Meta
  • Color: Change the color of the meta tags.
  • Typography: Change the typography of the meta tags.
  • Text Shadow: Add text shadow to the meta tags.
  • Icon: Show or hide the icon, which appears before the meta tags.
  • Icon Color: Change the color of the prefix icon.
  • Icon Size: Change the size of the prefix icon.
  • Icon Spacing: Change the spacing of the prefix icon.
  • Meta Alignment: Change the horizontal meta alignment.
Excerpt
  • Color: Change the color of the excerpt.
  • Typography: Change the typography of the excerpt.
  • Text Shadow: Add text shadow to the excerpt.
  • Alignment: Change the alignment of the excerpt.
Author
  • Color: Change the color of the author.
  • Typography: Change the typography of the author.
  • Text Shadow: Add text shadow to the author.
  • Avatar: Show or hide the author avatar.
  • Alignment: Change the alignment of the author.
Price
  • Color: Change the color of the price.
  • Typography: Change the typography of the price.
  • Text Shadow: Add text shadow to the price.
  • Alignment: Change the alignment of the price.
Results Count
  • Color: Change the color of the results count.
  • Typography: Change the typography of the results count.
  • Text Shadow: Add text shadow to the results count.
Filters
  • Color: Change the color of the filters.
  • Hover & Active: Change the hover & active of the filters.
  • Typography: Change the typography of the filters.
  • Text Shadow: Add text shadow to the filters.
  • Spacing: Add spacing to the filters.
  • Alignment: Change the alignment of the filters.
Pagination
  • Typography: Change the typography of the pagination.
  • Color: Change the text color of the pagination.
  • Background Color: Change the background color of the pagination.
  • Hover Animation: Add animation to the hover of the pagination.
  • Border Type: Add a border pagination, it wraps all around the button of show more. It's visible only in show more ajax pagination.
  • Border Width: Change the border width, this option is available when the type is not selected none.
  • Border Color: Change the border color, this option is available when the type is not selected none.
  • Border Radius: Change the border radius of the pagination.
  • Margin: Add margin to the meta box, which is around the title and other meta tags, is also visible only in meta outside.
  • Padding: Add padding to the meta box, which is around the title and other meta tags, is also visible only in meta outside.
  • Alignment: Change the alignment of the pagination.

Media Gallery

Note: Do not forget to install the plugin Neuron Core, without the plugin none of the elements won't be available for use.

Content Tab

Functionality:
  • Layout: Select between the isotope grid layout or the carousel slider, new options will appear on the select.
  • Layout Type: Select between different isotope layouts, masonry fits the images like a wall, in metro you can change the column for each post indivdually on the query field and the fitrows is the option that fits the images on a row without messing around like masonry. This option is available only when isotope is selcted as layout.
  • Layout Model: The posts element is divided into two great types, one is the meta inside and the other one is meta outside, the meta inside means the title, category, and other post information are located inside the feature image cube, for more precisely on the hover, and vice versa for the meta outside, the title, category, and the other information are located below the featured image.
  • Query: Add the images one by one via the repeater, you can also duplicate for faster use.
Layout
  • Columns: Change the columns of the isotope grid, this option is exclusively when layout is isotope and the layout type is not metro, because the metro layout and the carousel use their own columns system.
  • Animation: Select the initial loading animation for media gallery, the default option is fade in, so when the page loads the posts will fade in smoothly with a great effect, there are a few options to choose from, you can also select none which will disable the animation effect.
  • Spacing: The spacing between posts by default is 30 pixels, so 30 pixels on each side from post to post, with this option you can override this value from 30 to any value from 0 to 100.
Carousel
  • Items: Enter the number of the portfolio items you want to see on the screen on a slide.
  • Margin: Enter the margin space, the number will be represented in pixels.
  • Height: Select if you want to use auto height from images or set them custom.
  • Loop: Infinity loop. Duplicate last and first items to get loop illusion.
  • Mouse Drag: It enables the drag with the mouse.
  • Touch Drag: It enabled the touch drag.
  • Navigation: Shows the prev and next buttons on the carousel.
  • Dots: Shows the dots.
  • Autoplay: It plays by itself.
  • Pause on mover house: You will stop the play on mouseover.
  • Stage Padding: Padding-left and right on stage (can see neighbors).
  • Start Position: Enter from which element you want to start the position of the carousel.
  • AutoPlay Timeout: Autoplay interval timeout, the number is represented in seconds.
  • Smart Speed: Speed Calculate, the number is represented in seconds.
Thumnbail
  • Resizer: Activate a thumbnail resizer, it will crop all the images to a given width & height. It is very handy to save space on your host.
  • Thumbnail Sizes: Select the thumbnail size, you can add more thumbnail sizes at Appearance > Customize > General Options, or you can set the last value to custom and a new field will appear where you can add the width and the height..

Style Tab

Hover
  • Visibility: Select the visibility of hover, you can show or hide it via this option, new options will appear if show is selected.
  • Animation: Select between two great animations, scale and transition.
  • Active Hover: With this option the hover will appear on standing, so you don't need to mouseover the element to see the hover, it will be visible all the time.
  • Background: Change the background properties of the hover, you can add background image, gradient, plain color and much more.
  • Content Vertical Alignment: Change the vertical alignment of metas, it's available only in meta inside.
Post Box
  • Border Type: Add a border to the post box, it wraps all around the item box of the post. It's visible only in meta outside.
  • Border Width: Change the border width, this option is available when the type is not selected none.
  • Border Color: Change the border color, this option is available when the type is not selected none.
  • Border Radius: Change the border radius of the post box.
  • Box Shadow: Add box shadow to the post box.
Meta Box
  • Margin: Add margin to the meta box, which is around the title and other meta tags, is also visible only in meta outside.
  • Padding: Add padding to the meta box, which is around the title and other meta tags, is also visible only in meta outside.
  • Background: Change the background properties of the hover, you can add background image, gradient, plain color and much more, is also visible only in meta outside.
  • Border Type: Add a border to the post box, it wraps all around the item box of the post. It's visible only in meta outside.
  • Border Width: Change the border width, this option is available when the type is not selected none.
  • Border Color: Change the border color, this option is available when the type is not selected none.
  • Border Radius: Change the border radius of the post box.
Icons
  • Color: Change the color of the icons.
  • Size: Change the size of the icons.
  • Spacing: Add spacing between icons.
  • Alignment: Change the alignment of the icons.
Title
  • Color: Change the color of the title.
  • Typography: Change the typography of the title.
  • Text Shadow: Add text shadow to the title.
  • Alignment: Change the alignment of the title.
Subtitle
  • Color: Change the color of the subtitle.
  • Typography: Change the typography of the subtitle.
  • Text Shadow: Add text shadow to the subtitle.
  • Alignment: Change the alignment of the subtitle.
Description
  • Color: Change the color of the description.
  • Typography: Change the typography of the description.
  • Text Shadow: Add text shadow to the description.
  • Alignment: Change the alignment of the description.

Heading

A very simple element called heading but very powerful, has many use cases and its options make it very powerful and easy to use.

Content Tab:
  • Title: Enter the heading text, you can enter on the front end too, it's writable there too.
  • Link: Make the heading clickable with a link that you'll enter it on this field. If you click the cogs icon on the right two new options will appear, Open in a new window and Add no-follow.
  • Size: Change the size of the Heading element, the default size is the default size of the HTML tag.
  • HTML Tag: Change the element tag of heading, it's very useful for SEO reasons.
  • Alignment: Change the alignment of the heading, you can expand these options by clicking on the monitor, the same options will be available on tablet screens and mobile screen.
Style Tab:
  • Text Color: Simply change the color of heading with a simple picker, by moving the right bar you will be able to change the alpha of the color.
  • Typography: Advanced typography is included to change the typography properties, you can reset anytime the options of the typography.
  • Text Shadow: Add easily text shadow to the element, when you press on the pencil, an option for color, blur and horizontal, vertical will be displayed.
  • Blend Mode: The blend mode property defines how an element’s content should blend with its background. This means that any images or text, borders or headings will be influenced by this property.

Typed Heading

Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.

Content Tab:
  • Content: Add the words inside the double curly brackets, separate the words with commas. {{First Word, Second Word, Third Word}}
  • Loop: Make the text repeat after it's finished once.
  • Cursor Character: Change the cursor characted on typing the default one is _.
  • Type Speed: Enter the typing speed.
  • Start Delay: Enter the time that delays the start of words.
  • Back Delay: Enter the time that delays when it's start removing of words.
  • Back Speed: Enter the time that delays the remove of words.
  • HTML Tag: Choose any html tag, it's very handy for seo purposes.
  • Alignment: Select the alignment of the heading.
Style Tab:
  • Content Color: Enter the color of the heading.
  • Typed Color: Enter the color of the typed strings.
  • Typed Background Color: Enter the background color of the typed strings.
  • Content Typography: Change the typography of the heading.
  • Typed Typography: Change the typography of the typed strings.

Social Media

Present your social media with style, plenty of options offer unlimited possibilities for the style or layout.

Content Tab:
  • Social Icons: Add the social icons inside the repeater, in the first field you have to select the icon and in the second link you have to enter the URL of the social media, you can press on the cogs icon and two new options will appear for opening in a new window and adding a no-follow attribute to the link.
  • Shape: Various shapes can be selected for the social media elements for example rounded, square, circle.
  • Alignment: Easily align the social media on each side you want to be left, center, right or just.
Icon:
  • Color: The first option makes each social media color to be represented by its official color, so you don't need to add any custom color, the first option in the color is custom, so two new fields of color pickers will appear where you can select the primary and the secondary color of the social media.
  • Size: Adjust the size of the icon with a great looking spinner.
  • Padding: Add padding between the social media and its holder, it can be changed to different em size.
  • Border Type: The border type of social media can be changed to solid, double, dotted, dashed or groove.
  • Border Radius: Set border-radius to each corner, you can unlink the properties by clicking the icon on the right.
Icon Hover:
  • Primary Color: Change the primary color of the social media on hover.
  • Secondary Color: Change the secondary color of the social media on hover.
  • Hover Animation: Add a different animation to the social media on hover.

Counter

Set counters to a specific end number in a creative way, multiple settings will allow the element to be used attractively.

Content Tab:
  • Starting Number: Enter the starting number of the counter.
  • Ending Number: Enter the ending number of the counter.
  • Number Prefix: Add a number prefix, so the actual starting and ending number will have a prefix number.
  • Number Suffix: Add a number suffix, it will be displayed after the number and can be used for different symbols.
  • Animation Duration: Select the animation duration, the number is represented by milliseconds.
  • Thousand Separator: Add a separator between thousands.
  • Separator: Select the separator between thousand, the default is a comma, you can choose between dot and space.
  • Title: Add the title which usually is displayed below the counting number.
Style Tab:
  • Number
    • Text Color: Change the color of the number in the counter element.
    • Typography: Advanced typography is included to change the typography properties, you can reset anytime the options of the typography.
  • Text
    • Text Color: Change the color of the title in the counter element.
    • Typography: Advanced typography is included to change the typography properties, you can reset anytime the options of the typography.

Progress Bar

There are two progress bars, one default which comes from Elementor and the custom one that we have created, both are great for use, we'll explain the one that is located in Neuron Elements.

Functionality:
  • Title: Add the title above the progress bar.
  • Percentage: Select the percentage of the progress bar between 1 and 100.
  • Height: Enter the height of the progress bar, the default height is 6 pixels.
Style:
  • Color: Change the color of the bar.
  • Background Color: Change the background color of the bar.
  • Title Color: Change the color of the title which is placed above the bar.
  • Percentage Color: Change the color of the percentage unit.

Accordion

Using the Accordion element lets you save space while still presenting an abundance of content. Add the accordions with a great repeater where you can add the title and the content.

With the Accordion, visitors can scan the item titles, and choose to expand an item only if it is of interest.

When a page is loaded, the first item of the Accordion element is expanded, while all other items remain collapsed. With the Toggle element, however, all items are collapsed when a page is first loaded.

Only one item of an Accordion can be expanded at one time. As you expand another Accordion item, the previously opened item automatically collapses, looking similar to an accordion. With the Toggle element, however, as many items as desired can be expanded at the same time.

Content:
  • Accordion Items Title & Content: Enter the title and description for each item.
  • Icon: Select the icon to represent the action of expanding an item.
  • Active Icon: Select the icon to represent the action of collapsing the active item.
  • Title HTML Tag: Set the HTML tag used for the title to h2- H6 or DIV.
  • Add Item: Use the 'Add Item' button to add more accordion items to the list.
Style:
  • Accordion
    • Border Width: Set the thickness of the border around the accordion and between each item.
    • Border Color: Choose the color of the border around the accordion and between each item.
  • Title
    • Background: Choose the color of the title’s background.
    • Color: Choose the color of the non-active titles’ text.
    • Active Color: Choose the color of the active title’s text.
    • Typography: Set the typography options for the titles.
    • Padding: Set the padding for the titles.
  • Icon
    • Alignment: Align the icon to the left or right of the title.
    • Color: Choose the color of the icons.
    • Active Color: Choose the color of the active icon.
    • Spacing: Control the spacing between the icon and the title.
  • Content
    • Background: Choose the background color of the content.
    • Color: Choose the text color of the content.
    • Typography: Set the typography options for the content.
    • Padding: Set the padding for the content.

Toggle

The toggle element lets you create text boxes that are collapsed, so the visitor only sees the titles of each text box item. This lets you show your content in a condensed form, so visitors don't have to scroll through a long page and can sift through the titles easily.

A similar element is the Accordion element, but there are two main differences between the Toggle element and the Accordion element.

  1. When a page is loaded, all toggle element items are collapsed. With the accordion element, however, the first item is expanded, while all other items remain collapsed.
  2. With the Toggle element, as many items as desired can be expanded at the same time. With the Accordion element, however, only one item can be expanded at one time. As you expand another Accordion item, the previously opened item automatically collapses, looking similar to an accordion.
Toggle
  • Toggle Items: Enter the title and description for each item.
  • Icon: Select the icon to represent the action of expanding an item.
  • Active Icon: Select the icon to represent the action of collapsing the active item.
  • Title HTML Tag: Set the HTML tag used for the title to h2- H6 or DIV.
  • Add Item: Use the 'Add Item' button to add more toggle items to the list.
Style
  • Border Width: Set the thickness of the border around the toggle element and between each item.
  • Border Color: Choose the color of the border around the toggle element and between each item.
  • Space Between: Set the amount of space between each item.
  • Box Shadow: Set the box shadow around the toggle element, or around each item if there is space between each. You can adjust the box shadow’s Color, Horizontal position, Vertical position, Blur, and Spread as well as the shadow’s - Position, which can be either Inset or Outline.
Title
  • Background: Choose the color of the title’s background.
  • Color: Choose the color of the non-active titles’ text.
  • Active Color: Choose the color of the active title’s text.
  • Typography: Set the typography options for the titles.
  • Padding: Set the padding for the titles.
Icon
  • Alignment: Align the icon to the left or right of the title.
  • Color: Choose the color of the icons.
  • Active Color: Choose the color of the active icon.
  • Spacing: Control the spacing between the icon and the title.
Content
  • Background: Choose the background color of the content.
  • Color: Choose the text color of the content.
  • Typography: Set the typography options for the content.
  • Padding: Set the padding for the content.

Icon List

The Icon List element creates an easy-to-manage list of items, with each item highlighted by its own icon.

Content Tab
  • Layout: Choose Default or Inline. Default displays items in a vertical list, while Inline displays items horizontally.
  • Items
    • Text: Enter the list item’s text
    • Icon: Select the icon for the item
    • Link: Enter the URL for the item’s link. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window.
  • Tip: Quickly duplicate or delete items by clicking an item’s Duplicate or Delete icon
Style
  • List
    • Space Between: Control the space between list items
    • Alignment: Align the list left, right, or center
    • Divider: Turn the item divider lines on or off, if the Divider option is turned on, the following style options become available:
      • Style: Choose from Solid, Double, Dotted or Dashed
      • Weight: Set the thickness of the divider
      • Width: Control the width of the divider relative to the container
      • Color: Choose the divider’s color
  • Icon
    • Color: Choose the icon’s color.
    • Hover: Choose the color of the icon’s hover state.
    • Size: Set the exact size of the icon.
  • Text
    • Text Color: Choose the color of the text.
    • Hover: Choose the color of the text’s hover state.
    • Text Indent: Set the distance between the icon and the text.
    • Typography: Set the typography options for the text.

Contact Forms

Make sure to install and activate the plugin Contact Form 7, without the plugin you won't be able to create contact forms.

The contact forms are created on the WordPress dashboard menu item called Contact, you can configure them and use them later via the Elementor element shortcode. An example of use.

[contact-form-7 id="5430" title="Classic Style"]

The created form in the contact section:

- https://pastebin.com/raw/EkFF433y

Button

The Button element helps you easily design and customize buttons without the need for any other plugins or shortcodes.

Content
  • Type: Select from 5 styles of buttons to begin your design. Choose from Default, Info, Success, Warning, or Danger
  • Text: Enter the button’s text
  • Link: Set the URL for the button’s link. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link
  • Alignment: Align the button to the left, center, right, or justified in relation to its column.
  • Size: Select the preset button sizes, from Extra Small to Extra Large
  • Icon: Select a FontAwesome icon to display on the button
  • Icon Position: Set the icon to appear before or after the button text
  • Icon Spacing: Adjust the amount of space between the icon and the button text
  • Button ID: (Optional) Assign a unique button ID to use for situations such as Google Analytics events
Style
  • Typography: Change the default typography options for the button’s text.
  • Text Color: Select the color of the button’s text.
  • Background Color: Select the button’s background color for both Normal and Hover states.
  • Hover Animation: Click on the Hover tab to set a Hover Animation.
  • Border Type: Select the type of border to use around the button.
  • Width: Control the thickness of the border around the button.
  • Color: Choose the border’s color.
  • Border Radius: Set the border radius to control corner roundness.
  • Box Shadow: Set options to apply a box shadow on the button.
  • Padding: Change the padding settings of the button.

How to Track "Button onClick" Event (for Facebook Pixel, Google Analytics or Google Tag Manager)

Follow these steps to track button onClick events:
  1. Edit Button > Advanced > set CSS ID = My_Button
  2. Add to the page HTML widget (after the button will be fine)
  3. Paste the following code into the HTML Code field:
<script type="text/javascript"> 
    document.addEventListener("DOMContentLoaded", function (event) {
        jQuery('#My_Button a').click(function () {
            // tracking code here
            // for example Facebook Pixel: 
            fbq('track', 'AddToCart');
        });
    }); 
</script>

Icon Box

Icon boxes come in very handy when building websites. The most common usage is for sections that list features of products or services. It has various options you get to customize every element of this widget: the icon, the headline, and the description. The icons are derived from the Font Awesome Icons, and you are able to search through them and pick the right one.

Content Tab
  • View: Set the view of the icon as 'Default', 'Stacked' or 'Framed'. Stacked is with a background and frame is with a frame surrounding the icon.
  • Choose Icon: Here you have a list of the entire collection of Font Awesome icons.
  • Title & Description: Insert the title and description of your Icon Box widget.
  • Link to: Insert a link, and choose if it will open on a new window.
  • Icon Position: Set the position of the icon on the left, top or right side of the box.
  • Title HTML Tag: Choose the title tag, from h2..H6, Div, Span or P.
Style Tab
  • Icon
    • Primary Color: note that if you choose stacked or framed icon box, you will also have a secondary color.
    • Icon spacing: The space between the icon and the heading.
    • Icon size: Scale up and down the size of the icon.
    • Icon Rotate: Rotate the icon.
  • Icon Hover
    • Color: Choose the primary and secondary color for the icon hover.
    • Animation: Choose from a long list of animations for the hover.
  • Content
    • Title
      • Alignment: Left, centers, right or justified.
      • Vertical Align: Top, middle and button.
      • Title Spacing: Set the spacing between the title and the description.
      • Title color: Change the color of the title.
      • Typography: Here I can customize the typography of the title.
    • Description
      • Description Color: Change the color of the description.
      • Typography: Choose custom to change the typography, just like with the title.

Image Box

The Image Box element lets you add an image box that combines an image with a headline and text, which is often used in features sections, as an alternative to using the Icon Box element.

Content
  • Choose Image: Select an image from the media library, or upload a new image
  • Image Size: Select the size of the image, from thumbnail to full, or enter a custom size
  • Title & Description: Add the title and description that will appear in the image box
  • Link to: Enter the URL for the item’s link. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window.
  • Image Position: Set the position of the image to the left, top or right, relative to the title and description
  • Title HTML Tag: Set the HTML tag of the title as h2...H6, div, span or paragraph
Style
  • Image
    • Spacing: Set the exact space between the image and the title
    • Width: Scale the image width from 0 to 100%
    • Hover Animation: Add Hover Animation to the image
    • CSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings in Normal and Hover states
    • Opacity: Control the opacity of the image in Normal and Hover states
    • Transition Duration: Set the time it takes for each slide to appear. This time is in milliseconds, so 1000 ms is equal to 1 second
  • Content
    • Alignment: Align the content to the left, right, center or justified
    • Vertical Alignment: Align the content to the top, middle or bottom of the box
    • Title Spacing: Set the space between the title and description
    • Title Color: Set the color of the title
    • Title Typography: Set the typography options for the title
  • Description
    • Color: Set the color of the description text
    • Typography: Set the typography options for the description

Divider

The Divider element allows you to add style, horizontal lines that divide your content. This is a basic element, but it can help you create nice effects as separators of various sections, or for highlighting your headings.

  • Style: Choose between solid, double, dotted or dashed styles.
  • Weight: Control the thickness of the divider.
  • Color: Choose the color of the divider.
  • Width: Control the width of the divider as a percentage from 0 to 100 percent.
  • Alignment: Align the divider to the left, center or right of the page.
  • Gap: Control the space above and below the divider

Shape Divider

Shape dividers are graphic shapes that separate the sections of a page.

How to Add Shape Dividers
  1. Add a new Section
  2. Go to Section > Style > Shape Divider
  3. Choose to display at the Top or Bottom of your section
  4. Type: Click the drop-down to choose your Shape Divider style
  5. Color: Pick a color
  6. Width: Set the width of your Shape Divider
  7. Height: Set the height of your Shape Divider
  8. Flip: Flip the direction of your Shape Divider
  9. Bring to front: Force your Shape Divider to be in front of other objects

Page Settings

All the page settings are very optional, you can manage all the same settings from the theme options. The reason why the page settings exist is to modify the actual settings with different values for certain pages.

General

  • Layout: Change the layout of theme, default is normal. You can change it to boxed, with boxed means the content will be boxed in a specified width and a background color will be applied behind, also a new option will pop up where you can select the color of the background.
  • Title: Show or hide the title of this page/post. You can inherit the value from theme options or set it custom, the inherit option is located at Customizer > Utility > Title.
  • Breadcrumb: Show or hide the breadcrumb of this page/post. You can inherit the value from theme options or set it custom, the inherit option is located at Customizer > Utility > Breadcrumbs.
  • Redirect: Make this post/page a redirect, when you enable the switch a new field will appear where you can build your link by entering the URL and text or selecting any page from your website.

Header

  • Layout
    • Skin: You can change the skin of the header on this option, by changing skin you change the header background and the element of the header color. What does that mean? If you select the light skin, the skin will be oriented on the light color, the background of the header will be light and the elements will have a dark color, which will be a great combination between these two colors.
    • Position: The position of header usually stands at a static version which means, the header comes first with its properties then all the elements below it. With the absolute option, you'll move the content to the top and the header will stay onto it.
    • Transparency: A very effective option which is needed for many websites, if you want to have the header fixed when you scroll you have to enable this option of transparency.
    • Autohide: If you selected the transparency to sticky, you can play around if you want to hide the header when scrolling down, so it will be displayed only when you scroll up.
    • Container: The container is another fancy word for box, so if you enable this option the header will stay inside the container, around 1140 pixels wide.
  • Logo
    • Dark Logo: Upload the logo that will appear on all headers, it is used as a normal logo, it won't be visible only in the light skin.
    • Light Logo: Upload the logo that will appear on the light skin.
    • Width: Use this option to change the width of the image, it can be used when you want to upload larger logos for better resolution, like 2x retina.
    • Height: Use this option to change the height of the image, it can be used when you want to upload larger logos for better resolution, like 2x retina.
  • Other
    • Search - Select the visibility of the search.
    • Top Header - Select the visibility of the top header.
    • Sliding Bar - Select the visibility of the sliding bar.
    • Shopping Cart - Select the visibility of the shopping cart.
Note: All the options that are being inherited are located in Customizer > Header.

Footer

General
  • Skin: You can change the skin of the footer on this option, by changing skin you change the footer background and the element of the footer color. What does that mean? If you select the light skin, the skin will be oriented on the light color, the background of the footer will be light and the elements will have a dark color, which will be a great combination between these two colors.
  • Container: The container is another fancy word for box, so if you enable this option the footer will stay inside the container, around 1140 pixels wide.
Widgets
  • Widgets: Show or hide the widgets on the footer section, you'll be able to select the widgets on the Appearance > Widgets, there you can modify or add widgets to each sidebar, the sidebars of footer are called Footer Sidebar 1, 2, 3 and so on till the 6.
  • Widgets Columns: Select the columns of the widgets. Be careful when selecting the columns, for example, the footer sidebar 5 won't be visible if you have selected only 4 columns.
  • Widgets Mobile: With this option, you'll be able to hide the widgets on mobile devices (991px and smaller), can be really helpful sometimes when you need to hide them due to a better structure.
Copyright
  • Alignment: Select the alignment of copyright, if selected left the social media will be placed on the right and vice versa.
  • Social Media: Show or hide the social media in the footer. The default option is show.
Note: All the options that are being inherited are located in Customizer > Footer.

Hero

  • Settings:
    • Visibility: Show or hide the hero, all posts and pages will have the option to inherit this value or set it individually. The hero is a large section attached to each post/page which has the title and the subtitle field, the title field has the option to grab the page/post title or set it custom, the same is for the subtitle, the breadcrumb can be attached to the subtitle.
    • Height: Enter the height of the hero, do not forget to add the unit too, for example, px/vh/rem/em/%. The default option is 45vh, the ‘vh’ unit means 45 % of the total height of the screen.
    • Container: The container is another fancy word for box, so if you enable this option the hero content will stay inside the container, around 1140 pixels wide.
    • Alignment: Select the alignment of the title and subtitle on the hero, the default option is center.
  • Image:
    • Image: Select the image you want to display as hero background image, you have the option to use the theme default image, the featured image or a custom image where you can upload a .png or a .jpeg image.
    • Repeat: The background-repeat property sets if/how a background image will be repeated. Tip: The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.
    • Attachment: The background-attachment property sets whether a background image scrolls with the rest of the page or is fixed.
    • Position: The background-position property sets the starting position of a background image.
    • Size: The background-size CSS property specifies the size of the element's background image. The image can be left to its natural size, stretched to a new size, or constrained to fit the available space while preserving its intrinsic proportions.
    • Overlay: Show an overlay for the background image.
    • Overlay Opacity: Change the opacity of the overlay, a range from 0 to 1. That is the transparency of the overlay background color.
    • Overlay Color: Change the color of the overlay.
  • Title:
    • Title: Select which title you want to display on the hero, you can use the post/page title or set it a custom title, each post/page has the option to inherit this value or to set it custom.
    • Title Animation: Select the initial loading animation for the title, the default option is fade in, so when the page loads the title will fade in smoothly with a great effect, there are a few options to choose from, you can also select none which will disable the animation effect.
  • Subtitle:
    • Subtitle: Select if you want to inherit the subtitle or set it custom.
    • Subtitle Animation: Select the initial loading animation for the subtitle, the default option is fade in, so when the page loads the subtitle will fade in smoothly with a great effect, there are a few options to choose from, you can also select none which will disable the animation effect.
Note: All the options that are being inherited are located in Customizer > Utility > Hero.

F.A.Q

I can't change my logo?

In the theme you can either use the header that comes as default where you can upload the logo from Customizer and manage it from there or via Elementor where you can create headers and assign them to different pages. If you imported the demo from the one click demo importer, the chances are high that you're using a header template and not the default header. Hover onto button Edit with Elementor and see if there appears a header template. Screenshot. Click onto the template and the editor for that template will be opened where you can easily edit it.
- Video Tutorials about header builder.

Breadcrumb is not hiding?

You probably are switching ON/OFF the option breadcrumb and still seeing a "breadcrumb" on your page, that's because breadcrumb is placed in two locations, as a stand alone part and as subtitle in the hero. Hero options are located in two different places, in the Appearance > Customizer > Utility > Hero, where it can be enabled or disabled for all pages at once, also there are options in each post or page where you can choose if you want to inherit the values from the Customizer or set them custom. So if you want to hide the hero for a single page, edit that page with regular WordPress editor and go to Page Settings > Hero > Visibility.

How to import/export Elementor templates?

How to export elementor templates?
  1. Edit the page with Elementor and at the bottom left you'll see a carret that will open a menu. Screenshot
  2. Enter the name of the template and click save. Screenshot
  3. The templates that are saved in your WordPress will appear under 'My Templates', at the right edge you'll see three dots, click them and you'll see the option to delete or export the template. Screenshot
  4. There's also another way to export the templates by going in the WordPress dashboard at Templates > Saved Templates. Screenshot
How to import elementor templates?
  1. Go to Templates > Saved Templates.
  2. Click the Import Templates button.
  3. Choose the file you want to import and click the Import Now button.
  4. Your imported template will now be displayed in your Templates list or in the folder icon, where can be found at the bottom of a page or a post when editing with Elementor.

How to Import Revolution Slider Templates?

When importing the demo and you see that the Slider Revolution is not displayed on your page, there's a quick way to import the pre-made demos from our team.

  1. From the WordPress dashboard go to the Slider Revolution menu item. Screenshot
  2. Click on the Manual Import. Screenshot
  3. Inside the bifrost > includes > demo-importer > revslider, you will find the sliders that are pre-built with our theme, they also are in the dummy_content folder of the theme package.
  4. Drag & drop them into the Revolution Panel. Screenshot
How to place the slider?
Via shortcode:
  1. Go to the setting of the slider you want to display in your page and grab its shortcode. http://prntscr.com/n7bsr1
  2. Edit the page with Elementor and place a shortcode element, inside that enter the shortcode of the slider. http://prntscr.com/n7bu3z
In Elementor: They will be available to use via the element Slider Revolution in Elementor. Screenshot

My Slider Revolution is not activated?

You probably got confused, the author wrote that you need to paste the Envato Purchase Code, but that's the license of his plugin(Revolution Slider), not the license of our theme. We have purchased an extended license and included it for free in our theme, so you don't have to purchase and extra license for Revolution Slider. For more information about bundled plugins: Bundled Plugins.

We would love to give free access to our customers in their template library, but we cannot share our license, since we have only one. They have the such called Direct Customer Benefit. That's their idea not ours, we're sorry. link

If your theme is not running on the latest version of the Slider Revolution, please check on ThemeForest if the theme has been updated recently or not. Screenshot

You can also check on the theme changelog if the recent Slider Revolution is added or not. Screenshot

If you see that the latest version is added, simply download a copy in ThemeForest > Downloads and extract that zip file, inside onto includes > plugins you'll find the zip file of Revolution Slider (revslider.zip). If you see that is not the latest version, create a ticket or let us in the comments that we should update it.

Changelog 

Version: 2.3.2
- Fix: ACF plugin installation
- Fix: WooCommerce 9.4.X Compatible
- Fix: Elementor 3.25.X Compatible
- Update: Slider Revolution: 6.7.21 

Version 2.3.1
- Compatible: WooCommerce 9.3.3

Version 2.3.0
- Compatible: WooCommerce 9.1.2

Version 2.2.9
- Compatible: Elementor 3.20.X
- Compatible: WooCommerce 8.6.1
- Update: Revslider 6.6.20
- Neuron Core: 2.2.0
    - Fix: Menu Cart issue

Version 2.2.8
- Compatible: Elementor 3.16.X
- Update: Revslider 6.6.16
- Neuron Core: 2.1.9
    - Fix: Media Gallery masonry layout issue

Version 2.2.7
- Update: Revslider 6.6.15
- Compatible: WordPress 6.2.X
- Compatible: WooCommerce 8.x.x 
- Fix: Error when activating theme (specific hosting providers)

Version 2.2.6
- Rev Slider: 6.6.12

Version 2.2.5
- Neuron Core: 2.1.7
    - Fix: WPML issue on Elementor Widgets

Version 2.2.4
- Update: Slider Revolution 6.6.5

Version 2.2.3
- Compatible WooCommerce 6.x.x
- Update: Slider Revolution 6.6.4

Version 2.2.2
- Compatible: WooCommerce 5.6.0 Ready
- Update: Slider Revolution 6.5.8
- Fix: Merlin Logger throws issue on PHP 8.0

Version 2.2.1
- Fix: WooCommerce 5.4.1 Ready
- Update: Slider Revolution to 6.5.2

Version 2.2.0
- Fix: Issue on tgmpa when installing theme on local
- Fix: WooCommerce 5.2.2 Ready
- Update: Slider Revolution to 6.4.8

Version 2.1.9
- Fix: Leave a reply string translatable
- Fix: functions.php line 319 issue

Version 2.1.8
- Fix: Loading Issue in WordPress 5.6.0
- Neuron Core: 2.1.6
- Fix: Loading issue in Safari & Firefox

Version 2.1.7
- Fix: WooCommerce Compatible 4.8.0
- Fix: WordPress Compatible 5.6.0
- Fix: Slider Revolution: 6.3.3
- Neuron Core: 2.1.4
- Fix: Custom Post Types Support in Posts
- Fix: Issue on Posts loading in Firefox

Version 2.1.6
- Neuron Core 2.1.3
- Fix: WPML Translate: Countdown, Media Gallery, Search Form, Price List, Testimonial Carousel, Progress Bar

Version 2.1.5
- Fix: WordPress Compatible 5.5.3
- Fix: Woocommerce Compatible 4.7.0
- Fix: Slider Revolution 6.3.1

Version 2.1.4
- Fix: WooCommerce Compatible 4.4.1
- Neuron Core Plugin (2.1.2):
	- Fix: Mega Menu & Mobile Menu Calculation in Elementor 3.0

Version 2.1.3
- Fix: WooCommerce Compatible 4.4.0

Version 2.1.2
- Fix: WordPress Compatible 5.5.0
- Fix: WooCommerce Compatible 4.3.3
- Fix: Slider Revolution 6.2.22

Version 2.1.1
- Fix: WooCommerce Compatible 4.2.0
- Fix: WordPress Compatible 5.4.x

Version 2.1.0
- Fix: WooCommerce Compatible 4.0.x
- Fix: WordPres Compatible 5.4.0
- Fix: Slider Revolution 6.2.10
- Fix: Add to Cart Translation
- Fix: Title not showing in Side Portfolio
- Fix: Post Type translatable in Search Page
- Fix: Theme doesn't fail without WooCommerce
- Neuron Core (2.1.0):
- Fix: Hamburger not opening menu in editor
- Fix: Template Element not being translated with WPML
- Fix: Related Portfolio Items doesn't work when more than one category
- Fix: Google Maps breaks when entering markers with multi lines content.
- Fix: Auto Query will work on archive pages.
- New: New Filter for share social icons in single. 'bifost/share_icons/after'

Version 2.0.5
- WooCommerce Compatible 3.9.2 (Fix)
- Revolution Slider 6.1.8 (Update)
- Password Protection for Portfolio Item Tabs (Fix)
- Password Protection for Portfolio Item Gallery (Fix)
- Pagination not working properly in Shop Archive (Fix)
- Increase z-index of Close Search Icon (Fix)
- Neuron Core(2.0.2): 
    - Call the google api when using only Advanced Google Map element (Fix)
    - Meta Description in Meta Inside of Media Gallery (Fix)

Version 2.0.4
- WordPress Compatible 5.3.2 (Fix)
- WooCommerce Compatible 3.9.0 (Fix)
- Slider Revolution 6.1.7 (Update)

Version 2.0.3
- WordPress Compatible 5.3.1 (Fix)
- WooCommerce Compatible 3.8.1 (Fix)
- Show More Issue on Post Element(Fix)
- Slider Revolution 6.1.5 (Update)

Version 2.0.2
- Neuron Core 2.0.1
- Hamburger ID issue (Fix)

Version 2.0.1
- Slider Revolution 6.1.3 (Update)
- WordPress Compatible 5.2.4 (Fix)
- WooCommerce Compatible 3.7.1 (Fix)
- Mobile Menu Calculation on IE & Firefox (Fix)
- Footer Social Media Missing Style on Right (Fix)

Version 2.0.0
- Simple Portfolio Demo (New)
- Shop Fashion Demo (New)
- Restaurant Demo (New)
- Simple Photography Demo (New)
- Architecture Demo (New)
- App Landing Demo (New)
- Studio Agency Demo (New)
- Education Demo (New)
- Justify Portfolio Demo (New)
- Construction Demo (New)
- Personal Portfolio Demo (New)
- Creative Agency Demo (New)
- Shop Parallax Demo (New)
- Wedding Demo (New)
- Product Carousel Demo (New)
- Saas Landing Demo (New)
- Dark Portfolio Demo (New)
- Furniture Store Demo (New)
- Travel Agency Demo (New)
- Interactive Grid Demo (New)
- Projects Showcase Demo (New)
- Medium Blog Demo (New)
- Portfolio Tooltip Demo (New)
- Products Showcase Demo (New)
- Projects Gallery Demo (New)
- Video Showcase Demo (New)
- Simple Blog Demo (New)
- Portfolio Boxed Demo (New)
- Designer Landing Demo (New)
- Interactive Links Demo (New)
- Portfolio Fixed Demo (New)
- Interactive Posts Element (New)
- Instagram Element (New)
- Testimonial Carousel Element (New)
- Advanced Google Maps Element (New)
- Price List Element (New)
- Animated Headings Element (New)
- Template Element (New)
- Advanced Demo Importer (New)
- Theme Borders (New)
- Site Width (New)
- Related Posts (New)
- Parallax Footer (New)
- Author Box (New)
- Justify Layout (New)
- Meta Fixed & Meta Tooltip (New)
- Video to Media Gallery (New)
- Offset Grid Style (New)
- Extra Loading Animation (New)
- Auto Query for Related Posts (Fix)
- Responsive Column Options (Fix)
- Code and Selectors Refactor (Fix)

Version 1.1.0 
- Portfolio Metro Demo (New)
- Portfolio Split Demo (New)
- Coming Soon Page (New)
- Header Builder (New)
- Footer Builder (New)
- Nav Menu Element (New)
- Menu Cart Element (New)
- Search Element (New)
- Hamburger Element (New)
- Site Logo Element (New)
- Site Title Element (New)
- Countdown Element (New)
- Fixed Section Options (Updated)
- Body Offset Options (Updated)

Version 1.0.0 
- Initial Release