Setting Up Impreza Theme in WordPress

Live Impreza search and filter with 100K products

Before we start the tutorial, perhaps you’d like to try our live demo of Impreza installed with our WooCommerce search & filter plugin, loaded with 100 thousand products.

Things You Need Before Installing WordPress

Before you install WordPress, first you will need a domain name and a good web hosting company that knows WordPress.

I highly recommend that you use BlueHost you get the best performance per $, a free domain, a good discount off their hosting plan and a free SSL Certificate amongst other promotional tools. Bluehost is also an officially recommended hosting provider of WordPress.

You can also take a look at Siteground

Installing WordPress (Bluehost one click install)

If you decide to use another hosting provider, they should have instructions to guide you through the install.

Setting Up Your Website with Impreza Theme

Impreza WordPress Theme is a modern professional and flexible fully responsive retina-ready WordPress theme, developed with great attention to details.

Impreza WordPress Theme can be used for any type of website: business, corporate, portfolio, Ecommerce, marketing, etc… The Customization Possibilities are limitless.

Impreza WordPress Theme Features :

Comes with Ultimate Addons for Visual Composer addon
Comes with Slider Revolution addon
Comes with unique Header Builder addon
Clean, Modern Design can be used for any type of website
Focus on typography, usability & user-experience
Retina Ready & Fully Responsive
One click Demo Content import
Convenient and Handy Admin Panel (based on unique framework)
Boxed & Wide site layouts
Professional pre-built Page Layouts
Ready for One Page sites
Highly Customizable
Easy Automatic Updates
Extensive Styling Options & unlimited colors
Advanced Header, Logo, Menu, Portfolio, Typography and Blog options
5 predefined Header layouts
17 Portfolio Grid styles

Requirements and Compatibility

Ensure that your web host has the minimum WordPress requirements to run Impreza-based sites:

PHP version 5.6 or greater
MySQL version 5.6 or greater
The mod_rewrite Apache module
HTTPS support
max_execution_time more than 180, we recommend 300
memory_limit at least 256M to run all plugins without issues
Impreza is fully compatible with WordPress 4.9.*

Theme Installation

After you purchase the theme on ThemeForest, you can download the theme.

Note: You can download 2 archives from ThemeForest:

First is a product archive with documentation links and some additional files like a child theme
Second is the archive Impreza.zip with the theme itself — this is the file you need to install

You can install the theme in two ways: via a WordPress theme upload function or via FTP.

Installation via WordPress

Step 1: Navigate to Appearance > Themes.

Step 2: Click Add New and then press the Upload Theme button.

Step 3: Find the archive Impreza.zip on your computer and click Install Now button.

Step 4: After the installation, the theme must appear at Appearance > Themes page, where you can activate it.

Installation via FTP

Step 1: Connect to your hosting via FTP software

Step 2: Unzip the archive Impreza.zip on your computer

Step 3: Upload the extracted theme folder into wp-content/themes in your WordPress installation

Theme Activation

It’s a really simple process that will allow you to verify that you’re using your Impreza in accordance with the original ThemeForest license. Put simply, it proves your purchase.

How can I activate my Impreza?

We did our best to make this process as simple as possible:

In WordPress admin dashboard open Impreza > About page
Click Activate Impreza button
You will be redirected to this Support Portal via Envato (ThemeForest) login
Select from the dropdown license you wish to activate
After activation you will be redirected back to your site and receive activation confirmation

Installing Addons

(These are bundles plugins that are available for free once you purchase the theme)

Addons are WordPress plugins which greatly increases functionalities of Impreza. All addons are available for free including their future updates (if you are using them with Impreza of course). At the moment Impreza comes with the following premium plugins:

WPBakery Page Builder (formerly Visual Composer)
Header Builder
Slider Revolution
Ultimate Addons for Visual Composer

To view currently available addons go to Impreza > Addons page in your admin dashboard:

Install and Activate Visual Composer, Header Builder, Slider Revolution, Ultimate Addons for Visual Composer and WooCommerce (if Ecommerce functionality is needed).

Importing Demo Contents

Navigate to Impreza > Demo Import in the dashboard to import the demo content. Note that you’ll be able to use demo import only if your theme is activated.

You can import Content, Theme Options, Revolution Sliders and WooCommerce Products separately at any time, check only needed checkboxes. Note that your previous content won’t be overwritten. It is recommend importing demo content only on fresh WordPress installs.

Select any of the demo you prefer and import, we are using Main Demo for this tutorial.

