New Section On Our Website: WordPress Online Courses!

Published in WordPress.

In Nelio we’ve launched a new section on our website, Nelio Academy, so you can learn new WordPress things with our online courses.

Content Creation With The Gutenberg Block Editor

As expected, the first course we’ve created for you is about Gutenberg: Content creation with the WordPress block editor, Gutenberg. In this first course you will learn how to use and master the new WordPress editor. This course is in Spanish, but we plan to create an English version too.

The new WordPress editor, Gutenberg, comes installed by default from WordPress 5.0 version. It is an editor that radically changes the making of posts and pages of a website, being much closer to other visual editors. Now, a post or page is made up of content blocks. You have blocks for paragraphs, for images, for headers, for appointments, and much more.

This course is not intended to be a Gutenberg user manual. Its aim is to teach how to create new posts and web pages in a practical and efficient way. And that’s why over 2 hours of videos, divided into 20 lessons, you’ll learn to master WordPress editor environment. But you’ll also learn many details of the process we follow in Nelio when we write a new post or create a new page.

You will see how, thanks to the possibilities offered by this editor, you can design a large number of elements or sections that you can find in our web pages or any other professional website. You no longer need to be a designer to layout your content with skill and style. You can do it yourself with the catalogue of content blocks that WordPress includes by default.

The course is divided into 3 parts:

  • Introduction
  • Writing posts
  • Designing pages

Introduction

In the first part we will see the novelties that this editor brings us and the differences between the classic editor and the block editor. Get used to its new environment, its interface, and where to find the different toolbars, and learn the basic about the information and properties of the different blocks you can use.

Post Writing

Next we will see the process of writing a post, to which we will add the most common elements of blog posts: headings, images, paragraphs, lists, quotes, verses or videos. You’ll also learn tricks to master the editor and gain efficiency.

Also, as you know, before publishing any post you must make sure that you don’t forget the information needed to improve search engine rankings and its promotion on social networks. For that reason, we also explain how the new editor integrates with Yoast and Nelio plugins. And so you become familiar with the integration of any plugin with the editor too.

Pages Design

In page design lessons, you’ll learn the basic process to follow before you start creating any page of your website. And we’ll continue to see another new set of blocks that are particularly useful in page design: cover, media and text block, columns, design elements, image gallery, and widgets. For each of them, you will see practical and real examples that will serve as an idea on how to create new sections in your web pages. And you’ll even learn how to combine blocks in a way that nobody has ever explained before, opening a new range of design possibilities.

Website section
Section of web page created in the course with the blocks available in Gutenberg by default.

And of course, we will finish the design of the pages learning how to create and use reusable blocks, a feature that comes very handy to gain efficiency in the design of new pages.

Lessons

Here is the list of lessons that make up the course:

Lessons of the course
Lessons of the content creation course with the WordPress editor.

All the lessons show practical and real examples for immediate application on your website.

If you speak Spanish and want to get started, signup for the course that you will surely like!

Featured image of JESHOOTS.COM in Unsplash.

PoorNot badGoodGreatExcellent (No Ratings Yet)
Loading...

Do You Need a 100% Score in Google PageSpeed Insights?

Published in WordPress.

We don’t like to wait. If people have to wait when visiting your website, they’ll get tired of it and will go visit another one. Your web loading fast is an essential requirement nowadays. But how can we know if a website is slow or fast?

I know, this question seems a bit stupid. You can know whether a web is fast or slow by measuring its loading time, duh. The difficult thing is to know if the value resulting from this analysis can be classified as “slow” or “fast”. Waiting 2 seconds may not be a problem, but if my website loads in half the time, that would be absolutely better, wouldn’t it? Specially if you take into account things like your website might only take 2 seconds to load on your Internet connection, but what about those who hve slow connections?

Is your website too slow, or is its speed already good?
Is your website too slow, or is its speed already good?

All this is a more complex problem than it may seem at first. In order to establish comparable measures, there are evaluators of the optimization level of the websites, such as Google PageSpeed Insights or GTMetrix, just to mention a few.

These evaluators are able to analyze a web page and give it a grade on a scale of 0 to 100 depending on its level of optimization. In addition, they detect the characteristics of the web and indicate suggestions that we can carry out to improve its grade and, supposedly, its speed.

However, seeking perfection can be counterproductive. Searching for excellence in Google PageSpeed Insights can neglect other aspects of your website that are also important, such as the user experience.

Searching for Excellence in Google PageSpeed Insights

We have recently rewritten the theme of our website from scratch and have transformed all of our pages using blocks from the new WordPress block editor. It has been an exercise to better understand the characteristics of the block editor and also see their shortcomings, learning by doing.

Taking advantage of this task, we have analyzed our website with Google PageSpeed Insights to try to improve its final grade and get as close as possible to the desired 100. Next we will see some of the points that we have been improving thanks to the indications of Google and our conclusions about it.

Use an appropriate size for the images

We have already discussed this topic in our blog. Remember that you should try to use image sizes compatible with what your theme needs. Don’t use giant images because they are not necessary.

If Google PageSpeed Insights complains about your images, the good thing is that it will tell you what images cause the problems so you can fix them. It is a laborious work to do but whose results have a direct impact in the loading time of your web.

Postpone the load of images that do not appear on the screen

For all those images of your page that to be seen the visitor has to scroll down, what is recommended is to apply lazy loading.

What you get by using lazy loading is that you only ask the server for an image when the visitor scrolls and needs to see it. In this way we avoid overloading the server in the initial request and reduce time, making the web load faster. I recommend you this article about it. If you want to use a plugin for lazy loading, maybe this one will help you.

In our case, the SiteGround optimization plugin includes lazy loading, so we didn’t need anything else to activate this technique on our website.

Make sure the text remains visible while the web font is loading

If you use Google Webfonts, as we do, it is ironic to check how the script that Google gives you to load the fonts is detected by Google PageSpeed Insights as improvable.

According to Google, you should use the CSS font-display in @font-face for users to see the text while loading the web font. In particular, you must put font-display:swap in the loading of the fonts so that the browser does not block the rendering of the text until the font is available. You can download Google fonts and import them directly using font-display as explained here.

With this the visitor is able to see the text from the beginning, even if the specific font by Google is not loaded. At the moment in which the font becomes available, the browser will apply it to the text, transforming its style to the desired one.

Remove resources that block rendering

CSS styles and JavaScript scripts are increasingly used to change the content design and make it dynamic, respectively.

If we load the CSS and JS in the <header> of the web, the normal thing is that the content rendering is blocked and the web doesn’t load contents until the styles and JavaScript files are processed.

One option to avoid this is to move these files to the <footer> of the web. By doing this, all the content that goes in the <body> will load and render first, without being blocked.

Also it is recommended to use the attributes defer and async in JavaScript scripts so that the load is deferred or asynchronously done.

Another aspect that helps to improve the final score of Google PageSpeed Insights is the fact of minifying and compressing the CSS and JS files, as well as combining them in a single CSS and JS file respectively. However, be very careful with the combination because if you combine them in an incorrect order you can suffer flaws in the styles and break the execution of the JavaScript code.

You can use this plugin to get better results, but again, use it carefully.

Downsides of Improving the Speed of Your Website

