UltimateWB
Online Consultant
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 Formar, 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".


Content Editor Format Type

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.  


Content Editor, add div wrap around paragraphs


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:


Content Editor, set div width

 

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


Content Editor, set div background color

 

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:


Content Editor, add div padding

 

Add a border with the style you want:


Content Editor, add div border with style

 

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


Content Editor, add div with rounded edges

 

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.

Related Links
Report article by:
Report a concern
Comments:
0.00 Rating0.00 Rating0.00 Rating0.00 Rating0.00 Rating0 Ratings
Please use the form below to post your comment/rating!
Name:
Email (not posted):
Website:
Rating:
1 star out of 52 stars out of 53 stars out of 54 stars out of 55 stars out of 5
Subject:
Comment:
Captcha Question
If it has seeds, it is a fruit. Is an apple a fruit or vegetable?
Switch Question
Answer
Subscribe to new comments
Comments/Ratings (0)
Sort By
No Comments, be the first to comment!
Report comment by:
Report a concern
Comments: