Designing an E-commerce website with WYSIWYG Web Builder
5.0 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
12 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Designing an E-commerce website with WYSIWYG Web Builder to your Wishlist.

Add to Wishlist

Designing an E-commerce website with WYSIWYG Web Builder

Building an Ecommerce Website with WYSIWYG Web Builder
5.0 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
12 students enrolled
Created by Ishmeal Lamptey
Last updated 8/2017
English
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5.5 hours on-demand video
  • 34 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Design an interactive website without coding
  • Sell any product you want on your website at no cost
  • Use paypal to process and accept payments
  • Support any device size with Responsive (mobile-friendly) Design
  • Use common vocabulary from the design industry - Introduce CSS3 animations into your project
  • Introduce events into your projects
  • Learn all about SEO in WYSWYG Web Builder
View Curriculum
Requirements
  • A Computer/Laptop
  • A working Internet Connection
  • A little bit knowledge about using WYSIWYG web Builder
  • A Localhost Server (WAMP for Windows)
  • WYSIWYG Web Builder version 11, 12 or above
Description

WYSIWYG Web Builder is one of the world’s leading web builder tool which makes it easier and fun to design any kind of website. Our Ecommerce video course covers everything you will need to know on how to build your own unique, expressive ecommerce websites with its visual, intuitive toolset. 

In this video course, we’ll walk through some of the major features in WYSIWYG Web Builder and introduce productivity tips for implementing your own websites quickly. 
Learn how to plan and design a site, place and style images and text, configure carousels and contact forms, work with paypal tools, implement SEO in your projects and publish and export your ecommerce website locally or online. 

Along the way, you'll discover how to use features like master pages, breakpoints, events, css animations and many more to build more responsive websites without writing any code.

Who is the target audience?
  • Anyone who wants to build websites the "professional" way
  • For individuals or teams who wants to build an ecommerce website and sell online
  • Anyone who wants to save time and accomplish more in web designing
  • Anyone who likes to learn through practical application and not all theory
Students Who Viewed This Course Also Viewed
Curriculum For This Course
85 Lectures
05:18:47
+
Introduction
2 Lectures 02:37

WYSIWYG Web Builder is an application that allows visual designers to design out fully functional and responsive websites without having to write any single line of code themselves.

I’m Ishmeal Lamptey and I have been using WYSIWYG Web Builder for some years now. During these years, I've witnessed how powerful features like responsive break points, Events, CSS animations, login tools and Content Management System, in the hands of visual designers, can result in a truly unique and expressive websites.

I welcome you to Building an ecommerce website with WYSIWYG Web Builder.

In this course I'd like to give you the tools you need to get started on your own path. We’ll cover everything you will need to know on how to build your own unique, expressive ecommerce websites with its visual, intuitive toolset.

We’ll create a product page, a product detailed page, learn how to switch views of the product page, we’ll add and configure paypal as our payment gateway and also talk all about SEO in WYSIWYG Web Builder

We'll start with a new file and progress all the way through to publish, and along the way you'll learn the major features of the program along with productivity tricks for implementing your design quickly.

We've got a lot to cover so let's dive in and get started. 

Preview 01:52

+
Overview of the Course
4 Lectures 09:56

At this section we will take a look at some of the features in WYSIWYG Web Builder, our finished project in the browser as well as the finished project in WYSIWYG Web Builder. We’ll also take a look at some of the useful tools we’ll be using throughout our project.

Preview 00:16

WYSIWYG web Builder is one of the world’s leading web builder tool which makes it easier to build out a fully functional website without writing any single line of code by just drag and drop and some few configurations. WYSIWYG Web Builder has been around for a while and Since it’s establishment in 2005, it has undergone a whole lot of changes. Starting with the very first version all the way through to popular versions like 8, 9, 10, 11 and now 12. There are so many 

Preview 01:13

At this section, we'll take a look at the finished website project in the browser.

Preview 04:53

At this section, we'll take a look at the finished website project in WYSIWYG Web Builder.

Preview 03:34
+
Getting Started with WYSIWYG Web Builder
5 Lectures 20:36

At this section, we’ll take a look at the interface of the application, how to configure both the application and the workspace for our convenient usage as well as the processes involved in web design.

