In this article, we’ll cover: 

• What is WordPress?
• What is Weebly?
• Pros and cons of WordPress vs Weebly 
• WordPress vs Weebly: Detailed Comparison 
• WordPress or Weebly – Which is better for you?

Let’s get started with the mano-a-mano between WordPress and Weebly!

A Closer Look at WordPress vs Weebly 

What is WordPress?

WordPress is the most popular content management system (CMS). It’s an open source platform for any content creators planning to build professional blogs and websites.  WordPress is used by 64.3% of all the websites whose content management system we know. This is 43.0% of all websites. 

Initially, WordPress was mostly used to create blogs. Nonetheless, now you can use this platform to build any type of website you want such as personal or professional blogs, portfolios, company websites, eCommerce stores (using WooCommerce), and membership sites.

What is Weebly?

Weebly is a popular website builder that allows you to create a website in a drag and drop interface.  

It is a tool that can be use to create any type of site, from blogs to online stores.

Both Weebly and WordPress are among the best platforms for blogging and website creation. If you already have a website of your own and are considering moving to Weebly or WordPress, LitExtension will help you perform that painlessly.  

WordPress vs Weebly: Pros & Cons

WordPress Pros: 

• Access to 9,000 WordPress themes that you can use to create a website. These themes have free features, but you might need to upgrade if you want more advanced design options. Most of these themes come packed with templates for a variety of niches.
• The WordPress community has created tons of plugins that provide extra functionalities to WordPress themes, from design capabilities to SEO, marketing, security, image optimization, and so many more. Some powerful WordPress plugins are drag and drop page builders (like Kubio and Colibri). Page builders are design tools that allow you to create a website by drag and drop starting from a base theme.
• You don’t need any coding experience in order to create a site using WordPress.
• There are tons of resources out there that can help you kick-off with website design: documentation, tutorials, blog articles, etc.
• Most of the themes and plugins developers out there are offering product support.
• Competitive pricing plans for the WordPress themes.
• When you choose to use a page builder such as Kubio or Colibri, the free plan will allow for a lot of design freedom. If you don’t want to build a complex website, the free plan will do just great!

WordPress Cons:

• Depending on the theme or plugin you use, sometimes support might be offered only to paying customers.
• The learning curve can be a bit long.
• You will need to buy hosting separately.

Weebly Pros: 

• Free plan and competitively-priced premium plans: Weebly provides a free plan with enough tools to start building your website from the ground up. Its paid options run from $5/month to $38/month (billed annually).
• Easy to use: It’s a piece of cake to learn to use Weebly. No programming skills are required because everything you need to nail it is to choose the suitable themes and drag-and-drop any features, images, or buttons into the right places. 
• You can extend the functionalities of your site by using apps (for SEO, marketing, etc).
• The Weebly plans include hosting as well.

Weebly Cons: 

• Weebly branding visible for free plans.
• Weebly ads get removed when a professional is acquired. 
• Weebly has a small number of apps that can boost the functionalities of the website you design. Most of them are paid.

WordPress vs Weebly: Detailed Comparison 

Ease of Use

WordPress Ease of Use 

WordPress has an admin area where you can manage themes, plugins, media, general website settings, users, updates, and more. Things are pretty intuitive around here.

The moment you enter any page or post, you will be using blocks with specific functionalities: text, images, slider, etc. You can drag and drop them to the canvas, then style them however you see fit.

You can easily save and publish pages and posts. You can preview a page on desktop, tablet and mobile as well. Most themes and builders allow you to create responsive websites.

At first, things can feel overwhelming in WordPress, there’s clearly a learning curve involved. But once you dig in a bit, things will be clear.

Weebly Ease of Use 

Weebly page Editor has a user-friendly drag and drop interface which doesn’t require much effort to get used to. 

The users, main site settings, and apps are managed inside the same interface, inside a different menu.

Pricing 

WordPress Pricing 

Like I said before, most of the WordPress themes and builders out there are free to use. At the end of the day, WordPress is an open-source project.

If you use a page builder on top a theme (which is definitely recommended if you want to enjoy more design freedom), you can definitely find a free one that comes packed with tons of features and customization options (eg: Kubio).

Now, if you want to create a really unique site, with some advanced styling options, the theme prices can start as low as ~$40 per year. There are lifetime plans as well.

If you add extra functionalities to a site, via plugins, you can use free versions, or upgrades that can vary in price.

Hosting is also a cost that will add up.

Here’s the sine qua non of a WordPress site when using WordPress:  

• Domain name: $12/year. 
• Hosting: from $3.95/month. 
• Plugins: $0 – $1,000 (ongoing or one-off charge). 
• WordPress theme/builder: $0 – $90/year.

Aside from that, if you want to sell online, you’ll need an eCommerce-specific WordPress plugin, for instance, WooCommerce, Easy Digital Downloads, Ecwid, as well as several free and premium efficiency-enhancing features.

Weebly Pricing 

Weebly is one of the most favorable website builders in the market thanks to its affordability. In addition to four paid plans with monthly prices ranging from $5 to $38/month paid yearly, Weebly offers a free plan for websites. 

When it comes to a free plan, there will undoubtedly be restrictions on the features you can use. Your site will include advertisements, a Weebly’s default domain (example.weeblysite.com), files no larger than 10MB, and 500MB of storage space. 

Want to learn more about Weebly pricing? Check out Weebly Pricing: Detailed Explanation & Comparison [2022] now! 

Blogging

WordPress Blogging 

Compared to other platforms, WordPress may offer the most robust blogging options. It was initially designed as a blogging platform before progressively developing into a complete website builder. Up to this point, this platform has been the backbone of close to 43% of all websites worldwide. 

WordPress provides all the advanced tools you’ll ever need for blogging, including tags, categories, and a built-in commenting system. 

Besides, thousands of easy-to-install add-ons help to promote your website. You can collect leads, create contact forms, create subscriptions, automatically backup your site, and a whole lot more. What’s more, social media plugins are available for you to share and boost your content. No matter what you want to do, there’s a plugin for that. 

Weebly Blogging 

Weebly is a good option for blogging as well. Blog templates can be fully customized and adjusted to fit your goals. 

You can start outstanding blog sites thanks to full control over layout and post format. The essential navigation and interaction components that contemporary blog readers demand are provided with category, tag, and sidebar customization.

SEO 

WordPress SEO 

There are several built-in features that make optimizing your content for search significantly easier if you use WordPress as your content management system (CMS).

• Permalink Structure: WordPress allows you to customize your URL permalinks for each of your posts and pages. You can also add a clear description of your page’s content as well as any relevant keywords, making your URL structure search-engine friendly.
• Meta Description: Creating a unique search engine friendly meta description will not only help you enhance your ranking on Google but also increase the click-through rate. 
• Categories and Tags: Both categories and tags assist you develop a better structure and allow Google to detect it while indexing your WordPress blog posts.
• Lots of WordPress SEO plugins available, the most popular being Yoast, AIOSEO, and RankMath. Being known as a powerful plugin in WordPress, Yoast SEO has 5+ million active installations and gets 4.9/5 stars overall. Yoast SEO free version is available for everyone; however, you can upgrade to the premium one to get extra special features.  Yoast SEO makes sure your website complies with the most demanding technical SEO requirements. Furthermore, it provides you with the necessary tools to improve the readability and SEO of your content. 

Weebly SEO 

To help your blog posts perform better in search results and drive more visitors to your pages, URLs, title tags, meta descriptions, and alt text for pictures are available to be customized inside Weebly. For even better SEO-friendly articles, you can add personalized header and footer code to blog pages. 

Weebly also provides an essential function called 301 Redirects. This is a good improvement because broken links are an issue that search engines dislike. 

Besides, to minimize the negative effect of loading speed on your site’s SEO, Weebly has taken a further course of action. It compresses any large-sized images uploaded to boost ranking and smoothen the customer experience on your site. 

Flexibility 

WordPress Flexibility

With WordPress, you can fully utilize your creativity and professional coding skills to create a one-of-a-kind website. A distinct interface that reflects your unique style will undoubtedly be what people remember about you, distinguishing you from the rest of the crowd.

Furthermore, WordPress allows you to install extra plugins for your blog site for powerful functionality. This adaptability is also one of the reasons why so many people choose WordPress.

Weebly Flexibility 

Regarding flexibility, Weebly blogging may not come up to high-demanding customers’ expectations. 

Although the drag-and-drop interface simplifies things, it does not allow for much customization. 

I particularly don’t like the user experience behind editing each website element (image, text, etc).

Customer Support 

WordPress Customer Support 

WordPress has a large user community so you can learn from others. However, there is a ton of untested information coming from many sources. Therefore, you must sort the good from the bad. 

If you are good at self-education, WordPress’s online instructions will walk you through burning issues. The whole instructions are grouped into categories ranging from “Getting Started” to “Security,” making it easier to select the correct paper.

Also, each theme and plugin developer has its own documentation and support options.

Weebly Customer Support 

In general, Weebly offers adequate customer service. By clicking on “Support” at the top of your home page, you can visit the Weebly Support Center, which contains virtually everything you need to know to set up and maintain your website. 

For convenience, the guide articles are divided into areas such as eCommerce, Building Your Website, Your Account, and so on. Each area has several articles that will meet the demands of the majority of users. 

Additionally, emails and live chat are available for all plans. If you still need assistance, the Weebly community may be able to answer your queries. The community is very active, with moderators responding to many topics and providing extensive information. Most of the time, they’ll even ask for your store’s URL to double-check. 

WordPress vs Weebly: Which is better for you? 

WordPress is far superior as an open-source platform for any kind of website in the long run. Whereas, Weebly helps customers to easily create websites. Actually, it all depends on what you need the site for and how tech-savvy you are when it comes to website-building. 

You should choose Weebly if you have no experience making a portfolio or a blog before. It’s considerably easier to use right out of the box, and you can have your site up and running in minutes. Weebly will help you through the entire process from beginning to end. 

WordPress is ideal for anyone who wants to be in charge and learn how a website operates. It provides you with complete control over your website. You can add or delete any plugins you like, and even change the underlying code by hand in any way you desire. 

Lastly, we hope this article can help you to make a comparison between WordPress vs Weebly and decide which is better for you.

You should think long and hard about what your website needs and apply that to make up your mind. There is no universally right or wrong decision.

The post WordPress vs Weebly: a Detailed Comparison appeared first on ColibriWP Blog.

Now, when it comes to the subject of pagination for your WordPress site, here are some use cases:

• WordPress pagination for a main blog page (this can take two forms: either as older/newer posts or as numeric pagination). However, people prefer numeric pagination to older/newer posts pagination, as it is more user friendly and better “viewed” by search engines.
• WordPress pagination for a products list page, in an ecommerce website. In an online shop, pages fall into these categories: main products page, product lists pages and products pages. The probability to split a page in smaller pieces is higher for product lists pages.
• WordPress pagination for a long-form post or page. If a post or page contains too much content, you might need to break it into multiple pages. Thus, it’s useful to know how to break a long-form page or post into several pieces.

Now, how can you manage pagination in WordPress? Well, it depends on what you want to do. This is why you might need to read the full article.

Here’s the plan. You’ll find out:

• How to set up the number of posts per page,
• How to set up the number of products on a page for an online store,
• How to split a post or page into multiple posts or pages,
• How to style pagination rows and numbers,
• Which are the plugins you can use to set up WordPress pagination.

1. How to set up the number of posts for your WordPress blog page

From the WordPress dashboard, head over to Settings -> Reading.

You can set your website homepage to display a list of latest posts. In this case, you also have the option to set the number of posts that appear on the main blog page. If there’s a greater number of total posts (than the number of posts you set to display on the main blog page), WordPress will create a second/third/fourth… page that contain the other articles written for your blog.

How to set a specific number of posts for blog pages:

If, for instance, the blog already has 10 posts, and only 3 are set to display in the main blog page, WordPress will automatically create pagination for the main blog page and place the remaining posts on additional pages.

Pagination is numeric, and numbers have the aspect of links (and they behave as links – when clicked on, they’ll display page no. 1, page no. 2, depending on the link you choose). It should be like this, because people recognize a certain format of links. This is better not to change, for user experience to be optimal and ensure effective navigation of users in all blog pages.

2. Setting up WordPress pagination for a products list page

It might be useful to split a long product list page into several pages that are easier to browse. For this doing, you should have built-in options in the theme you’re using for your website.

For instance, in Mesmerize, you need to go to from the WordPress dashboard to Appearance -> Customizer and set the number of products that will appear in the products list page (based on the fact that you’ve previously installed WooCommerce for the website and already have put in place the online shop):

In the Customizer, go to WooCommerce Options.

Under WooCommerce Options, find and click on the Product List Options section.

In the Shop Page Settings, the first option refers to how many products you’ll set per page, as marked in the screenshot above.

For instance, in this case, we set the number of products per page to 2:

As the total number of products is 24, the products list will be displayed over 12 pages (2 products per page).

Pagination is thus automatically created. Pages have numbers, and numbers have links on them, so when users choose a certain number, they can go to the respective page displaying products, in the products list.

*Note that this is a pure example, to exemplify the automatic display of pagination based on a series of previous settings in the Customizer. A classic product list page in a public online shop will include more than 2 products.

3. WordPress pagination for a long-form post or page

In some cases, you’ll have plenty of content in a page of your website. If it’s a blog post, it’s much more often the case to display a long-form content inside a single post page. For ease of access and facilitation of users’ navigation within that content, you might want to split the page/post into several pages.

Here’s how to add pagination to a long-form page:

Go to the WordPress Admin dashboard -> Posts or Pages, depending on the format of the page you want to modify.

In this example, we’ll go to Posts, and select the post we want to split into several pages. Click on “Edit”, under the respective blog post.

If you are using the Default WordPress Editor, you will see the interface below. You will need to go to the settings icon in the upper-right, then select “Code Editor”.

If you are inside the Classic Editor, you will see the interface as shown below. You will need to go and switch it to “Text” mode.

Now, no matter the Editor you use, you will see some HTML code in from of you. You will need to find the section where you want to make the first split. Insert this tiny piece of code there <!- – nextpage- – >

Then, repeat the process for every new page break you want to apply too your original post.

At the end, don’t forget to press Update post, for the changes to go live.

The pagination will be created automatically, due to the insertion of code for page breaks. This pagination is numeric, each page corresponding to the article receiving a number in a sequence. These numbers (with links placed over them) will guide users throughout the article, from page 1 to page 2 to page 3, etc.

