A landing page is a standalone web page is going to be the first point of contact for visitors to your site, and as such it needs to effectively promote a specific product or service, capture contact information for lead generation, or present your brand in an engaging and accurate way.

In this post, we’ll guide you through the process of building a custom landing page on WordPress, covering everything from selecting a theme and creating a layout, to adding content and ongoing optimizations. Let’s jump in!

Step 1: Choose a Theme

The first step in building a custom landing page on WordPress is to choose a theme. WordPress has thousands of themes available, both free and paid, so it’s important to choose one that is suitable for your needs.

When selecting a theme, consider the following:

• The theme should be responsive, meaning it should look good on all devices (desktop, tablet, and mobile).

• The theme should be customizable, with plenty of options to change colors, fonts, and layout.

• The theme should be optimized for conversion, with elements such as a clear call-to-action and a form for capturing contact information.

Though any theme can be customized to the point that it’s unrecognizable when compared to the original template, the theme you choose in this first step can have a profound impact on future design decisions and the overall direction your landing page takes.

Think carefully about your choice here, taking cues from example projects and considering how the theme fits into “bigger picture” decisions from the business leadership.

Step 2: Create a Layout

Once you’ve chosen a theme, the next step is to create a layout for your landing page. This is where you will decide on the placement of elements such as the header, the main content area, and the footer.

With every decision you make regarding the layout of your landing page, it’s essential to consider whether or not a certain feature or design will benefit the visitor’s experience.

The final result can follow established norms or do something way outside the box, but should still prioritize certain principles of UX design. This means keeping your layout uncluttered and easy to understand, aesthetically pleasing and easy to navigate, and designed to move the visitor naturally towards a specific call to action.

Think of some of the competitor sites you admire most, and you’ll likely see that their layout is setup to check all these boxes in a way that delights their specific audience.

Just like your product, if the layout of your custom landing page is geared to delight your leads, you’ll be sure to maximize your conversions and enjoy higher-quality traffic.

Step 3: Add Great Content

Once you’ve created a layout, the next step is to add content to your landing page. This cover copywriting, adding images and videos, and curating any other content that’s necessary for your landing page to function.

When you’re filling your landing page with content, one of the easiest things to screw up is the copy. Remember to aim for copy that’s both compelling and persuasive, but also concise and scannable. Some studies suggest that modern humans have an average attention span of just 8 seconds, meaning your content has to be easily digestible and compatible with the skim-and-scan approach modern web users have to the written word.

Using bullet points and lists to break up long blocks of text, changing up font sizes to help visitors differentiate by importance, and using as few words as possible to communicate salient points can all contribute to a more effective page.

Once you’ve made your page as user-friendly as possible in these areas, the next important step is to think about optimizing it for SEO. You’ll likely be some of the way there as Google’s algorithms increasingly favor positive user experience.

“With Google using at least 200 different factors to assess where a website should rank for a specific search query, it’s understandable to not know where to start.” says KAU Media Group. Getting a free SEO audit from a trusted agency will highlight some of the more technical shortcomings and help get your wider SEO moving in the right direction.

Step 4: Test and Analyze

Once you’ve curated your content and optimized your landing page for conversion, it’s time to take a deep dive into how your visitors are interacting with your page and make calculated adjustments to improve its effectiveness.

Though there are plenty of best practices touted by web design specialists, no two audiences are exactly alike. Continuous analysis and improvement will separate your landing page from your more passive competitors.

There are a few key metrics that you should track when analyzing your landing page:

Bounce rate: This is the percentage of visitors who leave your site after viewing a single page and not taking any further action. A high bounce rate indicates that your landing page is not engaging or relevant to your visitors.

Conversion rate: This is the percentage of visitors who take a desired action on your page, such as filling out a form or making a purchase. A high conversion rate indicates that your landing page is performing effectively and moving your visitors down the funnel.

Time on page: This is the amount of time that visitors spend on your landing page. A high time on page indicates that your visitors are engaging with your content.

To test and analyze your landing page, you can use tools such as Google Analytics, Hotjar, and Optimizely. These tools will allow you to track and analyze key metrics, as well as run A/B tests to compare different versions of your landing page.

Step 5: Keep on Improving

After following the previous steps, you’ll have a functional landing page that’s ready to start bringing in qualified traffic. The fifth and final step in this process is to make a plan to continuously analyze interactions with your page, and make regular improvements based on your findings.

This could include things such as changing the layout, rewriting the copy, or adding new elements such as images or videos. Just like your business, your audience and modern consumer trends are always in a state of flux, and making sure you’re caught-up with these market shifts is essential to your continued success.

It’s important to remember that building a custom landing page is an ongoing process, and you should always be looking for ways to improve it. Keep testing and analyzing your landing page, and make adjustments as necessary to ensure that it is as effective as possible.

Final Thoughts…

By following the steps outlined in this post, you can create a landing page that is simple, visually appealing, and optimized for conversion.

Remember to keep your audience at the center of your decisions, and maintain a mindset of constant improvement, and your landing page is certain to make a splash with your unique audience!

The post How to Build Custom Landing Page on WordPress appeared first on ColibriWP Blog.

I began learning HTML, CSS, and Javascript. I pretty much enjoyed it. Until I ran into my first bugs. Later on, I was assigned a side project: an actual website. I was thrilled, my colleagues were there for me when I asked for help.

A few months later I was working on a pro-bono WordPress assignment for an NGO.

Let me state that we were in the travel market and I was doing marketing. But there was this culture of empowering people in learning new skills.

I am the DIY type and realized that the learning curve for learning code is far longer than expected. With WordPress, things worked differently.

Fast forward, in 2020, I ended up working for the Colibri makers, Colibri being a popular WordPress drag and drop page builder.

