Blog

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:

@media screen and (min-width: 48em) {
.has-header-image.home.blog .headroom--not-top .navbar, .has-header-image.inspiro-front-page .headroom--not-top .navbar, .has-header-video.home.blog .headroom--not-top .navbar, .has-header-video.inspiro-front-page .headroom--not-top .navbar {
background: rgb(56 200 201 / 90%);
}
}

.navbar {
background: #0bb4aa;
}

@media screen and (min-width: 48em) {
.headroom--not-top .navbar {
background: rgb(56 200 201 / 90%);
}
}

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.

Inspiro Lite includes integration with the One Click Demo Import plugin.

After installing the theme, please make sure to install and activate all recommended plugins:

Once the One Click Demo Import plugin will be activated, you will see a new page called “Import Demo Data”:

Inspiro Lite includes two different demos:

Elementor Demo – this includes advanced page templates that can be easily customized using Elementor.

Gutenberg Demo – this demo doesn’t require Elementor, but included pages have a simpler design when compared to the Elementor demo. If you prefer using the block editor (Gutenberg) then you may want to install additional plugins to have more blocks and customization options.

Looking for more demos and templates?

Upgrade to Inspiro PRO or Inspiro Classic!

Child Themes are used when you want to make changes to a theme without actually changing the code or the files in your original theme. This lets you update your original theme (which is the engine behind the child theme) without losing any changes you made to your site.

If you want to make just some small changes, like adding custom CSS code, we recommend to add it in the Customizer > Additional CSS. View instructions.

Custom functions can also be added without creating a Child Theme by using the My Custom Functions plugin.

Create a Child Theme Using Child Theme Configurator Plugin

There are a number of plugins out there these days that will help you create a child theme. We’ve found the Child Theme Configurator plugin to work well.

Download Child Theme for Inspiro Lite

We’ve generated a Child Theme and you can download it here:

Download Child Theme