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.
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
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!
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:
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-start, main-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-start, cross-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.
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-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-flow
This is a shorthand for flex-direction and flex-wrap. Usage:
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.
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-start, flex-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-start, start, self-start — Aligns flex items at the start of the cross axis. start and self-start adhere to flex-direction and writing-mode respectively.
flex-end, end, self-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.
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-start, start — Items align at the beginning of the container. flex-start adheres to flex-direction, start to writing-mode.
flex-end, end — 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.
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.
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.
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-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
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:
content — Sets the size according to the item’s content. It’s not well supported yet, same as max-content, min-content, and fit-content that also exist.
flex
Shorthand for flex-grow, flex-shrink, and flex-basis together. Only the first parameter is mandatory and the default value is 0 1 auto.
It often makes sense to use this property instead of flex-grow, flex-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>
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!
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.
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.
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.
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.
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.
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.
A host of shopping cart solutions can be used with OptimizePress to allow you to process customer payments.
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.
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.
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 requires you to license each domain you plan on using the plugin with.
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.
Once you upload and activate the OptimizePress Dashboard WordPress plugin, you will be asked to connect to your main account.
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.
Services and apps can be connected in the next tab.
For most apps, when you click to connect it to OptimizePress, you will be taken to the website to confirm authorisation.
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.
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.
OptimizePress places many templates into collections.
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.
When you select a template, you are asked to name it and select what post type it will use.
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 integrates into WordPress in a similar way as page builders such as Divi Builder, so you can also launch OptimizeBuilder from the WordPress editor.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
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.
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.
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:
Plugins: in this case, different WordPress plugins are used to facilitate the process.
Manually: using this method, you need a downloaded font upload to the site and edit CSS file.
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
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
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 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.
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.
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):
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.
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!
Talking about business, one of the most important aspects to think about nowadays is an online business presentation. No matter what you do or what your business is about if you don’t present yourself in the right manner and give your best to your potential customers, how can you expect them to give their time, attention and money to you? Not everyone is a website expert and it is not an easy job to decide how your business website should look. It is of great importance that it has all the information your customers would like to know. Whether your website is organized and neat, or unprofessional and chaotic could determine whether your potential customers ant to work with you.
Making a website costs you time and money. But, there are easier and cheaper options. Yes, I talk about WordPress Themes. For all those who found themselves in a situation to find the best theme for their business, I offer this list of free multi-concept WordPress themes.
Since there are a lot of themes across the internet, and it is not easy to choose from, we recommend some that, in my opinion, have all the characteristics of modern, eye-catching, neat and professional business presentations.
We strongly believe that the first impression is the most important one. Check the list we’ve made for you and choose what suits you best to efficiently represent your brand or company.
Arya Multipurpose WordPress theme is a user-friendly, well-organized theme that enables flawless, easy work for any website. You can use it for different Agencies, Portfolios, eCommerce Stores, Blogs, Photography Studios, Architect Studios and many, many more personal or professional businesses.
With Arya Multipurpose responsive theme, you don’t need knowledge of coding. Everything is so simple, and you have a 24/7 online support team for all your inquiries. This theme comes with fantastic Drag and drop features that allow you to create a website that will be distinctive and original, and yet professional. Numerous fonts and color variations, as well as social media buttons, are there for you to use it to create the best website possible.
Features that make Arya the best free Multi-Concept WordPress theme:
2. Multiple Business – Elegant Multipurpose WordPress Theme
This WordPress theme, that is crafted skillfully and with great care, is excellent for both corporate and creative business. Multiple Business website theme is clean, elegant and responsive. Its design is neat and modern.
The theme includes amazing features like one-click demo import, WooCommerce compatibility, cross-browser compatibility, multiple header and footer layouts, sidebar layout options, single-page layout options, custom page templates, bootstrap 4, different google fonts, unlimited color options and many more. With full Gutenberg and Classic editor compatibility, you can embrace the future of WordPress with Multiple Business.
Features that make Multiple Business the best free Multi-Concept WordPress theme:
3. Radix Multipurpose – Business & Consulting WordPress Theme
Radix Multipurpose responsive website theme is very modern and creative. It is perfect for any type of business website.
This theme comes with Quality Design & Standard Coding via HTML5 and CSS3. Some of its features include sticky header, cross-browser compatibility, fast performance, slider, animation, fully responsive and retina ready design. It has all the other options needed for the creation of your personal or business website. Also, friendly customer support is always ready to help you with any issue.
Features that make Radix Multipurpose the best free Multi-Concept WordPress theme:
This free multipurpose WordPress website theme is really great choice for any business. Multipurpose Portfolio responsive theme is highly suitable for digital agencies, creative portfolios, illustrators, content creators… With this nice and modern multipurpose WordPress theme, you can easily make all the websites that come to your mind.
The theme is trendy and lovely, but your works will be presented online in a professional and well-organized manner. This theme is known for its flexibility and personalization options. The SEO friendly nature is accompanied by a call to action button [CTA]. Multipurpose Portfolio theme is mobile friendly and translation ready. Blog option and social media buttons available.
Features that make Multipurpose Portfolio the best free Multi-Concept WordPress theme:
5. Multipurpose Photography – Professional WordPress Theme
Free Multipurpose Photography WordPress theme is specially made for all these creative souls that are in love with photography. The theme is ideal for photographers, travel bloggers, fashion bloggers, wedding websites and all those of you whose job is similar.
A big and beautiful slider on the homepage will have a great impact on onlookers. The layout optimized for all devices makes sure it loads perfectly on all the leading browsers. This Multipurpose Photography theme is multilingual, SEO friendly and supports RTL writing. It is retina ready to show sharp and clear images which is the essence of photography businesses. The theme comes with multiple website layouts, two blog layouts, and some amazing portfolio layouts. Fully customizable to give a personalized touch to the website, this theme is the choice that you won’t be sorry for.
Features that make Multipurpose Photography the best free Multi-Concept WordPress theme:
I hope that my suggested choices of multi-concept WordPress website themes have helped you in search for the best solutions for your online presentation of your business. Think twice while looking through these themes, not because you can be wrong with any of these, but because I know how hard it is to choose among these amazing suggestions. If you enjoyed this post, why not check out this article on the Top 25 Multipurpose Wordpress Themes For Blogging!
The MySQL database server is a powerful tool that allows developers to expand the offerings of web sites, applications, and more. In fact, if it weren’t for the likes of MySQL, web server software like WordPress would have a lot of trouble functioning properly. This is because databases store crucial information those platforms depend on. And without the means to serve that database information up, there’d be no way for the software to use the data. That’s where database servers like MySQL come into play.
MySQL is an open-source database server that can be installed and run on many platforms (such as Linux, Windows, and MacOS). MySQL is a relational database, so it’s perfectly suited for apps like WordPress. What is a relational database? Simply put, a relational database is a set of formally described tables that house data which can be accessed in different ways. The information contained within a relational database is easily compared because it is saved in columns and rows.
But how do you install the MySQL database and how do you enter data into its tables? I’m going to walk you through that process. I’ll be demonstrating on the Ubuntu Server 18.04 platform. Although I’ll be using the command line, there are plenty of tools (such as phpMyAdmin) that make use of web-based or local client GUI applications for the process.
Once you have your database up and running, with data inserted, that database can then be used for in-house or third-party applications. Although you’ll be learning how to add data via the command line, you shouldn’t have much problem with it. If you do, you can always hire one of many third party QA services like BairesDev to help you with the task.
What You’ll Need
The only things you’ll need to make this work are:
A running instance of Ubuntu Server 18.04.
A user account with sudo privileges.
With those things at the ready, let’s install the database server, create a database, and add data.
Installing MySQL
Believe it or not, the installation of MySQL is actually quite simple. Log into your Ubuntu Server instance and issue the command:
sudo apt-get install mysql-server -y
Once the server is installed, you’ll want to start the server with the command:
sudo systemctl start mysql
Finally, you’ll want to enable the MySQL daemon to start upon server boot (in case you ever have to reboot the server). This is done with the command:
sudo systemctl enable mysql
Securing the Installation
Before you can create that first database and add data, you must secure the MySQL installation. This allows you to do the following:
Enable the Validate Password Plugin, which ensures that all passwords must adhere to strict password policies.
Create a password for the MySQL admin user.
Remove anonymous users.
Disable root login.
Remove the test database and access to it.
Reload privilege tables.
To run the security tool, issue the command:
sudo mysql_secure_installation
If you want to enable the Validate Password Plugin, type Y and hit Enter on the keyboard (otherwise hit any key). Next, create your admin user password and then answer Y for the remaining questions.
Once you finish that, you’re ready to continue on.
Creating a Database
Let’s say you work with an IT software outsourcing company and you need to create a database of clients you work with. We’ll call that database clients. In order to create the database, you must first log into the MySQL shell. To do that, issue the command:
sudo mysql -u root -p
You will first be prompted for your sudo password. Once you successfully enter that, type the admin user MySQL password you created when you secured the installation. You’ll know you’ve successfully logged into the MySQL shell when you see the command prompt change
The MySQL shell is ready for commands.
Let’s create a database called clients. To do that, issue the command:
CREATE DATABASE clients;
In order to add data to the new database, you have to switch to it with the command:
USE clients;
You should see in MySQL report that you’ve switched databases.
We’ve created and switched to the new database.
Now it’s time to create a table in our new database. This is where the process requires a bit of thought. You need to know the information that will be stored in the table. Since this is clients, let’s say you want to store the clients:
First and last name
Business name
Email address
Phone number
If a piece of data will contain letters and numbers, you’ll most likely use the VARCHAR (variable character) type. If the data is only a number, you’ll use the INT (integer) type. For our list above, we could get by with using all VARCHAR types (even the phone number will have the – character).
Say you want to create a table for clients from the USA, using the list of data information above. The command to create this would be:
CREATE TABLE usa (name VARCHAR(20), business VARCHAR(20), email VARCHAR(20), phone VARCHAR(20));
The numbers in parentheses denote the longest a string can be. If you know you’ll have entries that will require more than 20 characters, up that number.
Type the command SHOW TABLES; to see the newly added table.
Our newly-created table.
Adding Data
Now we’ll add data to our table. Say you want to add the following client:
INSERT INTO usa (name,business,email,phone) VALUES("Paul McGowan","Xhostcom","[email protected]","1-646-224-2225");
To make sure your data was successfully entered, type the command:
SELECT * FROM usa;
You should see the new entry listed.
Our new entry has been successfully added.
Once you’ve finished working on the database, type the exit command and you’re back at the Linux bash prompt.
Conclusion
And that’s all there is to installing MySQL, creating a database, and then adding data to the database. With this information, you should be able to create all kinds of databases for numerous use cases on your server. If you enjoyed this post, why not check out this article on Setup ClassicPress on Ubuntu at Digital Ocean!
When a customer arrives at a website to figure out how to contact the company, what do they find? They may stumble upon a live chatbox in the bottom corner of the site or a phone number to call. While these are wonderful customer support solutions, it’s important to provide multiple avenues for customers to get in touch with you. After all, people are busy. They don’t have all the time in the world to sit on the phone or chat back and forth with a Virtual Assistant (VA), especially when this might take their focus away from their current work.
This is one of the reasons why email is still one of the most convenient and reasonable ways of communicating and why it should be an option for business websites. An email form allows customers to shoot off a quick message and respond at their own convenience. Plus, contact forms let you direct the emails to the proper department for response.
Thanks to plugins, adding these forms on your site is easier than ever. In this post, we’ll take a look at 11 of the best WordPress contact form plugins to use, as well as the unique advantages and features of each. Let’s get started!
WPForms
WPForms is a powerful WordPress contact form designed for even the most novice of website owners. Building online forms in minutes using one of the many pre-built WordPress form templates, this plugin provides all of the fields and features required to create your desired form. In addition, it easily integrates with your preferred email service provider and even configures to collect booking and order payments.
With WPForms, you can:
Utilize the drag and drop form builder
Take advantage of the instant notification feature for making quick responses to promising leads
Learn more about your users using intelligent geolocation data
In addition, WPForms also includes a number of useful add-ons such as the one designed to let readers submit their own content to your website.
Lastly, this beginner-friendly form plugin implements smart CAPTCHA and honeypot techniques for combating spam and allows for multi-page form creation. It streamlines your workflow with its entry management system, placing leads in one convenient location.
There is a free version available that includes many features needed to achieve effective, powerful forms for your WordPress site. However, there are also premium plans that unlock access to advanced capabilities.
In the end, you simply can’t go wrong with WPForms. It is one of the most feature-packed and user-friendly from builders on the market today.
Gravity Forms is one of the more popular premium form plugins available. It runs from $59 (for one site) to $259 (for unlimited sites).
Multi-page forms are a standout feature, giving your customers a chance to fill out extensive forms and view how much longer they have until completion. You can even limit your entries if you’re running a contest and only want to accept, say, 50 entries.
It features a plethora of standard fields you can use for posting items such as:
Radio buttons
Paragraph fields
Dropdown boxes
Advanced fields bring in information like websites, file uploads, and street addresses. You can incorporate schedule forms to allow people to set up appointments, as well as try pricing or post fields for the ultimate customization experience.
With over five million active installations, Contact Form 7 is the most popular form plugin in the WordPress repository. This is due in no small part to its simplicity and customization features. With the plugin, you can customize and manage multiple contact forms and place them on your sites within just a few seconds.
Contact Form 7 lets you modify the mail contents however you want. Plus, you can do all of this with some of the simplest markup on the market. The best part is that the plugin is quite clean, allowing it to work well with other plugins and tools such as Akismet spam filtering, CAPTCHA, and Ajax-powered submitting.
Our Simple Basic Contact Form plugin offers a secure, clean, and flexible way to add contact forms on your WordPress site. Much of the value of the SBCF plugin is fastened in its simplicity.
It’s a powerful option if you’re looking for a no-frills solution and don’t need any fancy or complex bells and whistles. Plus, it’s completely free!
With this plugin, you can:
Display forms anywhere on your site using the shortcode or template tags
Send descriptive, well-formatted, and plain-text messages
Easily configure and customize the contact forms via the plugin settings
In addition to the ease of use that you can enjoy with this plugin, you will also be able to appreciate the peace of mind that comes with knowing the forms are safeguarded against malicious content. The Simple Basic Contact Form plugin includes a handful of security features that helps with tasks such as spam blocking.
Formidable Forms is a free plugin that also comes with two pro versions, priced at $99 (for one site) and $399 (for unlimited sites). The plugin-maker pitches that you can get a form up and running on your site within 60 seconds.
Formidable Forms has a drag and drop builder that helps even the least knowledgeable webmasters. Email notifications are smooth and clear, and you can create forms with up to seven field types.
With this plugin, you can:
Import and export forms with XML
Customize HTML and CSS to make your form exactly the way you want
Tailor the success message the user sees after they submit the form
However, if you’re looking for a plugin that goes beyond creating a standard contact form, this is certainly worth considering. It comes with a built-in survey feature as well as a registration form option. More, you can even create payment forms and accept online payments directly from your WordPress site.
Contact Form by BestWebSoft is another ‘freemium’ plugin that comes fully loaded with dynamic features. Prices range from $30 per year for one site (for one site) to $300 for lifetime access.
One of the things that makes this plugin unique is that it lets you incorporate actions into your forms to control who the form submissions are sent to. You can choose one or multiple people within your organization.
Additionally, you can also add a field for customers to include attachments and send out a copy of the email to the person who actually submitted the form. Each of the fields you create on your form is customizable, allowing for the changing of labels and submission fields when your form is displayed on the front-end.
You may know Jetpack as one of the most installed plugins from the WordPress repository. The plugin features a suite filled with plenty of free tools to power up your site and make it run a little smoother.
Some of the tools that come along with it include:
A mobile responsiveness builder
Site performance tool
Site stats and reports
Social network commenting system
However, this is an article about WordPress forms, which Jetpack also offers. This versatile plugin provides a sleek and powerful form builder, which is backed by Akismet for blocking spam from building up on your website. The forms are some of the more simple options on this list, making it easy for designers at any level to work with.
Ninja Kick Sidebar is a premium WordPress plugin that lets you add a contact form with content push animation effects and clean design to every page of your site. You can also use it to add a floating button to your site that is always visible.
This plugin not only adds a well-designed contact form to your WordPress site, but it also increases the likelihood of your audience connecting with you, generating more sales, and landing more clients. Check out our Ninja Kick Sidebar review and how-to guide to understand how to configure the plugin properly and get more leads.
The Visual Form Builder plugin is free to start, but they also offer a pro version starting at $29. The goal with this plugin is to build forms within a few minutes, without having to touch any code.
So if you’re looking for a straightforward solution, this is a strong contender. The plugin lets you add fields with one click and use the drag and drop functionality to arrange fields in whatever order you like.
Feel free to export your forms to a CSV file and automatically store your forms in the WordPress database. Not to mention, the plugin has one-click form duplication to save you time while designing.
The Quform plugin is a premium option that goes for $29. However, this is a modest price for what you get. It uses a live form builder and 15 form elements to make it super easy for you to build unique, fully functional contact forms within a few minutes.
With this plugin, you can create unlimited forms and manage the entire list of submissions from the convenience of your WordPress dashboard. The plugin comes with both light and dark color options. Additionally, the responsiveness and reCAPTCHA functionality helps it stand out from other plugins.
Ninja Forms has the power of a premium plugin, but it doesn’t take a dime out of your pocket. It lets you quickly and easily design stunning forms using a drag and drop interface, all without having to touch a line of code. The custom input mask restricts some submissions for things like currency and dates.
With this plugin, you can manage, edit, and export every submission that comes through the form. You can also save some of the fields you create as favorites for use in the future.
Another appealing bonus is the datepicker feature. Finally, the plugin provides messaging to multiple people in your organization, along with confirmations to the customers who submit the forms.
WordPress is a powerful CMS to build websites, but it’s not the only website builder that one should consider for creating and managing great sites.The Internet is full of WordPress alternatives, but most of them do not remotely come close to Wordpress as this. Sitejet however, is one of its kind. As a great CMS and website builder, Sitejet helps you in creating and managing your custom website. Unlike other website builders, it targets professional web designers to create websites for their clients as well as self builders, so here, in a departure from Wordpress or ClassicPress, we down tools in the bunker to have a look!
Sitejet remains flexible and helpful by offering web designers to export their websites on their desired host. This way, you’re free to go anywhere, unlike Squarespace, Weebly and Wix users.
Sitejet Review
Before we start, here’s a quick video intro of Sitejet.
Well, let’s move to the Sitejet review and see why this is still a good CMS for designers and developers who for one reason or another, do not need a full blown Wordpress or ClassicPress build.
Website Builder
Website builders are very handy while designing great UI. You can actually see the changes you make.
The WYSIWYG Editor (What You See Is What You Get) is included in every Sitejet plan. So, you will be able to see what you are building and how the frontend will look once you’re done with it.
Automatic Website Generator
If you want to create a website from scratch, then this feature is for you. All you need to do is, enter a few details about your project and let the AI-based system work. Quick and easy!
Automated Backups
For WordPress backups, we could use tools like ManageWP, VaultPress, or a plugin like BackupBuddy. While choosing a plugin, we might want to initiate a backup manually.
If you use Sitejet for hosting your website, you will get automated backups. So, your hard work is always safe.
If anything like a database crash or hack happens, you can easily restore the website from a previous backup.
Responsive Designs
Every template they created is 100% responsive. This means that the website will fit every mobile, desktop, and tablet screen. However, if you plan to create a custom website, it will also be responsive.
Unlimited Visits
Some web hosting companies like Kinsta and WP Engine will limit the visits we get on our websites. So, as our business grows, we might want to move to a more expensive plan.
With Sitejet, you won’t get a warning sign on the frontend after exceeding the limit. There are no additional costs for using all those resources. You can get unlimited visits on your website.
CDN
With just a click of your mouse, you can serve your website files through a CDN (Content Delivery Network). A slow website is not good for both SEO and user experience, especially if you are running an eCommerce business.
Serving the contents from a CDN will speed up the website loading. It will not only help in ranking your website better on the search engines but will also result in increasing conversions.
SSL and DDoS Protection
If you are running an online shop, you might want to consider using an SSL certificate on it. It will boost the confidence of the customer while paying on your website. I am saying it again – if you are accepting payments on your website, an SSL certificate is a must-have.
You can enable the SSL certificate from the Sitejet dashboard. Also, as an additional security option, there’s a DDoS protection feature available.
The system will block every IP that is trying to log in to the admin panel using the wrong credentials. It is an additional layer of security.
Pre-Built Templates
Creating websites from scratch can take a lot of time; hence, instead of building sites from scratch, you can import pre-made templates to your live site! You can choose the colors, layout, etc. for manual work.
But, here, they gave us every template we need!
They have categorized the layouts like:
Multi-Pager.
One-Pager.
Landingpage.
Selecting a different layout option will filter the results and show you those specific ones.
Also, they have the main category like:
Art.
Business.
Blog.
Services.
Shop.
Health.
IT.
Legal.
You could import any of the pre-made templates or completely create one from scratch.
The template section will also show you a live preview of the demo. So, you can check it, verify the features, and make sure that you are using the right one.
Integrations
By integrating Sitejet with your favorite apps, software, and services, you can be more productive. There are a ton of integrations available.
Some of the major integrations are:
Google Analytics.
Hotjar.
Booking.com.
Salesforce.
Helpscout.
Facebook Messenger.
Intercom.
Google Ads.
Zapier.
Aweber.
ConvertKit.
Well, if you got a Zapier account, you can integrate your project with thousands of apps. It’s a very good service, and if you need any help regarding integration, you can refer to their documentation.
If you need more personal care, feel free to contact their support team. They will come and assist you personally.
Plans
There are 3 premium plans available.
Professional.
Team.
Agency.
Each plan will allow you to host 1 website for free. If you want to host more, you would need to spend $5 every month for the additional websites. Also, the automatic website generator is available on every plan.
So with just a few mouse clicks, you can create your custom website.
You can choose a plan according to your use. If you want the basic features only, the professional plan is good. It comes with the most basic features.
And for more advanced ones, you might want to take a look at other plans. Or, if you want a custom plan, you can contact the sales team and design a custom one according to your ideas.
The Team plan comes with a 14-days moneyback guarantee. So if you are not sure how Sitejet will work, you can utilize those 14 days for learning.
And if you think Sitejet is not the right option for you, you can easily claim a refund from the team.
Get Started With Sitejet
So, are you ready to move forward with Sitejet CMS? Then just click the button below to get started.
I hope you found this Sitejet review helpful and enjoyed reading it. If you did, please consider sharing this post with your friends and fellow bloggers on social media. If you enjoyed this post, why not check out this article on Top Wordpress or ClassicPress Forum Themes!
In this post, I take a look at how to set up, install and configure ClassicPress on an unmanaged web server at Digital Ocean VPS. The server we are going to set up should be running on Ubuntu 16.04 with a working Vesta Control Panel that can be used to manage multiple websites, email accounts, Ftp accounts, Mysql Databases, DNS records and more. ClassicPress is a lightweight, faster and more secure fork of Wordpress, and is used by Xhostcom for most of the bespoke site builds. This is for self builders who want to use ClassicPress with Digital Ocean.
An Unmanaged Server
As the name explains, an unmanaged server is one that is not automatically controlled or managed by a hosting provider or other service; it is managed by you. The hosting provider gives you access to a dedicated server where you install the necessary components to keep your server & website running. There is no support mechanism to could guide you if anything goes wrong.
So, you can either hire skilled people to help you with the configuration or you can do it yourself with a manual installation guide. (Be aware that you can mess things up if you aren’t skilled enough.)
For a moment, let’s assume you have a knowledge of how to set up a server and you got your website running successfully. Fortunately for you, in time your business/website starts to gain traction and your business starts to grow. But, over time, you notice your website has become a resource hog. Your dedicated unmanaged server isn’t capable of serving your website anymore.
All is not lost! You have three options:
Add more resources to the existing server. This may or may not be possible, depending on your hosting provider. Some hosting providers allow for an upgrade, while others do not. If you are lucky and your provider supports an upgrade, then you can add more resources. However, there are usually limits to how much you can add and, depending on how it is set up, you may experience some downtime during the transition.
Add more servers and distribute them accordingly. This can be a daunting task, as you have to manually configure them yourself or hire knowledgable people to do it for you.
Migrate to a cloud server. A cloud server is capable of scaling automatically as the need arises. You can automatically upgrade CPU, Ram, or Disk Space with little to no downtime.
This guide will assist you in registering and configuring your cloud server at DigitalOcean.
What is a DigitalOcean VPS?
DigitalOcean is a cloud hosting provider that offers, among others, Virtual Private Servers (called Droplets). Like a dedicated server, you own your Droplet. You have the privilege of choosing your OS during deployment and you’ll also be able to configure the VPS to your liking.
The benefits of using Digital Ocean’s VPS solution are that they maintain the hardware for you, and you can automatically scale when the need arises. With that understanding, we are ready to move into the main part of this guide.
Note: I’ll assume you have a registered domain name
Let’s buy a server at DigitalOcean and get on to setting up ClassicPress.
Registering at DigitalOcean
If you have a registered domain, then you want to point the domain name to your Droplet. (You’ll remember I said a Droplet is Digital Ocean’s name for a Virtual Private Server). You need to purchase a Droplet to proceed.
Click on the link above, and fill in your details as shown below, you can use Github if you like, as I did.
Sometimes, you might be redirected to a Recaptcha page upon clicking the “Create Your Account” button. Verify you are not a robot and you will be redirected to the below image if using Github. Click “Authorize digitalocean”
You will be sent a confirmation link to confirm your email address.
Once you’ve verified your email address, you will need to set up your billing account. This is necessary in order to eliminate frauds and spammers. Fill in your credit card details or use PayPal to make the process faster. You may see a temporary authorization hold on your card, which your bank should release soon. DigitalOcean does not charge you until you start using paid services.
Don’t be surprised if your account is automatically locked after verifying your payment details. Don’t be scared; you will be unlocked after the team checks it manually, This could take a few hours, so if you don’t want to wait, contact them using this email address: [email protected]. Tips: In case you are asked the reason for choosing DigitalOcean, reply by saying: I want a better cloud hosting with a greater uptime for my website.
Hopefully, your account is now unlocked, and you are ready for the next step. We’ve covered a lot already, this is where the information you learn above should merge together like ice-blocks ?
Creating a Droplet on DigitalOcean/Creating an SSH
Droplet is the nickname of Digital Ocean’s VPS (Virtual Private Server). They are virtual machines that run on top of a virtualized hardware. They mimic a real server in that you are provided with a set amount of CPU, SSD (Solid State Disk) Storage, and RAM.
Let’s create our first Droplet:
Click on your new project and fill the fields: Name of your project, description, and purpose.
Click on “Get Started With a Droplet”
Select Ubuntu 16.04.6 x64
Wait! Don’t select the $40 Droplet, you don’t need it if you are just starting out. The $5 Droplet can handle more than you think it can. Select the $40 Droplet if you know what you are doing. If you use the ClassicPress referral link, the $40 Droplet covers you for two months, which is $80, then you pay $40 every following month.For me, the $5 Droplet is okay for now. .$10 Droplet isn’t bad either if you feel 5 bucks is too cheap ?
Select your datacenter region (where you want your data hosted, e.g if your users are based in New York, select it, if you don’t have an idea, kindly ignore and select at random). Please tick those boxes the red arrow is pointing to
Please Select SSH as your authentication. Secure Shell is more secure than using a password to login on your server. SSH helps to communicate remotely with another computer in a secure way by ensuring that the exchange of data is encrypted. Encrypting the data keeps it from being intercepted by an unauthorized system. There is more to this, but for now, just see SSH as being stronger when compared to Password authentication.Let’s proceed. Select SSH and Click on NEW SSH KEYEnter Your SSH Name Here
In completing these steps, some stuff could get complicated along the way. Let me briefly explain the concept of how SSH works:
Do you remember when I said “SSH helps to communicate remotely with another computer”?
There are two pairs of SSH keys: Private and Public. The private is known as the client key (those are the ones in your physical or local computer); the public key is stored in your server (in this case, your Droplet).
When the client tries to connect to the server, the client does this to the server:
Client: “Hey server, I am your boss, I have the private keys.”
Server: “Hmm, where is your signature if you are my boss?”
Client: “……….” (note: the client isn’t actually sending the private keys. It demonstrates to the server that he is the owner of the private key, in the form of a digital signature)
Server: “Let me verify from my Public key.”
The server verifies the signature and if it correlates, the client is given access to the server.
We need a way to generate the Private and Public Keys. On windows we use a program called PuTTY, on Mac and Linux, you use Openssh.
I am on Windows, so, I will be using PuTTy. Mac and Linux users can follow the on-screen instructions here:
Scroll using the scrollbar to follow the above image for openssh!
Steps for windows are as follows:
Go to the PuTTy website, and download the setup appropriate to your system:
Download the 32-bit version if you are on a 32-bit system, I am on a 64-bit system, so I should be downloading the 64-bit version
Install PuTTy on your local computer by double-clicking the putty program file,
Upon clicking on Next in the above image, click on the subsequent Next and wait for PuTTY to complete the installation.
Once that is done, search for PuTTYgen or locate it inside this folder: C:\Program Files\PuTTYand open puttygen.exe
To go to this folder on a 32-bit system: C:\Program Files (x86)\PuTTY
Click Generate and then move your mouse randomly over the blank area. (This is called the entropy of mouse motion. Bring in thousands of users, and no one would ever predict your mouse movement. This means no one can reproduce your keys. If you are curious to learn more, you can read this StackExchange answer .)
Your key looks like this, once it is generated:
You can also password protect your SSH key by filling the Key passphrase field. This way, if someone gains access to your computer, they will need to provide a passphrase to access it. Keep in mind that you must provide this passphrase every time you use this key.
Note: Don’t use a simple password or password you’ve used elsewhere; use something stronger. You can generate one here: Password generator
Once generated, store the password inside a private book at home. (No, don’t keep it on your PC.)
Save your Private Keys in a folder in your local computer:
We are getting there!
.
Copy the Public Key and paste it in your DigitalOcean account. Make sure you copy everything:
Click “Add SSH Key”
The last step of finalizing our Droplet: Choose your name, add tags and Click “Create Droplet”
You can also enable backup
You will see a progress bar:
You see this once the progress bar is done setting the server up:
The next part is initial server configuration and a basic server security enhancement that helps in securing your server a bit. When we are done with that, we will point our domain name to our DigitalOcean IP and finally install VestaCP.
Connect to your Droplet with PuTTY on Windows
Since we have PuTTy installed, let’s configure it to connect to our DigitalOcean Droplet
Open PuTTy: Locate it inside this folder: C:\Program Files\PuTTY and open putty.exe, if you are on a 32-bit system, goto this folder C:\Program Files (x86)\PuTTY and open putty.exe .Putty window ↑
Copy The Droplets IP: Copy your Droplet IP address in the control panel, and paste it in the putty IP field: Copy Droplet IP in DigitalOcean control panel ↑Paste it in the field Hostname ↑
Add SSH Key: Add the private ssh key we generated in putty Add ssh authentication ↑Select the private key we generated from putty the other time ↑
Add Root User: root is the default administration user on an ubuntu server. Let’s add it to the Auto-login username field: Type in root ↑
Lastly: Save your session for recurrent login Type in the session name, in my case, I wrote “My New Session” ↑
Once you are done with the above steps, you can open up PuTTY and select your new session to access your server.
Note: The first time you connect to the Droplet, PuTTY’s security alert pop-up asks you to confirm that you trust the server. Please choose “Yes” to save the server host key as this is the first time you are connecting, or select “No” to connect without saving the identity.
Load the new session you saved ↑Select Yes ↑
PuTTY automatically adds your root username. Since we are using an SSH key, you will be prompted for the password you set on your key. Input the password and you should be automatically connected to your Droplet server:
Putty prompting for passkey of user root ↑You can see we are connected to the Droplet server ↑
Initial Server Setup In Ubuntu (Recommended)
I almost skipped this part! This section is highly recommended if you care about tightening your server security, usability and reliability.
If you prefer an automatic method, you can use a setup script from Jason Hee; it does the heavy lifting for you.
In my opinion, you should go with the manual method. You will not only learn how to troubleshoot issues in the future but also see what is going on step by step. Ultimately it is up to you.
Pointing DigitalOcean Nameservers to Your Domain Name
I am using Namecheap, so, the control panel could be different from yours, but it should be similar regardless of the panel.
Go into domain manager:
Add Digitalocean nameservers:
This should be ns1.digitalocean.com, ns2.digitalocean.com, and ns3.digitalocean.com
Now, head back to the Digitalocean control panel and create 2 new domain names. One should be your real domain name (e.g websitename.com) and the other should be your panel name (e.g panel1.websitename.com):
Click on Add a domain
Repeat the above step and create a new domain for your control panel URL: panel1.websitename.com where websitename should be the name of your domain.
If you’ve done that, you should now have this:
Navigate into the websitename.com, and add a CNAME record pointing www.websitename.com to websitename.com:
If everything is done properly, you should have the below DNS records:
Remember: “websitename.com” should be your domain name, I’ve used this only as an illustration.
You might be prompted for a password to confirm you are the new user. Enter the password for the non-root user and proceed by removing group admin using:
sudo groupdel admin
Finally, use this to install vesta:
sudo bash vst-install.sh
You will be asked to confirm the software you want to install on your system, enter y and hit enter:
You will be asked to enter your email address, please enter one:
Lastly, you will be asked to enter your FQDN (Fully Qualified Domain Name), this should be the panel URL: mine is panel1.devsrealm.com
Note: Devsrealm is the name of the test domain, so you should replace it with yours:
Vestacp takes about 15 minutes to complete the setup, so sit back, take a sip of your water, and watch.
Once that is done, Vesta gives us the info to access our control panel:
Copy the panel and paste in your preferred browser, this is mine: https://panel1.devsrealm.com:8083
Note: If you aren’t able to access your panel URL, it probably has to do with the DNS propagation. It might take anywhere between 30 minutes – 48 hours. If this happens to you, you can use your Droplet IP to login instead; e.g 157.245.94.17:8083. You can also check the url using whatsmydns.net to see if your url has propagated yet.
You will get an SSL warning like this, kindly click on advance and proceed. The warning is normal for first-time access: Setting Up Your Vestacp
Log in with the user and password Vesta generated for you:
Don’t be like the average Joe! The first thing you should do is change your Vestacp password.
Hover over the admin area, and click Edit:
You can either let Vesta generate the password for you, or you can generate it yourself using Password generator
Wait! Don’t save the settings yet. You can also change other settings like the user’s first and last name, but the most important part to change is the Nameserver:
Change both fields to ns1.digitalocean.com & ns2.digitalocean.com:
Press Save when you are done fiddling with the settings. Take your time!
When you are done saving, Navigate to the Web Section:
You should see this:
Before we continue editing, visit the URL to confirm all is in place properly. You should see an Apache Ubuntu Default Page, telling you it works!
You can read those later, head back to the web section in Vestacp and click on add web domain name.
Adding New Domain
Add your domain name and change the IP address to the IP address of your Droplet like so:
Click Advanced Options, and use the following setting:
Aliases should be www.yourdomainname.com, this way your user can access your website using www
Web Template – Default
Proxy Support – check
SSL Support – check
Let’s Encrypt Support – check
Web statistics – choose Awstats, I love how it shows me the bandwidth I am consuming
Statistics authorization – check, and add a unique user & pass
Additional FTP – If you feel you need one for uploading to your hosting easily, check and create the user and password; leave the path as is
Save.
Access your website URL (e.g yourdomain.com) and you should see something similar:
Adding A New Email Account
Go to the mail section and hover over the domain you’ll want to add the email support for:
Add your username in the Account field; add a unique password and click on the advanced section
The Quota allows you to set a mailbox size limit. This is useful since you’ll want to reserve disk space for other things. You can press the infinity icon to give it an unlimited storage
Aliases allow you to add other email addresses that forward to that main account. You don’t need this in most cases. The only case you might need is when you have an email account on another service, and you want to keep your emails on that service.
Send login credential to an available email of yours and click Add
To access your email, use panel.example.com/webmail, where example.com should be your domain name. Log in with the user and password you just setup, and you should be ready to go!
Note: You can also use branded nameservers if you have one. It is possible to brand your nameserver if, for instance, you want to use a custom nameserver for every website you are using e.g (ns1.yourwebsite.com). This is beyond the scope of this guide, but if you want to host multiple websites on one Droplet, just point your new domains to the default DigitalOcean nameservers at your domain registrar (ns1.digitalocean.com, ns2.digitalocean.com, and ns3.digitalocean.com) and add new domain as we’ve done above. When adding new domains, make sure you select public address from the listed IP addresses.
Installing ClassicPress Via Softaculous
Softaculous comes pre-installed in Vestacp. It is useful for using scripts to install platforms like ClassicPress, Presta, Joomla, Abantecart, and WordPress.
ClassicPress is due to become available in Softaculous, but in case it is not there yet, there are workarounds. We can either use a free “Softaculous one-month trial license” to install ClassicPress or use wp-cli to download and install ClassicPress. Installing via wp-cli is a little more complex than we want to get into for this example, so for now, let’s use the free month trial.
Note: You can also buy a VPS license for $12 a year. The price is very reasonable!
Visit Softaculous Free Premium for your free trial. Enter your Droplet IP and click issue license
Give it about 5 minutes to process, and log in to your panel.
Click on App at the upper section:
Search for ClassicPress:
You should see the ClassicPress page. Hover over the Install tab and choose Custom Install:
Use this setting to complete the installation:
Software Setup – Choose your domain name, and make sure the In Directory is blank
Site Settings – Add the website name and your preferred description
Admin Account – You need this to access your admin panel, input user, password and email of the account
Enter your email in the Email installation details, and Install
When you are done installing, you will be given info details, which should look something like this:
Access the admin dashboard (e.g https://yourwebsite.com/wp-admin) and start building with ClassicPress! If you enjoyed this post, why not check out this article on 5 Top WordPress or ClassicPress Gaming Themes to get started!
Games have become an integral part of our daily lives. They are no longer something we relate to as our childhood memories, but have rather become a lucrative business that is getting more popular by day. Anyhow, whether you’re into developing games themselves, or you are a passionate gamer who likes to share their playing techniques, create communities or spread the novelties in the gaming world with fellow gamers, you’ll always need a place on the Internet to showcase your work. And what a better way to do so than by creating a website that will reflect what you do in a proper manner. So, in order to help you get started, I have selected the top 5 gaming WordPress themes I found on the web and thought would do an amazing job. Scroll down and let’s see the list I have put together for you.
So let’s take a look at some of these awesome themes!
1. Entropia – Gaming and eSports Theme
Can you already feel this theme buzzing? Entropia is a real game changer among gaming WordPress themes. Apart from its super modern design that will leave any gamer with their mouth wide open, this theme can also take pride in the functionalities that it’s packed with as well. With a wide collection of home and inner pages and custom shortcodes, you’ll be able to play with all of these elements until you create a website that will look and function exactly like the one you pictured in your head. What is also great about Entropia is that it is retina ready so you won’t have to worry how it is going to look on different devices. And lastly, if you are a fan of social media and you use them as a tool to promote your activities, Entropia will help you incorporate that content into your website in a blink of an eye, ‘cause it is also equipped with social share functionality. Pretty amazing one, right?
Features that make Entropia the best WordPress gaming theme:
Yes, you will be a gaming God with this theme, no kidding. Let’s start from what your followers will see first – the visual aspect. No doubt many of your website’s visitors will remain in awe, ‘cause this theme’s design is nothing but mesmerizing! Godlike is packed with smooth animations and parallax, and on top of that, it allows you to change your website’s color to whichever one you desire. All you have to do is choose, and the options are limitless. Furthermore, this gaming theme alsocomes with an option to enable the age checker, so that way your pages and posts can be visible only to those age groups that your content is meant for. And, as if all of this weren’t enough, Godlike supports BuddyPressthat will help you create a forum and organize online teams and groups that you, as a gamer, are most certainly in need of. Lastly, if you are planning on promoting yourself, this theme comes with Mailchimp integration, so your online marketing will be taken care of as well.
Features that make Godlike the best WordPress gaming theme:
3. PlayerX – A High-powered Theme for Gaming and eSports
Well this one definitely has the X factor! PlayerX is a theme designed to provide you with everything you might need in the gaming world. With a powerful admin interface, a single click demo site import, and many shortcodes included in this gaming theme, you’ll have plenty of time and energy to dedicate to what you do best – gaming! In addition to this, PlayerX is equipped with Twich, YouTube and Mixer integration, match list, stream box and dozens of portfolio layouts, so you can announce your streams or display a list of your matches without any problems. However, if you have already made a brand out of your gaming style and you’d like to sell gadgets, T-shirts and other stuff, you’re in the right place ‘cause this theme is compatible with the WooCommerce plugin that will make your online store easy to set up.
This premium gaming WordPress theme is recognizable by its dominant red and black colors. However, this is not the only aspect that makes Game Addictmemorable. With its many outstanding functionalities you’ll have everything you desire in order to create your perfect website. If creating clans and scheduling your online matches is what you consider essential for a gaming website, you won’t have to go further, ‘cause this theme will provide you with both. This marvelous theme includes BuddyPress support, a rating system widget as well as the clan war system. Moreover, it is equipped withWPBakery plugin that will allow you to build your website in a blink of an eye. This theme will also allow you to upload a background image of your own choice and therefore create a website you’ve always wanted. Lastly Game Addict is translation ready, so your website will be understandable to all of your fellow gamers around the globe.
Features that make Game Addict the best WordPress gaming theme:
Eldritch is the one that will definitely make you bring your A game. This astonishing theme contains easily customizable homepage layouts, allowing you to present your esports matches, blogs and streaming videos the way you want to. Other than its impeccable design, this gaming theme is also empowered by numerous features that will allow your website to function with ease. Moreover, you will find that many popular plugins such as WooCommerce and Slider Revolution are included in the price so we can say with certainty that this one is more than a good bargain. On the other hand, if you are worried that your website won’t look the same on mobile phones, we can tell you that you can forget all about those worries. Eldritch has the option of separate styles for mobile header, and a completely responsive, retina ready design that will always leave a good impression regardless of the device your followers are opening it on.
Features that make Eldritch the best WordPress gaming theme:
So, to wrap it all up, if you are looking to start your gaming career or just take it to the next level one of these 5 gaming WordPress themes will definitely help you achieve your goals. Want to form clans, schedule your matches, and create a whole community of gamers? No problem! Each and every one of these themes will let you do that and make you stand out from the crowd. No need to wait any longer, grab your perfect theme straight away!
If you’ve ever bought a WordPress theme, installed it, then wondered why it doesn’t look exactly the way you saw it in the preview. you’ll know what it feels like to be a little bamboozled. What about a situation where you’d like to completely remove the blog portion of your website from the homepage? Website homepages mean a lot when it comes to conversions. This goes for email newsletter signups, sales and client leads. Yet, configuring your homepage on WordPress takes a little elbow grease to make perfect. But don’t worry, setting up and editing your WordPress homepage is just about one of the easiest tasks you’ll encounter. Then, after you know the routine you’ll have no problem completing the same task over and over with future websites.
When Would You Need to Set & Edit Your WordPress Homepage?
Seeing as how this is WordPress, a blogging platform, your blog shows up by default for a new WordPress installation. This means that all of your most recent posts show up on the first page that everyone lands on. For some websites, this is perfectly fine. For others, it doesn’t make sense from a marketing standpoint. Since WordPress has evolved into a well-rounded website builder, companies are looking for static homepages, where they can present information on products, services and the people working at the company.
For these companies, a blog is more of a secondary section that customers can navigate to if they want, or when they land on one of the blog posts from a search engine.
So, that begs the question, when would you want to set and edit your WordPress homepage?
Well, the main time is when you don’t want your blog out front. This happens when you have some of the following goals:
Increase email subscribers
Get more leads
Generate more sales
More of a focus on your services
When you don’t plan on having a blog at all (like a landing page)
In a situation where you’re not quite ready to start a blog
Editing the homepage is an entirely different story. Unless you’re entirely satisfied with the theme and default configuration of that theme, chances are you’ll want to edit some aspects of your website. For example, you might want to achieve some of the following:
One or multiple sidebars
Show widgets
Have a different navigational menu setup
New colors, logos or other design aspects
In short, most WordPress users make at least a few adjustments to their homepages. One of the most popular ones is adding a static page instead of the blog, while others are keen on keeping the blog but still adding all of their favorite widgets.
Now that we’ve understood the “why” behind setting and editing your WordPress homepage, let’s explore how to complete the process.
How to Set a Static Homepage in WordPress
As discussed you have the option to leave your blog on the homepage. But if you’re more inclined to make more of a landing page or add a slider or product gallery, changing your homepage to a static homepage is required. In fact, the vast majority of premium themes you purchase are going to ask you to immediately switch to a static homepage.
Start by opening up your WordPress dashboard and going to Settings > Reading. Select the Reading tab to open up several settings for your homepage.
Find the Your Homepage Displays section to see what exactly your website is currently showing on the homepage. Chances are it’s on the Latest Posts option by default. To choose a different page click on the Static Page radio button to select and set your new homepage.
Upon selection, WordPress reveals two more choices for you to make. One of them asks you which page you’d like to show as your Front Page and the other is for your Posts Page. If you already have a bunch of pages made on your website (sometimes themes generate core pages for you, or perhaps you’ve already gone through and made your pages) just scroll down to find the pages you want.
Note: You need to have already created and published your pages to be able to select them.
For example, a standard setup would be to choose the Homepage or Front Page as your Front Page. Keep in mind, this all depends on the names you give your pages, so it could be completely different for you.
For the Posts Page, you might select a page called Blog or Posts or whatever else you decided on.
Hit the Save Changes button, then navigate to the frontend of your website to see how that static page has become your homepage.
How to Make Your Blog the Homepage
Some folks only want to show their blog. It’s most common with, you guessed it, blogs! A general business website probably won’t have a blog as its front page, but a website dedicated solely to written content is more likely to want those articles on the homepage.
Therefore, go to Settings > Reading, then check to make sure that you have Your Latest Posts marked. You don’t have to adjust the selection for the Front Page or Posts Page. Those will be blanked out.
However, a few edits can be made depending on how you’d like your blog to show up. First is the Blog Pages Show at Most count – this is how many posts are displayed per page. You might want to have only five or ten of your most recent blog posts on the homepage. Some larger publications keep hundreds of posts on the front page, while many blogs limit then number. But no matter what you choose if you have more posts than the number you want displayed your blog will create additional pages for the posts (this is called pagination). So if you have 25 posts and choose to show 10 posts per page, your blog will have 3 pages created to display your posts (you can see WPExplorer has 75 pages
Next is the the Syndication Feeds Show the Most Recent count. This is used for RSS feeds and can be the same number as your blog pages, but it’s entirely up to you.
Finally, you also have a big decision to make regarding how those posts are going to appear. Your choices are Full Text and Summary. The summary gives users a chance to see more posts in a few scrolls of the mouse, and is what we use on WPExplorer. The full text, however, reveals every single word and image from every post. Therefore, a visitor must scroll all the way through the first post to get to the second. I’d recommend the Summary option, but lots of websites have the full text.
How to Create a WordPress Menu
Your WordPress theme probably isn’t automatically going to implement a clean menu. In fact, you might not see one at all.
Therefore you’ll need to go to Appearance > Menus.
Either select a menu to edit by choosing it from the dropdown or click on the Create a New Menu link. While your theme may include a few default menus in the sample data, creating a new menu will allow you to make one from scratch.
Regardless, once you create your menu or find the one you like, you can bring it up to alter the structure. Choose from pages, posts, categories, tags and custom post types to add to your menu. Or you can add a custom link as a menu item. Maybe you’d like to move your Blog tab a little closer to the front of the menu, allowing people to see it easier. You can click and drag menu items to reorder or nest them, and use the option in the left hand column to add new pages, posts, categories and custom links.
After your menu is organized be sure to select your Display location and save. Or you can go to the Manage Locations tab. All themes have different menu locations, but the most common are usually a Main Menu and a Footer Menu.
All you have to do is use the dropdown to select a menu you’ve created for each location. For instance, I want my Main menu to be placed in the Primary location.
Note: You can use the same menu in multiple locations.
How to Create a Menu in the Live Customizer
Another option is to set and edit your homepage from the WordPress live Customizer. To do this you’ll want to navigate to Appearance > Customize first.
From here select the Menu option.
Then either choose an exiting menu to edit or click to Create New Menu.
From here you can Use the +Add Items button to choose from the same pages, posts, categories, tags, custom post types and custom link options available from Appearance > Menus.
Just be sure to select your Menu Locations and Publish your menu when done.
Note: Any menus you create and save under Appearance > Menus will also be available from Appearance > Customizer, and vice versa.
Additional Homepage Editing Thoughts
From moving around widgets to customizing your homepage background, the majority of these homepage tools reside in the Appearance tab. In addition, the Customize tab (under Appearance) reveals a visual builder that’s great for uploading a logo, changing fonts and choosing your colors.
Want to Create a Custom Homepage?
If you want a custom (or customized) homepage but your theme doesn’t offer any added options to change colors, fonts, layouts etc you can always install a plugin.
If you simply want to tweak the elements that are already on your homepage (like change a font size, or edit paddings) then install a WordPress CSS Live Editor plugin.
If you want to build a completely custom homepage from scratch, then you should have a look at a WordPress page builder plugin that includes tons of easy drag & drop elements for you to design your own layout (or a new theme like Total that already includes a drag & drop builder)
After all of that, your homepage is ready to go!
Conclusion
Sometimes you feel like your website is broken or you’re doing something wrong, but you’ll often find that a quick adjustment with the front page display does the trick. Hopefully, you’ve found this helpful for setting and editing your WordPress homepage. Let me know in the comments if you have any questions. If you enjoyed this post, why not check out this article on the 5 Best Wordpress or ClassicPress Security Check Tools!
Arya Multipurpose WordPress theme is a user-friendly, well-organized theme that enables flawless, easy work for any website. You can use it for different Agencies, Portfolios, eCommerce Stores, Blogs, Photography Studios, Architect Studios and many, many more personal or professional businesses.
Setting Up Your Vestacp