4. How to style WordPress pagination rows and numbers (without CSS code)

Now, most of the times, the rows and numbers from pagination will match the look and feel of the theme you are using. But what if you want to make changes to it?

Well, usually you would need to either use custom CSS, or use a WordPress pagination plugin.

But there’s also another way. Enter WordPress pagination blocks!

If you are using the block-based experience, there are specific pagination blocks that you can easily customize.

Now, everything is a block in WordPress: from paragraphs and images, to tables and sliders. By default, WordPress offers a set of basic blocks like a heading, paragraph, image, button, and more, but more are being developed by the WordPress community, enriching the default experience. For example, the Kubio builder even ads the pagination block. But besides the extra blocks, it also levels up the Block Editor, giving its users complete freedom over design. Because, let’s face it. The Default Block Editor lacks a lot of features.

Now, Kubio builder is a free one and is compatible with any theme.

So, let’s see how you can customize the pagination blocks! There are three types of pagination blocks in Kubio: pagination, pagination nav button, and pagination numbers.

• Adding a WordPress block

Let’s say you are inside a post. Let’s see how you can add any block to it in the WordPress block experience.

First, go to the “+” sign in the upper-left corner.

When clicking the “+” sign you will open up the block inserter. Now, because I have installed Kubio, I can also see the Kubio blocks, besides the default ones. The Kubio blocks have blue-green  icons, while the default ones have black icons. You can easily search a block by name. If you use other plugins that will add their own blocks, they will most probably have different colored icons as well. Now, see the three pagination blocks? You can easily drag and drop  them to a page.

• How to customize the pagination blocks inside the Block Editor

Now, how do you customize the pagination blocks? I’m going to use the pagination number block as an example.

Start by clicking on any number from the block in order to select the block itself. You will notice that the pagination numbers block has a toolbar on top of it, with several basic editing options: block positioning, duplication, insert after, insert before, lock block, copy and paste style (this is a Kubio PRO feature), and remove block.

While the block is still selected, you can notice a block editing panel on the right hand side. This is where the Kubio magic happens. What you see below is an upgrade from the Default experience.

The block editing panel always has three options: Content, Style, and Advanced. The possibilities inside vary from block to block.

In this case, at the “Content” level you can make adjustments to the alignment. of the numbers. Now, you can always use the reset button to revert to the default state.

At the “Style” level, you can make further button changes, across the normal, hover, and active states, such as:  background and text color, typography, and space between items.

At the “Advanced” level you can customize: background, spacing, border and shadows, typography, transform, dividers, transition, responsive, and miscellaneous.

In the case of the pagination numbers block, you can make container, page number, current page number, and dots changes, across the normal and hover states, as seen below:

Like I said, complete design freedom, in a free WordPress page builder: Kubio.

4. Plugins you can use to set up WordPress pagination

Now, I’m not a fan of using tons of plugins on a site. I mean, I’d rather install a page builder, that can compensate for the features of 10+ plugins. Each extra plugin that you will add will slow down your site. It can also collide with the functions of some other plugin.

But, you should know that there are some plugins out there that can help you out with customizing pagination in WordPress. Here are some of them:

• WP-PageNavi. This is by far the most popular WordPress pagination plugin out there. It has more than 700,000 active installs. There’s one problem with this plugin. It’s kinda technical, and you need some basic coding knowledge. you might end up using some CSS coding as well.
• WP-Paginate. This plugin has 40,000 active installs. It will require CSS know-how.
• Pagination Styler for WooCommerce. This plugin has 1,000 active installs and can be used to style pagination for WooCommerce online stores.

Now, if here’s a tutorial on how to install any plugin in WordPress:

And that’s a wrap!

Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!

[sibwp_form id=1]

The post How to Setup WordPress Pagination in 2022 appeared first on ColibriWP Blog.

• Proper website navigation in place,
• Blog categories,
• Product categories, filters, and sorting options in the case of online stores,
• Internal site search,

you can improve website user experience, but also user engagement, and conversions.

In this article, we’ll go into the nitty-gritty of WordPress site search, which can help your visitors find the most relevant information for them. Particular tools can give you access to these searches so that you can gain insights into your visitors’ needs.

So, in this article we’ll be talking about:

• How to add internal search to your WordPress site,
• Which are the most popular site search WordPress plugins,
• How to create your WordPress search page,
• How to track user searches on your site.

How to add internal search to your WordPress site using widgets

If you’re not using the latest WordPress experience (aka Gutenberg, aka the Block Editor), you will be using  the search widget in order to add the WordPress site search feature.

Now, how do you know which experience you’re using?

Well, this is how the Classic Editor looks like when you enter a post, for example:

And this is the Default Editor, also called the Block Editor or Gutenberg:

Now, WordPress site search is a native feature for WordPress. It comes in the shape of a widget that can be placed inside a widget area. Now, depending on the theme you’re using, there are several areas where you can place the site search widget, from header, till footer and sidebar.

Here are the steps for adding the WordPress site search widget to a widget area:

1. Head over to Appearance->Widgets
2. Go to a widget area and click on the dropdown arrow.
3. Click on the “+” sign in order to add the search block to the page. In my example, I’m using the sidebar widget area. It has some existing widgets: Recent Posts, Recent Comments,   Categories, and Archives.Now, each of these were previously called widgets, now they are called blocks. The WordPress search site is now a block as well. We’re still transitioning from the “widget” term.
4. A block inserter will show up. Let’s type “search” in the search bar.
5. Let’s click on the search block to add it to the sidebar.
6. On top of the WordPress search block you will notice a toolbar which allow you to make a few edits to the search block. You can:
   1. Reposition the search block. When you select the 6 dots, you will have the option to drag and drop the block where you want. You can also use the up and down arrows to move the search block up and down.
   2. Change the search block’s alignment.
   3. Toggle the search label.
   4. Change the position of the button.
   5. Add an icon to the button.
   6. Move the block to another area (footer, etc).
   7. Other options (block duplication, deletion, etc) .
7. When you select the search block you will also notice a block editing panel on the right hand side. Here you can:
   1. Make color changes to the text or background of the search block.
   2. Adjust the width of the search block.
   3. Add CSS classes to the block if you want to make some extra CSS styling.

All you have to do now is hit the “Update” button in the upper-right.

How to add internal search to your WordPress site in the Block Editor

In the previous chapter I showed you how to add the WordPress search block to a widget area when you are using the old WordPress experience.

But when you are using the current one, the so called Block Editor, you no longer need widget areas, they are no longer available.

What’s still available is the WordPress search block. And you can add it now to any page or post, in whatever position you like.

Let’s go tot a page or post and add it.

1. Click on the “+” sign in the upper left of the Editor to open up the block inserter.
2. Type “search” into the block inserter’s search bar.
3. Drag and drop the WordPress search block wherever you want in the page or post.

In the previous chapter I showed you how to make edits to the block using the:

• Block toolbar,
• The block editing panel,

These are still valid here.

Now, what if you need more styling options for the search block?

Well, there’s a way for you to update the block editor. You could use the Kubio page builder for this. It is a free WordPress plugin that will put the Block Editor on steroids. It will allow you to make tons of block customizations, no matter the block you want to use.

How to customize the WordPress search block using Kubio page builder

The moment you install the builder you will notice new blocks in the block editor. The default ones will have black icons, while the Kubio ones are blue-green.

All you have to do is to add the Kubio search block to a page, instead of the default one. See? It looks almost the same. You can even recognize the toolbar.

But, here’s the catch. Take a look at the block editing panel. It’s been upgraded! It has 3 customization layers: Content, Style, and Advanced. Let’s take a look inside:

Search block content edits

At this level you can:

• Choose a search layout: input and button or input only,
• Specify the placeholder text. We recommend the default “Search”,
• Specify the type of button: text or icon,
• Select a relevant icon for your button.

Search block style edits

Inside style you can make changes to the normal and hover states for the input and the button.

For both the input and button you can customize the:

• Text color,
• Background color,
• Border,
• Typography.

Search block advanced customizations

At the “Advanced” level, here are the  available customizations across the container, input, and button: background, spacing, border and shadows, typography, transform, dividers, transition, responsive, and miscellaneous. I won’t go into details here. But the point is: Kubio gives you so much freedom over block design in WordPress.

Now, let’s say you want to add some extra functions to the WordPress search feature. Maybe you’d want some autocomplete options, or typo recognition…enter WordPress plugins.

WordPress plugins to help you improve your internal site search

I’ve picked 3 of the most popular site search WordPress plugins out there.

If you do not know how to install a WordPress plugin, don’t worry, we’ve got your back. This tutorial is all you need.

Relevanssi

Relevanssi is a free WordPress that manages to enhance the default WordPress site search feature. For some advanced features, there’s also a paid plan.

Now, here’s how Relevanssi can optimize your internal WordPress site search:

• It sorts search results by relevance, not by date.
• It matches partial words as well if complete words don’t match. Awesome, right?
• It allows you to search for phrases with quotes, for example “search phrase”, just like in Google’s search engine.
• It creates custom excerpts that show where the hit was made, with the search terms highlighted. This is also cool because you get a preview of the results, and it helps you realize if you’ve got the right content or not.
• It highlights search terms in the documents when the user clicks through search results. This is also great: you won’t have to search it again.
• It allows for WooCommerce products search.

I bet you had no idea that this is what optimized site search can mean.

Me neither, truth be told! 

Ivory Search

Ivory Search can power up your internal WordPress site search with features like:

• Display search forms anywhere on the site: the site header, footer, widget area, navigation menu, page content and on any other place using shortcode. This way you won’t depend on the widget areas made available by your WordPress theme.
• Search any content on the site including but not limited to Post Types, Category, Taxonomy, Terms,  Custom Fields, Authors, WooCommerce, Comments, Date, File Types etc.
• Excluded searches.
• Advanced search form styling options.
• Search WooCommerce products.

SearchWP

SearchWP is a very accurate site search WordPress plugin. Here are some of its best features:

• Show better results by using keyword stems instead of exact term matches.
• It allows searches for your keyword in post, page,  titles, slug, categories, tags, comments, taxonomies, excerpts, etc.
• It has shortcode outputs.
• Search WooCommerce products.
• It has search statistics and insights to understand what your visitors are searching for and (not) finding.

One very useful site search feature is the autocomplete one. I guess you’ve seen this before:

SearchWP doesn’t include autocomplete search functionality by default. But you can enable it by using a free extension called SearchWP Live Ajax Search.

Now that you know which are the most popular site search WordPress plugins out there it’s time to find out how search really works on a site. How do the results actually show up?

The WordPress search page

A Search Page is a WordPress Page with a custom Page template to give users more information for searching your site.

The Search Page is in fact a template that displays the search results. When users type in the search bar a query, they’ll be prompted to a page with results. These pages are generated thanks to a template file that is often included in the sidebar of many themes. If there isn’t one in your theme, here is the official WordPress tutorial on how to create it. 

For example, the Colibri theme has this file included. It can be accessed from the Customizer (Appearance -> Customize). On the upper-left, you can see an icon representing a file. When clicked, a dropdown with all the templates will show up (the search page included).

The Colibri search template matches the overall theme design, but it can be customized within the theme’s Customizer. When deploying the Colibri Page Builder plugin you’ll get access to tons of customization options.

Until now we’ve managed to:

• Run internal site search
• Customize the search results page

What now?

Enable Site Search Tracking in Google Analytics

Do you want to learn what your visitors are looking for on your site? Then, you need to enable site search tracking in Google Analytics.

It gives you insights into how people use your website, which content they look for, and what search terms they enter in the search bar. Such insights might even give you hints on your next blog topic.

Google Analytics is the tool that allows you to have access to users’ search terms. In order to do this, you’ll need to activate the feature.

You’ll have to log into your Google Analytics account, and head over to your Admin area.

Then, navigate to View -> View Settings.

Scroll down to “Site search Tracking” and toggle it on.

The query parameter is the letter that appears in your site’s URL before the search terms. It usually is the letter “s”(as in search term) or the letter “q”(as in query). Go ahead and search for something, then check your URL.  

Make sure to tick “Strip query parameters out of URL”. This strips only the parameters you provided and not any other parameters in the same URL. This way you are telling Analytics not to split up tracking for each visited page. You won’t be seeing separate listings such as yoursite.com/page?s=1, or yoursite.com/page?q=2, etc. All visitors will be tracked together on 

yourysite.com/page.

You can also enable “Site search categories”. In this case the query can be “cat”, more on the topic, here.

Now that you’ve enabled site search in Google Analytics, you can check the reports under Behavior -> Site Search.

And, we can call it a wrap!

Your turn now to set up search on your WordPress site.

[sibwp_form id=1]

The post WordPress Site Search? Do Tell! appeared first on ColibriWP Blog.

• helping with website navigation
• helping with SEO, by improving internal links

And if you’re thinking that people don’t scroll that down and that footers are not visible, well, guess again.

A study by Chartbeat revealed that they do scroll. And they’ve analyzed 25 million sessions across the web. More interesting was the fact that many visitors scroll down the page before it finishes loading, which means that no portion of a typical article is viewed by 100% of viewers and the very top of the page actually has about a 20% lower view rate than slightly farther down. This totally shocked me, just look at the graph below.

Now, without further ado, let’s see what we’re going to talk about in this article:

• What can you include in your WordPress footer,
• Footer inspiration,
• How to create and edit your WordPress footer in both the Customizer and Block Editor,
• How you can make footer changes in the theme’s code or using CSS.

Do we have a deal?

Let’s roll.

What can you include in your WordPress footer?

Here’s a list of things that can go inside your website’s footer:

• Pages that didn’t fit in in your main menu, but you want to make them easier to discover,
• Privacy Policy and Terms & Conditions,
• Copyright claims,
• Sitemap,
• Social media icons,
• Awards and badges,
• Links to company information: about us page, team, career, board of advisors, etc.
• Affiliate and loyalty programs links,
• Latest blog articles,
• Links to resources: blog, knowledge base, courses, podcasts, etc.
• Upcoming events,
• Customer service links,
• Links to Google Play and App Store apps,
• Newsletter subscription,

and the list can definitely go on.

Now, don’t include all of the above, else you’ll end up having a fat footer. Put yourself in the customers’ shoes. What would they find useful?

Now, wanna see some real footers?

Footers to inspire you

• Hubspot (one of the most popular CRMs out there) – they have 5 main footer sections: popular product features, free tools, company, customers, and partners.  Personally, I love that the free tools are listed there, it’s a great shortcut. Whenever I do research, if customer and partnership data are not clear in the main menu, I’m so glad when I find them in the footer. It’s a pattern to find partners’ data in the footer.