Preview 00:16

At this section, we'll take a look at all the necessary tools we are going to use throughout this course.

Tools going to be used in the project
02:27

In this video, we'll take a look at the new version 12 interface of WYSIWYG Web Builder, get to know some of the functions of the tools available as well as how best to navigate the tools.

WYSIWYG Web Builder Interface
06:14

In this video, we'll take a look at how to configure the workspace area of WYSIWYG Web Builder for easy and convenient usage of the application.

Configuring the workspace
10:04

There are numerous steps in the website design and development process. From gathering initial information, to the creation of your web site, and finally to the maintenance of it.

The exact process will vary slightly from designer to designer, but the basics are always the same.

The very first stage is planning and this is the most important stage, because you gather a lot of information about the website from the client as well as you plan how the site is going to look by either making some sketches or drawing out wireframes. At this stage, you also gather the resources going to be used for the project.

The next stage is the design process: The design stage typically involves moving of information outlined in the planning stage further into reality. This is where you design the actual website. Upon completion of the design phase, the website should more or less have taken shape.

You then proceed to the preview and testing stage which requires you to preview and test your work in the browser and on mobile if the website is responsive. It is always advisable to use popular cross platform browsers such as mozila firefox, google chrome, opera or even Microsoft edge to do the preview and make sure everything is rightly displaying or functioning.

After previewing and making your necessary tweaks, you then proceed to publish your website to a live server. At this stage, you’re then interested in using ftp application (file transfer protocol) to transfer the files on your local system to the internet through your domain.

Processes involved in web design
01:35

Which of the following is appropriate to use as localhost on windows platform?

Tools
1 question

Which of the following is not part of WYSIWYG Web Builder interface?

WYSIWYG Web Builder interface
1 question

Is it important to configure the workspace in WYSIWYG Web Builder?

Configuring the workspace
1 question

Process involved in web design

Process involved in web design
1 question
+
Creating your website with WYSIWYG Web Builder
7 Lectures 21:53

Now that we’ve gotten a lot of information, let’s proceed to create our website. At this section, we will take a look at master pages and their usefulness, the options available with site properties and page properties, creating our pages, working with google web font and then creating the styles going to be used in the project.

Preview 00:24

The master page is a page that contains the layout (usually the header and footer) which is the same for all pages.

The master page will have a 'Content Place Holder' object. During preview/publish this content place holder will be replaced by the actual content of the page.

At this section, we’ll take a look at tools like layer tool, font awesome and material icons and how to navigate them when using them in your project. We’ll also work with images and see some of the properties associated with images and the finally work with the text tool.

Master Pages
02:56

In this video, we'll take a look at the options available in the site properties section of the application.

Site Properties
03:15

In this video, we'll take a look at the options available in the page properties section of the application.

Page Properties
04:09

We'll start to create the pages we are going to work with in this video.

Creating the project pages
02:36

In this video, we'll create the project styles we'll be using throughout the course

Creating the project styles
04:38

We'll take a look at how to add and use google web fonts in our project

Adding google web fonts
03:55

Master pages usually contain the header and the footer only of a project.

Master Pages
1 question

If you want to make changes to the properties of a page, you have to use the site properties.

Site Properties
1 question

Changes made to the properties of a page right after applying site properties will overwrite the changes of the site properties.

Page Properties
1 question

Why is it appropriate to create project styles?

Project styles
1 question

In WYSIWYG web Builder, which section can you create new pages?

Creating Page
1 question

As part of best practices in web design, using google web fonts is better than system fonts. Why?

Google web fonts
1 question
+
Working on the Master Page
4 Lectures 20:33

The master page is a page that contains the layout (usually the header and footer) which is the same for all pages.

The master page will have a 'Content Place Holder' object. During preview/publish this content place holder will be replaced by the actual content of the page.

At this section, we’ll take a look at tools like layer tool, font awesome and material icons and how to navigate them when using them in your project. We’ll also work with images and see some of the properties associated with images and the finally work with the text tool.

The Master Page
00:44

We'll take a look at the layer tool and some of the properties available with it.

The layer tool
06:01

We'll work with images, the text tool, see some of the options available with the tools as well as how to navigate and use the icons available in google material icons as well as font awesome icons.