Things are so easy today with such tools. WordPress can really empower people to build a website from scratch in no time. And inspiration for websites is just…all over the internet.

Now, here are steps:

1. Choose your domain name
2. Acquire website hosting
3. Get familiar with the WordPress interface
4. Install a WordPress theme
5. Build your WordPress website
6. Install vital WordPress plugins

Because having some steps ain’t enough for having a supercalifragilisticexpialidocious website, I have one bonus for you at the end of the guide: UX design tips and tricks.

But before jumping into the topic, I want to shine a light on another subject. Won’t take long, I promise.

How much does a WordPress website cost?

If we are to make a cost breakdown for a WordPress website, here’s what we should include:

• Buying a domain: prices can begin at $15/year
• Hosting acquisition: prices start as low as $8/year
• WordPress theme. Now, depending on the levels of customization and how many features you want to include, you can start with $0. If you don’t want to settle with a basic website, yearly WordPress theme plans revolve around $70.
• WordPress plugins. Many of them are free of charge, but if you want advanced options, you’ll need to upgrade to a paying plan.

This means that the most basic website will start from $23/year. The moment you want advanced theme features, the cost will rise to about $100/year.

When you upgrade plugins, you might end up paying around $200-500 a year.

If you want something custom made, and you need to call in a WordPress developer, the costs can go over $1000 in the first year.

For online stores, the costs can increase significantly, because you need lots of functionalities, and performance and security are top of mind.

Now that we clear this out, it’s time to get to the bottom of our topic today: how to create a WordPress website in 2021.

1. Choose your domain name

Source: https://unsplash.com/photos/N1XUwR8iOf0

If you didn’t know this yet, the domain name is your business name or product name. Names can be really powerful, so don’t be hasty when choosing your domain name. If you feel you’re getting cold feet, don’t worry, there are tools out there that can help you out.

Tips and tricks for website domain name choosing

I was doing some brainstorming for a website domain for a business a while ago and realized that “Wazz” sounded quite interesting. It’s short, easy to remember. But the moment I googled it, well….let me say, I burst into laughter. In British slang, it meant “urination”. Really folks, do your research.

Later on, I wanted to name my photography website. I was analyzing “moonshine”. It felt so nice, romantic, fairytale-ish…except it wasn’t. It seems that it meant “ illicitly distilled or smuggled alcohol”.

So, make sure your naming is unique, memorable, and doesn’t have any weird meaning in English or another popular language (eg: Spanish) if you want to go international. If you’re a local business, you might skip this.

Now, let’s look a bit at a tiny checklist for choosing a domain name for your WordPress website:

• Make a list of relevant keywords for your business/product. Think of how the users should feel after using the product. Let’s say you have a skin product line based on natural ingredients. Your list might contain words such as “skin”, “care”, “safe”, “natural”, “beautiful”, “fresh” etc. Use a tool such as Namelix or Novanym to generate domain name ideas.
• Check the meaning of your newly found domain name. I always google it like this “{insert name here} meaning”. I will end up with dictionary explanations. Next, I go to Google images and see how it gets matched. Maybe there’s a singer with that name, a manga cartoon name, etc. If so, you’ll need to redo the process.
• Look for the domain name on Facebook or LinkedIn to see if there is a business page with that name.
• Check if there’s a website domain available for sale. For many sites, “.com” is the best top-level domain (TLD), followed by “.org”, “.net” or “.io”.
• Buy your domain name. You can do so via a domain registrar such as GoDaddy or via your hosting provider.

And this leads us to our next chapter.

2. Acquire website hosting

Every website you’ve ever visited is hosted on a server. This means you’ll need to acquire web hosting from a hosting provider.

Considering we’re building a WordPress website you can choose a hosting plan from WordPress.com or some other third-party hosting provider.

Let me clear something out before we proceed. There are wordpress.com and wordpress.org. The difference is that on WordPress.com you can host and build a website. From WordPress.org you usually acquire themes and plugins for your website, which is hosted elsewhere. You can compare the WordPres.com plans here.

This guide’s hypothesis is that you really want to build a brand and have full control over your website. This means you’ll go to a third-party hosting provider.

There are three main hosting services: shared hosting, VPS, and managed hosting. In the first situation server resources are split among more sites. In the long run, if these sites grow, and yours as well, you might encounter performance issues. You might realize that you need a VPS service or a managed hosting plan.

So, you need to have this in mind when choosing a hosting provider: which are your business goals?

If you go with VPS hosting, resources will still be shared, but you’ll gain some control over them. You’ll see improvements in terms of security and performance as well.

Managed hosting is kinda an “à la carte” service. You’ll get your own physical server all to yourself, and you’ll see a boost in performance and security.

Definitely, things can get more complicated than this, but I just wanted to paint the big picture of hosting.

Next, when you analyze the plans, take a closer look at:

• Pricing
• Storage
• Support
• Performance

Some hosting providers have some extra features packed such as domain offering (eg: Namecheap), website builder (eg: GoDaddy), e-commerce options, etc.

Now, you’ve probably noticed by now some websites using “HTTP” or “HTTPS”. What’s up with those?

HTTP is the basis of the modern web. It connects the browsers and servers, and functions on a request-response basis. Now, the extra “s” means the connection to the website is encrypted and the data shared with the website is secure.

Let’s say a user makes a payment on your website or logs into an account. The info the user will type in will be private. Safe from hacking. This is happening through the SSL technology, which stands for “Secure Sockets Layer.” For consumers, seeing “HTTPS” signals trust, because you can protect their data and privacy. This means that you’ll need to acquire an SSL certificate.

Make sure your chosen plan includes this as well.

The moment you acquire your hosting plan, and you’ve set up your login details, the only missing piece is going to be WordPress itself. Most of the hosting providers out there allow you to install WordPress from their dashboard/wizard. It’s all pretty intuitive.