• Planable (a social media SaaS product) – they place their logo and social profiles inside the footer. Their focus is on product features and resources.
• National Geographic – besides mentioning their main sites, I love that that they have there an option to “Pitch a story”. This is a feature that can be used by most newspapers, as well as sites that accept guest articles. Usually “Write for us”, “Contribute” or “Pitch a Story” are options that show in the footer.
• Patagonia (outdoor clothing) – I love that they are emphasizing on customer care useful links (returns, login, repair, etc.)
• Blue Apron – love the copy here: “What’s cooking”. That’s a nice touch: using a picture to introduce the blog.
• Freshly – uses the footer to show off press coverage. Also, they are placing Google Play and App Store buttons.
• Coachella (music festival) – they manage to use design to drive attention to the footer.

Blink if you made it till here!

In the next chapters I’ll show you a few methods of editing footers in WordPress.

Usually, the footer design is controlled by your theme. If you’re using a paid plan for your theme, there are probably lots of customizations available. For free themes, the options are kinda limited.

Let’s get going.

1. Managing the WordPress footer in the theme Customizer

How to create a footer inside the WordPress Customizer

This one’s easy.

• Log in to the WordPress Admin Dashboard.
• Go to Appearance -> Customize. You’ll be taken to the Customizer of the WordPress theme you have installed and activated.
• Find the section dedicated to the footer.

I’m going to use the SkylineWP theme as an example.

In the settings option you can make the following adjustments:

• change footer background,
• add new columns and rows,
• change the text color,
• decide which elements need to show on mobile devices or not,

This particular customizer has some footer templates available as well. Click on “Choose footer design” to discover them.

Pretty straightforward, don’t you think?

Now, let’s move on to:

How to style WordPress footers in the Customizer

Now, I’ll go more in-depth with the changes you can do to your footer. Customizers can differ from theme to theme, but the logic behind kinda stays. So, even if I’m using the SkylineWP theme, you’ll be able to recognize the process I’m using in other Customizers.

Before getting into the details, I wanna point out some structural elements. Each website section goes inside of a block. There the “About us” block, the “Portfolio” block, etc. Blocks can have rows. Rows get split into columns. Inside columns and rows, you can add other smaller pieces of content called components, in the case of SkylineWP. Such components can be images, videos, lists, etc. These blocks are different from the Gutenberg blocks that we talked earlier.

Now that this is clear (or so I hope), let’s do some editing.

How to make changes to the footer layout?

Let’s start by selecting the entire footer block. You’ll see some editing options on the left-hand side. Select “Layout”.

Here you can:

• adjust the width of your section. Do you want it to go from one screen side to the other, and occupy the whole width of a screen? Or just occupy the theme’s default content width? Usually, for most of the sites, the header goes full width, and the rest of the content occupies a specific percent of the whole area available. This is also valid for the template I’m using as an example.
• adjust the height of the footer. Footer height is important to give enough negative space around footer elements, which will make them more visible, easier to read and therefore, more useful.
• adjust top and bottom spacing, meaning the distance from the content till the margins of the section,
• add a header,
• add new rows.

Our current footer has one row with multiple widgets. If you select the row, the menu on the right will give you the option to add new columns. So, as a rule, when rows are selected, columns can be added. When you select a block, you can add rows to it.

How to change colors and fonts in the footer?

Let’s start with selecting text content in the footer, in the website preview. The moment you make the selection, the text editing options will be available in the Customizer’s menu. Under the “Style” options, select “Text color” to make changes to colors.

If you want to change font-size, font-family, and font-weight, you can do this inside “Typography.

It’s that easy!

From the “Content” option you can make changes to text alignment.

Now, if you want to make changes to the entire footer block text, not in specific footer sections, you can do this inside the “Advanced” settings.

If you want to make changes to the whole website typography, you can select “Edit theme defaults”, under the “Advanced” settings. A second option would be going to the main menu, and select “Typography” under “General settings”.

Here you can make typography adjustments to headings, body texts, links, and blockquotes.

How to change the footer background?

Start with selecting your entire footer block in the website preview. Next, head over to “Style”.

You’ll see several options there:

• change the background color
• add an image, video, or slideshow as the background
• add a gradient background
• add an overlay

Sounds easy so far?

Thought so.

The customizer is pretty intuitive.

2. How to use footer widgets in WordPress

Another method for making changes to the footer in WordPress is by using widgets.  In WordPress, widgets are blocks of content that you can add to footers, sidebars, and other areas. These are called widget areas.

Now, you can visualize the widget areas and configure them in the WordPress Dashboard.

• From the Dashboard, head over to  “Appearance-> Widgets”.
• In the middle of the screen you will notice the theme’s available widget areas.

Here are the available widget areas for the Skyline theme.

• Use the “+” sign to add elements to the widget area of your choosing. These element are actually called Gutenberg blocks. Let’s select the Footer widget area 1.
• Click on the “+” to open the block inserter.
• You can type the name of a block (eg: Calendar, Categories, Image, Logo, etc.) or click on “Browse all” to better see the available blocks.
• Scroll down until you find the footer element you want to add, or type its name in the search bar.
• Click on the block you need in order to add it to the footer widget area. I’m going to add the buttons block and the calendar. You can start typing the text inside the button.
• If you want to customize the blocks inside the footer, you need to click on them to select them. Next, you will notice a block editing panel on the right hand side of the screen. Each block will have several editing options. In the button case you can adjust the size, text and background colors, typography, border, and more.
• When you’re done, just hit the “Update” button in the upper-right.

3. How to manage WordPress footers inside the Block Editor

Now, Customizers are a thing of the old WordPress experience. But WordPress is now in the Gutenberg era, where everything is block-based.

For the purpose of this exercise I’m going to use the default WordPress theme, Twenty Twenty Two.

When you use the Default WordPress Editor (aka Gutenberg) to design you site, you no longer have the classic widgets or the Customizer.

How to add footer blocks to a page using the Block Editor

Let’s enter a page.

Like I said a bit earlier, the new WordPress experience relies on blocks.  everything is a block, from paragraphs and images, to categories and galleries.

The workflow is easy. Start with clicking on the “+” sign in the upper-left to open up the block inserter.

Now, choose a block or type the name of the block into the search bar, then drag and drop into onto the page wherever you see fit.

Now, several blocks can make a pattern, or some sort of website sections. Notice the patterns right next to the block menu item?

These patterns are placed inside several categories. You can see the footer category there as well. Let’s select it.

I’m going to drag a footer pattern to the page.

Now, this footer has several blocks inside: the site title block, the site tagline, and social icons blocks.

Each of them can be edited separately in the block editing panel on the right-hand side. Just click on any block in order to select it.

Each block can have its own customizations available, from text and background colors, to borders and typography.

Now, the options in the Default Editor are pretty basic. And if you really want to build a decent website you’ll need to level it up a bit. You can do this with page builders such as Kubio.

for example, let’s compare button editing in the Gutenberg Editor versus the Kubio Editor:

The button block editing panel inside the Default Editor:

The button block editing panel with Kubio:

4. How to style your WordPress footer using CSS inside the Customizer

We’re back to the Customizer, folks. Still working with the Skyline theme.

From the WordPress Dashboard, select Appearance -> Customize. Next, you’ll have to identify the Settings item inside the menu that shows up. In the SkylineWP case, it’s “General Settings”. Next, select “Additional CSS”.

You’ll see a window opening where you can paste your code.

All the changes that you’ll do will be visible in the website preview on the right.

Don’t forget to hit “Publish” when you want to go live.

Now, let’s say you are no CSS geek but you want to remove the “Powered by WordPress” text that shows up in the footer. You’ll need one line of code for that. You’ll just have to paste it in the white space as shown below. For more comprehensive methods on the topic, the article How to Remove “Proudly Powered by WordPress” from the WPklik folks is as good as it gets.

5. How to edit the WordPress footer code

If you’re unhappy with your current footer and you can’t customize it as you wish, but you know code, then this is for you.

!Important – this method of editing the WordPress footer is the most delicate one.

It is strongly recommended that you don’t make modifications directly in the footer.php code lines. Instead, you should observe one of these best practices:

You should create a child theme and apply changes to the code of the corresponding footer file, in that child theme. Check this resource on how to create a child theme.
You should create a backup of your theme files. In case the theme breaks, you only need to revert to the previous theme version stored in the backup.
Another safe option is to comment on the code in the footer.php file. You don’t need to remove any existing lines of code. Comment the code instead.

Now, let’s see how you can change the footer.php file.

• Make sure you’re logged in to the WordPress Admin dashboard.
• In the left-hand menu, go to Appearance -> Editor. Click on Editor.
• In the list of theme files on the right side, search for the file named Theme Footer (footer.php). Click on it.
• The coding lines will display as follows:

• Now, it’s time to put your coding skills to practice.

And that was it.

This being said, we hope website footer editing no longer has many secrets for you. Observing some best practices and design principles, you should manage to customize your website footer the right way. What is more, you should thus have an additional chance to make visitors remember your website. And get back to it, in the future.

Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!

[sibwp_form id=1]

The post How to edit footers in WordPress with 5 easy methods in 2022 (in the Customizer and Block Editor) appeared first on ColibriWP Blog.

Now, when you want to create a WordPress website you will need to:

• Figure out the domain name then purchase the domain. You could use BrandRoot for inspiration.
• Buy a website hosting plan.
• Choose a free WordPress theme.

This means that you will still have some costs with the domain and web hosting. Now, you should be aware that most of the times free WordPress themes provide no support. If you want to have access to support, you will need to buy a paid plan. But don’t worry, prices can be a bargain (most of the time).

Now how should you pick a lucky theme winner?

How to choose your free WordPress theme

• Go to wordpress.org/themes and take a look at the listed WordPress themes. You can filter them by date, popularity, or features.

Maybe you want a theme that has a grid layout and is good for photography. Use the filter to uncover such free WordPress themes.

• Given that these themes are free, you should look for one that has as many options as possible. To make the most out of a free theme version and customize your website accordingly, you should search for an extended range of customizations. For example, I’m looking at the Dhimay theme. In the wordpress.org description there’s a link to its demo.Take a look at the demo or live preview to see if you like the design. But, besides that, check the theme’s description both on wordpress.org and its official website, and analyze the available customizations.
• Read the theme’s reviews on wordpress.org.
• Make sure that the theme was updated in the last 6 months, like this one. Mesmerize was updated in May 2022.
• Check whether the theme has available templates. For example, the Colibri theme has 90+ free and paid templates.
• Check if there are premium plans for the theme, in case you will want to make an upgrade to access extra features. Premium plans also have support included.
• Make sure that the theme is mobile responsive. You can take a look at the demo from tablet and a mobile device and see if it adapts to various screens.
• As important as mobile responsiveness, the speed of a website loading is crucial to that website performance. You have to look for a theme that has clean code behind it, so it doesn’t hinder website loading time.
• You should consider the theme compatibility with other popular plugins, such as those dedicated to integration of a contact form into the website (e.g. Contact Form 7), or of a newsletter (e.g. MailChimp).

Now, we compiled a list of 25+ great free WordPress themes.

And here it goes:

25+ great free WordPress themes for various niches

1. Storefront – free WordPress theme for online stores

Storefront, as the name itself says it, is a free theme for e-commerce. In WordPress, you can crate online stores using the WooCommerce plugin, and Storefront is the official free WordPress theme for WooCommerce stores.

Features of Storefront:

• You have 2 options for the website general layout.
• As it is an e-commerce theme, you have the possibility to customize buttons for the entire shop. You can make them prominent with the help of colors for the text and background, and some additional features the theme provides.
• The typography options are useful in that they can help you make the most important content stand out and be readily noticed by users (heading, texts and links can have the colors you give them, from the Customizer).

2. Colibri – free multipurpose WordPress theme

Colibri is a free multi-purpose theme that gives you a lot of control over design, unlike most of the free WordPress themes out there. Furthermore, Colibri is in the top 20 most popular WordPress themes of all time.

During the Colibri theme installation and activation, you will be recommended to install the Colibri page builder. This builder will level up the theme’s Customizer, giving it lots of powerful features, and allowing you to create Colibri sites by drag and drop.

Features of Colibri:

• 90+ free and pro template sites for a variety of niches. Whether you start a site from scratch or a predesigned template, you can easily customize it until you reach pixel-perfection.
• 150+ predefined blocks that you can customize however you see fit.  A few examples include: about blocks, features, services, team, testimonials, portfolio, contact blocks, etc.
• 40+ drag and drop components that you can use to create completely custom blocks or customize the existing ones.
• Website editing from header to footer in a single interface.
• Mobile-responsiveness.
• Easy to use and intuitive interface.

3. Mesmerize: free multipurpose WordPress theme

Mesmerize is a free multi-purpose theme designed to build a website in no time. It is one of the best choices regarding the variety of customization options (video background, slideshow background, gradient overlays, etc.).

Features of Mesmerize:

• It has many content blocks you can add into a page and combine to have the perfect presentation.
• Mesmerize has plenty of customization options for the header (which is of key importance in catching users’ attention).
• The theme provides options for differentiating among front-page navigation, inner pages navigation and mobile navigation.
• Mesmerize is mobile responsive, so it displays correctly on mobile and tablet.

4. Elevate – free block-based WordPress theme (multipurpose)

Elevate is a free WordPress theme that was launched at the end of 2021. It is block-based, meaning that you will customize it inside the Default WordPress Editor, unlike most of the themes presented in this article. The other themes work with the WordPress Customizer.

Long story short, there are two main ways of customizing websites in WordPress:

• using the Customizer – this is how Colibri, Mesmerize, Astra and other older and popular themes work,
• using the Default Editor aka Block Editor aka Gutenberg Editor. This new experience became the default in 2018. But, the experience is still basic, this is why products such as Kubio were born, to level it up, in order to give WordPress users more control over their designs.

What’s great about it is that it recommends the installation of Kubio during its activation. Kubio is a magnificent website builder that will enrich the Elevate theme with amazing features.

Now, let’s see how the features of the Kubio & Elevate combo look like:

