Documentation for Convert

ATTENTION: This documentation is about the new version of Convert. If you are using the legacy version please visit its documentation pagehere.

Server Requirements

If you already have WordPress installed, it means that you meet the minimum server requirements and you can perfectly install this theme without any issues. To get the most out of your website though, you should get in touch with your web host and ask them if they meet the following criteria:

  • PHP version 7.4 or greater.
  • MySQL version 5.6 or greater OR MariaDB version 10.1 or greater.
  • HTTPS support.

Prerequisites

Ignition Framework

This theme requires our free Ignition framework plugin to be installed. Simply visit the Downloads area, download the Ignition Framework plugin, upload it through your Dashboard → Plugins → Add new and Activate it.

It really doesn’t matter if you install the theme or the plugin first. Just make sure to install both in order to get the whole functionality.

GutenBee (Optional)

GutenBee is a collection of elegant WordPress blocks enhancing your editing experience in the block editor and vastly extending the potential of the new editor experience.

If you want to replicate our demo website you need to install it. Simply visit Plugins → Add new and search for “GutenBee”. Click on Install Now and then Activate it.

WooCommerce (Optional)

Convert supports WooCommerce by default. Sample content includes custom products and WooCommerce pages to get your started.
If you don’t have WooCommerce active you might get some warnings from One Click Import plugin. Please ignore them.

Contact Form 7 (Optional)

Contact Form 7 is a popular contact form plugin, installing it will ensure the contact form will appear when importing sample content. You can use any other third party plugin you wish though.

Theme installation

Here is a quick video guide to install Convert and the Ignition Framework:

Installing the theme is a very simple process. Go to your WordPress dashboard → Appearance → Themes → Add new and upload the zip file. Once uploaded just click on the Activate button. That’s it! You can now start creating pages.

Have a look at our WordPress theme installation guide here

How to import the sample content

If you like what you see in our demo website you can simply import the sample content. This means that an exact replica of our demo website will be imported in your WordPress installation. Now all you have to do is simply replace the content of these pages with your content.

Please check this video guide first:

  • In your WordPress dashboard visit Appearance → Theme Options → Sample Content.
  • Click Install and then Activate for each of the required plugins.
  • Click the Get Started button and in the next screen the Import Demo Data button.
Please note: Due to the nature of the import mechanism some links may link back to our demo website. If you are not sure how to update / change these links simply get in touch and we’ll help you out.

Image sizes

Web page loading times are greatly affected by the size of your images. For best results make sure to use images with the recommended dimensions as described below:

  • Main post thumbnail: 870x580px
  • Item: 615x 410px
  • Large Item: 1170x780px
  • Article Media 510x510px
  • Mini-cart items 160x160px
Please note: If for any reason you want to change the dimensions of any of the predefined image sizes you have to use a plugin. This guide describes this process.
Please note: All image sizes are the minimum recommended, adding larger image sizes will result in cropping them to fit these sizes

Setting up the global sections of your website

It’s considered a good practice to set up the areas of your website that you won’t be editing a lot in the future, like the header and the footer.

As you can see in our demo website all pages have a Transparent page header featuring a background image and 3 main components:

1. Top Bar
2. Logo
3. Main Menu

Top Bar

Here you can show/hide the top bar, change its colors and content

In your WordPress dashboard click on Appearance → Customize → Top Bar. Here you have 3 content areas available for simple text or shortcodes. Please refer to the shortcodes section below for information regarding the shortcodes available.

Alternative logo will appear when the header you selected is transparent. You can set your site icon here also

The recommended maximum width of your logo is 200px while you can use any height you want. To upload your logo visit the Customizer through your WordPress dashboard → Appearance → Customize → Site Identity. As you can see you can upload 2 logos. In this case we need to use the Alternative Logo upload field because we are currently using a Transparent header as set in the Customizer → Header → Layout → Header Type option.

In your WordPress dashboard click on Appearance → Menus. In the Menu structure section enter a Menu name (It can be anything you like) and click on the Create Menu button. From the Add menu items section on the left select the pages that you want to add in your menu and click on the Add to Menu button. Now all you have to do is assign this menu to a Display location. In the Menu Settings section click on the Main Menu checkbox. Your navigation menu should be now visible on your website.

You can create a special button-like menu item by setting a certain class for to it. The class name is nav-button and you can set it under Appearance→Menus for the item you want. First enable this section from Screen Options.

