Addon Settings: Global

When you use a specific addon, you’ll find there are a few common settings that are available to all addons. The settings described in this section are found in every addon of SP Page Builder. 

To use any available addon of SP Page Builder, you just need to drag that particular addon and drop in the position where you want to use it on your webpage. Please note, you need to create a row or a column before using any addon.

Addon Control Bar

All the settings of the addon control bar are described following (starting from the left).

Move Addon: Click and hold this icon to drag and drop the addon to your desired place. 

Edit Addon: Click this icon to customize the current addon, it will open up the relevant addon settings on the left sidebar.

Clone Addon: You can take advantage of this option when you need to create multiple addons with almost the same content. It will speed up your working time. Use this icon to make an exact same copy of any addon. 

Save Addon: It's another great feature to speed up your working time. When you need to use the same addon with the same settings multiple time, you can Save any addon and reuse that later. The addons you save will be found under Tools > My Addons on the frontend. 

Disable Addon: Clicking this icon will disable this particular addon. Clicking it again will re-enable the addon.

Parent Column: It will open up the respective column settings for the addon. With this option, you can add an inner row, change column settings, disable or delete the column. 

Delete Addon: As the name suggests, Click here to delete any addon. There is no trash, addon is removed from the database.

Addon Options

SP Page Builder lets you customize every addon the way you want. All the addon customization options are available on the left sidebar of the Frontend Editor. These options are categorized into four sets of settings. They are presented with a tabbed view. 

• General
• Style
• Advanced
• Interaction

General Tab

The settings offered in the General Tab are specific to each addon. A detailed description can be found on the addon specific documentation section. 

Style Tab

The styling settings offer additional design customization options. With every addon, you get the options to tweak the content styling. However, the settings offered in the Style tab override those settings. Following is the list of all available styling options. 

Text Color: You can select the color of your addon's text content. The hassle-free color chooser will help you determine color more rapidly.

Link Color: If you added any URLs in the addon, you can determine the color of the link. The change you make will be applied throughout the entire addon.

Link Hover Color: One of the cool styling effects is the hover effect. Determine the color while hovering over the URLs that you’ve added.

Enable Background Options:  This will enable you to customize the background of your addon with various styling options. Upon enabling background options you can add the following options.

• Color: If you wish to add a solid color to the addon background, select this option and pick the color. 
• Image: When you want to use a custom image for the addon background, you can use this option to upload your own image or paste an image URL from an external source. Doing so will enable the following options. 
• Background Repeat: You can define if you want to have a repetitive background. 
• Background Size: Choose how you want to crop the background image. 
• Background Attachment: You can define whether a background image scrolls with the rest of the page or not. 
• Background Position: You can define the starting position of the background image.
• Gradient: You can even apply gradient effect to an addon background. Gradient Type – Linear and Radial are available. A linear gradient applies the gradient by an axis. It’s a linear line. The effect is applied with a Gradient Angel, which defines the starting point. And two colors applied at two ends. Color 1 starts at the defined angle point and Color 2 starts after the Color 1 endpoint. The Radial Type provides a circular gradient where the angle defines the starting point of the circle. 

Overlay Options: You can add an overlay effect to any addon or the entire row. The effect offers three overlay types and the Blend Mode. The feature is only available when you choose an image as the background of any addon/row. Read more about the Bland Mode. 

Use Border: You can add a border around the addon. In order to do that, you need to enable this feature. It lets you set solid, double line, dotted & dashed border. You can set the color, size, and border-radius according to your needs. 

Box-Shadow: You can apply shadow to the addon background using this feature. The following options are related to Box-shadow

• Color: Lets you choose the color of the shadow.
• Horizontal offset: Lets you define the length of the shadow of X-axis.
• Vertical offset: Lets you define the length of the shadow of Y-axis.
• Blur: Lets you control the blurriness of the shadow.
• Spread: Lets you control how far the shadow will spread.

Animation: To make the addon more interesting, you can add an animation effect. It is disabled by default, after enabling this feature, choose an effect from the dropdown list. Once you choose your desired one, start making modifications as you seem fit. The units are in milliseconds. 

Note: Duration is how long the animation will run and Dealy is the waiting time before the animation starts loading. 

Custom CSS: You can add custom CSS to any addon. In case you need to override the current addon styling, you can write down your own CSS in this field.

Advanced Tab

The set of settings offered in this section are mostly position-based. It also allows you to hide the content of this specific addon to hide in certain devices. Following is the list of all available styling options. 

Enable Custom Position: This allows you to define a custom position for the addon. Caution: custom positioning is not a good practice for responsive web design and should not be used too frequently. If enabled, you’ll have the following features: 

• Select Position: Let’s you choose a position from Absolute, Fixed, and Relative.
• From X-axis: You can move the addon horizontally, positive values refer to the right and negative refers to the left position. The feature is responsive which means you can set different values for each device type. 
• From Y-axis: From X-axis: You can move the addon vertically, positive values refer to the top and negative refers to the bottom position. The feature is responsive which means you can set different values for each device type. 
• Addon CSS Z-index: If you want to change the Z-index of the addon within the row/section, change this value.
• Section CSS Z-index: if you need to change the Z-index of the addon outside the row/section, change this value.

Custom Addon Width: It allows you to change the width of the addon (in %), regardless of the width of the column, i.e. you can generally set it to be narrower. Tip: the addon custom width is aligned to left by default, to change its position, and to center addon please use margin options, use those values:  0px auto 0px auto

Hide Content: You can hide the addon for certain device types. Enabling Hidden on Desktop, Hidden on Template, or Hidden on Mobile will hide the addon content from that particular device type.   

Interaction tab

The documentation for interactions is available in a separate area of documentation.