• Designer-made starter sites.
• 170+ ready-made sections split across various categories: team, clients, portfolio, features, etc.
• 50+ fully customizable blocks. You can easily drag and drop blocks such as headers, tabs, accordions, sliders, carousels, and many more, then customize them as you see fit in the upgraded Block Editor.
• Font-sizes can be expressed in PX, REM and EM.
• Use shape dividers, overlays, section overlaps, and parallax to create websites that are easy to remember.
• You can create your own color palette then use it globally across the site.
• Mobile responsiveness. Customize colors, backgrounds, text, spacing, and other settings across desktop, tablet and mobile devices. Instant preview available.
• Full-site editing, meaning that you can edit a whole website in a single interface, without having to go back and forth to the WordPress dashboard to make header, footer, sidebar, and other edits.

5. Astra: free WordPress theme (multipurpose)

Astra is a good choice as a theme for any niche, e-commerce included. That’s why it comprises features destined both to creating a strong brand online, and to maximize conversions.

Features of Astra:

• Several layouts available.
• Different customization options for the header, footer, blog, sidebar, etc.
• Fast and lightweight theme.
• With the help of the free Custom Fonts plugin, you can import and use any custom font you like.
• Font-sizes can be expressed in both PX and EM.
• Typography presets are a ready set of font options for text and headings. ​​
• You can create your own color palette then use it globally across the site.
• WooCommerce-ready.

6. Colormag: free WordPress theme for magazine-style websites

Even if Colormag fits perfectly magazine-style websites, it can be customized to adapt to other niches as well. It comes with a wide range of features, making it ideal to customize a website into every detail.

Features of Colormag:

• Flexible & highly customizable theme,
• 25+ ready-to-use starter sites for various type of magazines,
• Growing template library,
• WooCommerce and Gutenberg ready,
• Search engine optimized,
• Responsive design.

7. OnePress: free one-page WordPress theme

OnePress is an elegant theme that will help you create one-page websites. It is useful both for business websites and freelance portfolios.

Features of OnePress:

• Advanced theme Customizer,
• Custom page templates,
• Custom theme widgets,
• Custom content blocks: company info, services, clients, videos, gallery, latest posts from the blog, contact form,
• Mobile responsive: OnePress adapts to several devices and screen sizes like Desktop, laptops, tablets & smartphones,
• Translation-ready.

8. Hueman: good choice for magazine-style WordPress websites

Hueman is a free WordPress theme that works great with magazine-style sites and blogs.

Features of Hueman:

• Dynamic sidebars and widgets,
• It offers the possibility to add an advertisement widget in Header, for website owners that plan to include ads in their pages.
• The Header menus can be adjusted for proper display on mobile devices, a search button can be added to these menus, and you can change their display based on scroll behavior.
• Perfect display on all devices,
• Ready for WooCommerce,
• Translation ready.

9. Spacious: minimalist multipurpose free WordPress theme for small businesses

Spacious is a multipurpose theme you can easily adapt to the niche of your business. It’s a perfect match for small businesses. It has a clean, minimalist design that works well for presentation sites.

Features of Spacious:

• 30+ ready-to-use starter sites for a variety of niches.
  You can customize the layout, independently for posts, pages, and site-wide.
• Advanced typography customiations,
• Woocommerce-ready,
• Search engine optimized,
• Mobile responsive,
• Compatible with the most popular page builders out there,
• Gutenberg-ready,

10. Responsive: multipurpose WordPress theme

Responsive, as the name says it, outshines many others by its mobile-responsiveness. It has a grid system that helps it better perform at this point.

Features of Responsive:

• Built with a very lightweight framework, it loads within 0.9 seconds,
• You can enable sections such as an About section, a Testimonials section, a Team section, a Contact section.
• Ready to use websites available,
• Choose how your website looks by controlling the layout of site container, blog, single post and page templates,
• Use default typography or create custom type by customizing fonts, sizes, styles and weights,
• Make site elements pop out by customizing background, text, link, and button colors,
• WooCommerce-ready,.

11. Total – multipurpose WordPress theme

Total is a good choice for presentation websites. It is modern and has lots of features that make up a clean and elegant design.

Features of Total:

• It has a drag and drop editor,
• 24 custom widgets available,
• Interactions and animations available,
• It has 18 sections for the homepage, you can choose to display/disable according to your wishes,
• Advanced typography for header elements,
• 4 blog layouts & fully customizable single pages,
• The sections you can use for the homepage: About us section with progress bar, clients’ logo gallery, featured section and services section with icons, portfolio section, team section with links to social media profiles, counter section, testimonial section, blog section that displays 3, 6 or 9 posts, a CTA section.

12. Customify: flexible multipurpose WordPress theme

Customify is a very flexible multi-purpose theme, that can be used for building almost any kind of website.

Features of Customify:

• It has a Theme Customizer Booster, with plenty of customization options that take your website to the next level.
• It perfectly integrates with website builders, such as Elementor, Beaver Builder, Visual Composer, Divi, etc.
• Its uniqueness resides in the Customify Header and Footer builders, that smooth the process of customizing headers and footers to the minutest detail.
• It is adaptable to any niche, so you can choose Customify to create a business website, a portfolio website, an online store, education websites, agencies, consulting websites, etc.
• Moreover, Customify is compatible with popular plugins, such as WooCommerce, Yoast SEO, etc.

13. Flash: multipurpose WordPress theme

Flash is created by ThemeGrill, a WordPress theme development company that has a proven record of releasing great WordPress themes.

Features of Flash:

• Easy customization,
• 15+ ready-to-use starter sites for a variety of purposes,
• Fully compatible with WooCommerce,
• Compatible with popular page builders.

14. OceanWP: popular multipurpose WordPress theme

Ocean is a lightweight and beginner-friendly WordPress theme. Being a versatile theme, it allows its users to create to create almost any type of website such a blog, portfolio, business website, and online stores. It has over 5 million downloads.

Ocean’s features:

• You can choose from 220+ modern WordPress templates or build a site from scratch,
• Create custom headers, footers and sections. Easy implementation on both global and individual page level,
• Control the layout of your page, disable or enable theme sections with a few simple clicks,
• Apply your favorite colors to all sections, or choose among hundred integrated Google fonts. Different typography settings for different sections and areas,
• 7 free header styles available,
• Increase sales by enabling the Multi-Step or distraction-free checkout for your Woo store.

15. Neve – very popular WordPress theme

Neve is built by the ThemeIsle team, and it ranks among the top 10 most popular free WordPress themes on wordpress.org.

Features of Neve:

• Control  over the website layout,
• Custom design of header and footer,
• Seamless integration with the most popular page builders,
• Control over the color palette,
• 100+ ready-to-import  starter sites,
• WooCommerce-ready.

16. GeneratePress – among the most popular WordPress themes

GeneratePress is an excellent free theme for building a website, in any niche. It is suitable for business websites, portfolios, landing pages, agencies, etc. It focuses on speed and accessibility.

Features of GeneratePress:

• Extensive library of professionally designed websites,
• Compatible with the most popular page builders out there,
• GeneratePress follows WCAG 2.0 standards, making it an accessible theme,
• Intuitive and easy to use.

17. Evolve

Evolve is a fully customizable WordPress theme, that is also fast and lightweight.

Features of Evolve:

• You have a custom front-page builder: you can choose what elements to display, and their order; you can add custom content to the homepage;
• You can enable the option to have a sticky header (when users scroll down the page, the Header sticks to the top).
• For more complex websites, you can include breadcrumbs and facilitate navigation within the site pages.
• You also have a bootstrap slider and a parallax slider you can use for enhanced design of your website pages.
• The theme is integrated with WooCommerce, so you can use Evolve to build an online store and start selling online.

18. Accelerate – minimalistic WordPress theme

Accelerate is a simple-to-use free theme you can use to build any kind of website: business, portfolio, agency, landing page, education, blog, personal, travel, etc.

Features of Accelerate:

• You can customize up to 5 widget areas,
• Search engine optimized,
• Advanced typography options,
• Advanced color controls,
• Fully compatible with WooCommerce,
• Compatible with popular page builders.

19. PopularFX – popular free WordPress theme

PopularFX is a multipurpose WordPress theme that ranks among the 15 most popular theme of all time on wordpress.org.

Features of PopularFX:

• Drag and drop editor,
• 350+ website templates available,
• Animation effects available,
• Enjoy 70+ unique designing elements allows you to create any type of design,
• You have a whole set of options for color selection (primary color in website, background color, sidebar color, body text color, page titles and site title colors, etc.)
• Fully customizable widgets,
• Easily Undo, Redo your changes and travel through all your editing history with Revision Control,
• WooCommerce-ready,
• Responsive theme.

20. Kale – free food blog theme

Kale is a truly yummy WordPress theme.  It’s clean, and minimal design makes it the perfect choice for lifestyle, personal, food and recipe blogs.

Features of Kale:

• Intuitive and easy to set up,
• Various layout design options,
• Optional full-width posts and pages,
• Banner and slider options,
• Multiple blog feed displays,
• Mobile-friendly.

21. Nisarg – WordPress theme suitable for both websites and blogs

Nisarg is a free theme that you can choose for mobile-friendliness and adaptability to any kind of niche: art, design, blogs, travel, photography, etc.

Features of Nisarg:

• Custom header design,
• Unlimited colors for the header text, header background, and site background,
• Responsive design,
• Translation-ready.

22. Kadence – modern WordPress theme

Kadence is a fast, intuitive, light, and powerful WordPress theme. It is listed in the top 20 most downloaded WordPress themes of all time.

Features of Kadence:

• Drag and drop editor,
• Header builder,
• Easily modify site-wide fonts, headings, buttons, links, and much more,
• Full control over site layouts, for pages, posts, and custom post types,
• Full control over typography and colors,
• No code, ready-to-use starter site templates,
• Mobile responsive.

23. Inspiro – photo and video-focused WordPress theme

We recommend Inspiro for creative photographers and videographers that are looking for a lightweight theme to show off their portfolio.

Features of Inspiro:

• Gutenberg-ready,
• Fullscreen area that supports Vimeo, YouTube & self-hosted video background,
• No code, ready-to-use starter site templates,
• Translation-ready,
• Easy customization,
• Mobile responsive.

24. Hestia – stylish one-page theme

The theme behind Hestia also created Neve, another popular WordPress theme. Hestia is suitable for small businesses, that don’t require a complex website.

Features of Hestia:

• Easy to set up,
• Gutenberg-ready,
• Seamless integration with all popular page builders,
• No code, ready-to-use starter site templates,
• Translation-ready,
• Mobile responsive.

25. Blocksy – Gutenberg-ready WordPress theme

You can easily create any type of website with Blocsy, from business agency, shop, corporate, education, restaurant, blog, portfolio, to simple landing pages.

Features of Blocksy:

• Easy to set up,
• Gutenberg-ready,
• WooCommerce ready,
• Seamless integration with all popular page builders,
• Translation-ready,
• Hyper-intuitive options to customize and change in real time every part of your website,
• Full control over the layout settings, header, footer, sidebars, pagination, single pages, and more,
• Mobile responsive.

26. Pathway – built with the Gutenberg editor in mind

Pathway is a recently added theme to wordpress.org. What makes it special is that it is block based. It works seamlessly with Kubio page builder, so that it manages to enrich the Block Editor with tons of styling options.

Features of Pathway:

• Easy to set up,
• Drag and drop editor,
• No-code starter sites,
• Gutenberg-ready: 50+ fully customizable blocks available,
• Designer-made sections: portofolio, team, clients, features, etc.
• Full control over typography and colors,
• Hyper-intuitive options to customize every section and block.
• Mobile responsive.

How to install a WordPress theme

Let’s say you’ve chose Elevate as your theme. Let’s go ahead and install it. I’m going to show you the process below, and you can replicate it with any other theme.

Here are the steps:

1. From the WordPress Dashboard, head over to Appearance->Themes,
2. Click on the “Add New” button.
3. Type the name of your theme in the search bar on the right hand side.
4. Hover over the theme thumbnail then click on the “Install” button.
5. Click on the “Activate” button.

Now the theme is properly installed.

Some themes might require some additional plugins to be installed. In this case, Elevate will recommend installing the Kubio page builder. Just follow the installation steps in order to benefit of all the customization options.

Next, here’s an article on how to design a WordPress website

Make sure you read it in order to properly jumpstart your site.

We wish you lots of inspiration!

[sibwp_form id=1]

The post 25+ Best Free WordPress Themes for Various Niches [UPDATED 2022] appeared first on ColibriWP Blog.

Below, you’ll find the critical ingredients that have been tried and tested to work, and which will make your homepage stand out from the crowd.

Bring focus to what the site is about

When a user first lands on your website, he/she will want to know as quickly as possible that they’ve come to the right place. Users are fickle, with a short attention span, so they want to be convinced of the value they’ll get, right off the bat. It’s necessary to immediately make it obvious what a website is about, so they know if they should continue spending time on a website or skip and find another site.

A website homepage should communicate value, from the very beginning.

To focus users’ attention, you can do the following:

Use a relevant keyword

For instance, if you sell consulting services, mention “consulting services”, if you sell shoes, mention “shoes”, etc.

A keyword, if it’s relevant, helps users better understand what the website is about. It anchors in their mind the core topic of the page, and an important part of the website message. Also, a keyword is useful for search engine optimization, as it indicates search engine bots that the web page is relevant for the topic and will better index and position the home page in search engine results pages.

Here‘s a website homepage that makes good use of a relevant keyword, directly in the homepage. The main and most relevant keyword here is “brand”, and it’s chained in an impactful paragraph that users can’t ignore.

And they nailed the slogan as well: “great brand design is measured in memories”.

Here’s another example from Mooosor, that talks about garbage d=statistics and how we can help diminish waste:

• Use a relevant graphic or image that sustains the words and the focus keyword, through visual cues. Such a graphic should immediately make it obvious that the website can give what the reader wants. For example, if they’re searching for a pet care center, you should have an image with a pet, if they are searching for a doctor, place a medical symbol on the homepage. The image and the text (keyword included) should have a strong correlation to one another, so the message keeps its coherence and really has an impact onto the readers.

The example from above is relevant here as well. Strong imagery and fonts really manage to emphasize this huge garbage problem humanity is facing.

In the following example, Vaayu uses round shapes that grow and diminish to make you think of measurement, carbon measurement in their case.

Survicate, a survey tool, uses arrows as a visual cue, to move the eye toward certain content.

Use a catchy slogan and memorable copy

Slogans are simple phrases designed to grab people’s attention, with a few words and a short message. A good slogan is striking, and it decides in a very short space the persuasiveness power of the homepage.

A good slogan can turn a homepage from good to great, from forgettable to memorable. It brings in the page message, quick and naturally, and it ticks a slight surprise effect that triggers users’ attention and puts them in the mood for reading more.

