To search across docs Ctrl+F (Windows, Linux and Chrome OS) and ⌘-F (Mac)

Welcome to Logan theme

First of all, thank you for your purchase! ...and excuse me for my poor English.

Before you get started, please be sure to always search our documentation (here) and FAQs on ThemeForest (click here). To search through the entire documentation please press Ctrl+F (Windows, Linux and Chrome OS) and ⌘-F (Mac).

Logan can only be used with WordPress and we assume that you already have WordPress installed and ready to go. If you do not, please read the section below.

Wordpress

To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex or you can watch the Instructional Video created by Woo Themes. Below are all the useful links for WordPress information.

Requirements

To use Logan you must be running 

  • WordPress 4.4 or later
  • PHP 5.3 or greater
  • max_execution_time 120
  • memory_limit 64M
  • post_max_size 64M
  • upload_max_filesize 64M
  • max_input_vars 5000.

If you don't know how to set some of these vaules, contact your provider support.

What you have purchased

When you purchase this theme from ThemeForest, you need to download the Logan files from your ThemeForest account. Navigate to your downloads tab on ThemeForest and find Logan.

Click the download button to see the two options. The All files & documentation contain everything, the Installable WordPress file only is just the installable WordPress theme file. Below is a full list of everything that is included when you download the main files:

  • Documentation (that contains this very page)
  • Licensing
  • Wordpress Theme that contains
    • a folder called "logan" you can upload via FTP
    • a ZIP file called "logan.zip" you can upload from the Wordpress backend
    • and a ZIP file called "logan-child.zip", an installable child theme for Logan

The premium plugins are included in the theme itself, and you can find them on "logan / inc / plugins". They are:

  • go_pricing.zip
  • js_composer.zip
  • revslider.zip
  • ts-visual-composer-extend.zip
  • meta-box-tabs.zip
  • logan-addons.zip
  • logan-menu.zip

Theme support

The theme comes with 6 months of included support and free lifetime updates for your theme. Once the 6 months of included support is up, you have the opportunity to extend support coverage up to 6 or 12 months further. If you choose to not extend your support, you will still be able to submit bug reports via email or item comments and still have access to our online documentation knowledge base and video tutorials.

Envato clarifies item support here http://themeforest.net/page/item_support_policy You can have support through the comment section of Logan on ThemeForest or by contacting the author though its profile page.

Support is limited to questions regarding the theme’s features or problems with the theme. The theme author can't provide support for code customizations or third-party plugins. If you need help with anything other than minor customizations of your theme, we suggest enlisting the help of a developer.

Installation and updates

How to install the theme

I highly recommend to watch the video tutorial here below as well.

You have two options to install the theme (read above where the files are located):

  1. by using an FTP client (FileZilla, Dreamweaver, FireFTP or similar) upload the folder called "logan" to
    your_root / wp-content / themes
  2. directly from the Wordpress backend, go to Appearance → Themes → Add new (theme) and click the "Upload theme" button on the next page. With the browse button find the aforementioned "logan.zip" file, then click "Install now".

After activating Logan, you will see (top of the screen) a message with the list of the recommended plugins. They aren't mandatory, but many functions of the theme are demanded to them and the One Click Demo Installer imports content that depends on them in many cases. In particular:

  • Logan Menu (to create mega-menus)
  • Logan Addons (with custom post types, Visual Composer extensions ecc.)
  • Contact Form 7
  • Go - Responsive Pricing & Compare Tables
  • Jetpack by WordPress.com
  • Meta Box
  • Meta Box Tabs
  • Slider Revolution
  • Stag Custom Sidebars
  • WPBakery Visual Composer

After installing and activating the plugins, run the WooCommerce wizard if you want have installed WooCommerce and activate JetPack. Once activated JetPack you may enable its necessary modules, in particular:

  • Carousel
  • Custom Content Types
  • Extra Sidebar Widgets
  • Sharing
  • Shortcode Embeds
  • Tiled Galleries

One click demo installer

After you have installed the recommended plugins go to Appearance → Customize → Demo installer. You'll find several screenshots, one for each demo available. Just click one of them and start the demo installation process.

As you can read in the modal box, you are importing a complete demo. This includes posts, pages, comments, widgets, media. All the theme options available in the Customize page will be overridden and lost so it is highly recommended a backup if you don't want to lose your previous data.

