With out the proper instruments, creating professional-looking static pages for a WordPress website is tough, even for an skilled net developer. It entails duties corresponding to designing responsive layouts, discovering acceptable inventive belongings, and buying the proper licenses to make use of them. When you’ve ever tried doing all these duties by yourself, I am certain you perceive how time-consuming and costly they will get.
With the Envato Parts WordPress Plugin, you can carry out all of the above duties with just some clicks. This distinctive plugin provides you fast entry to lots of of free template kits and over 700,000 premium royalty-free images proper inside your WordPress admin panel. Through the use of it alongside a web page builder plugin corresponding to BeaverBuilder or Elementor, you’ll be able to create beautiful pages to your website in minutes.
On this tutorial, I will present you the best way to use the Envato Parts WordPress plugin and the Elementor web page builder plugin to create a compelling, responsive house web page to your website.
To benefit from this tutorial, you may want:
- WordPress 5.1 or larger
- an Envato Parts subscription
- Envato Parts plugin v1.zero.6 or larger
- Elementor plugin v2.5 or larger
When you need assistance putting in the plugins, seek advice from the next tutorial:
1. Initialize a New Web page
Log in to your WordPress admin dashboard and create a brand new web page by going to the Pages part and urgent the Add New button.
When you see WordPress’s default web page editor open, click on on the Edit with Elementor button to change to the Elementor web page builder consumer interface.
Subsequent, click on on the gear icon close to the underside left nook of the display screen to open the Web page Settings tab. Right here, change the format of the web page to Elementor Canvas.
At this level, you’ve a clean white web page you can begin including blocks to.
2. Add the First Block
The Envato Parts plugin at present provides over 600 free block templates, all of them neatly organized into intuitively named block kits. Every block template is designed to not solely mix seamlessly with a number of different block templates, but in addition to look good on all display screen sizes.
So as to add a block to your clean web page, all you should do is click on on the inexperienced Envato button.
On this tutorial, we’ll be creating a house web page for a fictional web-hosting enterprise named “Purple Tech”.
The primary block package we’ll be working with is the Hero package, which at present has 54 blocks. Open it, scroll down to seek out the next template, and press the Add Block to Web page button:
It is a good suggestion lately to observe a mobile-first strategy. So I counsel you now change to the cellular view by urgent Ctrl + Shift + M in your browser.
The template’s first content material field is a heading displaying the title of the enterprise. Click on on it and sort within the title in its Title area. Optionally, you may make it clickable by filling within the Hyperlink area.
Equally, change the Hero Heading content material field so it shows some catchy slogan.
The template additionally accommodates two textual content packing containers, which seem subsequent to one another on large screens. We will use them to briefly discuss what the corporate has to supply. While you click on on them, you may see textual content editor opens up.
Within the first textual content field, use the intuitive rich-text editor to create a bulleted checklist that appears like this:
We’ll use the second textual content field to speak about beginning costs and particular provides. By default, the textual content alignment right here is about to Justified. I counsel you modify it to Left by switching to the Type tab and modifying the Alignment area. On this tab, you can even change the textual content’s font household, its dimension, and colour.
When you press the Preview Modifications button now, your web page ought to appear like this on a big display screen:
three. Change the Background Picture
You do not have to restrict your self to altering solely the textual content contents of the Envato Parts blocks you utilize. You’ll be able to change particulars such background photographs and colours too.
To vary the hero template’s background picture, open the Navigator and choose the primary Part it shows.
Subsequent, within the Edit Part panel, change to the Type tab and click on on the present background picture.
You will now be taken routinely to the Envato Parts tab of the Insert Media dialog, which provides you quick access to over 700,000 premium royalty-free images. Be aware that not like the template and block kits, these images are usually not free, so that you want an energetic Envato Parts subscription to have the ability to use them.
After deciding on the picture you like, you’ll have to vary the background overlay to make it extra seen. To take action, change to the Background Overlay tab and experiment with the Colour and Opacity fields.
four. Add a Options Block
Because the second block of our web page, we’ll be including a block that may, in additional element, enumerate the companies the web site provides.
So click on on the Envato button once more, choose the Options and Advantages block package, discover the next template, and press the Add Block to Web page button:
This template too begins with a heading. Depart its textual content unchanged, however change its colour to a shade of purple by going to the Type tab and modifying the Textual content Colour area.
Within the textual content space that is beneath the heading, change the placeholder textual content with one thing significant. For inspiration, you’ll be able to attempt visiting just a few standard hosting companies.
Subsequent, this block has a brand new sort of content material field referred to as Icon Field. As its title suggests, it shows an icon, together with a title and an outline.
To illustrate our fictional web site provides managed WordPress internet hosting and we wish to discuss this. So click on on the icon field and alter the Icon area to wordpress. By default, the icon is proven framed inside a circle. You’ll be able to change this by modifying the View and Form fields.
When you’re glad with the appears of the icon, add acceptable textual content to the Title and Description fields.
Lastly, we have to change the background colour of the icon field. It is blue by default, and we would like it to be purple. So open the Navigator, broaden the second Part, and choose Internal Part > Column. Then change to the Type tab of the Edit Column panel and replace the Colour area.
This template has three extra icon packing containers. After you replace all of them, your second block ought to appear like this on a big display screen:
5. Add a Pricing Block
The Envato Parts WordPress plugin has a Pricing Desk block package at present containing 15 free blocks. Utilizing any of them, you’ll be able to shortly show the packages a enterprise provides and the companies they embrace.
To illustrate our instance website provides three completely different internet hosting packages. To show them, we’ll be utilizing the next block:
It is price mentioning that the Envato Parts plugin additionally provides a Pricing Menu block package. That is extra fitted to pages that have to show the costs of particular person objects or companies. As such, it is ultimate for web sites of eating places and grocery shops.
Our pricing block is similar to the options block we added within the earlier step. It has three icon packing containers, which you are already conversant in. So we are able to begin modifying their contents straight away.
You will have observed that the font this block makes use of is completely different. To repair this, change to the Type tab and open the Typography dialog. Right here, set the Household area to Quicksand, the font household the options block used.
Beneath every icon field is a heading field. After altering its textual content, change to the Superior tab and open the Background part. Right here, you can change the background colour so it matches our colour scheme.
Utilizing the Navigator is a good way to know the interior construction of the blocks you add to your web page. With it, you may see that our present block accommodates a brand new sort of field referred to as an Icon Checklist field.
This field is supposed to show an inventory of things, and permits you to edit every merchandise inside it individually. In comparison with a textual content field, which may solely show lists with primary kinds, an icon checklist field provides you rather more management over the appear and feel of your checklist objects. As an example, it permits you to simply assign a unique icon to every merchandise of an inventory.
For now, click on on the checklist objects and alter their textual content contents till you’ve a pricing desk that appears like this:
6. Add a Footer
Because the final block of our web page, we’ll be including the next footer, which is out there contained in the Footer block package.
The one new aspect on this block is the Social Icons field, which is sort of an identical to an icon checklist field, besides that it limits the icons you should use to solely the model icons of standard social platforms, corresponding to Fb and Twitter.
After changing the placeholder textual content within the About Us, and Pages sections, your footer ought to appear like this:
The web page is prepared. Now you can go forward and press the Publish button to make it accessible in your WordPress website.
On this step-by-step tutorial, you discovered the best way to use the free block kits and premium inventory images supplied by the Envato Parts WordPress plugin to create a cultured, responsive house web page for a web-hosting enterprise. You now know sufficient to begin utilizing the Envato Parts and Elementor plugins productively.
Envato Parts, is a large repository of inventive digital belongings. By subscribing to it, you achieve entry—with limitless downloads and industrial rights—to over 1,000,000 premium themes, templates, plugins, inventory photographs, movies, and different useful objects that facilitate web site growth.
Go to Envato Parts to be taught extra about all of the thrilling digital belongings it provides for a low price month-to-month subscription!