Month: March 2020

How to Generate Backlinks for Your Wordpress or ClassicPress Site

Backlinks on your Wordpress or ClassicPress site are still one of Google’s top ranking factors and have a significant impact on the success of your blog. Especially when starting a new blog good backlinks are essential in order to ultimately generate income from blogging! There are different ways to get these high quality backlinks for your blog, and I am going to show you a few of them here.

High Quality Backlinks For Search Engine Optimization

The main goal of search engine optimisation (SEO) is to align and adapt web content for Google’s analysis mechanisms. This improves positioning in search results for relevant search queries. Backlinks count as a ranking factor. In simple terms, these links lead users from relevant websites to your blog. Google examines these links to assess the quality of your content. Consequently, your content will appear higher in the rankings than similar content without backlinks.

However, you don’t need as many of these links as you might believe, and quality is what matters. For example, ten or more links from websites that are only remotely related to your blog’s theme can lead to a lower SEO ranking than a single optimised link for your specific topic. This link could come from a recognised institution in your specialist area. Just to be crystal clear: never simply buy a load of backlinks! This violates Google’s guidelines and you’ll probably tumble down the rankings or, in the worst case, disappear from the index.

So, the main goal is to create organic backlinks, i.e. through natural content such as links from reputable websites dealing with the same subject as your blog. Therefore we are now going to explain the best ways to create these links!

Ways to Ensure You Have Quality Backlinks

Produce High Quality Content

Nowadays, consumers and business customers mainly search the Internet or Google for solutions to their issues. They also look for services to meet their needs. In fact, long before they even consider purchasing a specific product or service, they sift through a wealth of information. Only sites that meet a user’s request for information and skilfully match the relevant queries through original content can compete on the web today. Of course, this also applies to your blog posts.

If you want to convince (potential) customers about a product or service – whether you’re selling your own products or services or acting as an affiliate – you must offer just the right information. This must be specific to your target group and the relevant stage in the buying process. For example, a potential client just beginning to look for information needs different details to someone who may have already compared several products. The former will find basic information to be relevant, while the latter may not find it useful since they need content to help them make a decision.

If you manage to engage your audience on all levels, comprehensively meeting every need and offering real added value, they’re highly likely to share your content and, sooner or later, links back to your page or site will be created.

Create a WordPress or ClassicPress Site With Social Media

People are signing up to social networks in increasing numbers. In addition, online social activity is massive these days. Facebook is still at the top. In Germany, 23 million people engage here on a daily basis. So, it’s no surprise that this and other relevant channels like Instagram, Twitter and YouTube have developed into serious marketing platforms.

One of the reasons for this is the huge potential reach of the content. In addition, linking content with social media or sharing it (‘social signals’) has a positive effect on SEO. Google has yet to confirm this, but the very essence of social networks promotes backlinks!

If your blogs have ‘like’ or ‘share’ buttons, your readers can pass on content through their social media accounts. Naturally, your content must completely convince your audience. When this happens and your posts get ‘likes’, you benefit from the potentially enormous reach we’ve just described and the activity of people on social media. With the right targeting, your posts could go viral, i.e. passed on through social media. Then, you can reach many readers who recognise the quality and link your post to their website on the same topic. This will generate a backlink.

Of course, you shouldn’t necessarily wait until one of your readers clicks the ‘share’ button. You can accelerate this process by sharing blog posts on your social media accounts.

Swapping Links

The procedures above are the basics for generating backlinks. Now, we’ll move on to more specialist techniques: You can strongly influence the creation of high-quality backlinks and exchanging links is a common method. However, Google doesn’t approve of this. If you’re subtle about it and stick to the rules (for example, not having reciprocal links on the home page), you shouldn’t suffer negative consequences.

Also, the procedure is very simple: Look for blogs with the same topic or other websites as close as possible to your area of expertise and ask those running the blogs to link a post to one of your articles. In return, you’ll do the same.

Blog comments don’t have the same SEO strength for backlinks compared to the methods described above. Google tends to recognise any non-organic links and evaluate them accordingly. However, studies have shown that backlinks from comments are beneficial and don’t lead to any negative consequences when it comes to ranking the linked page (at least for the time being and if the procedure is correctly followed).

Once again, this is very simple: Look around for blogs with the same topic and comment about one or more posts under a different name. Include the backlink and with few subtleties, your ranking is likely to benefit.

One of the main requirements for effective backlinks in comments is to really read the articles you comment on and to be constructive in evoking answers. A phrase like “great text” with a link will be quickly exposed by Google and ultimately won’t do you any good.

Conduct Interviews

Interviews are one of the more complex methods of generating backlinks, but they also have great potential to actually become one. These question-and-answer sessions and the statements within are generally considered as highly authentic and credible. To get the most out of this, the interviewee should be someone who holds a position of authority in the relevant area. This way, you’ll offer readers, listeners or viewers some real added value. By meeting these prerequisites it’s highly likely that webmasters with sites on the same topic will refer to your interview, generating numerous quality backlinks for you.

Place Guest Articles on Other Blogs

Guest articles have mutual benefits. As the article’s author, you’ll receive an integrated backlink and the host blog will get some free content. Make sure you check out suitable blog topics for a guest article on your individual theme. Review these carefully – use analysis tools to assess whether generating a backlink will really benefit you. Only then should you request an interview. The higher the quality of your blog content or reputation in your specialist area, the greater the likelihood that the interview will be beneficial.

Create a Blog and Offer Downloads

Offering downloads, such as e-books, white papers or software (demo versions), works in a similar way to high-quality content. Downloads should be as specific as possible to your target audience and provided exactly when needed. Therefore, the downloaded files will draw attention to other blogs and websites, which can link these obviously high-quality downloads.

Get backlinks for your blog

Organise Blog Parades/Reviews

To start a blog parade, call bloggers from your subject area to comment on a topic that interests all participants. Bloggers involved in your blog parade will write an article on the given topic, ultimately creating quality contributions where authors link to the organiser. In return, the organiser of the parade can write a summary with links back to the authors.

Use Round-Up Articles

Round-up contributions ask experts (in this case other bloggers) about specific specialist themes and are similar to interviews. You can simply turn the answers into a blog article and provide backlinks to answer your questions. Since well-designed round-up articles convince your readers just like interviews, they tend to receive frequent backlinks.

Create a WordPress Blog and Post Entries in Recognised Blog Lists

Actually, not all backlinks that are purchased or clearly non-organic are bad for your ranking. If you register with your blog in one or more recognised blog directories, the backlinks won’t be as beneficial as in organic content. However, they can certainly give you an edge over competitors who might not appear there. Google can see the added value and benefit to end users in directories where people can find blogs on a certain topic in a compact list.

Conclusion

In addition to generating backlinks, it is also important that they are continuously added without your intervention. Your job is to simply check them regularly. This will allow you to discover sites that report on your blog and that you wouldn’t have encountered otherwise. This makes it much easier to establish contacts and possibly valuable cooperation. To check and control your backlinks, I recommend Linkminer. There are multiple ways to create strong backlinks. The methods I’ve explained in this article aren’t an exhaustive list but could be the most beneficial. Of course, you can’t and shouldn’t use these all at once or you’ll quickly lose track. It is best to start with the basics, i.e. creating high-quality content and broadcasting it on social media. Once you’re initially successful, you can start to expand. If you enjoyed this post, why not check out this related article on How To Build Backlinks in Your Wordpress or ClassicPress Site!

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: eCommerce, Trends, WordpressTagged with: , ,

How To Build Backlinks in Your Wordpress or ClassicPress Site

If you want your Wordpress or ClassicPress site to rank high on Google, you need to take backlinks more seriously than ever before! The era of randomly building backlinks is long gone as Google’s algorithms are constantly evolving to ensure that the highest-quality content shows up in response to user queries. The simple truth is that all backlinks are created unequal. This is why it is now clear that the only way to win the game of building backlinks is with quality over quantity. With that being said, in this guide, I’ll bring you up to speed on the essentials of backlinks and everything you need to know so that your SEO results will skyrocket in as short a time as possible!

Also, remember to check out more SEO practices to further improve your search results.

What are backlinks?

Also known as inbound links, incoming links, or one-way links, backlinks are links from an external website that link back to a page on your website.

You can think of it as a vote of confidence from the site that’s linking out. Meaning the site gives credibility to a page on your site by indicating to search engines that the content on it is valuable. It relays trust and authority and when search engines see a larger site linking to yours, they rank you higher.

Types of backlinks

There are 2 primary types of backlinks with both having a different influence on the rankings of your website on search engines. Here is a brief explanation of them:

Dofollow links

Dofollow links are HTML attributes that tell crawlers to pass authority and SEO rank to the target sites. These backlinks directly influence your backlink profile because they send a signal to search engines to transfer authority to your website. The links usually have the “rel=dofollow” in the HTML code.

Nofollow links

Nofollow links are simply the direct opposite of dofollow links (used to combat SEO spam). They tell crawlers not to pass authority and SEO ranks to target sites. Humans can still interact with the link but algorithms can identify the distinctions and follow the instructions. The links usually have the tag “rel=nofollow” in the HTML code.

Why are backlinks important?

So why are backlinks important and what advantages do they bring to your site? Let’s take a look at a few major reasons!

Referral Traffic

Referral traffic refers to people clicking on a link while reading a post because they seek to find more information. Backlinks help drive steady referral traffic on autopilot, and the best part is that this type of traffic is highly targeted (lower bounce rates).

Brand authority

As previously mentioned, getting links from popular websites can help build the authority of your brand. Not only is the link viewed as a vote of confidence by search engines, but more importantly, it is viewed as a vote of confidence by users. The authority of that website will rub off on you simply by association.

Organic Ranking

Backlinks can significantly help improve your site’s ranking on search engines. Because when Google sees a more authoritative website linking to your website, it suggests that your site’s content is valuable! Therefore placing more weight on it by increasing its rank on search engine results pages (SERPs).

What makes a good backlink?

It is important to remember that not all backlinks are created equally. There are good backlinks and bad backlinks. Good backlinks will help improve your ranking on search engines while bad backlinks can hurt your rankings. Even get your website penalized!

That being said, your goal should be to be able to construct good backlinks and you can do that by taking the following into consideration:

Authority of the site

The quality of a link can be determined by a domain’s authority. The idea here is that the more authority a site has, the more authority it can pass to your site. So a backlink from a site like entrepreneur.com will have a much bigger impact on your site than a link from a relatively unknown blogger. Google knows that getting links from authoritative sites can be very hard, so when it spots such a backlink, it puts a lot of weight on it.

Relevancy of the site

When it comes to building quality links, a site’s relevance also matters. When Google sees a website link to another, it assumes that they are related and ranks such sites higher. If your site is related to health and you link to a site that’s related to cars, it is obvious that they are not related and you may get penalized for this by search engines. In general, you want to get links from authority sites that are closely related to your site.

Dofollow link

We explained this earlier in the guide that a dofollow link is an instruction to search engines to pass authority to another site. Thankfully, most links on the web are dofollow links, but you will generally want to stay away from some sources like blog comments, paid advertisements and press releases as they are usually nofollow links.

Diminishing returns

If you want quality backlinks, you need links from a domain that hasn’t linked to you before. Well, can you link to a site more than once? Yes, you can but the more often you link to such sites, the less powerful the impact will be.

Link anchor text

Anchor text simply refers to the clickable text section of a link, and it is one of Google’s top-ranking signals. Google wants the target keyword to be included in the link’s anchor text, but make sure it is not spammy so you don’t get penalized for it.

How to build backlinks

There are many ways to get backlinks and all do require some level of hard work and persistence. Here are some of the most effective ways of building backlinks:

Guest posting

Guest posting has always been one of the best ways to build backlinks. When you guest post on other sites, you get to appear as an authority and provide value to their audiences. Furthering your influence and reach. It’s always, however, always best to do your research on the requirements for guest posting by sites in your niche. Some sites have a “write for us” page while others only accept proposals to co-author a piece.

Niche edits

Niche edits involve the insertion of your links into quality, aged blog posts or pages that have already been indexed by Google. They are just as powerful as guest posting! As it can help you benefit from traffic that’s already being driven to the page. You can acquire a niche edit by reaching out to selected bloggers in your industry and requesting for your link to be added to it.

Round-up posts

Round-up posts are one of the most popular types of posts because they provide insightful information shared by experts in an industry. You can create your own round-up posts by sending out an email to a number of experts and asking them one question. A single question increases the chance of getting a response. When you’ve published the post, notify them of it and most of them will end up linking back to you.

Industry forums

Another excellent way to build backlinks is to share your links on industry forums. To avoid being penalized for spamming, only include links to your site when you respond to questions other users ask. Don’t just go about inserting your link into every comment. As this could easily pass for spamming. Only respond when it makes sense.

Social media

You can also build links on social media, but you need to first create full and consistent profiles on all the major social media networks. These can include Facebook, Twitter, Instagram, LinkedIn and more. Once you’ve set up the profiles, consistently share your links on the sites at least once or twice a week.

Conclusion

While building backlinks is important, creating high-quality content is more important because that’s what gets shared!

It’s okay to learn all the tactics of link building but if you don’t have quality content on your site, you may find yourself having to start from scratch again, and you don’t want that.

By putting everything in this guide into practice, you can start building links right away to improve search ranking, leads, and sales! If you enjoyed this post, why  not check out this article on how to Fix the Most Common SEO Issues on Your Site Using 301 Redirects!

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: eCommerce, Trends, WordpressTagged with: , ,

Vue vs Angular Framework Comparison

Selecting a front-end framework can be a tricky and time-consuming process, and many would be developers encounter this dilemma whilst getting “information overload in the process! In today’s article, I am going to quickly compare a couple of JavaScript frameworks which are popular choices, Vue vs. Angular. Let’s look at their history, job market, and learning curve, and other characteristics that will help us determine the winner. After that, I guess, you’ll be able to decide which one to pick for your front-end or full-stack development project.

Library vs. Framework

Let us get the terminology clear before we dive into discussing the features and practical uses of the frameworks in question. Some developers use these terms ‘library’ and ‘framework’ interchangeably, but they’re actually different. A Library is a collection of reusable code that is used to solve common problems.

There are various libraries out there for addressing different problems. For example, we have libraries for performing mathematical calculations. We also have libraries for machine learning, and so on. A framework provides us with a lot of reusable code, just like a library, but it also gives us a structure or a skeleton for application development.

So when using a framework, we have to build our application according to that framework. Frameworks have opinions in terms of how we should structure our applications, how the application should get started, how various components should interact with each other, and so on.

Why Use Frameworks and Libraries?

Angular and Vue are both examples of popular frameworks for building front-end applications. One of the questions we get most often is,
“Why do we have to use a framework or a library to create our apps? Can’t we get by with plain old JavaScript?”

The answer is, “Yes, you certainly can.” But that would be a waste of a lot of  time. Here is the reason. Imagine you want to build a desk. Would you buy pieces of wood and put them together? Or you’d prefer to go to the forest and cut the trees first to get wood? There’s no reason to cut the trees, of course, when there is plenty of wood ready for you to reuse.

We use frameworks and libraries to maximize our productivity and speed up the web development process. There is a lot of code that’s tested and ready for us to reuse without having to reinvent the wheel, in a similar way to some of the well known CSS Frameworks.

The concept with the above is to shorten the development time of a site or app by using pretested and laid out blocks which just make life a lot easier.

Vue.js vs. Angular: Popularity

Vue and Angular are among the top tools used for building web apps these days. But which of the two participating in the Vue vs. Angular duel is better? Let’s find out right now.

We suggest that you look at the results of this StackOverflow developer server in 2019. Here’s the list of the most loved web frameworks.

Angular vs. Vue graph

As you may see, the winner is React, which we’re not going to discuss in this article. But it was closely followed by Vue.js last year, and Angular seems to be losing its popularity compared with 2018.

Still, when it comes to large businesses, Angular is definitely a favorite here. It’s used not only by Google but also by other big companies like Nike, Lego, and The Guardian.

Notwithstanding its being extremely popular with developers, Vue is somewhat neglected by large corporations. Still, it’s gradually picking up and being adopted by more and more companies. Now small businesses like GitLab, Repro, and 9Gag use Vue to create their projects, and chances are other companies will soon follow their example.

Angular vs. Vue: History

Now that you know which of the two frameworks is more popular with developers, it’s about time we took a quick look at their history.

Angular is one of the oldest frameworks. It’s developed by Google and was initially released almost ten years ago. Until 2016, it used to be called Angular.js.

In 2016, the Angular team released Angular 2, which boasted lots of improvements, including the support for Ng Modules. But, in fact, the second version had nothing in common with Angular.js. It’s possible to state that it was a completely new framework. So, to reduce confusion, the Angular team decided to drop the “js” from the original name, and they called the new framework “Angular.” This made a lot of developers unhappy. Their apps, which were developed with Angular.js, had to be rebuilt using the new version. Also, over the last three years, there have been several other releases, including Angular 4 that came out in 2017.

Unlike Angular, Vue wasn’t created by a huge tech company. It was designed by an ex-Google employee six years ago. Presently, it’s maintained by a group of enthusiasts. Even though it’s a new tool, it has gained a lot of popularity over the past couple of years and is on the increase among many web technology outfits due to its clear documentation, which makes it easier to be used by large teams.

Angular vs. Vue: Differences

As you know, Angular is not just about creating and rendering components. Though it has components too and also follows a components-driven approach, Angular has earned the reputation as a complete framework or even platform. It boasts a rich set of tools that help you with developing modern web apps.

All these tools you need for very large apps ship as part of Angular developed by the Angular team. So, you don’t even need to rely on some third-party vendors. Additionally, it uses the native API, HTML templates for the components, and CSS, which you can easily add if need be. On the downside, it uses Typescript as a language, which is pretty hard to master.

Just like Angular, Vue is a complete solution. Though Vue boasts fewer features than its counterpart, this is increasing, for example with the introduction shortly of Vue 3 and the Vue Composition API, and it’s widely used for building UI components in the web application market. It also has routing and state management solution courtesy of the Vue team. Similar to Angular, it uses native API, HTML templates, and CSS. As you see, Vue is quite similar to Angular, especially from the syntax perspective.

6. Angular vs. Vue: Learning Curve

Angular has always been famous for having a steep learning curve because it’s a full-blown framework. In contrast, because Vue is less complex and , it has fewer concepts that you need to learn and understand with less complicated syntax. I would say, learning Vue requires a smaller amount of time and effort than its counterpart Angular.

So, if you’re starting out, I would say – start with Vue. Moreover, it gives you tons more job opportunities Once you learn Vue, if you want to expand your career options or just curious, you can proceed to master Angular.

7. Angular vs. Vue: Performance

We can rightly note that both Vue and Angular offer pretty good performance to users. They might differ on your machine or your exact requirements, or in your web app, of course. But, in general, both tools are darn fast and efficient.

One thing to note, though, according to the benchmark test run on the frameworks in question, Angular was found to be a bit slower. Still, this is hardly surprising, since Angular ships with a pretty big codebase. Consequently, the apps you create with this tool are more heavy and unwieldy. Hopefully, this will drastically become better in the future versions (Angular 7 and higher), where Angular will use a more improved renderer leading to a smaller codebase. If you enjoyed this post, why not  check out this article on How To Build Vue Wordpress Rest API Websites

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: Development, Trends, Vue JS, WordpressTagged with: ,

Creating a Strong Landing Page With WordPress or ClassicPress

When it comes to online promotion, landing pages are a great way to drive your campaign goals. However, creating a successful landing page is different than other types of pages and posts on your Wordpress or ClassicPress site. A powerful landing page is one that is carefully crafted with a few select (yet essential) elements. Whether you’re building one to generate leads, boost sales, or promote a product, there are certain features and techniques you can use to maximize their effectiveness.

In this post, I’ll discuss some of the important elements of landing pages. Then we’ll walk you through the process of creating one in five simple steps. Let’s get started!

Regardless of the type of campaign you’re building the page for, there are a handful of elements that should be included in the design of your landing page. The most important elements include:

  • A catchy headline to grab the visitors’ attention.
  • Clear, concise copy to help persuade the reader.
  • High-quality images to break up the page.
  • A Call To Action (CTA) that stands out.

Nauto provides a good example of a landing page that effectively combines the above elements:

The purpose of a landing page is to inspire and drive action from the visitor. Therefore, it’s important to make sure that each element on the page serves a specific function to help further the mission.

Now we’ve covered some of the essential elements of a landing page, it’s time to put them to use. Let’s take a look at how you can create a strong landing page with WordPress in five steps.

Create Your Landing Page Template (Manually or via Plugin)

Of course, there are workable methods for creating a landing page template. If you’re comfortable working with CSS, you can create your blank page template within an existing WordPress theme.

You can do this by creating a child theme, then adding in new style.css and functions.php files. Next, you can create a custom page template, saved as page-landing.php.

However, if you don’t want to worry about coding, you can use a plugin such as Landing Page Builder (although many options exist). Plugins such as this can make the process of designing your page quicker and easier.

Once you install and activate the plugin, go to LandingPages by PluginOps > Add New Page within WordPress, and launch the editing panel. Next, click on Templates. You can choose a template based on the type of campaign you’re building it for. If you want to work with a clean canvas, we recommend the ‘Blank’ option.

You’ll find similar processes for all popular page builders, and some will even include landing page templates to help get you up and running quickly.

Customize Your Layout and Eliminate Unnecessary Elements

As we noted, landing pages should only include the most necessary elements. Even leaving in the default page title and sidebars included with WordPress pages and posts can be a distraction.

There are plenty of different methods you can use to remove the page title in WordPress. For example, two options are to leave it blank or to modify your CSS. A simple display: none; property and value gets the job done in a pinch.

Depending on the theme you’re using, you may also want to change the page layout to full width to eliminate unnecessary sidebar elements or padding:

Some pre-set templates from plugins (such as the blank template from the Landing Page Builder plugin) will sort this for you. You’ll usually be presented with a blank canvas for you to create your own layout:


However, you’ll want to be sure to delete any unnecessary links, buttons, and other elements before continuing. This could give you more work than if you started from scratch, so it’s worth bearing in mind when you make your initial decision on which approach to take.

Write Clean, Concise Copy Using Action-Based Language

Landing page copy should be straightforward, clear, and specific. This includes a brief, attention-grabbing headline that quickly explains the offer.

For the page copy, focus on the benefits of the promotion. Think small, digestible paragraphs and bullet lists that make for easy scanning. It’s also a good idea to incorporate action-based language, such as ‘download your e-book now’ or ‘start your free trial today’.

If you’re using the WordPress editor, you can insert and format your copy as you would any other page. Page builders usually let you insert your own using the design blocks:


With the advent of the Block Editor, the boundaries are becoming blurred. Both this and page builder plugins include modules for inserting body copy, headlines, lists, icons, and much more.

Add Images or a Video That Accurately Depicts Your Offer

Using high-quality images and videos can make your landing page more engaging and scannable. As a general rule of thumb, aim to use media that is representative of your offer. It’s also best to use unique, creative images rather than generic, stock photography.

Again, if you’re using the WordPress editor, you can insert media via the content blocks:


If you’re using a page builder plugin, there’s usually a similar offering, and you may find more power under the hood. For example, you could add a background image and overlay the landing page text:

When choosing where to place your images, it’s important to consider your CTA and lead forms. Let’s look at this now.

Strategically Place Your Lead Form and One Call To Action

Landing pages are usually purpose-driven, making the CTA arguably the most important element on the page. Whether it’s a download button, a sign-up form, or something else, the CTA should stand out on the page to capture the visitor’s attention.

