Graphic that appears to straddle 2 layout grids?

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
Little Owl
 
 
Posts: 42
Joined: Wed Mar 21, 2018 6:01 am

Graphic that appears to straddle 2 layout grids?

Post by Little Owl » Wed Apr 25, 2018 12:05 am

Hi,

Just wondering if it is possible to simulate something like the picture on this website http://www.leiseljones.com.au/about

If you scroll down the page to the image of the woman in a red dress you will see what I mean - it appears to have her body in one 'layout grid' & her head in another in the desk top breakpoint.

As a web & graphic designer I like my websites to have interesting graphical placement rather than always look like everything is contained in it's own grid space. I know from experience using other software that you can get creative at times using graphical means to simulate certain effects, but being very new to this software I'm not sure if there is a creative way to achieve this effect?

Thanks. :D

User avatar
crispy68
 
 
Posts: 358
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Graphic that appears to straddle 2 layout grids?

Post by crispy68 » Wed Apr 25, 2018 12:17 am

Do you have access to photoshop or some other graphical software?

If so, create a square of the desired color for the background (behind her head- in your example it is the tan color) and save it as an image. Then, in your layout grid click on style and choose the following:

background-image + color (color should default to white but you can change this if you want)
Choose the image of the square you created in the drop down
repeat = repeat in horizontal direction
horizontal = left, vertical = top

Now in the layer/layout grid above the lady make the background of the grid the same color as your square.

katman
 
 
Posts: 95
Joined: Sun Dec 21, 2008 7:02 am

Re: Graphic that appears to straddle 2 layout grids?

Post by katman » Wed Apr 25, 2018 12:49 am

It looks to me like the overlap is not intended as it only occurs in the largest BP, and there are some padding differences happening as the browser shrinks. But it is a cool effect.

User avatar
crispy68
 
 
Posts: 358
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Graphic that appears to straddle 2 layout grids?

Post by crispy68 » Wed Apr 25, 2018 1:46 am

Another option is this:

In the floating layer/layout grid that's above the woman set the bottom margin to a negative value (ex: 120px).

In the layout grid that has the image of woman and text, set the background to transparent. You will need to make sure the background of the body is white as well. Then in the page html between the <head> tags, add the following:

<style>
#wb_LayoutGrid2 {z-index:100;} - replace the LayoutGrid2 with the ID of your layout grid
</style>

This will force the grid with the image to be in front of the layer above it. By it being transparent, you will allow the brown layer above to show thru.

katman
 
 
Posts: 95
Joined: Sun Dec 21, 2008 7:02 am

Re: Graphic that appears to straddle 2 layout grids?

Post by katman » Wed Apr 25, 2018 1:51 am

Interesting,

I just may have to try to duplicate it.

Little Owl
 
 
Posts: 42
Joined: Wed Mar 21, 2018 6:01 am

Re: Graphic that appears to straddle 2 layout grids?

Post by Little Owl » Wed Apr 25, 2018 1:52 am

crispy68 wrote:
Wed Apr 25, 2018 12:17 am
Do you have access to photoshop or some other graphical software?

If so, create a square of the desired color for the background (behind her head- in your example it is the tan color) and save it as an image. Then, in your layout grid click on style and choose the following:

background-image + color (color should default to white but you can change this if you want)
Choose the image of the square you created in the drop down
repeat = repeat in horizontal direction
horizontal = left, vertical = top

Now in the layer/layout grid above the lady make the background of the grid the same color as your square.
Thanks. Yes, I'm a graphic designer so no issue on the graphics side.
Tried this as per instructions but no success. But being new to this software it's probably me not understanding some minor detail that maybe you assumed I would know about layer grids?

User avatar
crispy68
 
 
Posts: 358
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Graphic that appears to straddle 2 layout grids?

Post by crispy68 » Wed Apr 25, 2018 2:12 am

This is extremely crude demo but should give you the idea. It would take some tweaking to get it working good. :D
Link: http://www.wizbangwebdesign.com/demo/graphic.zip

The 2nd option I posted will work as well and could be a good solution depending on your design.

Little Owl
 
 
Posts: 42
Joined: Wed Mar 21, 2018 6:01 am

Re: Graphic that appears to straddle 2 layout grids?

Post by Little Owl » Wed Apr 25, 2018 2:22 am

crispy68 wrote:
Wed Apr 25, 2018 1:46 am
Another option is this:

In the floating layer/layout grid that's above the woman set the bottom margin to a negative value (ex: 120px).

In the layout grid that has the image of woman and text, set the background to transparent. You will need to make sure the background of the body is white as well. Then in the page html between the <head> tags, add the following:

<style>
#wb_LayoutGrid2 {z-index:100;} - replace the LayoutGrid2 with the ID of your layout grid
</style>

This will force the grid with the image to be in front of the layer above it. By it being transparent, you will allow the brown layer above to show thru.
Ok, tried this one as well - that's 2 out of 2 fails for me! LOL

I'm super new to this software after having used Serifs WPX5-8 series for years, so really just finding my way & takes minutes rather than seconds to find out how to do the basic stuff at the moment. Different terminology & new ways of doing the same thing - can't wait to get past this "what the ****" stage that comes with all software changeovers. :roll:

Do you have a test site with it working that I can see? EDIT - yes you do! Just saw your latest post - Thanks I'll play around with that to see what you did.

User avatar
crispy68
 
 
Posts: 358
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Graphic that appears to straddle 2 layout grids?

Post by crispy68 » Wed Apr 25, 2018 2:31 am

Here is a crude demo using negative margins in my 2nd example: http://www.wizbangwebdesign.com/demo/grid2.zip

Post Reply

Who is online

Users browsing this forum: No registered users and 7 guests