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:
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.
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.
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.
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.
Here is the list of lessons that make up the course:
All the lessons show practical and real examples for immediate application on your website.
If only I had a calendar where I could schedule all my upcoming posts… Hold on a sec, I do have one! And it even helps me to promote it on social networks! Discover our new plugin!
Hated by some and loved by many, it is clear that the new WordPress block editor does not leave you indifferent. It has been with us for more than a month now and more plugins and themes are compatible with it.
As a plugin developer, I have to say that adapting our products to Gutenberg has not been something that can be done in a couple of days. At Nelio we’ve been following the evolution and development of the new block editor for quite some time in order to be able to maintain the same functionalities of our plugins with no significant changes.
One of the key points to be able to adapt Nelio Content to Gutenberg was the ability of adding buttons in the text blocks to continue doing the same thing we were doing with TinyMCE (the classic editor). I remind you that one of the most interesting features of Nelio Content is to allow you to select phrases within the content to share them on your social networks directly, or to mark them and then our algorithm will select the most relevant and set up a series of automatic promotional messages. I explained it to you before in this post.
To include additional buttons in TinyMCE, WordPress has a pretty complete documentation. But how do we do it in Gutenberg? How do we add a button in rich text blocs in WordPress?
It is clear that keeping this functionality is key to continue providing a quality product such as Nelio Content, not only for our customers but also for ourselves, as we, too, are interested in using the sentence highlighting functionality in Gutenberg.
For this reason, I decided to open an issue in the GitHub of the Gutenberg project explaining the problem and asking for help in January 2018 (almost a year ago, at the time of publishing this post). There I asked for the possibility of adding buttons to Gutenberg’s text blocks in order to work with the selected text in such blocks.
The evolution of the issue was positive and in the end such functionality was added thanks to Gutenberg’s Format Types. Since the documentation is still quite poor (as I write this post), I’m going to explain how to add a custom button to the text blocks of the block editor, so you don’t waste your time and have an easier time than me.
You’ll find all the plugin code that adds a button to the editor in this GitHub repository. Although it’s quite simple, I’m going to explain in more detail the most important parts of this project.
The key project file is the one you will find at /src/js/gutenberg.js and that you have below:
In the icon attribute of RichTextToolbarButton you can put a string with the name of a WordPress Dashicon instead of the SVG. For the SVG to work, keep in mind that we use the svg-react-loader package that converts SVG files into React elements, which is what this React components need.
The code uses the ES6+ syntax to make it easier to understand, but to make it work you have to process it with Babel, and for that we have this configuration in webpack:
Note that the script is queued in enqueue_block_editor_assets hook, which is the one that assures us that the script will be loaded only when the WordPress block editor is used.
If you want to try the code, download the GitHub project and move the folder to your WordPress within /wp-content/plugins. There, open a terminal and run npm install. You need to have NodeJS installed for everything to work and be able to include the necessary dependencies that our code requires.
When you open a post for editing, you will see the new button appear in the text blocks. If you select a fragment of the text and click the button, you will see the selected text appear in the browser’s console. This is what we expected to happen as we saw in the code above.
To Know More…
This is only a minimum example of how to put a button in a text block. If you want the selected text to be modified when you click on the button, I encourage you to review the code of this plugin where several buttons with different, more complex formats are added.
On the other hand, for those of you who want to go even deeper into the subject, I recommend that you look at the code of the GhostKit plugin, which modifies Gutenberg’s default interface by adding different additional elements. It is also a code that is very well structured and easy to understand.
At some point we will have an official and detailed documentation covering all aspects of this Gutenberg features, but for now we have to read code to learn how to implement these types of modifications of the WordPress block editor. Good luck!
If only I had a calendar where I could schedule all my upcoming posts… Hold on a sec, I do have one! And it even helps me to promote it on social networks! Discover our new plugin!
We always want to know what visitors do when they come to our website. Do they read all the content of the pages or just part of it? Do they see the button that leads to the pricing page? We have thousands of questions whose answers could help us to improve our website and thus increase the success ratio of our goals. Goals that, directly or indirectly, we want to turn into money 🤑.
Thanks to web analytics we have much of the work done. If you are a regular reader of our blog you know that Google Analytics can give you a lot of information about the behavior of your visitors. And it’s a free tool whose installation is very easy! But this is only part of what we can find out about our website. There are other techniques to understand visitor behavior. And today we will focus on heatmaps.
When we talk about usability in software one of the most common tests is to analyze the real behavior of users. This is done in a laboratory specially prepared in which a user is asked to complete exercises in front of the computer and everything is recorded for further analysis.
The most curious part is the recording of where the user is looking at with a camera that points to his or her eyes directly (a technique known as “eye-tracking”). In this way we can know exactly what coordinates the user is looking at and see what captures his or her attention and how he or she reacts to the user interface presented to him/her.
This technique gives you accurate information about user behavior, but it has some drawbacks. The main problems with this type of test are its high costs (you need a special lab with the right equipment), the complexity of analyzing the data you collect (converting coordinates into useful knowledge is difficult if you haven’t done it before) and its inefficiency (testing every user is slow, they have to be physically present in the lab, and you will need a more or less representative sample of these for the data to make sense).
A heatmap is a visual representation in which we observe different colors indicating the relevance of the different elements or areas that are part of the web. The warmer colors indicate a greater interaction in the zone while the colder ones show the opposite. In the following screenshot you can see that the left part, where the cheaper purchasing plans are defined, captures more attention.
Heatmaps are the low-cost version of conventional usability analyses. Here’s why. On the one hand, you don’t need a complex lab—any visitor on your website can participate in the test anonymously and even without knowing it. On the other hand, the cost is very low because you’re tracking the mouse cursor (not the eyes), which, sure, is less accurate, but it works quite well and has its scientific basis.
Therefore, heatmaps are the perfect alternative for you to understand how your visitors interact with the web without having to need a complex usability lab. In addition, there are other variants such as clickmaps, which only take into account the clicks and not the movement of the cursor, or scrollmaps, which mark the depth at which visitors reach moving vertically down the web.
A Script to Simulate a Heatmap in Your Web
If you want to try how to make a heatmap of your behavior on your website, you’re lucky because I’m going to explain how to do it easily. You don’t need to know how to program, just how to copy and paste.
Once you have done this, copy the following piece of code (which you can also find in my GitHub here):
This has only been a kid’s game, but it’s fun, isn’t it? Keep in mind that, for such an experiment to be valid, you’ll have to track your visitors transparently (i.e. they should not know their actions are being “watched”) and you’ll have to aggregate their cursor tracking data. This way, the data would be real and the conclusions you could draw about it would be valid.
If you feel like it, don’t hesitate to leave me a comment with your experience. I’m sure that the information you get from heatmaps will be very useful for you to better understand your visitors and act accordingly.
I hate it when I waste my time doing the same tasks over and over again. That’s why we created Nelio Content, so neither you or I get stuck with boring stuff! Check it out!
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.
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?
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.
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 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).
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.
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 😉.
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 🧐.
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.
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.
Do you want to drive more traffic to your web? So do I! That’s why we created Nelio Content, a new plugin that automates content promotion in social networks. Want to know more?
When we talk about marketing campaigns, you’re probably thinking of placing an ad here, posting on your social networks there, launching a few specific landing pages… Unfortunately, this approach is increasingly proving to be less successful.
In this article, we will study how to create a successful marketing campaign for your business in five easy steps.
1. Set Your Campaign Goals
Before you start spending your money on advertising or your time and effort on meaningless actions, think about what you want to achieve with your marketing campaign. If you don’t know what you want to achieve with your campaign, you will hardly be able to assess whether it has been a success or a resounding failure. The key here is that the goals you define must be measurable.
For instance, just saying “I want more visitors” does not help. You should study how many visits you have in a given period of time and estimate the percentage of growth you want to achieve in the next period. This way you can clearly assess over time whether or not your marketing campaign has paid off.
And now it comes when reality slaps you in the face… Defining the objectives of a marketing campaign in a realistic way is not easy. It may seem like it is, but be aware that in marketing nothing is.
2. Determine The Budget You Will Spend on Your Campaign
The amount of money you can spend will directly affect the type of actions you can take in your marketing campaign. It is not the same to have thousands of dollars to spend on TV ads as it is to have more modest figures that will only allow you to put an ad on another website.
This is not to say that low-cost marketing campaigns cannot have the same result as those that burn money like hell. But it’s clear that like everything else, money helps.
Always think first: is this the best/most effective/most convincing way to reach my client? In this way you can save money on launching actions that will do little or nothing for your marketing campaign.
Remember, you don’t necessarily have to spend a lot, but you certainly will have to spend a little.
3. Choose The Medium to Launch Your Campaign
Now that you know your goals and the budget you have to achieve them with your marketing campaign, what channels will you use? E-mail address? Social networks? Phone calls? TV commercials?
Keep in mind that some communication channels will be more appropriate for your target market than others. For example, placing radio ads can be a complete waste of money if your target market does not regularly listen to the radio.
Think about the places and habits of your target market when you choose the channels to reach them. Where do they spend their time? Where are they most likely to see or hear and pay attention to information about your products and/or services? In a magazine? At a bus stop? On their cell phones?
4. Plan The Actions to be Done And Execute Them
Write exactly what you’re going to do and when. It doesn’t have to be elaborated, but writing down what actions you are going to take will greatly increase your chances of moving forward and will serve as a record to use when you go to evaluate the success of your marketing campaign.
For instance, if your marketing campaign consists of writing a series of blog posts on your blog about a certain topic in order to get more visitors interested in it, your action plan could be like that:
Think about the contents to be written on the web.
Define the titles of the contents and convert them into blog posts.
Plan posts in the editorial calendar and assign them a date and an author.
Write the posts.
Review the posts and schedule them for automatic publication.
Plan the promotion of the contents on social networks for the coming months (here Nelio Content can help you a lot).
This is an example of a simple campaign that you can easily carry out. Remember, the simpler, the better. Each time you complete an action, go back to your list and mark it with the date you completed it. This will keep you organized and you’ll love the feeling of progress you’ll be making.
5. Measure The Results, Improve And Repeat The Process
When the campaign is over, it’s time to see how successful it was. Go back to your marketing goal, measure what you decided to measure to determine the success of the campaign, and you will see what has happened. Once you have measured the results of your marketing campaign you will be able to make decisions about the marketing strategies you have used and the future campaigns to be carried out.
If the investment you made in Adwords ads hasn’t paid off and all your new visits have come from your social networks, boost that in the next campaign. Improve or eliminate what doesn’t work in your marketing campaigns and enhance what has brought you the most benefits. And, above all, repeat the process over and over again. This is the only formula that works for successful marketing campaigns.
Examples of Successful Marketing Campaigns
Any marketing campaign is better than none at all. This way at least your efforts to attract customers will have a strong foundation and follow a proper strategy. But making your marketing campaign a mass success is difficult (I said difficult, not impossible). That is why it’s important to learn from others and that’s why I decided to end this article by showing you some of the campaigns that were once successful, far exceeding the goals they had set.
The Man Your Man Could Smell Like (Old Spice)
The men’s beauty and body care brand Old Spice became world famous in February 2010 thanks to the following video (if you didn’t see it in its day, don’t hesitate to play it now):
Funny, right? The video became viral (at the time of writing this article it has 55 million views) because it is very different from what you would expect from such a brand. But Old Spice’s marketing campaign didn’t stop there. Taking advantage of the momentum of the video, in June they launched another one with the same actor and also created almost 200 short videos in response to the comments they received on social networks such as Twitter or Facebook. Thanks to this, the brand got 29,000 new fans on Facebook and 58,000 more followers on Twitter.
Lessons learned: Making a marketing campaign totally different from what is expected from you or your brand can be a good way to stand out. If you also take advantage of the momentum and are proactive in answering the feedback you receive, you will have a guaranteed success.
Get a Mac (Apple)
Apple’s marketing campaigns have always been a wonder, but Get a Mac made a huge difference for Apple.
A lot of people discovered an alternative to the PC thanks to this marketing campaign. The company saw its market share grow by 42% in the first year thanks to the help of this video series. These ads explain to the Apple audience everything they need to know about the product in a simple and intelligent way.
Lessons learned: Explaining the benefits of your product in a simple and clear way is key to making your marketing campaign work. If you are also able to compare yourself with your competition by highlighting your advantages, then so much better.
Ice Bucket Challenge (ALS Association)
In the summer of 2014, the ALS Association (which helps to investigate amyotrophic lateral sclerosis) asked its followers to do one of two things: make a donation or throw a bucket of ice water over their head.
This challenge was known as the Ice Bucket Challenge. If you accepted it, you also had to nominate others to do it. The idea is simple, either you get a donation or you recommend others to participate. In this way, little by little the challenge became viral on the Internet and many celebrities joined the cause. The campaign raised $115 million, in addition to global media exposure.
Lessons learned: Exploring other channels besides the traditional ones to launch your marketing campaign can be a very good alternative. Trying to get your customers to do the advertising for you or help you find other potential customers is great.
Obama O’s And Cap’n McCain’s (Airbnb)
By January 2008, Airbnb’s founders, Brian Chesky and Joe Gebbla, had squeezed the most out of their savings and their credit cards were in red. They had no choice but to do something desperate in order to get funds and continue with the project. Taking advantage of the electoral campaign in which Obama and McCain were fighting, they thought they could promote Airbnb by giving original cereal boxes to bloggers and journalists: they created 500 boxes of personalized cereals with Obama’s caricature, in blue, and 500 with McCain’s, in red.
In addition to sending them to the press, they sold the boxes of cereals for $40, making a profit of $20,000 that allowed them to continue their adventure. An example of how creativity can find solutions to real problems.
Lessons learned: Sometimes marketing campaigns that may seem crazy at first are not so crazy in the end. We have to think beyond the problem we have in front of us!
Fortnite Battle Royale (Epic Games)
The latest trend in video games is (at the time of writing this post) Fortnite. This is a free video game (with in-game purchases) whose Battle Royale mode is a worldwide hit.
The funny thing is that Epic Games launched the game without this particular mode in 2017. But they saw the success of the video game PlayerUnknown’s Battlegrounds (PUBG) and copied the mechanisms of this game in Fortnite, launching the Battle Royale mode we mentioned earlier. At first few took it seriously, but slowly and by fixing the bugs in the original, as well as taking into account the feedback from the gaming community (something that PUBG apparently didn’t do), it has become the dominant player in the market.
Lessons learned: Copying your competition can be a perfect marketing campaign if you avoid the things they do wrong and power your strengths.
Are you a WordPress enthusiast? If you are, then you need to take a look at our new plugin–Nelio Content. There’s so many things you can do without leaving your Dashboard ever… Discover them all!
Your website is more important than you might think—it’s where you’ll showcase your work, describe who you are and what you do, write about your topics of interest, and so on, so you have to make sure your visitors will like it. Remember it’s the first image people will take of you when they are looking for you on the Internet. Therefore, it needs to be more original and reflect who you are. That’s why it’s so difficult to design a beautiful and accessible site. In general, personal websites can have quite different designs depending on the objectives they seek:
Curriculum: website whose main objective is to introduce yourself to get a job,
Personal brand: to become better known or famous and thus gain more opportunities,
Portfolio: website where you want to showcase your incredible work,
Blog: to share with others your passions and, in some cases, to have income through advertising, and
E-commerce: the main purpose is purely commercial by selling your products, works, etc.
Actually, a single site can try to fulfill more than one goal at a time, which means the final designs we see are varied and incorporate very different elements in their design. Today I’d like to share with you 15 personal web designs (based on WordPress, of course) that I think might inspire you.
Let’s start with a very good example of a personal website whose main objective is to share a subject of study or interest and, at the same time, increase the reputation of its author:
Enrique Dans, Professor of Innovation at IE Business School since 1990, maintains one of the most reputable personal blogs on innovation in the startup world. According to him, its goal is:
It’s a purely personal page, written only by me, and which I use fundamentally for two things: to maintain an orderly repository of all my activity and to receive valuable and permanent feedback on topics which, in many cases, I end up later incorporating into my lectures, conferences, or press articles. (Enrique Dans, source: https://www.enriquedans.com/acercade)
His website was designed by Blogestudio. What I like the most about it is its absolute sobriety and simplicity, clearly in line with the expected image of a professor of IE Business School. And of course without any kind of advertising that would disturb the reading of the articles. The main page is the blog itself and, as a result, the quality of the content of its articles is outstanding.
If the objective of your personal website and the image you want to give are similar to those of Enrique, keep things simple and focus on high-quality content. But if you’re looking for something more ground-breaking and need an original design on your website to showcase your innovative and artistic side, here’s a selection of personal WordPress websites that I think will inspire you. They are all unconventional and, in many of them, there’s a lot of design work behind them. So, here we go:
Phil Casabon is a great expert with recognized prestige in Freeskiing, a specific type of alpine skiing that involves tricks, jumps, and terrain park features such as rails, boxes, jibs, or other obstacles. This form of skiing resulted from the growth of snowboarding combined with the progression of freestyle skiing
His website has been developed by Pier-Luc Cossette, a designer from Quebec. The web design perfectly conveys that freeskiing is exciting and the love of Phil Casabon for this sport. As noted on his own website:
Choose a job you love, and you will never have to work a day in your life.
Coraline Colasse is a Parisian art director. Her website has been designed by Fabio Carretti.
This website is very original—browsing on the home page is done by selecting and dragging the mouse. This motion reveals the author’s different projects. Although I personally didn’t find this functionality very intuitive at first, it gives a unique artistic touch to the web.
Anna Morosini is an Italian photographer who graduated in Modern Literature and holds a Master’s degree in High Level Contemporary Image at Fondazione Fotografia of Modena. Her website has been designed by Gusto Ids.
The animated and minimalist design invites you to enjoy the visualization of Anna’s incredible and sensual photographic work. A design perfectly aligned with the author’s work.
Emanuele Papale is a web designer from Pisa currently working in Amsterdam. The aim of his website is to showcase his design capabilities along with some projects. The menu is vertical and the portfolio display with animations is original.
I guess I don’t have to introduce the pop star, Katy Perry. Her WordPress website is a clean and daring site, which manages to combine the artist’s personal pop image with a magazine style functionality. Super easy to use!
Perry’s website proves that you can have a lot of personality using just a simple white background and easily navigable links, giving fans the option of listening, viewing, and learning easily as they please.
Tyler Fink is a graphic designer in Ithaca, New York. His great website has been designed by himself.
I love the home page layout that allows you to write directly on top of each typeface the text you want and test if you like it—it perfectly achieves the objective he wants to achieve with his website!
Tobias van Schneider is a German designer with great recognition in the design world. In his website, designed by him, you will discover his sources of inspiration, his secrets for success, and various career tips, along with many other ideas of this sector.
The design and content of his website can be very inspiring if you’re thinking of an original design for your website.
David Blum is a Swiss web designer who has designed a minimalist website to showcase some of his design work. You can also read his inspiring articles and see his resume.
I like the design of this website that has a clear objective and achieves it with the minimum, in a clear and simple way.
As you can see, my selection has been quite varied in terms of design elements, some of these pages being very new. Even if you don’t like (some of) them, they prove my point—personal websites should reflect the personality and creativity of their authors. And that should be one of the main objectives that any web design should achieve, don’t you think?
What are you waiting for to add your personal WordPress website in the comments section? We want to see them!
I hate it when I waste my time doing the same tasks over and over again. That’s why we created Nelio Content, so neither you or I get stuck with boring stuff! Check it out!
If you are an entrepreneur, I assume you analyzed your competition in detail before creating your new startup, as it helps you to:
Know where and with whom you really compete: identify your most remarkable competitors and know who’s doing things right, who isn’t, and what the market trends are.
Detect where to differentiate yourself and new business opportunities: if you enter a market where other competitors are already there, you have to offer something different, innovative, and better, so that you can acquire your own customer base. During this process, you might even be able to identify a niche market that your competitors are not serving.
Forecast the future in the market: analysing what your competitors and your possible partners are doing, who’s making investment rounds, or which are the current consumer trends can help you to anticipate problems and opportunities and act accordingly.
In fact, this last point has in our case been the key precursor in the creation of our products Nelio A/B Testing and Nelio Content. Knowing that there were very new companies with already good products on the market (products that we thought could be improved), with an incredible growth forecast (due to recent large investment rounds) and other additional information that we could observe, served to validate that (1) there was a big market and (2) our competition was focusing on large companies, leaving smaller customers unattended. And this is where we saw that we could fit in by providing WordPress plugins that were very easy to use without the need for technical knowledge and that could be useful and practical for any blogger or company with the aim of improving their website and increasing their audience with few resources.
The analysis of your competition is not only done when you want to set up your own company or you must decide what products to create. It is a continuous process that you must carry out throughout the life of your company. To analyze how your competition is doing, you have two options: either you become one of their customers or you use tools that allow you to “spy” on them (how they advertise, what keywords they use, what’s their popularity of external links, their web ranking, their mentions on the Internet or social networks, etc). Unfortunately, there’s one thing you won’t be able to know using any of these methods: what they do to optimize the conversion rate on their website.
Conversion Rate Optimization (CRO)
As you know, the fact that a website has many visits is no guarantee that it will have more sales. Optimizing the conversion rate and user experience is as important as (or even more important than) increasing the number of visits to your website. Remember that the conversion rate is the metric that tells you the percentage of visitors to your website who end up doing a certain action or achieving a certain objective (i.e. “they convert”); for example, those who end up buying a product, subscribe to your newsletter, click on an ad, etc…
You probably already know that the best known techniques for optimizing your website’s conversion rate optimization (CRO) are heatmaps and A/B tests.
Heatmaps help you to detect the weaknesses of your web design. As you see in the image above, the baby is so cute that he gets all the attention, even though that probably wasn’t the goal of the website. On the other hand, A/B tests allow you to have two versions of a page on your website simultaneously, showing different content to your visitors (half of your visitors would see version A and the other half would see version B) and allowing you to evaluate which version is working best.
As you know, our Nelio A/B Testing plugin for WordPress allows you to easily create heatmaps and A/B tests of pages, posts, themes, widgets, products, custom types, headlines, and menus and view the results on your WordPress Dashboard. Well, here are some of the tests that worked the best for our customers to optimize their websites. I’m sure they can inspire you to improve yours.
All, and yes, I’ve said all of our Nelio A/B Testing clients run heatmap experiments. But, what information do heatmaps provide? The most important thing is that they allow you to see where readers are focusing their attention and what areas of the web they click on. Most customers have heatmap experiments on the main page and on the pricing page. Some also use them on the blog, but they are a minority.
What kind of A/B tests do they perform? And, above all, what experiments are giving them the best results? Below I’ve selected some of the ones that have had the most impact on CRO.
The A/B page test allows you to create two or more different versions of any page on your website to analyze what works best. This type of test is the most popular among our customers. What experiments were the most effective among our customers?
Page title: there are titles that are much more attractive than others. For example, a security company got a 21% conversion rate with the headline “Don’t leave your digital doors unlocked” compared to 3.75% of the alternative “How hackable is your family?”
Changing images: that’s a pretty common test on home pages. One company carried out this type of experiment four times (they showed a group of people, an office, a desktop…) and, even though the first three attempts didn’t result in statistically significant test, the fourth did. The latter experiment showed an image of a nice team of three youngsters working and it proved to be overwhelmingly successful. Does this mean such an image will always work better? I’m afraid it doesn’t—another company with a similar experiment had as a clear winner the image in which it was shown, simply, the computer screen with the image of the software. You have to try everything every time!
Changes in the copy: some customers, after only changing the description of the service they offered, improved their conversion rate from 7% to 11%.
Change the call to action text: a car rental company achieved a conversion of almost 5% with “Signup in 30 seconds” over the 2.5% they had with “Request a call back”.
Positioning of the CTA button: a customer was able to improve a conversion rate from 6.25% to 50% just by positioning the “Get Access Now” button almost at the top of the page.
Positioning the product clip: for one of our customers, positioning the video at the top of the main page meant doubling the conversions.
Order in which products are displayed: companies that offer 2 or 3 plans play with the order in which they show their plans. Usually, heatmaps show how people tend to focus on the one on the left, but it is not necessarily the one that ends up generating the most conversions. Ordering them from cheaper to more expensive has proven to be, in general, the order that has a higher success ratio, but you should run you own test and draw you own conclusions.
How prices are shown: a classic among our customers (even we ourselves have done it several times)! For example, one of our customers was a company that offers hourly services and run a test to compare a usual price per service or the cost per hour and you know what? The version indicating that the price of the service starts from a price had a conversion three times higher than the one showing cost per hour!
Steps to fill out a form and make payment: a customer who offers documentation services for registering ships discovered that a shorter, one-page form represented 5% conversion, compared to the low conversion rate of the multi-step form they originally had.
Post Headlines Tests
This type of test allows you to test the headline (i.e. title, extract, and featured image) of a post so that you always see the same headline throughout the web—in the post itself, in your home page, in a search result, and so on—and analyze which one generates more clicks. It’s mostly used by news websites and the results they get are very varied. If you need some advice, test headlines that are very different one from another—from what we’ve observed, experiments with similar headlines don’t usually give clear winners.
This type of test is also, along with the page test, one of the favorites of many of our customers. Why is that? Because it allows you to homogeneously test widgets throughout the whole web. For example, a customer tested two different color and layout versions of the text in the footer to subscribe to their product. The alternative was to double the number of subscriptions.
By analyzing the experiments carried out by our clients, we confirmed some of the hypotheses we already had. The first is that the impact of converting a website is much more important than the number of visits received. We’ve seen that some designs that do not generate any conversions will get impressive results by simply applying small changes to them. The second is that our intuition or hypothesis about what works and what doesn’t is often wrong—you have to create an experiment and validate your beliefs before committing to any specific designs. Third, remember the following: what works for the rest of the world might not work for you. Run your own tests and draw your own conclusions. The more tests you do, the more chances you have to improve your website—we’ve seen that precisely those customers with the highest number of tests are the ones who make the most significant conversion increases. So, what are you waiting for to run your own A/B tests? 😉
Do you want to drive more traffic to your web? So do I! That’s why we created Nelio Content, a new plugin that automates content promotion in social networks. Want to know more?
Every year, Inc. 5000 publishes a list with the first 5,000 companies in the USA that have experienced the fastest growth in the last three years. This study gives us a fantastic opportunity to see how popular WordPress is in these companies and contrast that with the general use of WordPress in the world, as we did in previous years:
On the one hand, according to BuiltWith, the use of WordPress in 2017 of the 10 thousand best websites is 30%. Not bad at all, huh?
On the other hand, this year 2017 there are 54 of the top 100 companies in @inc5000 that have their websites in WordPress. That is, more than 50% of the fastest growing companies in the last three years use WordPress. Cool!
To show you a little bit what kind of businesses we’re talking about and the look of their websites, I compiled a list with the 16 WordPress websites of the top 30 in Inc. 5000. Hopefully, you’ll find the inspiration to set up one of the companies that will be featured in the 2018 report 😉.
2017 Inc. 5000 Rank: #1 3-Year Growth: 50,058% 2016 Revenue: $54,2 M
America’s fastest-growing company is the e-sports phenom Skillz. The mobile gaming streaming and competition platform provides a space for players to participate in tournaments and for fans to interact. It was co-founded in 2012 by e-sports fanatic Andrew Paradise. The company’s astounding 50,000% three-year revenue growth hit $52.4 million in 2016.
2017 Inc. 5000 Rank: #2 3-Year Growth: 30,065% 2016 Revenue: $37,4 M
EnviroSolar Power installs and manages solar energy services in both residential and commercial facilities. Founded in 2012, the Fort Worth company provides a free home energy assessment to customers, and if solar energy is a fit, it helps clients install and maintain their systems. EnviroSolar posted 2016 revenue of $37.4 million in 2016.
2017 Inc. 5000 Rank: #9 3-Year Growth: 14,439% 2016 Revenue: $41,7 M
Greenspire was founded in 2013 with the goal of turning traditional houses into green ones. The company installs solar panels, provides insulation, and redesigns water systems to reduce waste. It also sets up home security systems and specializes in creating smart homes that can automatically limit power usage when no one is home.
2017 Inc. 5000 Rank: #24 3-Year Growth: 9,507% 2016 Revenue: $65,7 M
Ion Solar is a premium, full-service solar provider. They offer affordable solar solutions that allow their customers to enjoy the benefits of solar with little or no up-front costs. Their full service includes the design of the system, all required permitting, installation and inspection, and system maintenance, all for a fraction of the cost of traditional power and using all premium equipment.
The Ion Solar website uses a customized theme called Ion Solar WordPress Theme, developed by Adduco.
2017 Inc. 5000 Rank: #4 3-Year Growth: 21,319% 2016 Revenue: $26,8 M
Club Pilates Franchise is bulking up. The fitness company’s stated goal is to open 932 studios across the U.S. by early next year—and it’s well on its way to achieving that milestone. The Costa Mesa, California-based company reeled in $26.7 million in 2016 revenue, an uptick of 21,319% from 2013.
2017 Inc. 5000 Rank:: #8 3-Year Growth: 16,980% 2016 Revenue: $59,6 M
Liftoff is mobile marketing platform on which clients pay when users make a purchase or sign up for an account. Liftoff aligns its incentives with clients’ through its business model—that is, Liftoff doesn’t get paid unless you get results.
2017 Inc. 5000 Rank: #10 3-Year Growth: 13,926% 2016 Revenue: $17,2 M
FormulaFolio Investments is an algorithm-based money manager and software platform, catering to independent financial advisers who need a hand managing their business, as well as client investments. Investment adviser Jason Wenk founded the company in 2012 by building an algorithm that automatically rebalances portfolios and makes trades according to market analysis and a client’s investment goals.
FormulaFolios has its website based on a fully customized theme developed by the digital agency Impact .
2017 Inc. 5000 Rank:: #15 3-Year Growth: 12,893% 2016 Revenue: $28,3 M
Forward Financing is a company based in Boston’s Financial district that strives to provide small business owners the financial access they need to capitalize and expand on their businesses with ease of mind. With a proven business model, and led by an experienced executive team, they’ve funded over 3,000 small businesses with working capital.
2017 Inc. 5000 Rank:: #12 3-Year Growth: 13,665% 2016 Revenue: $13,1 M
ShipHawk was founded in 2012 by Jeremy Bodenhamer and Aaron Freeman and offer a very powerful transportation management system (TMS). Jeremy was the owner of a pack and ship store and was frustrated by antiquated software and carriers’ inability to give customers accurate prices. Their goal is to give retailers, manufacturers, and distributors, large and small, B2B and B2C, across all product types, access to the tools they need to compete in an increasingly complex world.
2017 Inc. 5000 Rank: #16 3-Year Growth: 12,503% 2016 Revenue: $59,2 M
Solera Specialty Pharmacy was founded in 2013 and specializes in dispensing prescriptions for patients with chronic illnesses such as HIV, Hepatitis C, cancer, rheumatoid arthritis, multiple sclerosis, and rare genetic disorders.
The feature that I loved the most was CSS Grid. At that time, CSS Grid was still under development and no browser supported it by default. However, Jen told the audience that “by next summer [this summer], all major browsers will already support CSS Grids, so you’d better learn how to use it” and, well, she was completely right. So, I think it’s past time we talk about this amazing feature and how you can use it in your own developments.
There’s no “CSS Grid” without “Grid”
Before we dive in CSS Grid, we should probably spend a couple of minutes talking about grid designs in general. Essentially, a grid defines the underlying structure of your website using a set of invisible lines (rows and columns, actually) that generate the layout. Since an image is worth a thousand words, here you have this abstract definition depicted:
As you can see, the web has two clear row sections: welcome and news. Both sections have an underlying structure of 12 columns, even though these two blocks use them differently. Thus, the first block is divided in two halves—on the left side, there’s a featured news; on the right side, there are four smaller news. The second block, on the other hand, divides the content in three evenly-distributed columns.
If you’re familiar with frameworks such as Twitter’s Bootstrap or Foundation, you already know this 12-column structure. If you’ve ever wondered why they use 12 columns (instead of, for instance, 10), the answer lies in the flexibility it offers. 12 offers much more combinations than 10, because 12 has more factors—that is, it can be divided by more numbers— than 10.
And that’s all you basically need to know about grid designs—a set of invisible columns and rows define the areas in which you’ll position the content 🙌 If you want to deepen in the subject, take a look at Ed Wassermann’s introduction to grids. And, please, feel free to share your own experience with us in the comments section if you feel like I missed something important—I’m sure our readers will appreciate it 😜
How Did We Use to Implement Grid Designs?
Grids aren’t new—they’ve been with us for quite a long time. If we talk about web design, it all started with tabular layouts, followed by the beautiful, responsive frameworks we just mentioned (Bootstrap and so on). Both solutions required a lot of HTML markup to explicitly define the underlying grid layout. For instance, let’s try to re-create BBC’s website using Bootstrap. The HTML source code would probably look similar to this:
which results in:
As you can see, the resulting HTML code clearly contains a Grid layout. For instance, if we focus on the first block, you’ll see we have a div “row” divided in three columns. The width of each column is specified in the class attribute (using some predefined Bootstrap classes), but we still have to tweak the heights using specific CSS rules. That’s quite ugly, isn’t it? It all looks pretty similar to HTML tables! 😱
How to Create a Layout with CSS Grid
CSS Grids will help you separate the content from its presentation. I’d say that CSS Grid is the most powerful layout system you have right now. Let’s recreate the example we’ve just seen, but using CSS Grid instead:
As you can see, the HTML code is much easier. There isn’t any layout information in the resulting code—each section contains a simple list of news. If we rendered this page, it look like this (I’ve kept the colors to help you visualize the result):
Now, how do we create the underlying grid? Using plain and simple CSS rules, of course! First, we need to apply a few rules to the parent containers. These rules will specify the grid itself (columns, rows, spacing, and so on):
which results in this:
Wow! Pretty cool, huh? With just a few CSS lines, we now have a beautiful grid rendered by our browser. Each block has been automatically placed in a cell, without doing anything else. But the resulting page is not exactly what we wanted, isn’t it? What’s wrong?
We divided the welcome block in three columns and two rows (that is, 6 cells). However, this block has 5 news only, which means that the automatic positioning of elements will leave one cell empty. To fix this, we need to add one extra CSS rule for the first child—we need to tell the browser that the first and foremost news in the header section takes two cells:
which results in the page we wanted:
Voilà! That’s all! We now have the same result we had in the beginning, but with a simpler and more elegant source code. We’ve been able to separate the HTML content from the CSS layout once and for all 👏
Resources for Learning CSS Grid
To get started with CSS Grid, I recommend you CSS Grid Garden by Thomas H. Park. Throughout its 28 levels, you’ll learn all the basic stuff you need to know about CSS Grids:
Other resources are:
A Complete Guide to CSS Grid at CSS Tricks. I don’t think this website needs any introductions… Here you’ll find all CSS Grid properties, along with detailed explanations and examples on how to use them. The website is divided in two columns—properties that apply to the container element (which define the grid itself) and properties that apply to children.
CSS Grid Layout at Mozilla. Probably less detailed than the previous resource, this website also contains some useful information about CSS Grids.
Grid Examples. Several examples of grids created using CSS Grid. Are you wondering how to get started? These examples will give you the perfect layout skels 😋
We can finally define the layout of our websites independently from our content. CSS Grid will definitely revolutionize web design—it’s powerful and elegant. Learn this new technology and apply it to your new projects!
Last year, we found in Inc. 5000 2015 that 42 of the top 100 companies have their websites in WordPress. That is, 42%. Instead, this year 2016 there are already 62 companies among the top 100 who use WordPress. More than 60% of top-100 use WordPress. WordPress growth is unstoppable, since we are talking about 20% more companies among the top 100 who use WordPress.
62% of the top 100 fastest growing companies in the US (@inc5000) use WordPress.
But back to our topic. Next, we’ve selected 23 companies of the Inc. 5000 list that use WordPress. These companies belong to the following industries: advertising and marketing, business products and services, consumer products and services, education, IT services, media and software.
We hope they serve as inspiration for the design of your website and you can grow as fast they do 💪🏻. Who knows, maybe next year we list you on the Inc.5000 (2017)🤔
The information about the companies described below is from Inc. 5000.
I guess you are familiar with them if your passion is comics or collector’s items. Loot Crate sends a monthly themed mystery box of items–gadgets, art, apparel, and gear–to over 600,000 subscribers, aiming to foster the kind of geek community found at Comic Con and other events.
Daniel Hermann and his buddy Sean McGrail loved going out to bars after work–and decided to add paint and a canvas to the experience. Using a licensing model, the company works with more than 250 “creative entrepreneurs” who book local artists to host painting events at bars and nightclubs across the United States.
Los York provides strategy and creative services for social, digital, and TV advertising, and produces content for live action, digital, and experiential projects. Los York has attracted giant global brands like Nike’s Jordan, Morotorola, Toyota, Sonos and WeChat.
Los York website use a customized theme designed by airnauts.com and includes spectacular videos. It is my favorite on this list.
Offers a suite of services that minimizes the cost and risk of global expansion by easing the challenges of hiring international employees and managing international payroll. Operates in more than 150 countries.
Yelling Mule is the developer of the customized theme of Globalization Partners.
Provides application development, user experience, big data and Web-based data collection systems, customer relationship management, and Sharepoint services to large companies and government customers.
This site uses proprietary operational cookies that have a purely functional purpose and third-party cookies that help us understand how visitors interact with the site by collecting and presenting information anonymously. If you continue browsing, you accept their use but you can disable them if you wish. Read more…