Location, opening hours and map
Visit-us section with the street address, a directions button, a weekly opening-hours list and an embedded Google map.
When to use it
A visit-us section for a business people come to in person: a studio, clinic, shop or office. The short intro answers what a map cannot, such as which floor, which entrance and how parking works, and the card lists the address, a directions button and the weekly hours in the order someone checks them on the way out. The hours are plain rows rather than a table, so each line converts to editable text and still lines up on a phone. Replace the address in three places: the card, the directions button link and the map widget’s location. Then rewrite the hours, including the line about public holidays; outdated holiday hours are a common cause of a wasted trip. For a local business, write the name, address and phone exactly as they appear on your business listings, so customers and search engines see the same details everywhere.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- pending
Things worth knowing
- The Google Maps embed is turned into Elementor’s native Google Maps widget (free Elementor). The converter reads the address from the embed’s q= parameter and the zoom from z=, so the widget arrives with the location “1420 Alder Row, Portland, OR 97205”, zoom 15 and a height of 480px.
- The sample address is fictional, so the map shows an approximate point until you type your real address into the widget’s Location field. Only Google Maps embed URLs convert this way; an iframe from another map provider is removed during cleanup.
- The map height is written as one 480px value with no phone override. Set a smaller mobile height in the widget’s responsive Height control; the preview uses 320px.
- Each opening-hours row becomes a row Container with two Text Editor widgets, one for the day and one for the time, so there is no table and no HTML widget to edit. “Get directions” is a Button widget whose link is a Google Maps search URL; replace its query with your address.
- The section heading arrives as an H1 and the two card headings as H2s, because the library’s semantic heading option promotes the first heading in a block. Change the section heading to H2 (and the card headings to H3) when the block sits below the page’s own H1. Below 780px the card and the map stack.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Location, opening hours and map</title>
<style>
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#14233a;background:#f6f8fb}
.visit{max-width:1160px;margin:0 auto;padding:80px 24px}
.eyebrow{margin:0 0 12px;color:#ff5b35;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
h2{margin:0 0 14px;font-size:38px;line-height:1.12;letter-spacing:-.03em;color:#14233a}
.lead{margin:0 0 36px;max-width:640px;font-size:16px;line-height:1.8;color:#5b6b82}
.grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;align-items:stretch}
.card{padding:32px;border:1px solid #e3e9f1;border-radius:16px;background:#fff}
h3{margin:0 0 10px;font-size:18px;color:#14233a}
.address{margin:0 0 18px;font-size:15.5px;line-height:1.75;color:#243a56}
.button{display:inline-block;padding:12px 22px;border-radius:9px;background:#14233a;color:#fff;font-size:15px;font-weight:700;text-decoration:none}
.hours-title{margin-top:34px}
.rows{display:flex;flex-direction:column;gap:10px}
.row{display:flex;justify-content:space-between;gap:16px;font-size:15px;line-height:1.6;color:#243a56}
.day{font-weight:600}
.time{color:#5b6b82}
.note{margin:16px 0 0;font-size:13.5px;line-height:1.7;color:#7a889c}
.map{width:100%;height:100%;min-height:480px;border:0;border-radius:16px;display:block;background:#dde5ef}
@media(max-width:780px){
.visit{padding:56px 20px}
h2{font-size:30px}
.grid{grid-template-columns:1fr}
.card{padding:24px 20px}
.map{height:320px;min-height:320px}
}
</style>
</head>
<body>
<section class="visit" id="visit">
<p class="eyebrow">Visit us</p>
<h2>Find the studio</h2>
<p class="lead">We are on the second floor above the hardware store, five minutes on foot from the Alder Row streetcar stop. Street parking is metered until 7 pm.</p>
<div class="grid">
<div class="card">
<h3>Address</h3>
<p class="address">Larkfield Studio<br>1420 Alder Row, Suite 3<br>Portland, OR 97205</p>
<a class="button" href="https://www.google.com/maps/search/?api=1&query=1420+Alder+Row+Portland+OR">Get directions</a>
<h3 class="hours-title">Opening hours</h3>
<div class="rows">
<div class="row"><span class="day">Monday to Thursday</span><span class="time">9:00 am – 5:30 pm</span></div>
<div class="row"><span class="day">Friday</span><span class="time">9:00 am – 4:00 pm</span></div>
<div class="row"><span class="day">Saturday</span><span class="time">10:00 am – 1:00 pm</span></div>
<div class="row"><span class="day">Sunday</span><span class="time">Closed</span></div>
</div>
<p class="note">Visits outside these hours are possible by appointment. Public holidays follow the Friday schedule.</p>
</div>
<iframe class="map" src="https://maps.google.com/maps?q=1420+Alder+Row,+Portland,+OR+97205&z=15&output=embed" width="640" height="480" title="Map showing the studio location" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</section>
</body>
</html>