The entire process can take about 5 minutes, but it can be also different because of internet conntection, traffic on the server etc.

In the video above, from about 3:20 you can see the One Click Demo Installer in action.

Import Content

If you don't want to use the One Click Demo Installer but you need, for instance,to migrate a local installation of Logan to your live server, you can go to Tools → Import → Logan Importer. It is a script based on the plugin Wordpress Importer, but with some enhancements to fit the theme, like the ability to import mega menus and to avoid to duplicate images if possible.

To import/export widgets use the plugin Widget Importer & Exporter and to import/export the Customize panel just use the plugin Customizer Export/Import.

Revolution Slider and Go Pricing allow to import/export content from their own option panels.

How to update the theme (and the plugins included)

Not recommended: you can update the theme by activating a different theme for a while, deleting Logan from the theme list and upload it again via the Wordpress backend. But it could cause some loss of data, some unregistered widgets or menu.

Still not recommended: you can upload a new version via FTP and override all the old files.

Recommended: you can go to Appearance → Theme updates and enter your Envato user name (the same you used to purchase the theme) and your Item purchase code: what I'm talking about. In this way you will receive a notification when a new version of Logan is available and you will be able to update it from your backend.

You'll also receive a notification for the following plugins and will be able to update them from your backend as well, without filling out any other form, but only if Logan is installed and activated:

  • Logan Menu
  • Logan Addons
  • Meta-Box Tabs
  • Revolution Slider
  • WPBakery Visual Composer
  • Go Pricing - WordPress Responsive Pricing Tables
  • Composium - Visual Composer Extensions

N.B.: you may activate the theme on one Wordpress installations only. This means you won't receive any update if you use the theme on different installations. But you can unregister a copy of Logan to activate it on a different installation, if you prefer. Just leave the fields blank and click

Customizations

As said above, the theme author can't provide support for code customizations or third-party plugins. If you need help with anything other than minor customizations of your theme, we suggest enlisting the help of a developer.

However, it is good to talk about the right way to make customizations:

  • customizations to the CSS can make through the Jectpack extension called Custom CSS. You can activate it in Jetpack → Settings and, once activated, you can add your own CSS code on Appearance → Edit CSS;
  • customizations to the PHP functions can be added to wp-content / logan-includes / includes.php. Logan should have been created this directory and file during its first installation. If you can't see it you can create manually and use it to add filters or overrid functions. Since the directory is out from the theme folder, it won't be deleted when you update the theme
  • for the other customizations it is recommended to use a child theme. There is a child theme ready to be use in the file you have downloaded from ThemeForest (read here for more info). About child themes: https://codex.wordpress.org/Child_Themes

Live Customizer

Demo installer

As described above it allows to install the demo content of one of the preset skin demos.

Layout

Style

Here you can decide to display a boxed or wide layout and also the the width (N.B.: in pixels) of the page content. You can also disable the page loader effect.

Body background

Set the page background color or image, also set the other background image parameters: background position, size, repeat and attachment.

Page background

The page background only allows you to set a color that will be the background behind the text.

Top bar

Behaviour

Decide to display or to hide the topbar.

Colors

Set both the text color and the background color of the topbar. If you'll set the header as transparent in the header section, the topbar will inherit that behaviour.

Typography

This section allows you to select the font family among some web safe fonts and the entire list of Google fonts. You may also use a Typekit font if you prefer. For more info click here.

Besides the font family you can select: font weight, subsets, font size, letter spacing, line height and case (uppercase or normal).

Left elements

Here, with a drag & drop interface, you can add elements to your top bar and populate its left side. You can select among simple text, icons and (if the plugins are active) the wishlist link (it requires YITH Wishlist plugin) or the language switcher (it requires WPML plugin). You can add a link, an ID, a class (for CSS purposes) and decide whether to hide the element under certain screen resolutions.

Right elements

Read the section above.

Header

Gradient bar

In this section you can decide the colors of the bar above the header and the top bar. You can also decide its thickness. If you don't want to display any gradient bar, just set its thickness to zero (0).

Since Logan allows to display a transparent that becomes opaque when you scroll down, in this section you can set a logo for the header when it is opaque and a different version of the logo when the header is transparent.

