Logico — Transportation & Logistics WordPress Theme

02. Theme Requirements

To use Logico, make sure your hosting provider is running the following software:

WordPress 6.3 or higher.
PHP 7.4 or greater. WordPress officially suggests to use PHP 7.4.
MySQL 5.6 or greater OR MariaDB version 10.5 or greater.
PHP modules: php-xml, php-dom and XMLReader.

Recommended PHP Limits

All the issues that you may run into such as: white screen, demo content fails when importing, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web hosting provider and ask them to increase those limits to the following minimums:


                        memory_limit = 512M

                        post_max_size = 512M

                        upload_max_filesize = 500M

                        max_input_time = 1000

                        max_execution_time = 1000

Please bear in mind that in order to set limits or change your PHP version you or your hosting provider must have access to server settings and php.ini file.

You can read more about system recommendations on the official WordPress and Elementor websites.

03. Quick Start guide

Let’s begin by making sure that you have a recent version of WordPress. If you don’t, you can find an installation guide at the following address: https://wordpress.org/support/article/how-to-install-wordpress/

First download a zip-archive containing the theme from ThemeForest. Inside the archive you will find another archive, called logico.zip Extract this archive into a convenient location, then proceed to installing the theme. You can achieve this in two ways:

Installation with built-in WordPress tools.

This is the easiest way. You need to go to Appearance > Themes

Click on the Add New button

Click on the Upload Theme button

In the window that appears after this choose the logico.zip archive from the location you unpacked it to and click the Install Now button.
Uploading via an FTP-client or through a file manager built into the hosting.

First of all you need to unpack the contents of the logico.zip archive. Then by means of an FTP-client (like FileZilla or similar to it) or using the file manager of the hosting you should copy the extracted folder, called logico, to the ../wp-content/themes/ folder which you can find in the WordPress root folder.

After doing this you can go to Appearance > Themes in the WordPress admin dashboard and pick Logico theme from a list of available themes. Then just click the Activate button.

The theme is installed!

Next you can begin installing plugins. You will need them for the theme to work properly. After you finished installing the theme you should see a following message:

Click the Begin activating plugins link.

Chose all of the suggested plugins, then choose the Install option in Bulk Actions field and click Apply button.

Wait for the plugins installation process to finish, this may take several minutes.

All that’s left to do is to load the demo-data.

Bear in mind that during the demo-data installation all of your posts, pages and products are deleted and some of the settings of WordPress and WooCommerce are changed. We recommend installing the demo-data on top of a clean WordPress setup to ensure that you will not lose any of your important data. If you want to install demo data on top of a live site and do not want to lose data, contact our support. Our specialists will be happy to help you.

Then go to the Dashboard menu: Appearance > Import Demo Data, select the desired demo data set and click the Import Demo button.

That’s it! In order to see the results you should move your mouse pointer towards your web-site name in the top left corner of the screen and click the Visit Site button in the menu that will appear.

04. Customization

Our theme has flexible settings. This chapter of the manual will explain each one of them.

All of the settings can be divided into the following categories:

WordPress Settings — general settings common for all of the WordPress-based web-sites. To access these settings you should click the Dashboard menu: Settings button. You can further read about these settings in detail at the following URL: https://wordpress.org/support/article/administration-screens/#settings-configuration-settings.
Elementor Site Settings — we are going the way of "symbiosis" with the Elementor plugin. Elementor has convenient typography settings and our theme can work with them. If the Elementor plugin is not installed, the typography settings will appear in the WordPress Customizer. To access Elementor Site Settings, you need to open the Elementor editor and click on the 'Site Settings' button in the upper left corner:
Customizer Settings — general theme settings which are applied to all of the web-site pages by default. To access these settings click Dashboard menu: Appearance > Customize button.
Metabox Settings — settings for each page or post. These settings are mostly the same as Customizer Settings, but they have a higher priority and affect only a page or a post you used them for. You can find Metabox Settings at the bottom of any post or page editing screen.

In our demo data, the header and footer of the home pages are individually configured to show the capabilities of the theme. Also, the background of the Page Title block is often individually set. All of this is done via Metabox settings. To make the page obey the general settings again, you need to leave the fields empty in the metaboxes and select the 'Default' value in the drop-down lists.

Customization Hints

1. How to work with colors?

You can find primary theme color settings in the Dashboard menu: Appearance > Customize -> Color Settings. Standard Colors are used for the most part of the website, these are the main theme colors. Contrast Colors are used for contrast portions of the theme: top bar, footer, drop-down levels of the main menu, drop-down sidebar. The names of the colors can help you understand where these colors are mainly used.

E.g., if you want to change all the default colors of a theme you’re in the right place to do it.

If you don’t use the 'Elementor Header & Footer Builder' plug-in, you can set a color for each of the logic parts of a page separately: top bar, header, page title and footer. To do that go to the corresponding settings section and then to the sub-section 'General' where you can set the 'Customize' setting to 'Yes' value. If the 'Elementor Header & Footer Builder' plug-in is active then the header, top bar, page title and footer color settings are unavailable. You can change the color of any element separately in the Elementor editor instead.

You can also find all of these settings for separate pages. They are located in the metaboxes.

There might be situations where you only want to change the color of a specific block. You can do that in the Elementor editor. Color schemes are available for some of the blocks. Such blocks have a ‘Colors’ section in the ‘Styles’ tab. Color schemes are available for Container, Grid and Text Editor blocks. All the rest of the blocks contain color settings for each of their corresponding parts in the 'Style' tab:

We recommend you set the colors starting with general settings then moving to specific ones. E.g. firstly you should set the default theme colors in the Customizer settings. Then if it is necessary you can change the settings of each separate page next. And then you can change the settings of separate blocks last.

2. How to work with fonts?

The theme doesn’t allow adding your own fonts at present. Such capability might be added to it in future updates. You can choose the fonts available in Google Fonts collection. As with colors you should set typography settings on a general to specific basis. If the Elementor plug-in is not installed you can set the fonts in the Dashboard menu: Appearance > Customize -> Typography Settings. If Elementor is active you should set the fonts at the Elementor Site Settings > Typography:

Also the Elementor editor has separate font settings for each of the blocks’ elements at the ‘Style’ tab.

3. How do I switch the theme to rounded style?

So, in version 1.1.0 of the theme, the ability to switch the theme style to rounded has been added.

If you are creating a new site, then simply install the demo data for the rounded version. Everything will be configured automatically.

If you already have a ready-made site, then you will need to do a few things.

First of all, go to the Dashboard menu: Appearance > Customize -> Additional Settings > Theme Style and switch the 'Select theme style' setting to 'Rounded'. Then save the settings.

Now you need to go through the pages of the site and set the border-radius value for sections with a background. Also, pay attention to the headers created in Elementor. They can also round the corners in blocks with a background, and in the Header Button it is better to select the Animation = Fade setting.

Also, if when setting up widgets you manually selected the border-radius = 0 value, then you will need to delete this value if necessary.

4. How to set up RTL version of the theme?

Our theme is RTL-adapted and has separate RTL styles. Switching should happen automatically when you select an RTL-oriented WordPress language. In this case, the ⟨body⟩ tag should have the .rtl class. Sliders should also switch to RTL mode on their own.

