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 Edit 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):
From the "Styles" menu, choose "Div Wrap", 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.


Content Editor, add div wrap around paragraphs


3) Now stylize your div.  Again click on or highlight the content section.  Click on the "Styles" menu on the Content Editor Box, to open and choose styles.


You can set a width:


Content Editor, set div width

 

Set a background color:


Content Editor, set div background color

 

**You can set the Background Colors on the Configure Site > Styles Manager, Extras section.  Changing them there updates all instances!

 
Add padding:


Content Editor, add div padding

 

Add a border with the style you want:


Content Editor, add div border with style

 

Set a border width:


Content Editor, add div border widsth

And even create rounded edges, on all four edges, or the top two or bottom two:


Content Editor, add div with rounded edges

 

The result here:


Content Editor, div rounded edges

 

Want to expand this div when the window screen reaches a certain width?  You can do this easily, as discussed here: How to make content sections with custom formatting also RESPONSIVE

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
1 cm = 10 mm. How many cm is 10 mm? (just enter the number)
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: