Layer site, but still utilize more space

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
User avatar
etcbbu
 
 
Posts: 402
Joined: Mon Apr 23, 2007 3:00 pm

Layer site, but still utilize more space

Post by etcbbu » Tue Sep 18, 2018 2:31 am

Pablo, one time I asked you how you got your logo so far left here:

www.wysiwygwebbuilder.com

On the top-left? You said you used the "Single Column Layout Grid" design option.

I've really liking doing sites, lately, built totally out of Floating Layers, because I get that flexibility to use Images or Carousels that find the edges of the screen; and it's really handy for Responsive design, such that all the mobile pages call the same Layer objects, and I just re-size the width to 320-Pixels, and make the child objects sit in it.

But I've got a client that likes this website:

https://www.missiongolfcars.com

But I have built the website, here:

https://www.thecartshed.com

And he's saying how he likes that Mission Golf Cars' website in that there is less of the "dead-space" to the right and to the left than what is on the www.thecartshed.com website like we have it. But I am building this site, again, with Floating Layers. And so, since I always publish projects with the "Center in Browser Horizontally" option chosen on every page's "Page Properties", I guess that confines my objects to the 970-Pixel Width..? do I just need to stop Checking that option in the "Page Properties" in order to achieve that desired effect of "less dead-space", as he was calling it?

Any way to pretty much still construct a Floating-Layer-driven website in WB, but maybe utilize the "Single Column Layout Grid"? Or, it's got to be one or the other?
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
Pablo
 
Posts: 14581
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Layer site, but still utilize more space

Post by Pablo » Tue Sep 18, 2018 6:38 am

The website you are referring to, fills the 'dead space' with a background image. You can do the same in your layers.
Also note that the website uses bootstrap (layout grids) for the layout, so the elements will be flexible (instead of fixed)

There are many example templates to demonstrate how to do this:
http://www.wysiwygwebbuilder.com/templates8.html

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

Re: Layer site, but still utilize more space

Post by crispy68 » Thu Sep 20, 2018 12:02 am

Hey etcbbu,
I guess that confines my objects to the 970-Pixel Width..? do I just need to stop Checking that option in the "Page Properties" in order to achieve that desired effect of "less dead-space", as he was calling it?
Yes, if you are going to use floating layers/layout grids, then do not check 'center in the browser horizontally'. The best way to fill the screen will be using layout grids so the content adapts to whatever screen size. I always start with 1920 as my default layout since the 27" screen i'm using is set to this and then work my way down.

It also helps that your client gives you some sort of content. In looking at the two sites, they have a bit more content on their page so it's easier to fill the screen.

I think once you get used to using grids/floating layers it will get easier and the design time is quicker. Check out some of my WB templates on https://www.webbuildertemplates.com and you will see that I exclusively use layout grids/floating layers. Feel free to contact me directly if you have any questions or not sure what direction to go on a certain design and I'm glad to help.

User avatar
etcbbu
 
 
Posts: 402
Joined: Mon Apr 23, 2007 3:00 pm

Re: Layer site, but still utilize more space

Post by etcbbu » Thu Sep 20, 2018 12:05 am

So, you *do* use both layout grids and floating layers, as in, in the same project..? It's not XOR--one or the other? Because, I use Floating Layers, too, and love them.

I'm just ignorant about layout grids.
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

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

Re: Layer site, but still utilize more space

Post by crispy68 » Thu Sep 20, 2018 12:13 am

Yes, I use both in the same layout.
I'm just ignorant about layout grids.
Feel free to reach out directly anytime if you need help. :D

User avatar
etcbbu
 
 
Posts: 402
Joined: Mon Apr 23, 2007 3:00 pm

Re: Layer site, but still utilize more space

Post by etcbbu » Thu Sep 20, 2018 12:30 am

OH, wow. Interesting. So, I was just playing around with things:

https://ktravisj.com/layout/index.php

https://ktravisj.com/layout/testscrn.png

So, I see--these Layout Grids are just also set to "Floating", and that's how it (WB) knows how to stack things; and you can just alternate at will..

Ok...that makes sense...and so now I just wonder--why is it on that second layout grid you see on that page (it's the one that has two columns, it's under the purple "Layer"), I have set that second cell on the right to be an image set to "Parallax". Why isn't that thing showing, there..?

--etcbbu
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

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

Re: Layer site, but still utilize more space

Post by crispy68 » Thu Sep 20, 2018 12:46 am

Without seeing your actual project my guess is because you don't have an object in the grid to give it any height. A layout grid has no height. The height is determined by the objects inside. If you add the image to the background of the grid column but no objects are in that grid, then there is no height so the image will not be seen.

User avatar
etcbbu
 
 
Posts: 402
Joined: Mon Apr 23, 2007 3:00 pm

Re: Layer site, but still utilize more space

Post by etcbbu » Thu Sep 20, 2018 1:16 am

Bet. That makes sense.

And so you're also saying that 1280-Width is a better "universal" than 970-width, for the default desktop breakpoint..? A bit more of a universal than the default 970-width?
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

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

Re: Layer site, but still utilize more space

Post by crispy68 » Thu Sep 20, 2018 1:43 am

I would say 1280 is better than 970 but I would go at least 1366. But Like I said, I start with 1920. I usually do the following: 1920, 1366, 1024, 768, 480, 360

User avatar
etcbbu
 
 
Posts: 402
Joined: Mon Apr 23, 2007 3:00 pm

