Skip to content
English - United States
Nous Contacter
  • There are no suggestions because the search field is empty.

How to add a new button to an existing block

Optimize your calls to action to boost bookings

Key points:

  • Add a button to an existing block in Webflow.
  • Customize the button's style and link.
  • Preserve the visual consistency of the hotel site.

Adding a new button to an existing section (such as a banner, map, or text box) is a simple process in Webflow. This allows you to enhance your calls to action (CTAs), which are essential for encouraging visitors to book or explore your offers. Here's how to do it effectively without altering your site's layout.

1. Select the correct block in Webflow Designer

Before adding the button, identify the area where you want to insert it:

  • A welcome section (e.g., “Book your stay”).
  • A room card (e.g., “See details”).
  • A promotional banner. 💡 Tip: Click on the parent element in the hierarchy (Navigator) to insert the button at the correct level — next to the text or below an image, depending on the layout.

2. Add the button from the “Add” panel

In Webflow Designer:

  1. Press the A key to open the Add Elements panel.
  2. Drag the Button element into your existing block.
  3. Position it where desired (below a paragraph, next to an image, etc.).

💡 Tip: If the block is in Flexbox, activate “Wrap Children” so that the button automatically wraps to the next line on mobile.

3. Customize the button style

Once the button is added:

  • Rename its CSS class (e.g., “Main Button” or “Secondary CTA”).
  • Adjust the style in the Style panel (S): color, typography, rounded corners, shadows.
  • Use existing styles to ensure design consistency (e.g., duplicate the site's "Button" class). 💡 For hotels, prioritize clear action verbs: "Book," "Discover rooms," "View offers."

4. Add a link to the button

Click on the button → Settings tab (⚙️) → enter the link:

  • To an internal page (e.g., /rooms, /contact).
  • To an external URL (e.g., booking engine, Google Maps).
  • Or to an internal anchor (e.g., #contact) to scroll down the page. 💡 Enable “Open in new tab” if the link points to an external site (such as a booking platform).

5. Check the responsive rendering

Test the display on the views:

  • Tablet, Mobile Landscape, Mobile Portrait.

  • Adjust the margins and sizes if the button overflows or shifts. 💡 Use max-width: 100% so the button automatically adapts to the block width.

6. (Optional) Add an interaction to the button

To make the button more engaging:

  • Select it → Interactions tab (⚡).
  • Add a simple effect: a slight rise, fade, or color change on hover. 💡 Keep it simple: subtle animations enhance the perceived quality without cluttering the page.

Best practices for hotel websites

  • Always include a visible CTA in each section (“Book Now”, “Call”, “Explore Our Suites”).
  • Use contrasting yet elegant colors, in accordance with your brand guidelines.
  • Check that the buttons work on mobile: they should be large and spaced apart for touchscreens.

Conclusion

Adding a new button to an existing block on Webflow is a quick and effective way to strengthen your calls to action. By respecting the design hierarchy and maintaining overall styles, you ensure a smooth, elegant, and high-performing experience for your visitors—while increasing your chances of conversion and direct booking.