Skip to main content

CTA

A Call to Action (CTA) widget highlights important content with a large image or video, a title, supporting text, and one or more buttons or links.

Use this widget to guide visitors to specific pages, campaigns, or promotions. It is typically used near the top of a landing or homepage to direct your visitor’s attention.

note

Custom widgets are described as they are defined for our standard (Mosaic) front-end theme. If the description does not match what you see on the screen, this is due to further customization that has been carried out specifically for your webshop's theme.

Layout​

The following settings control how the widget's content is positioned on the page.

  • Under Columns, specify the maximum width of the widget in 1/12 of the total width of the page.
    • Choose 12 for full width (no offset).
    • Choose 10 to center the content by adding a horizontal offset.
    • Choose 8 to add even more offset for a narrower layout.
  • Under Image placement desktop, choose the placement of the image relative to the content, for the desktop medium: Left, Right, Top or Bottom.
  • Under Image placement mobile, choose the placement of the image relative to the content, for the mobile medium: Top or Bottom.
  • Check Place buttons at the bottom to force any buttons to the bottom of the widget.
  • Set the Background color of the entire widget. The choice that you make is translated to an actual color on the basis of your front-end's style sheet.

Media​

The following settings let you add visual content to the widget using an image, a video, or both. At least one is required. If both fields are blank, nothing will be shown.

  • Select the Image to use as the primary visual element for the CTA. This is required if no video is selected.
  • If you have selected an image, under Image Alt enter a textual alternative to the image (for reasons of accessibility).
  • If you want to include a Video, select its source (None, CMS Video, YouTube or Vimeo). This is required if no image is selected.
  • To include a video hosted at YouTube or Vimeo, enter its ID under What is the ID of the Video? (YouTube or Vimeo). Note: Do not enter the full URL. Only the video ID must be entered.

Content​

The following settings let you add a heading and body text to support your visual message.

  • The Title will appear as the main heading of the CTA.
  • The Content is the text that will be displayed below the title.

Buttons​

You can add multiple buttons to the CTA. Click + ITEM for every button you want to add.

note

You can delete the most recently added button by clicking - LAST ITEM. Any button also has a button at the end of the list of fields with the word ITEM and an icon of a trash can: click this to delete the button.

Each button has the following settings.

  • If you enter a Button text, this appears inside the button or link.
  • If you specify a Font Awesome Button icon, this is shown inside the button.
  • If Button Icon Right is checked, the icon is displayed following the button text instead of before.
  • Set the Color of the button. The choice that you make is translated to an actual color on the basis of your front-end's style sheet.
  • If you enter the target of a Link, clicking the button will take the user there. This can be a webshop page or an external URL. If Open link in a new tab is checked, the link will open in a new browser tab.