WYSIWYG Web Builder Layout Grid Essential Training
- 4.5 hours on-demand video
- 3 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- 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
- 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)
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.
- 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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.