How will you log in to your site? Easy peasy. Just type in the browser your website address and add to it “/wp-admin”, as seen below.

3. Get familiar with the WordPress interface

The WordPress dashboard has 9 sections. Let’s take a look at them.

WordPress settings

Inside this section, there are 7 more menu items. I’ll describe briefly the most important things that need to be done here.

• Under “General” you can set up the site title, tagline, URL, time zone, time & date format, and language.
• Under “Reading” you’ll “tell” WordPress which page serves as the homepage, and which one is your “blog”. This is an important step. You’ll also choose how many blog posts can show up on a page or if you want your website indexed by Google.
• Under “Discussion” you’re going to do the blog comments setup.
• Inside “Media” you can establish the maximum dimensions in pixels to use when adding an image to the Media Library.
• Inside ‘Permalinks” you’ll set up the format of your URLs.
• You can define your privacy policy pages inside “Privacy”.

The best way to approach the “Settings” panel is to enter all these items and fill in the missing info, just to make sure you don’t skip anything important. Things are pretty straightforward, so don’t get cold feet. All the setup can be done in less than 30 minutes.

WordPress pages and posts

What you need to know is that your content will go inside “pages” or “posts”. Here you’ll spend 95% of your time.

The “pages” are static. You can have a “homepage”, “services” page, “contact us” page, you get the point. Under posts you can have your latest blog articles, maybe your portfolio. These are dynamic pages because they automatically place your newest website content at the top.

When you select “Posts” from the dashboard, you will be able to create a post, visualize all posts, and manage tags and categories.

You can create a new post if you select “Add New” as seen above, or go to “All Posts” and then select “Add New”.

The same works for pages.
What you’ll see in your “All Pages” or “All Posts” are some default pages and posts deployed by your theme.

Now, how can you edit a post or a page?

When you hover over your default pages and posts you will see some options: edit, quick edit, trash, view. In the screenshot above there’s also “Edit in Colibri”. This is because we installed a plugin that allows you to customize pages using the Colibri WordPress builder (but we’ll talk a bit later about this).

WordPress media

All your media goes in here: images and videos. You can drag and drop them or upload them.

You can also add media from your post/page level. I’ll show you more on the topic later.

WordPress comments

The 4th dashboard section is called “Comments”. Here you can manage your posts’ comments. You’ll receive tons of spam comments that can be moved to spam or trash. You can approve the relevant ones.

The “Appearance” menu

At this level you can:

• Search for, install, and activate a theme (more details in the following chapter).
• Customize widgets to add blocks of content to your site’s sidebars, footers, and other areas.
• Define your WordPress website’s menus.
• Add a background image to your site.
• Edit the code of your theme inside “Theme Editor” (recommended only if you are a developer).

Now, the moment you activate certain plugins, you might see a few new menu items underneath “Appearance”. In this case, because we’ve activated the Skyline theme, we see an option to set it up under “SkylineWP Settings”. Each theme can come with its own setup.

“Install Plugins” is the other extra menu item added by the Skyline theme. In here you’ll see some plugin recommendations that work well with Skyline.

This leads us to our next menu item.

Plugins

There are lots of features that can’t be managed by theme only, such as SEO optimization, SEO audit, website security and back-up, tables, forms, e-commerce features, and more. Plugins are here to compensate for the lack of such options.

Here’s a tiny tutorial on how to install, activate, and deactivate plugins. It’s all intuitive and user-friendly.

Users

At this level, you will decide who has access to your website. You can give access to contributors, guest authors, editors and more, depending on your needs.

Tools

Under “Tools” you’ll have the option to import and export tools data to and from other content management systems (eg. Blogger).

There’s also a “Site health” section, which shows you critical information about your WordPress configuration and items that require your attention, with some advice.

Because we need to respect privacy policies, here you can export or erase personal data for your users.

And, with this, we’ve wrapped the WordPress dashboard chapter.

Let’s get to more interesting business.

4. How to install a WordPress theme

For this, you need to go to your WordPress admin dashboard, click “Appearance” from the left menu, then “Themes”.

Next, click on the “Add new” button.
You’ll see a bunch of templates showing up, and you can filter them by latest, featured, popularity…or by features.

We’re proud to say that our very own Mesmerize and Colibri themes are listed in the top 20 most popular WordPress themes.

The moment you choose a theme, click “Install”, then “Activate”.

You can also activate your WordPress theme if you head over back to Appearance->Themes.

The whole installation process is explained in our tutorial as well.

Now you’re ready to rock and roll!

via GIPHY

5. Build your WordPress website

In WordPress, your website design depends on your chosen theme. If you need something extra, well…you might need to find something to fill in the missing features.

Usually, every WordPress theme has 2 designs: one for the blog and one for the pages. Colors are limited, there are no special customizations. This means that at a certain time, plugins will come in handy.

Now, WordPress themes have a theme customizer with basic functionality. They are a good fit for those that don’t need any custom features and want to build their site really quickly. When in need, you can add your own CSS styles. Just make sure to pick a theme that has a layout that matches your own vision.

How can you customize a theme? Just head over to Appearance-> Customize.

From the left-hand side, you can choose what to modify: content, menu, and more. On the right-hand side, there’s your website preview. You can change the text in real-time, by clicking on the pencil icon.

On the other side of the story, we’ve got WordPress builders. They are plugins that help you build truly unique websites. You can alter your theme’s layout completely.

In our case, Skyline pre-installs such a builder called Colibri, we’re going to use it as an example.

Depending on the version of the theme, the free or paid one, you’ve got various elements to play with: from headers, specific page sections, to tinier components such as calls to action, tabs, counters, accordions, and more.