Your Website should be populated with demo data if the import completed successfully, this data is very useful as they show how the theme works and speeds up development time.

Let’s make a few customizations to suits our needs.

Header Customization

If you installed the Header Builder addon, it allows us to change website header using visual drag & drop editor.

Header Builder Drag & Drop Editor

The editor consists of 3 rows: Top, Main, Bottom, each with 3 cells: Left, Center, Right. Every row represents website header area, which has its own settings and colors. Top and Bottom areas are optional and can be switched off on the side settings. Every cell represents a container for header elements with the corresponding position, e.g. right cell will display its elements at the right side of your website header.

You can move, edit, duplicate or delete every element, hover on added element to see the controls.

“Hidden Elements” area is used when you need to hide some element but keep its settings and content. E.g. when you want to change header appearance on different header states.

Header Settings

Header settings affects on the whole header appearance. They are separated on Global Header Settings, Top Area, Main Area and Bottom Area.

Header States

Header state is a responsive state of a website header, related to the screen width, with adjustable breakpoints. Using header states allows improving header appearance on small screens.

Impreza has 3 default header states:

Default — state is shown when screen width is 901px or bigger
Tablets — state is shown when screen width is from 900px to 601px inclusively
Mobiles — state is shown when screen width is 600px or less

Header states are represented by the relevant tabs:

Header Templates

Header template is a predefined layout of a header. Using a header template is a good start to create your own website header.

Every header template includes:

Header settings including Tablets and Mobiles states
Header elements position including Tablets and Mobiles states
Header elements content
Header elements settings

When you apply a header template, your previous header elements and settings will be deleted.

Style Customization

Go to Impeza > Theme Options > Colors

Select one of the predefined Color Schemes:

Or create a new one, based on one of the predefined schemes (by changing existing values), and save it:

Meaning of color values

Background Color – default background color for all site pages
Alternate Background Color – used for input fields in all forms, for ‘Load More’ button in portfolio and blog, for Portfolio filter bar, Tour & Tabs titles background, for regular Pricing Table headers
Border Color – default border color for all elements
Heading Color – default color for all text Headings
Text Color – default text color for all site pages
Link Color – the color of text links
Link Hover Color – the color of text links on hover
Primary Color – main accent color, used for many content elements
Secondary Color – secondary accent color, commonly used for hovered states of content elements
Faded Elements Color – used for posts elements (date, category, tags, author etc.), breadcrumbs, tag cloud links, some icons

Alternate Content colors have the same meaning as Content colors, just for items located in Rows or Title Bar with Alternate Content colors:

How to use the Color Palette?

Palette is a set of colors, which can be added manually and then used in other color pickers. Go to Impreza > Theme Options > Colors, select the desired color and click on a Plus icon to add it to the Palette:

Once colors are added, you can apply them to other color pickers in Theme Options, Headers, Grid Layouts, Page Options, WPBakery Page Builder elements.

And to the Text visual editor:

How to apply Footer colors?

Assign the appropriate Row Color Styles to Row Settings of footer rows:

Typography Options

Regular Text

Choose one of the web safe font combinations (that are installed on every computer or device) or select one of the hundreds Google Fonts. When you set any of Google Fonts, your site pages will load font files from the Google servers. In case you don’t want to load files from your servers, you can upload them into the theme.

Note that “Font Size” option affects the whole website. The larger the “Font Size” value, the larger the value of widths, heights, paddings, margins of most theme elements and page areas.

Headings

Headings have the same font selection option as Regular Text. But there are more options to customize appearance of h1-h6 headings separately. If you set “No font specified” for headings, they will inherit font from a regular text.

Additional Google Fonts

This option allows to add more Google Fonts for using in theme elements. All added fonts will generate only one request to Google servers for better pages loading speed.

Google Fonts Subset

This option is useful when you’re using language with non-Latin characters. Check available languages for needed fonts on Google Fonts website.

Uploaded Fonts

In case you have some custom font (or don’t want to load fonts from Google), you are able to upload font files and use them as a separate font in theme elements.

Only woff and woff2 font types are accepted by Impreza.

If you don’t care about viewing your site in Internet Explorer 11 and UC Browser for Android, just use woff2 files only, because they have the smallest size. Check the browser support. To convert your font files to woff and woff2 types we recommend to use webfont generators:

When you have the needed files, go to Impreza > Theme Options > Typography > Uploaded Fonts and upload them inside an added group.

If you have different files for different font-weights of the same font, you should to upload weights as separate groups and set the same Font Name for those groups. Check the example on the screenshot:

