Introduction to the Style Editor

The GroovePages Style Editor is one of those features you'll be using constantly. As its name indicates, it allows you to modify the style and design of pretty much anything on the canvas.

To trigger the style editor for an element, hover the cursor over the element on the canvas and wait for the red outline to appear around the item you'd like to edit ( please note: not every single item on the canvas can be styled by the style editor). Once the red outline is present and the selected element has the style editor activated, click once using the left button on your mouse to bring up the sidebar to the right of the screen. If the element you're selecting on the canvas is an element that has a configuration menu available, you'll see two tabs in the sidebar: "Design" and "Functionality". Keep in mind that not every item on the canvas has both options available, so you might not see any tabs and only have the style editor available.

Depending on whether you have turned on "Export" mode, the style editor you're seeing might have different options available (certain advanced features are hidden while in "regular" mode).

From top to bottom, you'll see the following sections in the style editor:

Responsive selectors

Available in expert mode only

The responsive selectors allow you to set styles to target specific screen widths (or devices). When no responsive selectors are set, the styles you configure will apply across all devices and screen sizes. To best way to go about about ensuring your designs look good across a wide variety of devices and screen sizes is to start setting styles without using the responsive selectors while keeping in mind that these styles will be applied to anything, ranging from mobile phones to tablets and desktop/laptop computers. Then, working your way up from smaller screens to bigger screens, use the responsive selectors to target larger screens and provide styles to make sure your designs work well on larger screens as well. This process is called "mobile first" design (since we use smaller screens as the starting points for our designs). You will find more information about responsive web design and mobile first design in the "Responsive design" section.

State variants

Available in expert mode only

The state variants allow you to create styles that target specific "states" your elements can be in. GroovePages currently support three such states:

1. Hover
   This state is triggered when a visitor hovers his or her mouse cursor over the element.
2. Active
   This state is triggered when a visitor clicks on the element; the event is triggered when the visitor moves the mouse button down. The event is stopped when the visitor releases the mouse button.
3. Focus
   This state is trigger when a visitor activates the element by placing the text cursor in the element (typically by clicking the element or by using the keyboard's tab key).

GroovePages currently only makes certain style properties available for each of the state variants, therefor you may find certain properties missing/hidden while using the state variants.

Transparency

The transparency slider allows you to set transparency level for the entire element. Please note that this different compared to setting a transparent background; when using the transparency slider, you will make the entire element (and everything in it) transparent, not just the background.

Global styles

For more information about using Global Styles, please see this article.

Background

The background section allows you to configure a background color or set a background image. When setting a background image, the background section offers several options to align and position the selected background image.

Borders

The border section allows you to define a border radius, either for all four corners at once or for individual corners separately, and define a border on the selected element. Borders are also either set for the entire element, or defined per side (top, bottom, left, right).

Spacing

The spacing section offers style properties defining space within (padding) or space outside (margins) the selected element. Tip: to center the element horizontally, set both the left and right margins to "auto" (second to last option on the slider).

Sizing

The sizing section contains properties to define the width and height of the selected element. For more information on the sizing properties, please see this article. 

Shadow

The shadow section allows you to select a pre-defined shadow for the selected element.

Custom Attributes

Only available in expert mode

This section contains a number of parameters for advanced users:

• Element's ID attribute
  Use this field to define a custom ID attribute for the selected element
• Element's CLASS attribute
  Use this field to add class names to the selected element
• Display
  Use the display dropdown to manipulate the selected element's CSS display property
• Custom CSS
  Use the custom CSS field to provide custom styles for the selected element