The Modern Way To Create And Host A WordPress Site — Smashing Magazine

Quick abstract ↬
Let’s take a more in-depth have a look at how one can create your very personal WordPress website up and operating created and hosted with the Elementor Cloud Website.

What does it take to design a brand new website in 2022? Well, it’s potential to interrupt this course of into a number of steps. You possible begin with selecting a website identify to your website and shopping for it. Next, you’ll evaluate numerous internet hosting companies and select the one which satisfies your wants, and lastly, you’ll choose a content material administration system (CMS) that matches your wants. After putting in CMS in your internet hosting supplier, you can begin designing your website.

Sounds tedious, proper? With so many instruments accessible available on the market proper now, discovering the precise instruments can take hours and even days, and there’s no assure that you should have an honest answer in the long run.

This proved to be the catalyst for Elementor’s newest answer: the Elementor Cloud Website. The Elementor staff aimed to beat this problem. The Elementor Cloud Website is a brand new device that can develop the WordPress website builder’s choices with built-in internet hosting options. This internet hosting answer relies on the Google Cloud Platform, recognized for world-class safety, scalability, and reliability. The platform gives 20 GB storage, 100 GB bandwidth, and 100K month-to-month visits that are sufficient for many forms of web sites. What it means is that with Elementor’s Cloud Website, web designers and builders can construct and host their WordPress web sites with out the necessity to swap between completely different instruments.

Creating A New Website With Elementor Cloud Website

The course of of making a brand new website with Cloud Website is simplified and sooner. If you’re new to Elementor, you’ll be able to go to the Elementor Cloud Website and click on “Join Now” to create a brand new account. Once you’ve created a brand new account, you’ll want to select the choice “Build & Publish a complete Hosted Elementor Website”.

If you’re an Elementor consumer, you’ll be able to log in to the Elementor admin panel the place you will note a big button named “Create Cloud Website” on the prime proper nook of the web page:

(Large preview)

Once you click on this button, you can be invited to supply primary details about your website step-by-step. You will present the website’s identify, area identify, and sort of website.

The first steo in the Elementor Cloud Website setup wizard is to add a site nameElementor Cloud Website setup wizard. Step 1: Add website identify. (Large preview)

All web sites created utilizing Elementor Cloud Website might be hosted on subdomain by default, however you’ll be able to simply hyperlink your individual with no further prices.

The second step in the Elementor Cloud Website setup wizard is to choose the host nameElementor Cloud Website setup wizard. Step 2: Choose the host identify. (Large preview)

You might be requested to specify the kind of website you wish to construct. Elementor will use this data to counsel a related pre-designed website equipment to your venture.

The third step in the Elementor Cloud Website setup wizard is to select a type of websiteElementor Cloud Website setup wizard. Step 3: Select a sort of website. (Large preview)

Lastly, you can be requested to decide on the visible equipment to your website from the checklist of accessible choices. You can at all times select to design a website from scratch. For our instance, I made a decision to make use of the Basic equipment from the checklist instructed by Elementor.

Choosing a website kit to start with or the option to start from the scratchChoose a website theme to your venture. (Large preview)

Once you do this, Elementor will begin constructing your website. The course of of making a brand new occasion of your website will take a couple of minutes. Once it’s achieved, you will note a shiny new occasion of your website prepared to be used. Our occasion is named WakeUp.

A screenshot of the WakeUp website shown in the Create Cloud Website within Elementor’s wizardWakeUp is a website hosted by Elementor. (Large preview)

You could discover the badge “Site Lock is On.” When Site Lock is enabled, search engines like google gained’t show your website, so that you don’t want to fret that somebody could have entry to your unfinished website.

But what precisely comes with a newly created occasion? You could have entry to the WordPress dashboard, Elementor editor, and website settings.

Three contextual options are shown when hovering over the WakeUp web project: Open WP dashboard, Edit with Elementor, Manage this website.Hover over the WakeUp web venture to see contextual choices. (Large preview)

Let’s click on “Edit with Elementor” to begin designing our website immediately.

Modifying Page Layout With Elementor Editor

All front-end designs of your website might be achieved with the Elementor editor. Elementor gives a WYSIWYG (What You See Is What You Get) editor to your web pages. When you introduce adjustments to your web web page, you instantly see the outcomes of your adjustments. For instance, once we wish to change the textual content within the hero part, all we have to do is to click on on the content material block and modify the textual content in it.

A screenshot of where and how to change the text in the hero sectionChanging the textual content within the hero part. (Large preview)

If you wish to add a brand new content material part in your web page, add a brand new part, select essentially the most related widget from the gathering of 100+ widgets, and drag & drop it into this part. Elementor helps virtually all forms of content material — from textual content to visuals.

Adding a new section to the page in ElementorAdding a brand new part to the web page. (Large preview)

But the method of enhancing is just not restricted to textual content or photos. You can introduce fancy animated results comparable to movement results on scrolling. Such an impact may help you create a extra dynamic scrolling expertise and may convey a sense that your website is alive.

For instance, right here, I outlined the “Fade In” impact with a period of 300 ms for the part that comes after the Hero part and describes options that our product gives:

Adding animated effects in ElementorAdding animated results in Elementor. Section Advanced > Motion Effects. (Large preview)

The beauty of the Elementor editor is that you would be able to test how your website appears on cellular or some other medium. Simply click on “Responsive” Mode within the backside left menu (subsequent to the button “Update”) and click on on the “Mobile” choice. What you will note is how your website will look on cellular gadgets:

A preview shown to give you an idea of how a website will look on a mobile deviceChecking how a website appears on cellular. (Large preview)

Managing The Website Using WordPress

Elementor Cloud Website provides access to full WordPress instances. It’s the same version of WordPress that you might download from the official WordPress website and install on your local or remote machine. Out of the box, this instance of WordPress comes with all essential features. You will have admin access to the CMS and be able to manage users who can access your website, import/export content, and install required plugins. But Elementor Cloud Website also offers a few neat benefits. WordPress comes with a pre-installed Elementor Pro plugin, Activity Log, which tells you what activities are taking place on your dashboard, and a collection of hundreds of visual themes that you can use for your website. Elementor Hello theme is already pre-installed as well.

Another vital thing about Elementor Cloud Website is that you have all ownership of your content. If you decide to move your website to another platform (i.e., switch from WordPress to any other CMS), you can export your website at any time.

Setting Backups And Connecting Domain

Once you end designing your website, you’ll want to do two issues: create a backup and join the area identify. There are two sorts of individuals: those that again up and people who have by no means misplaced all their knowledge. With Elementor Cloud Website, organising backups is simple. All it’s a must to do is click on the “Manage This Website” choice and discover the “Backups” part.

Creating backups for your websiteSetting backups in Elementor Cloud Website (Large preview)

As you’ll be able to see, Elementor creates computerized backups to your website each 24 hours, however you can even create your individual backup at some other second utilizing the “Create new backup” part.

Next, you’ll want to join your area identify to this website. It will also be achieved on this web page, within the Manage Domain part. Some web creation platforms cost further for connecting a customized area identify, however Elementor Cloud Website does it at no further value.

You can discover that an SSL certificates can also be enabled for our website. Elementor Cloud Website supplies its customers with a built-in free Secure Socket Layer (SSL) from Cloudflare. It offers you a few advantages — higher search engine rating (Google ranks SSL greater than non-SSL counterparts) and higher consumer expertise (in case your website requires knowledge enter, website guests won’t ever see a “Not Secure connection” message of their browser). You may set up your individual SSL certificates if required.

Adding a custom domain in Elementor Cloud WebsiteAdding a customized area in Elementor Cloud Website (Large preview)

After a customized area is linked, we are able to safely flip “Site Lock” off so search engines like google can uncover our website. It additionally might be achieved on this part.

Measuring The Performance Of Our Newly Created Website

Website efficiency performs an important position in how customers suppose and really feel about our website. Nobody likes interacting with gradual web sites, and with regards to web efficiency, each second counts (actually). With each second you make your customers anticipate the positioning to load, you enhance the possibility that they abandon your website.

Measuring efficiency needs to be an everyday train for website homeowners, so let’s use a well-liked device known as PagePace Insights to see how our newly created website performs. As you’ll be able to see, the website has a rating of 94 out of 100, which is absolutely good.

Using PageSpeed Insights to check how well the website performs: 94/100 performancePagePace Insights analyzed the efficiency of a website created utilizing Elementor Cloud Website. (Large preview)

You could surprise, what may trigger gradual website efficiency? While many issues might be answerable for gradual website loading, excessive latency and utilizing heavy imagery are on the prime of the checklist:

  • High latency.
    Latency is the time it takes for knowledge to move from one level on a community to a different. High latency might be attributable to geographic location. For instance, your website is situated within the US, however your customer accesses it from Europe.
  • Using many heavy imagery property.
    Rendering too many high-resolution photos in uncooked codecs comparable to PNG might be time-consuming.

But in the event you use Elementor Cloud Website, you’re protected as a result of it makes use of content material supply networks (CDNs) distributed worldwide. A CDN permits for the short switch of property wanted for loading, together with photos and movies. Your website content material is saved in over 200 areas globally, so it responds shortly wherever your guests are.

“Okay, this tool demonstrates solid performance when we test it for one visitor, but what happens when hundreds or thousands of visitors access it?”

Rest assured, you can be positive. Elementor Cloud Website harnesses the facility of Kubernetes, an open-source system for the administration and scaling of containerized functions. Kubernetes allows Elementor Cloud Website to scale its internet hosting each quick and reliably no matter a website’s utilization, whether or not it attracts ten or ten thousand guests.

How Much Does An Elementor Cloud Website Cost?

It took us less than an hour to create and publish a website using Elementor Cloud Website. You may assume that this tool will cost a lot of money. But in reality, this solution only costs $99.00/year (excluding VAT). For this sum, you will receive 100GB bandwidth for your website, 100K monthly unique visits, and 20GB of storage for all your content and assets. It’s important to note that Elementor Pro is thrown into the mix (a plan that costs $49 per year). There are no hidden costs. All those features are included at one price.


Web design should be fun and accessible for anyone. After all, when we build a new website, our primary goal is to share our idea, product, or service with the world, not to dive into solving technical problems. Elementor Cloud Website saves us from the tedious and monotonous work of comparing various web services and helps us to focus on what’s really important—sharing our vision with people we care about.

This article has been kindly supported by our dear friends at Elementor whose goal is to empower web creators to design, publish and manage powerful and beautiful WordPress websites using the most comprehensive all-in-one design solution. Thank you!

Smashing Editorial

Leave a Reply

Your email address will not be published.