Call to Action 3.0

Version 3 of Call to Action. Not really compatible with v1 and v2 as it is a very different visual design with several text call out areas a clear image area which is perfect for a transparent image that jumps out of the page.

This control has the option of TWO actions, the 2nd one will pickup the sites secondary colours where the primary button can pickup the sites primary button colour (default) and the styles (optional) button colour as a priority if there is one.

Key Features

• Bold Styling: Often uses strong colors and large buttons to stand out.
• Clear Messaging: Includes concise, action-oriented text like "Sign Up Now" or "Get Started."
• Customisable: Can be tailored with different sizes, colours, and layouts to suit the website
• Responsive: Adapts to various screen sizes for consistent user experience.
• Round Image automatically: Add Custom CSS "rounded-circle" if you want to auto crop the image into a circle. We recommend using a transparent image so it looks like the image is coming off the page.

Examples

• Landing Pages: Encourage users to sign up or learn more.
• Product Pages: Drive customers to make a purchase or add an item to their cart.
• Newsletter Signup: Prompt users to subscribe to updates or content.
  
  🪄 Design Tips

1. Image Format:
   Always use transparent PNGs. Circular or orbit-style graphics work beautifully (like the one above).
   Recommended size: 800×800px or larger.
2. Layout:
   On desktop, image appears on the right.
   On mobile, the image flows below the text automatically.
   No border radius required — transparency keeps it soft and adaptive.
3. Colors:
   The first (left) button adopts your site’s primary color.
   The second (right) button inherits your secondary or default theme button style automatically.
   You don’t need to set these manually.
4. Spacing & Padding:
   Keep images with at least 40px padding around the circle edge.
   Headings should be short and strong — 3–6 words is ideal.
   Avoid long body text; this is a conversion block, not a blog intro.
5. Theme Matching:
   Works best on soft color panels (lavender, light blue, pale grey).
   For dark backgrounds, ensure your transparent PNG has light glows or white accents.

✅ Pro Tips for Consistency

• Duplicate the block for A/B testing (different images or copy).
• Use Custom Styles in Mition to quickly recolor backgrounds per theme.
• Keep both buttons short — one action per button (e.g. Learn More, Contact Us).