Here you will learn about Page Builder styling aspects. You’ll see how easy it is to:

 
 

What is Element Style Editor

When you switch to Style tab at Object Properties Panel you can see tools to style MotoPress modules, rows and columns. Let’s start with Element Style Editor. There is the same set of properties for each object row or column. You can switch between screen dimension types (Desktop, Tablet and Mobile) and style element individually for each device. Moreover there is Hover state available. Thus you can style hover state for each element in MotoPress Page Builder.

ce-style-tab-properties.png

Using Style Editor you are able to:

  • Set Background Color. You can just pick a color with color-picker, paste color code and set transparency
  • Edit Text color. If there is text in the object you modify you can change its color within Element Style Editor
  • Put Image or Gradient to the Background. You can set different background images for default and hover states of the same element
  • Add Custom Padding and Margin – top, bottom, left, right
  • Edit Borders fully – define a border type (default, none, solid, dotted, dashed, double, groove, ridge, inset, outset), width, color and radius

When you customized an element you should apply the changes by click into ‘Apply’ button at the bottom of Element Style Editor.

 
 

Create and Apply Custom Presets

As there is the same set of properties for each object at the Element Style editor you can ‘Apply’ the changes and save them as preset for further usage. So you can style the Row, save the changes as a new preset and apply it for other rows and objects. Follow the steps below:

  • Select a row or any other object, switch to style tab at properties panel and go to Element Style Editor
  • Edit the style of the element
  • When you are done click on ‘Apply’ options arrow to save your preset

    ce-save-as-preset.jpg

  • You can create new preset or edit previously created. Give it a name and save

    ce-save-as-new-preset.jpg

  • Apply your preset for other rows and elements

    ce-apply-preset.jpg

 
 

Predefined styles

Except presets there are Predefined Styles available for elements, rows and columns. These are default styles prepared for certain elements. For example you can select color for row, columns background, font for Paragraph object or style the button with Predefined Styles.

ce-predefined-styles.jpg

The set of styles is unique for each element so there might be any predefined style for some of them e.g. Icon (it can be styled visually using elements parameters), Image, Slider, etc.
You can also Apply Class Styles from your stylesheet or register your Custom Predefined Styles.

Responses

We want to make our product better, so will be glad to receive your feedback and improve MotoPress specially for you! Leave a message below, make your voice heard!

  • Joseph Garel

    I really don’t get it. What I want is to downsize things for mobile and make fonts and such smaller to fit the screen better. Don’t understand how this does that

    • Hello Joseph,
      It is recommended to control the font style and its responsiveness via theme style and not via individual elements.
      In order to edit style for mobile device you should select element you want to edit, switch to Style tab, switch to Mobile mode and adjust padding, margin, etc. You can also hide elements for certain type of device.