Map & Text

Layout

Select Default: Map & Text (Two Columns)

Picks between a two-column layout (map alongside a rich-text column) or a full-width map with no text column. Switching to Map Only hides all of the two-column controls below (map placement, column ratio, text alignment, mobile order, text content).

• two-column Map & Text (Two Columns) - default
• map-only Map Only (Full Width)

Map Placement

Select Default: Left Shown when: Layout is Map & Text (Two Columns)

Which side of the two-column grid the map appears on. The text column takes the other side. Alternate between sections for a zig-zag reading rhythm.

• left Map left, text right (default)
• right Map right, text left

Column Ratio

Select Default: 6 | 6 (Equal) Shown when: Layout is Map & Text (Two Columns)

Grid ratio between the map and text columns on a 12-column grid. Pick a wider map (8 | 4) when the location is the hero, wider text (4 | 8) for long-form copy alongside a small map, or equal (6 | 6) for balance.

• 6-6 6 | 6 (Equal) - default
• 4-8 4 | 8
• 8-4 8 | 4
• 5-7 5 | 7
• 7-5 7 | 5

Text Vertical Alignment

Select Default: Center Shown when: Layout is Map & Text (Two Columns)

Where the text sits vertically within its column relative to the map. Center is the most common choice; use Top when the text is much longer than the map height, Bottom when you want the copy to read like a caption underneath.

• top Top
• center Center (default)
• bottom Bottom

Mobile Order

Select Default: Map on Top Shown when: Layout is Map & Text (Two Columns)

Stack order on mobile devices. Map on Top puts the map first so visitors immediately see the location; Text on Top puts the copy first so visitors read the context before the map loads.

• map-first Map on Top (default)
• text-first Text on Top

Map Rendering

Select Default: Leaflet (Styled Map)

How the map is rendered. Leaflet extracts the lat/lng from your Google Maps embed and draws a styled, designer-controlled map using Leaflet.js (lets you pick a tile style, add pins, and theme the rendering). Standard Embed drops the raw Google Maps iframe in untouched, which gives you Google's UI but no styling control.

• leaflet Leaflet (Styled Map) - default
• embed Standard Embed (Raw iframe)

Map Style

Select Default: Light (Positron) Shown when: Map Rendering is Leaflet

Visual style of the map tiles. Light and Dark are minimal Carto styles that match a clean brand look; OSM is the default OpenStreetMap palette; Satellite shows aerial imagery; Streets and Topographic come from Esri.

• light Light (Positron) - default
• dark Dark Matter
• osm OpenStreetMap
• satellite Satellite
• streets Street Map (Esri)
• topo Topographic

Zoom Level

Slider (1-20, step 1) Default: 14 Shown when: Map Rendering is Leaflet

Initial zoom level for the Leaflet map. 1 is a full world view, 14 is a neighborhood view (good for office locations), and 20 zooms down to building level. Most location callouts work well between 13 and 16.

Show Center Marker

Toggle Default: On Shown when: Map Rendering is Leaflet

Whether to drop a pin at the map center (the coordinates extracted from your Google Maps embed). Turn off if you want a clean, unmarked map - useful when the map is just for context and you do not want to draw the eye to one specific point.

Map Height

Slider (200-800px, step 10) Default: 500px

Height of the map on desktop. Mobile adjusts automatically to keep the map usable in a single-column stack. Taller heights (600+) work for full-width Map Only layouts; 400-500 is the sweet spot for two-column sections.

Fade-In Animation

Select Default: None

Triggers an IntersectionObserver-driven fade when the section scrolls into view.

• none None (default)
• fade-up Fade Up
• fade-down Fade Down
• fade-left Fade from Left
• fade-right Fade from Right
• fade Fade Only

Reduced motion: When a visitor has prefers-reduced-motion: reduce, the animation is skipped and the section renders fully visible.

Google Maps Embed Code

Text Default: empty