You will need to go through the pages created in Elementor (including headers and footers) and change the columns and indents where necessary.

5. How to change the header and footer for the entire site and for a separate page?

Our theme gives you an ability to customize the footer and the header of your website flexibly for each of its pages separately.

Let’s take a look at several different cases.

Case one is when you don’t have the 'Elementor Header & Footer Builder' plug-in active. Then the header and footer customization for your website is done through Customizer settings: Appearance > Customize -> Header Settings and Appearance > Customize -> Footer Settings. This will set the default header and footer for all of the website’s pages. You can read more about it here: Header Settings and here: Footer Settings.

Some of our home pages on demo site have different Header and Footer appearance, different visible elements and widgets from those set in Customizer. You can change them via Metabox Header and Footer settings in at the bottom of any post or page editing screen. If you need to use default settings from Customizer just leave settings fields empty or select the 'Default' value in the drop-down lists.

All Header elements like Logos, Icons, Buttons etc. are part of Header template and can be changed only via Customizer or Metabox settings. Only Header Menu can be changed in Appearance > Menus page or in Appearance > Customize -> Menus section. Footer elements like widgets on the other hand can be edited in Appearance > Widgets page or Appearance > Customize -> Widgets section.

Footer widgets can be changed in Appearance > Widgets page or Appearance > Customize -> Widgets section. You can choose what Sidebar with widgets to display for all pages in Appearance > Customize -> Footer Settings > Footer Sidebar in Select Sidebar setting. Additionally, you can change Sidebar for individual page or post in corresponding setting in Metabox settings.

The second case is when you have the 'Elementor Header & Footer Builder' installed and active. In this case all of the header and footer settings are disabled and hidden both in the Customizer and at the pages’ settings. Now you can create as many different headers and footers in the Elementor editor as you want and then choose which ones you want to be displayed and where you want them to be displayed.

In order to do this you should go to the Dashboard menu: UAE > Header & Footer Builder and press the 'Add New' button.

Then you should give the new footer or header its name, set its type and select the pages you want it to be displayed at. Save your settings.

Then you can press the 'Edit with Elementor' button and create the header or footer of your liking in the Elementor editor.

6. How to set up sticky header?

There are two ways to do it. First way is when you have the 'Elementor Header & Footer Builder' plug-in inactive. Then you can activate the Sticky Header in the Customizer settings or in the settings of each of the pages. In order to do it you should go to the Header Settings > Sticky Header and set the Show Sticky Header setting to 'Yes' value.

If the 'Elementor Header & Footer Builder' plug-in is installed and active our theme allows you to make any section or container within a page sticky. You should use this feature with caution and never use it for multiple sections at the same time. This wouldn’t look good as the sections would overlap with each other. Also we advise you not to use the 'Sticky (Logico theme)' property of our theme together with the 'Sticky' property contained within the Elementor Pro at the same time. To do this, go to the settings of the section or container, then switch to the Advanced tab, and find the 'Motion Effects' section. The 'Sticky (Logico theme)' property is found at the very bottom.

The theme adds additional settings for sticky containers. The ‘Style’ tab of the container has sections ‘Sticky Background’, ‘Sticky Border’ and ‘Sticky Colors’. The settings in them work only if the block is sticky or is inside a sticky block.

In addition, each widget in the ‘Advanced’ tab has a ‘Sticky’ section. It has a switch that allows you to hide the block in the active sticky container. Thus, for example, you can show some text or icon in a regular header, but hide it in a sticky one.

7. How to change the sidebar?

The way we designed it, all of the sidebars are areas with widgets. In order to edit their contents you should go to the Dashboard menu: Appearance > Widgets. The widget areas’ titles are set in a way to help you understand where these areas are displayed at. For example the ‘Post Sidebar’ area is displayed at all of the blog posts pages and the ‘Service Sidebar’ area is displayed at all of the services pages. However you can set any of the sidebars to be displayed at any of the pages you want at the Customizer settings.

There are several ways to place a sidebar on a page. First way is setting the sidebar via Customizer or page settings The main advantage of this way is its convenience. Also the sidebar would be hidden when the page is viewed on mobile devices with an ability to show it by tapping on an icon. However, the disadvantages are inability to change the sidebar position in the Elementor editor and inability to make the blocks’ areas take up the whole display width above and below the sidebar.

The second way is to use the ‘Sidebar’ block in the Elementor editor. This allows you to choose which side should the sidebar be displayed at and which widget area would be displayed for each of the corresponding pages. This way also enables you to create more complex layouts with blocks taking up the whole page width above or below the sidebar area. The ability to collapse and expand the sidebar by clicking on the icon is also available. The disadvantage though is the necessity to change the settings of a page to remove the standard sidebar.

And lastly the third way is to simply create a column via the Elementor editor and display the blocks and widgets you need there. The advantage of this way is full freedom of setting up a sidebar without having to use the premade sidebar templates. The disadvantage is that the sidebar cannot be minimized when viewed from a mobile device which could lead to the page being too long. You would have to take care of the appearance of the sidebar when viewed on mobile phones and tablets on your own. This way is perfect to create your own unique small sidebar with one or several non-standard blocks.

8. How to change Page Title background image?

If the 'Elementor Header & Footer Builder' plug-in is not active you can change the Page Title background in the settings. For example if you want all pages to have the same default background you can set it in the Dashboard menu: Appearance > Customize -> Page Title Settings > General. Set the ‘Customize’ setting to the ‘Yes’ value. The color and font settings would be displayed then. Here you can also make the background image to be hidden and replaced with a solid color filling the whole page instead when viewed from tablets and mobile phones.

You can also set a separate Page Title background for each page. In order to do this you should go to the Page Title Settings > General section, set the 'Customize' setting to 'Yes' value and select the background in the settings that would be displayed.

If the 'Elementor Header & Footer Builder' plug-in is installed and active you would have to do this differently. Select a header you need from a list of pre-made headers (Dashboard menu: UAE > Header & Footer Builder) create its copy and change its background in the Elementor editor then assign it to a page you need:

9. How can I disable an unnecessary custom post type or change its slug?

For each of the custom post types there is a menu item in the Customizer. Let’s look at the Portfolio post type as an example. The ‘General’ section has a 'Add Portfolio Post Type' setting. If you set its value to ‘No’ then the custom post type Portfolio would not be connected to the theme. All of the posts with such a type would not disappear but they will not be available. In order for the settings to be applied you should go to the Dashboard menu: Settings > Permalinks and update the settings.

Also the 'Archive Settings' section has 'Slug for portfolio posts' and 'Slug for portfolio categories' settings. These settings allow you to change the slugs in the browser’s address bar. In order for the settings to be applied you should also go to the Dashboard menu: Settings > Permalinks and update the settings.

10. How to add a new section to a page?

In our theme, the basis of any section is two nested containers. The outer one sets the top and bottom margins and forms a boxed layout. The inner container sets the margins for the content from the edges of the page. The margin values for each breakpoint can be seen in the screenshots:

11. How to set up parallax effect for a block?

The theme adds the ability to activate the parallax effect for any container. You can find it in the ‘Style’ tab in the ‘Background’ section.

