Diy Website Design With Elementor
Tags: Elementor
Design Stunning and Professional Webpages with Elementor & Add-on Plugins from Scratch
Last updated 2022-01-10 | 4.2
- WordPress Theme fundamentals- Learn Elementor & add-on plugins
- Produce stunning webpage
What you'll learn
* Requirements
* No Prior Programming Knowledge Required* Laptop and Internet Connection
* WordPress
Description
This is a Website Design Boot-Camp that comprises hands-on and rigorous tutorials to help you build stunning web pages from nothing with Elementor Plugin (Free Version).
___
Elementor is a WordPress plugin that helps you present and customize your website in an easy way with drag and drop (editing method). Apart from that, one of the greatest features provided is you can optimize web page in different view modes (different screen sizes). In other meaning, your website will be compatible and optimized in desktop, tablet and mobile modes.
_____
You will learn how to create mobile friendly and responsive website consist of:
One (1) home page
Two (2) sub pages (professional & social)
One (1) extra home page style (bonus)
These pages can be linked together to furnish an amazing website. And I will give these page templates to you for Free, and you can import the templates directly onto your WordPress Platform.
And this course will expose you to use other Other Free Add-On WordPress Plugins to increase website performance, efficacy, conversions and ability to create indirect sales!
___
The ultimate purpose of a website is to build rapport with visitors and get sales. My course will definitely help you to achieve that with all free and available promotion tools like popups, sticky promotion, banners, contract form (with button trigger) and etc.
So have a quick glance at the course structure below, there are free previews that you can watch to understand further on the hands-on and practical tutorials teachings.
__________
If you are interested, enroll into my course, and I will see you inside.
P.S.
All recommended plugins are Free to use, my aim is to teach students to build stunning & professional website with zero cost!
Who this course is for:
- Beginner on WordPress Development
- Beginner on Website Design
Course content
8 sections • 59 lectures
How WordPress Theme Works Preview 08:26
Understand how WordPress Theme works on website development. How you can make use of them theme on presenting or displaying website
Install "Elementor" and Add-On Plugins Preview 03:43
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.
Plugin "Elementor" Functionality
Other Recommended Plugins Preview 03:21
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.
Recap - List of Plugins to Install Preview 00:27
Quick recap on all the plugins to install before starting this course. Make sure to install and activate them!
Sidebar - Add Social Icons, Video, Recent Posts, etc. Preview 12:24
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.
Footer - Add Image, Button, Map, Contact Us, etc. Preview 10:35
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.
Main Header - First Impression Preview 14:48
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:
EA fancy text
Heading
Inner section
Button
Animated gradient background and particle
Quick Recap on "Elementor" Plugin
[Understand] Responsive Mode in "Elementor" Preview 04:39
Show you two (2) methods on adjusting or fine tuning web pages in desktop, tablet and mobile modes.
What I Do Section Preview 13:12
Put out your expertise or skill set onto this section to tell visitors what you do.
Elements / features used:
Heading
Text editor
EA dual color heading
Inner section
Columns background colour and border hover effect
Call To Action Section - To Click Preview 04:40
A very powerful section that prompt call to action. An action to click and redirect visitor to other link (promotions).
EA call to action
Animated gradient background & particle
Optimize First Half Home Page with Responsive Design Preview 09:18
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)]
"Elementor" Design Responsive Mode
Presentation Section Preview 14:58
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:
EA fancy text
Button with animation
Background video
Elements / section / column responsive mode
About Us Section Preview 07:53
Create about us section that display personal profile with amazing effects. Some of the elements / features used:
Inner section
Premium person
Blogging Section Preview 08:01
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:
EA post grid
Call To Action Section - To Chat Preview 07:15
Create contact us section. This is to allow visitors to chat with you via Facebook Messenger. Elements used are:
Image (Facebook Messenger Icon - you can download the icon at the "downloadable materials")
Button
Finalize Full Home Page Design Preview 09:00
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.
Main Header - "Dual Heading & Shape Divider" Preview 12:01
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:
Premium dual heading
EA fancy text
Animated background with shape divider
Main Header - "Flip Box Style" Preview 12:18
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:
Inner section
EAE flip box
How We Started Section - "Timeline Style" Preview 18:04
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:
EAE - timeline
Showcase "Image Flip Box" Preview 12:36
Create a showcase section with different presentation style by using the image flip box. Element used:
EAE flip box
Showcase "Advanced Tabs" Preview 11:13
Create a showcase section with tabs viewing option. Enable the element to be responsive with tablet and mobile mode (screen size). Element used:
EA advanced tabs
Showcase "Video" Preview 08:53
Create a showcase section with simple video presentation style by using the elements as follow:
Inner section
Video
And using a simple border line hover mode to present a simple "hover animation"
Showcase "Background Video with Image Accordion" Preview 10:13
Create an amazing background video with image accordion. A wonderful section to present your video portfolios. Elements / features used:
Spacer
Background video
Background shape divider
EA image accordion
Product Offer "Countdown" Preview 07:29
Create "product offer" call-to-action section by starting with "countdown timer offer", title and subtitle. Elements used are:
Menu anchor
Heading
Text editor
Premium countdown
Product Offer "Video Popup" Preview 07:03
Create "product offer" call-to-action section with video "popup" feature (based on click). Element used:
EA filterable gallery
Create Video Popup
Product Offer "Call To Action with Image Hover" Preview 13:39
Create "product offer" call-to-action section with "chat with me" feature. Elements used are:
Image (Images used in the tutorials can be accessed at the "downloadable materials")
EA call to action
Button
Finalize & Present Professional Sub Page Preview 08:25
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.
Professional Sub Page
Header: Advanced Section Layout with "Soothing Background Video" Preview 09:55
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:
Background video with fallback image, overlay & shape divider
Title & text editor
Header: "Potrait" Hover Animation, Icons and "Counter" Numbers Preview 09:57
Create header section that features an overall social introduction. In this section, features / elements used are:
Inner section
Counter
Column background portrait with hover animation
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.
Element Position & Alignment Part 1
Header: Recreation With "Advanced" Responsive Modes Preview 07:28
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:
Inner section
Responsive mode
Layout settings
"Background Video" With Layout Setting & Fancy Text Preview 11:45
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:
Background video with fallback image
Layout settings
EA fancy text
Spacer
Element Position & Alignment Part 2
YouTube - "Filterable Video Gallery" Preview 10:03
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:
EA filterable gallery
Social Impression - "Call to Action" Preview 10:46
Create a section that prompt visitors to click "Subscribe". Present this section properly with elements:
EA call-to-action
EA filterable gallery
Instagram & Twitter "Feed" Preview 09:44
If you have social network feeds to show, this is the tutorial! Showing how to display Instagram & Twitter feeds with recommended plugins:
Instagram Feeds - Smash Balloon
Custom Twitter Feeds - Smash Balloon
Display Social Feeds
Extra: Simple Map Location & Form Preview 11:46
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.
Google maps
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.
Follow Me With "Dual Buttons" Preview 07:19
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:
EAE - Dual Button
Finalize & Present Social Sub Page Preview 06:25
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.
Introduction & "Easy Popup" Preview 12:22
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)!
"Promo Header" Preview 06:24
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.
"Notification Box", "Slider" & "Slide Box" Preview 09:59
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).
"Promo Box" & "Easy Banner" and Recap Preview 10:04
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)
Understand each monetizing feature functionality
"Flexible Contact Form" and Finalize Website Efficacy Preview 06:58
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.
Export & Import Page Template Preview 09:33
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:
Home Page
Professional Sub Page
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
Customize EAE Particle Background Design Preview 07:50
Learn how to customize background particle effects and animations with add-on plugin "Essential Addons for Elementor"
Create Main Header with EA Creative Button & Premium Image Separator Preview 12:05
Use two (2) new elements which are:
EA Creative Button
Premium Image Separator
to furnish web page main header. Watch the video as I will explain to you how to use these elements to enhance your website presentation!
Moreover, I will provide you guys some GIF icons so you can display them as image separator. Plus, you will be able to download the responsive page template ( which I use it in this tutorial ) that has these elements and other fancy stuff! Free downloads will be available at the "downloadable materials".
Create A Very Cool Section - Image / Video in Between Columns Preview 10:09
A very nice section to have it onto your website, consists of header, description and divider, and a very nice video image located in between columns. A nice effect and illustration that make your website looks professional! Elements used:
Header
Text Editor
Divider
Video
Create Blog or Work List Section - Image Box & EA Post Grid Elements Preview 07:55
Learn other method and trick to build a blog / article / work / product list section with elements such as:
EA Post Grid
Image Box
Create Q & A Section Preview 09:00
Q & A section is a very important section to have it onto home page or other web pages like sales page & landing page. I will show you how to exhibit this little yet significant section with new element:
EA Advanced Accordion
Create Advanced Contact Form Preview 25:12
Create an advanced and detailed contact form that help you to get as many information as possible from visitors. The Elementor Plugin & Add-On Plugins have perfect integration with the Another Plugin "Contact Form 7", so you can easily insert the contact form and customize it based on alignment, spacing, colour presentation and typography.
Download & Import Home Page Style 3 Template Preview 06:58
After showing you all the relevant tutorials on building this particular brand new home page, I'm giving out this home page to you as Elementor template. Download, import, modify the page template, and published onto your website in just minutes!