And to keep them engaged in reading more, the homepage should display good copy. The copy of the homepage has a decisive role for the effectiveness of the web page.

According to studies, there are some criteria that should be taken into account to ensure effectiveness of the homepage copy:

• Promotional writing (this is copy that boasts the benefits of a product/service with obvious commercial purposes) – the less promotional writing on the homepage, the more effective the homepage will be.
• Concise text – the copy on the homepage should be concise and present the essentials of the business; studies show that conciseness of the copy improves usability (users’ easiness in going through the text) with 58%.
• Scannable layout (a layout that is easy to be scanned, visualized, so information is quickly assimilated) – easily scannable layouts of the homepage lead to an increase in usability effectiveness with 47%.

Also, the homepage copy needs to perform well, as research showed that 38% of people will stop engaging with a website if the writing or layout are unattractive.

Homepage copy is a unique chance to makes users return to the website, once the first impressions were fine. Otherwise, studies show that 88% of online consumers are less likely to return to a site after a bad experience with it.

This is an example of a good slogan that does its job and has a truly effective impact on the readers’ minds: BE MOVED (Sony’s slogan).

You can also tell a story that your website visitors can relate to. Take Blok, for example. They are creating “kid-proof” watches. The website design is colorful and engaging. The story goes the watches are built “adults who lit (metaphorical) fires as kids”.

If you click on the CTA you’ll find out the rest of the story. It goes like this:

“We’re parents who haven’t lost our curiosity. We’re an independent watch brand that gets it. We’ve designed a stylish, analogue watch with a real-deal, Swiss-made heart. Credible with our friends in haute horology, yet self-evidently cool to our magnificently inquisitive, adventurous kids. The Blok 33 educates, engages, and inspires.”

They convinced me, what about you?

Here’s another story coming up via Everyday Robots. They build helper robots, in order to bring back time into our lives. And this is the story:

The story of ReGrocery started because “the grocery industry has made it impossible to avoid plastic packaging and waste, and we want to change that”. I’m pretty sure that this kind of message resonates with many of us.

Storytelling is important on a website. Having a brand story is more important than ever when it comes to businesses, because, in the recent years, our buying behavior moved on from looking at product features to how a product, a brand, make us feel.

Provide a unique value proposition for your homepage design

Every homepage should have its own unique value proposition.

The unique value proposition of a web page communicates what the company does differently than other companies on the market. It delimits the unique benefits people will have from the company.

The unique value proposition is more elaborate than the slogan. It’s, in fact, a succinct, punctual copy – a presentation of the solutions that make users’ choice of them the best possible option.

To help you get a clearer understanding of what the unique value proposition is, we list the key elements that it consists of:

• What you do.

I love how ReGrocery communicates this on their homepage. They deliver groceries in environmental friendly packaging.

Take a look at Vovi, a branding studio. Straight from the hero, you get their message. They do brand, social, website, and video campaigns.

Here’s a great example from Potion,  a tool used to personalize videos, to be used by marketing and sales teams. Potion has three main product benefits that are strengthen by social proof.

• Who you do it for. In the example below, Salesforce (one of the best customer relationship management systems out there) shows how it can help small businesses, sales and customer support teams.Here’s another example, from Woset, creators of imaginative kids toys. Love their copy: “Woset creates imaginative objects for endless play”.
• Why you do it better than the competition. You could say it or let customers say it. Take a look at this homepage testimonial from Netguru, a top software development company, among the fastest growing European companies. The testimonial shows how Netguru was the best choice for their client, and how they are good at going to market with speed.

Now, you could also create separate pages where you can compare yourself with specific competitors. It’s how ClickUp does it (great productivity tool). Their comparison pages are listed in the homepage’s footer.

Ahrefs, a great SEO tool, has a separate page to compare the product with its two main competitors: Semrush and Moz.

Provide an effective CTA

Some sites are more “action-heavy” than “information-heavy”, such as eCommerce websites. And the home page should be the first to set this content frame. For instance, a visitor on a real estate website wants to quickly go and see house listings, rental offers, etc. If the first thing he sees is a wall of text or images in non-actionable sections (with no buttons for reservations, for instance), he’ll immediately press the back button. Such sites really need to include an immediate, and clearly visible “call to action” or CTA to help the user do what he wants to do.

The folks at Lush, a great cosmetics online store, have a lot of calls to action, for various steps in the buyer’s journey, such as:

• “Shop now”, “Add to bag” for the ones ready to buy,
• “Read more”, “Learn more”, for those still doing product their research.

Take a look at the Land of Ride website. They curate unforgettable journeys for sports aficionados of all levels. There are two main calls to action on a page: “Choose land” (as in choosing the place for the adventure) and “Choose ride” (as in choosing the type of adventure: snow, sky, surf, etc.)

Here’s another CTA example, from the Quebec Metropolitan Orchestra website:

Characteristics of an effective homepage CTA:

• It has compelling text, that triggers action
• It uses the right tone (it “speaks in words users want to hear”). E.g. “Let’s Go!” uses a familiar tone, that fits perfectly the buyer persona searching scenario – “I’m gonna start searching for a new home, so…, good…, let’s go…”.
• It’s prominent and stands out from the rest of the page, through contrast.

Use testimonials for your homepage design

Testimonials can be a great way to sustain the homepage content with credibility. They are recommendations of products/services/companies from clients that tested them and have been content with their quality. They are one of the strongest forms of social proof and they have to make new users to try products/services for themselves.

A testimonial means that the person giving it is putting their reputation on the line. That’s why you should never underestimate its power.

According to research, 39% of consumers said they read reviews on a regular basis to determine whether a local business is a good business.

Even more, studies demonstrated that 88% of people trust online reviews written by other consumers as much as they trust recommendations from personal contacts.

Using the persuasiveness force of testimonials on the home page of a website is a good way to push readers into buying products/services of your company.

Here’s an example of the Codeacademy homepage that includes testimonials:

Testimonials should feel genuine, and suggest what makes you or your product worthwhile, like this testimonial for Kemal, a Prague-based photographer.

In B2B, a good practice is to include the picture of the one writing the testimonials, the position, and company, in order for the testimonials to feel authentic. Here’s an example from Miro, a cool online collaborative whiteboard platform.

Use mood boards to set the tone of the homepage design

Now that we talked about some key elements a homepage should include, let’s see how you arrange them on the homepage. What’s to be prominent, what’s slightly suggested, what other elements should complete the “picture”. Because they all have to outline a home page mood.

A mood board tells users how you approach certain subjects and communicates important aspects about you and your company. A mood board needs to create a certain kind of personality for your website or company. It’s an important way to communicate with your audience. If copy is your message, a mood board is how you transmit the message.

A mood board refers to:

• The color scheme of the website
• Typography used in the homepage
• Illustration style (this might be playing with effects such as overlays, image frames, frame shadows, transparency/opacity, gradients, etc.)
• Spacing rules (how much white space is for different portions of the homepage)
• The general contrast (it emphasizes content hierarchy and elements structure).

Here’s the Mailchimp homepage that makes use of illustrations, across all the website pages, offering an attractive and aesthetic element to a website, plus consistency. Mailchimp is one of the most popular email marketing companies out there.

We can recognize this type of illustrations on the DrinkPerfy website as well. It’s a trend we’re facing in the recent years.

Here’s another example of a homepage that intrigues, arouses curiosity and stirs inquisitive minds. It uses bold typography, 3D visuals, and large images. And, considering that Likely Story, is an award-winning boutique design studio, their own website should be jaw-dropping.

Now, if you’re looking for mood board inspiration, Dribbble is the place to find it.

You homepage design should change

Homepages change and evolve for a variety of reasons. User behavior changes, browsing style changes, web design evolves, and you should keep up with the latest trends. Sometimes, your own analytical reports will tell you there’s a need to update your homepage. There’s no need to get stuck with one homepage design. Your branding guidelines might change during time, or else the company undergoes a shift in activity, and you need a change in homepage design.

Also, you can make incremental changes to the homepage design for your website. You can make optimizations to the home page, for SEO reasons or User Experience, or more conversions.

So, you can replace some elements with others, you can add new elements that fit the new design and branding guidelines, or you can combine elements in a different way. The result will be a refurbished homepage, with a modern aspect and a message that is better for current users.

Below is an example of the Mammut website (outdoor clothing and footfear), and how it changed between 2020 and 2022:

2020:

The 2022 homepage redesign added visuals that are more attractive and dynamic, with a focus on adventure, and living new outdoor experiences.

Web page layouts one can use for a homepage design

The layout is the backbone sustaining all the content placed on the homepage. It plays an essential role in structuring information on the page. So it is easy to read, browse, assimilate by users.

There are a few traits that make the homepage layout to be a good layout:

• It has to be intuitive, so it matches already-formed user behaviors when visiting web pages.
• The layout to be predictable. Hence, it’s easy for users to find what they are searching for, in the order they are searching for.
• It has to address skimmers. White space, usage of lists and columns, headings are all components making a homepage content quicker to assimilate.
• This layout has to be responsive. Mobile responsiveness has become a requirement. So homepage layouts should easily adapt to the screen, depending on the device from which users open the page.

Here are some of the most popular homepage layouts working for a wide variety of niches:

Layout 1 – example

Layout 2 – example

You can check for further details about how to choose the correct layout for your website.

Now, you’re almost ready to start creating your homepage design. Check to see which elements from the above are appropriate for your website and follow the guidelines. Your website homepage will be just perfect.

The post Why These 25+ Website Homepage Designs Work So Well [UPDATED 2022] appeared first on ColibriWP Blog.

I sometimes allow my mind to wander while I read something on the internet and I’ll end up losing entire paragraphs.

So, when there’s a video on the page, I really want to thank and maybe even hug the website owner. “Thank you, you’re so sweet and considerate.” That’s what I would say to them.

I know I’m not the only one. In fact, more than 72% of internet users prefer videos to text to learn about something.

The reason why most of us love online video is quite simple: videos are so much easier to digest. They do a great, even perfect job at breaking down complex topics. And that’s what makes them an ideal addition to a website.

Today, not only news websites have videos. Every professional brand website always has an introduction or short product demo video on its homepage. In the food and beverage industry, restaurant video marketing can help owners get more reach and visibility online.

Not only do they aim to give a visitor a quick, engaging insight into their brand– but also want to give them a solid user experience. 

If you want to add videos to your WordPress website to engage visitors with a short attention span like me, then you need to use video plugins. 

We’ve listed some of the best WordPress video plugins for you.

List of WordPress Video Plugins

There’s no such a thing as a one-size-fits-all WordPress video plugin. The best one is always the one that can fulfill your needs and meet your preferences.

But, these plugins below are great options for adding your video to your website.

#1. Envira Gallery

With Envira Gallery, you don’t have to hire a developer to create a WordPress video gallery. 

This plugin is easy to use and lets you create a custom video gallery in minutes. The best thing about this video plugin is it works great with the top page builders out there.

You can use it to create a gallery of any size, and your videos will look great on any device.

Here are other key features that can make you fall in love with this plugin:

• Mobile-friendly,
• Drag and drop builder,
• Social media integrations, image proofing, and WooCommerce store integration,
• Guttenberg blocks for WordPress 5.0,
• Watermark,
• Social sharing for Facebook, Twitter, and Pinterest.

Pricing: starts at $29/year.

#2. YouTube Showcase

YouTube Showcase is a popular WordPress video plugin that lets you add videos from YouTube to your website. 

It’s easy to use and has a user-friendly interface. You can add videos by entering the video URL. Since it’s designed for simplicity, it’s a great option for you if you want to add videos to your website without any hassle.

This plugin also allows you to customize the player, so you can match it with your website’s design. And, you can control what appears on the video screen by hiding the player controls, info bar, and title.

This video plugin also comes with some great features like:

• Widget support,
• Custom CSS,
• Ability to hide player controls,
• Continuous play option,
• Autoplay and loop options,
• Shortcode support,
• Video thumbnail quality option.

Pricing: starts at $99.99/year. There is also a free version available.

#3. Modula

Modula is another great WordPress video plugin that allows you to create beautiful custom, unique, and responsive video galleries. 

With this plugin, you can easily add videos from YouTube, Vimeo, or self-hosted videos. You can also control the layout and design of your video gallery. You can basically add any video to your WordPress page without needing coding skills.

This video plugin is mobile-friendly and responsive, so your videos will look great on any device. 

Let’s take a look at its key features:

• Responsive and mobile-friendly,
• Video extension,
• Self-hosted video support,
• Huge library of free add-ons,
• Watermark,
• Password protection.

Pricing: starts at $39/year.

#4. YourChannel

YourChannel provides a quick way to create or curate YouTube videos. With this video plugin, you can show your YouTube videos and even playlists on your own website. 

You can use this plugin to create a video gallery or even add a single video to your post or page. This plugin is perfect if you want to embed YouTube videos in WordPress without having to copy and paste the embed code.

This video plugin has an intuitive interface that makes it easy to use. Plus, it comes with some great features like:

• YouTube Live stream support,
• RTL support,
• Translation,
• Autoplay option,
• Easy shortcode instructions in the post editor,
• Cache system for fast loading.

Pricing: starts $29/year. Free version included.

#5. Videopack

Formerly known as Video Embed & Thumbnail Generator, Videopack is a popular WordPress video plugin that allows you to embed videos from YouTube, Vimeo, and other video sites. 

This plugin can also generate thumbnails for your videos so you don’t have to worry about creating them yourself. It’s easy to use and lets you customize the look of your video gallery. Not to mention you can use the plugin to create a popup video gallery. 

Videopack also allows you to:

• Add videos to your post or page,
• Customize the look of your video gallery,
• Create a popup video gallery,
• Automatically select the one closest to the size of the player or a resolution of your choice,
• Shortcodes,
• Add advertisements to your videos.

Now, if you’re using the Block Editor, you should be aware that Videopack is not compatible with it.

Pricing: starts at $5.99/year.

How to Work With Modula to Create WordPress Video Galleries

Modula might be one of the most popular WordPress gallery plugins out there. So, we’re going to show you how to use it to create a video gallery in WordPress. 

First, you need to install and activate the Modula plugin.

Once you’ve installed and activated the plugin, you need to click on the Add New Gallery button on the Galleries page.

This will bring you to the Gallery Settings screen where you need to enter the details of your video gallery. You can start adding your videos by either selecting “Upload a File” or “Select from Library”. You can even drag an drop your files.

And here are some other settings:

In the General tab, you need to provide a name for your gallery and select the type of gallery you want to create.  