Best practice is to keep it ‘above the fold’ – in other words, so that it’s visible without scrolling. This way it’s immediately visible and accessible, and also becomes the focal point of your landing page.

When creating and styling your CTA button, consider using a contrasting color that stands out against the rest of the page. We also recommend using clear language so your visitors know exactly what they need to do.

It’s worth taking some time to work on your CTA formatting and style, as it’s such an important part of your landing page:

It’s a good idea to work closely with your client (if that’s the working relationship dynamic,) given your CTA’s importance and value to the success of your promotion.

Landing pages are an effective way to generate leads and drive conversions. However, if you want them to be the most effective, there are certain ‘must-have’ elements to include during the design and creation process.

In this post, we explained how you can create a strong landing page with WordPress in five simple steps:

  1. Create your landing page template (manually or via a plugin).
  2. Customize your layout and eliminate unnecessary elements.
  3. Write clean, concise copy using action-based language.
  4. Add images or video that accurately depicts your offer.
  5. Strategically place your lead form and one CTA.

Do you have any questions about creating a landing page with WordPress? Let me know in the comments section, and if you enjoyed this post, why not check out this article on 9 Top Call To Action Plugins For WordPress or ClassicPress!

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: eCommerce, WordpressTagged with:

Top Tips to Become a Freelance Writer with Wordpress or ClassicPress

Writing articles for WordPress or ClassicPress on a blog can be a good way of relaxing, letting go of daily tensions and a good method to control stress, but what about doing it as a work? What if you become a freelance writer? Being a freelancer is not a garden of roses but it is an experience that can be very fulfilling both for your income and your sense of accomplishment. Try asking a web designer how nice is to deal with customers, you’ll understand my point. In this guide I will share with you my own experience, ideas and methods in hopes that it will inspire you to become a freelance writer.

Decide What You Want to Write About

Deciding what you should be writing about can be a tiresome experience if you are not a determined type of person. As a general rule, you should write about what you love the mostSettling for less or simply jumping on a trend is not an option. Writing for a blog professionally is not something that can be achieved with mild interest – you need passion.

People will want to read about your experience, your expertise and your opinions if it comes from a place where you are inspired to do it. Otherwise the articles you write will feel dull and empty. There is far too much content on the net for you to contribute with boring articles. When you write about something, your passion needs to be there.

Don’t Wait for it to Happen

Planning on writing something for a blog? Don’t plan too much or overthink it. When you become a freelance writer creating articles can be a painfully slow process if you schedule too much. Open up an empty page in your favorite editor and start writing. As a general rule, I’ve found it far easier to first focus on the broader idea and then add in main topics/titles. If you have the main topics written, the rest of the article will flow much faster and easier.

Create Your Own Blog & Resume

If you want to attract attention you need to have your own blog up and running. Pick an affordable hosting service to start a blog (one great option is Cloudways which starts at just $10/mo . After you’ve published enough content, consider creating your own resume online.

Although you can use free services like about.me, I always prefer my own domains. You can make your own resume online with easy tools and in no time. For the domain I suggest simply using your own name. In my case, xhostcom.com is more than enough.

Use the Proper Tools

I am assuming that most people will be using Windows, so the below is based on this, however, I use Ubuntu Linux, as I prefer it.

Compiling a resume can be very easy if you use the proper tools. While you could use one of these awesome resume WordPress themes, another great way to start up your own resume is with a free site builder such as Mobirise, Wix, etc. This handy tool will allow you to build a website in no time, just by adding modules, pictures and text. Once you have your website ready, it’s as easy as copying the files to your new hosting account and your site should be visible right away. Mobirise is an HTML website builder that works entirely code free so there is absolutely no need for any previous knowledge. Aside from moving files to your hosting and since it’s an HTML builder, it won’t need to create databases either!

Working on articles once you become a freelance writer will require some tools. If you love to write offline, Word is going to be your best friend. If you use Windows, be sure to add OneNote to your favorite set of programs. That handy tool will allow you to save content easily and sync it with the cloud. It’s very helpful when you have new ideas to write about and not enough time to make an actual new document. OneNote syncs with all your devices so it’s an easy way to make quick notes that could turn into full articles later.

Become a Freelance Writer: Tools

If you edit all your articles by yourself, it’s a good idea to have basic knowledge in Photoshop. This tool allows you to manipulate pictures easily. If you’re not into Adobe you can always go the free route with GIMP.

If you only need to enhance, reduce or cut pictures there are plenty of free options online. A great option is the PicsArt photo editor – which give you access to more than 100 million photos, stickers, memes and more. Or upload your own images and use their advanced editor to change the exposure, erase backgrounds, add effects – basically anything you can do with Photoshop (and then some!).

Or you can also use something simple like Faststone Image Viewer, or Canva’s online photo editor (which doesn’t require you to install anything). It’s a miracle such powerful software is free to use. Make the most of it.

Using your own pictures in each blog post can be a problem if your topics are not technical or tangible. A good option is to use royalty free stock photos from sites like unsplash.

If you need to take screenshots of your work, directly from your desktop, just add a program such as Snipaste from the Microsoft Store (by the way, there is a desktop version too).

Use Social Media to Your Advantage

Facebook is great for connecting with friends, but if job is what you’re looking for you’re not gonna find it there. Linkedin is a wonderful social network to find job. Make the most of it by adding connections and increasing your network. Don’t be afraid to post your articles on the network and introduce yourself to contacts that may be interested in your work.

I do not personally recommend subscribing to job networks like Fiverr unless you’re happy working almost for free. Online jobs websites are filled with competition making it almost impossible to land the good jobs. It’s 10 times better to create your own connections and find business owners interested in posting content weekly. Jumping from random job to random job is a solution that will drain your energy in the long run.

Become a Freelance Writer: LinkedIn

Be Active on Communities in Your Niche

I know I mentioned that Facebook is bad for jobs but one of its best uses is groups. Be it a developer community, a photography community or any topic you find interesting. Joining groups is a good way to find and get to know your audience for content once you’ve become a freelance writer. Always ask the group or community manager if publishing external content is allowed. Posting your work on Facebook Groups is a very useful way to expand your audience, reach and potential leads.

Become a Freelance Writer: Facebook Groups

Don’t Be Afraid to Speak Up

So, your first assignment is ready and you don’t know what to say. Has this ever happened to you before? Don’t be afraid to speak up. If the article is going to touch some difficult topics or you’re scared that it’s not going to go well, don’t stay quite. Say something. Be polite but do not hide your true motivations.

People want to read honest articles, even if they are technical. Companies will not get offended if you write something negative, as long as it’s respectful and well written. You have let go of the fear of not people not liking your content. There will always be people interested in what you have to say.

Maintain a Healthy Environment

After some time writing for blogs you will soon find out that your work gets edited, time and time again. That’s normal. You have to let go of your ego pretending that your work is always a work of art. Although it could be, any serious blog or magazine will have editors. Those people are in charge of tweaking the content, adapting it to fit the objective of the magazine and it is completely normal to get edited.

But don’t let the editing work to go unchallenged. Too much editing can change the primary message inside your article. As a rule of thumb if the content that gets edited is not fundamentally changing your idea then it’s fine. If you suspect that a specific edit is changing the article in a fundamental way, you need to make sure to communicate this to the editor.

Letting your employer know that edits have gone too far is a sane way of maintaining a healthy environment, provided you do it with respect and good manners (being a jerk will only make everyone angry).

Become a Freelance Writer – and Enjoy it!

You may write some awesome articles and some not so good ones. That is to be expected. Don’t force yourself to write a masterpiece each time. Remember that to become a freelance writer you will need dedication and commitment. With time, your articles will keep improving. The trick is to really enjoy writing them. If you manage to balance commitment with enjoyment you’ll have the best of both worlds. Who would not want that?

Do you have any other questions about how to become a freelance writer? Or are you a freelancer with more tips to share? Leave a comment – I’d love to hear from you! If you enjoyed this post, why not check out this article on the Top 30 WordPress & ClassicPress Statistics!

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: eCommerce, WordpressTagged with:

Resizing Images in WooCommerce for WordPress or ClassicPress

Images play an important role in any Wordpress or ClassicPress website. For an eCommerce store, images are more significant that it could play a crucial role in purchase decisions, its well known that potential buyers will leave a site if the images are of poor quality. As a store owner, you will have to ensure that the product images are of good quality, and are able to convey the features of the product. WooCommerce, in the latest updates, has improved the image settings. These settings will give you more control over how images are displayed on different WooCommerce supporting themes. In this article, we will look further into how to resize images in WooCommerce without the hassles of complicated procedures.

Image settings in WooCommerce

The theme that you use plays a big part in displaying images on your website. And, you would want images to look good when you install a new theme that supports WooCommerce. From version 3.3, WooCommerce has made solid improvements in this department so that this is achieved. That means there are some changes from the way WooCommerce used to handle product images conventionally.

The image cropping settings are quite different after these updates. You will be able to define the width and height of the product images. Also, there will be a preview that will help you understand how the images are going to look in the frontend. And the themes that are compatible with WooCommerce will have more control over image settings. This means you will be able to customize the image size and appearance extensively from your theme settings.

Image control for themes

In the older versions of WooCommerce, there used to be problems when theme developers used the update-option to make changes in the database. When any updates were made to the theme, it used to revert the image settings configured by store owners. With the latest updates, theme developers can use add_theme_support function to define image sizes. When images are declared in this manner, it won’t get overridden by other settings changes, and also the image settings in the WooCommerce admin panel will be hidden.

Resize Images in WooCommerce

Generally, you will be able to make changes to your image dimensions from the WooCommerce Customizer.

On your WordPress admin panel, go to Appearance > Customise > WooCommerce > Product Images.

For some themes here you will see an option to define the width of the main product image as well as the thumbnail.

Resize images in WooCommerce
With certain themes, you will find an option to resize the width of your main image and thumbnail.

However, if the theme is defining the image sizes using the function add_theme_support, you won’t be able to control this feature. In the Customizer, this section will be hidden.

resize images in WooCommerce
In a lot of themes, you will see there is no option to resize the width of the main image and thumbnail.

However, you will still find the option for Thumbnail cropping. You can crop your product image thumbnails in three ways.

  • 1:1 – This will be square cropping. The thumbnails of your product images will be cropped in square shape.
  • Custom – In this option, you will be able to define an aspect ratio that you prefer.
  • Uncropped – There will be no uniformity for the image thumbnails under this option. Thumbnails will be in the aspect ratio with which they were uploaded.

When you make changes to these settings, you will see a live preview on the right screen. This will help you get a clear idea on how these image sizes will look before you publish them. Only after you click the Publish button, these changes will be live and visible to customers.

Customizing image sizes using hooks

Image sizes are defined in WooCommerce using the following options:

  • woocommerce_single – This displays the full product image the way it was uploaded. The default width here is 600 pixels.
  • woocommerce_thumbnail – The image grid is cropped to a square shape here, with default size of 600 pixels. And, the store owner will be able to customize the aspect ratio.
  • woocommerce_gallery_thumbnail – Again square cropped, but with 100×100 pixels default aspect ratio. For image gallery.

Recommended for store owners with coding knowledge, there are options to control image thumbnail sizes using hooks.

You can use the wc_get_image_size function to get the image size definitions and to modify them.

For example, you can use the below code to change the dimensions of your thumbnails to 300×300 pixels.

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
return array(
'width' => 150,
'height' => 150,
'crop' => 0,
);
} );

Please remember to regenerate thumbnails to make the changes effective to your existing images. For more options like this, please refer to this WooCommerce documentation.

Automatic thumbnail resizing

WooCommerce also provides automatic thumbnail resizing now. Earlier, thumbnails used to not resize automatically, when product images were changed. In such cases, you had to use a plugin like Regenerate Thumbnails to update the changes to thumbnails. From version 3.3 and above, WooCommerce has started offering on-the-fly and background thumbnail resizing.