For parallax to work, the container must have a background image set. If you notice a delay between page scrolling and parallax triggering, then go to the 'Hover' Background tab and make sure that Transition Duration = 0

Please note that Elementor Pro also provides the ability to activate the parallax effect. You can choose either of them, but do not use them simultaneously.

12. What CSS variables does the theme use? How do I use them in my custom styles?

The theme passes some settings to CSS variables and you can freely use them in your styles if necessary. Here is the list of variables:
--logico-content-width - default content width;
--logico-default-text-color - normal text color;
--logico-dark-text-color - dark text color, usually used for headings;
--logico-light-text-color - light text color;
--logico-accent-color - main accent color of the theme;
--logico-accent-alter-color - additional accent color of the theme, rarely used;

--logico-border-color - border color, for example, in form fields
--logico-border-hover-color - active border color, for example, for a form field in focus;
--logico-background-color - main background color;
--logico-background-alter-color - additional background color, used when you need to highlight some block, but not too much;

--logico-button-text-color - text color for standard buttons;
--logico-button-border-color - border color for standard buttons;
--logico-button-background-color - background color of standard button, transparent by default;
--logico-button-icon-color - separate color for button icon;
--logico-button-text-hover - this is text color for button under hover;
--logico-button-border-hover - this is border color of buttons under hover;
--logico-button-background-hover - background color of active button;
--logico-button-icon-hover - icon color for button under hover;

--logico-page-title-overlay-color - this is separate color for overlay of standard Page Title;
--logico-page-title-additional-text-color - this is color of side additional text on standard Page Title;

Next are the font parameters for the main text, their names speak for themselves:
--logico-body-font-size
--logico-body-line-height
--logico-body-font-family
--logico-body-font-style
--logico-body-font-weight
--logico-body-text-decoration

logico-paragraph-spacing - the distance between paragraphs of text.

Font parameters for the heading H1-H6. For example:
--logico-h1-font-size
--logico-h1-line-height
--logico-h1-letter-spacing
--logico-h1-font-family
--logico-h1-text-transform
--logico-h1-font-style
--logico-h1-font-weight

If you use Elementor for typography settings, there may be separate variables for each screen width. For example:
--logico-h1-font-size-laptop
--logico-body-font-size-tablet
--logico-h2-font-size-mobile-extra

They are available if the corresponding fonts are configured.

Variables for the button font:
--logico-button-font-size
--logico-button-font-family
--logico-button-font-weigh

There are also variables for the corner radius for the rounded version of the site. For small, medium and large blocks respectively:
--logico-radius-small
--logico-radius-medium
--logico-radius-large

Using variables is quite easy, almost like regular values:
.block-class { parameter: var(--variable-name, default); }
default is an optional parameter. It allows you to play it safe if the variable is empty or does not exist.
Here is a live example of use:
.content-wrapper { margin-top: 90px; margin-bottom: 90px; max-width: var(--logico-content-width, 1380px); width: 100%; }

05. Update

There are several ways to update a theme.

The easiest way is to install the Envato Market plugin.

Install the plugin and go to its settings (Dashboard menu: Envato Market > 'Settings' tab).
Follow the steps in the short instructions.
Now you have a list of purchased products. If an update for one of the products is available, you will receive a notification and will be able to update the product in one click.

The second way is to simply download the new version of the theme from the Envato website and install it as a new theme. WordPress will automatically detect that such a theme is already installed and offer to update the files.

The third way to update a theme is to delete the folder with the theme on the server. Then download the new version of the theme from the Envato website and upload it to the server instead of the old theme using an FTP client (for example, FileZilla).

If after updating the theme a message appears about the need to update the theme plugin, do it immediately. For security reasons, many theme functions are moved to a separate plugin and without updating it the theme will not be able to work fully.

Also, after updating the theme, do not forget to clear the server cache and CDN, if you use them.

06. Customizer Settings

In order to open Customizer Settings you should go to Appearance > Customize

Depending on what plugins you have installed, the settings may differ. WooCommerce settings will appear if this plugin is installed. Header and footer settings will only be visible if the Elementor Header & Footer Builder plugin is disabled. Typography settings will only appear if Elementor is disabled.

Also, some third-party plugins may add their own settings to WordPress Customizer.

Below is a description of all the settings added by our theme and recommended plugins.

Site Identity

You can set the Site Title, Tagline and Site Icon inside this section.

Site Title — is your web-site name. It appears in browser tabs as well as in place of the site icon if you did not set a picture for it.

Tagline — is a short slogan which helps users understand what your web-site is about. It is displayed inside a browser tab. Our theme design does not make use of a tagline.

Site Icon — is a great way to distinguish your web-site among other browser tabs. This is usually one of the variations of your website logo.

Menus

Menus section has the same functions you can find in Appearance > Menus. You can create, edit, delete a menu here as well as choose its position on your web-site screen.

Widgets

Widgets section has almost the same functions as the ones you can find in Appearance > Widgets. Here you can add, customize and delete widgets inside the sections displayed at a current page. You can navigate to the other pages on your web-site while using the Customizer to view and edit the widgets displayed on those pages.

Homepage Settings

Homepage Settings has partially the same functions as the ones you can find in Settings > Reading. You can choose what is displayed on your web-site homepage. It can be posts in reverse chronological order (classig blog), of a fixed/static page. In order to set a static homepage, you first need to create two Pages. One of them will be the homepage and the other one will contain all of your posts and display them.

Top Bar Settings

This section is only visible if the 'Elementor Header & Footer Builder' plugin is not active. It allows you to set up the data displayed at the upper part of the header — in a thin line of contrast colors called Top Bar.

General

Show Top Bar — this allows you to show or hide the Top Bar

Customize — if you set this to “Yes” you can see all of the settings for the SideBar color scheme. You can read about color schemes in detail at the “Color Settings” section. In our theme we use a dark background and white text for this area.

Social Buttons

Show Social Buttons — this allows you to show or hide the social networks buttons.

Social Buttons Label Text — this allows you to set the label of social buttons area.

Contacts

In this section you can set up the contact details displayed in the Top Bar.

Contacts Mobile Title — this allows you to change title of contacts area in mobile menu.

Show Email Address — this allows you to show or hide an e-mail address.

Email Address Label Text — this allows you to set the label of email address area.

Email Address — this allows you to set the email address to be displayed.

Show Phone Number — this allows you to show or hide a phone number.

Phone Number Label Text — this allows you to set the label of phone number area.

Phone Number — this allows you to set the phone number to be displayed.

Show Address — this allows you to show or hide a business address.

Address Label Text — this allows you to set the label of business address area.

Address — this allows you to set the business address to be displayed.

Header Settings

This section is only visible if the 'Elementor Header & Footer Builder' plugin is not active. It will help you customize the upper part of the website (Header) appearance.

General

Show Header — this allows you to show or hide the Header, this setting works site-wide.

Header Position — here you can select header’s position in relation to the content of the page: inline or on top of the contents (for example on top of an image or slider).

Customize — if you set this to “Yes” you can see all of the settings for the Header color scheme. You can read about color schemes in detail at the “Color Settings” section.

Header Callback

This section allows you to set up displaying a phone number and its short annotation in certain header types.

Show header callback block — show or hide the phone number block.

Header callback title — phone number annotation.