After applying solutions to the suggestions proposed by Google using the Google PageSpeed Insights reports, the loading time of the website is reduced. However, this has a price that it is not clear if we want to pay.

One of the side effects of lightening our website is that the user experience a visitor gets might not be as good as it was. Let me further elaborate …

For the content of our website to be rendered as soon as possible in the browser of our visitors, we have postponed the loading of JavaScripts and CSS styles in the footer of our web (they have gone from the header to the footer). And we have also allowed the text to load before having the web font.

All this causes the visitor to quickly see the content of the web without style. Which means that they see everything quite flat and ugly. In addition, they will notice how the font of the text is changed when it is already available. Visitors will also see some flickering when the CSS and JavaScript styles are applied and executed.

GTMetrix Results.
GTMetrix Results.

Before, in a common WordPress installation, the visitor saw the web load without any problem. Now he will see that it loads a little faster, but all this flickering that he experiences reduces the user experience and it is possible that it makes the visitor think that the web is loading weirdly. Or even that something is broken on the web because every time you navigate to a page the flickering appears for a moment.

Is it worth providing this weird feeling to visitors just to win a handful of milliseconds in loading time and a few extra points in the Google PageSpeed Insights? We don’t think so. And for this reason we have return to the common way of loading styles and scripts that WordPress does by default.

Whether or not this has a negative effect on other aspects, such as SEO, the truth is that we don’t know (and we do not believe anyone knows for sure). Nor are we clear if the evaluation of Google PageSpeed Insights has as much weight as some people believe.

Results of Google PageSpeed Insights.
Results of Google PageSpeed Insights.

It is clear that there are aspects that need to be improved, such as the correct size of the images, use minified files to reduce their weight or avoid loading everything that is not going to be used on the page.

Don’t go crazy with the evaluators of the optimization of your website and with getting the maximum score. After all, your target visitor is made by flesh and blood, unable to appreciate minimum differences in tenths of a second. Once your grade is mostly correct, focus on something else.

Featured image from Taun Stewart on Unsplash.

PoorNot badGoodGreatExcellent (No Ratings Yet)
Loading...

Gutenberg Best Practices For WordPress Developers That Had No Time to Learn JavaScript Deeply

Published in WordPress.

The new WordPress block editor (also known as Gutenberg) is a radical change for developers used to working with PHP.

If you have to learn JavaScript deeply to update your plugins and keep everything up and running, you might feel a bit overwhelmed.

The development of blocks represents a great challenge for all those who do not master JavaScript. In this talk I presented in the last WordCamp Nordic I was able to show a series of good practices for WordPress developers working with Gutenberg, as well as some of the typical errors that you should avoid so that your code does not break anything.

Key points

The most important arguments discussed in the presentation are the following:

  • In 2015 WordPress developers were challenged with the mission of learning JavaScript deeply. New changes were coming and it was necessary to have this type of knowledge and skills.
  • In December 2018, with the final announcement of the release date of WordPress 5.0 and the new block editor (also known as Gutenberg), plugin developers had to adapt their plugins to the new editor. It was at this moment when learning JavaScript deeply became a priority.
  • Learning JavaScript deeply means mastering an amount of technologies in addition to the language itself. Transpilers, compilers, packers … All this is complex and can be scary to PHP developers.
  • We have developed a boilerplate to facilitate the adaptation process to WordPress developers. This plugin establishes a foundation for the programming on the block editor including a complete initial configuration for the modern build process.
  • The first thing that surprised us when opening Gutenberg’s JavaScript files was that we weren’t able to understand them because of their modern syntax. If you are not able to understand the modern constructions of ESNext, it becomes difficult to understand Gutenberg’s source code. Therefore, the recommendation is to understand the syntax of JavaScript ESNext constructs.
  • Once you understand the JavaScript syntax, the next step should be to learn React. However, WordPress encapsulates and hides React under its own functions. Therefore, instead of learning React it is much more interesting to learn the JSX syntax for creating user interfaces.
  • Gutenberg provides a lot of reusable components to create user interfaces in JSX. A good practice is to use existing components, instead of programming them from scratch and reinventing the wheel.
  • The registerBlockType function is the most popular one in Gutenberg. It provides the ability to create new blocks in the editor. But there are many more functions that are worth exploring.
  • The registerPlugin function allows you to add a plugin that extends the editor with a sidebar in which to add the components you want.
  • The subscribe function allows you to listen to the changes that happen in the block editor and add your own functions that are executed every time a change occurs. You have to be careful and avoid unconditional code with this function to avoid affecting the final performance of the editor.
  • Be careful when writing your JavaScript code. You’re not alone. Your code can break things if you’re careless.
  • Instead of learning JavaScript deeply, learn Gutenberg shallowly and start developing faster. Then you may focus on expanding and deepening your knowledge in those areas you need.
  • Don’t be afraid of the new block editor or of JavaScript.

Resources

The following resources were mentioned during the presentation or are useful additional information.

Buzz and feedback

Here’s what was said about this presentation on Twitter:

Featured image by Jaakko Kemppainen on Unsplash.

PoorNot badGoodGreatExcellent (No Ratings Yet)
Loading...

How To Generate an API Key For Google Translate

Published in WordPress.

Many external services that use the Google cloud require an API Key to work. But what is an API Key and how can you get one? This is what I’m going to explain you right now.

In this article we’ll see how to obtain an API Key to be able to use Google Cloud Translate, but the process is the same if we want to obtain an API Key for another Google Cloud service, such as Google Maps.

Lets start by the beginning… An API Key is nothing more than a string that we use as a license key for a particular service. In our example, a Google API Key will allow us to access any of Google’s cloud services from an external application. Without this key we can not make authenticated calls to Google Cloud services from a third-party application, and therefore the application that requires this key will not work.

Now that we understand what an API Key is, let’s see how to get one for Google Translate.

How to Create a New Account in Google Cloud Console

The first thing you need is an account in Google Cloud Console and a payment method in it. To do this, follow these steps:

  • Access the Google Cloud Console and log in or, if you do not have an account yet, sign up.
  • Open the left side menu of the console and select Billing.
  • Click on the button New billing account. Keep in mind that if this is not your first billing account, you must first open the list of billing accounts. To do this, click on the name of your existing billing account near the top of the page and then click on Manage billing accounts.
  • Enter the name of the billing account and your billing information. The options you’ll see depend on the country of your billing address.
  • Click Submit and enable billing.
Main screen of Google Cloud Console.
Main screen of Google Cloud Console.

By default, the person creating the billing account is a billing administrator for the account. Once you have the account created and the billing information ready, you can continue with the following steps to obtain the API Key.

How to Create a New Project in Google Cloud

Go to the bar in the top of the window and in the drop-down you can see your created projects as well as the option to create a new one by clicking on the New Project button:

Project selection and creation screen in Google Cloud.
Project selection and creation screen in Google Cloud.

Now give the new project a name and create it by clicking on the corresponding button, as you can see in the following screenshot:

Creation view of a new project in Google Cloud.
Creation view of a new project in Google Cloud.

At this point you should already have the project created and selected, so let’s move on.

Activate the Google Translate API

Before you can use a Google API in your project, you have to activate it. Go to the side menu and select the APIs & Services option:

Google Cloud APIs and services menu.
Google Cloud APIs and services menu.

