Question How to create a floating page design?

[teejay]

I have a client that has requested a floating page design but I am unsure how to implement this. I have attached a pdf of what this looks like.

I have researched online how to do this and have tried applying custom css to the body but this did not work. I'm sure there's a way to do this easily in elementor and that I am overlooking something. Help would be greatly appreciated.

 

[drosberg]

Hi there, not sure what you mean by floating page design and can't tell from your example? Maybe you just need to create a section of text with a boarder and background then make it sticky? Again not quite sure what you mean bit perhaps this will give you wine ideas?
Good luck

Don

 

[teejay]

Hi there, not sure what you mean by floating page design and can't tell from your example? Maybe you just need to create a section of text with a boarder and background then make it sticky? Again not quite sure what you mean bit perhaps this will give you wine ideas?
Good luck

Don

Hi Don, thank you for your reply. By floating page design I mean the illusion that the entire web page is floating. In other words it would have a margin around the entire webpage with a shadow effect around the border of the body. In the PDF example it shows a gray background with a drop shadow around the body of the web page. It's kind of subtle so it might be easy to miss.

 

[sms-design]

To achieve that you will need a boxed page layout and the apply a box-shadow to the theme container or go with a full-width canvas.

OR

Add a single section and then in style > border > box-shadow apply the effect.

Your orange banner "Your Mom" will need a negative left-margin also I would adopt the same box-shadow for the bottom/right side of the element

 

[teejay]

To achieve that you will need a boxed page layout and the apply a box-shadow to the theme container or go with a full-width canvas.

OR

Add a single section and then in style > border > box-shadow apply the effect.

Your orange banner "Your Mom" will need a negative left-margin also I would adopt the same box-shadow for the bottom/right side of the element

Hi sms-design, thank you for your reply and help.

For the first option you suggested, how would I create this box page layout? Is that a setting in elementor? How would I apply a box shadow to the theme container?

For the second option would all my content go inside of that one section to keep it contained?

 

[sms-design]

Teejay I would firstly go back the webpage where you saw the design idea, do a Ctrl + U then Ctrl + F search for the word "theme" you are looking for a line of information similar to "'https://www.websitename.com/wp-content/themes/astra" the section after themes (astra) will tell you the WP theme used to achieve that design. Your now half way home.

Can this be achieved with Elementor yes but I would suggest the pro version, in fact it can be achieved with most page builders. For example https://www.skyshot.co.uk/themes/ these are produced with another page builder but I needed a New Year challenge so opted to learn Elementor in 2020. And the first client web build on my testing server is looking good and planned for launch March 2020 https://movemywebsite.co.uk/build/midi1

Please bear in mind I've be doing this for 30yrs and learnt my trade coding in notepad when computers starting using 250kb floppy disks for storage and the www internet was really in it's infancy. Over the years I've built simple landing pages to complex site's that since launch back in 1997 a news site that is now 100,000's of pages. Google piped us to the post on launch by only 60 days.

That's frightening I've had a google account for 22 years OMG .

In today's web design world remember your chosen design should work mobile > tablet > desktop 85% of your users with be in mobile > tablet so the first questions is how much of your viewport (screen) is going to be lost to the drop-shadow.

So anything in the web space is possible, and I'm still learning everyday. Your're welcome to pm me but I think we have exhausted this thread.