The Teaser component is useful, but at first you may question how good it is when there is no styling attached to it. The way to style this component is to utilize the paintbrush icon, as well as edit the container component that you put the Teaser component in. A sort of combination of 2 components to create a unique experience.
This includes attaching a background image to the container component, and then putting the Teaser inside of that container, so the Teaser will respect the Container background. Let’s go over the steps to accomplish this.
Insert a Container component and attach the style “Edge-to-Edge”. Then put a Teaser component inside of that edge to edge container.
2. Once you have that in the correct format, add an image to the background of the container by clicking on the “Configure”/Wrench icon for the container itself.
Drag a photo from the side rail to the background image option within the container
You’ll notice that when you click “Confirm”, everything within the container takes the styling.
3. Now, click on the teaser component, and configure it. The first thing you would want to do before configuring the component, is to add the style “Center CTA”
Now, configure the available options for the component. You can ignore the Image option, and edit the last 2 tabs.
Enabling the call to action is important, that way you get a button
4. Now confirm by clicking the checkmark and view what the component looks like. Darker images tend to do better with the Teaser component, because by design, it changes the color of the text to white.
Remember, you’ll want to add a background image or color to the Container component, then put the Teaser component inside of the container.
©1994-2022 Cru. All Rights Reserved.
