Style Panel

• Style Panel
  • Text Section
  • SVG Style Section
  • Background Section
  • Container Line Height Section
  • Border section
  • Spacing section

Style Panel

The Style panel is accessed by selecting a layer via the Canvas or Layers sidebar, and in the Right Sidebar clicking the Design icon to enter Design Mode. Then click the Style tab icon to open the Style Panel.

Through the Style panel you can control the visual design of your layers through typography, backgrounds, borders, spacing and more.

Text Section

Use the settings in the Text section to style Text layers.

Note that font icon layers are also styled via this section, as they are standard Text layers used to display font icons.

Font (Dropdown)

Set the font family to apply to the text layer. Choose from a list of “Websafe” fonts and Google Fonts.

If you have added any custom fonts via the Plugin Dashboard, under Settings -> Fonts -> Custom Fonts, they will also appear in the list.

Font Size (Number, pixels, range)

Set the size of the font in pixels.

Options:

• _4px: Minimum. The smallest allowable font size.
• _5000px: Maximum. The largest allowable font size.

Line Height (Number, pixels, range)

Set the height of lines in the text layer. This refers to the total height of the letters themselves and the space above and below each line.

Options:

• _4px: Minimum. The smallest allowable line height.
• _5000px: Maximum. The largest allowable line height.

Letter Spacing (Number, pixels, range)

Set the amount of extra space between letters, in pixels.

Options:

• _0px: Minimum. No extra space between letters.
• _100px: Maximum. The largest allowable space between letters.

Font Weight (Dropdown)

Set a font weight, e.g. 400 Regular, 700 Bold. Higher numbers create thicker text, lower numbers create thinner text.

Available options depend on the selected Font.

Options:

• _{100 Thin}
• _{200 Extra-Light}
• _{300 Light}
• _{400 Regular}
• _{500 Medium}
• _{600 Semi-Bold}
• _{700 Bold}
• _{800 Extra-Bold}
• _{900 Black}

HTML Tag (Dropdown)

Optionally change the HTML tag, aka HTML element, wrapped around the layer. Can be useful for SEO purposes.

Options:

• _<sr7-layer>
• _<div>
• _<p>
• _<h1>
• _<h2>
• _<h3>
• _<h4>
• _<h5>
• _<h6>
• _<span>
• _<label>

Text Color (Color Swatch)

Displays the currently applied Text Color. Click the color swatch ¹ to open a Color Picker ² and set a new Text Color.

Uppercase (Toggle)

Toggle on to force all letters to appear in upper case.

Capitalize (Toggle)

Toggle on to force the first letter in every word to appear in upper case.

Lowercase (Toggle)

Toggle on to force all letters to appear in lower case.

Italic (Toggle)

Toggle on to apply italic styling to layer text.

Underline (Toggle)

Toggle on to add an underline to layer text.

Strikethrough (Toggle)

Toggle on to add a line running through layer text.

SVG Style Section

Use the settings in the SVG Style section to optionally modify the colors, background image and stroke of an SVG graphic.

Keep Original Colors (Toggle)

Set whether to keep the SVG graphic’s original colors, or allow them to be modified.

Options:

• _On: The SVG’s colors will be drawn from the original file.
• _Off: Settings will appear to enable modification of the SVG’s colors.

Image (Toggle)

Set whether to apply a background image to the SVG.

Options:

• _On: The SVG will use an image as its background.
• _Off: The SVG will use a flat color as its background.

SVG Color (Color Swatch)

Displays the currently applied SVG Color. Click the color swatch ¹ to open a Color Picker ² and set a new SVG Color.

Thumbnail (Image Preview & Buttons)

Shows a preview of the currently selected SVG background image.

Hover over the preview image to access buttons to replace the current image via the WordPress library ¹, the Slider Revolution Elements library ², or with a new AI generated image ³.

Image Alignment (3×3 Checkbox Grid)

Set the alignment of the image within the SVG layer.

The 3×3 grid represents the corners and edges of the layer, e.g. to align top left choose the top left checkbox.

Image Size (Dropdown)

Set how the image is sized, and if it repeats, within the layer.

Options:

• _Cover: Ensure the image covers the whole layer, even if some areas are not visible.
• _Contain: Ensure the full image is contained inside the layer and visible, even if some areas of the layer are empty.
• _Auto: Image displays at its actual dimensions, regardless of layer dimensions.

Stroke Color (Color Swatch)

Displays the currently applied Stroke Color. Click the color swatch ¹ to open a Color Picker ² and set a new Stroke Color.

Stroke Width (Number, range)

Set the width of the SVG’s stroke. Numbers smaller than 1 can be used.

Note that the stroke width is not absolute, it is relative to the original size of the graphic. For example, a stroke width of just 1 on an SVG that was originally small can appear quite thick if the graphic is scaled up. Use numbers smaller than 1 if necessary to achieve the desired results.

Options:

• ₀: Minimum. No stroke visible.
• ₅₀₀: Maximum. Very thick stroke width.

Dash Array (Number)

Convert the SVG stroke into a dashed line by entering any number higher than zero.

The higher the number, the longer the dashes and spaces between the dashes will be.

Dash Array Offset (Number, range)

If Dash Array is set to a number higher than zero, use Dash Array Offset to offset the location of the dashes, moving them around the shape.

Options:

• ₀: Minimum. No offset to dash array.
• ₁₀₀: Maximum. Largest amount of offset to dash array.