You can also decide a max height for the logo: even if the logo won't be taller than the header height, here you can decide if you want to make it smaller than its original size.

Site title

Here you can type the site title that will be visible in the header or, if you prefer, you can hide with a simple checkbox. In addition, you can select the text color, the font family among some web safe fonts and the entire list of Google fonts. You may also use a Typekit font if you prefer. For more info click here.

Besides the font family you can select: font weight, subsets, font size, letter spacing, line height and case (uppercase or normal).

Site description

Here you can type the site payoff that will be visible in the header or, if you prefer, you can hide with a simple checkbox. In addition, you can select the text color, the font family among some web safe fonts and the entire list of Google fonts. You may also use a Typekit font if you prefer. For more info click here.

Besides the font family you can select: font weight, subsets, font size, letter spacing, line height and case (uppercase or normal).

Search and cart

With two simple checkboxes, decide here if you want to display in the header the search icon, trigger for the search form (integrated with the plugin SearchWP Live Ajax Search, if you have activated it) and the shopping cart (only if WooCommerce is activated).

Colors

Set here the text color and the background color of the header.

Also set the accent color that will be used for hover effects. It will be also used as background for the nav labels, together with the "Accent color opposite" used, instead, for the text inside the labels (look at the image).

With a simple checkbox you can decide to display the header as transparent and two fields below the checkbox allow you to set a semi-transparent header background and the text color for the transparent header.

N.B.: the transparent header will be displayed only if the page allows it. If the first section below the header isn't a fullwidth/fullscreen slideshow or a section with a fullwidth/fullscreen background image the header will be displayed as opaque.

Layout

Logan comes with six different header layouts:

  • the boxed and floating one
  • the wide and floating one
  • the centered one, with the navigation menu split into two parts around the logo
  • the classic centered, with the navigation menu below the logo
  • the classic one
  • and the side one

In this section you can also set if you want that your header is sticky when you scroll the page, and the heights of the header when you load the page, when you scroll the page down and (for the classic header, where the navigation menu stays below the main header) of the navigation menu.

Adv. banner

In this section you can upload a banner with a link, that can be used as advertising. The banner will be visible only if you select the classic header though.

Typography

General

This section allows you to select the site default text color, together with the accent color (used for the textual links, for instance) and the error and success colors (used for form message or across the ecommerce).

You can also select the the font family among some web safe fonts and the entire list of Google fonts. You may also use a Typekit font if you prefer. For more info click here.

Besides the font family you can select: font weight, subsets, font size, letter spacing, line height.

Alternative

Alternative font color is used in particular cases, like captions, subtitles, small links etc.

Alternative font family is used instead for those tags that, generally, use a sans-serif font, so a sans-serif font is higly recommended (small links for instance).

Headings

For headings from H1 to H6 you can select the text color, the font family among some web safe fonts and the entire list of Google fonts. You may also use a Typekit font if you prefer. For more info click here.

Besides the font family you can select: font weight, subsets, font size, letter spacing, line height and case (uppercase or normal).

Code

When you use across the site the tag pre or the tag code you are displaying preformatted text and you can select here the font family among some web safe fonts and the entire list of Google fonts. You may also use a Typekit font if you prefer. For more info click here.

Besides the font family you can select: font weight, subsets and font size.

Custom font face

Logan allows to use Typekit fonts, you only have to enter the details of your Typekit account in the live customizer. For more info click here.

Aside sections

Sliding bar

The sliding bar is an additional sidebar that stays closed on desktop devices too. On this section you can decide, with a simple checkbox, to use it or hide it.

As a normal sidebar it is populated by widgets and, to add widgets to it, you have to go to Appearance → Widgets and add the widgets you prefer to the widget area called Sliding sidebar.

A sticky element is an element that stays fixed when the rest of the page scrolls. Sticky elements also can change this behavior and stay fixed if they have space, scroll together the other when they reach the edges of their container, as the image shows.

In this section you can decide if all your sidebars will be sticky (a custom option in the page builder allows you replicate the same behaviour for the columns created by Visual Composer).

The footer can be fixed, this means that it will be shown when you scroll to the bottom of the page as the rest of the site above is a curtain. A javascript function, though, calculates whether the footer is taller than the browser window or than the content above it, in those cases the footer won't be fixed, to avoid that parts of it can't be readable.