Regular font files correspond to 400, bold font files correspond to 700, but Font Name is the same in both groups. This combination will generate 1 font with 2 weights and add it into the font selection option of theme elements.

Custom Fonts

You’re able to use uploaded fonts in:

Theme Options > Typography > Regular Text (after page refresh)
Theme Options > Typography > Headings (after page refresh)
Theme Options > Buttons (after page refresh)
Text element in Headers
Menu element in Headers
Post Title element in Grid Layouts
any element via custom CSS:
.your_element { font-family: Font Name; }

Page Creation & Customization

Let’s head over to the pages section to customize, create and delete pages as necessary

If you chose to import demo content, you should have about 64 pages (Most should be deleted when you have decided the pages you want to work with.)

Setting up the Homepage

Navigate to Dashboard / Administration > Settings > Reading panel.

Save the Changes with the Save Changes button.

To edit the home page,

Switch WPBakery Page Builder to Backend Editor

The Editor should look like this

Highlight the element you want to modify and click the pencil

An Editable box should pop up, here you can make your modifications

Make sure to click Save changes and not the Close button else all your modifications will be discarded.

To delete rows, columns or elements click on the “X” button and confirm if you want to delete the element.

To add rows, columns or elements click on the “+” button

Select from the lists of elements, going through each element can be time consuming, luckily there is a search box included. Use this to search for elements, click on the element to add it to the page.

To change the pictures, simply highlight the image element and click edit

$C:\Users\BIGOMNITECHS\Downloads\Fireshot\Impreza\selectimage.png$

Select the image you want to use and drag it to the editor.

$C:\Users\BIGOMNITECHS\Downloads\Fireshot\Impreza\drag image.png$

Click the Set Image button and save. You can adjust the image size, alignment caption etc. from the editor

$C:\Users\BIGOMNITECHS\Downloads\Fireshot\Impreza\image size.png$

Once you’ve added all your content to your Page you have the option of Saving the Page as a Draft or Publishing the page. Clicking the Save Draft button will simply save your Page/Post. This is handy if you would like to come back at a later date to add more content or if you’re simply not ready to publish yet.

The same applies to editing the remaining pages.

Adding New Pages

Go to Pages > Add New

Enter a title and switch WPBakery Page Builder to Backend Editor

Click on Add Element button

Select the desired element and click on it to add it to your page

In case you need/want to edit shortcodes/code manually you can switch WPBakery Page Builder to Classic Mode

Once added all elements, don’t forget to save changes.

Menu Customization

Go to Appearance > Menus

Select create a new menu at the top of the page.

Enter a name for your new menu in the Menu Name box.

Click the Create Menu button.

It is recommended you delete the menus created during demo import.

Footer Customization

Go to Impreza > Footers

Select the footer you want to edit and click edit, you can also use the add new button to create a blank footer

The footer uses WPBakery Page Builder so you can build your footer with a drag and drop editor, just like with the pages.

Setting up Wordfence to protect your WordPress site (Recommended)

Wordfence is a WordPress security plugin that helps you protect your website against security threats like hacking, malware, DDOS and brute force attacks.

It comes with a website application firewall, which filters all traffic to your website and blocks suspicious requests.

The basic Wordfence plugin is free, but it also comes with a premium version that gives you access to more advanced features such as country blocking, firewall rules updated in real time, scheduled scanning, etc.

What you should keep in mind and what you should avoid.

Don’t install plugins that you don’t need.
When Importing demo contents make sure to import only what you need, it can be a bit cumbersome to clean up, a log of images, pages and other contents are imported
I recommend you setup two servers, one to import the demo contents, and the second server is the main development server. This way you can import on the first server and won’t worry about cleaning up a lot of mess, you just need to copy the codes from the editor and paste in the relevant pages in the development server, this will save yourself a lot of development time and resources.
Make sure to use Header Builder, it makes the customization of the Website header very easy.
Using a legitimately purchased version of the theme is recommended, 3^rd party downloaded themes are bundled with persistent malware, it takes the knowledgeable technician to clean it, buying the theme is more affordable than the cost of a technician.
When you want to make advanced changes make sure to use a child theme, else all your changes will be overwritten when an update occurs.
Remember to delete the users, comments that were created during the demo import
Deactivate plugins you are not using, deleting is preferable.
Remember to optimize your images with Tinypng

Overall Experience

Once you have used Impreza 2 to 3 times, you will appreciate the simplicity, support for advanced customizations and Mobile first design.

Tutorials

Table of contents :