Working with Images, icons and text
08:04

We'll work on the footer section of the project in this video.

The Footer section
05:44

Which of the following is not a mode available with the layer tool?

The layer tool
1 question

In some instances in web design, icons are used instead of images. Which of the following is an advantage of icons over images.

Working with Images, icons and text
1 question

Which of the following is mostly contained in the footer section of a website?

Working with Images, icons and text
1 question
+
Working on the Homepage
5 Lectures 32:24

At the homepage section, we’ll concentrate on working on the layout, using carousel and configuring it and then adding some information to the homepage. There’s also a challenge for you at this section.

The Homepage
00:14

We'll take a look at the carousel tool as well as how to configure it and use it in our project.

Working with a carousel
11:38

We'll work on the sneaker section on the homepage in this video.

The sneaker section
11:43

We'll work on the about section on the homepage in this video.

The about section
04:57

In this video, wWe'll take a look at how to set master page to the pages in the project.

Setting master page and object renaming
03:52

Which of the following best explain the carousel?

The carousel tool
1 question

What would you want to prevent by renaming objects in a project?

Object renaming
1 question

What best explain the content placeholder in a master page/frame?

Master pages
1 question
+
Working on the About Page
4 Lectures 18:59

The about page gives some information about your company to the visitor of your website.

On the about page, we’ll work on the layout, add some content such as text and images, introduce YouTube player and see some of the options available with the tool and then finally a challenge for you to work on.

The About Page
00:22

We'll add some content to the about page in this video.

Adding Content
05:10

In this video, we'll add a youtube player and take a look at some of the options available with the tool as well as configure it in our project.

Working with youtube player
05:45

We'll work on the sneaker section on the about page in this video.

The Team Section
07:42

Which best explains the reason of having an "About us" page in a website?

About pages
1 question

The following are reasons of using youtube player except.

Youtube video player
1 question
+
The Product Page Section
3 Lectures 15:31

Now on the product page, we’ll work on the layout, add some products and price tags, and then design different views for the product page.

The Product Page
00:09

In this video, we'll work we'll take a look at how to add products to the default product page.

The default product page
08:45

In this video, we'll work we'll take a look at how to add products to the list product page.

The list product page
06:37

What does the product page helps us to achieve in our project?

Products page
1 question
+
The Product detailed Page Section
3 Lectures 12:53

At this stage, we’ll work on the product details, add some images and then create a related product section. There’s a challenge also for you.

The Product Detailed Page
00:10

We'll work on the product detailed page by adding images, price tag, text and button in this video.

The product detailed page
06:32

We'll add a related product section to the product detailed page in this video.

Related products section
06:11

The product detailed page give additional information of a product by showcasing the following bellow, except.

Product detailed page
1 question
+
The Contact Page Section
4 Lectures 12:27

Contact page is an essential part of every website. This page provides the visitor with means by which he or she can reach out to your business by either calling, sending you an email or even visiting your business location.

At this section, we’ll take a look at working on the contact layout, adding contact details, adding google maps and how to get an API key (application program interface) and use them in your projects.

The Contact Page
00:31

Working on the contact page
08:01

In this video, we'll add google map and see the options available with the tool.

Adding and configuring google map
02:08

We'll take a look at how to get a google map api key which we'll include in the added google map on the contact page.

Getting google map api key
01:47

Which file format should you change the contact page to after bringing in a contact form?

The contact page
1 question

Which of the following will make the map in WYSIWYG Web Builder function properly?

Google map
1 question
11 More Sections
About the Instructor
Ishmeal Lamptey
4.4 Average rating
65 Reviews
3,288 Students
3 Courses
Web Designer, WYSIWYG Web Builder Pro

My name is Ishmeal Lamptey, and during my period in the workforce, I’ve trained individuals and groups on how to use WYSIWYG Web Builder to build great and functional websites.

I’m a front-end developer, designer, network engineer and an educator. I’ve been building friendly user interfaces websites for individuals and organizations for a while now.

I'm fortunate to enjoy the work i do, but my true passion is helping people learn.

I look forward to answering your questions and am available for 1-on-1 chats with all of my students as well as freelance website projects.