Even if it isn't contained in the footer, properly, ideally the "back-to-top" button can refer to this section. Here you can select to display or hide it.

The content of the footer could be due to widgets. In this case you have to go to Appearance → Widgets and add widgets to the sidebars Footer #1 up to Footer #4. They represents the four columns the footer is split into. If one of those widget areas will be empty, the width of the footer will be split for the columns with content.

If you want to use a more articulated footer, you can also use a page to display as footer. In this case you will be able to use the page composer to create a stunning layout. The page used as footer will be excluded from the search results, of course, and it will return a 404 error if you try to reach it directly.

In this section you can set the background color, text color, heading colors and accent color of footer. This could be necessary since, in most case, footer has colors completely different from the rest of the page.

You can also select a background image, together with it CSS property: background repeat, position, size.

Also buttons can be different from the default ones, since the colors you selected for the rest of the page can't be right for the footer. So here you can decide the border color, border color on hover state, the text color, the text color on hover state, the background color, and the background color on hover state.

Latest posts page

Latest posts page can be your home page or a secondary page, it depends on what you select on Settings → Reading → Front page displays or in Customizer → Static front page → Front page displays, "Your latest posts" or "A static page" option:

Content

If "Your latest posts" option is selected, you need to define a page that will be used to retrieve the page template and the content, if you you have one, for your latest posts page. You can define that on the field "Select a page to refer as your latest posts page when your front page is your latest posts page as well".

In the field below ("Content on latest posts page") you can decide whether to display only posts (together with the sidebar if you have one) or to display some content above the latest posts or to display the content only without any post.

You can also decide the order of your posts, of course.

Design

Even if not all the options available on this section have been built to be combined, here you can decide:

  • grid (rows or vertical cascading grid aka masonry )
  • text position (below or over the image, if the post has a featured image or a video)
  • the effect on scroll
  • the amount of elements per row (also settable for tablet landscape view, tablet portrait view and mobile phones portrait view)
  • to make the width of the first post double (look at the image)
  • the gutter between element
  • the aspect ratio of the image, by setting its ratio width and height (click here for more info)

Elements

Even if not all the options available on this section have been built to be combined, here you can decide:

  • to display the featured image (or the media relative to the post format)
  • to display the category links
  • to display the post format icon
  • to display the post title
  • the title heading tag
  • to display the likes counter
  • to display post reviews
  • to display author name
  • to display the avatar image
  • to display the date and how to display it (from now or as absolute date)
  • to display the estimated reading time
  • to display the comment amount
  • to display the content, the excerpt or nothing
  • to display the read more button

Post categories and Post archives

Content

Set the order by and the order options for post category and post archive pages across the site.

Design

Even if not all the options available on this section have been built to be combined, here you can decide:

  • template (default, narrow page, left sidebar, right sidebar)
  • sidebar
  • grid (rows or vertical cascading grid aka masonry )
  • text position (below or over the image, if the post has a featured image or a video)
  • the effect on scroll
  • the amount of elements per row (also settable for tablet landscape view, tablet portrait view and mobile phones portrait view)
  • to make the width of the first post double (look at the image here)
  • the gutter between element
  • the aspect ratio of the image, by setting its ratio width and height (click here for more info)

Elements

Even if not all the options available on this section have been built to be combined, here you can decide:

  • to display the featured image (or the media relative to the post format)
  • to display the category links
  • to display the post format icon
  • to display the post title
  • the title heading tag
  • to display the likes counter
  • to display post reviews
  • to display author name
  • to display the avatar image
  • to display the date and how to display it (from now or as absolute date)
  • to display the estimated reading time
  • to display the comment amount
  • to display the content, the excerpt or nothing
  • to display the read more button

Portfolio projects

This section is available if you have activate Jetpack only.

Content

Set the order by and the order options for portfolio archive pages across the site.

Design

Even if not all the options available on this section have been built to be combined, here you can decide:

  • template (default, narrow page, left sidebar, right sidebar)
  • sidebar
  • grid (rows or vertical cascading grid aka masonry )
  • text position (below or over the image, if the post has a featured image or a video)
  • the effect on scroll
  • the amount of elements per row (also settable for tablet landscape view, tablet portrait view and mobile phones portrait view)
  • the gutter between element
  • the aspect ratio of the image, by setting its ratio width and height (click here for more info)