You can edit your theme as before, from Appearance-> Customize, or take the shortcut, as shown below.

What changes? You’ll get access to more features inside the Customizer.

Besides using the customizer, there’s another option for website customization in WordPress – the default editor. You can access it from the “Edit” option below every post and page. Also, the moment you add a new post or page, you’ll get straight inside the default editor (unless you have a builder activated).

So, in our next chapter we’ll go in-depth with how to:

1. Create a WordPress website using a WordPress page builder
2. Create a WordPress site using the default WordPress editor

A. How to build a WordPress website using free website builders

WordPress website builders help you take the WordPress Customizer to a whole new level. You will be able to customize everything: headers, page content, footers, navigation menus, global, individual styling, you name it! No design or coding skills needed!

It’s usually a drag and drop process. And you do not need to worry about the mobile design, the builders have the responsiveness aspect covered.

How to adjust website settings in the Customizer

Look at your left-hand side panel. Now scroll down to “General settings”.

Here’s where you can set up:

• Your website’s name.
• The overall color scheme and typography of your website.
• Templates for blog, header, and footer: what backgrounds to use, spacings, borders, shadows, etc.
• Spacing: inside buttons, columns, etc.
• Custom CSS Styling

How to create content in WordPress using builders

As mentioned before, if you want to create a new website page, head over to “Pages” and select “Add New”. You’ll be directed to the default WordPress editor where you’ll name your page. Next, select “Edit with Colibri”.

When you want to edit an existing WordPress page, just click “Edit in Colibri”.

How to add sections to your WordPress pages

Every “+” sign in the left-hand side panel opens up a window with blocks and components. You can scroll down until you find a design you fancy, or just type in a category. Here are the categories available in the Colibri builder: Hero Accent, About, Features, Content, Call To Action, Blog, Counters, Portfolio, Photo Gallery, Testimonials, Clients, Team, Contact, F.A.Q., and Pricing.

These are pre-defined templates, that will match the color scheme of your choice.
By selecting one of the blocks, by clicking on the “+” sign showing up on the block, the block will be positioned at the bottom of the page.

You can move them wherever you want, by dragging and dropping the section from the left-hand side panel.

There is also an option for “blank” blocks.

This means you can customize them however you see fit. In the end, you can even save your design for later use.

From the setting icon in the top right corner of every section you can adjust the number of items per row, you can reorder items, add new blocks, and even delete the whole section.

How to customize sections of your WordPress page

If you want to change the text in your sections, you can do it in-line, meaning inside the section itself, live.

In-line editing is not available for texts on buttons. They will be managed in the panel on the left.

If you want to change an image from your site, it’s all intuitive. Start by selecting your image.

You’ll be able to see it inside the panel on the left as well. Click on the image. You’ll see a new window popping up asking you to upload an image or select one from the library. If you choose to upload, you can do so by drag and drop.

Now, going back to the panel I’ve just mentioned, it has 3 main options: Layout, Style, and Advanced. Whenever you select a section from the website preview on the right, you’ll see the corresponding panel of the section.

Let’s take them one by one:

• Layout

Here you can adjust the width and height of the container, at the structure level. . Simply put, the container is the actual space a block occupies. Inside the container, you place the content (text, images).

You can also adjust the spacing of your content, and how close to the top or bottom it gets placed.

You can also add new rows inside your block.

• Style

At this level, you can customize the background of your block or add dividers. Dividers are visual cues that signalize when a website section ends or begins.

• Advanced

Here comes the fun, folks!

From typography and spacing to responsiveness, this is where you can get into the smallest website details.

You can create variations depending on the state of the element: normal or hover.

If you select a certain element inside a blog, let’s say a heading, the same panel will show up on the left.

This means you can go more granular with your editing.

Speaking of headings and more granular elements, these are named “components”. Let’s see how you can play with them.

How to use components in your WordPress site

The components refer to headings, sliders, dividers, buttons, carousels, pricing, and more. They can be accessed in the same way as blocks. They sit side by side and they have drag and drop functionality. Colibri offers 40 components.

As mentioned earlier, you can adjust them from the panel on the left, if you go to “layout”, “style”, or “advanced”.

Mobile responsiveness

In a multi-device world, it’s vital to have a fully responsive website. By default, Skyline is a mobile responsive theme. This means that its sections will adjust according to various devices. If you want to preview how your WordPress site looks like on tablets or mobile, you can do so, when playing with the controls in the bottom left.

You can also select to hide certain features on mobile, for example, inside the “advanced” options.

How to build a menu in the WordPress Customizer

Now, let’s say that you’ve designed your pages and you need to add them to a menu. In the panel on the right, you have all your sections, ordered from top to bottom, like on your site. The Footer is your last section. Below it, you’ll see some extra features.

Here you can create your menu.

After selecting “Create New Menu” you’ll get to name your menu and choose a placement for it (header, footer, pages, etc.).

When selecting “Next” you’ll be able to add your pages to the menu, from the “Add items” option. It can’t get easier than this.

How to work with WordPress widgets

I’ve already mentioned that widgets are blocks of content that you can add to your site’s sidebars, footers, and other areas.

When using a WordPress builder plugin, you’ll be using widgets only for your WordPress sidebars, because you have predesigned footer layouts.

Usually, sidebars are used by blog pages. Each theme has different widgets options, from search bars, recent posts, and comments, social widgets, to images and videos. Let’s say you want to show your Instagram profile in a sidebar, there’s an Instagram WordPress widget for that.

One of my favorite widgets is the one that allows for custom HTML editing. I find it really powerful.

This being said, you’re kinda done. Congrats, your WordPress site is up and running!

Now, let’s check the other method for building sites in WordPress.

B. How to build a WordPress website using the default WordPress editor (Gutenberg)