Now you will see a screen with statistics about the APIs that you have activated. If you created the project from scratch by following the steps above, you won’t have any data yet, as you can see:

Dashboard of Google Cloud APIs and services.
Dashboard of Google Cloud APIs and services.

Click on the upper button Enable APIs and services to continue with the activation process of the API. This takes us to a search box where we have to look for the API we’re interested in. In this case, we want to use the Google Translate API. Type translate in the search box and click on the result Cloud Translate API:

API search view for later activation in our Google Cloud project.
API search view for later activation in our Google Cloud project.

This brings us to a screen with the description of the Cloud Translation API. Click on the Enable button to activate the API in our project:

Before you can start using the Google Translate API in our project, you have to activate it in Google Cloud.
Before you can start using the Google Translate API in our project, you have to activate it in Google Cloud.

We already have the Google Cloud Translation API activated. We’re almost there…

Create a new API Key for Google Translate

After activating the API, let’s see how to generate a new Key API to be able to use this service. We have to go to the side menu again and select the Credentials option:

Google Cloud Translate credential management menu.
Google Cloud Translate credentials management menu.

On this screen we see a button with a drop-down and the text Create credentials. Don’t click on the button! Instead, open the drop-down by clicking on the arrow to the right of the button and select the API Key option.

You must select the type of Key API credential to create a new key for the Google Translate API.
You must select the API Key credential to create a new key for the Google Translate API.

This creates the new Key API. You can copy it if you want, although you can access it later:

Google Cloud provides us with a new Key API to use Google Translate with our third-party applications.
Google Cloud provides us with a new Key API to use Google Translate with our third-party applications.

How to Restrict Our API Key to Protect and Limit Its Use

To control the cost of Google Cloud by using the Google Cloud Translation API (or Google Translate, which is the same), we can do two things: restrict where you can use the API Key that we just created or limit the allowed quota to use the service itself.

In the screenshot above, if you click on the Restrict Key button you will go to the API Key restriction screen that follows:

We can restrict from which web domain we can use the Key API that we just generated to avoid misuse of it in case of loss.
We can restrict from which web domain we can use the API Key that we just generated.

There you can select to restrict the API Key by HTTP referrers, which means that you can only make calls to the Google Cloud Translate API using the API Key from certain domain names.

You must add the valid domain names in the text box that appears when selecting the HTTP referrers option. In our case, we have added here our domain name https://neliosoftware.com/*.

On the other hand, go to the menu API’s & ServicesDashboardCloud Translation APIQuotas and there you will find a box called Characters. There you can modify the quota limits of the Google Cloud Translation API and reduce them, if necessary.

The price for Google Cloud Translation API at the time of writing this post is 20 USD per million translated characters, so make your numbers.

Google Cloud allows us to limit the use we make of the APIs in order to control the maximum consumption we want to end up paying.
Google Cloud allows us to limit the use of the APIs to control the maximum cost we want to end up paying.

And that’s all! You already have your API Key ready to be used with the application you want. The process is a bit cumbersome at first, but following the steps you’ll get the API Key without problems. Try it and let me know if you need further assistance!

Featured image by Conor Luddy on Unsplash.

PoorNot badGoodGreatExcellent (No Ratings Yet)
Loading...

Resources to Master the Technologies Behind Gutenberg For WordPress

Published in WordPress.

One of the biggest challenges developers have to face with WordPress is to recycle our knowledge to adapt to the new programming paradigm behind the new block editor. The main change with Gutenberg is the new stack of technologies used. Usually a WordPress developer created plugins using PHP mainly, with minor parts written in JavaScript. Now the key tool is JavaScript, leaving PHP as just a basis to create the structure of plugins and themes.

You may think that this is not the case and that PHP still has a long journey in WordPress. I do not blame you for it, as changes always are difficult to accept. However, I think you’re wrong. JavaScript is no longer the future of WordPress, but the present. And if you want to maintain your position, you’ll need to get up to speed with it right now.

Learn JavaScript deeply, as Matt said…

Fortunately, although they have insisted that we must learn JavaScript deeply, I think that is not the case. Knowing some minimums that any tutorial can teach you is more than enough. You can learn everything else you will need to start developing for Gutenberg quickly thanks to the resources that I will describe throughout this article.

Learn JavaScript

When you learn a new programming language, the first thing you need to know is to understand its syntax. Only in this way can you start programming with it. Once you do this, you have everything ready to start creating.

 When you want to learn JavaScript, you do not need to read a manual with more than 1000 pages... There are much simpler and more enjoyable options and at the same time they are sufficiently complete.
When you want to learn JavaScript, you do not need to read a manual with more than 1000 pages… There are much simpler and more enjoyable options and at the same time they are sufficiently complete.

If you have never done anything with JavaScript before, these are some tutorials in different formats that will help you get started:

  • JavaScript Language Basics: free course by Zac Gordon in video format.
  • JavaScript 30: learn by doing with a challenge every day for 30 days with Wes Bos in this free course.
  • A re-introduction to JavaScript: brief introduction to JavaScript by the guys at Mozilla.
  • JavaScript For Cats: another introduction to JavaScript with certain touches of cat humor.
  • Exercism.io: free web where you can do exercises in JavaScript and upload your solution for a mentor to evaluate it.
  • JSBooks: if you are one of those who prefer to learn with books, here you have a lot of them for free.

Conversely, if you already have some experience using JavaScript, expand your knowledge by studying advanced concepts about the functions, asynchronous execution with promises and async / await, and in short, everything related to ESNext.

With a day of JavaScript training should be more than enough to acquire the basic knowledge to move with ease in everything related to what you will need to develop on top of the WordPress block editor.

Learn React and Redux

In addition to JavaScript, to develop on the WordPress block editor you will need to have certain notions of React and Redux.

This is what everyone will tell you, but the truth is that it is not like that. You can develop for Gutenberg without having any idea of React or Redux. Of course, if you know how they work and what they are used for, then that would be better.

React and, above all, JSX

What you can not avoid is to know how the JSX syntax works to create elements within React, which we will use to define the interface of our components (whether they are Gutenberg blocks or views within the editor).

Imagine that you want to define the interface for the Product and ShoppingList components and then use them in a Gutenberg block. With standard notation you would do it in the following way, using the wp.element.createElement() function provided by Gutenberg:

On the other hand, if you use JSX within the render() method, which is nothing more than a notation similar to HTML, what you have is the following:

Using JSX simplifies writing and reusing components, since the code is much simpler and easier to read. As you can see, in the previous example we are creating React components without having any idea of React, by only knowing how to handle JSX and using it as if it were HTML with superpowers. In addition, you can also use existing components in Gutenberg. You can see them in this viewer that is also linked to the official documentation.

There is only one problem. You will need to transpile the code with Babel so that the JSX notation ends up transforming into regular code that any browser can interpret. However, this is not a drama since you can do it automatically by using WebPack.

Redux to Maintain The Status of Your Application

On the other hand, you probably heard about Redux. It’s a tool to save and manage the status in JavaScript applications. Again, if you’re interested in learning how to use it, I recommend these Wes Bos videos, but it’s not necessary either.