Header callback text — this field is used to input the phone number for communication.

Header callback link — this field is used to input a link that will be opened when clicked. Can be used to start a call when clicked.

Sticky Header

Show Sticky Header — this allows you to show or hide the “sticky” header.

Customize — if you set this to “Yes” you can see all of the settings for the Sticky Header color scheme. These colors are only applied to the active sticky header.

Mobile Header

This section contains mobile menu settings.

Mobile Header Breakpoint, in px — this allows you to set a screen width that determines when the mobile menu would switch to the desktop menu.

Logo

Show Logo — this allows you to show or hide your logo in the Header (yes, sometimes people want it to be hidden).

Customize — this allows you to setup the logo or leave the default settings (site title as a text).

Logo Image — here you can choose an image for your web-site logo. If you activate the Logo Retina checkbox the logo image will be downscaled by half in order to look better on screens with high pixel density. If you delete the image, then the title of your web-site will be shown instead.

Mobile Logo Image — this setting allows you to select a more compact version of the logo, which will be displayed only in the mobile menu.

Header Button

Show Header Button — here you can enable/disable an additional button display in the web-site header. For example you can have a ‘Buy now’ or ‘Make a donation’ or ‘Show items on sale now!’ button or the like. If the button is enabled you can choose its text (Header Button Text) and URL address (Header Button Link).

Header Menu

Here you can find all of the web-site main menu display settings.

Show Header Menu — this allows you to show or hide the web-site main menu.

Select Menu — this allows you to replace the main menu with any of the menus created in WordPress.

Customize — this gives you access to main menu fonts settings:

Menu Font — this allows you to set the main menu font (Font Family, Text Transform, Font Size, Font Weight, Line Height, etc.)

Sub Menu Font — this allows you to set the sub-menu font (Font Family, Text Transform, Font Size, Font Weight, Line Height, etc.)

Color Settings — allows you to customize color scheme on the desktop version of the site. In our theme we use a dark background and white text for this area.

Header Icons

Show side panel trigger — this allows you to show or hide an additional drop-down panel with widgets.

Select Sidebar — this allows you to select what widgets you want to be displayed. You can view and customize the sidebars by going to Appearance > Widgets.

Slide panel decorative background — this allows you to set the background of the decorative strip of the slide panel.

Customize — if you set this to “Yes” you can see all of the settings for the Slide Sidebar Panel color scheme. In our theme we use a dark background and white text for this area.

Show header search — this allows you to show or hide site-wide search button.

Show product cart — this allows you to show or hide the product cart button. This option is only available if you have Woocommerce plug-in installed.

Show Login/Logout icon — if the page is opened by an unlogged user, a login icon will be displayed. When clicked, the user will be redirected to the WordPress login page. If WooCommerce is installed, the user will be taken to the customer account login page. If the user is already logged into their account, a logout icon will be displayed.

Page Title Settings

This section is only visible if the 'Elementor Header & Footer Builder' plugin is not active. It will help you customize the page title block.

General

Show Page Title — this allows you to show or hide page title block.

Show Overlay — this allows you to turn the overlay on or off and set its color and transparency.

Customize — this gives you access to Page Title advanced settings.

Page title height, in px — this allows you to set page title height value for desktop environment.

Following this section are settings for the Page Title block color scheme. You can read about color schemes in detail at the Color Settings section. We use a standard color scheme, but with a contrasting yellow background.

Image, Background Position, Background Repeat, Background Size — background image settings.

Hide Background Image on Mobile Devices — this allows you to hide the background image on devices with screen width of less than 768px, showing only background color.

Hide Background Image on Tablet Devices — this allows you to hide the background image for devices with screen width from 768 up to 992px, only background colour will be displayed.

Heading

Heading alignment — sets the alignment of the page title to the left, right, or center of the page.

Show title decoration — enables or disables decorative slashes before and after the page title.

Customize — this gives you access to page heading font settings.

Heading Font — this allows you to set the page heading font (Font Family, Text Transform, Font Size, Font Weight, Line Height, etc.)

Breadcrumbs

Show page title breadcrumbs — this allows you to show or hide page title breadcrumbs.

Breadcrumbs alignment — sets the alignment of the breadcrumbs to the left, right, or center of the page.

Customize — this allows you to customize the breadcrumbs.

Breadcrumbs Font — this allows you to set the breadcrumbs font (Font Family, Text Transform, Font Size, Font Weight, Line Height, etc.)

Heading Additional Text

This section contains Page Title block additional text settings.

Show page title additional text — this allows you to show or hide page title additional text.

Additional Text — this allows you to set the text to be displayed.

Customize — allows access to color settings.

Additional Text Font — this allows you to set the additional text font (Font Family, Text Transform, Font Size, Font Weight, Line Height, etc.)

Additional Text Color — this allows you to set the additional text font color independently from the chosen color scheme.

Typography Settings

This section contains all of the typography settings for the web-site content main elements.

Main Font

This section contains settings for the pages and posts main text.

Main Font — this allows you to set the web-page main font (Font Family, Text Transform, Font Size, Font Weight, Line Height, etc.)

Headings

This section contains the default settings for text headings.

Headings Font — this section contains main settings for all of the headings (Font Family, Text Transform, Font Style, etc.).

H1 Font - H6 Font — this section contains individual settings for each of the heading levels (Font Size, Line Height, Letter Spacing, Font Weight, etc.)

Buttons

This section contains the default settings for web-site buttons.

Buttons Font — this allows you to set buttons’ font (Font Family, Text Transform, Font Size, Font Weight, Line Height, etc.)

Social Links

This section contains settings for the social networks buttons all across the web-site — footer, header, etc.

Open Socials in New Tab — if this is selected, the resulting page after clicking the social network icon will be opened in a separate browser tab.

Social Buttons — this allows you to show or hide social networks buttons:
- Icon — this field allows you to set the button icon (Font Awesome Brands library)
- Title — this field allows you to input the social network title
- Link — this field allows you to input the social network account url

Color Settings

This section allows you to customize colors of all of the web-site elements, not including Elementor widgets which can be customize separately.

The color system has been reworked completely. Now you can change the color scheme for the whole web-site or a single page with just a couple of mouse clicks!

Standard Colors determines colors for almost all of the web-site blocks (usually it’s light background and dark text, for example of the header main text).

This section contains 9 color settings which set all of the colors used on the web-site.

Default Text Color — this allows you to set the main text color for the whole web-site (except contrast areas).

Dark Text Color — this allows you to set a darker text color in relation to the main one, it is often used to highlight a portion of text, headers as usual.

Light Text Color — this allows you to set a brighter text color in relation to the main one, it is commonly used to highlight additional information, for example posts meta data.

Accent Color — this allows you to set the main contrast color, which determines style for the whole page. Usually by changing only this color setting you can change the whole web-site feeling. It is used for links, icons, contrast blocks backgrounds etc.

Alternative Accent Color — this allows you to set the additional contrast color. It is used for hovered links, icons, contrast blocks backgrounds etc.

Border Color — this allows you to set a color for borders and dividers. For example fields’ borders of forms and dividers between separate blocks.

Border Hover Color — it is usually darker than Border Color. It is used for example as a color for active fields’ borders.

