Today, I thought it will be interesting to see how our custom modules can design the Apple layout using Divi with our Fullwidth Header Extended Module and All-In-One Module

Took about 15 mins to make something very similar together with the mobile media styles. You can take a look how it looks like at the link below or download the json below. We make use of the animation delay and the AIO background image zooming effect.

Demo

Download “Apple Layout Demo JSON” Apple-Layout-Demo.json_.zip – Downloaded 272 times – 2 MB

You will need a little css to make it nicely. You can copy and paste the following css to your custom css stylesheet or the page css.

divi-page-css

/*DWD Apple CSS Demo*/
.et_pb_fullwidth_header a.et_pb_button:after { font-size: 25px; top: 7px; } .et_pb_fullwidth_header a.et_pb_button:after { margin-left: 0 !important; } .aio-wrap sup { font-size: .6em; opacity: .8; vertical-align: top; position: relative; bottom: -.9em; } @media (max-width: 980px) { .spilt-full-mobile.et_pb_row { width: 100% !important; } .spilt-full-mobile .et_pb_column_6 { margin-bottom: 0 !important; } }
}

Pin It on Pinterest