I’m going to make this really quick. This editor is still new in WordPress (it’s the default WordPress editor since December 2018), but it’s evolving continuously thanks to community contribution.

The classic WordPress editor looked like this:

Now we have:

Now, what you need to know is that not every theme is compatible with this new editor. You’ll have to find one Gutenberg-ready.

Layout design with the default WordPress editor is limited. It’s also based on blocks. Now, as you’ve probably found out in the previous chapter, blocks can be pretty much everything: headings, images, buttons, videos, etc.

Now, why I’m not insisting on the topic: if you check for Gutenberg reviews, the most recent are 1-star reviews. It’s not a good experience. Even if it’s already been 2 years from the launch, and many updates in the middle, this is still in its infancy. WordPress relies now on the community to create new blocks so that the editing experience can evolve.

Right now the tool behaves like a text editor, with low power on the styling side.

There are tools out there such as Kadence, that can help you out, but we’re not there yet.

6. Install vital WordPress plugins

The WordPress ecosystem is made of themes and plugins

There are thousands of WordPress plugins available out there that can extend the functionality or add new features to your website.

This is a very short tutorial on how to install a plugin.

Our plugin recommendations

Now, let’s get a bit into another topic: page speed.

Both your visitors and Google care a lot about your site speed.

Why Google?

Speed is an important factor that’s taking into consideration when ranking organically, meaning here:

Why is site speed bad for the users, and ultimately you?
Well, if you offer them a bad experience, they might not engage with your offer, or might not even come back anytime soon.

According to 2018 research by Google, 53% of mobile users leave a site that takes longer than 3 seconds to load (Holy Moly!).

And take a look at that!

How does page load influence mobile visitors (note: bounce meaning leaving the site)?
.
So, how can you fix this, and also improve your overall website performance so that you won’t receive a thumbs down from both your users and Google?

I’ve picked 2 laid back solutions (there are many more out there, but pretty technical).

● Optimize images
Your website images shouldn’t be uploaded in their original size. Also, try going with PNGs instead of JPEGs (they have fewer colors).
Smush is our preferred WordPress plugin for image compression. You won’t be seeing any visible drop in quality and your page speed will be optimized.

● Caching
Simply put, cache is providing temporary storage for content to be accessed later. Your website loads differently if accessed for the first time or the 5th time by the same visitor.

Why is that?
When you’re dealing with browser caching, your browser saves a copy of files from a website on the user’s device
(hard-drive, mobile phone). When a website is cached, the browser only needs to load new or updated pieces of a page, and won’t need to initiate a new server request. The same thing happens if you click the “back” button, your browser will display the page from cache. This is
also super helpful when dealing with a slow Internet connection, the pages will load quickly.

Wanna understand more about how caching works? Read on here.

The tools we recommend here are:
➔ W3 Total Cache (W3TC) improves the SEO and user experience of your site by increasing website performance and reducing load times.
➔ Hummingbird. This has some extra features as well that we love, like the compression of Javascript, HTML & CSS files.

Now, how can you check how fast your website is loading?
Google has just the tool to help you with that, and also provides some fixing ideas.

Bonus: UX design tips and tricks

Remember me saying the “sky’s the limit” with the WordPress page builders?

Well…there’s always a “but”. When you design a website you should always have in mind your
audience, or the buyer personas (as the marketers like to say). You need to provide them a great experience on your website, that’s what UX stands for (user-experience).

Now, for that, there are certain rules you should follow in order to provide a frictionless user experience.

Meet the users’ needs
Users on a website don’t want to think too much. They need useful information that can be skimmed and understood with ease. They don’t need an experience consisting of many clicks or much back and forth.

People look for instant gratification: finding what they need fast and with ease. If this is not happening on your website, they’ll look for another one.

Visual hierarchy

Not all website parts are treated equally, some are more important than others (forms, buttons, headline, value proposition, etc.).

Where would you like your user to land on? Where do you want him to click?

Make use of visual cues to help him achieve what you want. All the elements on the pages should behave as a tour guide.

Researchers have found out that users that read from left to right scan websites in a Z-shaped pattern.

This means that’s where you should direct your most important information.

Easy navigation

You should keep the navigation bar simple, don’t go into too many options. You might end up with a paradox choice situation when users get overwhelmed with the possibilities.

Pages should be internally linked to other relevant pages so that the navigation is smooth, and the user shouldn’t click “back” many times to get to previous pages.

Make use of white space. White space allows information to be organized in digestible content areas. This will make users feel more comfortable and not overwhelmed by loads of data.

Same color scheme (consistency)

Avoid super dark or super intense colors on your website. They might send users away. You can use stronger colors to highlight important aspects of your website.

Use colors that are equally balanced. Here‘s some inspiration.

And one more thing before moving on to the next UX design principle. Colors have meanings around the world, they are connected to various emotions. This infographic template will shine a light on the topic.

Use effective writing

Don’t use exaggerated and clickbait copy. Write with common sense, in a natural language, don’t use jargon (not everyone is familiar with certain technical words).

Use max. 3 typefaces in a maximum of 3 point sizes — a maximum of 18 words or 50-80 characters per line of text as Smashing Magazine recommends.

Use social proof

Why should I trust you, your business, or your products?
We, humans, are social creatures. We live in communities, we have friends and family. They can be our influencers. We care a lot about their opinion.
.
Let me list out some examples for you:
● Ratings and reviews

● Testimonials

● No. of clients (“you’re in good company”).

● Clients’ logos

● Case studies backed up by results

● Press featuring and awards

Also, if you want to find out about the latest design trends, the Coastal Creative folks did a marvelous infographic on the topic.

Conclusions

We can call it a wrap don’t you think?

We wanted to go the short way, not to overwhelm you with information. But, in the end, the devil’s in the details. We just gave you the helicopter view.