If you had the need to create your own data store, you would not do it with Redux, but you would use the @wordpress/data package included in Gutenberg. This package uses Redux internally, but that doesn’t matter. Also, we’re talking about a complex use case that you probably don’t need, at least in an initial stage. So for now forget about it.

NPM, WebPack, Babel, PostCSS, and ESLint

In addition to JavaScript and basic notions of React and JSX, for the new era that is already here in WordPress you will need to know the following technologies so that your developer tasks are much simpler and highly automated:

  • NPM: the dependency manager for JavaScript. Just define the dependencies that you need and install them by doing npm install.
  • WebPack: the JavaScript bundler. It is not easy to configure at the beginning, but once you have it, it facilitates the work of managing JavaScript files: transpilation, minification…
  • Babel: the JavaScript compiler to be able to use the syntax of the next versions of this language today.
  • PostCSS: the same as Babel, but for your CSS stylesheets.
  • ESLint: detects JavaScript usage and style errors so you can avoid them while you are writing code.

I already talked about most of these technologies here. However, I am going to write down another article soon, where I will explain how to integrate them into a WordPress development project so that you can use them in a real case.

How to Create New Blocks For Gutenberg

Now, let’s go for the most important part: what we need to start creating new blocks for the WordPress editor.

The first thing you need to start creating your own blocks is to master the function wp.blocks.registerBlockType() . You will find the most complete documentation on this function in the official Gutenberg guide.

The arguments for this function are a string with the name of the block, which must be unique, and an object with the configuration of the block, where the most important parts are the save and the edit functions of the block. I already briefly explained this to you in this article.

If this seems too complicated, you can start using Ahmad Awais toolkit called create-guten-block. This creates a folder structure with all the necessary dependencies to create your first block. You can see a tutorial on its use in the following video:

Finally, if this still seems too complex, you have one last option available. Surely you know the plugin Advanced Custom Fields (also known as ACF, for short). Well, this plugin will allow you to create blocks for Gutenberg without having any idea of JavaScript.

But I’m not going to explain it to you, I’ll let Mauricio Gelves do it. Go check his presentation on this subject in the WordCamp Zaragoza 2019 that you already have on WordPress.tv (in Spanish):

How to Extend the Block Editor in WordPress

There are many other things you can do with Gutenberg, in addition to creating new blocks. For example, you can create a plugin within Gutenberg to add a panel of options in the right side of the editor with everything you want. The best thing about this is that the official WordPress documentation includes this complete tutorial with concrete examples of what you can do there.

In addition to this, you can extend the WordPress editor by adding new styles to existing blocks, add more custom settings to the blocks, remove blocks or hide them, or filter the categories of blocks that you can have in the editor.

I recommend you take a look at the official documentation that you have in the Gutenberg handbook for developers and designers that you will find here. Take it easy because there is a lot of information and this is one of the best resources you have available.

Featured image by Christian Fregnan in Unsplash .

PoorNot badGoodGreatExcellent (No Ratings Yet)
Loading...

The Best 9+ Block Plugins For The WordPress Gutenberg Editor

Published in WordPress.

The 5.0 version of WordPress that was released on December 6, 2018 brought with it the block-based Gutenberg editor. With the new editor, every bit of content is a block. A paragraph, an image, a YouTube video, a table, etc, is a separate block. This new editing paradigm opens up new design possibilities for the creation of pages and entries, as Matt Mullenweg showed in WordCamp US 2018 (video minute: 9:50).

And if you’re still not familiar with the new editor, I recommend you read David Aguilera’s post: All you need to know about Gutenberg, the new WordPress editor. You’ll see how quickly you get the hang of it…

Gutenberg Blocks

By default, Gutenberg comes with a fairly complete set of blocks that we could categorize into: 

  • Text creation blocks for creating paragraphs, lists, headings, tables, and buttons.
  • Blocks for creating multimedia objects such as images, cover images, image galleries, audios, videos, embedded objects, and shortcodes.
  • Blocks for inserting quotations and verses.
  • Blocks for creating code and HTML.
  • Column format blocks and dividers.

Although Gutenberg organizes them using different categories. First it shows what it considers common blocks:

Common blocks of the Gutenberg editor.
Common blocks of the Gutenberg editor.

Then, the blocks that allow you to create different formatting:

Formatting blocks of the Gutenberg editor.
Formatting blocks of the Gutenberg editor.

And blocks for creating different layouts:

Layout elements blocks of the Guttenberg editor.
Layout elements blocks of the Gutenberg editor.

Blocks to add widgets:

Widgets blocks of the Guttenberg Editor.
Widgets blocks of the Gutenberg Editor.

And, finally, blocks to embed external objects:

Some of the blocks of the Gutenberg editor to embed third party elements.
Some of the blocks of the Gutenberg editor to embed third party elements.

Gutenberg comes with a lot of different block types, but you might still need some other blocks that aren’t included by default. That’s why you’ll find WordPress plugins that give you new blocks that make it easier to create posts and webs. Let’s take a look at some of them:

#1 Atomic Blocks

The Atomic Blocks plugin created by the Array Themes team gives you 11 additional blocks to the ones you already have by default. In the WordPress Plugin Directory you will find demos of how each one works.

Atomic blocks plugin
Additional blocks available at the Atomic blocks plugin.

So, for example, with the Testimonial Block, in a flash you’ve already created a testimonial on your page:

Adding a new testimonial.
Block to add a new testimonial .
Juanka Diaz testimonial.
With this block, creating a testimony on a page is as simple as filling in the different fields.

#2 Kadence Blocks

The Kadence blocks plugin gives you 6 design blocks in which you can create your own design, but it also includes a library of pre-built variations. 

Blocks provided by the Kadence Blocks plugin.
Blocks provided by the Kadence Blocks plugin.

So, for example if we take a look at the Row Layout you can define the row format you want to create:

Row Layout block.
Selecting the layout of a row or block.

But also you can go to the library of pre-built layouts and select the one you like best.

Prebuilt library of Kadence Blocks plugin.
Some of the prebuilt layouts available in the library of Kadence Blocks plugin.

#3 Advanced Gutenberg Blocks

The Advanced Gutenberg Blocks plugin has been developed by Maxime Bernard-Jacquet and includes 15 additional blocks. With the following video you will get a quick idea of the capabilities of each one.

#4 Block Gallery

The Block Gallery plugin gives you three new blocks with which you can create three different ways to view image galleries.

Block Gallery plugin.
Blocks available in the Block Gallery plugin.

Very easily (you only have to select the images) you can create a carousel gallery, or in Masonry format (optimally structured as when you are in Pinterest) or put the images stacked one below the other.

Mansory pictures.
Uploading images to the Masonry block of Gallery Blocks.

This plugin was the winner in the Best Solution category in the Automattic Design Awards at the WordCamp US 2018

#5 Bokez

Bokez is a plugin developed by Delabon that provides you with 14 new blocks with which you can easily create a price table, easily show your latest entries, share on social networks, and so on.

Some of the blocks available at the Bokez Blocks plugin.
Some of the blocks available at the Bokez Blocks plugin.

#6 Advanced Gutenberg

The Advanced Gutenberg plugin, developed by JoomUnited includes more than 20 additional blocks to your editor. It also includes the possibility to control at user or user profile level which blocks can be accessed.

El plugin Advanced Gutenberg.

#7 CoBlocks