When you make changes to your product image settings, WooCommerce will start a process to resize images in the background. In addition, there will be an on-the-fly resize for the frontend, when the process is going on, or is unable to complete for some reason. This will ensure that your customers will have a great experience on your store irrespective of the background processes that are going on. This also ensures the preview option while using the Customizer, where you can see the results of different image dimensions.

Optimizing product images in WooCommerce

It is important to optimize product images that you use in WooCommerce to ensure that the customers are able to clearly see product features without impacting site speed. There are several strategies that you can adopt to ensure the product images that you use are optimized. Here are some ways you can optimize product images.

Preparing product images to upload

You can also resize product images before uploading them to WooCommerce using tools like Photoshop, GIMP, etc. When you upload a high resolution image, the browser will have to load the original image and then one that fits to your site’s width. This will impact the page loading speed and significantly affect the customer experience on your store. It is a good idea to find out the suitable image display size for your website. You can use Inspect option of the browser to find the Experts also recommend to keep the product image file size below 100KB.

Now, another aspect that makes a difference is the file format. JPEG is preferred for product images as these images generally use a lot of color and you want to them to appear realistic. PNG sometimes is more useful for compression without losing quality, but it is recommended for screenshots and images with transparent backgrounds.

You can use one of the above-mentioned tools to reduce the file size without losing quality.

Refer to our article to understand the process of resizing images without losing quality.

Use an image compressor

Another common strategy that several store owners use to optimize product images is to run them through an image compressor tool. These tools will remove non essential data from your images, so that it becomes lighter. Color profiles, camera details, etc., are examples of information that compressor tools remove from an image.

Here is a quick look at some of the popular image compression tools that you can use for WooCommerce.

Smush

This plugin will help optimize the images that you use on your WooCommerce store. It will compress and resize images for your store, and also enables features like lazy loading. Smush creates lossless compression for your images, where the quality of images is not affected when unnecessary details are removed from images. It also helps in bulk optimizing your images, where you can optimize up to 50 images at a time.

This is a popular WordPress plugin for image optimization.

EWWW Image Optimizer

This is another popular option you can use to optimize images on your WooCommerce store. It will help you save storage space, bandwidth and also ensures faster page load speeds for your online store. You can use it to optimize images before adding them to your store, and also for your existing product images. It ensures that all your images are in a suitable file format and also help you choose the compression options. Moreover, it is compatible with a lot of other WordPress plugins and will optimize images added by those as well.

EWWW Image Optimizer will ensure that images uploaded to your WooCommerce store are optimized and scaled to fit. It also provides lazy loading and bulk optimize options.

Tiny PNG

This is another option that you can try to compress product images on your store. It uses lossy compression strategies to reduce the file size of your PNG images. Overall, this can help in reducing the file size and loading pages faster. If you enjoyed this post, why not check out this article on Top 30 WordPress & ClassicPress Statistics!

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: eCommerce, WordpressTagged with: ,

Top 30 WordPress & ClassicPress Statistics

As of late 2019, The WordPress CMS platform powers an impressive 35% of the world’s websites. So 35% of every website in existence throughout the world uses WordPress as its content management system. WordPress has definitely come a long way since its inception in 2003. Designed to be a blogging solution to meet the needs of those wanting to share their ideas with the world at large, WordPress has long blossomed into so much more. Now, you can publish blog content, run an online business, open up an eCommerce shop, and everything in between. Additionally, ClassicPress, the faster more secure fork of Wordpress, is gaining popularity and heading towards a million download per year.

Thanks to the free and open-source nature of this platform, WordPress has grown in popularity over the years and has racked up some pretty remarkable statistics for itself. And today, we’re going to share with you the best WordPress statistics and facts that you can use in your own blog content to establish more authority or just use to impress your friends. So, let’s get started.

1. WordPress dominates the CMS market share

It’s not enough that 35% of all websites use WordPress. In addition, WordPress dominates the content management system market share at 61.7%. This makes it the most popular (and widely used) CMS of all for the 7th year in a row.

2. Big name brands understand the power of WordPress

You may be under the impression that WordPress is only for bloggers and small businesses. But it’s not. In fact, some of the biggest name websites in the world utilize the power, flexibility, and affordability of WordPress. For instance, WordPress  powers Facebook Newsroom, Vogue, and The Walt Disney Company, all of which are major corporations with a global presence.

3. To build WordPress was no easy feat

According to Open Hub’s Project Cost Calculator, it took 193 person-years to build WordPress to be what it is today. This includes 718,256 lines of code and over $10 million in expenses.

4. The WordPress platform is always improving

From its launch on May 27, 2003, to just a few days ago on November 12, 2019, there have been 401 updates or brand new version releases of the WordPress core. To say the team behind WordPress cares about new features, security patches, and more is an understatement.

5. People never stop building WordPress websites

As of October of this year, WordPress maintains the number one spot as the fastest growing content management system in the world. Adding to that, 773 WordPress-powered websites are built daily. The next fastest growing CMS is WooCommerce (which is powered by WordPress!) with 381 daily site builds and Shopify in at a measly 193 daily sites.

6. And speaking of WooCommere

27% of eCommerce websites use the WooCommerce platform, which is the free eCommerce plugin that works seamlessly with the WordPress content management system. Behind it are Shopify (18%), Magento (9%), and OpenCart and BigCommerce tying at 3% a piece.

7. WooCommerce holds its own in terms of downloads

If the percentage statistic about WooCommerce above isn’t working for you, maybe the pure, raw data will help. WooCommerce has been downloaded 79,539,671 times and counting.

8. People search for ‘WordPress.org’ a lot

According to Alexa, WordPress.org ranks 716th in global internet engagement. It also boasts a fairly lengthy average time on site per user of 3 minutes. This is pretty good seeing as WordPress.org is mostly a resource website. Other impressive numbers include a bounce rate of 50.9% and the fact that 927,013 sites link to WordPress.org.

9. Web host recommendations are few and far in between

Even though there are thousands of web hosting providers available in the market, WordPress.org only officially recommends 3 web hosts: Bluehost, Dreamhost, and SiteGround.

10. WordPress is linked to much more than a blogging platform

The team behind the open-source WordPress project is also linked to products and services like WordPress.com (the hosted WordPress solution), Akismet, BuddyPress, Gravatar, VaultPress, Simplenote, and of course WooCommerce.

11. WordPress is being actively used by millions

It’s easy to inflate statistics by stating that a piece of software was at one point downloaded a million times, only to find out that the active users of said software is actually much lower. That said, when it comes to live websites using WordPress, you can bet there are over 29 million serving up content to site visitors right this minute.

12. Even new versions of WordPress rake in download numbers in the millions

As of right now, WordPress 5.3 has been downloaded more than 35 million times and counting. If you check out the official WordPress.org counter, you’ll see for yourself. In the time it took me to type these words, the number has jumped to 5,192,671 downloads.

13. When it comes to customization, WordPress is hard to beat

One of the biggest draws the self-hosted WordPress platform has is its ability to be fully customized by people of all skill levels using plugins. And if we’re counting just the official, strictly vetted WordPress plugins found in the Repository, you can find over 55,000 plugins.

14. The WordPress community is just as impressive as the CMS

There have been over 1055 WordCamps spanning 75 cities, 65 countries, and 6 continents since the first WordCamp was organized by Matt Mullenweg in 2006. This robust community of WordPress users working together to network, build, and improve all aspects of WordPress is just another reason why it’s so dang popular.

15. WordCamp numbers never fail to impress

From 2011-2015, there have been 5,856 unique speakers, 7,451 unique sessions, 3,120 unique sponsors of the events, and a whopping 90,000+ tickets sold at worldwide WordCamps. And that was from 4 years ago. Imagine what those numbers would look like now!

16. You’ll find dedication to WordPress at meetup groups

There are over 780,000 WordPress meetup members and 1,600+ groups all over the globe dedicated to meeting up on a regular basis and discuss how you can make the most of your WordPress software.

17. WordPress-related keywords are where it’s at

According to Google Trends, WordPress-related keywords are more popular than terms related to Drupal, blogger, and Sharepoint. In other words, there is a lot of interest in WordPress-related content.

18. Global brands have nothing to lose with WordPress

Thanks to the hardworking translation team over at WordPress.org, WordPress has been fully translated into 55 worldwide languages, with tons more to follow.

19. WordPress Translation Day is a real thing

No, seriously. Every year a bunch of WordPress enthusiasts get together and work on translating the WordPress ecosystem (e.g., the core, themes, and plugins). For twenty-four hours. On a global scale. The most recent WordPress Translation Day boasted 81 worldwide events, 46,653 string translations, and 221 new translators taking part in the fun. Plus, the work performed impacted 71 language locales.

20. Locales (AKA WordPress website locations)

As of now, WordPress’ top locales include the United States (45.6%), Japan (5.7%), Germany (5.5%), Spain (5.1%), and France (3.8%).

21. Part of popular culture

WordPress was featured in episode 5 of Chris Ryan’s Strike Back. And, it was also briefly mentioned on Orange is the New Black, and Lily Allen’s song “URL Badman.” (source)

22. WordPress is a major target and requires proactive security measures

According to one of Sucuri’s latest hack reports, 90% of its security cleanups had to do with WordPress. Of course, much of this is attributable to a lack of security protection, configuration issues, and poor site maintenance. Nonetheless, WordPress is a target because of its popularity. Fortunately at Xhostcom we use ClassicPress which is a more secure version of Wordpress (and faster), for site builds.

23. Vulnerabilities are a thing to contend with

As of right now, there are over 18,000 vulnerabilities in WordPress. 13,000+ of them deal with the WordPress core itself, 2,100+ of them are related to plugins, and 320+ are theme related but ClassicPress removes virtually all the core problems, and is maintained by the ClassicPress team.

24. Themes, themes, themes

When you need to change the look and feel of your WordPress website, you always look to themes first. The most popular themes in the market to date include the premium Avada theme (over 550,000 sales), the premium X theme (over 200,000 sales), and even the free default theme – Twenty Nineteen – which boasts over 1 million active installations.

25. WordPress themes have thousands of lines of code

The popular theme marketplace ThemeFuse claims that each one of its custom WordPress themes has an average of 36,200 lines of code. The comparison used to show you how powerful custom WordPress themes can be is TwentyEleven, having a mere 5,620 lines of code (though that’s still a lot!). Of course, now all themes are the same. But this gives you a good idea.

26. Lots of themes sales doesn’t always = popularity

Though Avada and X have done well, Builtwith will tell you that the top three most popular WordPress themes in use right now are: Divi (14,686 sites), Genesis Framework (11,028 sites), and then Avada (8,344 sites). Of course, these numbers indicate theme usage distribution among the top 1 million sites, but that just goes to show you that sometimes it’s another theme that people actually love.

27. WordPress developers have the potential to do well

When you take a look at PayScale.com, you’ll see that the average salary for a WordPress developer hovers around $50k a year, which isn’t too shabby depending on where you’re located and the cost of living.

28. No matter how hard it tries, spam is blocked

Spam is going to happen no matter how secure your content management system is. That said, if I had to choose a plugin to help me block annoying spam, I’d choose Akismet. Not only is it free, it blocked its 1 billionth spam way back in 2013. Yes, one billionth a.s in ‘B.’ Nowadays, that number is closer to 100 billion. At Xhostcom we have speciality spam system which is 100% effective

29. WordPress stands by it’s open-source reputation

WordPress is not owned by any one company. In fact, co-founder Matt Mullenweg started a non-profit organization called the WordPress Foundation to protect your ability to use the software as you want without restriction. There is also no CEO. Instead WordPress is run by a gamut of volunteer developers from all over the world.

30. WordPress helps you rank

According to Matt Cutts, a man with close ties to Google and its search rankings, WordPress handles 80-90% of the technical aspects related to SEO optimization. In other words, if you want to rank well in search results, WordPress does most of the hard lifting for you. At Xhostcom we have again speciality system  for SEO, and you can see some of its features in the video below.

31. WordPress has your back

