Hey Really Smart Divi People

Would any know how to implement this in a full width Row in Divi? Mountains

I recently converted to using divi I am not that familiar with it....


  • Rupok

    Hi Bradley,

    Thanks for asking, but I'm afraid, Divi is a third party paid theme and I don't have much experience with them. Still I tried to make this work for you and it seems like I could show the mountains almost like you want.

    I tried to make it show with divi elements, but Divi row element is hiding this mountain with floating cloud. Not sure why (Divi support team can really tell you better). So instead of using Divi Builder, I used Default Editor (you will get this button when editing a post and Divi theme is activated) and then pasted the HTML code of mountains above the content.

    And then added custom CSS code in Divi Custom CSS Section. You will get that custom CSS option from "Dashboard > Divi > Theme Options > General" section. Scroll down and this option is at the bottom of that General Settings page.

    The output was not exactly same as you are expecting, but it's close. Please check the attached screenshot for reference.

    So I think, you can use a page layout without sidebar and show the mountains there.

    I believe, this will guide you regarding how you can implement that mountains code in your divi theme. If you have any confusion, or if you are stuck at any point, we will be glad to help.

    Or if you want, I can move this thread to our Members' Forum. There you can discuss this with our thousands of members and I believe, many of them have experience and expertise with Divi and guide you better. Please confirm if you want me to move this thread.

    Have a nice day. Cheers!

  • Bradley

    Actually I solved this one a few minutes ago. I am so proud. lol. I could see just a little of the mountains in a "slot" on the page when I added the html to a full-width code module. I set padding for the row at 600 but nothing. I didn't remove it however. I went back the the theme custom css panel in the customizr and added " height: 600px !important; " at the bottom of the .bg selector or whatever you call it and it worked like a charm. You can see the results at staging.devloprs.com . I also set the cloud to go all the way across the screen by tweaking something to 1920 px. I really like using the css tricks as parallax effects and the like really don't perform well for everyone.

    Now I would like to turn those mountains into buildings like in the jetsons cartoons and turn that cloud into a ufo. If you could tell me how to do THAT! I would be really impressed!

    Thanks for helping out that one had me frustrated.


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.