Call To Action

The Call to Action widget helps you create engaging promotional sections with a headline, description, and button to encourage user interaction. You can customize the layout, background, typography, and hover effects to make it visually compelling and aligned with your site's design.

Content tab

Configure the main settings and content of the widget.

Call to Action widget Content Tab (Call to Action)

Call to Action

Skin

Defines the widget's appearance, either as a classic layout or a full-cover design.

Choose Image

Select an image from the library, use dynamic tags for auto-updating content, or upload it. You can also set captions and configure the following settings for the image:

  • Alt: Add alternative text to improve accessibility and SEO.
  • Title: Set a title attribute for a better user experience.
  • Loading: Choose between "lazy" or "eager" loading for performance optimization.
Position (Classic Skin)

Sets the alignment of the content within the classic layout.

Min Height (Classic Skin)

Determines the minimum height of the call-to-action section in classic skin.

Ribbon

Adds a customizable label or badge to highlight key messages.

Call to Action widget Content Tab (Content)

Content

Graphic Element

Choose to display no graphic, an image, or an icon alongside the content.

Choose Image (Image Graphic Element)

Select an image from the library, use dynamic tags for auto-updating content, or upload it. You can also set captions and configure the following settings for the image:

  • Alt: Add alternative text to improve accessibility and SEO.
  • Title: Set a title attribute for a better user experience.
  • Loading: Choose between "lazy" or "eager" loading for performance optimization.
Icon (Icon Graphic Element)

Select an icon from the Icon Library or add your own SVG.

View (Icon Graphic Element)

Choose between default, stacked, or framed views, with the option to set either a circular or square shape for stacked and framed styles.

Title & Description

Customize the heading and text content of the call to action.

Title Display

Set the predefined size of the title from S to XXL.

Title HTML Tag

Select the HTML tag for the title to define its semantic importance.

Button

Type

Choose a button style from widget default, default, primary, or secondary.

Button Text

Define the text displayed on the button.

Link

Set the URL or page to which the button should link.

Size

Adjust the size of the button from XS to XL.

Icon

Choose an icon to display within the button.

Icon Position

Set the icon's placement relative to the button text.

Icon Spacing

Define the spacing between the icon and text within the button.

Style tab

Customize the appearance and design of the widget.

Call to Action widget Style Tab (Box)

Box

Min-Height

Sets the minimum height of the Call to Action box.

Alignment

Defines the horizontal alignment of the content within the box.

Vertical Position

Adjusts the vertical placement of the content inside the box.

Padding

Controls the spacing between the content and the edges of the box.

Call to Action widget Style Tab (Icon)
Spacing

Sets the space around the icon.

Primary Color (Normal & Hover)

Set the icon's color for both normal and hover states.

Icon Size

Adjust the icon's size.

Icon Rotate

Set the icon's rotation angle from 0 to 360 degrees.

Secondary Color (Stacked & Framed View)

Set the icon color to create contrast.

Icon Padding (Stacked & Framed View)

Set the padding around the icon.

Border Radius (Stacked & Framed View)

Set the border radius for rounded corners.

Border Width (Framed View)

Control the thickness of the frame's border.

Call to Action widget Style Tab (Content)

Title

Spacing

Sets the space around the title for proper positioning.

Typography

Defines the font style, size, weight, and other text properties of the title.

Text Stroke

Adds an outline effect to the title text.

Description

Spacing

Adjusts the space around the description text.

Typography

Defines the font style, size, weight, and other text properties of the description.

Colors

Title Color (Normal & Hover)

Sets the title text color in normal and hover states.

Description Color (Normal & Hover)

Defines the description text color in normal and hover states.

Background Color (Normal & Hover)

Sets the background color of the widget in normal and hover states.

Call to Action widget Style Tab (Button)
Typography

Defines the font style, size, and weight of the button text.

Text Shadow

Adds a shadow effect to the button text.

Text Color (Normal & Hover)

Sets the text color of the button in normal and hover states.

Background Color (Normal & Hover)

Defines the button's background color in normal and hover states.

Border Color (Normal & Hover)

Sets the border color of the button in normal and hover states.

Border Width

Adjusts the thickness of the button's border.

Border Radius

Controls the roundness of the button's corners.

Box Shadow

Adds a shadow effect around the button.

