Row and widget styling – Leto

Styling rows and widgets is done via the Page Builder interface. You get to change paddings and margins, set background colors or images, vertically align content and more.

Edit the page where you want to make adjustments, identify the row that you want to change and hover over the wrench icon, then click on Edit Row


You will find three sections there:

  • Attributes: lets you set custom ID or classes and also custom CSS that applies only to that specific row;
  • Layout: here you can find options for margins, paddings, full widths rows and more;
  • Design: in this section you will find options to add a background image or set a background color.

Tip: if you’re planning on using a background image or color for a specific row, consider going to Layout > Row Layout and from the dropdown select Full Width to make your row go from one screen edge to another.

Further customization opportunities are available in the widget edit screen. This includes similar options to the row edit screen with some additions like font or link color options. Below you’ll see how to enter the widget edit screen. Once you’re there you’ll notice the same three sections on the right hande side: Attributes, Layout and Design.