WordPress promotes freedom of use, modification, distribution, and speech. In fact, WordPress denied 67% of all DMCA takedown notices filed between January 1, 2014 and June 30, 2019 in an effort to preserve people’s freedom to use the platform as they see fit. To put that into perspective, there have been 70,968 takedown notices issued.

Conclusion

As the world’s number one content management system, WordPress has left a huge mark in the digital world and isn’t going anywhere any time soon. It continues to grow, improve, and cater to more website owners each year. Xhostcom use it (or ClassicPress) in bespoke or customized site builds  for businesses around the world along with Vue JS and React.

And with such a strong community believing in the message behind this open-source, highly customizable, and 100% flexible and affordable software, site owners of all kinds and skill levels will be happy to know more impressive statistics just like the ones above are just around the corner. If you enjoyed this post, why not check out this article on how to Setup ClassicPress on Ubuntu at Digital Ocean!

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: eCommerce, Trends, WordpressTagged with:

What Is Above The Fold Content in Wordpress or ClassicPress?

Above the fold content is an important part of website design and site building with Wordpress or ClassicPress. Although the notion has become more and more complex with each passing year. While it may not be seen as consequential as it once was, it still requires understanding and consideration for all websites seeking to present an engaging experience for their visitors.

What Is Above The Fold?

The concept of above the fold goes back centuries, to the beginnings of the printing press. Newspapers, due to the way they were printed on large sheets of paper, were folded once they hit the news-stands. This led to only the top half of the paper is visible to the passer-by.

The newspaper industry quickly worked out that to garner an audience, they must present attention-grabbing headlines, content, and imagery on the top half of the page. This basic principle remains the same for digital content.

Of course, websites do not have a physical fold like newspapers, the fold in this regard relates to the scrollbar.

Anything that isn’t visible immediately, that requires scrolling, is considered below the fold. Unfortunately, the digital version of above the fold isn’t quite as simple as the print version.

Dimensions

The first consideration for a website is how its dimensions appear to the reader. Not all screens are the same. What’s more, with the proliferation of pads and phones, each site presents in vastly different ways. That’s not to mention issues regarding screen resolutions and browser plug-ins.

Phone dimensions have become arguably the most important area to consider carefully, with its use eclipsing desktops in 2016. Mobile phones come in various shapes and sizes, as do their screens, so unlike a broadsheet newspaper, the fold line is a far less predictable concept.

Online Tools For Defining Above The Fold Placement

There are many free online tools you can use to visually test and place different aspects of your website relating to its “Fold”. While these are extremely helpful to help you get a physical idea of the layout, they can only provide a superficial presentation of the website and not an in-depth analysis. For this reason, it is recommended that a full website optimization is carried out.

Best Practices

While it is true there are no hard and fast rules for above the fold placement, some best practices often work as helpful guidelines. Some of these are common sense ideas, such as ensuring the most engaging content is above the fold. Other practices relate to the previously mentioned dimensions, such as the standard 1,000 pixels wide – 600 pixels tall fold size of 1,024 by 768-pixel screens. Most screen sizes are higher than this in 2018, however, so adjusting your website accordingly is important.

It is also important to never assume best practices means orthodoxy. For many years, websites have been designed like newspaper front pages, but this has led to a kind of “templatization”, whereby the majority of sites look the same. Innovations, such as vertical scrolling (or clicking) means the concept of above the fold is literally flipped, and the experience feels a lot more natural to the reader as a result.

Some websites, in fact, have done away with the fold altogether, designing pages with no below the fold content and eliminating the problem entirely. These “Compact” designs are aesthetically pleasing the eye and are able to fit all screen sizes.

One of the worst things a website can do is present a “False bottom” to the page. This is where a site has further information that requires scrolling, but its existence is not apparent to the visitor. This is the worst of all worlds. A fold need not be an obstacle, it should flow naturally and draw the visitor in.  There is some more information on this in this article.

Call To Actions Above Or Below The Fold?

One of the myths about above the fold designs is it is always best practice to have a Call To Action (CTA) clearly viewed instantly. This is, like much related to the topic, an over-simplification of the concept. Where to put the call to actions depends on several factors, most consequentially:

  • Certain visitors
  • Uncertain visitors that are familiar with your product – or the proposition is simple
  • Uncertain visitors that are presented with a complex proposition

Certain visitors are those who are likely to react to the call to action as they have largely made their mind up before visiting the site. This is where known brands have an advantage, as there is little for the “certain visitor” to learn about a product or service. In these cases, placing a call to action above the fold is only a matter of convenience.

For uncertain visitors that understand the call to action simply or that have some knowledge of the product or service, placing the call to action above the fold is generally best practice for much the same reasons as those listed above, although the informative content is also important.

For uncertain visitors that are presented with a complex proposition, such as a product or service that isn’t obviously beneficial to them, placing the call to action above the fold will not suffice. What is required is a more in-depth explanation of why your call to action should be acted upon. In fact, placing your call to action up front can appear a little pushy.

Put simply, the call to action should be placed in a position whereby the visitor has been most persuaded to act upon it.

Placement Of Ads

It should always be understood that most of the attention, no matter how tactically you design your site, will still be focused above the fold. Therefore, it stands to reason that to maximize ad engagement that you should flood the area with ads right? Well no. Google algorithms penalize this practice severely and you could ruin your website’s ranking immeasurably if you are not careful. What’s more, you can push important information not just below the fold, but beyond the patience of your visitor.

Ad placement is a complex balance that requires knowledge of bounce rate, engagement analysis, and user behavior. These decisions are best made with the right data to hand.

The Importance Of Above The Fold

As should be apparent at this stage, the importance of above the fold design is essential, but complex. As a result it’s wise to be wary of any advice that deals in absolutes. It is certainly true to say that user habits have changed enormously from the early days of the Internet. During the 90’s, due to slow connection speeds and ponderously slow websites, it was common for most “Surfers” to rarely read anything below the fold. These days people are far more likely to use the scroll wheel on their mouse.

This has thankfully led to cramming, where information was stuffed above the fold, largely dying out. It is far more common these days to be greeted with minimalist and elegant designs that allow the visitor to discover what the site has in store

A recent Google study showed that ads appearing above the fold had a 73% visibility, whereas those below it had just 44%. But this should be weighed up with the fact that content that draws the viewer in narrows that gap considerably, and ads can be an obstacle for that. As ever with this subject, context and balance are key. If you enjoyed this post, why not check out this article on CSS Flexbox In A Nutshell!

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: Development, WordpressTagged with: ,

CSS Flexbox In A Nutshell

As web design trends have evolved since the early days of the internet, there have been different standard ways to arrange elements on a website. CSS flexbox is a relatively new yet powerful way to create layouts and something every web developer and designer should be familiar with. If you don’t know how to use it yet, this in-depth flexbox tutorial aims to change that. The post below will talk about what flexbox is, why it matters, and its underlying concept. After that, we will go over the CSS properties and values associated with flexbox in detail and finish up with an example of a use case.

If you don’t know how to use it yet, this in-depth flexbox tutorial aims to change that. The post below will talk about what flexbox is, why it matters, and its underlying concept. After that, we will go over the CSS properties and values associated with flexbox in detail and finish up with an example of a use case.

What is CSS Flexbox?

Flexbox stands for flexible box. It’s a layout module for CSS aimed at giving you an efficient way to arrange, organize, and size website elements to create highly adaptive designs.

Of course, the technology to place web components on a page is not new. Since the beginning of the Internet, web designers have used different ways to place images, text, and other content where they wanted it to be. However, these were either not suitable for responsive design (tables), were never intended for as a layout tool in the first place (float), didn’t allow you to define equal heights for elements (inline-block), or had other issues.

So, while designers and developers made do for a long time, there were still a bunch of design patterns that were either impossible or needed JavaScript to work. Common examples are vertical centering and equal columns, two of the holy grails of web design.

How is Flexbox Different?

The way flexbox works is quite simple on the surface: You have a container (flex container) with children (any elements contained within, called flex items), which are placed along flex lines.

Lines and items can be manipulated in layout, size, spacing, and more along both the vertical and horizontal axis using a multitude of operators. This allows you to best take advantage of the available space and lets elements arrange themselves automatically according to it.

If that is hard to visualize, here’s a schematic (courtesy of W3.org) to make things clearer:

css flexbox schematic

Still not entirely sure? I can’t blame you. Let’s talk about it in more detail.

The Underlying Concept

As mentioned, flexbox is a whole CSS module, not a single property. Therefore, it comes with a whole lot of its own operators, some for the parent container, some for its children.

To understand how they work, it’s important that you know the concepts and terminology of flexbox, which are displayed in the image above:

  • main axis — This is the axis at which the items are laid out. Important: it can be both vertical or horizontal, depending on the flex-direction property.
  • main-startmain-end — These represent the start and end point of where items are arranged.
  • main size — This denotes either the width or height of the flex items, depending on the direction of the main axis.
  • cross axis — The axis perpendicular to the main axis. Its direction, too, depends on how the main axis is defined.
  • cross-startcross-end — Start of and direction in which flex lines will be filled.
  • cross size — Denotes the other dimension of flex items that is not defined by main size.
  • writing-mode — Allows you to switch the direction of writing from left-to-right to right-to-left or even to vertical. It’s a work in progress with little to no browser support, however, it’s important to know for some of the properties further below.

As you can see, a lot about flexbox is rather abstract and not absolutely defined. Consequently, much of the CSS below is dependent on your setup.

When to Use Flexbox

While you can use flexbox to build entire web pages, however, that’s not the recommended use case. For larger layouts, consider Grid (more on that some other time). Flexbox, on the other hand, is most appropriate for small-scale layouts and applications, such as:

  • navigation menus
  • card layouts
  • media items
  • web forms

Browser Support

Flexbox was first proposed at the beginning of the past decade and recommended by the W3C for adoption in 2012. Since then, browsers have started supporting it and, by now, all modern browsers are able to deal with flexbox.

css flexbox browser support

Available Flexbox CSS Properties

Alright, now that we have settled the theory, let’s see what flexbox can do. With the properties below, you can manipulate your layout both by assigning traits to the container and also to items individually. We will start with the former and then move on to the latter.

flex-direction

This defines the main axis and, as a consequence, the direction in which your flex items are placed. This also allows you to change the order of items, which used to require altering the underlying HTML.

Available properties are:

  • row — The default. Arranges flex items left to right unless you are in a right-to-left environment due to writing mode.
  • row-reverse — Arranges items horizontally but in reversed order.
  • column — The same as row but vertical with items arranged top to bottom.
  • column-reverse — You can probably guess this one. column-reverse displays items bottom to top.
flex direction example

flex-wrap

The default behavior of items within a flex container is to arrange themselves in one row. flex-wrap allows you to change that.

  • nowrap — The default value that places all items in one line.
  • wrap — If a single line isn’t enough, with this, items will arrange themselves into multiple lines from top to bottom.
  • wrap-reverse — Same as wrap but with items ordered from bottom to top.
flex wrap example

flex-flow

This is a shorthand for flex-direction and flex-wrap. Usage:

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

The flex-flow property allows you to define both main axes of the container. The default value is row nowrap, all possible values from the two properties above apply.

justify-content

The next flexbox CSS property defines the item alignment on the main axis. It decides what happens with any available free space and has some control over the alignment when items get wider than their container. Here are the values you can choose from:

  • flex-start — Default value. Items align towards the front of flex-direction.
  • flex-end — Places items at the end of flex-direction.
  • start — Defines the beginning of writing-mode as the starting point.
  • end — Moves items towards the end of writing-mode.
  • left — Aligns flex items towards the left edge of the container. If that doesn’t make sense due to flex-direction, it behaves like start.
  • right — The same as left but for the right edge.
  • center — Items center horizontally.
  • space-between — Distributes items evenly within the container. The first towards the start, the last toward its end with even space between them (hence the name).
  • space-around — Items are evenly placed with equal space around them. Note that it behaves like margin or padding where you have double the space between items as towards the edges.
  • space-evenly — Items reside evenly placed within the container but the spacing between each and toward the container edges is even.