The thing is that you can have your website up and running in less than 2 hours. But, the more features, pages, content you want to add, the longer it will take. And don’t you ever neglect the latest web design trends.

One last thing though, if you are the DIY type, you definitely need to take our Colibri builder for a spin!

Here’s a video on how to build a WordPress website page using tons of features.

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 Build a WordPress Website in 2021 in 6 steps. An A to Z Guide appeared first on ColibriWP Blog.

(there’s always a but, isn’t it?)

they can have some downsides.

I’m trying to be objective here, so I’m going to present the good, the bad, and the ugly of WordPress sliders. In the end, you decide whether you’re a match or not.

In this article I’m going to talk about:

1. Website sliders: why the love, why the hate?
2. What can you include in your WordPress slider?
3. Common sliders for B2B websites
4. Common sliders for B2C websites
5. How to build WordPress Sliders
6. 2 WordPress Slider plugin recommendations
7. Best case practices for sliders’ use
8. Conclusion

Let’s get going!

Website sliders: why the love, why the hate?

This debate hasn’t been settled yet. Somehow I understand the arguments from both sides.

Interestingly, some tests have been made to prove the usefulness of sliders. The guys at ConversionXL are totally against them, saying that they are hurting conversion rates. As much as I would love the guys, I would have to disagree. There are more nuances to the topic. In e-commerce, they’re all over the place (imagine not having sliders in online stores, it could be a total mess). 

There’s this thing that we love patterns, and that we should use sliders where people would expect one. Now, here’s the catch. This expectation is trained. Like we were trained to recognize and use the hamburger menu. Patterns are given birth to. Right now, whenever we see these signs

Source: HBO

we know there’s a slider and we might end up engaging with them (but there are many factors involved here: copy, imagery, positioning…). 

At the end of the day, you shouldn’t pick a side. Just do an A/B test and decide whether a slider works in a specific place. If it doesn’t, it shouldn’t mean that there’s something wrong with the slider, but maybe there’s something wrong with the copy, the position, the offering…

What can you include in your WordPress slider?

This can be a long list. I’m going to approach it from the B2B and B2C perspectives. Let’s see.

Common sliders for B2B websites

• Social proof

B2B businesses need a lot of social proof. Why so? Oftentimes the sales cycle can be as long as a year.  B2B companies need to prove that they are trustworthy, that they have proper knowledge, that they can solve the pain points of their persona. They need to prove that their solutions helped others and so on. 

From testimonials, product reviews, case studies, logos of companies they’ve worked with, all of these can be included in sliders.

Source: Netguru

Source: unbounce.com

• Product features can be included in sliders as well. When you combine them with beautiful visuals, you can wow your visitors.

Source: semrush.com

• Onboarding steps or timelines. These are a match for SaaS products or apps. You can use a slider to help explain, simplify or organize some processes.

Source: https://kpis.studio/

Common sliders for B2C websites

• Product/services images. When a product can be represented visually through photos and videos, then you can show it off via sliders. These sliders are usually encountered in the fashion, travel, or food industries.

Source: booking.com

Source: Ikea.com

• Main offers/season’s specials. Huge online retailers use such sliders on their homepage to show off some latest trends, special promotions, product categories, and so on.  

Source: alibaba.com

• Similar products recommendations

Source: Amazon

Now, the moment you figure out what kind of website slider to use, what you want to include in your slider, and where to insert it, we can go to the next step: building the slider.

How to build WordPress Sliders 

WordPress doesn’t offer by default a built-in option for sliders. This is a feature that can be found in many of the WordPress themes out there (oftentimes it is a paid feature). If your theme has such a feature, you will be able to customize the slider under Appearance -> Customizer.

Now, I’m going to show you how to create a WordPress slider using the Colibri Pro theme and the Colibri WordPress builder.

Step 1: From your WordPress Dashboard, go to Appearance -> Customizer.

Step 2: Click on the “+” and choose from the new window that pops up “Components”. Select a slider or a carousel. In my example, I will go with the carousel.

Step 3: Drag the carousel and drop it where you want on your web page.

Step 4: On the left-hand side you will find a menu that will allow you to customize the carousel. When you select the whole component, from the “Content” menu you can:

• Add new carousel items
• Change the alignment of your carousel items, switch on or off the autoplay, under the “Carousel options”
• Set up navigation: arrow-shaped or dot-shaped, under “Navigation options”
• Customize transition
• Adjust the spacing between carousel items, or the inner padding

From the Advanced menu, you can:

• Ensure that the carousel is responsive
• Add effects
• Change background, typography, borders, and more

both in normal and hover state.

When you select an element of the carousel: image, title, icon, you will be able to customize all of them. 

More details, in this previous article of ours on how to use the ColibriWP slider feature.

Happy customizing!

Now, the second method for building a WordPress slider is through plugins. 

2 WordPress Slider plugin recommendations

If you don’t already know how to install and activate a plugin, this tutorial will show you how to do it.

Now, if you go to wordpress.org, you can search for slider plugins easily. You just have to go to the “Plugins” menu item, and type “slider” in the search bar.

Source: WordPress.org

Tens of plugins will show up. To make up your mind, always look at the reviews, at their popularity, and also if they are compatible with the latest WordPress version.

Now, let’s get going with the recommendations.

As seen in the screenshot above, Smart Slider 3 and MetaSlider are the most popular WordPress slider plugins out there.

1. MetaSlider

Source: https://wordpress.org/plugins/ml-slider/

MetaSlider has over 800k+ active installs. We love it because:

• It integrates with Unsplash, our favorite free images database
• It’s Gutenberg-ready, meaning that it can work in the Gutenberg editor as well
• It works by drag and drop
• It offers SEO optimization options through SEO fields.