Background Color — this allows you to set the main background color for all pages, it is usually bright.

Alternative Background Color — this allows you to set an alternative background color used when you need to highlight one of the blocks, but not as strongly as contrast blocks (for example quote blocks or Call-to-Action blocks).

Button Text Color, Button Icon Color, Button Border Color, Button Background Color, Button Text Hover, Button Icon Hover, Button Border Hover, Button Background Hover — this allows you to set colors for buttons used on the web-site. By popular demand we made it possible to set the colors for buttons independently from the chosen color scheme.

Footer Settings

This section will help you customize the lower part of the web-site (Footer) display.

General

Show Footer — this setting allows you to select whether you want to have the lower part displayed or not.

Customize — this gives you access to advanced settings. Color settings allow you to change or edit the footer color scheme.

Bottom Image — this setting allows you to select a background image for the footer.

Footer Background Position, Footer Background Repeat, Footer Background Size — these are the settings for the footer background image.

Footer Sidebar

This section contains settings for footer widgets display.

Show Footer Widgets — this allows you to show or hide widget area in the footer.

Select Sidebar — this allows you to select what widgets you want to be displayed. You can view and customize the sidebars by going to Appearance > Widgets.

Columns Number — allows you to choose how many columns to display widgets in the footer.

Copyright

Show Copyright — this allows you to show or hide copyright line.

Copyright Text — this is a line of text aimed at informing the web-site users about copyright holders of all of the web-site media content. This field supports shortcodes. You can use a little [agencium_year] shortcode to always have the current year in the copyright.

Footer Terms

Show Footer Terms — this allows you to show or hide the footer terms text.

Terms Text — allows you to enter a short text with a link to the Terms of Use page.

Pages

The settings in this section allow you to customize content area of the standard user-created pages in WordPress.

Page Sidebar Position — this setting allows you to set the sidebar position on standard pages.

Select Page Sidebar — this allows you to select any widget area to display it in the sidebar of standard pages for default.

WooCommerce

This section contains settings for the store, it is available only if you have the WooCommerce plugin installed.

Store Notice

Store Notice — If enabled, this text will be shown site-wide. You can use it to show events or promotions to the visitors!

Product Catalog

Shop page display — Choose what to display on the main shop page.

Category display — Choose what to display on product category pages.

Default product sorting — Choose how the products should be sorted in the catalog by default.

Products per row — Choose how many products should be shown per row.

Rows per page — Choose how many rows of products should be shown per page.

Sidebar Position — this setting allows you to set the sidebar position on product catalog page.

Select Sidebar — this allows you to select any widget area to display it in the sidebar of product catalog page.

Show "Sale" label — allows you to show or hide the sale flash on products.

Sale flash label — allows you to input the text for the sale flash.

Show "New" label — allows you to show or hide the new product flash (added no more than a week ago).

New flash label — allows you to input the text for the new product flash.

Product Images

Main image width — Image size used for the main image on single product pages. These images will remain uncropped.

Thumbnail width — Image size used for products in the catalog.

Thumbnail cropping — this allows you to set up thumbnail cropping or disable it altogether.

Checkout

These options let you change the appearance of the WooCommerce checkout.

Company name field, Address line 2 field, Phone field — hide corresponding fields, make them required or optional.

Highlight required fields with an asterisk — if this is selected, then the required fields will be marked with a star sign (*).

Privacy policy page, Terms and conditions page — choose the corresponding pages from the list of existing web-site pages.

Privacy policy — optionally add some text about your store privacy policy to show during checkout. (This section appears only if the Privacy policy page is chosen)

Terms and conditions — optionally add some text for the terms checkbox that customers must accept. (This section appears only if the Terms and conditions page is chosen)

Single Product

This contains some of the product pages settings.

Show Related Products — allows you to hide the Related Products area on the product page.

Related Products Section Subtitle — subheading text for the Related Products section.

Related Products Section Title — this allows you to input text used as a title for the Related Products section if it is set-up.

Single Product Page Title — this allows you to input text used for the product page title. You can use the ‘%s’ symbol in the text, which will be automatically substituted with the product name.

Show Product name above the Price — By default the product name is displayed in the page title. You can customize the page in such a way that the page title would display a different name, for example a Single Product name. If you do so, in order to have a product name on the page you can select the Show Product Name Above the Price checkbox. The product name then would be displayed to the left of the product image above the product price.

Up-sells Section Subtitle — subheading text for the Up-sells section.

Up-sells Section Title — this allows you to input text used as a title for the Up-sells section if it is set-up.

Product Archive

This contains some of the settings for archive products pages.

Product Category Page Title — this allows you to set a title for the product category archive pages. You can use the ‘%s’ symbol in the text, which will be automatically substituted with the category title.

Product Tag Page Title — this allows you to set a title for the product tag archive pages. You can use the ‘%s’ symbol in the text, which will be automatically substituted with the tag name.

Additional CSS

Add your own CSS code here to customize the appearance and layout of your site. Learn more about CSS

Blog

This section contains settings that allow you to customize the appearance of the blog: both archive pages and individual posts.

Archive Settings

Archive Sidebar Position — this setting allows you to set the sidebar position on blog archive page.

Select Sidebar — this allows you to select any widget area to display it in the sidebar of blog archive pages.

Single Post Settings

This section contains the settings which allow you to display or hide different portions of the single posts.

Single Post Page Title — this allows you to set a title for blog internal pages. You can use the ‘%s’ symbol in the text, which will be automatically substituted with the post title.

Single Post Sidebar Position — this setting allows you to set the sidebar position on single post page.

Select Sidebar — this allows you to select any widget area to display it in the sidebar of single post pages.

Show Media Image, Show Post Categories, Show Post Date, Show Post Author, Show Post Title, Show Post Tags, Show Post Tags Label, Show Post Social Buttons — these settings allow you to choose which data would be displayed at the post page correspondingly.

Show Recent Posts — this allows you to display or hide recent posts.

Customize — this gives you access to recommended posts settings:

Recent Posts Section Title — this allows you to set a title for the recommended posts section.

Number of Posts — this allows you to set number of displayed recent posts.

Order By — this allows you to select recent posts sorting: randomly, by date or by user name.

Sort Order — this allows you to set recent posts sort order: in ascending or descending order.

Recent Posts Featured Image — this allows you to show or hide the Featured Image section in recent posts.

Recent Posts Categories — this allows you to show or hide categories in recent posts.

Recent Posts Title — this allows you to show or hide a title in recent posts.

Recent Posts Date — this allows you to show or hide date of publication in recent posts.

Recent Posts Author — this allows you to show or hide author name in recent posts.

Recent Posts Excerpt — this allows you to show or hide excerpts in recent posts.

Recent Posts Excerpt Length — this allows you to set the length of an excerpt measured in symbols.

Recent Posts Tags — this allows you to show or hide tags in recent posts.

Recent Posts 'Read More' Button — this allows you to show or hide ‘Read More’ button in recent posts.

Portfolio

This section contains the galleries’ settings for custom Portfolio type posts.

General

Add Portfolio Post Type — enables or disables support for the Portfolio custom post type. If you disable support, internal links to portfolio posts will stop working. The corresponding items in the dashboard menu will disappear. Portfolio posts will become unavailable, but will remain in the database. When you enable support, posts will become available again. After changing this setting, you need to go to the Dashboard menu: Settings > Permalinks and save the settings.