This is a predefined class you can use for your menu items

Before you start working with your menus check this article

Header Background image

Here you can select the main hero section global image and settings

You can set a common background image for every page on your website through Appearance → Customize → Page title. Under the Colors section you can set a background color, a background image, an overlay color and also set the primary text color and the secondary text color.

In some cases, like in our demo website, you might want to have different background images on different posts, pages and custom post types

Let’s see an example. Create or edit a page. On the right sidebar locate the Page title image field. Upload a new image and preview this page. As you can see we have successfully overridden the image set in the Customizer settings.

Please note: The purpose of the Transparent header option is to have your main header components (Top bar, Logo & Main Menu) on top of a background image or background color which means that you have to set on in the Customize → Page title → Color section.

General Site Options

Change your main site width and layout options

You can change your general site options globally from Appearance→Customize→Site Options. Under Layout section you can control your Site and blog layout, as well as the main width of your content and the ratio between sidebar and content. Under the Colors tab you can select the basic color palette for your installation and add a background image. Finally under Typography you can select from a full list of Google Fonts for each element in mobile mobile/desktop views. Or you can just disable Google Fonts altogether.

The footer area is a standard 4-column widgetized area that can be populated with widgets through Appearance → Widgets. You can also remove the credits at the very bottom of this area by visiting Appearance → Customize → Footer → Content section. You can also adjust the colors by setting a background color & image and also modify the border, title and text colors.

You can hide or show the foter, or change the background image and color

Under the Content (Customize→Footer) area you can add your copyright information and use any of the shortcodes included in the ignition framework

Add your copyright information here

You can select to disable the default theme Lightbox from Appearance→Utilities→Lightbox

Weather

You will need to setup an API key in order weather to work

You can choose to have the weather appear using the weather shortcode anywhere inside your installation. First you will need to setup the weather from Utilities→Weather. You will need to create an API key first here

Creating a new Service Item

Create a new Service item from Services→Add New. Then under the Document tab start adding basic item attributes. These are:

  • Featured image: Will be used everywhere you want to render your service item.
  • Service Category: Select a category for your service that will serve as an filter item in your Service Listing page
  • Excerpt: Add a manual excerpt that will appear as a small introduction to your service. Leave this blank and Convert will fetch the first paragraph from your service content
  • Post Attribute: You can control whether you want to have sidebar or not for the service
  • Page title image: The hero background image for the service. Leave blank if you want to keep the default settings
  • Page Settings: Here you can select your service settings. All our demo services have Remove top/bottom content padding and Show Page Title with Background options selected while the rest are fetched from the global Customizer options.

Creating a new Portfolio Item

Create a new Service item from Portfolio→Add New. Then under the Document tab start adding basic item attributes. These are:

  • Featured image: Will be used everywhere you want to display your portfolio item.
  • Portfolio Category: Select a category for your service that will serve as an filter item in your Portfolio Listing page
  • Excerpt: Add a manual excerpt that will appear as a small introduction to your service.
  • Post Attribute: You can control whether you want to have sidebar or not for the service
  • Page title image: The hero background image for the service. Leave blank if you want to keep the default settings
  • Page Settings: Here you can select your service settings. All our demo services have Remove top/bottom content padding and Show Page Title with Background options selected while the rest are fetched from the global Customizer options.

Create a navigation menu for Portfolio items

Go to Appearance→Menus and create a new menu, don’t set any location to it and add your portfolio posts as menu items. You can enable custom post types as menu items under Screen Options

Head over to Appearance→Widgets and add a Custom menu widget in the Portfolio sidebar, and then select the portfolio menu you have just created.

Navigation menu widget will detect the current post type and highlight it

Creating a new Event

Create a new Event item from Events→Add New. Then under the Document tab start adding basic item attributes. These are:

  • Featured image: Will be used everywhere you want to display your item.
  • Event Category: Select a category for your event
  • Excerpt: Add a manual excerpt that will appear as a small introduction to your event
  • Post Attribute: You can control whether you want to have sidebar or not for the event
  • Page title image: The hero background image for the service. Leave blank if you want to keep the default settings
  • Page Settings: Here you can select your event page settings. All our demo events have all settings inherited from Customizer
  • Event Settings: Select your Event Date, time and Location.

