Docs

[ZerotoOne]

hey there,
I’d like to build a section looking similar to this one here http://prntscr.com/co63iy
my page is zerotoone.de

thanks for your help! 🙂

[ZerotoOne]

This reply has been marked as private.

[Jade]

Hi there,

Please create a new section then add an ID to that section.

Add the elements that you want to be placed in the section. Then add this CSS in the customizer:

#floating-section .x-column {
    position: absolute;
    background-color: #fff !important;
    padding: 100px !important;
    top: -260px;
    max-width: 650px;
    left: 30%;
    height: 500px;
}

This assumes that the ID you added for the section is floating-section. Feel free to change it and tweak the CSS values until it looks right on your page.

Hope this helps.

[ZerotoOne]

thank you comes close 🙂 can you give me a tip, on how to do this with a 2 column section? like this http://prntscr.com/cp1tj3

thanks a lot!

[Rue Nel]

Hello There,

Thanks for the updates. If you wanted to have a two column, you need to modify the code and focus on the row instead. You can make use of this code:

#floating-section .x-container {
    position: absolute;
    background-color: #fff !important;
    padding: 100px !important;
    top: -260px;
    max-width: 650px;
    left: 30%;
    height: 500px;
}

Hope this helps. Kindly let us know.

[ZerotoOne]

thank you 🙂 I changed the code, but now the overlap is not working anymore. Please have a look, setting the ID in row and column did not do anything and the ID for the section made it look very weird. :/

[Christopher]

Hi there,

Please add this code :

.home div#x-section-4 {
    position: relative;
    background-color: #fff !important;
    padding: 100px !important;
    height: 500px;
}

hope it helps.

[ZerotoOne]

just add or replace?

[Christopher]

Hi,

I couldn’t find section with id floating-section, so I targeted section’s default ID. Please remove previous code and keep the one I provided in previous replay, then check the result. If you need further assist, please clarify where did you add the custom ID and confirm if you’re trying to add this style to section #4.

Thanks.

[Author]

Posts