Background Section

Use the settings in the Background section to change the layer’s background color and/or background image.

BG Color (Color Swatch)

Displays the currently applied BG Color for the layer. Click the color swatch ¹ to open a Color Picker ² and set a new BG Color.

BG Image (Toggle)

Set whether to add an image into the layer background.

Options:

• _On: Add a background image to the layer.
• _Off: Don’t add a background image to the layer.

Thumbnail (Image Preview & Buttons)

Shows a preview of the currently selected background image.

Hover over the preview image to access buttons to replace the current image via the WordPress library ¹, the Slider Revolution Elements library ², or with a new AI generated image ³.

Image Alignment (3×3 Checkbox Grid)

Set the alignment of the background image within its own layer. This is useful when the image has a different aspect ratio to the layer, allowing you to control which portion of the image is visible.

The 3×3 grid represents the corners and edges of the layer, e.g. to align top left choose the top left checkbox.

Custom Align (Checkbox)

When active, allows you to use the Image X Position and Image Y Position settings to configure an alignment not provided for by the Image Alignment setting.

Options:

• _Enabled: The Image X Position and Image Y Position settings become editable, allowing you to configure custom image alignment.
• _Disabled: The Image X Position and Image Y Position settings are read only, showing the alignment set via the Image Alignment setting.

Image Size (Dropdown)

Set how the background image is sized, and if it repeats, within the layer.

Options:

• _Cover: Ensure the image covers the whole layer, even if some areas are not visible.
• _Contain: Ensure the full image is contained inside the layer and visible, even if some areas of the layer are empty.
• _Auto: Image displays at its actual dimensions, regardless of layer dimensions.
• _%: Set the image width, relative to the layer’s width.
• _px: Set the image width in pixels, independently of the layer’s width.
• _{Repeat X}: Tile the image horizontally within the layer.
• _{Repeat Y}: Tile the image vertically within the layer.

Image X Position (Number, percentage)

Shows the horizontal position of the image within the layer, as a percentage.

When the Custom Align setting is disabled, Image X Position is read only, showing the alignment settings drawn from the Image Alignment setting.

When Custom Align is enabled, Image X Position can be edited with a custom percentage value.

Image Y Position (Number, percentage)

Shows the vertical position of the image within the layer, as a percentage.

When the Custom Align setting is disabled, Image Y Position is read only, showing the alignment settings drawn from the Image Alignment setting.

When Custom Align is enabled, Image Y Position can be edited with a custom percentage value.

Image URL (Text)

Shows the URL of the currently selected image, and allows editing of the URL if needed.

Image Variant (Dropdown)

In the event there are multiple sized variants of the image, select which version to use.

Options:

• Lists each available version, e.g. “Original Source”, “Thumbnail Source”.

Clip (Toggle)

Set the background to be clipped into a shape, such as the shape of text on the layer.

If combined with setting Text Fill to Transparent, this can create the effect of filling in text with a background color or image.

Note that if a text stroke has been added via Design Mode -> Extra Style panel -> Text Stroke section, the width of that stroke will be included in the clipped area. In this case the clipped background can be made visible even if Text Fill is set to None.

Options:

• _None: Don’t clip the background.
• _Text: Clip the background into the shape of the text (on a text layer).

Text Fill (Toggle)

Set whether you want to override the fill color for text to make it transparent. Useful for allowing a clipped background color or image to be seen.

Options:

• _None: Don’t override text fill, leave default text color.
• _Transparent: Overrides the text fill color and make it transparent.

Container Line Height Section

Container Line Height (Number, pixels)

Set the line height to be applied to any child layers which have their Display set to Inline Block under Design Mode -> Layer Panel -> Layout Behavior section.

Note this does not refer to the line-height of any text inside a child layer, but rather to the line-height of the layer itself.

For example, if Container Line Height is set to 100px, each line formed by child layers will be at least 100px high, even if those child layers are themselves less than 100px high.

Options:

• _4px: Minimum. Smallest allowable container line height.
• _5000px: Maximum. Largest allowable container line height.

Border section

Use the settings in this section to add and style borders around layers.

Border (Color Swatch)

Displays the currently applied Border color. Click the color swatch ¹ to open a Color Picker ² and set a new Border color.

Border Style (Dropdown)

Set the style of border to surround the layer with.

Options:

• _None: No border applied.
• _Solid: A single, unbroken border.
• _Dotted: Dotted line border.
• _Dashed: Dashed line border.
• _Double: Two unbroken lines border
• _Groove: A 3D grooved border.
• _Ridge: A 3D ridged border.
• _Inset: A 3D inset border.
• _Outset: A 3D outset border.

Border Radius (Number, pixels)

Set rounding on each corner of the layer.

Note that even if you don’t have a visible border, the Border Radius will still round the corners of the layer.

To set all corners to the same radius, toggle the lock icon before making changes.

Border Width (Number, pixels)

Set the width of a visible layer border.

To set all sides to the same border size, toggle the lock icon before making changes.

Spacing section

Use the settings in this section to control the spacing around the inside and outside of layers.

Margin

Set margins for the layer, i.e. spacing around the outside.

To set margins to the same size on all sides, toggle the lock icon before making changes.

Padding

Set padding for the layer, i.e. spacing around the inside.

To set padding to the same size on all sides toggle the lock icon before making changes.