justify content example

Beware that browser support for these values is a bit spotty. For example, space-between is not supported in some versions of Edge and start/end/left/right aren’t in Chrome yet. The safest values are flex-startflex-end, and center.

align-items

This property controls how items align across the cross axis. It’s the equivalent of what justify-content is for main axis. Here are the available values:

  • stretch — Default value that stretches items to fill the container.
  • flex-startstartself-start — Aligns flex items at the start of the cross axis. start and self-start adhere to flex-direction and writing-mode respectively.
  • flex-endendself-end — The same as above but placing items at the end of the cross axis.
  • center — Items reside at the center of the cross axis.
  • baseline — Aligns flex items along their baselines.
align items example

Here, too, it’s important to note the browser support.

align-content

This property is responsible for controlling flex lines if there is extra space available on the cross axis. It’s similar to justify-content. You need more than one row of items for the values below to take effect.

  • stretch — Default value. The lines stretch to take up all available space.
  • flex-startstart — Items align at the beginning of the container. flex-start adheres to flex-directionstart to writing-mode.
  • flex-endend — Same deal as flex-start and start only that items move to the end of the container.
  • center — Centers items on the cross axis inside the container.
  • space-between — Evenly distributes flex lines inside the container with the first row being placed at its start, the last at the end.
  • space-around — Even distribution with even space around each line.
  • space-evenly — Even distribution with equal space around items.
align content example

order

Beginning with this one, the remaining rules all apply to flex items instead of the container. The order property controls in which order items appear inside their container.

flexbox order example

For example, the default value for all flex items is order: 0;. If you want to move a particular item to the front or back of the line, you can do so by giving it a value like 1 or -1. This also works across row or column boundaries unlike row-reverse or column-reverse which will reverse the order per line individually.

Here’s the code for the example image above:

<div class="flex-container">
	<div style="order: 3">1</div>
	<div style="order: 2">2</div>
	<div style="order: 4">3</div>
	<div style="order: 1">4</div>
</div>

flex-grow

Controls the ability for flex items to grow within the container as necessary. flex-grow takes a number that describes a proportion.

Example: if all items are set to flex-grow: 1; they are all evenly distributed inside their container. However, if one is set to 1 and another to 3, the latter will try to take up three quarters of the available space.

flex grow example

flex-shrink

Similar to flex-grow but defines the ability of items to shrink in relation to other items. The higher the number, the more an item will reduce in size and vice versa.

flex-basis

flex basis example

Defines the default element size (height or width depending on the axis). It can be a relative value like 15% or absolute like 30px. Here’s how I achieved the above:

<div class="flex-container">
	<div>1</div>
	<div>2</div>
	<div style="flex-basis: 150px">3</div>
	<div>4</div>
</div>

Other possible values:

  • auto — This is the default.
  • content — Sets the size according to the item’s content. It’s not well supported yet, same as max-contentmin-content, and fit-content that also exist.

flex

Shorthand for flex-growflex-shrink, and flex-basis together. Only the first parameter is mandatory and the default value is 0 1 auto.

<div class="flex-container">
	<div>1</div>
	<div>2</div>
	<div style="flex: 0 0 150px">3</div>
	<div>4</div>
</div>

It often makes sense to use this property instead of flex-growflex-shrink, or flex-basis individually as it applies sensible values to the operators you are not using.

flex can also take initial (adheres to the defined size if there is one), auto (making it fully flexible), and none (making all items inflexible). You can use this, for example, to set some items to a fixed width (via initial) while having others adjust themselves to the available space.

align-self

This allows you to override the alignment of individual items. It has the same values as align-items.

Flexbox Example: Columns with Equal Height

As a last step, we will go over an example of how to use the above. Let’s create a flexbox layout with columns of equal height. You can build it with HTML like so:

<div class="flex-container">
	<div>
		<h2>Column 1</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>

	<div>
		<h2>Column 2</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Morbi interdum et ex a efficitur.
		Nam consequat elementum tellus,
		at varius lectus condimentum vulputate. </p>
	</div>

	<div>
		<h2>Column 3</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Morbi interdum et ex a efficitur.</p>
	</div>
</div>

After that, add this CSS markup to it:

.flex-container {
	background-color: #aa278c;
	border-radius: 10px;
	display: flex;
	margin-bottom: 10px;
}

.flex-container > div {
	background-color: #F7941F;
	border: 1px solid;
	border-radius: 10px;
	flex: 1;
	font-size: 20px;
	font-family: tahoma;
	line-height: 40px;
	margin: 10px;
	padding: 16px;
	width: 60px;
}

.flex-container > div h2 {
	text-align:center;
}

And here is the result:

flexbox example case equal height columns

 

Why does this work? Well, the only important parts are actually that the flex container is set to display: flex;, while its children take on flex: 1;. All the other markup is just for styling.

As you may recall, doing this sets flex-grow and flex-shrink both to 1 and flex-basis to auto. As a consequence, all items take up the same amount of space inside the container and their initial size automatically adapts to the available dimensions. The result: effortless columns of equal height.

Flexbox in a Nutshell

In web design, there are many different ways to create layouts and arrange elements. Flexbox is one that has become more and more common. The CSS module offers a lot of benefits, especially for dynamic layouts, smaller page elements, and mobile design.

Above, we have gone over what exactly flexbox is, its abilities, and how to use it. Next time you find yourself wanting use float or inline-block, take a second to think whether or not flexbox might be the better solution. If you enjoyed this post, why not check out this article on how to Add Custom Fonts to your WordPress or ClassicPress Site!

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: Development, Trends, WordpressTagged with: , ,

9 Top Call To Action Plugins For WordPress or ClassicPress

Every piece of content you create should have a clear Call To Action, because it prompts your visitors to take action. The action could be anything: download a checklist, sign up for a webinar, get a coupon, attend an event, etc. A CTA is an ideal way to convert more of your passive website visitors into active leads and customers. You can place them anywhere on your site; for example, in a blog post, in a widget area, or on a landing page.Your CTA can be an image or a line of text, as long as it prompts your visitors to take action.

The WordPress call to action plugins in this post all offer something a little different. We’ve included both free and premium plugins; some have generic tabs while others have advanced targeting features.

So, if you want some action on your site, then check out these powerful WordPress call to action plugins:

Thrive Ultimatum

Thrive Ultimatum is a WordPress plugin that promises to boost your conversions by applying the most effective marketing principle: urgency.

We’re all afraid of missing out. When we see the ‘limited offer’ or the ‘countdown timer’ ticking away, then we feel compelled to buy now.

We can’t resist the call to action.

When you add urgency to your CTA, like a countdown timer, you can boost conversions further.

“Without a sense of urgency, desire loses its value.” – Jim Rohn

Thrive Ultimatum comes with a range of professionally designed templates. You can select from countdown timers, widgets and floating banners that are all focused on getting your visitors to take action.

Every template is customizable with the intuitive, drag-and-drop visual editor. Just click to edit any element, set custom colors, background images, custom fonts and much more.

It’s packed with features to cater for all types of campaign. For instance, 7-Day Offers, Christmas Special, and End Of Month Specials.

What makes it more powerful are the triggers that you can apply to each campaign. For example, campaigns for first-time visitors or campaigns for new subscribers.

Features:

  • Pre-made design templates which look good straight out of the box
  • Easy customization with the visual editor
  • Campaign Types: Fixed Date / Recurring / Evergreen / Multi-Page
  • Countdown Timer: Widget Area / Floating Header Bar/ Floating Footer Bar
  • Time zones supported
  • Multiple trigger types
  • Mobile responsive designs

Price: $97/site, $147/5 sites, $399/15 sites (lifetime updates and 12 months support). Included in the Thrive Themes Membership for $19/month (paid annually).

Get Thrive Ultimatum

Get Hosting

Thrive Leads

Thrive Leads is a powerful list building plugin. Asking visitors to sign up to your list is a direct call to action, and Thrive Leads gives you so many options to do that.

On the front end, you can display Lightbox Popups, Sticky Ribbons, Inline Forms, Slide-In Forms, and both 1-Step and 2-Step Opt-in Forms.

You can also take your calls to action to the next level by using multi-state opt-in forms. When you ask a simple “Yes” or “No” question in your opt-in forms, before presenting your email sign-up, your visitors will have to choose. And a “Yes” is the first step on the path to conversion.

Behind the scenes, you can customize forms with a drag-and-drop editor, set up A/B Testing to see which types work best, and deploy Advanced Targeting to display relevant forms by post, category or tags.

Note: while Thrive Leads excels when it comes to list building, you don’t have to use opt-in forms – you can swap any form for a button.

Features:

  • Drag-and-drop editor allows for advanced customization
  • A/B Testing: Test different form types against each other
  • Smartlinks: Show different content to existing subscribers
  • Multiple themed templates available for each opt-in form type
  • Various opt-in form types such as ribbon, lightboxes, inline, widgets, and slide-ins
  • Supports multi-state opt-in forms
  • Reporting dashboard gives you essential insights

Price: $67/site, $97/5 sites, $147/15 sites (lifetime updates and 12 months support). Included in the Thrive Themes Membership for $19/month (paid annually).

Get Thrive Leads

Get Hosting

Convert Pro

Convert Pro is a powerful email opt-in and lead generation plugin that lets you build your email list and convert visitors into subscribers and customers.

You can select and tweak one of the ready-made conversion-focused templates, or create and design your own opt-in form with the drag-and-drop editor. Plus, there’s an option to make mobile-only customizations.

Displaying your call-to-action at the right time, to the right people, is crucial if you want to generate more leads.

And Convert Pro’s Advanced Triggers (including Welcome, After Scroll, After Content, User Inactivity, and Exit Intent) and Advanced Filters (such as Page-Level Targeting, Referrer Detection, and Device Detection) allow you to do precisely that.

But how do you know which opt-in form design works best? Convert Pro’s built-in A/B Testing, Multi Variant Testing, and Inner Style Testing, lets you run tests to find out which CTA suits your audience.

Finally, there’s the Analytics suite, which allows you to integrate Convert Pro with Google Analytics and track conversions. What’s more, you can view the results in your WordPress dashboard.

Features:

  • Ready-to-use templates so you can click, edit and publish
  • Drag-and-drop editor to design high-converting opt-in forms
  • 100% mobile-friendly responsive forms
  • Behavioral triggers to target the right people at the right time
  • A/B testing for optimizing your forms
  • Integration with all major email marketing service providers
  • Real-time analytics to track conversions

Price: Convert Pro is $99/year, or $399 for lifetime access, Agency Bundle is $249/year, or $699 for lifetime access

Get Convert Pro

Get Hosting

WP Notification Bar Pro

WP Notification Bar Pro is a custom notifications and alerts plugin for WordPress that displays a sleek message bar on your website. Add your call to action message to help you grow your email list, manage marketing promotions, increase your social media following or expand the audience for specific pages on your site.

The plugin includes many different types of Notification Bars. For instance, Text and Link, Post Content, Subscribe Box, Social Media Follow, Countdown Timer, and Search Form. Just add your custom call to action message to whichever type you choose.

You can display your notification bars on specific posts and pages to make them relevant to that content. You can also exclude your notification bars from displaying to individual visitors; e.g. those arriving from a search engine or a particular social network.

The plugin comes with 14 pre-defined color schemes to get you up-and-running. But you can edit colors as you wish with the color picker.

Features:

  • Easy to Use
  • Lightweight
  • Unlimited Notification Bars
  • Multiple Notification Types
  • Fixed or Absolute Position
  • Includes 18 Social Networks
  • Display on selected Posts / Pages
  • Unlimited Color Choice
  • Custom HTML Support

Price: $29

There is also a free version with plenty of features.

Get WP Notification Bar Pro

Get Hosting

WP Subscribe

WP Subscribe is an opt-in form plugin from MyThemeShop available both as a free and a premium version.