Re: Layer site, but still utilize more space

Post by etcbbu » Thu Sep 20, 2018 6:06 pm

So you do 6 Breakpoints on every project?
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

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

Re: Layer site, but still utilize more space

Post by crispy68 » Thu Sep 20, 2018 7:13 pm

Not always. It's dependent on the design. I simple design may not need many or any. However, with a more complex layout I find having the additional breakpoints aids in being able to finely adjust objects better to smaller devices.

User avatar
etcbbu
 
 
Posts: 402
Joined: Mon Apr 23, 2007 3:00 pm

Re: Layer site, but still utilize more space

Post by etcbbu » Thu Sep 20, 2018 7:30 pm

Ok, interesting; I feel that.

Another thing about which I thought: Recently, like I say, been using and loving pure-Floating-Layer sites. However, one thing I've had to do is demand that I put a "Page Header" object at the top of every page on every site, because I typically like to use the "Responsive Menu" object at the top of all of my websites. And the way I use the Responsive Menu object is always put it on its own, non-published page, and then on that Page Header that is atop every page of the website, I use an "Embedded Page" object as a child of that Page Header object, and I choose to call that Responsive Menu by using the Embedded Object to call that non-published page where I set the Responsive Menu. I've found I have to utilize a "Page Header" object, because if the Layer/Page Header on which the Responsive Menu-via-Embedded Page-object is not set to "In Front [of all other objects], whenever you mouse-over the menu, it gets hidden behind other page content. So I've had to start using one Page Header object atop all of the pages of my projects, in order to combat that, so I could always make sure the Embedded Page Object that calls the non-published "page" that is JUST the "Responsive Menu" object will *always* be on top, and so users can *always* see the sub-menu choices on the drop-downs from the Responsive Menu.

So in thinking about that, how will I reconcile that with using Layout Grid method? Largely, the reason I want to utilize Layout Grid method, is to have objects on the tops of the pages be closer to the edges of the page. Would I just keep on putting the Responsive Menu on a non-published page, and call it into an "Embedded Object", and then just make sure the cell of the Layout Grid in which I set that Embedded Object is at the top of the Page, and that should work? Maybe, have one Layout Grid of, like, three columns on top: set the Embedded-page-holding-the-Responsive-Menu to the middle-cell of that top Layout Grid Floating Layer; and, say, set a logo on the left-cell, and then a phone number on the right-cell?

Literally, the primary reason I'm gonna start looking at using Layout Grids is just to have the stuff at the tops of the pages be closer to the edges. And just wondering how I reconcile that with having the Responsive Menu at the top of each page like I do..?

Do I need to *stop* using "Embedded Page" to call the non-=published page that's the responsive menu, and literally just start putting a "Responsive Menu" on each and every page of the website rather than calling it from an "Embedded Page"?
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

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

Re: Layer site, but still utilize more space

Post by crispy68 » Thu Sep 20, 2018 11:50 pm

You can use a page header, docking layer or even a fixed layout grid for that matter. If you decided to use layout grids, you are not going to do anything different than you already are doing with floating layers. You can still embed the menu onto the header as you are doing.

Yes, you can have floating layers with layout grids on the same page as they are both floating. The difference is that the objects inside a floating layer are absolute positioned objects unless you set the 'position children' to floating. Objects placed in a layout grid are floating to begin with. Again, it all depends on your design as to what you need to use. You also have the option to use Flexbox or CSSGrid.

User avatar
etcbbu
 
 
Posts: 402
Joined: Mon Apr 23, 2007 3:00 pm

Re: Layer site, but still utilize more space

Post by etcbbu » Tue Sep 25, 2018 2:17 am

All right, so. Trying a new site where I'm going to have my Default Breakpoint be 1366 instead of 970. Please look at this:

https://tylersportvehicles.com/test/

Looks *perfect* on my 17-inch laptop.

But when I look at it on my two other monitors that are not as wide (they're what you'd called "Typical computer monitors"), stuff is completely wonky, and I don't know how to find the middle ground. Please look at that page on monitors that are not as wide as 17-inch so that you can see what I mean:

1) Seems like I'm getting some scrollbars, when there is not content that's falling outside of the page parameters, I don't believe any content is outside of the frame

2) That picture of the 3 people sitting in a golf cart is leaving some white-bg showing through, even though I have it set to "cover". That image's width size is 800 pixels. Is that why it's doing that? Again, it finds edges and looks great on my 17-inch laptop, but on two other monitors that are not as wide as my 17-inch monitor, it doesn't look good because the image has white-spaces on the left and right of it, and those HUGE MASSIVE scrollbars when no content is falling outside of it.

Here are my Page Properties, my top Page Header object's properties, and that Layer with the people in its properties:

- Page properties image, click or tap here: https://tylersportvehicles.com/test/tsv ... erties.png
- Page Header Object properties image, click or tap here: https://tylersportvehicles.com/test/tsv ... erties.png
- Layer with "people" image properties image, click or tap here: https://tylersportvehicles.com/test/tsv ... erties.png
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

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

Re: Layer site, but still utilize more space

Post by crispy68 » Tue Sep 25, 2018 2:50 am

Hey Etcbbu,

Would you be able to send the project file? It would be a lot easier to see what you've done. There could be more going on than what I can see in the images.
Last edited by crispy68 on Tue Sep 25, 2018 2:52 am, edited 1 time in total.

Post Reply

Who is online

Users browsing this forum: MGD4me and 11 guests