How to style rows and columns in MotoPress Content Editor

1. First of all we need define whether we want to style Row(1) or – Column (2) and select it

2. Then navigate to dialogue popup with properties. As I’ve selected a Row I can see its properties like Container/Content Width, Full-Height, Background Type (self-hosted video, YouTube or Parallax). Also there is ID box that might be useful for creating anchor links to certain row.

3. But this is only the beginning of advanced styling. So we switch to Style tab and open Style Editor for Elements

4. Here I set Background Image and configure its parameters if needed (Repeat, Size, Position, Attachment) I recommend to try Attachment Fixed parameter. If you prefer colored background you can choose it with color picker or use exact color code

5. Scroll a little bit down and set up Padding Top and Bottom attributes to increase height of the row.

That’s enough for my row but as you can see there are parameters to configure margin and border styles – border type, width of each side (right, top, left and bottom), border color and even border radius.

6. If you need to adjust your style for other devices you can switch to tablet or mobile layouts and configure them. There is also hover mode available so you can apply completely different styles and you will see them by hovering mouse over the row or column.

7. When you are done you can choose whether you want to apply this style just for this row or save it as Preset and use for other elements, rows and columns. So you can save your time re-using the same style further at your website.

Hope you’ve enjoyed this helpful overview. This Style Editor tool is available for each element under the Style tab so you can use it to adjust button styles, text elements, etc.