In the free version, you can create basic inline opt-in forms and connect them to MailChimp, AWeber, or Feedburner.

But to access the best features, you’ll need to use the pro version, which integrates with all the leading email marketing services.

WP Subscribe Pro also allows you to add and customize popup opt-in boxes with various styles, animations, and triggers, such as timing, scrolling, or exit intent.

If you prefer not to use a popup, you also get the option to add inline newsletter opt-in boxes above or below your content, or as a widget in the sidebar.

Features:

  • Eye-catching design to match your site
  • Fully mobile responsive
  • Pre-publish opt-in design previews
  • Popup triggers, animations, and delays
  • Built-in widget support for the placement of sidebar forms
  • Cookie control to determine the opt-in form display frequency

Price: Free, Pro: $29 (1 site) / $39 (3 sites) / $49 (Unlimited sites)

Get WP Subscribe Pro Get WP Subscribe Free

Get Hosting

Ultimate Blocks

Ultimate Blocks is a Gutenberg blocks plugin for bloggers and marketers that combines different elements into one single plugin, including a handful of CTA-type blocks.

Features:

The Call to Action block lets you add a call to action box with a button to your posts or pages that encourages users to take action and engage more. You can customize everything in the block, including colors, fonts, sizes, and buttons.

The Click to Tweet block lets you add Tweetable content to your posts or pages so visitors can tweet your message, along with the post or page link.

The Social Share block lets you add social share buttons to your site so visitors can share your content to their favorite social media platforms.

The Countdown block lets you add a countdown timer to your pages to add urgency to your offers.

The Button block lets you add a button to your posts or pages. It’s recently been updated with more customization options and controls so you can create buttons in various shapes, sizes, and colors.

** Try the live demo to see any of the blocks in action.

Price: Free

Get Ultimate Blocks

Get Hosting

Elementor Pro

Elementor Pro is one of the top WordPress page builder plugins.

So you might be wondering how that relates to calls-to-action?

In short, you can do pretty much anything with Elementor Pro, and that includes designing and building various CTAs.

Elementor Pro includes over 80 design elements (called widgets) to help you generate more traffic, leads, and conversions all from one plugin.

For example, you can:

  • Add a contact form or an inline subscription form so visitors can contact you or subscribe to your newsletter or service.
  • Increase the sense of urgency by adding a countdown timer to your offers.
  • Add social share buttons and social icons to any page, so visitors can share your content or connect with you on social media.
  • Use the Call to Action widget to create amazing and interactive boxes that use animations and CSS effects.
  • Set a sticky header, footer or other section, and make sure your message follows users as they scroll. Or create animated boxes that flip to the other side, once the visitor hovers over them.

The design-oriented Popup Builder deserves a special mention. Its vast capabilities let you create any modal you can imagine, including Fly-In, Full Screen, Hello Bar, Bottom Bar, and Classic Slide-in, all with advanced triggers, conditions, and rules to target specific users. Plus, you can add popup banners, announcements, and forms to your page.

Features:

  • Drag-and-drop editor to customize any of the 80+ elements
  • Responsive editor lets you tweak any element to fit any device
  • Design-oriented Popup Builder​ with advanced targeting options
  • Visual Form Builder that integrates with leading email service providers

Price: Personal $49/year (1 site), Plus $99/year (3 sites), Expert $199/year (1000 sites)

Get Elementor Pro

Get Hosting

Shortcodes Ultimate

Shortcodes Ultimate is a free WordPress plugin jam-packed with shortcodes.

While this plugin won’t be of use if you’re using the Gutenberg editor, you’ll find this useful if you’re using the classic editor.

The shortcodes let you create tabs, buttons, boxes, different sliders, responsive videos and much, much more.

Once installed, the shortcode generator is available in the WP post editor. Just click the Insert Shortcode button and select what you want:

You can use a combination of boxes and buttons to create your custom call to action.

Features:

  • 50+ amazing shortcodes
  • Shortcode Generator
  • Fully responsive
  • Custom CSS editor
  • Custom widget
  • Works with any theme
  • Easily extendable

Price: Free, premium add-ons are also available

Get Shortcodes Ultimate

Get Hosting

Simple Side Tab

Simple Side Tab is a free WordPress plugin that adds a Global Call To Action on your site linking to any page.

Unlike the other plugins, you can only add one message, positioned in a vertical tab to the left or right side of the browser window. The tab stays in place as your visitor scrolls down the page, so it’s always visible and ready for action

As the name suggests, Simple Side Tab is easy to use and setup. From one simple settings screen, you can set the text for the tab, choose your fonts and colors, and link to the destination URL.

Simple Side Tab is an effective way of driving traffic to a specific landing page.

Features:

  • Choose fonts – includes 7 standard screen fonts
  • Set the URL your tab links to, internal or external
  • Assign the tab to the left or right side of your browser window
  • Change the vertical position of your tab
  • Choose from unlimited colors for tab elements

Price: Free

Get Simple Side Tab

Get Hosting

It’s time for you to install one of these powerful WordPress call to action plugins and start generating leads and sales on your site with your custom calls to action. If you enjoyed this post, why not check out this article on the best 12 Elementor Plugins!

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: eCommerce, WordpressTagged with:

OptimizePress 3 Review & Appraisal

Today we take a look at OptimizePress  which is an advanced marketing WordPress plugin that can be used to create professional landing pages, sales pages, sales funnels, membership websites, online courses, event pages and more. Hundreds of well crafted pre-made templates are available in OptimizePress to simplify the task of building pages and websites and every layout can be customised using a user-friendly drag and drop visual editor. In this OptimizePress review, I will show you what OptimizePress offers and walk you through how you can use the WordPress plugin to grow your email list and increase conversions.

What Does OptimizePress Offer?

There are many landing page creators in the official WordPress plugin directory, however most of these plugins are simple solutions.

In contrast, OptimizePress offers a complete suite of marketing tools.

It allows you to convert visitors into subscribers and then funnel those subscribers into sales pitches so that they become customers.

OptimizePress Home Page

It all begins with landing pages.

Landing pages are used to grab the attention of visitors and encourage them to subscribe to your email marketing list.

Subscription forms can be created and modifed using OptimizePress’s drag and drop visual builder OptimizeBuilder.

Landing Page Form Examples

Whilst you can create landing pages from scratch, OptimizePress provides over 40 landing page templates to users. All forms are GDPR compliant and are responsive so that they look great on mobile devices too.

You can create landing pages in minutes using these pre-made layouts by simply changing text and images.

There are templates for businesses, webinars, affiliate landing pages, eBooks, optin pages and more.

OptimizePress Landing Page Examples

Once a visitor has entered their information into one of your sign up forms, you can pass it onto one of the dozens of email marketing services that are supported by OptimizePress.

The connection service Zapier is also available, which opens up thousands of additional apps and services you can connect to.

OptimizePress Email Marketing Services

Sales Pages are designed to help convert visitors into buyers and OptimizePress comes packaged with dozens of sales templates.

OptimizePress also provides many tools to help you convince visitors to sign up including videos, countdown timers, progress bars and more.

OptimizePress Sales Page Template Examples

A host of shopping cart solutions can be used with OptimizePress to allow you to process customer payments.

OptimizePress Supported Shopping Carts

One of the key features in OptimizePress is marketing funnels.

You can use funnels to drive visitors into becoming subscribers and then customers. OptimizePress allows you to create a unique sales process to help you do this.

For example, you can send subscribers to free training videos and courses and then encourage them to upgrade by offering discount codes.

OptimizePress Sales Funnel

Put simply, OptimizePress is designed to handle all aspects of your email marketing and sales conversions.

Getting Started with OptimizePress

Once you have signed up to OptimizePress, you can log into the OptimizePress membership area.

The membership dashboard lets you see the current status of your plan and directs you to download the OptimizePress Dashboard WordPress plugin.

OptimizePress Membership Dashboard

Underneath, you will see a large collection of video tutorials to help you learn how to use OptimizePress together with the latest news and updates.

A getting started checklist is also displayed here to guide you through the installation process.

OptimizePress Getting Started Checklist

OptimizePress requires you to license each domain you plan on using the plugin with.

Licensed Sites

To install OptimizePress from your website, you first need to download the OptimizePress Dashboard WordPress plugin from the downloads area.

The page builder OptimizeBuilder and the WordPress theme Smart Theme can also be downloaded from here.

OptimizePress Downloads

Once you upload and activate the OptimizePress Dashboard WordPress plugin, you will be asked to connect to your main account.

Connect Your OptimizePress

After authorising your website domain, you will see the main dashboard of OptimizePress. From here, you can install and activate OptimizeBuilder and Smart Theme.

If you have signed up to the Suite plan, you can also install the OptimizeFunnels and OptimizeUrgency WordPress plugins.

OptimizePress Dashboard

Services and apps can be connected in the next tab.

OptimizePress Integration List

For most apps, when you click to connect it to OptimizePress, you will be taken to the website to confirm authorisation.

Connect to a Service

The settings area has seven tabs, but the developers should really have placed all settings on one page as each section only has one setting to adjust.

From this area you can define what post types OptimizePress is enabled for, connect Facebook, enter your Google ReCaptcha settings, enter your OptimizePress affiliate link, enable scripts and styles, enable legacy features and define the request timeout period.

The settings area also has a link to the OptimizePress help centre.

General Settings for OptimizePress

Now that OptimizePress has been set up, you can start creating marketing pages.

OptimizeBuilder

Once you have activated the OptimizeBuilder WordPress plugin, you will see an option to create new pages in the OptimizePress Dashboard.

Templates are filtered by categories such as landing pages, thank you pages and launch pages. Saved templates are listed here too.

Each templates can be previewed before you select it.

Create a New Page

OptimizePress places many templates into collections.

Collection of Templates

Template collections are useful as they group together many different templates for a specific topic.

For example, the cyber sales collection has optin-forms, sales templates and thank you templates, and all have been designed around a “Cyber Monday” type sales promotion.

Cyber Sales

When you select a template, you are asked to name it and select what post type it will use.

Creating a New Template

OptimizeBuilder works in a similar way to other WordPress page builders.

The main menu is displayed at the top of each page. When you click on a menu item, a settings box is displayed in a sidebar at the left-hand side of your page.

The main canvas area shows your template. When you hover any part of your page, you will see options to move it, edit it, duplicate it, adjust styling and more.

OptimizeBuilder Interface

OptimizeBuilder integrates into WordPress in a similar way as page builders such as Divi Builder, so you can also launch OptimizeBuilder from the WordPress editor.

Edit with OptimizePress

The first option in the OptimizeBuilder menu is the elements list.

The top of the list shows layout elements for sections, rows and columns. These can help you structure your layout.

Underneath you will find 30 general elements. There are elements for images, videos, testimonials, optin-forms, Facebook comments and more.

Global elements can be found via the next button.

Elements List

The sections list displays dozens of pre-made sections. These can be great time-savers as they can be dragged and dropped into any part of your page.

There are sections for call to actions, testimonials, pricing tables and more.

OptimizeBuilder Sections

Settings can be accessed from within the visual editor too.

The available settings are page settings, page background, headline typography, body typography, page scripts, custom CSS, export template and revisions.

It’s worth checking through all settings, if only to adjust text and background colours.

OptimizeBuilder Settings

OptimizeBuilder allows you to create pop-up forms that are placed over your page.

You can customise every aspect of the pop-up including styling, margins, content and animation.

PopUp Overlay Settings

At the right-hand side of the menu, you can undo and redo changes and view your layout in desktop, tablet and mobile devices.

There are also buttons to preview your layout outside of the visual builder, access the OptimizePress documentation area, close the editor and save your layout.

OptimizeBuilder Menu

Pre-made templates and sections are a great starting point for new pages.

OptimizeBuilder allows you to adjust every aspect of your layout, so once a template has been dragged into the canvas area, you just need to modify it to suit your needs.

Adjusting Colours

Like any drag and drop page builder, you do need to spend time using OptimizeBuilder to fully understand what it can do, but you will be surprised at how quickly you will pick it up.

