The theme's main demo looks like real website. And as you know, real website creation takes time: you need to install and configure a theme and several plugins.
So as a result, the demo installation process will take a bit more time than usual (depending on your skills, it may take 5-10 minutes) but at the end your website will look supercool.
By the way, if you are new to Wordpress, the demo installation process may seem to be hard. Don't worry: feel free to contact our Support team to let them install and configure the demo for you (without any additional payments).
Before you begin
Please, download the main theme's file from Themeforest, find and save the 'Demo content' folder to your desktop.
The folder contains 3 files that you will use later:
- .TXT file to create several custom post types like 'Case studies';
- .XML file to import the demo content like pages, posts, media files, etc.
- .DAT file to import the Customizer's settings.
If you want your website to look like our demo, please, follow ALL the steps below in strict order.
In order to run the demo you will need to install and activate the following plugins:
- All the plugins recommended by the theme (just go to Appearance - Install plugins - and make sure the list is empty. If there are some plugins left, please, install and activate them);
- Pods (you will need this plugin to create several custom post types);
- WordPress Importer (you will need the plugin to import the demo content);
- Customizer Export/Import (you will need this plugin to import the Customizer's settings).
To install the plugins, please, go to Plugins - Add new - use the search field to find the plugins (just use the plugins' names), press the 'Install' button, and when the plugin is installed, press the 'Activate' button.
Custom post types creation
The demo uses several custom post types created with the Pods plugin. The demo custom post types import can be accomplished in 2 simple steps:
- You just need to activate the Migrate: Packages component within the Pods plugin and
- Paste the import data into it.
To activate the migration component, please, go to Pods Admin - Components
Just press the 'Enable' link (which is located below the component's name), and the component will be activated.
Then go to Pods Admin - Migrate Packages.
Press the 'Import' button, copy the text from the .TXT file (which you've saved from the 'Demo content' folder), paste it into the Import field and press the blue 'Continue' button.
All the demo custom post types have been imported and saved.
Grid basic configuration
In order to show any posts within grids, you need to choose the post types in the Creative Grid's settings.
Please, Go to Settings - Creative plugins
Check the newly created post types as well as Jobs (created by the WP Job Manager plugin) and pages, and press the blue 'Save changes' button.
Now the Creative Grid plugins knows the post types you've chosen. So later you'll be able to show their posts in grids.
Demo content import
Now you're ready to import the demo content.
Go to Tools - Import and press the 'Run Importer' link.
On the next page, you need to assign posts to another user, choose the 'Download and import file attachments' option and press the 'Submit' button.
Now your demo content is imported and saved.
Adobe Typekit configuration
On the demo we're using Brandon Grotesque font from Adobe Typekit. If you have an Adobe Typekit (paid) account, please, connect it to the theme and add the font into your Favorites (within Customizer).
If you don't have an Adobe Typekit account or don't want to use the font on your website, you can skip this configuration process.
If you have an Adobe Typekit account and you'd like to use Brandon Grotesque on your website, please, go to Appearance - Customize - Font I Want - Seriously and press any 'Settings' button.
In the new window press the 'Select font' button and then the 'Library' link.
Please, follow these steps in order to add the Brandon Grotesque font into your Favorites.
After you add the font into Favorites, press the 'Save & publish' button in Customizer.
Customizer settings import
Now you're ready to import Customizer's settings.
Go to Appearance - Customize - Export/Import and upload the .DAT file.
Please, don't forget to choose the 'Download and import image files' option and press the 'Import' button.
Press the 'Save & publish' button in Customizer, and your Customizer settings are saved.
Static front page selection
The Customizer Export/Import plugin cannot define your website's front page automatically because technically this is not a part of Customizer. So you need to choose the front page manually.
Go to Appearance - Customize - Static Front page and choose 'Seriously' as your Front page
Then choose 'Blog' as your Posts page and press the blue 'Save & publish' button.
Your front and blog pages have been set.
Navigation menus configuration
Sometimes WordPress doesn't export the navigation menu items, so you need to do add them manually.
The demo menus are located in the top navigation bar and footer.
As you can see, there are two menus in the demo's navigation bar:
- Left menu and
- Right menu.
And the footer contains 4 menus:
- Footer menu: product,
- Footer menu: company,
- Footer menu: resources,
- Footer menu: you may also like.
In order to define the menus, please, go to Appearance - Menus to add pages to your website's menus.
The list of menus can be found in the 'Select a menu to edit' dropdown.
What you need to do is to choose each menu from the drop down (don't forget to press the 'Select' button to switch between the menus) and add menu items into them.
Let's start with the Left menu and add items into it:
- Locate the pane entitled Pages.
- Within this pane select the View All link to bring up a list of all published Pages on your site.
- Select the Pages that you want to add by clicking the checkbox next to each Page's title.
- Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.
- Scroll to the bottom of the menu editor window right to the block called Menu Settings
- Check the Left navigation in the section titled Theme locations.
- Click the Save Menu button.
Let's add menu items into the Right menu. Please, select the menu from the dropdown and add two pages into it.
As you can see on the demo website, one of the menu items is a button. To make it a button, please, open the menu item's pane:
In the 'Item style' drop-down choose 'Button'. Check the Right navigation in the section titled Theme locations and press the Save Menu button.
Then repeat the process for all available footer menus by adding menu items into them.
Finally, please, go to Content blocks - All Content blocks.
And find two posts - Footer: main - dark (this footer is used on the 'Integrations' page) and Footer: main (this footer is used for the whole website).
In each WP: Custom Menu widget, please, change the 'Menu' from the dropdown (by default WordPress sets the same menu in all widgets).
One more thing
Your supercool website is ready. Please, don't kiil us for such a long demo installation process: next year we'll release a new plugin that will do it automatically.
By the way, if Google Maps are not displayed on the 'Contact' and 'About' pages, please, go to Settings - Creative plugins
P.S. If you have any questions, feel free to open a ticket. And our Support team will help you!