2. Smart Slider 3

Source: https://wordpress.org/plugins/smart-slider-3/

Smart Slider 3 has more than 600k+ active installs. We like it because:

• It’s jam-packed with pre-made slides, saving you the trouble of reinventing the wheel
• It’s fully mobile responsive
• Has SEO options

Best case practices for sliders’ use

Going back to the beginning of our topic, don’t forget to:

• Use carousels where people would expect one, else you will create a bad user experience.
• Keep in mind that sliders are not about showing off someone’s design skills, but they will need to bring value for the website visitor
• Don’t make your slider look like ads, because we got used to skipping ads
• DON’T USE AUTOPLAY because it annoys the users. Your website visitors should be in control, give them the option to navigate freely through your carousel or slider.
• Make sure your arrow or dot-navigation has proper contrast so that it is obvious for the user that that’s a slider he’s seeing.
• Don’t use sliders that might distract visitors from the page’s purpose, you don’t want the slider to create confusion.
• Check if your slider is slowing down your website
• Make sure that the slider looks good on the most popular devices out there.

Conclusion

Now that you know the pros and cons of WordPress sliders, you can make a wise choice for your own website. 

The building part is the easiest one. The proper theme or plugin can do the trick, you won’t be needing any coding skills. 

If you wanna get fancier, there’s always the option for custom CSS styling.

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 WordPress Sliders: a Zoom In. How to Build Them, Tips, Tricks and Tools appeared first on ColibriWP Blog.

In the following lines, we’ll note the most important web design trends that will dominate the websites’ landscape this year. Keep reading and stay informed:

1. Minimalist web design

In 2020, WordPress web design trends integrate the principles of minimalism. That is, the fewer elements in web pages, the better they’ll stand out and capture users’ attention.

But what does minimalism mean, after all?

• Extensive use of white space (aka negative space). Elements in the web page are at distance from one another, which facilitates readers’ concentration and makes the message better get through to website visitors.
• Limited color palette that leaves room for the content to express itself onto the page. Color is a means to emphasize content, and has the major role to bring that content to the front.
• Use no more than 2 or 3 colors – as stated above, the color palette is reduced to the minimum: main color, accent color and some other nuances.
• Colourful minimalism – the simplistic pattern of modern web design is also characterized by colourful minimalism. As elements in a website page are spread at distance from one another, it’s recommended you pay special attention to the few colors you use in the website. This can fall under the category of colourful minimalism.
• Glowing and vivid colors in the color scheme – if you choose a few colors in the color scheme, it’s best to consider glowing and vivid colors. These will make a site remarkable and easy to remember, through its originality.

Examples of minimalism in web design:

https://uv-way.com/

Besides the title and the menu items, the homepage of this site has a video background that doesn’t have many elements displayed over it.

https://toke.com.br/

This website manages to bring creativity into minimalism, by showing off the topic of the site through an object/a symbol/a unique graphic representation.

More than keep design to minimal elements, it’s important to take into account the use of contextual technology to make customized experiences for every user. This ensures one-2-one communication with every visitor of the website, which makes it more efficient, as it addresses each user independently.

2. More interaction with the website

Interactivity plays a major role in creating user engagement. This year, WordPress web design trends focus on increasing interaction of users with the website. As a result, users will be more attentive to the website message, they’ll understand it clearly, and they’ll remember it more easily.

Interactions can fall under one of these categories:

• Macro-interactions – such interactions refer to i.e. AI, virtual experiences, 3D views, Call-to-Action buttons, etc.
• Micro-interactions – hover effects, on-click effects, etc.

Besides CTA buttons, interaction supposes the presence of elements that users can change the aspect and access the functionality of, for an immersive experience with the website.

Also, 2020 means accessibility of websites, even to persons with disabilities. That supposes a typography that can be adjusted so people with disabilities can read and get the message.

Example of interactive websites:

http://pierrehermenicolasbuffe.com/

http://andeinerseite.video/

Interaction with the website also allows for collecting data from users. Such data can be used to adapt web design to what actually works. Based on information collected from past visitors of the website, you can adjust a website design, so it meets visitors’ expectations and needs.

3. A focus on micro-interactions

Micro-interactions have the purpose of creating a moment that is engaging, welcoming and human.

Without being spectacular, micro-interactions form a path users will follow in visiting a website. Micro-interactions accompany visitors in exploring the website pages, and significantly mark their route in discovering the website elements.

4. Asymmetrical layouts

This year, asymmetrical layouts will be in vogue, part and parcel of the WordPress web design trends. Asymmetry has its own balance, and it creates visual strain. It is created by a graphic design that is off-centred and has mismatched disparate elements. Its role is to compel users to better see the elements in the website pages, and focus their attention onto what’s important in the website message.

Asymmetry is synonym with modern: it breaks users’ expectations, which claims more attention from them. That’s why an asymmetrical layout is modern. And that’s why modern is useful. That’s why useful is an efficient site which communicates with readers in the best possible way.

Example of website with asymmetrical layout:

https://nourisheats.co/

https://homesociete.ca/

The asymmetrical layouts can fall under one of the following categories:

• Slightly asymmetric
• Strongly asymmetric
• Some symmetry that needs to have a visual balance

Slightly asymmetric web design means there’s a small deviation of items from the center and the visual balance. It puts into question the perfect visual balance and proposes a new way to see things, from a slightly different perspective.

Strongly asymmetric design means highly visible deviations from the visual center and a bold proposition to users to look differently, and see new perspectives. This asymmetry type is good to use for companies that have a major unique selling proposition and need to state it clearly, plainly, with all the website design.

As already mentioned, regardless of the asymmetry type, there has to be some symmetry for visual balance, so user experience be not entirely dislocated from common habits. The asymmetry shouldn’t shock users to the point they get reluctant as to exploring the website further on.

