I’m trying to create a similar interface to this one: https://www.taskrabbit.com/how-it-works
I’ve tried using image widgets, slider widgets, etc. but can’t seem to be able to adjust an image to the entire screen and then scroll down to another image.
Hi Rodrigo
It’s not super easy to create a layout like this in Vantage just yet but let’s try get you started. Each row should be a row in Page Builder. When you edit a row in our Page Builder plugin you’ll see a Layout tab on the right, set the Row Layout drop down menu to Full Width Stretched. Next click the Theme tab, there you’ll see a Background Image field, you’ll need to insert your full width background image there. To get the necessary URL, go to Media > your image, click on the image and copy the url from the right column.
Start with the above, see how you come along, we’ll try assist from there.
How do you make the height of the row bigger?
Also what size should the image be?
Would it be possible to add an overlay image and/or widgets over the background image?
The height of the row will conform to the content inside of it. So don’t worry about that for now, get the background in there, then add widgets into the row with your content, those will add the height.
Unfortunately no easy answer to image size question. How wide is the screen it’s being viewed on? We don’t know, so you’ll need to choose an optimum size for quality vs load time. You could also just set a row background color and then insert a Visual Editor widget to insert an image in the middle. For example: https://www.taskrabbit.com/how-it-works, lady in mustard jersey, that’s one small image, the row has the white background, it’s not one big image.
Yes, the row background will work with widgets added to the row.
Now as far as padding, how can i remove it so that each row is fluid and moves right into the next section?
Right now, unfortunately, that is a bit of a mission. Under Theme tab select the no bottom margin checkbox.
To remove row padding, please see my thread here:
Thread: Too much white space between rows in page builder
Hi Andrew, thanks for the response. I have added an image to the bottom of my page just above the footer.
I have used the guidance given for removing the padding, however there is still a gap between the image and the footer?…any advice?
biaccountancy.com
Sure, try this under Appearance > Custom CSS:
/* Home */ .home #main { padding-top: 0; padding-bottom: 0; }That’s for top and bottom, or just for bottom:
/* Home */ .home #main { padding-bottom: 0; }