Visual Editor

SiteOrigin CSS has two modes with a live preview of your site. Visual Mode lets you change an element with controls, so you do not need to write CSS. Expanded Mode puts the code editor next to the preview, for users who write CSS. Both modes have the inspector, which shows you the selectors and styles of any element you click. This page describes both modes and the inspector.

CSS Terms

This page uses these terms. In the rule h2 { font-weight: bold; }:

• The selector is h2. It chooses the elements that the rule changes.
• The declaration is font-weight: bold;. It has a property (font-weight) and a value (bold).

Visual Mode

This video selects a post card in the preview, changes its background, border, corner radius and padding, saves the CSS and closes Visual Mode.

To open Visual Mode, go to AppearanceCustom CSS and click the eye icon (Open Visual Mode).

The visual controls are on the left. The live preview of your site is on the right, and the inspector is under the preview. Every change shows in the preview at once, and the plugin writes it into your CSS.

Select an Element

1. In the preview, move the pointer over the page. The inspector highlights the element under the pointer.
2. Click the element. The plugin picks the most specific selector for it and adds an empty rule for that selector to your CSS. The selector shows in the dropdown at the top of the left panel.
3. Check the selector. To use a different one, click it in the inspector’s selector list under the preview. Read The Inspector.

When you click a link, the first selector can end with :hover, because the pointer is on the link. A rule with :hover only applies when a visitor points at the link. To style the link at all times, click the selector without :hover in the inspector’s selector list.

The dropdown lists every rule in your CSS, including rules inside media queries. Choose a rule in the dropdown to edit it.

Change the Element

The controls are on three tabs. Each control changes one CSS property of the rule in the dropdown.

• Text: Text Color, Font Size, Line Height, Font Weight, Font Style, Text Decoration, Font Variant, Text Transform, Font Family, Text Align, Text Indent, Letter Spacing, Word Spacing, White Space and Text Shadow.
• Decoration: Background Color, Background Image, Background Position, Background Repeat, Background Size, Background Attachment, Box Shadow, Opacity, Borders and Border Radius.
• Layout: Margin, Padding, Position, Absolute Position, Width, Height, Display, Float, Clear, Visibility, Overflow, Overflow X, Overflow Y and Z-Index.

The controls work like this:

• Color fields open a color picker. You can also type a color value.
• Size fields, such as Font Size and Width, have a unit menu (px, %, em, rem, vw, vh and more) and – and + buttons. Hold a button to change the value quickly. The unit starts as px.
• Icon buttons, such as Text Align, set a value with one click. The circle button means no value.
• Borders, Margin and Padding have tabs for all sides and for each side. Border Radius has tabs for all corners and for each corner. Absolute Position has a tab for each side.
• Background Image has an upload button that opens the media library.
• Text Shadow, Box Shadow and Background Position are text fields. Type the CSS value, for example 0 2px 6px rgba(0,0,0,0.2).
• Font Family is a text field. Type a font stack, for example Georgia, serif.

To remove a single value, delete it in the code editor. In Visual Mode, clearing a field also removes the other values that come after it in the same rule.

Save and Close

• Click the save icon at the top of the panel to save your CSS. You stay in Visual Mode.
• Click the check icon (Close) to go back to the code editor. Your CSS stays in the editor. Click Save CSS if you have not saved it yet.

SiteOrigin Premium

The Web Font Selector addon in SiteOrigin Premium replaces the Font Family field with a Google Fonts selector.

Expanded Mode

This video uses the inspector to add a rule for a post excerpt, types two declarations, copies a property from the inspector, opens a post in the preview and saves.

To open Expanded Mode, go to AppearanceCustom CSS and click the arrows icon (Open Expanded Mode).

The code editor is on the left. The live preview is on the right, with the inspector under it. The preview updates as you type.

The toolbar above the code editor has three icons:

• The save icon saves your CSS.
• The eye icon opens Visual Mode. When you close Visual Mode, you come back to Expanded Mode.
• The arrows icon (Close Expanded Mode) goes back to the basic editor.

To add a rule with the inspector:

1. Click an element in the preview.
2. Click a selector in the inspector’s selector list. The plugin adds an empty rule for it at the end of your CSS.
3. Click inside the rule, between the braces.
4. Type a declaration, or click a property in the inspector’s property list to copy it into the rule. Then change the value.

The Inspector

The inspector is the panel under the preview in both modes. It helps you find the right selector for any element.

• Magnifier icon: turns the inspector on or off. It is on when the editor opens.
• Highlight: when the inspector is on, the element under the pointer is highlighted in the preview. The highlight also shows the element’s margin and padding.
• Hierarchy: the bar next to the magnifier lists the selected element and the elements that contain it, from body down. Point at an item to highlight that element. Click an item to select it.
• Selector list: the left column lists the selectors that match the selected element. The most specific selector is at the top and the most general is at the bottom. Point at a selector to highlight every element it matches. Click a selector to use it.
• Property list: the right column lists CSS properties from your site’s stylesheets that apply to the selected element. In Expanded Mode, click a property to copy it into the editor at the cursor.
• Navigate To: when the selected element is inside a link, the inspector shows the link’s address. Click it to open that page in the preview.

Preview Other Pages

The preview opens on your home page. While the inspector is on, a click in the preview selects an element and does not follow links. To edit the CSS for another page, open it in the preview in one of these ways:

• Click the magnifier icon to turn the inspector off, then click links in the preview to go to the page. The inspector is on again when the new page loads.
• Select an element inside a link, then click the address next to Navigate To.
• Type the address of a page on your site in the field above the preview and press Enter. The address must be on the same site.

Your CSS applies to the whole site. The preview only changes which page you see.

Related

• Getting Started
• Basic Editor
• FAQ