Further Formatting Webpage With Divs - Without Coding!

Starting from Ultimate Web Builder 3.4 - all versions! - we have made it a lot easier to format your webpages further than the Page Format you choose, using Divs.  No coding necessary.

You can (A) Set a Div Format for a one paragraph section, overriding the Paragraph Format, or, (B) Wrap a Div around a Paragraph Format, to have several paragraphs in the Div.

Here's how:

1) On the Content Editor Box, click or highlight on the content you want to stylize. *For Type (B): Highlight all the paragraphs you want to wrap the Div around.

2)

Type (A): From the format menu, you can choose the format type.  Default setting is "Paragraph".

Choose "DIV" from the menu here, click to highlight.  When it's selected, there will be a checkmark next to it, next time you open this menu and are on this content section that you applied this format to.

Type (B): When you choose "Div", in the menu directly next to it, "Div Wrap" will be automatically highlighted and checkmarked.  

3) On this menu, you can stylize the div - set the alignment and choose the width by clicking on the option(s) you would like. The menu item(s) will be highlighted and checkmarked as well:

Scroll down this menu for even more options, such as setting a background color for the div, or margins or font colors:

Note: You can set the Background Colors on the Configure Site > Styles Manager, Extras section.  

Changing them there updates all instances! Easy updating!

 
Back to the CMS Page Editor Box....you can also easily add padding:

Add a border with the style you want:

You can also choose a border width. And even create rounded edges, on all four edges, or the top two or bottom two:

Notice on the bottom of this menu there are Expand Div options to make your div responsive. You can expand divs that are not 100% width to go to 100% when the window screen reaches a certain width. Read more about it on the article, How to make content sections with custom formatting also RESPONSIVE

And, of course, you are free to edit your coding directly in the Page Editor Box - just click on the <> code button to view/edit your code.