Top
Customize Carousels
  • 16 Nov 2023
  • 3 Minutes To Read
  • Dark
    Light
  • PDF

Customize Carousels

  • Dark
    Light
  • PDF

Article Summary

Once you have created a Carousel and chosen a template, you can start to design and configure the Carousel.

Click a Carousel Slide to configure the following,

Header

  • Under the Header section, you can edit the Header text, font, font size, font weight, text alignment, text color, and bottom margin. You can also add user property to personalize the experience for your end user.
    image

  • You can align the Header to the top or bottom, add any content block, or delete the Header section using the action bar.
    image

Body

  • Go to the Body section. You can edit the text, change the font, font size, font weight, text alignment, text color, and bottom margin. You can also add user property to personalize the experience for your end user.
    image

  • You can align the Body text to the top or bottom, add any content block, or delete the Body section using the action bar.
    image

  • You can align the Divider to the top or bottom, add any content block, or delete the Divider using the action bar.
    image

Media

  • Under the Media section, you can click the Edit icon to add images to your Carousel Slide from your local drive and then configure the image size, alignment, and bottom margin.
    image
your title goes here

Whatfix Mobile supports .jpg, .png, .gif, and .svg file formats lesser than 100kB.

  • Enable the CLICK ACTION toggle to link any action to your image. Clicking the image triggers the action that you configure.
    click_action
Button Action Description
Dismiss When the user clicks the media, the Full Screen is dismissed from the app screen
External Link When the user clicks the media, they are routed to the URL that is attached to the media
Deep Link When the user clicks the media, they are routed to the app screen within the same app that is attached to the media
your title goes here

You can provide a name for the action you add to your media using which you can track the analytics on how many users are clicking the media.
click_events

  • You can align the Media to the top or bottom, add any content block, or delete the Media section using the action bar.
    image

Button

  • You can customize the button that appears on your Full Screen. You can choose to have one or two buttons, adjust the button width, alignment, height, radius, and the bottom margin.
    image

  • Click the BUTTON dropdown to customize the individual buttons. You can change the button color, stroke of the button outline, text, font family, font size, font weight, and button action. You can also add user property to personalize the experience for your end user.
    customize_button_drawer

The following are the Button Actions you can configure,

Button Action Description
Dismiss When the user clicks the button, the Carousel is dismissed from the app screen
Next When the user clicks the button, the Carousel moves to the next slide
Previous When the user clicks the button, the Carousel moves back to the previous slide
External Link When the user clicks the button, they are routed to the URL that is attached to the media
Deep Link When the user clicks the button, they are routed to the app screen within the same app that is attached to the media
  • You can align the Buttons to the top or bottom, add any content block, or delete the Buttons using the action bar.
    image

Layout

  1. Click the Layout option on the left, or the Edit icon.
    edit_icon_drawer

In the Layout section, you can do the following:

  • Add a Background Color to your Carousel Slide.
    carousel_layout_bg colour.png

  • Add a Close button to dismiss the entire Carousel.
    carousel_layout_close button.png

  • Add or remove Swipe ability, Arrows, and Progress dots in your Carousel.
    carousel layout.png

  1. Click Done.
    image

The Carousel you create is automatically saved.

your title goes here

Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.