The CoBlocks plugin includes 10 new blocks in Gutenberg for market content professionals.

CoBlocks blocks.
CoBlocks blocks.

For example, the Author block allows you to quickly add a box with the author’s name, biography summary, a photo, and a button to follow him.

Bloque Author de CoBlocks.
Bloque Author de CoBlocks.

#8 Stackable

The Stackable plugin developed by Gambit Technologies is probably the one that gives you the most extra blocks: 24 and they keep increasing it.

Stackable Blocks.
Stackable Blocks.

And if you want to see a demo of a website built with its blocks, just visit their own website.

#9 Nelio Maps

If all you are looking for is a block to insert a beautiful Google map in your page or post, with the plugin Nelio Maps you already have it.

Nelio Maps.

I’m sure you’ll fall in love with its simplicity and efficiency.

#10 Ultimate Blocks

Istiak Rayhan contacted us that we couldn’t miss the great plugin that Matt Mullenweg had featured on his slides in WordCamp US: Ultimate Blocks. It comes with 16 blocks and there are more on the way.

Ultimate blocks plugin
Ultimate blocks.

Conclusion

As you can see, with Gutenberg and the whole set of blocks provided by these plugins, you can create much more impactful designs without writing a single line of code.

Gutenberg and all the developments that come from now on will surely bring us a new way of creating pages and posts very different from the one we knew.

Featured image by Susan Holt Simpson in Unsplash.

PoorNot badGoodGreatExcellent (1 votes, average: 5.00 out of 5)
Loading...

Curiosities and Statistics About WordPress That You Should Know

Published in WordPress.

We start this New Year 2019 talking about the growth and usage statistics of WordPress. Knowing this information can help you to decide on which system to built your website or even convince a customer or your designer the time has come to renew your website. 

Total Number of Domains, and Websites in The World

Do you have any idea how many domains and websites there are on the Internet? Difficult, isn’t it? But before talking about these numbers, it is better to clarify the differences between the concepts of domain name, URL, and website.

A domain name is the online address that your customers type when they want to find your business. It is the neliosoftware.com of the URL you see written in the address bar of this page.

Domain names were created as substitutes for the Internet Protocol of a website, or IP address, which is simply a unique set of numbers that identify the specific computer server where the website is hosted. It is much easier to remember a name than a string of random numbers. As a curiosity, the figures that have been paid for the 25 most expensive domain names range from $5 million to $25 million. 🤑

A URL is what you find in the address bar of any web page. It is the universal locator of any page. In the case of this page it is https://neliosoftware.com/blog/curiosities-and-statistics-about-wordpress-you-should-know/. As you can see, it includes the domain name.

URL diagram.
URL diagram.

Finally, when we refer to a website we mean to one or a set of related web pages that include multimedia content. A website can be publicly accessible over the internet or privately on a local network.

Now let’s go back to the figures that interest us about the number of websites, URLs, or domains that exist… unfortunately, there is no single official record that gives us this information.

The information that’s probably closer to reality is provided by Netcraft and Internet Live Stats. According to these, there are more than 1.9 billion websites in the world. And according to Verisign, who is dedicated to reviewing the state of the domain name industry through various statistical and analytical research, we ended 2018 with more than 350 million domain registrations of all top-level domains (TLDs).

And why is there such an abysmal difference between these two figures? For the simple reason that there are many domains that are divided into subdomains that correspond to different websites. For example, from the domain wordpress.com we have a lot of webs, such as https://pildorasdecomunicacion.wordpress.com/, https://lagottocattleya.wordpress.com/, https://worddreams.wordpress.com/ etc.

WordPress Websites

Now that we have an estimate of the total number of websites in the world as a point of reference, let’s see how many of them use a CMS (Content Management System). In case you are not familiar with what it is, a CMS is a system that is installed on a server (usually that of a hosting company) and generates web pages when any Internet user requests them, and can even generate dynamic content depending on the user. It has a public part that all Internet users see and a private section or control panel. It is through the control panel where the owner of the website can change the content without having programming knowledge.

According to W3Techs, 54.5% of websites use a CMS versus 45.5%, which uses none at all. As you can see, more than half of the websites use some kind of content manager.

Usage of CMS for Websites
Usage of CMS for Websites (source: data extracted from W3Techs ).

But of the 54.5% of websites that do use some kind of CMS, 59.5% use WordPress, which is equivalent to 32.5% of all websites.

Image from W3Tech about the WordPress usage.
Image from  W3Tech about the WordPress usage.

In other words, of all the websites, 32.5% are WordPress.

WordPress usage.
WordPress usage (source: datta extracted from W3Techs)

So, assuming that, as we’ve already found out, 1.9 billion sites of which 32.5% are WordPress, we deduct that there are 617.5 million WordPress sites in the world. And in fact these figures are not so far from those given by BuiltWith.com in which they have analyzed 1 million of the best websites that use a CMS, of which 53% are WordPress (below 59.5% of W3Tech).

CMS usage Distribution in the Top 1 million sites.
Which CMS uses the one million best websites with any CMS? (Image from  builtwith.com).

About WordPress

Seeing the relevance of the use of WordPress in the market, let’s now look at relevant information about it and the activity around WordPress.

WordPress is a free open source software with GPL license that incorporates the programming languages PHP, MySQL, JavaScript, HTML and CSS. No one officially owns the WordPress software but the WordPress brand and the WordPress.org domain are owned by the WordPress foundation, a non-profit organization whose sole purpose is to ensure that WordPress is freely available, maintained, and developed.

There are several companies in the sector giving support to the foundation,  including Automattic, the company of Matt Mullenweg (founder of WordPress) and owner of WordPress.com. There are thousands of people watching over the development of the WordPress core. But there is some recurring discussion about who exactly makes the decisions about what WordPress should look like. And if not, you’ll see that in the last WordCamp US in 2018, one of the questions Matt Mullenweg is precisely asked is whether he can clarify exactly who he refers to when he talks about “we” and who makes the decisions (minute 1:16:35 of the video WCUS 2018 State of the Word):

WCUS 2018 State of the Word

But let’s get on with interesting figures. As WordPress is a community in which we all contribute to its development and maintenance, promote its use, and sponsor events where we talk about it, this has allowed Matt Mullenweg to own one of the most profitable technology company. 

Difference between WordPress and other companies.
It’s impressive to see the ratio of revenue per number of Automattic employees, isn’t it? (Source: Automattic).

Some other WordPress.com figures: about 409 million people see more than 21.2 billion pages each month. And there are more than 69.3 million new posts and more than 72 million comments every month.

You can also take a look at some of the most prominent WordPress users.

Notable WordPress Users.
Notable WordPress Users (source: WordPress.com).

And if you want to browse other examples of WordPress websites, you will find them in the showcase of WordPress.org.

If we take a look at the WordPress versions that are installed on websites, in the middle of the last month of 2018 the most installed version was 4.9 with 59% of websites, and 5.0, recently launched, already had 9.8% of installations.

WordPress versions installed.
WordPress versions installed (source: WordPress Statistics).

And if we look at the different languages in which WordPress is installed:

WordPress locales
Languages of WordPress installations (source: WordPress Statistics).