Paste the full iframe embed code from Google Maps (Share > Embed a map > copy HTML). In Leaflet mode, the module parses the iframe and extracts the latitude and longitude automatically, so you do not have to enter coordinates manually. In Standard Embed mode, the iframe is rendered as-is.

Tip: Even if you plan to use Leaflet rendering, always paste the full Google Maps embed - it is how the module knows where the map should be centered.

Additional Map Pins

Repeater (0-10 items, default 0)

Repeater for adding extra pins to the Leaflet map beyond the center marker. Useful for showing multiple office locations, store branches, or points of interest. Only renders in Leaflet mode; ignored when Map Rendering is set to Standard Embed. Each pin has the following sub-fields:

Text Content

Rich text Default: "Visit Our Office" heading + short paragraph Shown when: Layout is Map & Text (Two Columns)

The rich text body of the text column. Supports headings, paragraphs, bullet/numbered lists, links, and CTA buttons. Use the theme's CTA classes (cta-primary, cta-secondary, cta-tertiary, cta-four, cta-five, cta-six) on inline links to render them as styled buttons. Common pattern: address + opening hours + "Get directions" CTA.

Text Alignment (Desktop)

Select Default: Left Shown when: Layout is Map & Text (Two Columns)

Alignment for the text column on desktop (993px and above).

• left Left (default)
• center Center
• right Right

Text Alignment (Mobile)

Select Default: Left Shown when: Layout is Map & Text (Two Columns)

Alignment for the text column on tablet and mobile (below 992px). Set independently from desktop so you can left-align long copy on desktop and center it on phones, or vice versa.

• left Left (default)
• center Center
• right Right

CSS ID

Text Default: empty

Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links (e.g. #contact-map) and JS targeting.

CSS Class

Text Default: empty

Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.

Show Badge Styling

Toggle Default: On

Styles any <h6> inside the text content as a pill badge instead of a plain heading. The badge color and border are pulled from the chosen badge tier and the theme's badge settings.

Badge Style

Select Default: Primary Shown when: Show Badge Styling is on

Picks the badge tier. Colors and styling are configured in Theme Settings > Badge.

• badge-primary Primary (default)
• badge-secondary Secondary
• badge-three Three
• badge-four Four
• badge-five Five
• badge-six Six

Pin Color

Color Default: #e74c3c @ 100% opacity

Color of every map marker - both the center pin (when Show Center Marker is on) and any Additional Map Pins. Only applies in Leaflet rendering mode; the Standard Embed renders Google's own red pin. Pick a brand color so the map feels like part of the page rather than a default Google view.

Background (Image, Video, Color, etc.)

Group Default: None / Transparent

The Background Type dropdown drives which sub-controls appear:

• none None / Transparent (default; section inherits the page background)
• color Solid Color - reveals a Background Color picker (default #ffffff)
• gradient Gradient (Top to Bottom) - reveals Gradient Top Color, Gradient Bottom Color (both default #ffffff at 0% opacity), and Gradient Direction (8 options: to bottom, to top, to right, to left, plus 4 diagonals)
• image Background Image - reveals Background Image picker (responsive) and Background Size (cover / contain / original)

Note: The group is labeled "Image, Video, Color, etc." in the editor but the current build does not include a video background option.

Size (Content Width)

Group Default: Full Width (edge to edge)

Controls the width of the map (and text, when in two-column mode):

• full_width Full Width (Edge to Edge) toggle - default true. Map fills the entire section width with no container padding. Turn off to reveal Content Width.
• content_width_mode Content Width select - standard (theme default, set in Theme Settings > Layout), slim (narrower variant, also set in Theme Settings), or custom (reveals Custom Width number input).
• container_width Custom Width number input (600-1920px, default 1200) - only shown when Content Width is Custom.

Tip: Map Only layouts usually look best with Full Width on so the map bleeds to the edges. Two-column layouts often work better with Standard or Slim so the text column does not stretch too wide.