Archive Settings

Portfolio Archive Page Title — this allows you to set a title for the portfolio archive pages.

Portfolio Archive Columns Number — this allows you to set a number of columns at the standard Portfolio archive page (available at your-site-url/portfolio/ address)

Portfolio Posts Per Page — this allows you to set a number of posts to be displayed at the standard Portfolio archive page. Posts outside of this number would be displayed at the next page, thus enabling pagination.

Archive Sidebar Position — this setting allows you to set the sidebar position on portfolio archive page.

Select Sidebar — this allows you to select any widget area to display it in the sidebar of portfolio archive pages.

Slug for portfolio posts — allows you to replace the standard 'portfolio' slug in the browser address bar at the portfolio post archive page with any other. After changing the slug, you need to go to the Dashboard menu: Settings > Permalinks and re-save the settings.

Slug for portfolio categories — allows you to replace the standard 'portfolio-categories' slug in the browser address bar at the portfolio category archive page with any other. After changing the slug, you need to go to the Dashboard menu: Settings > Permalinks and re-save the settings.

Single Page Settings

Portfolio Single Page Title — this allows you to set a title for the separate portfolio pages. You can use the ‘%s’ symbol in the text, which will be automatically substituted with the archive name.

Show custom cursor in gallery slider — this checkbox allows you to enable or disable the custom cursor effect for the slider on the single portfolio page.

Careers

This section contains settings for custom Vacancies type posts.

General

Add Vacancy Post Type — enables or disables support for the Vacancy custom post type. If you disable support, internal links to vacancy posts will stop working. The corresponding items in the dashboard menu will disappear. Vacancy posts will become unavailable, but will remain in the database. When you enable support, posts will become available again. After changing this setting, you need to go to the Dashboard menu: Settings > Permalinks and save the settings.

Archive Settings

Careers Archive Page Title — this allows you to set a title for the careers archive pages. You can use the ‘%s’ symbol in the text, which will be automatically substituted with the archive name.

Careers Posts Per Page — this allows you to set a number of posts to be displayed at the standard Careers archive page. Posts outside of this number would be displayed at the next page, thus enabling pagination.

Show Icon — show or hide the decorative vacancy icon.

Show Title — show or hide the vacancy title.

Show Location — show or hide the location where the vacancy is open.

Show Contact Phone — show or hide the phone number posted in the vacancy.

Show Description — show or hide the short description of the vacancy.

Vacancies Excerpt Length — the number of characters to which the short description of the vacancy will be shortened.

Show Button — show or hide the 'Read more' button.

Careers Archive post button text — here you can enter custom text for the 'Read more' button.

Archive Sidebar Position — this setting allows you to set the sidebar position on careers archive pages.

Select Sidebar — this allows you to select any widget area to display it in the sidebar of careers archive pages.

Slug for career posts — allows you to replace the standard 'portfolio' slug in the browser address bar at the portfolio post archive page with any other. After changing the slug, you need to go to the Dashboard menu: Settings > Permalinks and re-save the settings.

Slug for career categories — allows you to replace the standard 'portfolio-categories' slug in the browser address bar at the portfolio category archive page with any other. After changing the slug, you need to go to the Dashboard menu: Settings > Permalinks and re-save the settings.

Single Page Settings

Career Single Page Title — this allows you to set a title for the separate vacancy pages. You can use the ‘%s’ symbol in the text, which will be automatically substituted with the post title.

Description section heading — the setting allows you to set a title for the section with the description of the vacancy.

Form section heading — the setting allows you to select the title of the section with the feedback form.

Form Shortcode — the field for the feedback form shortcode. It can be generated, for example, in the WPForms plugin.

Show Recent Vacancies — this allows you to show or hide recent vacancies at the bottom part of the page.

Customize — this allows you to customize the Recent Vacancies section.

Recent Vacancies Section Title — this allows you to change the Recent Vacancies section title.

Number of Posts — this allows you to set a number of recent vacancies to be displayed at the Recent Vacancies section.

Order By — this allows you to change sorting criteria in the Recent Vacancies section. You can sort the vacancies by name, date or display them in a random order.

Sort Order — this allows you to set posts sorting: ascending or descending.

Show Icon, Show Title, Show Location, Show Contact Phone, Show Excerpt, Excerpt Length, Show Button, Button Label — these settings allow you to show or hide different parts of the recent vacancies.

Team

This section contains settings for custom Team Member type posts.

General

Add Team Member Post Type — enables or disables support for the Team Member custom post type. If you disable support, internal links to team member posts will stop working. The corresponding items in the dashboard menu will disappear. Team member posts will become unavailable, but will remain in the database. When you enable support, posts will become available again. After changing this setting, you need to go to the Dashboard menu: Settings > Permalinks and save the settings.

Archive Settings

Team Archive Page Title — this allows you to set a title for the team members archive pages. You can use the ‘%s’ symbol in the text, which will be automatically substituted with the archive name.

Team Archive Columns Number — this allows you to set a number of columns at the standard Team Members archive page (available at your-site-url/team/ address).

Team Posts Per Page — this allows you to set a number of posts to be displayed at the standard Team Members archive page. Posts outside of this number would be displayed at the next page, thus enabling pagination.

Archive Sidebar Position — this setting allows you to set the sidebar position on team archive pages.

Select Sidebar — this allows you to select any widget area to display it in the sidebar of team archive pages.

Slug for team posts — allows you to replace the standard 'team' slug in the browser address bar at the team member post archive page with any other. After changing the slug, you need to go to the Dashboard menu: Settings > Permalinks and re-save the settings.

Slug for team categories — allows you to replace the standard 'team-categories' slug in the browser address bar at the team member category archive page with any other. After changing the slug, you need to go to the Dashboard menu: Settings > Permalinks and re-save the settings.

Single Page Settings

Team Members Single Page Title — this allows you to set a title for the separate team member pages. You can use the ‘%s’ symbol in the text, which will be automatically substituted with the post title.

Sidebar Position — this setting allows you to set the sidebar position on team member single pages.

Select Sidebar — this allows you to select any widget area to display it in the sidebar of team member single pages.

Error 404 Page

These settings will help you to customize the 404 error page (displayed if a requested page is not found).

404 Error Title — this allows you to set a title for 404 error page, it will be displayed in large font.

404 Error Info Text — this allows you to input a short text to be displayed under the title.

Main Image — you can choose a central image that will be located between the number '404' and the text with the title.

Show Header Logo — this allows you to choose whether you want the logo to be displayed at the top of the page. The logo used is the same one set in the header settings.

Show Social Buttons — this allows you to show or hide a social buttons in the footer.

Show Home Button — this allows you to show or hide a button linked to the home page.

Home Button Text — this allows you to input a text for the button linked to the home page.

Customize Background — this gives you access to page background setting: Background Color, Background Image, Background Position, Background Repeat, Background Size.

Show Additional Background Image — this setting allows you to add two additional images to the right and left at the bottom of the page.

Additional Settings

Page Loader

Select theme style – this setting allows you to switch the theme between angular (default) and rounded styles.

