Streaming live at 10am (PST)

How do I make layers? There is no information for help with layers in webflow university on the subject


#1

I am coming from Wix. I want to make several layers. In Wix all you have to do is drag multiple boxes and tell which one is on what layer, add an image with transparency and its done. you can even ad parallax effect with one click. There is no documentation on how to do this in Webflow unless its named something else. Typing in “how to make layers” or “adding images on top of each other” brings up zero results. This can’t be true, its one of the most common things in web design. Any help?


#2

Hi @pkaiken if I understand correctly, you will need to:

  • Have a wrapper div set to position relative
  • Place as many divs (or layers) inside as you want and give each position absolute
  • Use Z-index to control which div should be at the top and bottom

Hope this helps


#3

Its hard going from a drag and drop intuitive design to sliders and numbers and no interaction with what you see. Here below is what I am trying to replicate from my website I built on Wix. Im going to move to Webflow because the type of web site Im making is going to be content heavy and many pages. I am so frustrated right now. Im going to have to watch 5 videos and another couple of hours of experimenting to just get the layers 3 layers to sit one behind the other, which takes 10 seconds in Wix. The layers right now I did in Webflow was an accident. I have no clue how they got behind him and in front and neither can I make it change right now.


#4

Okay, I looked at a video on 3D layers and they mentioned something about setting each section to Absolute and then Fill. This has made the layer affect I was trying to get but now the middle (where the mascot is) is not centered no matter what I click. It has also made the background crush to the top of the window and stay there for no reason. Ive gone through the Webflow basics video so this is not me just jumping into this, I am familiar with how Webflow works.


#5

@pkaiken It’s best not to think of Webflow as a drag & drop editor, but rather a way to code visually. Yes it is a little bit of a learning curve, but once you get it the possibilities on what you can create are endless. If you are getting frustrated and would prefer a traditional WYSIWYG editor, Webflow may not be the best option for you.

For this issue, could you please share your site’s read only link?

Also FWIW, “layers” in HTML are controlled by the element’s z-index. An element with a higher the z-index will be displayed on top of an element with a lower z-index. In Webflow here is how you can do that:

  • Make a wrapper div with position: relative. Screenshot: https://cl.ly/243q3U2W0y01
  • Place elements inside, and for each element give it a position: absolute then fill. Now you can change the z-index to choose which elements are in front. The z-index is found at the bottom of the positioning panel like here: https://cl.ly/0M0R2B3L2B11

For the centering issue, to center an element with margins, it requires the element have a defined width. So you would need to set the width on the image first.

The above solutions may not be best for you as there’s only so much I can recommend without having your site’s link. Could you share your site’s read only link? This would allow myself (or anyone) to help with a catered solution to your issue.

Thanks!


#6

Thanks. Here is the link: https://preview.webflow.com/preview/repair-x?preview=17290620484e27339d5bead515100641

Here is a link to my Wix home page that I am trying to replicate. http://wix.to/6kDDADE

I want to move fully into Webflow very badly, Im just hating the learning curve. I can create 90% of what I want using Wix advanced settings but in the long run, it won’t be the site I need when I build large traffic for my content web site.


#7

Hi Pkaiken,

We all had this learning curve. But honestly, there are numerous topics and foundational principles that are… sort of like a spoke on a wheel. It’s not one thing, or one way to understand the concept of web development/building. The primary basis relies on a bunch of blocks learned over… eh I guess I should say… just by doing it, for a lack of a better term. Here’s the best way to grasp it. I’ll send a message to your profile with my cell phone. I’m a firm believer, for in-depth retention to truly resonate, there needs to be a 1 on 1 conversation. I don’t mind sharing my experience to help expedite the learning curve; a mild Q & A for all your questions. Give me a shout when you need.


#8

Wow, thats nice of you. Ill call tomorrow. I really want to learn Webflow. Thanks again.


#9

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.