Meanwhile, in the Videos tab, you need to enter the URL of the video you want to add and select a thumbnail. You can also choose to hide the player controls, info bar, and title.

Once you’ve finished configuring the settings, click on the Save Gallery button to save your changes. 

You can now add your gallery to any post or page on your WordPress site using the shortcode that is displayed on the right side of the screen.

Here’s a video tutorial as well:

https://www.youtube.com/watch?v=NxrTXQNExh4

How to Choose the Right WordPress Video Plugins

Again, not all plugins are a good fit for everyone. Remember that the best WordPress video plugin for you might not be the best one for someone else.

So, before you start choosing one of them, it’s always best to consider these points:

• Your needs and preferences,
• The features offered by the plugin,
• Ease of use,
• Customer support,
• Product reviews,
• Is there some documentation offered?
• When was the plugin last updated?
• Does the plugin work with the Default WordPress Editor (aka Block Editor aka Gutenberg Editor)?,
• Price.

Now, the thing is that with WordPress you might end up using tons of plugins. Each one of them will end up slowing down your website. And that’s not a good thing. Page speed s crucial for a site. In a world that is fast, with short attention spans, page loading speed can make or break your site.

This is why I would recommend using page builders. They have tons of features that can easily substitute lots of the plugins out there. Let’s look at an example.

How to Manage Videos inside Kubio WordPress Builder

I’m going to show you how you can use videos on your site using Kubio. Kubio is a block-based builder. It works on top of the latest WordPress experience, aka Gutenberg. Kubio is compatible with any WordPress theme out there, but it works best with block based themes.

At the end of the day, if you start a site from scratch, with Kubio, the theme almost becomes irrelevant. This happens because Kubio gives you so much design freedom!

Before jumping into working with videos in Kubio you should first understand how the new experience in WordPress works.

Everything in WordPress is now a block: paragraphs, images, videos, tables, and more.

When you are inside a page in WordPress you should look for “+” signs.

When you click on such a sign, you will open up a block inserter. You can start typing the name of a block and then select it to insert it. The black ones are the default WordPress blocks, while the blue-green ones are the ones from Kubio.

How you can use video blocks in WordPress and Kubio

Now, the moment you add a block you will notice a toolbar on top of it with several options that can vary from block to block. They mostly refer to moving the block, copying it, or removing it.  In the case of the video block you can only add a video and that is all. No other styling options are available. And this is why you would need a plugin for some more advanced designs.

But let’s see what happens when you add the Kubio video block:

It will place a default video on the page, which you can replace from the block editing panel on the right.

Now, the block editing panel allows you to do tons of customizations. It has three layers: Content, Style, and Advanced.

At the Content level you can:

• Select your video type (self hosted, Youtube, Vimeo);
• Decide the starting and ending times for the video;
• Decide whether you want to have your video to be auto played, muted, or looped;
• Decide whether to show or not the video controls.

At the Style level you can set up:

• The video’s aspect ratio;
• The video’s box shadow;

Here are the available advanced video block edits:

• Background. Here you can make adjustments to background color and type.
• Border and shadows. Here you can add borders with a different color, radius and thickness to your video Gutenberg block. Also, you can add box shadows. You have full control over the position, blur, spread and color of the box shadow.
• Responsive. Here you can decide whether the video block will hide or not on desktop, tablet or mobile.
• Miscellaneous.At this level you can set up the z-index of your block (vertically order the elements that overlap), set up if the element overflows or not (displaying the content of the block flowing out of its container into the surrounding area), add HTML anchors and CSS classes.

Here you can find more info about video block editing in Kubio.

Now, let’s go a bit more in-depth.

How to add a video background with Kubio

Let’s say you want to add a video background to a section, a row, or a column.

Every block, section, column, or row can be editing inside the block editing panel on the right.

Backgrounds can be edited under Style or Advanced.

Now, let’s change the background image this column here (on the left hand side) with a video.

Let’s go to Style -> Background -> Background type and change from Image to Video.

Let’s upload a self hosted video, or paste a link. Use the External option to paste a link from Youtube.

Next you can add a video poster.

And here’s our video background:

Video source

Pretty neat, right?

Creating video galleries with Kubio

We can do this in 3 ways:

1. Adding video blocks to columns

In Kubio you can easily add blank sections if you go at the bottom of a page and select “Add blank section”.

Now, you are asked to choose how many columns you need. Let’s go with three.

We’ll get this:

Let’s click on each “+” sign and add the Kubio video block.

We can add box shadows using the video block Style option, or add a section background, from the section Style option.

Now, I’m going to replace the default videos and set them up to autoplay and loop. You can easily add video posters as well. Everything happens under the Style option in the block editing panel.

Let’s hit “Preview” in the upper-right and take a look at the result:

Next you can make the section full width, change the dimensions of the videos, the spacing between them…All this magic will be managed in the block editing panel on the right hand side.

Adding videos to sliders using Kubio

Now, let’s say we want something more dynamic. Maybe we want a slider with videos, and maybe some text on top. How can we do this?

Well, let’s use the Kubio slider block.

I’m going to add a new section with a single column at the bottom of the page and add the slider block from the “+” sign.

Now, the default slider has several slides with different designs.

I like the first slide design.

From the block editing panel on the right, inside Content, we can add or remove slides. Let’s delete the slides from 2 to 4 using by clicking on the “x” sign.

Now, I’m going to change the first slide background from image to a video. This means we need to select the slide. We’ll do this by clicking on it straight in the canvas. Notice how the block editing panel changed from “Slider” to “Slide”?

This means that both the slider and the slides can be customized separately in the block editing panel.

Now, from the Style level, let’s change the background to video and upload a video or paste an external link.

Now, you notice that we have a heading, a paragraph and a button. Each element is in fact a block. When you click on them you will be able to customize them from the block editing panel on the right, but also delete them. You can use the “Delete” key from the keyboard for this, or the “Remove block” option from the toolbar we mentioned a bit earlier.

Now, the text is not visible on this background, let’s add an overlay to fix this. This means that we need to head over to “Style” in the slide’s block editing panel and to toggle on “Background overlay”.

From the settings icon we can adjust the overlay’s opacity, its color, and more.

Next, we can customize the dots or arrows of the slider in order to improve the navigation between the slider’s slides. The dots and the arrows are also blocks that you can customize the way you see fit.

Now, when the design is clear, we can easily duplicate our slide and add the content we want to it. Just go ahead and change the text and videos.

This is how we get a nice video slider with overlays and text on top. Nice, right?

Now, you can apply the same logic when using the Kubio carousel block. But I’ll let you play with it. You can start by installing Kubio and enjoying it for free.

Conclusion

As you can see, there are many great WordPress video plugins available. Each one has its own unique features and benefits. Choose the plugin that best suits your needs and start adding videos to your WordPress site today.

Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!

[sibwp_form id=1]

The post 5 Best WordPress Video Plugins to Add to Your Website appeared first on ColibriWP Blog.

You can most easily make a portfolio website starting from good WordPress portfolio themes. We provide you a list of the best 15+ WordPress portfolio themes. You can use any of them confidently, and build a successful site that really represents you.

Guidelines for portfolio websites

Here are some basic principles you need to take into consideration when you start building your WordPress portfolio website:

• Present yourself, not just your work.

Apart from listing your best work, you need to introduce yourself. Say who you are, what your passions and hobbies are, what you are talented at and what interests you most. Be as authentic as possible, besides presenting your education and professional course.

I love the way Ivan Key presents himself and his work. By the way, this is a WordPress website.

• Present just your best work.

If there’s plenty to show in terms of work samples and portfolio, consider sorting them out. Do not throw everything in the website, only select the best work and present it as best you can. Including everything might be redundant, or deter users from getting to know what your strengths are.

I like how the individual project galleries look like for on the EthnicChic, an interior design company from Netherlands. The website design is minimalistic, with lots of white space, so that you can focus on the galleries more.

• Keep it concise.

Do not stuff the presentation with unnecessary words. Keep to the essentials, and sum up what you have to say about yourself as a professional. You want people to remember you as a brand, and for this you need a unique presentation. Keep it simple and easy to remember.

• Tell a story. Your story.

For the data to be relevant and expressive, you need to provide some context. And you can do this by telling your story in the website pages. How you started working in the area, what the early experiences were, how you continued and what encouraged you to follow a career path. People will find it interesting to read about the human side related to a professional evolution. Don’t neglect it.

Here’s how a Karolina Edman, Sydney-based branding specialist approaches this:

• State a mission and a vision.

Similarly to business websites, having a mission and vision is important for a portfolio website. Why do you do the work you do, what are your standards, how do you expect to make a difference with your work in your area of expertise, etc. These are questions that the mission and vision statements should answer.

Take a look at Land of White Deer (some of my favorite photographers). They keep it simple, and touching: ” frames of tenderness and affection… glimpses of the bond between two souls… LIFE – raw and captivating”.

• Last, but not least, publish awards and recommendations.

Awards and recommendations strengthen your presentation, and support your statements through third-party assessments. These serve as social proof, and have force to convince users to contact you for future projects.

Take a look at Dylan and Joanna, photographers and owners of the The Kitcheners. They are showing off their awards on the homepage.

Next, let’s see take a look at some WordPress portfolio themes that can help you build a website that can really represent you and your work:

1. ColibriColibri is in the top 20 most popular WordPress themes of all time. What’s great about Colibri is the fact that during the installation it recommends you to install the Colibri page builder. This builder will level up the theme’s Customizer, giving it lots of powerful features. The theme has both free and paid plans. Here are the features we’re sure you’ll love:
   • 90+ template sites for a variety of niches. If you want to create a portfolio website you could go for this artist template, this designer template, or even with a resume template. No matter what you choose, you can easily customize the site until you reach pixel-perfection.
   • 150+ predefined blocks that you can customize however you see fit.  A few examples include: about blocks, features, services, team, testimonials, portfolio, contact blocks, etc.
   • 40+ drag and drop components that you can use to create completely custom blocks or customize the existing ones,
   • Mobile-responsiveness,
   • Easy to use and intuitive interface,
   • Reliable support team.

    

2. PathwayPathway is a newly launched WordPress theme (May 2022). What’s special about it is that it recommends you to install the Kubio page builder. Kubio is a block-based website builder that enriches the Default WordPress Editor with amazing styling possibilities, so that you can have full control over design. Kubio comes packed with starter sites that you can fully customize. Like this photography starter site. Now, here are the features that you’ll love at the Pathway-Kubio combo:
   • 150+ predesigned sections that you can choose from that cover different functionalities: hero, about, testimonials, clients, and many more,
   • 50+ drag and drop blocks such as headers, sliders, carousels, pricing tables, etc.
   • full control over color and typography,
   • Parallax, overlay, and dividers options,
   • Mobile responsiveness. Customize colors, backgrounds, text, spacing, and other settings across desktop, tablet and mobile devices. Instant preview available.

    

3. Mesmerize 

Mesmerize can very well be your consultancy WordPress theme or your portfolio theme. It’s versatile and can be a good fit for a variety of niches. You can import one of the pre-designed templates, specially created for portfolio websites. Or you can make your site up from pre-defined sections in the theme.

The frontpage header designs provide a wide variety of choices, depending on your niche. Customize it for your portfolio website. You’ll benefit from plenty of customization options that will make your site memorable.

2. Zakra

Zakra is one of the most popular WordPress portfolio themes. It’s professional and easy to customize. Using it, you’ll have a site in a few hours.

Features of Zakra:

• The Header has 3 areas you can customize: Header Top Bar, Header Main Area and Header Button. The Top Bar serves for different announcements, such as limited-time discounts and offers; you can activate it or leave it inactive. The Header Main Area refers to what displays on the screen. You can change its layout, enable/disable a search icon, choose a border bottom (dimensions and color), etc. The Header button refers to the main CTA in the homepage. You can type the text you want to appear on the button, and place a link on the respective button.
• The theme has options for posts/pages/blog. The options are separated into General options, settings for Blog/Archive, settings for single posts and options for Meta data. One strength of this theme is that it has plenty of layouts to choose from, for every type of page: default pages/blog/archive/single posts and pages.
• For the styling options, Zakra has multiple settings regarding base colors, link colors and buttons.

3. Portfolio Press

Portfolio Press is one of the best WordPress portfolio themes. It’s adequate for creative professionals, in areas such as photography, web design, art, etc.

Theme features:

• It has the regular options for defining a site identity: site title, tagline and site icon. The logo, favicon and apple touch icon can be uploaded directly in Customizer.
• The theme has special options for the Archive: full width archives. You can enable to display image and gallery formats on posts page, and you can activate the option to show archive titles.
• You can adjust the appearance of the homepage directly in Customizer: you can show latest posts or a static page.

4. Dhimay

This theme is perfectly suited for vibrant artist websites: musicians, DJs, producers, and other creative minds.

Features of Dhimay:

• Highly customizable,
• Event section,
• Music focused sections,
• Responsive design,
• Enable and disable individual components to make your page loading faster and smoother.

5. Pixgraphy

Pixgraphy is a good fit for artists’ and photographers’ portfolios. The cards layout adapts well to image galleries that impress users.

Features of the Pixgraphy theme:

• The theme has specific options regarding the layout: you can turn on the responsive layout, as well as animation options. You should benefit from the photography layout, but there are additional layout options, as well. You can choose between full width layout and boxed layout, etc.
• A series of distinct features of the theme includes: enable/disable search form, enable/disable sticky menu, enable/disable Go To Top, disable top social icons, display page featured image.
• There are fields you’ll fill in with links to social media accounts, in the Social Icons category of the menu in Customizer.

6. Gridsby

Gridsby is a theme for photographers’ portfolios. It has a Pinterest style gallery where you can replace the images with your own.

Features of Gridsby:

• Gridsby impresses through a wide range of customization options, from homepage settings, site identity and logo, to Google Fonts, Colors and Blog Layout, etc.
• Among particularities of this theme, we mention: photo post method – which results in animated lightbox for displaying photos, or photos with direct link to post. Gallery page pagination is useful for a Pinterest style gallery you choose to show on the website. Thus, you choose the number of photos to display with the pagination option in the gallery pages.
• The theme has specific settings for category pages in the website, which makes it easier to properly structure the site.

7. Emmet Lite

Emmet Lite is a perfect theme for professional-looking corporate portfolio websites. It has a clean design and is simple to customize.

Features of Emmet Lite:

