10. Map

Learn how to add an interactive map to your contact page, customize its location, zoom level, filters, and size to fit your needs, ensuring a visually pleasing display on all devices.


Your contact page serves as a gateway for your customers to reach you. Adding a map to your contact page can enhance its visual appeal and usability. In this guide, we'll walk you through the simple steps of adding and customizing a map on your webpage using Stylie's web builder.

  1. Add a Map Element

    Begin by navigating to the 'Add Elements' section. Look for the 'Map' element, click on it, and, while holding the click, drag and drop it into the desired area on your webpage.

  2. Interact and Customize

    Click on the map to interact with it. The first step in customization is to change the map's location. Navigate to the options toolbar located on the left and type in the address of the location you wish to display on the map.

  3. Adjust the Zoom and Apply Filters

    You can adjust the map's zoom level to control how much detail is displayed. If you wish to give your map a unique aesthetic, you can apply various filters to change its colors and alignment.

  4. Modify the Size

    To fit the map seamlessly into your design, adjust the width and height as per your needs. Alternatively, simply click on the map and drag the handlebars to resize it.

  5. Check on Multiple Displays

    Always remember to ensure your map looks good on all displays, including desktop, tablet, and mobile. This step is crucial for maintaining a professional appearance and a seamless user experience across all devices.

The integration of a map on your contact page offers more than just aesthetics; it enhances user interaction and gives your customers an easy way to locate you. Stylie's web builder makes this addition a breeze, offering you an easy and intuitive way to customize your online presence.

👆 You’re all caught up