5. Non-traditional scrolling

This is the year of using non-traditional scrolling.

New versions are:

• Long scrolling
• Fixed long scrolling
• Infinite scrolling
• Parallax scrolling

Long-scrolling – this technique implies that users scroll down the page, which means that users can explore as much content as possible. Journal websites are especially appropriate for applying long scrolling.

Fixed long scrolling – it creates the impression of a scroll within a scroll. The top navigation bar is set to sticky, while for the rest of the page, users can scroll down and explore the content within the page. Fixed scrolling allows for clear signals in the menu as to where users are in the website, and how they can navigate further on.

Infinite scrolling – this means users will continuously scroll down the website pages, without reaching an end of the page. Content is constantly uploaded, and visitors will keep seeing new sections with new elements.

Parallax Scrolling – this is a newer technique that will persist in 2020, as well. Parallax effects mean that the background of the page moves at a slower rate than the foreground, and the visitor who scrolls down the page is in full control of the effect.

These 4 types of scrolling will be prevalent in web design, especially for one-page websites that need scrolling for visitors’ exploration of the page content.

Here’s an example of website with parallax scrolling:

6. Video background

A trend that has already started in 2019, but will be continued in 2020, is the use of video backgrounds for websites. In fact, video backgrounds give amplitude to the web design, and create a more immersive experience that’ll become memorable for visitors. Videos placed in the background require space and inscribe dynamism into the page. Most often, video backgrounds are used for the homepage header, which guarantees maximal effect of videos.

Example of website with video background:

The role of a video background is to take visitors beneath text and current web design elements, and into the reality that best defines a company. That’s why it has a special effect upon readers, and interests them much into the website content further on.

7. Big typography

Big typography is one of the major aspects of 2020 web design. Typography helps improve readability of the text, and the mere legibility of the text content.

This year, bold typography will be preferred for titles and subtitles, in homepages and in other pages you want to bring to the forefront.

It might be hand-written letters or some other fancy typography, modern styles and easy to read or fun letters.

Here are some examples of big and bold typography:

Harabara

Heavy and Sans Serif

Playful typography

High contrast

Source: https://www.hongkiat.com/blog/extra-bold-fonts/

Bold typography plays a key role in making the main message stand out. By having remarkable dimensions, contrasting colors and unusual design, bold typography catches users’ attention and draws their eyes towards the main part of the website content. Also, typography may support some variations, so letters of a certain typeface alternate with letters of a different typeface and are integrated in a harmonious presentation as a whole.

Another example of unusual typography:

8. Mobile first design

This technique implies designing first for mobile devices, and only after that adapting to desktop. Design has to be responsive out of the box, as the most of searches and website visits are made from mobile devices.

Hence, this implies a hamburger menu, adaptable images sizes and font sizes, long scrolling, etc.

It supposes delivering the right user experience to the right device, by starting to design from the smallest device and then adapting to larger screens.

9. Vertical split design

Examples of websites with a vertical split design:

http://fillet.com.br/

http://kirichik.com/

http://special.bose.eu/en/

Vertical split continues to be part of the new WordPress web design trends. It refers to dividing the screen in two, on a vertical axis. This might have variations, such as that in the latest example, where the split is made on a diagonal axis. The vertical split is deemed to provide contrast, and present the screen in different ways and colors. This technique by itself is ultra-modern and questions the web design status quo. It invites readers to view pages in a different way, and follow vertical directions in browsing the page content. Usually, the vertical split technique also implies the use of highly contrasting colors, that capture users’ attention and invites them to explore the page further on.

10. Use color mindfully to express certain emotions

This year will be full of challenges as to the right, shocking or harmonious choice of colors.

For ample details about the use of colors, you can check this resource on Website Color Schemes.

Through the wise use of colors, you appeal to people’s emotions, which makes them more inclined to buy your products or services. For instance, blue indicates professionalism, and is mainly used for business websites. Red is used as an imperative to buy, while orange is the color of youth and creativity. And the list can continue…

11. Hand-drawn titles (headings, subheadings) + hand-drawn icons

Hand-drawn letters and icons bring a human note to the website. Practically, they humanise the website pages and create a tighter connection with readers. They are in trend this year, putting a focus on authentic communication with the website visitors.

Examples of hand-written text:

Another example of handwritten text:

You can find a complete guide on creating hand-written typography by checking this resource. And you can create your own hand-written style and address your readers in the tonality you find most appropriate.

Also, you can test two or more such styles, and see which drives the most conversions.

12. Dark mode for some sites

Example 1

Example 2

In 2020, dark mode will inspire many web designers. White text placed onto a dark background might reduce eye strain and be easier to read. Also, it captures users’ attention more easily and intrigues readers to better explore the website pages.

Also, dark modes don’t allow for common web designs and placement of items in the pages. They invite to experimentation, and new approaches to website design. This is due to the fact that dark modes are new into the web design landscape, hence the need for new site designs as well.

13. Mixing photography with graphics

This year, the WordPress web design trends include interesting combinations of photography with graphics. Such a mix of photography and graphics can go a long way portraying the identity of the company, in an unusual way.

Here’s an example of photography and graphics mix:

Photography is useful as it shows clients will interact with real humans, while graphics add creativity, playfulness into the images. This mix transmits confidence, but in an informal way. Photography and graphics combined communicate at an informal level with people that want to find out real interest in their needs.

We hope this article has inspired you in creating beautiful designs in accordance with the 2020 trends. As you experiment with the above-mentioned techniques, you’ll assess their effectiveness and you’ll surely watch your website grow in traffic and conversions.

The post Which Are the Top-Rated WordPress Web Design Trends for 2020? appeared first on ColibriWP Blog.