Basics Settings

ID

Define one or more id names for the column.

Class

Define one or more class names for the column. Separate multiple classes with spaces.

Newsletter Subscriber ^Pro is a simple component, which offers a simple name & email sign-up form for your newsletter and notifying you by email for any new subscription.

Basics Settings

Label

Define a name to easily identify this element inside the Theme-Builder.

Position

Position the component in the normal content flow but with an offset relative to itself.

Left

If position: relative; - the left property sets the left edge of an element to a unit to the left/right of its normal position.
If position: absolute; - the left property sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor. (e.g. 20% or 50px ...)

Right

If position: relative; - the right property sets the right edge of an element to a unit to the left/right of its normal position.
If position: absolute; - the right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor. (e.g. -20% or 50px ...)

Top

If position: relative; - the top property makes the element's top edge to move above/below its normal position.
If position: absolute; - the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor. (e.g. -20% or 50px ...)

Bottom

If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.
If position: absolute; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. (e.g. 10% or 50px ...)

z-index

The z-index property specifies the stack order of an element. Z-index only works on positioned elements (position: absolute, position: relative).

Show

Select one of the following options to show the element for screens larger than the specified width.

Hidden

Select one of the following options to hide the element from screens larger than a specified width.

Class

Define one or more class names for the element. Separate multiple classes with spaces.

ID

ID Selector for the element.

Notification Recipient

The recipient of the subscription notification mail.

From Email

The email of the subscription mail's sender.

Anti-spam

Enable this to use the anti-spam.

Save Email List

If this is 'Yes', then every subscription is written to a file. (.txt or .csv file)

Title Settings

Title Show

When set to 'Yes', this option will enable component title in front-end.

Title

Enter text which will be used as Component title.

Title HTML Tag

Choose a HTML-Tag for the title.

Font Size

Set Title font size for this selector.

Font Weight

Set Title font weight for this selector.

Title Style

Choose a title style modifier.

Title Color

Choose a Title color.

Subtitle Show?

Yes or No.

...

...

Background Settings

Custom Background

When set to 'Yes', you can set different background options. (Background images, different Blendmodes, Custom color)
When set to 'SVG', you can use your own SVG backgrounds. (Learn more)

Module Background

Choose a default background color.

Inverse Color

Select the 'light' class to improve the visibility of objects on dark backgrounds in a light style. When using a dark style, add the 'dark' class to elements on a light background.
The 'Primary' and 'Secondary' (Background Settings) option are extending the inverse style from the Inverse component automatically. If you want to prevent this behavior, for example because you are using cards in these sections, add this 'Preserve color' option.

Style Settings

Addon Padding

Choose a padding for the component.

Content

Write short and pointed content for the componet.

Layout

Choose a Layout.

Button Text

Enter text used as submit button text.

Button Size

Select button size.

Button Type

Set button type.

Alignment

Choose a type of button alignment.

Animation Settings

Scrollspy Animation

The Scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears in the viewport for the first time, you can trigger a smooth animation to fade in the element.

Background Image Parallax?

Yes or No.

The Gallery Gallery ^Pro Component can be used to quickly create a responsive and stylish image gallery on your site. Select various layouts like Grid or Masonry, choose column width, column spacing, lightbox options and more.

Basics Settings

Label

Define a name to easily identify this element inside the Theme-Builder.

Position

Position the component in the normal content flow but with an offset relative to itself.

Left

If position: relative; - the left property sets the left edge of an element to a unit to the left/right of its normal position.
If position: absolute; - the left property sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor. (e.g. 20% or 50px ...)

Right

If position: relative; - the right property sets the right edge of an element to a unit to the left/right of its normal position.
If position: absolute; - the right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor. (e.g. -20% or 50px ...)

Top

If position: relative; - the top property makes the element's top edge to move above/below its normal position.
If position: absolute; - the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor. (e.g. -20% or 50px ...)

Bottom

If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.
If position: absolute; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. (e.g. 10% or 50px ...)

z-index

The z-index property specifies the stack order of an element. Z-index only works on positioned elements (position: absolute, position: relative).

Show

Select one of the following options to show the element for screens larger than the specified width.

Hidden

Select one of the following options to hide the element from screens larger than a specified width.

Class

Define one or more class names for the element. Separate multiple classes with spaces.

ID

ID Selector for the element.

Title Settings

Title Show

When set to 'Yes', this option will enable component title in front-end.

Title

Enter text which will be used as Component title.

Title HTML Tag

Choose a HTML-Tag for the title.

Font Size

Set Title font size for this selector.

Font Weight

Set Title font weight for this selector.

Title Style

Choose a title style modifier.

Title Color

Choose a Title color.

Subtitle Show?

Yes or No.

...

...

Background Settings

Custom Background

When set to 'Yes', you can set different background options. (Background images, different Blendmodes, Custom color)
When set to 'SVG', you can use your own SVG backgrounds. (Learn more)

Module Background

Choose a default background color.

Inverse Color

Select the 'light' class to improve the visibility of objects on dark backgrounds in a light style. When using a dark style, add the 'dark' class to elements on a light background.
The 'Primary' and 'Secondary' (Background Settings) option are extending the inverse style from the Inverse component automatically. If you want to prevent this behavior, for example because you are using cards in these sections, add this 'Preserve color' option.

Style Settings

Addon Padding

Choose a padding for the component.

Show Pagination

Yes or No.

Show User Limit

Show User Limit Pagination Yes or No. Make sure that the 'Item Limit' value is set to 11 or over.

Masonry Grid

If grid cells have different heights, a layout free of gaps can be created by choose 'Yes'.

Grid: Match height

Choose 'Yes' to match the height of the direct child of each cell.

Tablet Grid Settings

Select a Element Width for Tablets

Desktop Grid Settings

Select a Element Width for Desktop

TV's Grid Settings

Select a Element Width for TV's

Grid Gutter

The Grid component comes with a default gutter that is decreased automatically from a certain breakpoint usually on a smaller desktop viewport width.

Animation Settings

Scrollspy Animation

The Scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears in the viewport for the first time, you can trigger a smooth animation to fade in the element.

Background Image Parallax?

Yes or No.

Items Settings

Gallery Items

Add or remove gallery items.