• The theme has plenty of features and options that allow for easy customization of a website. Among them, basic settings are ensured for the identity of the website: logo plus title, tagline and site icon, upload image for the Header, set up the website color scheme with Header/Background/Text/Accent color, etc.
• You have a special feature for the Big Title Section, where you can also include Calls-to-action.
• There are special settings for the First Feature Section, which helps you bring forward your unique value proposition.
• You can further customize the Second Feature Section, the Accent Section and the Subscribe Section.

8. ePortfolio

ePortfolio is one of the ideal WordPress portfolio themes for graphic designers, photographers, web designers, professional bloggers, video producers.

Features of ePortfolio:

• There’s a specific section for layout management: you can select the global page/post sidebar layout, and you can also select the time span format.
• The layout options include a variety of styles for each of the following: latest posts/blog page, portfolio page template, photography page template.
• For a website where you’ll include plenty of photos, it’ll be useful to customize pagination.
• You can take into consideration the activation of a preloader.
• The theme is SEO-optimized, so you have an extra chance to get visibility in search engines and catch users’ attention.

9. Perfect Portfolio

Perfect Portfolio might be the perfect choice of portfolio theme. It can make your website stand out of the crowd. You’ll get a remarkable presentation in no time.

Features of Perfect Portfolio:

• The General Settings include a subsection related to SEO. So, you can make the website SEO-friendly. Additionally, the theme is Schema friendly, and comes with Speed Optimized code.
• The General Settings also include options to enable blog excerpts, set up the excerpt length, enable showing popular posts, etc.
• There’s a category dedicated to customizations of the site appearance: choose the site typography, select the background imaged, choose the background color.

10. Online Portfolio

Online Portfolio is a theme for building professional portfolio websites, in different areas. It has plenty of features you can use to customize your site to the minutest detail.

Features of Online Portfolio:

• This theme has the option to include a homepage Slider. Further customization options are available under this category in the Customizer menu. You can add CTA buttons in slides.
• Extensive options are available for the website layout. You can adjust settings for the default sidebar, feature image for single post/page, blog/archive.
• The specific theme options have various settings for the color scheme: both color options and color reset options give a plus of flexibility to the theme. In case you want to change the website appearance, you can use the reset options and align the design with the new branding guidelines.

11. Snow: Minimal & Clean WordPress Portfolio Theme

Snow is a WordPress theme that breathes minimalism.

This theme will suite for designers, photographers, web agencies and studios, freelancers and so on.

Features of Snow:

• Beautiful portfolio layouts,
• 18+ portfolio styles,
• Custom options for single Page, Posts and Works,
• Lots of gallery options,
• Responsive and retina ready,
• Smooth Parallax for Images and Video (you can turn-off or customize them)
• Typography control,
• 3 Navigation Types – top menu, side menu and full-screen menu.

12. Elegant Portfolio

We recommend Elegant Portfolio for those who want to create a clean and minimalist portfolio website, using a lot of white space. This theme has all the needed options for you to customize the site and give it your personal touch.

Features of Elegant Portfolio:

• One of the most important category in the Customizer menu is that of Appearance Settings. Here, you can select the typography (Primary Font and Secondary Font), upload a background image and select a color for the pages background.
• There’s a special category dedicated to layout settings: you’ll set up the blog layout and the general sidebar layout.
• The General Settings include some SEO customizations, which means increased chances your website will be visible in Google results pages.

13. Laurits – Portfolio and Agency Theme

The Laurits WordPress portfolio theme provides minimalistic design and an elegant presentation for websites. It is suitable for photographers, illustrators, freelancers, web designers, etc.

Features of Laurits:

• WooCommerce-ready,
• 12 predesigned homepages,
• Multiple customizable layouts for portfolio lists,
• Portfolio List Gallery layout,
• Portfolio List Masonry layout,
• Portfolio List Slider layout,
• Portfolio List Justified Gallery layout,
• 3 pagination types for portfolio lists,
• Fullscreen Portfolio Slider shortcode,
• Interactive Portfolio Showcase shortcode,
• Highly customizable typography settings,
• Separate typography settings for responsive,
• 1000+ Google Fonts.

14. Oráiste – Creative Portfolio WordPress Theme

Oráiste  is a portfolio WordPress theme that breaths freshness. It is perfect for creative professionals such as: photographers, illustrators, graphic designers, etc.

Features of Oráiste:

•  Light and dark creative design templates for showcasing projects,
• 12 predesigned homepages,
• Multiple customizable layouts for portfolio lists,
• Portfolio List Gallery layout,
• Portfolio List Masonry layout,
• Portfolio List Slider layout,
• Portfolio List Justified Gallery layout,
• 3 pagination types for portfolio lists,
• WooCommerce-ready,
• Multiple Header behaviors,
• Variable grid size,
• Highly customizable typography settings,
• Separate typography settings for responsive,
• 1000+ Google Fonts.

15. Eldon – Artist Portfolio Theme

Eldon is a modern, engaging, and visually rich portfolio theme that is best suited for artists and other creative minds. Is uses gorgeous imagery, and the good news is that the images can be kept for free when the theme is bought.

Features of Eldon:

• Easy-to-Use Powerful Admin Interface,
• One-click import of demo site,
• 10 predesigned homepages,
• Practical inner pages,
• Multiple customizable layouts for portfolio single items,
• Custom Portfolio single layouts,
• Portfolio Gallery – big and small layouts,
• Portfolio Images – big and small layouts,
• Multiple Header behaviors,
• and many more.

16. RT Portfolio

RT Portfolio is a beautiful and clean WordPress portfolio theme. It has all the needed features to create a stunning website, without being cluttered.

Features of RT Portfolio:

• The theme focuses on the customization of the front page, which is the most important page for this niche. There are plenty of options for the front-page design: specific settings for each needed section (About, Services, Portfolio, Testimonial, Team sections).
• You have the basic options to create the site identity, as well as settings for a banner in the front-page.
• The theme options are clearly organized as: Header options, General options and Footer options.

17. Multipurpose Portfolio

The Multipurpose Portfolio theme is suitable for portfolio websites related to any niche. It has a trendy design that’s easy to customize.

Features of Multipurpose Portfolio:

• The specific theme settings refer to: changing the default typography for headlines, body text and tags, choosing the website colors, customizing the top bar, adding links to social media accounts in the banner section, choosing the layout and text alignment for the footer, etc.
• The site identity options couldn’t have missed from the Customizer. They help you give personality to the website, using a certain logo, title and tagline, and a distinct site icon.
• You can upload a certain image for the website Header, and make the homepage more relevant, more expressive.
• The theme comes with various demos you can use as a starting point for your website.

18. Mogi – A Creative Portfolio / Agency WordPress Theme

The Mogi portfolio theme is an innovative WordPress Theme, crafted by creative people for creative People.

Features of the Mogi portfolio theme:

• Extremely customizable,
• One-click demo import,
• You can combine different demos as you like,
• Beautiful and smooth animations to make your site stand out from the crowd,
• Full typography control,
• Great performance.

19. Gracey – Creative Portfolio Theme

Gracey is an avant-garde WordPress portfolio theme, made for daring minds.

Features of the Gracey portfolio theme:

• Versatile portfolios,
• Predesign product pages,
• WooCommerce compatibility,
• One-click demo import,
• Easy-to-Use powerful admin interface,
• 10 predesigned homepages,
• Multiple customizable layouts for portfolio lists,
• Portfolio List Gallery layout,
• Portfolio List Masonry layout,
• Portfolio List Slider layout,
• Portfolio List Justified Gallery layout
• Full typography control,
• and so many more.

And we’re done! 19 lovely WordPress portfolio themes that you can choose from.

What’s next now?

Well, it’s time to roll over your sleeves and start designing that portfolio website.

Here‘s some know-how that you might need.

Important: because the WordPress experience has changed recently, I would advise to go with block-based themes and a versatile builder such as Kubio. Because blocks are the future of WordPress.

Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!

[sibwp_form id=1]

The post 19 Free and Paid WordPress Portfolio Themes that’ll Make Your Website Stand Out [UPDATED 2022] appeared first on ColibriWP Blog.

We heard you.

Setting a fine background for the pages of a website is important in web design, because it can enhance a website expressiveness, and better emphasize content.

In this article I’m going to show you how to:

• Change the background color of website sections,
• Add background images,
• Add background videos,
• Use gradients as backgrounds,
• Add overlays to backgrounds.

We’ll be digging inside the Customizer and the Default WordPress Editor. So, let’s roll!

Making WordPress background changes inside the theme Customizer

Most popular WordPress themes come with custom background features, that allow you to change the background color, or even use videos, images, gradients as backgrounds.

Yes, the theme will dictate what you can or cannot do in terms of background changes.

If your theme is not rich in features, don’t worry, there’s a plan B: using WordPress plugins. We’ll talk abut this a bit later on this article.

In this exercise I’m going to use two themes to show you how you can make WordPress background color changes, and more: Mesmerize and ColibriWP.

At first I wanted to show you how to do this inside an official WordPress themes, such as Twenty Seventeen, Twenty Twenty, but I said “No”. These are very basic, not rich in features themes, and even changing text can give you a headache. Yeah, that would be an experience I would not recommend. These are not suitable for 2022, when there are all sort of products that allow you to create a website by drag and drop in a single interface.

Now, when you do your own theme research, look for one that is rich in features, that doesn’t have many limitations, even with a free plan. If changing a background can be a pain in the ass, just skip it.

First, let me show you how to install any WordPress theme.

1. From the WordPress Dashboard, head over to Appearance – > Themes.
2. Go to “Add new”.
3. Type the name of a theme in the Search bar.
4. When you find the theme, click on “Install”.
5. Click on “Activate”.
6. Click on “Customize” to enter the theme’s Customizer.

How to change WordPress background color in the theme’s Customizer using Mesmerize theme

I chose Mesmerize to show how you can change the background of WordPress sites because this theme has comprehensive features for changing background colors, images, gradients, so it seemed a good example to start from.

After going inside the Mesmerize Customizer you will notice a message saying: “Please Install the Mesmerize Companion Plugin to Enable All the Theme Features”. This means that in order to benefit of some extra features, Mesmerize will install a plugin for you that will enrich the Customizer. Most of the themes out there will proceed similarly. Because the basic WordPress Customizer has tons of limits.

So, I’m going to activate the plugin, which is called Mesmerize Companion.

Let’s start playing with some backgrounds, shall we?

Making WordPress background color changes to sections

Each page section inside Mesmerize has a settings icon in the upper-right. Let’s click on such an icon.

Notice the “Change background” option?

Let’s select it and see what happens.

A window will show up on the left-hand side. Let’s go to “Background color” and click on the dropdown.

You can either select a color from the theme’s palette, use the slider to pick a color, or paste the code of the color you want.

You can use the slider shown below to adjust the opacity of the background color. You can decide on having a more transparent color or an opaquer one.

Click on “Choose” when you’re done. Then save your page to go live with the background color change.

I’m gonna go with a white background for my section, because I do love minimalist design and white space.

Working with background images and overlays

While we’re still making changes to our section background, let’s switch the background type from color to image.

Click on “Change” to head over to the Media Library and add an image, or upload one from your device.

Click on the image, then click on “Select” in the bottom right.

Here’s how the background looks like at the moment.

I will need to add an overlay so that the plant image won’t be so “in your face”. An overlay is a semi-transparent color that is applied on top of the background, to obtain a nice visual effect. It can give an elegant, stylish look to the web page, and it can make a difference between a common design and a classy one. If you don’t want an overlay, you simply leave the option set to default (that is 100% transparency of the overlay, or no overlay activated for the page/page section).

Let’s go to background overlay and darken it a little.

Here’s the result:

Now, the font-color will need to be changed in order to have a proper contrast. But this is another story.

Working with background gradients

What if we go for a gradient instead of an image?

There are several gradients available inside Mesmerize. Let’s click on “Choose gradient” to discover them.

How to change WordPress background color in the theme’s Customizer using the Colibri theme

I wanted to show you two themes that manage to level up the Customizer. Colibri is newer than Mesmerize, and during the activation it recommends you to install the Colibri page builder. The page builder will actually put the Customizer on steroids, giving you a lot of design freedom.

Making WordPress background color changes to sections

Each page section inside Colibri has a settings icon in the upper-right. Let’s click on such an icon.

You will notice an editing panel on the left, that will allow you to make all sorts of styling changes. This panel has more advanced options than Mesmerize. It is structured like this: Layout/Content, Style, and Advanced. Background changes can be made inside Style and Advanced.

Go to Background – Color and click on the colored rectangle.

This will pop up a window with several color options:

• A list of colors from the current theme color scheme. You can pick a color from here, or even change the color scheme by going to “More schemes”,
• A slider that helps you pick the color you like,
• Fields where you can input your own HEX or RGB color codes.
• Slider to set up the color opacity. Opacity has values from 0 to 1, 1 meaning totally opaque. In the field that has an “A” underneath you can input a value for the opacity if you want.

In the example above, the opacity is set to 0.51. The value is also reflected inside the opacity slider.

When you’re done, just hit “Save”.

I have chosen an orange shade from the color scheme, then set the opacity to 0.45.

Working with background images and overlays

Let’s see how we can add a background image to a section, what do you say?

Did you notice that below the color option you can change the background type to image?

Let’s click on the default background image in order to change it. You will be taken to the Media Library to choose an image, or upload one.

Here’s the result:

Working with background gradients

Let’s switch now from the background image type to gradient.

If you click on the gradient you’ll see several ones available, both in Colibri free and PRO.

Now, you can decide whether the attachments should be fixed or scroll. I like it scroll, because it make me think of a parallax effect.

Overlays and parallax effect in Colibri

Now, with Colibri PRO you can toggle on the overlay and parallax options. I really love the parallax effect. It adds a twist to the page design.

Now, let’s toggle the overlay on.

Here you can:

• Choose the color of the background overlay,
• Adjust the opacity of the overlay. The scale is from 0 to 1.
• Choose a shape overlay,
• Change the overlay type. You can go with color, gradient, or shape only.

Working with video backgrounds

In Colibri PRO you can also add a video as a background. The process is the same as for background images. Remember, we’re still at the section level.

But we can change the background for a column as well. When you select a column you will recognize the same panel on the left. Let’s go to Style – Background – Background type and select video.

If you click o the default video, you will be able to go to the Media Library and pick another video, or upload one.

Don’t forget to save your changes!

Now, the Colibri theme together with the Colibri page builder are a great combo that you can use to build or sort of pages. They give you space to be creative and the tools to make a remarkable site.

