Set the background color for row elements
You can modify the background of a Row under the Design tab > Background.
Change the dimension of a video or an image
Step 1: Drag & drop a Row element on your page and move the video inside the row.
Step 2: we can resize the image based on the row at the Dimension in the Row element's settings.
Set the desired order on the Desktop and Mobile versions for a row with 2 columns
You might encounter the issue after completing designing rows with texts and images. It looks great on the Desktop version with the order of the Text on the left, the image on the right for the first row. And the Image is on the left and the Text on the right for the second row as in the picture below.
However, on the mobile version, you can face two images going sequentially like this
Please check out the tutorial video below to know how to fix it.
Solution for Some Common Issues
- I divide a Row element into 3 columns. It looks good on the editor page but the middle element is not centered on the live page?
Solution: Tip for you: Drag and drop Separator elements into the first column and the third column and make them transparent with zero height.
- I create a section of image and text as 2 columns. It looks good on the Desktop but the text is not aligned with the above image on Mobile?
- As columns "stack" for mobile, you will have a bunch of stacked images, followed by a bunch of stacked text. Therefore, in this case, you can adjust the Column gap to keep the text aligned with the corresponding image above it.
- You may also choose to disable stacking on mobile devices. This will ensure that your Column element continues to remain horizontal.