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.Once 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.Click on this Tab and you will see the following screen
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.
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.
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 availableYou 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 .
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.