Webflow sync, pageviews & more.
NEW
Answers

How can I create and style two side-by-side buttons in Webflow without using CSS, so that the template can be updated in Mailchimp and sent to Mandrill without the CSS being overwritten?

In order to create and style two side-by-side buttons in Webflow without using CSS, you can utilize the built-in features and functionality of the platform. Here's a step-by-step guide:

1. Create a container: Start by adding a container element (e.g., div block) to your Webflow project. Set its width to 100% or any desired value to fit your layout.

2. Add a row: Inside the container, add a row element (also a div block) by using the Webflow grid system. This will serve as the parent element for your buttons.

3. Configure the row: Select the row element and set its display property to "flex" from the Styles panel. This will enable flexbox functionality, allowing you to arrange the buttons side by side.

4. Add buttons: Within the row, add two button elements by dragging and dropping the button component from the Add Panel. Customize the button text, colors, and other properties as desired.

5. Position buttons: By default, the buttons will align vertically within the row. To correct this and make them appear side by side, select each button element individually and set its flex property to "1" from the Styles panel. This will distribute the available space equally between the buttons.

6. Additional styling: You can further customize the buttons by adjusting their padding, margin, borders, and other properties within the Styles panel. Experiment with different options until you achieve the desired look.

Now, when you export the template to Mailchimp and send it via Mandrill, the buttons should retain their side-by-side layout without the need for custom CSS. Webflow generates clean HTML and inline CSS, ensuring that the styling remains intact. However, keep in mind that some email clients might have limited support for certain CSS properties, so it's always a good idea to test your email template across different devices and platforms to ensure consistent rendering.

Remember, while Webflow offers a no-code design and styling environment, a basic understanding of HTML and CSS can provide you with more control and flexibility in crafting your designs.

Rate this answer

Other Webflow Questions