Creating a new Team Member

Create a new Team member item from Team→Add New. Then under the Document tab start adding basic item attributes. These are:

  • Featured image: Will be used everywhere you want to display your team member.
  • Team Category: Select a category for your team member that will serve as an filter item in your Team Listing page
  • Excerpt: Add a manual excerpt that will appear as a small introduction for your team member.
  • Post Attribute: You can control whether you want to have sidebar or not for the service
  • Page title image: The hero background image for the service. Leave blank if you want to keep the default settings
  • Page Settings: Here you can select your event page settings. All our demo events have all settings inherited from Customizer

Setting up the pages

Homepage

Create a new page from Pages → Add New, then select from the right side under Page Attributes the Full width template. Then from Page Settings check the Remove top/bottom content padding and set all other options to hide.

Add a GutenBee container with two columns under Layout Settings, then set a background image from Block Appearance. In the first Gutenbee column add a Gutenbee heading and a Gutenbee paragraph with your content. Leave the second column blank.

Next, add a GutenBee container with two columns ,In the first add a simple GutenBee paragraph and a GutenBee heading and in the second add a GutenBee button group with the button alignment on the right, and add a new GutenBee button inside.

Continue adding a GutenBee container with one column and add a GutenBee title and subtitle with a GutenBee divider following. Then add a GutenBee Post types and select the default style, and select the Services post type.

Add a new GutenBee container with one column and add a new GutenBee Post type, select portfolio post type this time and set the style to overlay. Notice this container has a different background color you can set from the container Block Appearance section

In order to create the callout section, you will need to add a GutenBee container with two columns and a static height 650px. Set your Vertical Content Alignment to middle, and a background image and an overlay from Block Appearance. Make sure the overlay has some transparency or your background image will not show at all. In the first column add a title paragraph and a Gutenbee block with your content.

Render your posts and teams again using the GutenBee post type block. Then create a new container with 5 columns and set 5 different GutenBee images which will contain your logo items.

Finally we have a GutenBee container block which will serve as a callout section with two columns. First columns has some basic information using GutenBee title and paragraph blocks, while the second has a GutenBee button group block with alignment set to right and a plain GutenBee button.

Make sure in all container blocks you add, Enable theme grid option is selected.

Always add GutenBee buttons inside a GutenBee group block to help you align the button however you want.

Creating Events, Portfolio and Services Pages

Create a new page under Pages→Add New. Set the page template under Page Attributes section to Full width boxed. Then select an image from Page Title Image section, and select to show the page title over it from Page Settings section by selecting Show Page Title with Background.

Add a GutenBee Post types block and select to show any post type your wish from the post type dropdown. You can select the default style or an overlay on and set your Posts per page to create some pagination. You can set a masonry/isotope effect by switching the Category Filters option (you will need to have some categories for your items). Setting category filters will ignore pagination and post per page, as it will show all items.

Careers page

Create a new page under Pages→Add New, add a new GutenBee Container block and set two columns to it. One contains a simple Gutenbee Heading and a Gutenbee paragraph while the other has a Youtube embeded video.

Next you will need to add a simple table block and set its style to Convert. Add some custom links to your team members and set the header section to appear under Table Settings

Contact us page

This will serve as your contact page, with a contact form, map and some details for your business. We are using Contact Form 7 plugin to display a contact form, but you can use any plugin you wish. Create a new page from Pages→Add New. Under Page attributes set the template to Full width. Add a Gutenbee Maps block and set your location into it.

Add a GutenBee container with two columns. First can have multiple GutenBee Icon Box blocks and the second you can add a shortcode block with the shortcode from your Contact Form 7 (or any other plugin).

Shortcodes

[ignition-custom-menu name=”your menu name”]
Create a Custom menu from Appearance→Menus, then use this shortcode to display it in any location you want. Primary used to display Social icons in the top bar.

  • Create New Menu instead from Appearance→Customize→Menus.
  • To add a social media link to the menu, click + Add Items.
  • Next, select the Custom Links menu item type.
  • Add the address for one of your social media profiles in the URL field. For example, if the link to your Facebook profile is https://www.facebook.com/cssigniter, you would copy that into the URL field.
  • You can also enter a name for the social media profile in the Link Text field. Once you’re ready, click Add to Menu.
  • Repeat the above steps until all the social media profiles you wish to use have been added to the menu.
  • Finally, click Publish.