Elements

Even if not all the options available on this section have been built to be combined, here you can decide:

  • to display the tag filter above the portfolio items
  • to display the project category links
  • to display the post title
  • the title heading tag
  • to link the title to the post or to nothing
  • to display the likes counter
  • to display the read more button
  • to open featured media in a modal box (ColorBox)

Single projects

On this section you can also decide whether to display the related items below the content of the single portfolio projects. Relantionships between items are due to their tags.

Pages

404 page

The 404 page is the page displayed when you try to visit a link that doesn't exists. In this section you can add a background image to the page and add the CSS properties you prefer.

Search page

Set the effect that the items on the search result page will have on scroll.

If WooCommerce is active you can also decide to limit the search results to the products only.

Here you can also set the page template (default, narrow page, left sidebar or right sidebar) and, if supported by the page template, the sidebar.

WooCommerce

General

On this section you can only set what effect to use to reveal the products on scroll on product archive pages.

Shop page

The shop page is the main product page you have to set on WooCommerce → Settings → Products → Display.

In this section of the Customizer you can set the products per row, the gutter between products, the effect to use to reveal the products on scroll and the image aspect ratio (width and height), for more info click here.

Single products

In this section you can disable the zoom effect it is applied to the main product image when you pass the mouse over it.

Here you can decide to display related products below the product content. Related products are based on product tags. Upsell products are instead decided by you on the product backend, more info are available here.

In this section you can set the amount of products to display, the gutter between products, the effect to use to reveal the products on scroll and the image aspect ratio (width and height), for more info click here.

Thank you page

Select a page to use as starting content of the thank you page, the page the customer will see after the checkout process. The content of that page will be displayed above the order details.

CSS

With a simple checkbox, here, you can decide to load the custom CSS (generated by the options you set on the Live Customizer) as a static file or directly in the head tag, as inline code (default: inline code). Loading the CSS as a static file could be better: this reduces the lenght of the page and the generated file can be loaded via CDN, for instance, or combined with other files. But some servers can create issue with this feature, so both the options are available. In particular often you have to manually change the file permissions of the file to allow Logan to edit it. When this is necessary you will see a message below the checkbox (look at the image). Click here for more info about file permissions.

Buttons

Buttons are a very important part in the theme. A custom module created ad-hoc in Logan for Visual Composer allows you to customize buttons on fly, but in this section you can define the default button design, by settings border radius, border color, border color on hover state, border width, text color, text color on hover state, background color, background color on hover state and, of course, the font values: the font family among some web safe fonts and the entire list of Google fonts. You may also use a Typekit font if you prefer. For more info click here. Besides the font family you can select: font weight, subsets, font size, letter spacing, line height and case (uppercase or normal).

Single posts

Decide in this section whether, on single post pages, to:

  • display the author name at the top;
  • display the date at the top;
  • stylize the first letter;
  • stylize the first line;
  • display the progress bar when you scroll the post;
  • display related posts.

Visual Composer

Some functions both of Visual Composer plugin and (most of all) Visual Composer Extensions plugins are disabled by default. This for many reasons: sometimes they are redundant and the functions that come with the theme are enough, sometimes they simply don't reflect the spirit behind the theme and they would create inconsistency, sometimes the theme's author simply considered them (how to say...?) not so appealing and preferred hide theme.

However they aren't lost, you can activate them again in this section. But, because of the reasons aforementioned, they aren't supported at all.

Site icon

This function comes from JetPack and allows you to set a favicon.

Menus

On this area you can manage your menus but pay attention: mega menu features are disabled here, so if you manage your menus in this area you will lose all the settings related with the mega menu. I recommend, instead, to always manage menus on Appearance → Menus.

Typography

Across the Live Customizer Logan allows you to select font parameters for many elements, from the default font of the body, to the headings, the pre tag, some special sections.

The fonts available are the web safe ones (Time New Roman, Arial, Trebuchet...) and the Google fonts. The Google font list is updated regularly.