OptimizePress SmartTheme

OptimizePress comes packaged with a WordPress theme called SmartTheme.

It’s a minimal WordPress theme that acts as a canvas for OptimizeBuilder, however it does feature styling options, page options and useful settings for opt-in forms.

All theme settings are available within the WordPress theme customiser so you can see the changes you make in real-time.

SmartTheme

OptimizePress can be used with any WordPress theme, however if you are creating a website from scratch for marketing purposes, SmartTheme is a great choice.

The Cost of OptimizePress

The Essential plan for OptimizePress retails at $99 per year and grants usage and support for one website.

It allows you to create an unlimited number of pages and gives you access to all core features.

The Business license costs $149 per year. Upgrading increases usage and support up to five websites and includes access to the OnePage membership course. It also allows you to add scarcity alerts using the the OptimizeUrgency WordPress plugin and gives you access to over one million photographs on Unsplash.

The Suite plan costs $199 per year. It increases usage and support to 20 websites and lets you create marketing funnels using OptimizeFunnels. The hosted opt-in software OptimizeLeads is also included with this package.

OptimizePress Pricing

All plans offer support, product updates and access to monthly webinars.

No free trial of OptimizePress is available, however all purchases come with a 30 day money back guarantee so you can receive a full refund if you find that OptimizePress is not what you are looking for.

OptimizePress Money Back Guarantee

The essential, business and suite plans, were created for personal use only.

If you are looking to create pages and sales funnels for clients, you need to upgrade to one of OptimizePress’s agency plans.

The Agency Standard plan retails at $399 per year and allows installation on up to 15 client websites. This limit can be increased to 40 client websites if you upgrade to the Agency Pro plan that costs $599 per year.

Alternatives to OptimizePress

OptimizePress is undoubtedly a great product, however there are other good landing page solutions on the market which you should also consider.

1. Thrive Architect

In the WordPress world, one of the most popular alternatives to OptimizePress is Thrive Architect (our review).

Developed by Thrive Themes (our review), Thrive Architect offers a visual drag and drop landing page builder and 325 high-quality pre-made templates.

Many tools are included to help you create sales copy and it supports all major email marketing services.

A single license can be purchased for Thrive Architect for only $67.

Thrive Architect Landing Pages

Most other advanced landing page solutions tend to be hosted solutions that are sold on a Software as a Service (SaaS) basis.

In general, these hosted solutions are more expensive than OptimizePress and Thrive Architect, but if your business relies on marketing tools to drive traffic and sales, it may be a price worth paying.

2. Unbounce

Unbounce retails from $99 per month or $79 per month if paid yearly. It offers a modern landing page builder and pop-up creator, over 100 pre-made templates and integration support for dozens of applications and services.

3. LeadPages

Lead Pages retails from $37 per month or $25 per month if paid yearly. It can be used to build websites, landing pages, pop-ups, alert bars and more.

My final recommendation is Instapage. Available for $199 per month or $149 per month if paid yearly, the service offers a landing page builder, advertising integration and a ton of experimental features such as heatmaps and split testing.

Conclusion

OptimizePress is an excellent landing page and marketing solution.

The quality of pre-made templates that are included with the WordPress plugin is fantastic and its page builder simplifies the task of creating and modifying landing pages and sales pages.

Retailing from $99 per year, OptimizePress is also one of the most affordable advanced landing page solution available online.

To learn more about what it can do, please check out the official OptimizePress website. Be sure to check out the demo that is available there to get a better understanding of what the product can do. If you enjoyed this post, why not check out this article on 11 Top WordPress or ClassicPress Contact Form Plugins!

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: Development, eCommerce, WordpressTagged with:

Add Custom Fonts to your WordPress or ClassicPress Site

Using standard fonts on your Wordpress or ClassicPress site can get a little boring, and you might want to use custom fonts to brighten it up a little. Your blog conveys your vibrant personality and the topics you cover, and you can enhance it with a wide variety of custom fonts. Custom fonts are a nice feature which allow your blog to stand out from the crowd and catch the attention of readers..

Let’s face it; we all love blogs and sites with the right fonts. They not only decorate the site but also help attract the user to your content. However, the choice of standard WordPress fonts is limited and depends on the theme you are using. The good news is that you can add them manually or with specialized plugins.

And here, two questions arise – where to get custom fonts for WordPress and how to install custom fonts on your WordPress site.

Let’s take a look!

 Why Should I Use Custom Fonts?

The days are gone when Times New Roman and Georgia were considered the only fonts for texts on websites. Over the past few years, the font space has completely changed with the advent of fonts such as Google Fonts and others.

Today, there are hundreds of free fonts, information and training aids, and resources designed for design, available on the Internet. Unlike Adobe Illustrator, Photoshop, and other classic applications, WordPress does not give you full control over fonts by default. Only some themes choose to support and use custom fonts.

Therefore, in this post, you will learn how to find suitable custom fonts and how to use them in your WordPress site.

The Importance of Using Custom Fonts

Why change fonts, indent between words, line spacing, letter spacing, or font saturation, you ask? Be that as it may, some studies prove that typography improves reading comprehension.

Much depends on the construction of fonts. On a conscious and subconscious level – everyone evaluates the contents of a web page by design.

Font design affects readers, even if they do not pay attention to it. To abandon the font design means to abandon the development itself! The mood of the reader depends on it. The font either makes reading easier or forces users to leave the page.

All web browsers include a set of default fonts. This means that if the font is not specified in the CSS of the page, then the standard version will be used. You can always use the default fonts, but they complicate the work of users. That’s why it is essential to use a custom font. If your theme does not give you options for changing the font, many websites and tools can help.

Google Fonts Alternatives

Many of you know about free Google fonts. There are many more sites where you can find beautiful fonts. Some of them are free for personal use. If you need for commercial use, then you need a license. Google Fonts and Adobe Edge Fonts are free. That is why they are not so unique. And this doesn’t suit us.

Here are a few other resources for finding fonts for free and commercial use:

  1. TemplateMonster — On the TemplateMonster marketplace website, you will find everything for Web Design you need. There are also many fonts and font packs for personal use for a small price. Also, they are presented at ONE web development kit. The collection is huge and creative. To help you to choose, all fonts presented on brochures or frames. Every font is presented with a commercial license too.
  2. MyFonts — MyFonts currently offers the largest selection of fonts in the world. However, the prices here are also in the higher segment. So, if you have a tight budget, it might not be for you.
  3. FontSpring — Fontspring sells fancy fonts for commercial use. But in almost any family 1-2 free fonts that can be used for personal purposes. Besides, there is a separate section with free fonts. The collection is vibran. But you will have to carefully study the license information for a particular font before downloading.
  4. Cufonfonts —  It is also an extensive collection of different fonts. Select any, and you will see a page with detailed information about it. There are a lot of free fonts, and they are divided into individual sections. The sorting system on CufonFonts is quite flexible and convenient. Also, Webfont support is included.
  5. Dafont — Another accessible collection of 3,500 free fonts. Most of them are designed for personal use only. A nice feature DaFont is a category system. You can select fonts in the style of comics, video games, vintage, or stylized as Japanese characters.

The choice of fonts is very tempting because they are all pretty amazing. But you should not choose a lot. Use no more than two fonts on the site. Then the look of your website site will be consistent. Once you’ve picked your fonts, be sure to download the files for each style you’ll be using (normal, bold, italic, etc).

Now that you have selected the appropriate font for the site let’s find out how to add it.

How to Add Custom Fonts to WordPress

There are a few ways to add fonts to a WordPress site:

  1. Plugins: in this case, different WordPress plugins are used to facilitate the process.
  2. Manually: using this method, you need a downloaded font upload to the site and edit CSS file.
  3. Themes: many popular themes include built-in options to customize your fonts (note – we won’t be covering this option since the process will vary based on the theme you’re using, but quality premium themes like the Total WordPress theme will offer online docs you can easily follow – like this guide to add custom fonts to Total)

Option 1 – Change WordPress Fonts with Plugins

If we do not care about global changes, we can install WordPress plugins that will change the fonts on your site.

Characteristics of Custom Font Plugins

Open-source software has an advantage for the interest of the community, and WordPress also has this advantage. Several WordPress plugins allow you to add custom fonts. How to choose a suitable plugin with so many? What are the features of custom font plugins?

Here are a few points to take into account:

  • Ability to use custom font
  • Ability to use more than one font
  • Target Headers and Components
  • Bonus: the ability to change font settings from the visual editor

That’s all. The first feature on the list is very important. You can always download fonts from sites like DaFont, Font Squirrel, etc., but you need to be able to upload them to WordPress.

Let’s look at a few plugins for WordPress that allow you to upload custom fonts.

Custom Font Uploader

Custom Font Uploader

This plugin allows you to download Google fonts and apply them to various elements of your blog. For example, to the headings or body of the article or page.

Use Any Font

Use Any Font

This is a WordPress plugin that gives you a convenient interface to download fonts and use them directly through the visual editor. The WordPress visual editor can automatically change the font of any text. This plugin offers several features, which makes the process of adding custom fonts much more manageable.

WP Google Fonts

WP Google Fonts

WP Google Fonts allows you to use the Google font catalog. One of the amazing benefits of this plugin is the addition of close to 1000 Google fonts. While you can enqueue Google fonts manually, it’s much easier to use a plugin for most users.

How to install fonts with a plugin?

Let’s take, for example WP Google Fonts. Just install this plugin from the official WordPress repository and open the Google Fonts section.

WP Google Fonts

You’ll see a Google font control panel here. Choose fonts and change various settings, such as the font style, the elements to which it is applied, etc.

Option 2 – Install WordPress custom fonts manually

Through the @font-face directive, you can connect both one or several fonts to your site. But this method has its pros and cons.

Pros:

  • Through CSS, you can connect fonts of any format: ttf, otf, woff, svg.
  • Font files will be located on your server – you will not depend on third-party services.

Cons:

  • For the correct font connection for each style, you need to register a separate code.
  • Without knowing CSS, you can get confused easily.

But it is not a real problem if you can simply copy a finished code and where you need to specify your values.

Note: Before starting, be sure to create a child theme for your site. This way you can make all edits to your child theme, leaving your core theme in tact so you can easily update it as needed in the future.

Step 1: Create a “fonts” folder

Within your child theme create a new “fonts” folder under: wp-content/themes/your-child-theme/fonts

Step 2. Upload the downloaded font files to your website

This can be done through the control panel of your hosting or via FTP.

Add all font files to the newly added fonts folder: wp-content/themes/your-child-theme/fonts you created.

Step 3. Import Fonts via the child theme stylesheet

Open your child theme’s style.css file and add the following code to the beginning of the CSS file (after the child theme commenting):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

Where MyWebFont is the name of the font, and the value of the src property (the data in brackets in quotation marks) is their location (relative links). We need to specify each style separately.

Since we first connect the normal style, we set the font-weight and font-style properties to normal.

Step 4. When adding italics, write the following:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

Where everything is the same, only we attached the font-style property to italics.

Step 5. To add the bold font, add the following code:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Where we set the font-weight property to bold.

Remember to indicate the correct location of the font files for each style.

Step 6. To connect bold italics type out the following:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

Well, that’s it! Now you have connected four font styles to your website.

But there is one glitch – this font connection will be incorrectly displayed in Internet Explorer 8. Fortunately, there are very few people still using IE8.

Wrapping Up Custom Fonts for WordPress

What is the first thing users notice when they visit your site? Right, its design! Most of the design relies on the proper use of beautiful fonts. So you have to take care of the font design of your site. Add code or use one of the plugins mentioned above to embed a new font style. Which way you choose it is up to you.

Make sure you are not using more than two fonts on the same site. Since the more custom fonts you add to the site, the slower the site’s speed becomes. If you enjoyed this post, why not check out this article on 17 of the Best Google Fonts For Wordpress!

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: Development, eCommerce, WordpressTagged with: ,