Location Grid Alpha
overview
A versatile, dynamic map frame with markers and a locations slider.
Available for:
Figma
Bricks
Gutenberg
Overview
Contact Grid Alpha is a perfect frame for any business with multiple locations, service areas, or any website that needs to map locations with markers.
The map is an SVG that can be swapped out for any map: a country map, a state map, or even a single city map. You can also change the map’s color from the builder settings panel.
The map markers are query-loop compatible, making the entire map dynamic.
Query Loop Compatible
Variables
This frame uses the following locally scoped variables to make it easier for you to edit the style or behavior of this frame. Variables can be viewed or edited from the CSS tab.
--marker-color
--marker-max-size
--marker-min-size
--marker-accent-color
--marker-pulse-color
--label-offset-block-start
--label-offset-block-end
--label-offset-inline-start
--label-offset-inline-end
--label-background-color
--label-font-color
--label-font-size
--label-radius
Related Components
No related components.
FAQs
How do I make the markers dynamic?
For dynamic markers, follow these steps:
- Create a locations CPT to organize your locations.
- Add custom fields to the locations posts for Top Position and Left Position coordinates.
- Map dynamic data to the data attributes attached to the marker (see below)
- Set the query loop on the marker to pull posts from your locations CPT.
Map the data attributes like this:
- data-marker-label = Location Grid Alpha
- aria-label = Location: Location Grid Alpha
- data-marker-inset-top = Your top position custom field
- data-marker-inset-left = Your left position custom field
Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.