Multiple Dividers in an object?

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
Beth
 
 
Posts: 139
Joined: Mon Jan 15, 2018 10:55 pm

Multiple Dividers in an object?

Post by Beth »

I know how to add a divider to an object and I know how to make a vertical divider, too, but I am wondering if it is possible to make dividers for all 4 sides of the object at the same time. My goal is to have them all internal to the object but on the outside would be cool, too.

Any help is appreciated.
User avatar
crispy68
 
 
Posts: 3218
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Multiple Dividers in an object?

Post by crispy68 »

As it is no, you can't that I'm aware of.

However, it's possible by using nested layout grids.

For example:
1. Insert a layout grid.
2. Add your top and bottom divider. Change the gutter width to zero.
3. Insert another layout grid and drag it into the first layout grid.
4. In the inserted layout grid, add your 2 side dividers. Set the background of this grid to transparent.
Beth
 
 
Posts: 139
Joined: Mon Jan 15, 2018 10:55 pm

Re: Multiple Dividers in an object?

Post by Beth »

Thank you , I'll give a try!
Beth
 
 
Posts: 139
Joined: Mon Jan 15, 2018 10:55 pm

Re: Multiple Dividers in an object?

Post by Beth »

Thanks so much Crispy. Your solution works. I wish that it worked with more container types, but it's a great start.

Here is what I found out:

MULTI-SIDED DIVIDERS in Layout Grid - Does NOT work with FlexGrid, Cards, Card Container, Sections as far as I can tell, unless there is a way to group/combine these objects before placing into the Layout Grid.

- Insert a layout grid (Grid #1).
- Change the gutter width to zero.
- *** ONLY ONE COLUMN for this Grid.
- Design your intended BG here with 'Style' of Grid #1.
- Add your top and bottom dividers.
- Insert another layout grid (Grid #2 ) and drag it into the first layout grid. *Works best for me to copy Grid #1 for continuity of Dividers.
- *** May have more than one COLUMN for Grid #2.
- In Grid #2, set BG to Transparent then add your 2 side dividers by rotating existing Top and Bottom Dividers to the sides (if copied from Grid #1). Adjust as desired.
- Place content into Grid #2.

Hint: Make sure that both grids have the same maximum width, padding and margins.

*Aside: As I recall, it is best to have no more than 3 nested Layout Grids at a time so don't add more than 1 grid to the content. But by putting all content into Grid #2, and by having only this one single Grid system on your page you can make an interesting frame around the whole page!

I hope that this is useful to someone! Please let me know of any corrections or hints to use with other containers types.
Post Reply