We can see that English (from Australia, Canada, South Africa, the United Kingdom and the United States) is installed in 52.1% of WordPress websites, followed by Japanese with 6% and then German and Spanish (from Chile, Mexico and Spain), both with 5.4%.

I would like to take this opportunity to comment that on the subject of languages, WordPress.org has 180 teams of volunteers in 45 locations who are dedicated to the translation of the core WordPress, themes and plugins. If anything is key in WordPress, it’s its community.

The WordPress Community

WordPress couldn’t be what it is today if you don’t consider its community. You’ve already seen the ratio of revenue versus the number of Automattic employees. And the quick question that comes to mind is why are so many people volunteering to contribute to the WordPress project? Of course, there may be an altruistic reason, but it’s not the only one. Those of us who contribute to WordPress usually work for companies that sell WordPress products or services (plugins, themes, web development, consulting, training, etc.). In other words, we earn our living thanks to WordPress and we are interested in the WordPress project growing to have more business opportunities.

Let’s look at some interesting figures related to the community:    

WordCamp Events 2018.
Number of WordCamps 2018.
WordCamps 2018 (source: WordCamp Central). 

Please note that in all WordCamps, both the organizers and the speakers are volunteers who do not charge anything for the work done.

And here you have to add the events related to WordPress that are for some niche market like Publishers, WooConf, LoopConf, WP Campus, and A Day of REST, as well as all the set of WordPress meetups that are organized locally to create local WordPress communities.

To give you an idea of the contribution that companies can make to the WordPress community, in 2018 the entire Nelio team was involved in the organization of WordCamp Barcelona 2018.

WordCamp Barcelona 2018 attendees.
WordCamp Barcelona 2018 attendees.

But not only that, we also participated in WordCamp Europe 2018, WordCamp Madrid 2018, and currently David and Toni are part of the organizing team of WordCamp Europe 2019. As you can see, it’s still a lot of hours dedicated to the community and the project.

WordPress Plugins and Themes

In the WordPress Directory you have free GPL licensed themes and plugins that can then have premium versions with paid functionalities or support services. The average price of a WordPress theme is less than $59 and prices can range from $10 to $200.

Precio promedio de los temas de WordPress (fuente: CodeinWP).

And what are the most popular WordPress themes?

WordPress theme usage
WordPress theme usage (source: BuilWith.com).

According to BuiltWith, of the one million websites analyzed, the most popular WordPress theme is WooComerce’s own (25%), followed by Genesis and Divi (5%) each and Avada (4%).

And about plugins? Currently, you’ll find more than 55,000 plugins in the WordPress Directory. Some of them with more than 5 million active installations.

Popular WordPress plugins.
Popular WordPress plugins (source: WordPress Directory).

With this incredible figure, the complex thing is sometimes to find the plugin you’re looking for. As long as you know that the two plugins, compatible with Gutenberg, that will help you promote your content and optimize the conversion of your website are Nelio Content and Nelio A/B Testing, respectively… you’re doing well… 😉

And precisely about plugins, Matt Mullenweg commented at WCUS 2018 that, with the aim of promoting Gutenberg, at this moment the plugins that were going to stand out the most in the directory are all those that offer blocks for the new block editor.

Surely as a WordPress user you don’t need to know all this information for your everyday, but they will help you understand and explain better that WordPress is not just a template or a little program to create a website; it’s something more, don’t you think?

Featured image by Evgeni Tcherkasski on Unsplash.

PoorNot badGoodGreatExcellent (1 votes, average: 5.00 out of 5)
Loading...

Best Free WordPress Courses and Tutorials from Beginner to Expert Level

Published in Uncategorized.

More than once you’ve heard the phrase that creating a website in WordPress is very easy. Let’s not fool ourselves: creating a simple website is easy, but if you want some advanced stuff, it isn’t. If you also add plugins without knowing very well what you are doing, your website may be in a state in which you no longer know where you are.

Kanye west help by OceanX
We’ve come across websites with Visual Composer and Divi editors installed at the same time. (source: oceanx en Giphy).

Even hiring expert designers to create your website (by the way, it will surely be one of your best investments), the more knowledge you have of WordPress, the easier it will be for you to see all the possibilities you have, make your own changes, and make sure you really have the website you want. The more dynamic and updated your website is, the better it will be positioned in Google searches.

And if you do not have a great flexibility of time or your budget is limited, you are very lucky that you have many free resources to learn WordPress. You no longer have any excuse not to know about the subject.

Now; without further ado, here’s the list you’ve been waiting for:

WordPress Lessons in the Codex

The WordPress Codex is the online manual for WordPress and a living repository for WordPress information and documentation.  The WordPress Lessons area of the codex is a good starting point to understand WordPress and WordPress themes. Some of the articles are a little dated, but they remain relevant.

WordPress Lessons of the codex.
WordPress Lessons of the codex.

Free WordPress Courses at Udemy

When it comes to any type of online course, the first site that comes to mind is Udemy. And indeed, you’ll find good videos of free (and also not free) WordPress courses.

WordPress free courses at Udemy
Some of the WordPress free courses at Udemy.

Darrel Wilson is one of the most popular tutors who offers plenty of videos with which you can learn about WordPress.

YouTube Tutorials

On YouTube you’ll also find tutorials for learning WordPress.

Tyler Moore

Tyler Moore, with more than 267K subscribers, offers a lot of courses and tutorials about WordPress for you to learn many tricks.

Tyler Moore YouTube channel
Tyler Moore YouTube channel.

Brand Schift, LearnWebCode Author

Brand Schift is a front-end developer, designer, and educator who has been building user interfaces for over a decade. He has great lessons, tips and examples about HTML, CSS, JavaScript, and WordPress.

LearnWebCode Youtube channel.
LearnWebCode Youtube channel.

Kori Ashton

Every Wednesday, Kori Ashton releases a new WordPress tutorial. He covers topics including SEO tips, WordPress how-tos, and plugin roundups. 

Kori Ashton YouTube channel.
Kori Ashton YouTube channel.

WPTuts

WPTuts is part of the PsmegTV group who provide free, high quality training videos on a range of software topics. WPTuts focuses on teaching how to use WordPress, Visual Composer, Slider Revolution, Elementor, and more.

WPTuts WordPress tutorials.
WPTuts WordPress tutorials.

SiteGround Tutorials

SiteGround is a hosting company that offers a very comprehensive tutorial for you to learning how to create and manage your WordPress website.

SiteGround WordPress tutorial.
SiteGround WordPress tutorial.

WPBeginner’s Tutorials

WPBeginner offers a list of free resources with several types of content – written articles, videos, guides, and a useful glossary. If you are a beginner, this is a good starting point and the only requirement to access to all the information is to signup with your email address.

List of videos of wpbeginner.
List of videos of WPBeginner.

First Site Guide video tutorials

On First Site Guide video library you’ll find more than 40 short easy-to-follow video tutorials you need to set up and maintain a blog. Topics covered include WordPress, blogging basics, and niche blogging.

First Site Guide video list.
First Site Guide video list.

All WordPress Posts of Nelio’s Blog

Finally, if you want to become a WordPress expert, we continually publish posts on our blog where we explain WordPress news and tips to help you become a great expert.

Don't miss all posts on our Nelio's blog!
Don’t miss all posts on our Nelio’s blog!

And after you’ve created a great WordPress website, you won’t want to miss out on our free course on how to make your blog a success and make sure you stay up to date with all the WordPress news at 😉.

FREE COURSE


HOW TO SUCCEED

WITH YOUR BLOG

Join our Newsletter and get the course lessons straight to your inbox to take your blog to the next level

If you know any other great WordPress tutorials, please share it with us on the comments section below. Our readers will love it!

Featured image by Ben White in Unsplash.

PoorNot badGoodGreatExcellent (No Ratings Yet)
Loading...

Thrive Leads vs OptinMonster vs Bloom To Increase Your Leads and Customers

Published in WordPress.

Are you increasing your web traffic and you have more and more followers in social networks? If so, congratulations! You seem to be on the right track, but… Are you getting your visitors to buy your services or products? Are you increasing your revenue?

Excuse me wow by Mashable
Did your face look like this? (source: mashable on Giphy).

If these questions have made you a little uncomfortable is that you need to increase the conversion rate of your website. That is to say, make more visitors of your web carry out those actions that you really want them to do. Forget about vanity metrics!

But how do we optimize our website to increase the conversion rate? First, don’t forget to perform A/B tests on your website that will provide you with real data about your visitors’ preferences at all times.

ab-testing
In its simplest form, A/B testing proposes to randomly split the traffic to the site in two groups so that 50% of the visitors see the A design while the other 50% sees the B design. By monitoring how users in each group react, we can calculate the conversion rate of each group and, in case there is a statistically significant difference between the two, declare a winner design.

And, as I told you recently, create attractive lead magnets for your website visitors. Remember that lead magnets are attractive free offers that you offer to your readers, in exchange for them giving you contact information, subscribing to your newsletter or helping you to promote yourself.

So, in the same way that I explained to you 7 lead magnets ideas that you should try on your website to get more prospects and customers, today I will tell you about 3 plugins that will help you create lead magnets more quickly, that is, they will help you create opt-in forms, that invite your reader to subscribe to your newsletter in exchange for some attractive offer. For example, here is a lead magnet:

FREE COURSE


HOW TO SUCCEED

WITH YOUR BLOG

Join our Newsletter and get the course lessons straight to your inbox to take your blog to the next level

Before you continue reading, the three plugins I’m telling you about below are premium plugins, they are not free. The functionalities they offer compensate for their cost. And it’s also good that we’re in solidarity with developers who have to make a living offering great products 😊.

#1 Thrive Leads

Thrive Leads is one of the most popular plugins to increase the number of subscribers on your website. You won’t find it in the WordPress directory as it doesn’t have a free version. You can get it at the Thrive Themes website, choosing between the following licenses:

Thrive Leads licenses.
Thrive Leads licenses and pricing.

For a single payment of $67 you get a license for a single website; for $97 you have up to 5 licenses; and for $147 you get 15 licenses. All three plans include unlimited updates and one year of support.

Main benefits of this plugin:

  • You can create a variety of forms or opt-ins (in content static banners, lighboxes or popups displayed on top of a content, covering it, post footer forms that appear at the bottom  of your content, ribbon forms displayed on top of a page, full screen lightboxes or screen fillers, scroll mats, slide-ins forms that smoothly show up in a corner of the screen, side bar widgets, content locks and multisteps forms, etc)
  • Specific pre-designed form templates are available for different sectors
  • You can customize the design of the forms
  • You have several form triggers (when you leave the page, after a period of time, when you have scrolled to a certain point, when you click a button or link)
  • You can perform A/B tests on the forms and see which ones work best
  • You can differentiate what information to show your visitors depending on whether it’s a new visitor, a subscriber, or if it’s already a customer
  • You can segment the display of a form depending on what is being visited, by category or tag, by post, by page, or custom post type, among others. And group them by campaigns (lead groups)
  • You get detailed reports of the conversion your lead magnets are getting
  • It easily integrates with a large set of email marketing services and social networks: MailChimp,  MailRelay, Mail Poet, SendGrid, Sendinblue, Sendy, GetResponse, Facebook, Twitter, etc

Thrive Leads form types.
Thrive Leads form types.

It is a plugin easy to install and start working with without technical knowledge. But it is important that you take into account before you start working with this plugin how Lead Groups work. These are used to create campaigns or group a set of forms that you want to show in certain places on your website (for example on certain pages or all posts etc.).

You should know that if you create several groups and design two forms for the same website, the opt-in of the group at the top of the list will always prevail. Don’t get confused with this or you won’t know why certain lead magnets don’t show up to the user.

#2 OptinMonster

OptinMonster is one of the most popular opt-in applications in WordPress. OptinMonster itself is not a WordPress plugin, it is a stand-alone payment application that integrates into WordPress. In the WordPress Directory you will find the free OptinMonster App plugin connector that allows you to create an account and connect to OptinMonster.

You can subscribe to OptinMonsterwith 4 different plans: Basic ($108 per year), Plus ($228 per year), Pro ($348 per year), and Growth ($558 per year).

OptinMonsters plans and pricing (billed annually).
OptinMonsters plans and pricing (billed annually).

And as shown in the image, Basic is for a single site, with which you can create 3 simultaneous campaigns with a maximum limit of 5,000 views per month; Plus is for up to 3 sites and you can create unlimited campaigns with a maximum of 15,000 views per month; the Pro plan allows you to have it installed in 5 sites and the maximum of campaign views is 100,000 views per month; and with the Growth plan you can install it in 10 sites and conduct campaigns that have 500,000 views per month.

OptinMonster and Thrive Leads offer many similar functionalities. With the OptinMonster’s Pro plan, you have practically the same types of forms as Thrive Leads, the same triggers, and you can also perform A/B tests.

OptinMonster campaing types.
OptinMonster campaing types.

The most notable differences between the two are:

  • Thrive Leads is a WordPress plugin and OptinMonster is a stand-alone software. That means that with Thrive Leads everything you create is saved in your WordPress database; in the case of OptinMonster you save it in its database. Also, if your website is not WordPress (that is, it’s a PrestaShop, Shopify, or Magento, for example) OptinMonster is your product. Finally, if you want to manage several accounts at once, with OptinMonster you can do it directly from its application; with Thrive Leads you will have to go to each of the different WordPress sites.
  • The two products have different types of visual editors to design the popups. Thrive Leads has its own quite complete visual editor with which you can edit all the opt-ins and OptinMonster has the Canvas function with which you can edit some opt-ins.
  • OptinMonster focuses more on user behavior and includes pop-up trigger options (Adblock detection, geolocation, etc.) that can be especially useful if you have an e-commerce. Thrive Leads focuses more on the results you get from A/B tests and getting more subscribers.
  • In OptinMonster each campaign is determined by the type of opt-in it uses. That is, Campaign 1 uses a normal pop-up and Campaign 2 uses a pop-up that slides from the right side. In Thrive Leads the campaigns are determined in Lead Groups where you group several forms. For example, Campaign 1 will include the two previous pop-ups and a widget.

#3 Bloom

A more recent opt-in plugin for WordPress that has been growing in popularity is Bloom. Bloom is a plugin from Elegant Themes, best known for its Divi theme and Divi Builder visual editor.

Elegant Themes including Bloom plans and pricing.
Elegant Themes including Bloom plans and pricing.

