How to customize your page using layout builder

Lot of times when we are creating or editing a content inside editor like a page or a post, we are faced with the challenge of effectively displaying wordpress content, there are places where the wordpress inbuilt editor lags. The main thing is to present the content in such a way that  it is easily editable without using HTML/CSS code and be responsive while displaying in multiple devices.

Because when we want to display the content by creating divs, tables in text editor to effectively show content as we want it and keep the compatibility of the display with multiple devices, we beat the purpose of wordpress of effectively managing the content without any programming skills. Because people that know how to program in html, css can effectively built there website using code. So here the best solution is a drag and drop web site builder or site layout builder in which you can divide the entire page/post into boxes and then place the content inside those boxes using widgets. As Inside a layout builder for wordpress every box will act as a widget area. I have used two -three layout builders/page builders and the best one is the Page Builder – By site Origin. Install this plugin and lets go step by step in making a demo page with this page builder.wordpress page builderOnce you have installed this plugin you will see that the normal editor page Edior/post editor will look like this, where you will also see another tab appear called Page Builder.free-page-builderClick on this Tab and you will see the following screenwordpress-page-builder

Inside this wordpress page builder, any functionality that is available as a widget can be placed in a box space or widget area, which also we can increase or decrease size as per our requirement. To start building our page we will click on add New page and the click on the page builder option of the screen. Once you see the above Screen. We have to create rows and then divide Rows into columns to create the layout. We will be creating Cells which will act as the widget areas where we will be placing widgets according to the layout we have planned. Lets start click the add row option and you will see the following screen.drag-and-drop-website-builder

As you can see in the above screenshot, when i clicked on the add row option it directly gave two cells divided in 50:50 you can take your mouse pointer into the middle of the two boxes and by dragging can make one box bigger and other smaller or you can click on the percentage and put in the value in one which will accordingly adjust the other one. You can also create more cells in one row by putting in the value in columns field. And after you have made all the adjustments you can just add the widget area row created into the the page by clicking on the insert blue button. Now will see the following screen.wodpress-layout-builder-plugin

now in the above screen click on one cell and it will get highlighted and then click on the add widget option to place widget in that box and you will see the screen where you will see all the widget options availablelayout-builder-plugin-for-wordpressYou can add more widgets to this option by adding plugins that have widget option with them. You also have the option of placing more than one widget in a single columns. After that you can add more rows and columns. A fully constructed page would like this .wordpress-layout-builder-plugin

To Place content inside a widget you just need to, take your mouse pointer over the widget and you will see the three option appear like in the above screenshot. EDIT | DIPLICATE | DELETE . Click on edit and the option to add content appear for that particular widget. After you are done placing the content. You can preview / publish or update the page to see how it looks.

(Visited 90 times, 1 visits today)

More from my site

  • How to add tables in wordpress posts and pages without knowing any HTML or CSS WordPress has an inbuilt wordpress editor for effective content presentation but whenever there is a need to add a table, most of the people in wordpress have to either use HTML or CSS to […]
  • Protect Your Displayed Email id from getting Spammed For Easy Communication we Display our email id on Our Websites so that people can just click on them and then their email software opens and they are able to send email, this approach […]
  • How to Resize Image So many Times we come across this issue where we need to Resize Image that we have due some or the other reasons, either we need to resize the picture due to the reason that it is too […]
  • how to create a wordpress photo gallery You are tired of putting single-single image in your wordpress posts and pages and now want to put entire set of images in your post of page. So you want to know how to create an image […]
  • How to check which plugins are slowing down your wordpress website You have created a beautiful wordpress website and in order to provide good amount of functionality in your wordpress website, you have to install lot of wordpress plugins. As you know to […]
  • WordPress Page Content type In this Article we will completely go through the page content type in wordpress and what is its purpose as a content type in wordpress If you haven't installed wordpress or don't […]
wavatar

Posted by deepak.kapoor

An Active Youtuber, Blogger, Traveller, Programmer, Wordpress developer. Likes to spend his free time Motorcycling through the hills.

One thought on “How to customize your page using layout builder”

Leave a Reply

Your email address will not be published. Required fields are marked *