Task 26 : WordPress 5.0 -Complete Website with Gutenberg and Elementor 2019 – WP Spartans 300
By : Farooq Shah
Publish Date : December 7, 2018

How to Create or make Complete WordPress 5.0 Website with New Gutenberg Editor and Elementor Page Builder 2019 without writing a single line of code? Well, let’s do it.

This is Task # 26 of our Three Months absolutely Free WordPress training under WP Spartans Mission 2019. In this task, we welcomed WordPress 5.0 (A latest release we were all waiting for) with built in WP Page Builder / Content Editor i.e. Gutenberg.

First of all, we downloaded WordPress from their official website. Unzipped. Created a new folder within htdocs of XAMPP (Localhost). Renamed and called our site Spartans2019. Then we created a database from PhpMyAdmin dashboard. We installed WordPress Locally and connected it with the database. We then created pages (Home, About, Portfolio, Services and Contact). We created a demo post as well.

We also created a menu from the admin dashboard. Added all newly created WordPress Pages in the menu. Put the menu in primary location. Refreshed the frontend. Boom. It was there.

Then we explored customize tab step by step. WordPress 2019 has offered us a cool feature to set color for the whole site. We can also use filters on images.

We opened Adobe Photoshop and designed a quick demo logo for the site. Exported (Save for Web). We also create a site icon of 512 x 512. Exported and saved for web as well.

We then uploaded these two images. Favicon looks nice.

Then we installed a well known Free Page Builder i.e. Elementor (It has two versions Free and Paid). From the WordPress Repository, we got the free one. We edited all pages one by one. In addition, this task will be a complete Elementor Page Builder training in Urdu/ Hindi. It will make you understand how elementor page builder works. We can create websites in seconds.

We explored:

1) How to use and insert Free Templates.
2) How to save templates under My templates Tab.
3) How to delete and export Elementor Builder’s Templates.
4) How to check responsiveness.
5) How to configure any page.
6) How to show/ hide page title and adjust featured images.
7) How to set default colors, and fonts site-wide.
8) How to navigate through sections. Edit and Delete them.
9) How to right click on any Elementor object and paste and re-use.
10) We also talked about No Follow Links and Link Juice.
11) How to use Elementor Blocks.
12) How to add WordPress Text Box within page builder.

In addition, we also explored how gutenberg and elementor go hand in hand. What are the problems etc. We also requested Elegant Themes (Divi Page Builder Team) to kindly make divi available for WordPress community same as Elementor Developers did.

#WPSpartans300 is a mission. WordPress Developers from all over the world have started taking interest in this initiative. Therefore, I’m putting all my energy to make this journey wonderful and full of success.

Link to Access Top WP Developers Mission 2019:

Or, simply visit https://www.freelancepakistan.com and click on 300 Spartan Page.

Through this three months Free WordPress Training (Absolutely FREE), we will learn how to create responsive WordPress Themes and Plugins. We’ll be in a position to sell our assets via Themeforest (Envato) and other platforms. Get ready to conquer that front.

Let me tell you that without passion and commitment, you won’t be able to be a Rockstar WordPress Developer. It does take a lot of hard work ; however, the end result is awesome.

I will guide you step by step so that you could get results from your WordPress Training Mission. Get ready to excel as a professional developer. It’d be fun and exciting adventure.

300 Spartans will learn to unlock WP Codex. APIs will be the ultimate goal. From PSD to WordPress Conversion to WordPress Based Mobile Apps, Spartans will conquer their fears. 300 Lucky WordPress Developers will enjoy lucrative benefits of successful online projects.

My name is Farooq, and I’m a top rated Upwork Freelancer. I’m offering services to international clients as ‘WordPress and Graphic Design Pro’.