Here you will learn about WordPress Page Builder styling aspects. You’ll see how easy it is to:
- Style the objects visually with element style editor
- Create your custom style presets and apply them to any object
- Apply predefined styles
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.
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
- You can create new preset or edit previously created. Give it a name and save
- Apply your preset for other rows and elements
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.
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.