WYSIWYG Web Builder Layout Grid Essential Training
4.3 (20 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
59 students enrolled

WYSIWYG Web Builder Layout Grid Essential Training

Building responsive websites with Layout Grid in WYSIWYG Web Builder
4.3 (20 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
59 students enrolled
Created by Ishmeal Lamptey
Last updated 9/2018
English
English
Current price: $27.99 Original price: $39.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 4.5 hours on-demand video
  • 3 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Understand the concept of Layout Grid in WYSIWYG Web Builder
  • Use Layout Grid to design responsive websites
  • Know how to effectively configure Layout Grid to suite your design needs
  • Know the elements that can be used with Layout Grid and some limitations using Layout Grid
  • Add advanced features or functionalities to your Layout Grid projects
Requirements
  • A Computer/Laptop
  • A working Internet Connection
  • A little bit knowledge about using WYSIWYG web Builder
  • WYSIWYG Web Builder version 12+ or 14+
  • A localhost server that supports php(WAMP, XAMPP, MAMP)
Description

layout grid provides a quick and easy way to create multi column responsive layouts of web pages.

Layout Grid allows you to properly separate the order of elements in the in a web page for visual presentation. With Layout Grid, there is no need to compromise a sensible structure for your responsive design. It is very easy to make grid adapt to the available space of a web page. As a designer this means you are free to change the location of page elements as is best for your layout at different breakpoints. 

With Layout Grid, there is no need to compromise a sensible structure for your responsive design.

In this course we’ll take a look at what layout grid is and how to get started with layout grid in WYSIWYG Web Builder. We’ll use layout Grid to accomplish both basic and advanced tasks in WYSIWYG Web Builder.

We’ll take a look at the important things to take into consideration when using layout Grid, how to effectively configure and use layout grid as well as the tools allowed to be used with layout grid.

We’ll also take a look at some limitations with layout Grid in WYSIWYG Web Builder. 

In all, layout Grid is a great tool to use in building adaptive responsive websites in WYSIWYG Web Builder.  

Who this course is for:
  • Individuals or teams already in the design arena
  • Anyone who wants to save time and accomplish more in web designing using WYSIWYG Web Builder
  • For curios and enthusiasts who want to learn more about WYSIWYG Web Builder
  • Anyone who intends to speed up his/her web development process
  • Anyone who wants to design professional websites with ease, using layout grid
  • Anyone who wants to learn more about using layout grid for web design
Course content
Expand all 57 lectures 04:36:22
+ Getting started
2 lectures 10:52

We will take a look at the various parts of the layout grid tool, how to use them and when to use them in your projects.

Preview 07:03

We will take a look at some additional properties of tools like the image tool, html5 video player, youtube player and others when used with the layout grid tool.

Preview 03:49
+ Arrangement and positioning of objects
2 lectures 04:26

The kind of flexibility you have when working with layers isn’t the same you get when working with layout grid.

The good news is, you can still have some flexibility with the positioning and arrangement of objects in a layout grid.

In the next video, we will take a look at how to do that.

Arranging and positioning of objects in a layout grid intro
00:16

At this section, we will take a look at how to arrange and position layout grids and how to arrange and position objects within it.

Arranging and positioning of layout grid and objects within it
04:10
+ Padding, gutter and margins in layout grid
2 lectures 02:53

Padding, gutter and margin in layout grid has to do with spaces around objects.

While padding is taking care of spaces at the horizontal section in a layout grid, gutter takes care of the spaces at the vertical section of objects in layout grid.

Margin allows you to create spaces around objects in layout grid.

In the next video, we will take a look at how to apply padding, gutters and margin in layout grid.

 

Padding, gutter and margin intro
00:26

This section shows us how to apply padding, gutters and margin in a layout grid.

Working with Padding, gutter and margins in layout grid
02:27
+ Layout Grid limitations
2 lectures 03:22

Layout grid, being a great tool which aids in creating responsive content, has it’s own downside.

Some of these limitations has to do with, it not being able to work with some tools, difficulty in controlling the way objects should be arranged and positioned and many other more.

In the next video, we will take a look at some of the limitations associated with layout grid in WYSIWYG web Builder.

Some limitations with layout grid intro
00:24

At this section, we will take a look at some of the limitations associated with the layout grid tool in WYSIWYG web Builder.

Limitations with the layout grid tool
02:58
+ Working with styles in layout grid
3 lectures 06:26

Working with styles in Layout grid isn’t as complicated as you may think. You can style your layout grid and objects within it with ease.

You have control over styling columns independently or an entire layout grid.

Getting to know how it is done will save you some time in your project.

Let’s take a look at the various ways we can style our layout grid.

Working with styles in layout grid intro
00:21

Our focus at this section will be how to style an entire layout grid in WYSIWYG Web Builder

Styling an entire layout grid
02:06

We will take a look at how to style columns in the layout grid tool in WYSIWYG Web Builder

Styling columns in a layout grid
03:59
+ Bookmarks in layout grid
2 lectures 06:30

Bookmarks which are also known as anchor tags allows you to navigate to a specific location on a page. With a bookmark a visitor of the page can go directly to a particular part of the page without having to scroll to it.

You can place the Bookmarks anywhere on the page.

WYSIWYG Web Builder allows you to set a bookmark property with layout grid.

In the next video, we will take a look at how to set a bookmark with layout grid, create a navigation which will be linked to them as well as control the effects of the bookmarks.

Using bookmarks in layout grid intro
00:32

At this section we will take a look at how to set a bookmark with the layout grid tool, create a navigation which will be linked to them as well as control the effects of the bookmarks.

Working with bookmarks in layout grid
05:58
+ jQuery in layout grid
2 lectures 02:34

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling and animations much simpler and easier.

Jquery works with multitudes of browsers.

In previous versions of WYSIWYG Web Builder, some jquery tools like the tabs and accordions wasn’t possible to be used with layout Grid.

The good news now is, there has been some improvements of the application and now, all the jquery tools are supported with layout grid.

In the next video, we will take a look at how to work with jquery tabs and accordions in layout grid.

Working with jQuery intro
00:38

We will take a look at how to work with jquery tabs and accordions in layout grid at this section.

Using jQuery tab and accordian with layout grid
01:56
+ Working with forms in layout grid
2 lectures 06:10

A form provides a way to collect information from the people who visit your website

A visitor enters data or makes choices among several options available then submits the form.

The results can be sent to you by email or even save up in a database.

Layout grid in WYSIWYG Web Builder doesn’t support the form area. But the good news is, the form fields can be used with layout grid.

In the next video, we will take a look at how to create a form using layout grid.

Forms in layout grid intro
00:30

We will take a look at the various ways we can work with forms in WYSIWYG Web Builder.

Working with forms in layout grid
05:40
+ Inline frames with layout grid
2 lectures 07:04

Inline Frame or an iframe allows you to open another page inside a different page in web design. Inline frames are also referred to as Floating frames.

In WYSIWYG Web Builder, you can use inline frame to achieve powerful results.

In the next video, we will see some of the options available with inline frame and how to use it with layout grid in WYSIWYG web builder.

Working with inline frame intro
00:24

At this section, we will take a look at some of the options available with the inline frame tool and how to use it with a layout grid tool.

Using inline frames with layout grid
06:40
+ Layout grid hacks
2 lectures 02:24

I believe you know that, there are always different ways or processes you can use to go about achieving similar results in WYSIWYG Web Builder.

Well, the layout grid tool has some few tricks you can use to achieve a couple of results.

At this section, we will take a look at how to implement some of these tricks and tips in our projects.

Some hacks with the layout grid tool intro
00:19

At this section, we will take a look at how to implement some tricks and tips using the layout grid tool,

Some few hacks with the layout grid tool
02:05