Blog

The hero area at the top appears automatically on your front page. If you have a static page set as your front page and don’t see the hero area, it means that you need to change the Page Template to a different one. For example, the Homepage (Without Hero Area) page template doesn’t include the hero area so you can replace it with a different section.

Editing the Hero Area (large video)

The Homepage, Hero Area at the top, is a part of the theme, so it can’t be edited using the Page Builder.

You can edit it from the Customizer > Homepage Hero Area:

In the Media section, you can configure what the hero area displays: a video or an image.

The theme supports Vimeo, YouTube, and self-hosted MP4 video files. Vimeo and MP4 videos will also play on mobile devices, while YouTube videos will not play on mobile devices.

If you want to have more control over the hero area and include additional text or elements, you can replace the hero area with a Cover Block. You can find more details in this article.

Elementor is our preferred page builder.

Specifically for Inspiro themes, we’ve developed a plugin called Elementor Addons by WPZOOM. The plugin includes several custom widgets and many templates to extend the free version of the Elementor. Some of the widgets like Pricing Table or Directors are unique and work great with any theme.

Everything you see in the demo of the Inspiro Lite & PRO themes is achievable using the free version of Elementor and our free plugin called Elementor Addons by WPZOOM

Inspiro and Inspiro PRO don’t require Elementor PRO, but we highly recommend purchasing it. The price starts from $49 and you receive a lot of features.

Loading Elementor Templates

If you haven’t loaded the demo content of the theme and want to start building your website from scratch, one of the starting points would be importing a layout.

Click on the blue W icon (WPZOOM Library) in Elementor to load one of the pre-built Inspiro templates.

Choose one of the pre-built templates and click on Insert Template.

Use the Right Page Templates

Choosing the right Page Template for pages that you’re building using Elementor is very important. Make sure to choose a page template that’s created specifically for a Page Builder:

– Page Builder (Without Page Title)
– Page Builder (Transparent Header, Without Title)

The page template can be changed both when editing the page or when using the Elementor editor. Click on the “Settings” icon from the left-bottom corner, then look for “Page Layout” option:

For instructions to build the front page using Elementor, please read this article.

If you’re new to the Elementor page builder, this Getting Started guide could be of help.

If you haven’t used Elementor before, we recommend you to start here.

tl;dr version: We’ve created a lightweight free plugin to create a portfolio using the Inspiro Lite theme. This plugin will help you create Portfolio posts and display them in a nice grid using the Portfolio block. You can also display blog posts in the Portfolio Block. All posts created using this plugin will also work if you’ll upgrade to Inspiro Classic or Inspiro PRO themes (eventually and hopefully :)

Unlike premium version of the theme, Inspiro Lite doesn’t include a Portfolio feature.

This means that you need to use an additional plugin to create a Portfolio.

Luckily, we’ve released a new plugin called WPZOOM Portfolio which will allow you create a Portfolio section similar to the one from the Inspiro Premium theme:

View Demo

The plugin currently includes only basic functionalities, but we plan to add more features with every new update, including a PRO version with Video support, so you can use it with any theme you want.

How to Create a Portfolio Section using WPZOOM Portfolio plugin

Assuming that you have installed and activated the WPZOOM Portfolio plugin, here are the steps to create a Portfolio section:

1. Add a few Portfolio posts in the “Portfolio” section:

You’ll need to assign a Featured Image to each post (project), as this will be shown in the Portfolio Grid.

2. Display your portfolio posts using the “Portfolio” block

In an existing or new page, add the “Portfolio” block to the editor:

The Portfolio Block includes multiple options. The first thing you may want to do, is to change its alignment to Full width:

The block also supports Blog posts, so you can create a similar grid to display your blog posts. Maybe you want to create an Index of posts or a page with your Travel destinations.

Note: For a more comprehensive article on this topic, check out our guide on  How to Increase the PageSpeed Score .

WP Rocket – One plugin to rule them all

To make your Inspiro site fly, we recommend adding the WP Rocket plugin. This concatenates your CSS and Javascript files resulting in fewer files to load and at a reduced size. It also enables WordPress Cache, which is a process to reduce the number of requests to your website’s database. This makes your website significantly faster by serving static versions of your content and pages to visitors.

So head over to wp-rocket.me and download this useful plugin.

Caching will be automatically enabled once the plugin is activated:

The CSS and JS optimization can be enabled in the File Optimization tab:

Jetpack settings

If you install the Jetpack plugin you can also serve images from a global CDN which will help them load faster. Turning on Lazy Loading also prevents the images from being loaded on the page unless they are within the viewport – further improving loading times.

Elementor font settings

Navigate to Elementor > Settings and make a couple of additional tweaks if you have not done so already. That should remove Roboto and Roboto Slab from being loaded unnecessarily and provide a speed boost.

Are you looking to make changes to the theme design?

You can do that by easily modifying the CSS code. If you are new to web development and want to learn more about CSS changes, look at this article.

Simply copy the needed CSS code and add it in the Customizer > Additional CSS.

1. Changing the homepage hero area height.

CSS Snippet for all device sizes:

CSS Snippet only for devices with a smaller screen width of 700px and below (mobile devices):

2. Remove the “Inspiro WordPress Theme by WPZOOM” text from the footer.

You can remove the text from the footer by adding the following CSS Code code in the Customizer > Additional CSS:

.site-info .copyright span:nth-child(2) {
    display: none;
}

Optionally, if you want to remove the text saying “Powered by WordPress”, then use this CSS code:

.site-info .copyright span:nth-child(1) {
    display: none;
}

3. Remove the Dark Overlay from the Homepage Hero area

4. Hiding the Search Icon in the header.

No snippet needed, as this is available as an option in the Customizer > Heading Settings:

5. Changing the Header & Sticky Menu Background Color

To change the background color of the header and sticky menu, add the following code to Appearance -> Customize -> Additional CSS:

More additional color and fonts customization options are available in Inspiro Premium.

Looking for more snippets or help? Make sure to check Inspiro’s WordPress.org Forum and WPZOOM Community Forum.