DIY Website Design Bootcamp: WordPress Elementor Plugin

Understand how WordPress Theme works on website development. How you can make use of  them theme on presenting or displaying website

Install the most important plugin "Elementor" as website designer. And install compatible add-on plugins that will provide extra feature and elements for this "Elementor" plugin.

There are other highly recommended WordPress plugins that you can install onto WordPress. This will simply enhance your website presentation on the header, footer and side bar area.

Quick recap on all the plugins to install before starting this course. Make sure to install and activate them!

Furnish your website side area by adding widgets. With the recommended plugins installed, you can easily put in contents such as social feeds, videos, recent posts and etc.

Furnish your website footer area by adding widgets. With the recommended plugins installed, you can easily put in contents such as social sharing icons, video with button, testimonial and etc.

First and most important section of all. A main header section that will create first impression, make it simple and attractive. And put in buttons for visitor to know more about you.

Teach you how to use elements / features:

1. EA fancy text

2. Heading

3. Inner section

4. Button

5. Animated gradient background and particle

Show you two (2) methods on adjusting or fine tuning web pages in desktop, tablet and mobile modes.

Put out your expertise or skill set onto this section to tell visitors what you do.

Elements / features used:

1. Heading

2. Text editor

3. EA dual color heading

4. Inner section

5. Columns background colour and border hover effect

A very powerful section that prompt call to action. An action to click and redirect visitor to other link (promotions).

1. EA call to action

2. Animated gradient background & particle

After finishing the first 3 sections of the home page. It is a great idea to quickly recap and optimize the page to be responsive in desktop, table and mobile mode [different screen size (pixel)]

Create a presentation section that display your portfolio in background video, such as vlog, animations and etc. And also to preset the section to be "hidden" in mobile mode.

Teach you how to use elements / features:

1. EA fancy text

2. Button with animation

3. Background video

4. Elements / section / column responsive mode

Create about us section that display personal profile with amazing effects. Some of the elements / features used:

1. Inner section

2. Premium person

Create a section that display all your post or article. The presentation comes with amazing illustration, hover style, animations and responsive with desktop, tablet and mobile screen size. Element used:

1. EA post grid

Create contact us section. This is to allow visitors to chat with you via Facebook Messenger. Elements used are:

1. Image (Facebook Messenger Icon - you can download the icon at the "downloadable materials")

2. Button

Finalize and publish the home page. And set the page as home page of your website, visitors will able to view this page when entering the domain name (URL) of the website. Lastly, fine tune the page to perfection.

Start a brand new sub page, and create main header section. Show you how to use "copy & paste" method to duplicate section in other page. Teach you how to present in different style, with extra elements / features:

1. Premium dual heading

2. EA fancy text

3. Animated background  with shape divider

At the main header section, showcase different expertise or skills in "Icon flip box styles". And also to optimize the showcase in "tablet" and "mobile" view mode. Elements used are:

1. Inner section

2. EAE flip box

Start a brand new section with title, subtitle and "arrow" pointer. And this is the section to tell a story on your amazing journey or success. Using amazing "timeline" style to present your story with normal, hover and focused mode. Element used:

1. EAE - timeline

Create a showcase section with different presentation style by using the image flip box. Element used:

1. EAE flip box

Create a showcase section with tabs viewing option. Enable the element to be responsive with tablet and mobile mode (screen size). Element used:

1. EA advanced tabs

Create a showcase section with simple video presentation style by using the elements as follow:

1. Inner section

2. Video

And using a simple border line hover mode to present a simple "hover animation"

Create an amazing background video with image accordion. A wonderful section to present your video portfolios. Elements / features used:

1. Spacer

2. Background video

3. Background shape divider

4. EA image accordion

Create "product offer" call-to-action section by starting with "countdown timer offer", title and subtitle. Elements used are:

1. Menu anchor

2. Heading

3. Text editor

4. Premium countdown

Create "product offer" call-to-action section with video "popup" feature (based on click). Element used:

1. EA filterable gallery

Create "product offer" call-to-action section with "chat with me" feature. Elements used are:

1. Image (Images used in the tutorials can be accessed at the "downloadable materials")

2. EA call to action

3. Button

Understand the navigation flow of the page. Put in anchor navigation (menu anchor) onto the "product offer" call-to-action section, know how to redirect visitors to the section and get sales.

Start a brand new sub page, and create main header section with a nice and soothing background video.  Teach you how to use "layout" settings on section or column to adjust and fine tune content arrangement and alignment in different responsive modes. Features / elements used are:

1. Background video with fallback image, overlay & shape divider

2. Title & text editor

Create header section that features an overall social introduction. In this section, features / elements used are:

1. Inner section

2. Counter

3. Column background portrait with hover animation

4. Social icons

This is a slightly complicated section with lots of columns and inner sections involved, hence will show you how to optimize overall presentation with "layout" settings.

Recreate header section to be highly responsive in different modes (tablet & mobile). Enable your website to be different in each  desktop, tablet and mobile mode with features:

1. Inner section

2. Responsive mode

3. Layout settings

Create a "fit to screen" background video with fancy animated text located in the centre. Show you different methods to present and locate the text position in anywhere you want. Features/elements used:

1. Background video with fallback image

2. Layout settings

3. EA fancy text

4. Spacer

   
   

Create a section that showcase YouTube videos (or other platform), with filterable, categories & load more option. This is a nice section to display amazing videos and allow visitors to watch the video easily. Element used:

1. EA filterable gallery

Create a section that prompt visitors to click "Subscribe". Present this section properly with elements:

1. EA call-to-action

2. EA filterable gallery

If you have social network feeds to show, this is the tutorial! Showing how to display Instagram & Twitter feeds with recommended plugins:

1. Instagram Feeds - Smash Balloon

2. Custom Twitter Feeds - Smash Balloon

Create a simple google map that shows your location (shop/company/point of contact). And also to put in simple contact form that allow visitors to send inquiry to you.

1. Google maps

2. Contact form

In this tutorial, I also talk more about the insights on using signup form or Facebook messenger chat feature to retrieve visitors contacts. There's a reference link (in External Resources) for you to know more on generating lead with signup form.

Create the final section, which is to ask visitors to follow you on social media. So I present you a very nice call-to-action dual button element:

1. EAE - Dual Button

Finalize the navigation flow of the website by connecting the finished social sub page into the main menu and linked to the website home page.

Quick introduction on Zotabox plugin (free version) as a great monetizing tool to increase conversion, which means getting sales and create good impressions.

In the same tutorial, teach you how to create an "Easy Popup", which is a great feature to prompt call to action (redirection to landing or squeeze page)!

Create a promotion header or bar and display onto your website, very suitable for e-commerce website. Especially you have a great deal or coupon to offer.

Create great monetizing features such as notification box, slider and slide box. Each of them serves an unique purpose that will help you create sales and get followers (social media). And show you how they look like with all these features embedded onto selected live web page (URL).

Create other features such as promotion box and easy banner. Simply recap each monetizing feature and it's served purpose. And also to check whether each feature can be displayed under mobile screen size (320 x 480 px)

Improve your website communication by creating flexible contact form inside selected web page. And to have a live preview in mobile screen size (320 x 480 px).

Last but not least, to test out the contract form to check whether submitted information can be captured without email marketing integration.

Learn one of the greatest features provided by Elementor Plugin, which is to export and import page templates among different website (WordPress). Allow you to reuse the template's built-in design onto another website without having to start from scratch.

And you will also able to download the Course Page Templates that I've designed throughout the course:

1. Home Page

2. Professional Sub Page

3. Social Sub Page

Course page template files (json format) will be available at the "downloadable materials" section!

Once you've downloaded the page templates, please follow my instructions (as explained in this tutorial) to import and use them directly onto your website. Just change the contents (or images) and your website is ready to go