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
Select the image you want to use and drag it to the editor.
Click the Set Image button and save. You can adjust the image size, alignment caption etc. from the editor
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, 3rd 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.