The price is $89 a year or $249 for life. And this price not only includes the Bloom plugin, but also includes all Elegant Themes themes and plugins. So, if you had already paid for one of them, it is clear that this option is very important to you, since you already have it for free; but if you are only interested in this plugin, it is cheaper than OptinMonster but more expensive than Thrive Leads.

Bloom is a little more limited than the previous two, yet surely you have everything you need:

  • You have 6 different types of forms: normal pop-ups, pop-ups that fly in, bar below posts, in line optine, locked content or widgets
  • Among the possible triggers of opt-ins includes that of activating a popup after a time of inactivity or after a purchase, which we do not have them in the other plugins, but instead, does not include that shows up when it detects that the page is abandoned
  • You can integrate it to different email services, just like the two previous plugins
  • It allows you to segment by categories and refine where you want a lead magnet to show up or not, including or excluding specific pages and posts
  • What Bloom does not include, unlike Thrive Leads and OptinMonster, is a visual editor of the changes you make in an opt-in. You just specify your style options and view it later by clicking the Preview button

Bloom optin types.
Bloom optin types.

Conclusion

As you have seen, the three plugins, Thrive Leads, OptinMonster, and Bloom meet the needs you may have to capture leads: multiple types of forms, templates that you can customize, integration with the most popular email services, and A/B tests.

Some of the differences to highlight are, on the one hand, that OptinMonster and Thrive Leads include the “leave page” trigger and Bloom does not. In addition, each has a different set of options and levels of control over how to create campaigns. And finally, with Bloom and Thrive Leads, with a single payment you have all the functionalities and with OptinMonster you have different prices for different features.

In fact, the main difference is the price. You can compare annual subscriptions:

  • $67 – Thrive Leads (just one license).
  • $89 – Elegant Themes (87 themes and 6 plugins including Bloom)
  • $348 – OptinMonster (Pro package with all features included).

Our opinion? We use Thrive Leads because, from our point of view, it’s the one that offers the best quality-price ratio. But if you already pay for Elegant Themes, which already includes Bloom, you probably don’t need anything else. And if you are looking to optimize an e-commerce or if your website is not made in WordPress, or you want to manage several accounts at once, do not hesitate to consider the OptinMonster option, which is very complete.

Featured imabe by Belinda Fewings on Unsplash.

PoorNot badGoodGreatExcellent (No Ratings Yet)
Loading...

Learn Google Analytics With a Real Example From Google

Published in Online Marketing.

The best way to learn something in this life is to put it into practice. If you are one of those who want to master Google Analytics, no matter how much articles you read or how many courses you do, the best thing for this purpose is to try it yourself on your website.

The main problem is that it will take some time to capture enough data to start drawing interesting conclusions by reviewing the Google Analytics reports. And if on top of that your website has little traffic, it will be even more desperate to start putting into practice what you have learned.

Luckily for you, there is a solution so you don’t have to wait to have a Google Analytics account full of data to work on it and become an expert of this web analytics tool. But before we get started, let me tell you a little about the Google merchandise store 😇.

The Google Official Merchandise Store

It’s possible that you didn’t know about it, but Google has an official merchandise store where they sell a whole series of different products with their brand and those of their other star websites, such as YouTube. To be able to enter this store, you only have to go here.

In the Google Merchandise Store you can buy products from Google, YouTube or Android.
In the Google Merchandise Store you can buy products from Google, YouTube or Android.

The first thing you may think when you see this store is if there will be many people who buy this type of products. Is there really a market to sell T-shirts, pullovers, glasses, stickers and other products with the brands of Google, YouTube, Android and so on? How much does Google earn each month selling swag?

There's a lot of swag you can purchase in the Google merchandising store.
There’s a lot of swag you can purchase in the Google merchandising store.

What if I tell you that you can see this data without expending a single penny? Would you like to access the Google Analytics account of the Google Merchandise Store? Then continue reading…

Learn by Exploring Real Data From The Google Merchandise Store

Google Analytics provides a demo account so you can test all the features that this web analytics tool offers. And the data for this account comes directly from Google’s merchandise store. A curious exercise of transparency that we all applaud here.

Google Analytics provides a demo account so you can play with it.
Google Analytics provides a demo account so you can play with it.

To access this demo account simply visit this link. There you will find all the explanation of the demo account and you will be able to include it in your Google account, as if it were just another website you control in Google Analytics. Remember that you will need to have a Google Analytics account, something obvious to be able to see all this.

The main page of the Google Analytics demo account already shows us a lot of information about the Google merchandise store.
The main page of the Google Analytics demo account already shows us a lot of information about the Google merchandise store.

The Google Analytics demo account data corresponds to what you might find on a conventional e-commerce website and includes the following information:

  • Traffic source data: Information about where website users originate. This includes information about organic traffic, paid search traffic, and display traffic.
  • Content data: Information about the behavior of users on the site. This includes the URLs of pages that users look at, and how they interact with page content.
  • Transaction data: Information about the transactions that occur on the Google Merchandise Store website (purchases).

Want to see how many people are accessing the Google Merchandise Store right now?
Want to see how many people are accessing the Google Merchandise Store right now?

All users of the Google Analytics demo account have read and analysis access; that is, they can view configuration and report data, work with report data (e.g., filter a table, add a secondary dimension, or create a segment), but they can’t modify account settings or defined goals. This is normal, since as we said before, the access is read-only.

You can learn all about the audience that accesses the Google Merchandise Store.
You can learn all about the audience that accesses the Google Merchandise Store.

In the following screenshot of the Google Analytics demo account you can even see the sales funnel of the Google merchandise store. Note that all these data you see here is real data taken from the online store itself. And who knows? If you propose some improvement to their website to make them sell more, they might even hire you at Google 😉.

The Google Analytics demo account allows you to view the sales funnel of the Google Merchandise Store.
The Google Analytics demo account allows you to view the sales funnel of the Google Merchandise Store.

If you want to know which product has sold most in the last 30 days or in any period of time, you only have to check it in the corresponding section of the Google Analytics demo account. It’s curious that when I’m writing this the thing that most benefits produced to Google was a security camera 🧐.

The Google Analytics demo account lets you know how much money Google earns for each product it sells in the Google Merchandise Store.
The Google Analytics demo account lets you know how much money Google earns for each product it sells in the Google Merchandise Store.

Don’t waste another minute and see what you can discover with the Google Analytics demo account. To have a real example of analytics from an online store surely serves you well to learn a lot about it.

Final Remarks

Now you have discovered the possibilities that Google Analytics provides you with the Google Merchandise Store demo account. In this account of Google Analytics you have the real data of a web with an interesting number of visits and you can investigate the complete analytics of a real e-commerce system.

This resource is very interesting if you are starting to familiarize yourself with Google Analytics but you are still a little bit scared or you don’t have a decent website in which to install a tracking code and start collecting data. You will be able to touch and watch as much as you want without fear of breaking anything, since you are in front of a safe demonstration environment. The dream of every student!

I encourage you to take a look at it and start messing around with this demo account. You’ll learn a lot about Google Analytics and you’ll be able to apply your learning to your own website in the near future.

Featured image by Jielin Chen via Unsplash.

PoorNot badGoodGreatExcellent (2 votes, average: 5.00 out of 5)
Loading...