Extra Style Panel

• Extra Style Panel
  • Module Background Section
  • Overlay Section
  • Module Shadow Effect Section
  • Preloader Animation Section

Extra Style Panel

The Extra Style panel is accessed by going to the Module Editor, then the Top Bar, then clicking the Settings button to open the Settings Sidebar, and finally clicking Extra Style.

In the Extra Style panel configure the module’s background, an optional pattern overlay, a drop shadow effect, and a loading preloader animation.

Module Background Section

In the Module Background section configure the module’s background as a solid/gradient color or an image.

Image (Toggle)

Sets whether the module background is a solid/gradient color or an image.

Options:

• _On: The module background is an image.
• _Off: The module background is a solid color or gradient.

Color (Color Swatch)

Sets the solid color or gradient used for the module background.

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 image within the module. This is useful when the image has a different aspect ratio to the module, allowing you to control which portion of the image is visible.

The 3×3 grid represents the corners and edges of the module, 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 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 module, 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 module, 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 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”.

Overlay Section

In the Overlay section configure a repeating pattern overlay drawn on top of the module background.

Style (Dropdown)

Sets the pattern style used for the overlay.

Options:

• _{No Overlay}: No pattern overlay is drawn.
• _{Dotted Small}: Draws a pattern of small dots.
• _{Dotted Medium}: Draws a pattern of medium sized dots.
• _{Dotted Large}: Draws a pattern of large dots.
• _{Horizontal Small}: Draws closely spaced horizontal lines.
• _{Horizontal Medium}: Draws medium spaced horizontal lines.
• _{Horizontal Large}: Draws widely spaced horizontal lines.
• _{Vertical Small}: Draws closely spaced vertical lines.
• _{Vertical Medium}: Draws medium spaced vertical lines.
• _{Vertical Large}: Draws widely spaced vertical lines.
• _{Circles Small}: Draws a pattern of small circles.
• _{Circles Medium}: Draws a pattern of medium sized circles.
• _{Diagonal 1}: Draws diagonal lines in one direction.
• _{Diagonal 2}: Draws diagonal lines in an alternate angle.
• _{Diagonal 3}: Draws diagonal lines in a further alternate angle.
• _{Diagonal 4}: Draws diagonal lines in a further alternate angle.
• _Cross: Draws a crosshatch pattern.

Size (Number)

Sets the scale of the overlay pattern.

Dot Color (Color Swatch)

Sets the color of the dots or lines that make up the overlay pattern.

Gap Color (Color Swatch)

Sets the color of the space between the dots or lines that make up the overlay pattern.

Module Shadow Effect Section

In the Module Shadow Effect section apply a drop shadow to the module.

Shadow (Dropdown)

Sets the drop shadow style applied around the module.

Options:

• _{No Shadow}: No drop shadow is applied.
• _{Type 1}: Applies the first preset drop shadow style.
• _{Type 2}: Applies the second preset drop shadow style.
• _{Type 3}: Applies the third preset drop shadow style.
• _{Type 4}: Applies the fourth preset drop shadow style.
• _{Type 5}: Applies the fifth preset drop shadow style.

Preloader Animation Section

In the Preloader Animation section configure a loading animation shown while the module initialises.

Preloader Type (Dropdown)

Sets the animation style shown as a preloader while the module loads.

Options:

• _{No Preloader}: No preloader animation is shown.
• _{Type 1} through _{Type 16}: Applies the corresponding preset preloader animation style.

Color (Color Swatch)

Sets the color of the preloader animation. Not every preloader style uses a color, which is why this setting is hidden for Type 1 and Type 6.