Hello i want to make a row layout like the image example
I know that i can use z-index to put a “layer” using it with position:relative,fixed,absolute, etc, to do it but i cant make it work…
I added a low z-index to the black row, and i used, a higher z-index to the “widget” section, the problem with it is that the widget area size is get restricted by the row size. i cant make it look like the example, any idea?.
any idea? X_x
Hi Antony,
You’ll need to use position to do this. Create a row and add your desired image widget. Then open the image widget and set it up with your image. Header over to the widget styles sidebar and openning the attributes settings group, set the widget class to overflow-image.
Now navigate to WP Admin > Appearance > Custom CSS and add the following CSS:
.overflow-image { position: relative; } .overflow-image .so-widget-image { position: absolute; top: -150px; }You might also need to install the SiteOrigin CSS Editor.
The relative position is required to make the absolute positioned image relative to the row. Adjust the top to get the desired effect.
An example of this can be seen here. it was thrown together really quickly so don’t expect anything fancy.You can download this example layout here – please note that images aren’t included. To install it please open up a page builder powered page and click the layouts button in the page builder toolbar. Select Import / Export and upload the layout.