There is an extra option in the font family select box: "None (for CSS customizations)". You can select it if you want to use a custom font, loaded by you in a child theme, for instance, or if you want to use a Typekit font. Logan allows to use Typekit fonts, you only have to enter the details of your Typekit account in the live customizer as shown below. Once your account is correctly set, copy the font family name as provided by Typekit and paste it in the "Custom font family" field.

As said above you can select the option "None (for CSS customizations)" but you can also select a Google font instead, even if you fill the field "Custom font family". This could be particular useful if you need to select a particular font weight for your custom font. The font weight options change if you select, for instance, Open Sans or Montserrat. The options available are different, of course. So the only way to select a particular font weight for a custom font, for instance the weight 100, is to select a font like Raleway in the "Font family" select box, this will provide you the ability to choose among a large range of font weights.

The options set in the Live Customizer will reflect not only on the front end, but on the backend as well, as you can see in the image above, where are shown Acta Display and Azo Sans, two fonts from Typekit.

Text editor

The visual text editor (tinyMCE) have some extra features in Logan:

  • the ability to select the font size (intended in ems);
  • the formats drop down box that contains the groups
    • styles
    • effects
    • line height

Styles group allows you to assign many CSS classes to your text and assign to it particular looks:

  • subtitle: the text will be rendered in italic with an alternative color
  • alternative font: will be used the alternative font you have set in the Live Customizer
  • alternative color: will be used the alternative color you have set in the Live Customizer
  • accent color: will be used the accent color you have set in the Live Customizer
  • pull left: the text block will be pulled to the left (look at the image below)

  • pull right: the text block will be pulled to the right
  • first letter: the first letter of the text block will be bigger than the other ones
  • first line: the first line of the text block will have a different style
  • horizontal line: the text will be crossed by a horizontal rule. The rule can be stay on the left of the words, on the right or on both sides, it depends on the text alignment (look at the image below)

  • no margin: if the elements has margins set by the CSS, with this option you will remove them
  • align left: element will float to the left
  • align right: element will float to the right
  • quote right: (available for block quotes only) element will float to the right
  • quote left: (available for block quotes only) element will float to the left
  • uppercase: the text in the element will be rendered with uppercase property active

In the Effects group you can decide the effect the element will adopt when revealed on scroll.

Images on fly

Logan uses in many cases a script to resize the images on fly. This with the intention to reduce the amount of images that physically occupy space on the server. This also allows you to define the ratio of your images in many cases, for instance on Live Customizer or Visual Composer.

The width is often calculated according to the content width by the amount of elements per row. But, for particular cases (fullwidth sections, for instance) you can set a optional image width.

In the same way you can resize an image on fly when you put it directly in the text editor, by using, for instace, the Single image shortcode provided by Visual Composer. As you can see in the image on the right, below the image thumbnail you can type the image size. You can select among the registered image sizes:

  • thumbnail (150 x 150);
  • medium (300 x original a.r.);
  • large (1024 x original a.r.);
  • pix_medium (600 x original a.r.);
  • pix_lasrge (1236 x original a.r.);

But you can also enter a custom size, for instance 300x100, where 300 is the width and 100 is the height. The custom size must be entered in this way, without empty spaces or other characters but number and the sign x between the width and the height.

If you want to assign a custom size that respects the original ratio of the image, just set the height as zero, so, for instance 300x0

The cons is that, once the script stores an image with a name, if you replace it by keeping the same name, the script won't replace it for the custom sizes it created on fly. So you have to use this workaround instead:

Add this snippet to a child theme or the file wp-content / logan-includes / includes.php as described here, and refresh your site. N.B.: after refreshing the site you have to delete the snippet.

Visual Composer

Logan comes with 11 custom shortcodes created for Visual Composer. In many cases they are created for the backend editor and some functions are not supported by the front end editor, so I recommend for a perfect use to prefer the former, if possible.

Custom shortcodes

Logan Buttons

You are able here to override the default buttons defined in Live Customizer. Together with the default settings (colors, borders etc.) you can select the alignment, the width of the button, the animation during the page scrolling. You can also add an icon, decide its color, position etc.

You can also decide to create a dual button, i.e. a button split into two parts, with different text, links, colors and so on.

Logan Icon Box