Page Loader

Show Page Loader – this allows you to show or hide a preloader on the web-site.

Page Loader Image – this allows you to set an image used for the preloader. Best result may be achieved if you choose a square image with dimensions of no more than 100x100px.

"Go to Top" Button

Show "Go to Top" Button – this allows you to show or hide the button pinned to the bottom right corner of the screen. When you click on it, the page will scroll up to the top.

07. Metabox Settings

There will be settings at the lower part of an editing page or post. These settings will only be applied to this page or post. The settings may differ according to the corresponding page or post type.

Also, the settings may differ depending on the installed plugins. The following groups of settings are always available:

Color Settings
Layout Settings
Additional Settings

If you disable the 'Elementor Header & Footer Builder' plugin, the settings for the standard footer and header will become available:

Top Bar Settings
Header Settings
Page Title Settings
Footer Settings

All the settings names correspond to the such of the Customizer settings, so you can read their description above in the Customizer Settings section.

In the Layout Settings section you can enable or disable upper and lower offsets of the main content block as well as choose a sidebar position or disable it completely.

08. Child Theme

If you’d like to change or add to the scripts, CSS styles or theme functionality, then the best way to do this would be using a Child Theme. Its purpose is to allow you to change something without affecting the main theme itself with an ability to revert the changes back to default at any time. Another advantage in using the Child Theme is an ability to update the main theme without loosing the changes you already made. You can read further in more detail about the Child Theme and how to create it at the following URL: https://developer.wordpress.org/themes/advanced-topics/child-themes/

Our team highly recommends using a child theme for your website.

09. Elementor

Our theme is built using the Elementor. For more information about this plugin you can go to the following address: https://elementor.com/

Elementor — is a visual editor. It is very intuitive to use. In order to edit a page you can click Edit with Elementor button right at the list of pages,

or click Edit with Elementor button at the default page editing screen.

Our theme has lots of unique elements in addition to the default elements supplied with the plugin. All of them are divided into two categories. Common elements that are most often used in page content are in the 'Logico Widgets' tab. The 'Ultimate Addons' tab contains utility widgets that are best used only in the header or footer.

General settings for all of the elements:
In the first tab, called Content, you can customize the content — set titles, input text, set content alignment and choose on of the supplied element styles.
The second tab, called Style, contains settings for colors, fonts and margins between internal elements.
The third tab, called Advanced, contains additional parameters settings. You can set element id or class, z-index, internal and external margins of an element block, background for the element block, its positioning, etc. This is a default tab, you can read in more detail about all of these settings at the official manual located at the following address: https://docs.elementor.com/article/571-advanced-tab

Awards

This element allows to display a list of awards. You can set award`s year, award`s title and icon.

Blog Listing

This element allows to display a posts timeline. You can choose what posts to display, their ordering as well as set the post elements to display (author name, date, title, image, ‘Read More’ button, etc.).

Button

This element is used to display buttons. We recommend using this instead of the default element, located in the Basic tab.

Calculator

This element allows you to quite flexibly customize the calculator form for calculating the approximate cost of delivery services.

Content Slider

This element is used to display big sliders with animated text. As an example our demo-site contains these sliders at all of the Home Pages.

Custom Menu

