Design Settings

The X Builder plugin offers additional design options for Section, Row, Column and content elements which can be found under Design Tab. It is allowed to set different design styles for desktop, laptop, landscape, tablet and mobile views.

Note. The settings in the Design tab relates to rows, columns and elements as well. The following instructions are useful for all of them.

Within Design options it is possible to control:

  • Responsive options

  • Background image, color, and position

  • Margins, Padding control settings

  • Border style

  • Box shadow style

Resposnsive Options

Click on device icons to switch and set design styles to certain device.

Within settings, it is possible to disable or hide any section, row, column and content element across multiple devices.

Tip. It is allowed to set different background color/image, border, box shadow, margins and paddings for different devices.

Background Options

Besides that, there are background style settings. You are allowed to set background color and image, its position and size to sections, rows, columns and elements.

Select a background color easily from the color picker or upload a background image to your section, row, column or even to certain element.

Margins and paddings

In addition, you are able to add margins and paddings for overall element, section, etc. or just left, right, top or bottom part. You need to just set a value without “px”. Mergin and Padding fields accept negative values as well.

Border & Box Shadow Options

Add a border for overall element or right, left, top and bottom part as well as box shadow. You can control the size, radius and color of borders and shadow.