Map Section
The Map block shows a stylized map with location pins that reveal contact details when clicked.
Purpose
Great for businesses with multiple offices or a global presence. Each pin can show a city, email, phone and a small image.
Available layouts
1 layout:
| Layout | Description |
|---|---|
| Pin Popups (default) | A decorative map background with clickable location pins. |
Field reference
| Field | What it does |
|---|---|
| Map background | The map image (light or dark version). |
| Padding top | Spacing above the map. |
| Theme | Dark/light. |
| Map pins (repeater) | Each pin: city, email, phone, thumbnail, position class. |
Pin positions
Each pin uses a position class (e.g. tp-map-pin-1 to tp-map-pin-4) to place it on the map. Assign different positions so pins don't overlap.
Best practices
- Match the map background to your theme (use the dark version in dark mode).
- Use clear city names so visitors recognize locations.
- Add a small photo of each office for a personal touch.
Example
Map pins:
- New York —
tp-map-pin-1, with email and phone. - London —
tp-map-pin-2. - Singapore —
tp-map-pin-3.
Frontend result
A decorative world/region map with clickable pins. Clicking a pin reveals that location's details.
Screenshot: Page Builder → Map Section (Pin Popups) on the live site
Troubleshooting & common mistakes
| Problem | Fix |
|---|---|
| Pins overlap | Give each pin a different position class. |
| Map looks wrong in dark mode | Use the dark map background. |
| Pin details empty | Fill in city/email/phone for each pin. |
Common mistakes: all pins on the same position, mismatched map background vs. theme.
Note For a real interactive Google Map (with zoom/streets), use the Contact Section Map layout or the Google Map widget instead. The Map Section is a stylized graphic, not a live Google map.
➡️ Next: Feature List Section