This element is used to display simple menu inside page`s content.

Decoration

This is a purely decorative element that allows you to select a geometric pattern from the list of available ones. Each pattern has its own animation, which can be enabled by selecting 'Content' Tab > Show Animation = Show.

File

The element allows to select a file from the media gallery for downloading, as well as select an icon for it.

Heading

This element allows to display headings as well as customize their appearance.

Image Carousel

This element is used to display a slider with images. You can also add a title with link to each of the images.

Ticker

A simple and convenient element for displaying a scrolling text line. It has flexible settings, allows you to add pictures as a separator.

Price Item

This element helps you to display a columned price list.

Steps

This element is used to display a slider with blocks with numeration, for example a list of steps with some kind of a process.

Tabs

This element allows to create simple tabs with text and images.

Testimonial Carousel

This element is used to display client testimonials in a slider form, it has several styles to choose from.

Time Line

The element displays a slider with blocks in which you can specify a date, title, and short text. It is mainly used for the sequential display of some events. For example, the place and time of work in a resume.

Tracking Form

Allows you to display a shortcode with a delivery tracking form. It can display either a regular form or a button with a pop-up window.

Video Button

This element allows you display a play button for video in lightbox without overlay image. Button can contain play icon and text. Is fully customizable.

Portfolio Listing

This element allows you to customize and display the portfolio gallery (custom Portfolio posts type) in the form of columns, masonry or a slider.

Team Listing

This element is used to display the custom Team Member posts type. It can display short info about a person such as name, position, social network links, etc.

Vacancies Listing

This element is used to customize and display the custom Vacancy posts type. You can choose posts to be displayed as well as their order of appearance and how many posts you would like to be formed.

Products

This element helps to display a products block. You can set what products to show, what should be their order and how many columns you’d like to use. This is a container for the WooCommerce standard shortcode [products].

WPForms

This element allows to choose and display a form, created by means of the WP Forms plugin. It will not work without WPForms Light plug-in.

Slide Sidebar Trigger

Displays an icon that, when clicked, opens a sidebar with widgets (Side Panel Sidebar widget area).

Search Trigger

Displays the search icon. When clicked, it opens the search bar at the top of the page.

Login/Logout

If the page is opened by an unlogged user, a login icon will be displayed. When clicked, the user will be redirected to the WordPress login page. If WooCommerce is installed, the user will be taken to the customer account login page.

If the user is already logged into their account, a logout icon will be displayed.

Header Button

Displays a large button with a header-friendly design and a unique animation.

Page Title

Displays a large block with the page title. You can customize animated elements, add breadcrumbs, customize the block height and background.

Vertical Divider

A small but very convenient block that allows you to visually divide header elements into several groups.

Product Cart

This block is only available if WooCommerce is installed. Displays a cart icon with a product counter.

10. Custom Post Types

Our theme adds several custom post types to WordPress.

Portfolio

Portfolio — posts with gallery aimed at demonstrating photos with a quick fact. Each post can contain different information fields, such as the project completion date, project name, customer, etc. You can also add a gallery in the form of a slider.

Finally, you can supplement the post with several blocks in the Elementor editor. Or leave all the fields empty and build the post in the Elementor editor completely.

Team Members

Team Members are posts with information about people: team members, clients, ets. It allows you to input name, position, short bio, contacts, social networks links, upload a photo and list the skills of this person.

Vacancies

Vacancies are posts aimed to describe careers available. These posts contain such info as career description, responsibilities, required set of skills, salary, terms etc. You can also display a list of the company's recent careers or add a shortcode with a contact form.

11. Plugins used by the theme

After installing the theme suggests you install required plugins. There are two types of these plugins — essential and recommended.

Essential plugins are required for the theme to work properly. These are the following:
Elementor Page Builder — it is needed to build the pages conveniently and intuitively.
Elementor Header & Footer Builder — adds the ability to create footers and headers in the Elementor editor, as well as flexibly manage their display.
Meta Box — enables you to individually customize each page.
Logico Plugin — adds new widgets and elements.

Recommended plugins aren’t crucial to the theme functionality, they simply add new capabilities to it:
WPForms Light — is a simple visual editor which helps you add forms to the web-site.
WooCommerce — is a powerful and popular plugin to create an online store.
Envato Market — this plugin helps customers receive updates to their premium Themes & Plugins purchased through Envato Market (ThemeForest & CodeCanyon).
One Click Demo Import — is required to install demonstration data, you can delete this plugin afterwards.

12. Recommendations

Theme localization

You can easily translate our template to any language. To do this we want to offer you to use a tested translation plugin — Loco Translate. To work with it you do not need any technical knowledge. The system will prompt you to install it as soon as you activate our template.

Detailed documentation on this plugin can be found here. And here you can find the FAQ.

JavaScript Customization

This theme includes the following JavaScript files:


                        admin.js

                        customizer.js

                        fontawesome-iconpicker.js

                        fontello.js

                        isotope.min.js

                        jquery.cookie.min.js

                        owl.carousel.min.js

                        select2.min.js

                        slick.min.js

                        theme.js

                        tilt.jquery.min.js

                        woo.js

All of our javascript files you can find in the file js/theme.js. This file is packed, so you won't need to manually edit anything in it.

Plugin Update

If you are notified about a theme update pending and decide you want to install it, you can do it the default way: just overwrite the previous files by the ones supplied in a new zip archive. However it’s possible that you would be required to update previously installed plugins for the theme to function properly.

13. FAQ

1. Some of the pictures aren’t displayed properly after installing the theme.
— Elementor plugin saves the images selected in elements in its own way, so there might be errors during import. Try to go to Elementor > Tools section and enter our demo-site URL into Replace URL tab first field as follows: https://demo.artureanec.com/themes/logico and enter your web-site address into the second field. Then click the Replace URL button. When the process is complete go to the General tab and click Regenerate Files button.

2. I cannot install demo-data, an ‘Error 500’ or ‘Error 0’ error is displayed when I press the Import Demo Data button.
— First make sure that you fulfilled all of the prerequisites listed in paragraph 2 of this manual. Another common reason for problems with demo-data installation is incorrect settings for the web-site and server when installing SSL-certificate. Check that your web-site address begins with https:// in WordPress Settings > General section (if the SSL-certificate is installed). Contact your hosting provider if you cannot setup a server on your own.

3. I have installed the theme, but I don’t see a message about recommended plug-ins and I cannot install them.
— Make sure you have all of the plug-ins disabled. Some of them can block messages from a theme. After you install the plug-ins and demo-data you can enable 3rd party plug-ins again.

4. I change the page settings in Customizer but these settings are not applied or are applied only on some pages. Why is that happening?
— If you used the pages from our demo-data to build your web-site, some of them might contain local Meta Boxes settings which override the settings from Customizer. In order to fix this you need to go to the WordPress standard page editor and put all of the settings at the bottom part of it to their Default setting and empty all of the fields with something filled into them.

5. After updating Elementor, something broke. How can I fix it?
— First, make sure you are using the latest version of the theme. Unfortunately, plugin developers do not always communicate their plans. Usually, a theme update is released 1-2 days after the issue is reported.
As a temporary solution, you can use Elementor tools and roll back the plugin version. Go to the Dashboard menu: Elementor > Tools > 'Version Control' tab and re-install the desired version of Elementor:
When the theme update is released, Elementor can be updated to the latest version. To avoid problems, we recommend disabling automatic updates of WordPress and plugins, as well as making a backup of the site before each update. It does not take much time, but will save your nerves.
Do not forget to clear the server cache and CDN, if you use them.

6. After installing or moving a site, some pages return Error 404.
— This happens sometimes. In 99% of cases, re-saving permalinks helps. Go to Dashboard menu: Settings > Permalinks and click the 'Save changes' button.

7. I'm trying to install a theme, but I get a message that the theme is corrupted or the style.css file is missing. What should I do?
— Most often, this happens when you try to install an archive downloaded from the Envato website as a theme. This archive should be unpacked. Inside there will be an archive with the theme (logico.zip), an archive with a child theme (logico-child.zip) and an archive with documentation (documentation.zip). You need to install the logico.zip and logico-child.zip archives one after the other.

8. I want to add some styles to the theme, how do I do that?
— If you are using a child theme (Logico Child), you can add styles directly to the style.css file in the root of the theme. If you do this with the parent theme (Logico), your styles will disappear when you install a new version. To prevent this, you can add styles via the Customizer.
Go to the Dashboard menu: Appearance > Customize -> Additional CSS and add your styles in the field:

9. My site is slow, how can I speed it up?
— There are several tricks that can speed up your site.

Find out from your hosting provider what the server response speed is on your plan and whether it can be increased.
Find out from your hosting provider what your server settings are. The minimum recommended settings can be found in Section 2 of this manual.
You need to install and configure one of the plugins that increase site speed. For example, WPRocket or W3 Total Cache. They will allow you to set up caching on the server, and also give you the opportunity to connect the CDN service (it is paid. In fact, the user will receive large data not from your server, but from the CDN server closest to him).
When you upload new images to the server, first optimize them through an online service or install a plugin that will optimize images when they are uploaded.

10. In custom post types there is a part of content created in Elementor. I want to edit it, but I can't open the post in the Elementor editor. What should I do?
— Most likely, the desired post type is not selected in the Elementor settings (Dashboard menu: Elementor > Settings > 'General' tab). Just select the desired post types and save the settings.

14. Code Navigation

All of the images, css files, js files are located in the root folder:

CSS file has a clear structure, that is described at the beginning of the file and divides the file into components that are responsible for the corresponding code parts.

All of the Theme Framework is located in the 'core' folder. Here are the functions that are used to construct our template and other supporting scripts:

01. Hello!

02. Theme Requirements

Recommended PHP Limits

03. Quick Start guide

04. Customization

1. How to work with colors?

2. How to work with fonts?

3. How do I switch the theme to rounded style?

4. How to set up RTL version of the theme?

5. How to change the header and footer for the entire site and for a separate page?

6. How to set up sticky header?

7. How to change the sidebar?

8. How to change Page Title background image?

9. How can I disable an unnecessary custom post type or change its slug?

10. How to add a new section to a page?

11. How to set up parallax effect for a block?

12. What CSS variables does the theme use? How do I use them in my custom styles?

05. Update

06. Customizer Settings

Site Identity

Menus

Widgets

Homepage Settings

Top Bar Settings

General

Social Buttons

Contacts

Header Settings

General

Header Callback

Sticky Header

Mobile Header

Logo

Header Button

Header Menu

Header Icons

Page Title Settings

General

Heading

Breadcrumbs

Heading Additional Text

Typography Settings

Main Font

Headings

Buttons

Social Links

Color Settings

Footer Settings

General

Footer Sidebar

Copyright

Footer Terms

Pages

WooCommerce

Store Notice

Product Catalog

Product Images

Checkout

Single Product

Product Archive

Additional CSS

Blog

Archive Settings

Single Post Settings

Portfolio

General

Archive Settings

Single Page Settings

Careers

General

Archive Settings

Single Page Settings

Team

General

Archive Settings

Single Page Settings

Error 404 Page

Additional Settings

Page Loader

Page Loader