Want to expand the pleasant workflow for constructing web sites?
Creating your own internet site without studying how to code or hiring a developer used to be near impossible. However, thanks to systems like WordPress and plugins like Elementor, what as soon as was assignment impossible is now a reality.
In this tutorial, we’ll show you how to use WordPress and Elementor to create a new website and stroll you through the entire process little by little. We’ll cowl the tech setup you’ll need, show you how to create the pages, and guide you thru the method of customizing your website. Let’s dive in!
Making a WordPress Website
WordPress is a effective content control gadget that may be downloaded and used without spending a dime and it permits you to create any type of internet site; from easy non-public running a blog and small commercial enterprise websites to huge corporate sites and feature-wealthy packages. Elementor, then again, is an clean-to-use however strong page builder that makes it clean for all people to create their internet site, regardless of how complicated it’s miles.
For the functions of this academic, we’ll be developing a easy 4-web page website for a small enterprise. To comply with along side the educational, you’ll want:
- Domain call and website hosting
- Envato Elements
- TwentySeventeen subject matter
We’ll start out with the TwentySeventeen topic as our base after which we’ll use pre-designed templates from Envato Elements plugin to create the pages. Once the pages are set up, we’ll customise them with our personal shades, fonts, pics, and content material.
Once you’re finished with this manual, you may need to check out our other publications and tutorials for more precise pages.
- For a tutorial about creating an eCommerce website, we suggest that you check our WooCommerce educational.
- If you’d want to study more about the way to create a weblog on WordPress, then we’ve got an excellent manual approximately it here.
- And we actually have a manual if you are seeking to study extra about the way to create a landing web page in WordPress with Elementor.
With these publications, you will be able to improve your internet site and make the maximum of it.
The first step to developing your very own, new website with WordPress and Elementor is to make sure we’ve the whole thing in region. In this part of the educational, we’ll cowl getting your personal area call and web hosting, show you how to installation WordPress, Elementor, and Envato Elements in addition to the way to install the TwentySeventeen subject matter.
1. Get a Domain and Webhosting
When you got down to create your very own website, the primary element you want to do is get a site call and an internet website hosting provider. Your area call will allow site visitors to get right of entry to your website.
If you’re developing a non-public website consisting of a blog or a resume, you might need to don’t forget using your personal name for the area call. This will assist you build a non-public brand, and your area name is maximum possibly to show up in search effects while someone decides to Google your call.
Alternatively, in case you’re building a website for your commercial enterprise, then the most obvious choice is to use your business call for the area call. There is quite a few extensions you may pick out from, however hold in mind that.COM is the maximum popular one and what most people kind in the deal with bar by means of default. However, in case you locate that your desired area name isn’t always to be had with a .COM, strive opting for .ME, .CO or .NET which might be additionally very popular.
If you’re virtually stuck on a website name and might’t think of anything, do not forget the usage of tools together with Namemesh or Panabee to come up with a name.
While you may purchase your area call one at a time out of your hosting plan, the easiest manner to begin is to combine the two as this lets in you to manipulate everything in one vicinity.
The hosting plan will permit you to residence all of the documents that make up your web page. Your website hosting server is wherein you’ll set up WordPress and the add-ons cited on this educational.
As a ways as website hosting plans pass, they range from less expensive shared website hosting plans to more highly-priced managed WordPress web hosting and top class dedicated servers. A shared web hosting plan is a awesome preference if that is your first internet site and you’re simply getting commenced. There are severa net hosting organizations obtainable, like Bluehost, SiteGround, and others if you want to pick from.
There isn’t any shortage of advocated WordPress Hosting vendors but for functions of this tutorial, we’ll be using SiteGround. To get began, follow the stairs below:
Once you’ve signed up in your hosting plan, you may obtain a welcome e mail from Siteground to be able to have all the information associated with your account. Find the login hyperlink on your website hosting account area and use the username and password to log into your account.
Before we continue with the installation, we would like to factor out the distinction among wordpress.org and wordpress.com, because they often reason confusion, and are used interchangeably.
WordPress.org is wherein you have to visit installation wordpress, for this manual. It is where you will locate the free model of the WordPress software program. A key point right here, aside from the truth that it’s unfastened, is that you’ll have to host the web page thru a 3rd-birthday celebration website hosting provider.
WordPress.com gives greater offerings and alternatives, and is, consequently, a paid subscription. Here you will have the option to get a website, with hosting in a manner of mins, with no additional, 1/3-celebration services.
It’s open supply and is free to apply. The best drawback to this, is that you will require a 3rd birthday party hosting plan, the cost of which varies, however can be around $forty yearly.
Has five pricing plans, which includes free where the most costly plan is around $forty five consistent with month.
The predominant gain of wordpress.org, is the reality that you very own the internet site and which you have full control of it, even though it’s loose.
While wordpress.com has a free plan, it’s far very restricting in terms of possession and control. For example:
- Should you violate their phrases of service, they can genuinely delete your website.
- The loose version comes with a wordpress.com domain call.
- The website will display a “powered via WordPress” hyperlink.
To do away with these restricting factors, you may must upgrade to a more costly plan (now not always the following least expensive).
The person’s complete manipulate of the wordpress.org website can also be measured within the reality that it permits to:
- Add any plugin from the WordPress plugin repository.
- Add any compatible subject matter.
WordPress.com, alternatively, does not permit to upload custom plugins, because the free version comes with pre-set up Jet Elements. In addition, whilst there is a selection of free subject matters in addition to top class ones, it pales in comparison to the myriad of issues that wordpress.org has to provide immediately, or through 1/3-party addons.
Another first rate advantage for this one is that you can place ads in your internet site, and earn cash directly, without sharing the profits.
WordPress.com does no longer allow to location commercials, and utilizes a gadget known as WordAds, the revenue of which has to be shared with wordpress.com via a fee..
Additionally, wordpress.org allows you to utilize an crucial analytical tool like Google Analytics.
The loose plan does now not permit the use of Google Analytics, and in reality, with the intention to use it, you will ought to sign up for the top class plan.
Beginners ought to be aware, that with wordpress.org, users are liable for updating the software program and creating backups
WordPress.com takes care of these troubles, and customers will must worry approximately updates and backups.
After you’ve got logged in to your hosting account, click at the My Accounts tab after which login for your cPanel. In cPanel, click at the WordPress icon within the vehicle-installers vicinity and comply with the stairs to install WordPress.
You’ll want to go into a username and password that you may use to log into your web site in conjunction with a few other records. Then, click on the Finish installation button and watch for WordPress to be established.
After WordPress has been installed, pass beforehand and visit your WordPress web page. Enter the name and password you’ve installation and click on Log In to get entry to your WordPress dashboard.
In your WordPress dashboard, navigate to Plugins > Add New. Search for Elementor and click Install. When Elementor has been installed, click Activate.
You’ll also want Elementor Pro to take full gain of Elementor’s skills. Visit Elementor.com and purchase the Pro version of the plugin then install and set off it within the equal manner as above. Once Elementor Pro has been hooked up, you’ll need to go into your license by going for your WordPress dashboard and navigating to Elementor > License.
4. Install Envato Elements
Envato Elements is a free WordPress plugin made by Envato, the figure organisation at the back of ThemeForest. The plugin is still new but it already has an impressive collection of templates made mainly for Elementor.
Each template can be imported into your character Elementor template library and you can find it under My Templates. You also can without delay create a live web web page to be able to be stored as a draft so that you can begin enhancing it. We’ll use some of templates from Envato Elements to hurry up the website design and advent manner and make it as user-pleasant as feasible for brand spanking new WordPress customers.
To deploy Envato Elements, go lower back to Plugins > Add New, search for Envato Elements, and click Install. Once set up, set off the plugin.
5. Install TwentySeventeen
The remaining step is to install the TwentySeventeen topic. In most cases, this WordPress subject matter will come preinstalled together with your WordPress set up however inside the occasion it’s now not, follow those steps to install it — it’s a free subject.
In your WordPress dashboard, go to Appearance > Themes. On that display, click Add New button. Search for TwentySeventeen, and then click on Install. When the new subject matter has completed putting in, click on Activate.
Now that we’ve blanketed technical setup and you have everything in location, it’s time to start operating to your website online. In this educational, we’ll be constructing a 4-page internet site which includes a homepage, a menu page, an approximately web page, and a touch us page. We’ll be the usage of the Juice Bar template for the relaxation of the tutorial. Let’s begin.
In your WordPress dashboard, visit Elements. Click on the Food and Drink link at the top, after which scroll down to locate the Juice Bar template. Click on the 6th template named Home 6 after which click the Import Pro template button.
When the template has been imported, input a page call and click on Create New Page with a purpose to be saved for your drafts so you can cross again and edit the template as soon as all the pages have been created.
As you create the web page, you have got the choice to click on at the page hyperlink within the message that looks after a hit page creation. You can also edit the imported template.
Now that all the pages were created, it’s time to personalize your website online and make it your very own. We’ll start through getting familiar with how Elementor works, after which we’ll dive into tweaking the visible patterns such as shades, fonts, and layout.
To create the Menu page, select Menu 5, and click Import Pro Template. You can then comply with the identical steps as above to create a draft of your menu page with this Elementor template.
Name the web page Menu and press the Create web page button. The plugin will do its magic and the template can be expecting you in the Drafts section.
Create your About page inside the equal fashion as above, best this time pick out the About 1 template.
four. Create Contact Us Page
Lastly, create the Contact Us page through following the same steps as before. Select Contact Us 2 template and import it, then create the page with the aid of getting into the name for it and clicking the Create New Page button.
Getting Familiar With Elementor
The high-quality manner to get familiar with Elementor is to peer it in motion. Start by going to Pages > All pages. Find the homepage you’ve just created and hover over the page name. When the menu links appear beneath, click on Edit with Elementor.
Once the page hundreds, you’ll see sections at the screen. On the left, you’ll notice the editing screen for Elementor whilst the right facet shows you how your page appears and allows you to edit the shape and the contents.
Elementor makes use of sections, columns, and widgets to create the format of any page. Sections are the biggest building blocks and also you’ll add columns which are referred to as inner sections inner them. Inside inner sections or columns, you will be able to upload widgets which are content blocks that upload textual content, pix, buttons, and other elements to your web page.
When you hover over a section, you’ll observe a blue border seem with a take care of that helps you to edit the section, upload a new phase, or totally delete a section of the web page. You can also right-click at the manage and get right of entry to segment controls from there, as you may see from the screenshot under.
Clicking the + icon allows you to feature a new phase above the existing section. You’ll then should click on the red + or the folder icon to create the shape in your segment or pick a premade template.
Working With Inner Sections or Columns
In a comparable fashion, you can click on the grey border and the corresponding handle to edit internal sections. You can alter the width of the columns and change the spacing among columns.
Right-clicking at the deal with, permits you to feature greater columns, duplicate existing ones, delete them, and more.
Lastly, you may edit present widgets by clicking the Pencil icon in widget deal with or by means of proper-clicking it. You can trade the contents of it in addition to access fashion controls, reproduction widgets, delete them, and extra.
You also can add new widgets with a easy drag-and-drop from the left-hand side of the display and dropping them onto your page.
One of the primary customizations you’ll possibly need to do is to tweak the colors that the template is the use of. This will can help you integrate your commercial enterprise or brand colorings and customise the template with your personal fashion.
You can modify the colors on a international degree and at the man or woman widget level. Editing hues on a worldwide stage manner that any new page you create with Elementor will inherit the ones styles so all you have to do is create the structure and enter the content. To modify global coloration settings, click on the left hamburger menu at the web page enhancing display screen. Then, click on the Default Colors link under the Style menu.
As you could see, you could tweak the default colour scheme by way of coming into your personal hex color codes or you can follow a pre-made color scheme in case you don’t have a coloration scheme of your personal.
Global style settings may be overridden by customizing each widget one at a time. To customize the colors of individual widgets, choose the widget you want to style and then click the Style tab at the widget modifying display screen.
Similarly to colours, you could edit the typography of your web site on a worldwide level and on the man or woman widget stage.
Globally, you could set font families and font weights for number one and secondary heading, frame, and accent text.
To fashion the typography of character widgets, click on at the widget you need to edit after which click Style. From the drop-down menu subsequent to Family, you could pick amongst hundreds of Google Fonts or you may pick out Default and default fonts you’ve set below worldwide settings can be applied.
Once you’ve custom designed the colours and fonts in your site, it’s time to update the stock photographs together with your personal. To do that, click on a phase which you need to work with. In this example, I need to exchange the image inside the Featured Menus section. I clicked on the Kiwi Bliss column and then go to the Style tab.
First, you’ll need to delete the existing picture by means of clicking Delete after which click on the + signal to upload your very own image. Once the Media Library hundreds, click on Upload documents after which click on the Select files button.
You’ll then pick out the picture you need and click on the Insert media button. If you’re running with background snap shots like in the example above, you can additionally alternate their role and manage their length. You also have the option to exchange the historical past overlay or eliminate it completely as well as set the colours for photograph textual content.
If you’re operating with regular photographs in place of historical past pictures, you’ll have barely fewer options. For instance, to trade and personalize the images inside the Meal Pricing section of the homepage, you’ll observe the identical steps of deleting the present picture and then uploading your personal. You can then trade the image opacity and upload diverse CSS filters which includes Blur, Brightness, and extra.
You can practice exclusive patterns for the photograph hover nation and those styles can be seen once a traveller hovers over the photo with their mouse.
To customise the rest of the photographs in your site, truely repeat the stairs above and then click Publish to save them.
Once you have got all of the styles configured on your liking, it’s time to begin tweaking the layout. For instance, the homepage we’re running with features 3 columns however what if your commercial enterprise has four services? In that case, you’ll want to feature any other column.
To do that, right-click at the inner segment handle and choose Add column. A new column will be created and you can then proceed to add the widgets that you want. Alternatively, you may duplicate an present column to keep time. Once you’ve duplicated the column, update the content along with your personal.
You can also upload some other segment in your page, as we’ve noted earlier. Here’s a grade by grade process to add an example About section:
When you’re accomplished making the desired adjustments, click the inexperienced Publish button and your changes might be live on the site.
As you may see, the template we’re operating with comes with social media links inside the footer. You can without difficulty edit them via clicking at the icons and changing them with icons that link to your chosen social media profiles.
You can add greater links by clicking the Add Item button. Customize the icons by changing the shape and then click on the Style tab to control the icon shade, size, padding, and greater. As you could see from the screenshot under, I’ve brought a Pinterest icon and changed the icons to a rectangular shape with blue coloration.
It’s well worth citing that you may upload social icons everywhere on the page via dragging over the Social Links widget. You can then choose which icons you need to display and configure the manner they are displayed with the aid of changing the form, length, hues, and more.
In this case, I’ve added the icons to the About section created inside the preceding step.
Once you’re done editing your homepage, click on Publish and then click on the Exit to Dashboard button.
So a ways the majority of your customizations took place on the homepage. Let’s test how you could tweak different elements inclusive of the touch shape on the touch us page. Start through going returned to Pages > All pages and choosing your Contact us web page. Click Edit with Elementor.
Click the form widget after which start editing the records. You can click on person form elements to add fields for email, phone quantity, date, textual content, internet site, and more. You can also upload greater fields with the aid of clicking Add object button.
In this example, I’ve brought a subject for the seating alternatives so capacity clients can pick an indoor or an outdoor desk.
The form also allows you to choose an e mail to be able to obtain form submissions as well as what have to happen once the shape is filled out. You can select to get hold of an electronic mail notification, redirect the site visitors to a unique thank you web page, add them in your email listing, and extra. When you’re done, click the inexperienced Publish button and your changes may be stay on the web page.
The subsequent challenge for your list is to customize the reproduction at the templates. To do this, you may be modifying the widgets without delay and replacing the text with your personal. You can begin with any web page by going to Pages > All Pages after which hover over the page you want to edit. Click on Edit with Elementor. In the instance underneath, I am modifying the About page reproduction.
Once the editing display masses, click on the textual content you need to edit. You’ll observe a text editor appear on the left-hand aspect that looks as if a ordinary WordPress submit editor. You can then change the text, upload pix, paperwork, links, format the textual content, and extra.
To edit different textual content regions for your site, all you need to do is repeat the steps above. Click the textual content, delete the prevailing copy, and enter your personal. As continually, whilst you’re carried out, click on the green Publish button and your adjustments might be stay at the web page.
It’s really worth citing that as you’re editing text, you can nonetheless make modifications to the typography and adjust the color of the text as we’ve defined in advance inside the article.
Add the Header and Footer Templates Using Blocks
Using Elementor and the blocks characteristic, you can add custom or premade header and footer templates and use them on every web page of your site or you could create unique headers for every web page.
To create a header, click on at the + icon on the topmost phase on any page after which click the Folder icon. Once the template library masses, click on on Blocks, and from the drop-down menu choose the Header class.
Choose a header block you like and then click on the Insert button. Then, click the Section Settings and below Layout settings set the HTML tag to header. You also can set the width to complete-width, alter the spacing between widgets, upload greater widgets to it, and more.
As you can see within the screenshot underneath, I’ve removed the quest icon and changed it with social icons. When you’re accomplished tweaking the header, right-click on on its manage and choose Save as a template. You can then reuse the header throughout all pages for your website online.
In a similar fashion, you could create footer sections in your pages. Start by means of clicking the folder icon under the last section on the web page and pick out Blocks, then Footer from the drop-down menu. Choose a footer block you like and click Insert.
You can then style the footer detail inside the equal style as every other phase and widget to your page. When you’re completed designing your footer, click on its take care of and press Save as a template. Name it and click Save, then feel loose to re-use it on any web page on your web page.
When you’re done adding and styling header and footer elements, definitely click on the Publish button on the left-hand facet of the display screen and your page will be absolutely custom designed and live on your site.
Once you’ve saved the header and the footer, you could pass lower back and follow them to different pages. To do that, visit Pages > All pages and choose a page to Edit with Elementor. Then, click on at the + icon above the topmost segment, click on the folder icon and visit My Templates. Find the stored header segment and click on the Insert button.
To upload the footer, scroll to the bottom of the web page and click the folder icon at the very bottom. Click My Templates and then select the stored footer block. Click Update to keep your adjustments.
Customizing Your WordPress Website
Once you are accomplished making all the changes to your pages, there are some remaining customizations which you want to make in WordPress itself. You need to upload your logo, create a menu so traffic can navigate your website, and ultimately set the homepage for your site.
Let’s start via importing a emblem. To try this, to your WordPress dashboard visit Appearance > Customize. Once the customizer hundreds, click on Site Identity after which click on Select Logo.
When the media library hundreds, click on Upload files, pick the emblem file from your computer and click Select. Then, click on Publish to save the modifications.
Once you’ve uploaded the brand, visit Appearance > Menus and input a name for your menu. Then, click Create Menu. From there, take a look at the pages you’ve created and custom designed above to the right side of the screen.
You can then drag the pages to customise the order they show in and pick out the placement for this menu. When you’re executed customizing the menu, click Save Menu.
The final WordPress customization step is to set the web page with the intention to serve as the homepage in your web site. To do this, visit Settings > Reading. Next to the line that says “Your homepage presentations” choose A static page and pick the homepage you’ve created. Click Save changes after which go to your web page to peer the way it looks.
Once you upload a page or a put up, you’ll have get entry to to search engine optimization settings, like meta titles, descriptions, slug formats, and greater. We encourage you to make certain that these are competently crammed.
The meta name (also called the title tag) summarises the content material this is discovered at the unique web page. This title appears inside the browsers, outcomes on serps, and different web sites like Twitter or Facebook. You have to include relevant keywords in the name.
The meta description allows you to jot down a short summary of the page and its content. This also seems at the search outcomes web page.
Slugs are, in essence, the ultimate a part of the URL. They must be quick and to the point and seize the essence of the page or post.
These are a number of the search engine marketing you can exchange with out downloading additional plugins, and you must ensure that you optimize them for the gain of your internet site.
How to Create Dynamic Elementor Templates
Before we wrap up this tutorial, permit’s cross over the steps you need to create a post template in your blog in addition to a custom format to your weblog page. This will assist you to create a single submit and weblog web page format that matches the relaxation of your web site.
While your subject does supply those templates out of the field, they received’t appear to be the relaxation of your site whilst you use a premade template or create one from scratch using Elementor. This can purpose confusion with your site visitors and blog readers so growing your very own template for those two pages is exceptionally endorsed.
Create a Single Blog Post Template
To create a unmarried blog post template, go to Elementor > My Templates. Click on Single after which Add New Single button. From the dropdown menu, select Single, and then underneath Select Post Type pick Post, and enter a call so as to make it simpler to find the template in a while. Click Create template .
Once the library loads, browse via the templates to locate the only that you like and that fits the relaxation of your website. Then, click Insert template. You can also create your own from scratch via adding sections and widgets to the template. Make certain to set the page layout to Elementor Canvas after which insert your saved header and footer block.
Once you’re finished designing the template click Publish. You can then pick whether this template is used for all posts or most effective for certain categories, and greater. Set the conditions in your liking and then hit the Publish button.
Create a Blog Archive Template
A weblog archive template is nothing extra than a web page that presentations all your blog posts in reverse chronological order. Creating a template in your weblog web page with Elementor lets in you to apply the same patterns because the relaxation of your website online in addition to to make the blog page have the same look and sense because the relaxation of the pages in your website.
To create a weblog archive template, go to your WordPress dashboard and navigate to Elementor > My Templates. Click on Archive after which the Add New Archive button. This time, you’ll pick out Archive from the drop-down menu after which input a name for it. Then, click on the inexperienced Create template button.
This time, ensure the Archive is chosen in the drop-down menu whilst the library hundreds and pick out the archive template which you want. Click the Insert button or create one from scratch. Set the page format to Elementor Canvas and then upload your stored header and footer.
The closing step is to click Publish whilst you’re achieved designing the archive template. Similarly to the Single Post template, you’ll be able to select whether or not this have to observe to all the records or certain classes, tags, or other taxonomies. Click Publish and your custom weblog archive is carried out.
The assignment of creating a website on WordPress can be tough, daunting and perhaps even intimidating for people who are new to internet site constructing. With Elementor, however, this project turns into incredibly easy and simple.
Elementor offers the whole thing you want for website constructing. From a extremely good visible builder — in which you may visually edit your website with a easy drag and drop (including your header and footer), to severa widgets — which decorate your website’s capability and permit it to stand out from the opposition, and lots, lots more.
Start building your internet site with Elementor — it’s unfastened.