By Neil on December 9, 2014
Drag & drop WordPress plugins and editors are becoming more and more popular as people are looking to create great looking websites with as little coding as possible. This video tutorial uses a plugin called LAYOUTS that does just this. The LAYOUTS plugin uses a grid system where the web page is divided up into many small cells and you simply select the cells you want and say what content you want to put in them.
In this quick video tutorial I show how to create a new home page design using the LAYOUTS plugin that starts with a completely empty layout. You can choose to use a template layout that can include a header/content/footer or a header/content/sidebar/footer template for example, but it is sometimes easier to start with a clear slate and work from there.
The LAYOUTS plugin is part of a suite of plugins called Toolset, and it is designed to work with the (FREE) Toolset Bootstrap Theme. However, it is possible to use this plugin with any WordPress theme and there is documentation on the Toolset website.
In this 10 minute tutorial the first thing I do is select four cells that I want to place a logo in. I create a Visual Editor content type for these cells and add my media (i.e. my LOGO.jpg file). I then select seven cells next to this logo area and specify that I want to place a navigation menu in here. Already in about 1 minute I have the header region of the home page sorted.
Below the header area I create a full width slider, which is as easy as highlighting all the cells across the page and selecting the slider content type. I upload 3 different images for the slider and give them a title and description. This is followed by a full width text area and then two YouTube video areas (1/2 the page each). Adding the YouTube videos is straight forward and you just need to paste the video URL into the LAYOUTS field.
This web page was finished off by adding three images (each 1/3 of the page) and three widget areas across the footer area of the page. A recent posts, calendar, and search widget were put in the widget areas. This completed the LAYOUTS home page setup.
To show the layout on a page a new page was created and on the right side of the editor window there is an area to select this newly created layout. Once the page is published the layout is applied and the new home page is complete. This all took just over 10 minutes to complete, as shown in the video above.
Summary
The LAYOUTS plugin makes creating 100% custom web pages & posts super easy. It is all based off a grid system but this is by no means static. The design I created here was totally mobile responsive and adapted to different sized screens. The interface to create the layouts was easy to use and fully integrated within the standard WordPress dashboard.
In this quick tutorial I just used standard content areas, but the LAYOUTS plugin works with the VIEWS plugin (also part of the Toolset suite of plugins) so you can do much more with your web pages. Head over the to Toolset website for more details.
Leave a Reply