Padding

Defines the inner spacing between the button's content and its edges.

Call to Action widget Style Tab (Hover Effects)
Hover Animation

Applies a motion effect when hovering over the widget.

Overlay Color (Normal & Hover)

Sets a color overlay for the widget in normal and hover states.

CSS Filters (Normal & Hover)

Applies visual effects like blur, brightness, or contrast in normal and hover states.

Blend Mode

Determines how the widget blends with the background.

Transition Duration

Defines the speed of hover effects and animations.

Advanced tab

Access advanced layout, motion, and custom CSS options.

Advanced Tab Layout
Margin

Define the external space around the widget for separation from adjacent elements.

Padding

Set the internal spacing within the widget to control the arrangement of its content.

Width

Specify the widget's width behavior: Full Width, Inline, Custom, or Calculate.

Full width
  • Vertical align: Set the vertical alignment to start, center, end, or stretch.
  • Size: Define the size as none, grow, or custom to determine widget dimensions.
Inline
  • Vertical align: Set the vertical alignment to start, center, end, or stretch.
  • Size: Define the size as none, grow, or custom to determine widget dimensions.
Custom
  • Custom Width: Set the width in pixels, percentage, or viewport width (vw).
  • Vertical align: Set the vertical alignment to start, center, end, or stretch.
  • Size: Define the size as none, grow, or custom to determine widget dimensions.
Calculate
  • Calc: Use calculations like 100% - 20px to dynamically define the width.
  • Min Width: Set a minimum width in pixels, percentage, or viewport width (vw).
  • Vertical align: Set the vertical alignment to start, center, end, or stretch.
  • Size: Define the size as none, grow, or custom to determine widget dimensions.
Order

Control the widget's order using start, end, or custom values.

Position

Choose default, absolute or fixed positioning for the widget.

Absolute
  • Horizontal Orientation: Determines the element's horizontal alignment within its nearest positioned ancestor.
  • Offset: Specifies the distance between the element and the left or right edge of its containing block.
  • Vertical Orientation: Sets the element's vertical alignment within its nearest positioned ancestor.
  • Offset: Defines the space between the element and the top or bottom edge of its containing block.
Fixed
  • Horizontal Orientation: Controls the element's horizontal alignment relative to the browser window.
  • Offset: Adjusts the distance between the element and the left or right edge of the viewport.
  • Vertical Orientation: Manages the element's vertical alignment relative to the browser window.
  • Offset: Defines the space between the element and the top or bottom edge of the viewport.
Z-index

Set the stacking order of the widget relative to other elements.

CSS ID

Assign a unique CSS ID for custom styling or interaction.

CSS Classes

Add custom CSS classes for targeted styling via external stylesheets.

Element Cache

Improves loading times by storing a static version of this element.

Advanced Tab Motion Effects
Scrolling Effects

Enhance elements with various dynamic effects triggered by the user's scrolling behavior.

  • Vertical Scroll: Configure the scroll direction, speed, and viewport range for vertical scrolling effects.
  • Horizontal Scroll: Set the scroll direction, speed, and viewport range for horizontal scrolling effects.
  • Transparency: Adjust the transparency based on the direction, level, and viewport range.
  • Blur: Apply a blur effect with customizable direction, level, and viewport range.
  • Rotate: Rotate the element using direction, speed, and viewport settings.
  • Scale: Scale the element with direction, speed, and viewport controls.
  • Apply Effects on: Choose whether to apply scrolling effects on desktop, tablet, or mobile devices.
  • Effects Relative to: Define whether the effects are relative to the default container, the viewport, or the entire page.
Mouse Effects

Enable mouse based effects for added interactivity.

  • Mouse Track: Adjust the direction and speed of the effect as the user moves the mouse across the page.
  • 3D Tilt: Enable 3D tilt effects with controllable direction and speed for a more immersive experience.
Sticky Effects

Fix elements at the top or bottom of the viewport as the user scrolls for persistent visibility.

  • Sticky on: Apply sticky effects on desktop, tablet, or mobile devices.
  • Offset: Set the offset in pixels to trigger the sticky effect after scrolling.
  • Dynamic Offset: Use a CSS selector to dynamically set the offset based on other elements on the page.
  • Effects Offset: Configure the pixel offset to control when additional effects apply.
  • Stay in Column: Choose whether the sticky element remains within its column during scrolling (yes or no).
  • Hide on Scroll: Set the offset and transition duration for hiding the sticky element when scrolling down.
