Most s in the editor have design options that enable you to customize the 's appearance for your site. These options can help you create a that perfectly matches the style of your site, or one that stands out and attracts visitor's attention. Not all s have the same options. For example, some s do not allow you to edit inner spacing, others do not let you change outer spacing.
To open the Design Editor of a on your site, right-click on the to open the context menu and then click Edit Design. You can also open the Design Editor by clicking on the and then clicking Design at the top of the window.
To learn how to add s to your page, see Add Widgets.
To learn more about editing s, see Edit Widgets
Many s will have tabs in the various sections of the Design Editor depending on the set up of the . For example, if a has the option to set a background, there may be a tab for Color and one for Image.
Common Design Options
Layout
Layout options are usually specific to certain s. To select from the set of layout options available for that , click the layout that appears in the Design Editor (or click the small arrow beside it) to open the Select Layout menu. To change the selected layout, click the layout you want to use instead and it will be updated in the .
Style
- Color. Click the round color icon to the right of the setting name to open the color picker and change the color.
- Border . Change the width of the border using the slider or text box. Click the gear icon for more options.
- Background . Use a background image orcolor for this using the Choose and Place Images dialog or a video URL.
- Width and Height. Use the slider or text box to change the number of pixels.
- Rounded Corners. Increase or decrease the rounded the corners on a .
- Shadows. Toggle on or off a shadow for this .
- Text. Set various aspects of the text, such as font family, font weight, etc.
Buttons
Widgets that incorporate a button will offer the ability to select whether the button inherits the primary or secondary button style defined in the theme panel. In addition, you can choose between the different button layouts, make edits to the button style (width, height) and button text (font, text size), and adjust the inner and outer spacing.
Any changes you make within the design editor will override styles set at the theme button level. If you need to revert back to the theme button style, click Reset to theme style.
Primary and Secondary theme Buttons
If changes are made to the button (which will override styles set at the theme button level), an indicator box will still be present on the Primary or Secondary button style.
If the button style that does not have the indicator box is clicked, it will reset the button to the style set at the theme button level.
Spacing
Change the inner spacing (spacing inside the edges) and outer spacing (spacing outside the edges). Each number in the outer box sets the outer spacing for its own side (top, bottom, left, or right), and each number in the inner box sets the inner spacing for its own side (top, bottom, left, or right).