This module not only allows you to select among the almost 900 icons made by Budicons together with Zocials, but allows you to create advanced boxed made by icons and text, where you can decide the look of the icons (colors, background, border), its alignment respect to the text and the effect when revealed during the page scrolling.

Logan Google Maps

Insert Google Maps by entering the latitude and longitude of a place. To get those coordinates please read here. You can also select the zoom, the type (roadmap, hybrid, satellite, terrain and streetview) and some values relative to the different types.

You can upload a custom marker on Logan Google Maps Settings → Design → Display marker, and, in the field below, you can paste the JSON code to customize the colors of a map (you can find many examples on Snazzy)

Logan Image Box

With this module you can create image with text over them. You can set the text color and add content through a visual editor box, you can set the image alignment, a URL to link the image, the animation on scroll reveal.

You can also decide the size of the image and resize it on fly as described above, read here for more info.

CSS styler and animator

This is a module that allows nested modules: it means that it can contains other elements and the its settings will applied to the nested element.

It allows to assign an effect to reveal elements on scroll, to assign a parallax value to any element for stunning effects, to fade elements when they are more close to the top or the bottom of the page, to assign a shadow to the contained elements or to manage various CSS properties like display and z-index.

Logan Project List

If you have activated Jetpack you should see this module active as well.

It allows to display your portfolio items by selecting them by category or tag, or to exclude and include them by ID (thank to a built in ajax search function).

With a checkbox you can also avoid to display the same item twice on the same page, if you want to use the shortcode several time across the page content.

On Design tab you can set:

  • grid (rows or vertical cascading grid aka masonry )
  • text position (below or over the image, if the post has a featured image or a video)
  • text align
  • the effect on scroll
  • the amount of elements per row (also settable for tablet landscape view, tablet portrait view and mobile phones portrait view)
  • the items per module
  • whether to display the pagination and select between a classic pagination and a load more button
  • the gutter between element
  • the optional image width
  • the aspect ratio of the image, by setting its ratio width and height (click here for more info)

On Elements tab you can decide:

  • to display the tag filter above the portfolio items
  • to display the project category links
  • to display the post title
  • the title heading tag
  • to link the title to the post or to nothing
  • to display the likes counter
  • to display the read more button
  • to open featured media in a modal box (ColorBox)

Logan Post List

This module allows to display your blog posts by selecting them by category or tag, or to exclude and include them by ID (thank to a built in ajax search function).

With a checkbox you can also avoid to display the same item twice on the same page, if you want to use the shortcode several time across the page content, besides a field to ignore sticky post and the fields to decide the post order.

On Design tab you can set:

  • grid (rows or vertical cascading grid aka masonry )
  • text position (below or over the image, if the post has a featured image or a video)
  • the effect on scroll
  • the text alignment
  • the amount of elements per row (also settable for tablet landscape view, tablet portrait view and mobile phones portrait view)
  • to make the width of the first post double (look at the image here)
  • the amount of items per module
  • whether to display the pagination and select between a classic pagination and a load more button
  • the gutter between element
  • the optional image width
  • the aspect ratio of the image, by setting its ratio width and height (click here for more info)

On Elements tab you can decide:

  • to display the featured image (or the media relative to the post format)
  • to display the category links
  • to display the post format icon
  • to display the post title
  • the title heading tag
  • to display the likes counter
  • to display post reviews
  • to display author name
  • to display the avatar image
  • to display the date and how to display it (from now or as absolute date)
  • to display the estimated reading time
  • to display the comment amount
  • to display the content, the excerpt or nothing
  • to display the read more button

Logan team members

The custom post type team member is due to the plugin Logan addons. Once you added one or more team members, you can display them thanks to this modules.

You can include or exclude members by ID. If you leave empty the field Include only all the members are displayed, so you can exclude them by using the field Exclude members.

You can set the order of the items and, in the Design tab you can set:

  • the effect on scroll
  • the amount of elements per row (also settable for tablet landscape view, tablet portrait view and mobile phones portrait view)
  • the amount of items per module
  • the gutter between element
  • the optional image width
  • the aspect ratio of the image, by setting its ratio width and height (click here for more info).

On the Look tab you can set:

  • the title heading tag
  • to link the member title to the member single page
  • the text position (fixed over the image, over the image on hover state, below the image)

Logan typography separator