But, if you’re using another theme, that has limitations when it comes to customizing backgrounds, you can overcome them using a plugin.

How to customize backgrounds using the Advanced WordPress Backgrounds plugin

This plugin is easy to use, and it comes packed with several background types, such as color, image, self hosted video, Youtube, and Vimeo.

It allows you to beautify your backgrounds with overlays an parallax effect as well.

It integrates well with Gutenberg as well, which is a plus.

Let’s install the AWB plugin.

• From the WordPress dashboard, go to Plugins -> Add New.
• Enter “AWB” as a keyword to find the plugin.
• Click on the “Install Now” button, then on “Activate”.

Now, let’s open a page, and find out how to add a background using the plugin.

• In the Classic Editor, go to the AWB icon from the toolbar.

• A popup will show up. Let’s configure it.
• Let’s select the background color type.
• Let’s pick a color by using the slider or by pasting an RGB color code.

You can set up margins and paddings for the background inside the “Styles” option.If you choose the image background type, you can enable the parallax option as well.

If you’re using the Default Editor, this plugin will install a dedicated block that you can use. But I won’t go further into these details, because I have another recommendation for you when it comes to the Gutenberg Editor.

For those of you that work in the latest WordPress experience, aka with blocks, here’s how you can make background changes.

Making WordPress background changes inside the Default Block Editor (Gutenberg)

Hate to break this to you, but inside the Default Editor you can’t do much styling. Everything is pretty basic. but, if you’re looking for a solution that gives more control over design in the block Editor, there’s an option at the end of this chapter. Stay tuned!

How to make WordPress background color changes for blocks

Now, the following blocks allow you to change the text and the background color:

• Paragraph
• Heading
• Button
• Cover
• Group
• Table
• Media & Text

I’m going to use the heading as our example. Let’s add one to a page.

1. Go to the canvas to the place where you want to insert the block. Hover between the existing blocks until you see a “+” sign. Click on the sign.
2. A block inserter will open now. Type “heading” to find the heading block, then select the block.
3. The inserted block looks like this.
4. Start typing the text for the heading.
5. Head over to the block editing panel on the right and go to “Color”.
6. Click on the tiny rectangle next to “Background”.
7. Pick a color.

And you’re done. You can repeat the flow for the rest of the blocks that allow backgrounds.

Some blocks also allow you to add gradients as a background (eg: the buttons block).

How to make WordPress background color changes for patterns

Now, let’s say you want to add a pattern to a page and then want to change its background color. How do you proceed? It’s as straight forward as above.

Patterns are predefined block layouts, available from the patterns tab of the block inserter. Now, I showed you above how to open up the block inserter by hovering between the block on a page. There’s a second method.

Look for the “+” sign in the upper-left, next to the WordPress logo.

It will open a block inserter that has a list of blocks and a list of patterns. Let’s go to “Patterns”. there are several categories that you can choose from: headers, footers, gallery, etc.

You can:

• click on a pattern to add it to the end of a page,
• drag a pattern and drop it wherever you want on the canvas.

I added a call to action.

Let’s change its background color.

Start by selecting the pattern.

The current call to action pattern is actually a group of blocks, containing:

• A paragraph – “Get in touch”,
• A heading – “Schedule a Visit”,
• A button – “Contact us”.

This is why when you look at the block editing panel on the right, you’ notice that you’re making edits to “Group”.

Now, go to Color -> Background to open up the color picker I showed you a bit earlier. You can pick a solid background color or a gradient.

I’m choosing one of the gradients. There’s a slider that I can use to adjust the luminosity of the gradient. I can also choose between the linear and radial types of backgrounds, as well as the angle for it. Here’s the result:

Don’t forget to save your design!

Now, I promised you that I have a better solution for you when it comes to have more control over design in the Default Editor.

Introducing Kubio: the only block-based solution that you need when working in Gutenberg.

Kubio is a website builder than works on top of Gutenberg.  It actually levels up the Block Editor, enriching it with functionalities that will end up giving you complete freedom over website design.

Kubio is compatible with all WordPress themes, but, at the end of the day, because of its flexibility, the theme won’t even matter.

Now, let’s see how you can work with Kubio and customize backgrounds.

Customizing WordPress Backgrounds Using Kubio (the Free Block-based Page Builder)

Inside the WordPress editor, there are some already existing blocks. You can use them from any page or post level. Kubio will add some extra Gutenberg blocks in the blocks panel. If you go to the “+” sign in the upper-left corner, you’ll see the block inserter. The default WordPress blocks have black icons, while the Kubio ones have blue & green icons. The Kubio blocks are shown first.

The moment you add any block, you will notice a block editing panel on the right-hand side, with three layers: Layout/Content, Style, and Advanced.

Background changes happen inside “Style” and “Advanced” for most of the blocks you want to use.

Now, we need to go to a page and edit it. The moment you install Kubio builder, when you hover over a page inside “All pages” you will see “Edit with  Kubio” written beneath. click on it to enter the Editor to customize the page.

Now I’m adding a section with two column to the page.

I use the “Add blank section button” at the bottom of the page, and select a two-column layout.

From the “+” signs I’m adding a heading block and a buttons block.

Now, here’s a re the steps for making background color changes for a section or block.

• Let’s start by changing the background for the whole section.  After selectin the section, let’s head over to the block editing panel on the right. Next, let’s go to Style -> Background -> Background color.

• Select the colored circle next to your option. A panel will open up that allows you to pick a color from the current color scheme or gradient from a color, pick a color from a slider, or just type in a desired color code in the “HEX” field. You can also switch to the RGB color mode if it suits you better from the dropdown arrow.

  You can also adjust the opacity of your color. The slider offers you values from 0 to 1, 1, meaning there’s no transparency. You can always reset the color to transparent when you select the reset button.

I chose a blue shade, with an opacity of 0.4.

The Kubio free plan allows you to use two background types: images and gradients. Inside the PRO plan you can also use video and slideshow as background.

Inside the PRO plans you can also use overlays and the parallax effect.

Now, did you notice that the options inside Kubio are a true upgrade to the Default Editor features?

If you are new to WordPress, Kubio can be the builder that you need, in order to create a stunning website, by drag and drop, while having complete design freedom. You can even choose between a free and paid plans.

Wrap up

This was a long one, I know.

Here’s what you’ve learned so far:

• How to make WordPress background changes inside the theme Customizer. We used two themes as examples. We discussed background colors, images, gradients, and more,
• How to work with the Advanced WordPress Backgrounds plugin
• How to customize backgrounds in the Default WordPress Editor,
• How to customize backgrounds using Kubio, a flexible and free block-based page builder that puts the Default Editor on steroids.

[sibwp_form id=1]

The post How to change background color in WordPress websites? [UPDATE 2022] appeared first on ColibriWP Blog.

Managed WordPress hosting revolves around offering clients a hands-off website management experience. In simple web hosting, the host typically provides you with a space on the server, along with standard site management tools and support. The proper maintenance and technical work at the backend of the site would be absent unless you accommodate your business with well and experienced IT and developers staff.

This maintenance work usually includes upgrading your website and configuring different themes and plugins, security enhancements, content updates, and making your website easily accessible and workable by the visitors.

To be frank, this work is not easy. It sounds like everything can be done with a few clicks, but the truth is that numerous tasks run on the backend that call for technical expertise and proper time and effort.

An average commercial website owner cannot do that alone, so they are left with two options. One, hire each person for a different job – for instance, web developer, graphic designer, content writer, etc. This option will cost you more and increase your headache because you will have to manage many people, sometimes at once.

Two, opt for managed WordPress hosting and get everything from one place at affordable rates.

This article will tell you everything about a premier managed WordPress hosting provider company, HostPapa.

HostPapa is one of the most rapidly growing companies to provide excellence in managed WordPress hosting. It provides an experience unique and flexible enough to attract many businesses.

With HostPapa, clients report to get A-grade security of their online businesses, but the speed and performance also visibly improve. When digging into HostPapa client reviews, you notice that they appreciate the 24/7 professional support, security, performance, and speed. But we’ll get into more details about these a bit later on.

In other words, transferring your current WordPress management headache to the professional team at HostPapa allows website owners to focus on something much more important, thinking about the future of their business.

Let’s look at the advanced features of HostPapa’s managed WordPress hosting to help you understand why HostPapa is the right host for you.

Advanced Features of Managed WordPress Hosting

HostPapa is one of the leading providers of managed WordPress hosting in the market because of one reason; it has an excellent team of professional individuals who are experienced in their respective fields and work at the backend to develop features and provisions to offer to their clients.

Some of the essential features of HostPapa’s managed WordPress hosting are listed below.

Performance

One of the significant aspects where your website visibly improves after switching to HostPapa managed WordPress hosting is performance. It upgrades your website with the world’s fastest content delivery network (CDN)

More than that, with Global Edge Hosting Locations, your website can be expanded to over 250 locations, promising to deliver your content to global visitors and providing the best experience anywhere in the world.

Apart from that, the managed WordPress hosting from HostPapa is powered by Cloudflare Enterprise, which has a CDN that copies your website all around the world, allowing top-to-bottom lightning-fast delivery of content.

Most search engines, such as Google, show websites that load faster first in search engine result pages (SERPs). With the enterprise-grade technology of HostPapa that eliminates slow loading times, you can boost your site at the preferred search engine.

Most importantly, your plugins and themes remain updated, while your WordPress Core is always to the latest. You can schedule automatic updates of such nature according to your preference.

Right out of the box, every site at HostPapa comes optimized for WordPress, including Smart Routing, Full Page Caching, image and file optimizations, size optimizations, and fast speed.

A sample of a customer noted after making the switch to HostPapa showed the following improvements:

The average time to the first byte was 233% faster, the average first input delay was 38% faster, and the average first contentful paint was 45% faster.

Maximum Uptime

HostPapa promises to provide your website global distribution with 99.9% uptime, which frankly means that your website will never be down, even when it is on peak traffic.

It doesn’t matter if the customer is on the phone or desktop; HostPapa allows record-time loading speeds, reducing the bounce rate on your site.

Handling WordPress users is not that easy. They want pages to load instantly. If they have to wait, they will go somewhere else. Not to mention, they have a lot of options. That is why you need to ensure that your speed doesn’t err. And that is where HostPapa guarantees to cut off your bounce rate and turn your site’s visitors into customers.

With a clear difference, managed WordPress hosting by HostPapa will make the search engine prioritize you over your competitors.

Effective Security

Security is one of the most critical factors in WordPress websites. Google, the most popular search engine, has admitted that security influences the SEO of your website. To secure their site, most users typically get an SSL certificate that puts a green lock on the address bar of your site. But HostPapa takes your website’s security far beyond an SSL certificate.

You don’t have to pay for additional security plugins. All the security provisions listed below will come in the package.

• Web Application Firewall

HostPapa’s managed WordPress hosting gives you two firewall protection for your website. First is the web application firewall (WAF) that every WordPress website will get hosting from HostPapa. The second is the local firewall that will scan all the incoming requests on your website to shield it from external threats and risks.

• Real-time Malware Scanning and Patching

Malicious incoming requests are stopped before they get too close. Managed WordPress hosting by HostPapa uses Cloudflare Enterprise WAF, which provides SQL injection prevention, DDoS protection, and protection from other WordPress security vulnerabilities.

• Daily Offsite Backups

One of the most significant losses that businesses can face is the loss of data, which eventually wastes your time, money, and effort as well in hopes of recovering it. That is why WordPress managed by HostPapa automatically makes backups every night. In case of failure, which is not likely to occur, you can recover your data with just a click.

• Website Analytics and Reporting

With HostPapa real-time WAF reporting, you can check every security event with a few clicks. Whatever security measures are being taken and however they are performing will be displayed to the website owner at all times. Website owners can stay updated on all the security events through 24/7 website analytics and reporting.

Professional Support

HostPapa has a team of professionals, PapaSquad, that’s always available to help their clients and visitors. They don’t keep you waiting whenever you have a query or concern.

The industry-leading support team can be contacted with any medium, including chat, email, or live support. The PapaSquad will be waiting on the other end all around the clock to serve you.

How to Set Up Your Site With HostPapa?

Follow the steps below to set your site up with HostPapa quickly.

First, sign up with HostPapa and get your credentials. Login to the HostPapa Dashboard with your Client ID and password.

As you scroll down the screen, you will see the list of tickets you have generated in the past. You won’t have any tickets if this is your first time logging into the HostPapa dashboard.

Simply go to “View All Tickets.” Then click on “Open New Ticket” and fill out the form displayed on the screen.

Fill the form with relevant information, and don’t forget to add the following things.

• In the subject line, mention that you would like to transfer your site to HostPapa from your current provider.

• Add the name of your current hosting provider.

• Add your website URL

• Add any additional information that you think would help the company

• Add any media or document files if necessary.

Click “Submit” when the form is filled.

After submitting your form, a member of the PapaSquad will contact you and begin transferring your website to HostPapa.

Pros and Cons for Managed WordPress Hosting with HostPapa

Every service has its pros and cons, so does managed WordPress hosting by HostPapa. These will help you decide whether you want HostPapa as your managed WordPress hosting provider or not.

Pros

• Enterprise-grade security with multiple firewalls, along with malware scanning and patching, daily offsite backups, and website analytics and reporting.

• Flashing speed and lightning-fast content delivery network (CDN).

• 99.9% website uptime with a high chance to be in top SERPs.

• Websites come optimized for Full Page Caching, Smart Routing, image and file optimizations, and size optimizations at flashing speed.

• Professional support via chat, email, or live support all around the clock.

• Easy and simple setup process.

Cons

• Managed WordPress hosting is a more enhanced service than standard hosting, so the cost will be more than what you pay for simple shared hosting.

• This type of hosting is for WordPress websites only.

• The service might limit specific plugins, especially those featured by third-party software. They tend to be a bit pricier, and the service doesn’t charge additional for plugins.

Conclusion

You must choose the right provider for managed WordPress hosting if you want your website to work optimally. And you can’t do that overnight. You would have to look into the wide range of providers to find the one that suits your needs.

We have made this process easier for you. We have provided you with all the details of one premier managed WordPress hosting provider and all the features they offer, along with its pros and cons.

Now, you can’t simply ignore 99.9% uptime and multiple WAF security for your website, right?

Managed WordPress Hosting by HostPapa is one of the best services for managed hosting. Apart from that, the pros visibly outrun the cons by a long shot. The decision is all yours.

The post Hosting Reviews: HostPapa appeared first on ColibriWP Blog.