[ignition-site-search]
Simple site search field, you can use it under any content area in the Customizer.

[ignition-date]
Supported attributes are:

  • format (optional): The date format, by default follows the one set under Settings → General.

Use this shortcode in any Customizer content area to display today’s date.

[ignition-current-weather id=”your-location-id(optional)”]
Supported attributes are:

  • id (optional): The id of the location to display the weather from, default is the one set under the Customizer Weather options.
  • units (optional): C or F units to display.

This will display the weather inside any content area in Customizer. You will need to setup the API first from Customize→Utilities→Weather. The location ID number can be found by visiting OpenWeatherMap.org and searching for your city. Leave this blank and the default ID from Customize→Utilities→Weather will appear.

[ignition-minicart-button]
This shortcode will display the minicart. Use it under Customize→Top Bar in any content field you wish.

[ignition-language-switcher]
Supported attributes are:

  • display (optional): accepted values are flags, text or both
  • type (optional): accepted values are dropdown or menu
  • untranslated (optional): accepted values are hide or home

We support WPML and Polylang. You can either use their default language switcher or our shortcode one.

Page templates

Theme provides several page templates you can select from Page Attributes. Depending on your scenario you can select:

  • Default template: This is the main template, you can start building anything using this one
  • Content / Sidebar: This page will always have the sidebar on the right (Same as default page template)
  • Sidebar / Content: This page will have the content always on the left
  • Full width: This will make your page Full width, covering from one side of the screen to another
  • Full width boxed: This will have the page Full width but inside the container scope. You can control the scope from Customize→Site Options→Layout options
  • Full width narrow: This is the same as Full width boxed, but it will add some padding making the content area a bit narrower

All pages have a generic set of options. These can be changed under the Page Settings section when editing each page.

  1. Remove top/bottom content padding: This will allow the content to have or not some extra padding from header and footer
  2. Disable featured image for this Page: You can select to hide the featured image in this single page. Featured image will appear in your listings though
  3. Header Type: Select transparent or opaque header type. You can control the color settings for the normal and transparent one from Customize→Header→Colors
  4. Show Page Title with Background: This will show or not the hero section with the page title and a background
  5. Show Normal Page Title: Hide or show the normal page title
  6. Show Normal Page Subtitle: Hide or show the normal page subtitle (if any)
  7. Show Breadcrumbs: Show or hide breadcrumbs for this page.

All settings are inherited from Customizer. So you can actually set some global settings and if you wish change certain pages to have different behaviour

WooCommerce

This theme supports WooCommerce, so you can create an eCommerce experience for your visitors.

Having Woocommerce installed is not mandatory to use the theme.

Shop page

Assign a Shop page

Before any other step you will need to create a new page from Pages→Add new and then select it as your Shop page.

Customize the Shop page

You can control the Shop listing page and product categories from Customize→Woocommerce→Product Catalog. Here you can select whether you want to show categories as items in your shop and product category pages as well as the column and row number for each page.

You can also set a second image to appear when hovering over your product. The first – default one will be the featured image, while the second will be the first image item from your product gallery.

Here you can also modify the shop layout to have a sidebar, and the position of that sidebar in relation to the content.

Single product

You can hide or show the related product section under Customize→Woocommerce→Single Product. There you can also control the number or upsells and related products you want to display.

Contact page

Create a new page from Pages→Add New and set the page template under Page Attributes to Full width contained. Then under Layout Options check the Hide title when viewing this Page option.

Add a column block with two columns. In the first column add a Jetpack Contact Info Block (you will need to have Jetpack active) and set your contact information. In the other one you can add a heading and paragraph block and after that a Jetpack Contact Form block.

Blog page

This is you main blog page. You can Create a new page and set it as your blog page under Settings→Reading. You can customize it from Customize→Blog under the Archive section.

Widget areas

The theme provides special widget areas for your Blog posts and archives, pages and shop. You can use a plugin/module like Jetpack’s widget visibility to hide or show widgets for certain pages or posts or products.

Support

If you need help during the initial installation and setup of this theme, feel free to get in touch and we will be right there for you within 24 hours to help

Theme installation service

If time is of essence, we offer a theme installation fee for an one-off low fee of $69. Contact us here

CYBER MONDAY Special! 50% OFF! Buy Now