Put animated horizontal rules across your page with this module. You can decide the thickness, the alignment, the max width and, of course, the animation during the scroll.

Logan progress bars

Animated progress bars. You can set their background color option, bar color, label text, amount text, measure unit.

Logan media player

With this module you can display videos and audio files, both hosted on your server (mp4, ogg, webm, mp3) and from external sources (Vimeo, YouTube, SoundCloud, Spotify).

For self hosted media are also available the option gallery, that uses the Wordpress native gallery function.

Visual Composer default elements

Many of the default elements of Visual Composer, like rows, inner rows, columns, have a tab called Logan extra with additional features that come from the theme.

Rows

For the element row Logan provides some extra features in the tab Logan extra:

  • overlay color: you can set a semi transparent color that covers, for instance, the row background image
  • inner shadow: put a shadow effect to the top or the bottom of the section (look at the image below)

  • max height: intended in pixels, this field allows you to that the section is taller than a certain height
  • background parallax: if you added an image to the field below Row settings → Parallax (to see it you have to select Simple or With fade options), with this field you can set the parallax coefficient to decide the speed and the direction (only vertical) of the effect.
  • parallax position: intended in percentage, this field move the parallax image you set in the field below Row settings → Parallax (to see it you have to select Simple or With fade options) and makes it occupy only part of the row (look at the image on the right)
  • overflow: the CSS overflow property specifies what happens if content overflows an element's box.With overflow:hidden the elements of a row stay inside the row and won't overflow the near elements. With overflow:visible the elements in a row, if bigger than the row or moved away from its edges by using negative margins for instance, will render outside the row's box (look at the image on the left)

Inner rows

For the element inner row Logan provides some extra features in the tab Logan extra:

  • inner shadow: put a shadow effect to the top or the bottom of the section (look at the image)
  • max height: intended in pixels, this field allows you to that the section is taller than a certain height
  • overflow: the CSS overflow property specifies what happens if content overflows an element's box.With overflow:hidden the elements of a row stay inside the row and won't overflow the near elements.With overflow:visible the elements in a row, if bigger than the row or moved away from its edges by using negative margins for instance, will render outside the row's box (look at the image on the left)

Columns and inner columns

For the elements column and inner column Logan provides some extra features in the tab Logan extra:

  • sticky column: a sticky element is an element that stays fixed when the rest of the page scrolls. Sticky elements also can change this behavior and stay fixed if they have space, scroll together the other when they reach the edges of their container, as the image shows (look at this image)
  • overflow: the CSS overflow property specifies what happens if content overflows an element's box.With overflow:hidden the elements of a row stay inside the row and won't overflow the near elements.With overflow:visible the elements in a row, if bigger than the row or moved away from its edges by using negative margins for instance, will render outside the row's box (look at the image on the left)

Revolution Slider

If Revolution Slider plugin is activated you will see the module to insert a slideshow into your page.

Logan added the tab Logan Extra where you can set an extra parallax effect to the slideshow.

Tabs

To the default tab feature, Logan added some extra parameters in the tab Logan extra:

  • 100% width: the width of the tab labes will be expanded to the entire column width
  • style remover: the default styles of the tabs are removed (borders and backgrounds) and they will appear like plain text
  • button look: the tab labels will appear like buttons

Also in the tab sections Logan adds an extra tab where you can:

  • add an animation on scroll to the tab
  • use a custom icon picked from Budicons that will overrided (if select) the default Visual Composer icon

N.B.: the tab sections properties are available for accordion module and tour one as well

Logan Menu

Even if you can manage your menus on Live Customizer as well, please pay attention: mega menu features are disabled on Live Customizer, so if you manage your menus in that area you will lose all the settings related with the mega menu. I recommend, instead, to always manage menus on Appearance → Menus.

Here is a short video that illustrates the basic menu functions.

Important: click the "CC" icon and activate english subtitles for more info.

If the basic working od the menu is illustrated in the video above, let me say you may use some shortcodes in the menu. Use these shortcodes with custom elements and put them in the URL field:

Translations

It is possible to translate every single string that the theme outputs on the frontend to any language you like. Logan is compatible with the best and most widely used multi-language plugin: WPML. But you can also use other famous plugins like Polylang and Loco Translate.