Entrance Animation

Apply predefined animations to elements when they appear on screen.

  • Fading: Elements gradually fade in or out of view.
  • Revealing: Create smooth reveal effects as elements come into view.
  • Sliding & Revealing: Combine sliding motion with reveal effects.
  • Scaling & Revealing: Adjust the size of elements as they are revealed.
  • Zooming: Apply zoom in or out effects during element appearance.
  • Bouncing: Elements enter with a bouncing motion for attention-grabbing effects.
  • Sliding: Elements slide into view from different directions.
  • Rotating: Apply rotation effects as elements enter or leave the viewport.
  • Attention Seekers: Highlight elements with exaggerated, noticeable animations.
  • Specials: Unique animations for elements that require special effects.
Advanced Tab Transform
Opacity

Adjust the transparency level of the element to create fade effects during normal or hover states.

Rotate

Rotate the element along the X, Y, or Z axes for dynamic visual effects. Use deg (degrees) values or apply 3D rotation.

Offset

Shift the position of the element horizontally (X-axis) or vertically (Y-axis) to control its exact placement within the layout.

Scale

Resize the element, with the option to keep proportions (yes or no) and adjust the scale factor to enlarge or shrink the element.

Skew

Skew the element along the X and Y axes to tilt its appearance.

Flip Horizontal/Vertical

Flip the element horizontally or vertically by selecting the anchor points (X: left, center, right; Y: top, center, bottom) for precise control over the flip transformation.

Trigger by (On hover)

Choose whether the hover transformation is triggered by interaction with the widget, column, or section.

Transition Duration (On hover)

Set the time duration in milliseconds that the hover transition effect takes to complete.

Transition Delay (On hover)

Specify a delay in milliseconds before the hover transition effect begins.

Advanced Tab Background
Background Type

Select the background type: None, Classic, or Gradient.

Classic
Color
Set a solid background color to provide a consistent base for your design.
Image
Upload an image to use as the background. Additional settings include:
  • Loading: Choose whether to load the background image lazily or immediately.
  • Position: Define the image's position within the background (e.g., center, top-left).
  • Attachment: Set the background image to scroll with the page or remain fixed.
  • Repeat: Determine if the image repeats or stays single across the background area.
  • Size: Control the size of the background image, such as cover, contain, or custom dimensions.
Backdrop Filters
Apply visual filters to the background, such as blur, brightness, or contrast, enhancing its appearance.
Transition Duration (On hover)
Set the time duration in milliseconds that the hover transition effect takes to complete.
Gradient
Color
Select the primary color for the gradient background.
Location
Define the starting position of the primary color in the gradient effect.
Second Color
Select the secondary color to blend into the gradient.
Location
Set the starting point of the secondary color within the gradient.
Angle
Adjust the angle at which the gradient flows (e.g., horizontal, vertical, diagonal).
Backdrop Filters
Apply visual filters to the gradient background for added depth and effects.
Transition Duration (On hover)
Set the time duration in milliseconds that the hover transition effect takes to complete.

Advanced Tab Border
Border Type

Define the border style of the element.

Border Width

Set the thickness of the element's border.

Border Color

Define the color of the element's border.

Border Radius

Adjust the corner roundness of the element.

Box Shadow

Apply shadow effects to add depth to the element.

Advanced Tab Visibility
Responsive Visibility

Control the display of elements across different devices by selectively hiding them on desktop, tablet, or mobile.

Scheduled Visibility

Set the section's visibility based on specific schedules.

Customer Group Visibility

Control section visibility based on customer groups.

Advanced Tab Custom CSS
Custom CSS

Apply custom CSS to style the widget beyond the default settings.

Note: This requires CSS knowledge—use carefully, as incorrect syntax can impact other areas of the site.

/* For main element */
selector { 
  color: red; 
}

/* For child element */
selector .child-element { 
  margin: 10px; 
}

/* Or use any custom selector */
.my-class { 
  text-align: center; 
}

If you want to learn the basics of CSS, W3Schools is a great resource for that.

© WebshopWorks - Professional PrestaShop Addons