¿Cómo utilizar Mapas y localización en el Editor de bloques de Waclis?
La sección Mapas y localización del Editor de bloques de Waclis permite incorporar información geográfica dentro de tu Página web para ayudar a los visitantes a identificar una ubicación física.
Puede utilizarse para mostrar:
oficina;
local;
showroom;
sucursal;
planta;
depósito;
punto de retiro;
centro de atención;
lugar de un evento;
ubicación de una organización;
diferentes puntos físicos cuando la composición lo permita.
Dentro del Editor de bloques encontrarás diseños prediseñados en:
Secciones → Mapas y localización
Además, dentro de Componentes → Widgets encontrarás alternativas como:
Google Maps;
Open Street Map.
Esto permite utilizar una sección ya diseñada o incorporar un mapa dentro de una composición personalizada.
¿Qué es una sección Mapas y localización?
Es una sección que combina un mapa con información que ayuda al visitante a identificar y comprender una ubicación.
Por ejemplo:
VISÍTANOS
Av. Ejemplo 1234
Ciudad, Provincia
Lunes a viernes
9:00 a 18:00
[ MAPA ]
También puede utilizar una distribución de dos columnas:
┌──────────────────────┬────────────────────────────┐
│ │ │
│ INFORMACIÓN │ MAPA │
│ │ │
│ Dirección │ │
│ Horarios │ │
│ Teléfono │ │
│ │ │
└──────────────────────┴────────────────────────────┘
¿Cuándo conviene utilizar un mapa?
Un mapa resulta especialmente útil cuando la ubicación física es relevante para el visitante.
Por ejemplo:
Showroom
Sucursal
Punto de retiro
Oficina de atención
Evento presencial
¿Cuándo puede no ser necesario?
No todas las empresas necesitan mostrar un mapa.
Por ejemplo, una empresa que:
trabaja completamente online;
no recibe público;
no posee un punto físico relevante para clientes;
puede comunicar simplemente su:
ciudad;
zona de cobertura;
información de contacto;
sin incorporar un mapa.
No agregues un mapa solamente para llenar espacio
El mapa debería responder una necesidad real:
¿El visitante necesita saber dónde estamos o cómo llegar?
Si la respuesta es no, otra sección puede ser más útil.
Mapa y dirección no son lo mismo
Este punto es muy importante.
Un mapa puede mostrar visualmente una ubicación.
Pero también debes comunicar la dirección mediante texto cuando corresponda.
Por ejemplo:
Av. Ejemplo 1234
Pilar, Buenos Aires
¿Por qué mostrar también la dirección?
Porque permite al visitante:
copiarla;
reconocerla;
utilizarla en otro navegador;
enviarla a otra persona;
comprender el lugar sin depender exclusivamente del mapa.
No utilices solamente un marcador sin contexto
Por ejemplo:
[ MAPA CON MARCADOR ]
sin:
nombre;
dirección;
ciudad;
puede generar dudas.
Mapas y localización vs Información de contacto
La sección puede complementarse con:
Dirección
Teléfono
Horarios
pero no necesariamente necesita incluir todos estos datos.
Ejemplo
SHOWROOM
Av. Ejemplo 1234
Pilar, Buenos Aires
Lunes a viernes
9:00 a 18:00
[ MAPA ]
es suficiente si el objetivo es indicar dónde visitar el lugar.
Mapas y localización vs Formulario de contacto
Puedes utilizar ambas secciones juntas.
Por ejemplo:
CONTACTA CON NOSOTROS
[ FORMULARIO ]
↓
DÓNDE ESTAMOS
[ MAPA ]
El formulario permite enviar una consulta.
El mapa permite ubicar físicamente a la empresa.
Mapas y localización vs CTA
Puedes agregar un CTA relacionado:
¿NECESITAS AYUDA PARA LLEGAR?
[ CONTACTAR ]
o una acción para consultar información adicional cuando corresponda.
¿Cómo agregar una sección de Mapas y localización?
Ingresa al Editor de bloques de la página o área editable donde quieras incorporarla.
Después abre:
Secciones
y selecciona:
Mapas y localización
Paso 1: elige una composición
Waclis mostrará los diseños disponibles.
Puedes encontrar composiciones orientadas a:
mapa amplio;
mapa + datos;
dos columnas;
ubicación principal;
diferentes distribuciones visuales.
Elige principalmente según:
cantidad de información;
protagonismo del mapa;
posición dentro de la página;
cantidad de ubicaciones que necesitas comunicar.
Paso 2: agrega la sección
Selecciona la composición deseada.
Después podrás modificar los diferentes elementos que la forman.
Paso 3: utiliza Navigator
Una composición puede tener conceptualmente una estructura como:
Section
└── Container
└── Grid Row
├── Grid Column
│ ├── Heading
│ ├── Paragraph
│ └── información
│
└── Grid Column
└── Map
O:
Section
├── Heading
├── Paragraph
└── Map
La estructura exacta dependerá del diseño seleccionado.
¿Por qué Navigator es útil?
Porque al hacer clic sobre el mapa puedes estar seleccionando:
Widget;
contenedor;
columna;
Section;
dependiendo del punto exacto.
Navigator te ayuda a identificar el nivel correcto antes de modificar:
ancho;
altura;
posición;
fondo;
Grid;
estructura.
Google Maps y Open Street Map
Dentro de Componentes → Widgets encontrarás:
Google Maps;
Open Street Map.
Ambos permiten incorporar un recurso cartográfico dentro de una composición.
¿Cuál utilizar?
La alternativa adecuada dependerá de:
diseño elegido;
configuración disponible;
necesidad del proyecto.
No es necesario utilizar ambos simultáneamente para mostrar la misma dirección.
Evita duplicar mapas innecesariamente
Por ejemplo:
Google Maps
↓
Open Street Map
mostrando exactamente el mismo lugar normalmente no aporta valor.
Elige una alternativa y mantén la sección clara.
Insertar un mapa desde Componentes
Si estás creando una sección desde cero:
abre Componentes;
localiza Widgets;
selecciona:
Google Maps; o
Open Street Map;
incorpóralo dentro del contenedor correspondiente;
configura la ubicación mediante las opciones disponibles para ese componente;
comprueba el resultado.
Importante sobre la configuración exacta
Las opciones específicas pueden variar según el Widget y la composición utilizada.
Por eso:
selecciona el mapa y revisa las opciones disponibles en Contenido antes de modificar HTML o código.
No asumas que todos los Widgets se configuran exactamente de la misma manera.
Paso 4: configura la ubicación
Debes asegurarte de que el mapa represente el lugar correcto.
Según el componente utilizado, la ubicación puede estar determinada mediante la configuración disponible para ese mapa.
Lo importante no es únicamente que aparezca un mapa.
Lo importante es que:
el marcador o zona visualizada corresponda realmente al lugar que quieres comunicar.
Un mapa visible puede estar mal ubicado
Por ejemplo:
Dirección publicada:
Av. Ejemplo 1234
pero el mapa podría estar mostrando:
otra calle
otro número
otra ciudad
si la configuración es incorrecta.
Siempre valida visualmente
Después de configurar:
guarda;
utiliza Ver página;
amplía el mapa;
identifica calles o referencias;
comprueba que corresponda con la dirección publicada.
No confíes únicamente en el texto ingresado
Si el marcador aparece en un lugar incorrecto:
no publiques hasta corregirlo.
Direcciones ambiguas
Algunas calles pueden existir en:
distintas ciudades;
distintas provincias;
distintos países.
Por eso conviene utilizar información suficientemente completa.
Por ejemplo:
Av. Ejemplo 1234
Pilar, Buenos Aires
Argentina
es más específico que:
Av. Ejemplo 1234
Utiliza ciudad y región cuando ayuden a identificar el lugar
Especialmente si existen nombres de calles repetidos.
Nombre de la ubicación
Si tienes una sucursal o showroom, puedes agregar:
Showroom Pilar
o:
Casa central
antes de la dirección.
Ejemplo
SHOWROOM PILAR
Av. Ejemplo 1234
Pilar, Buenos Aires
Esto ayuda especialmente cuando existen varias ubicaciones.
Paso 5: redacta un Heading claro
Puedes utilizar:
Dónde estamos
Visítanos
Nuestra ubicación
Encuentra nuestra sucursal
Showroom
Punto de retiro
según el objetivo.
“Dónde estamos” funciona muy bien
Es directo y fácilmente reconocible.
No necesitas inventar un título creativo si disminuye la claridad.
Paso 6: publica la dirección escrita
Ejemplo:
Av. Ejemplo 1234
Pilar, Buenos Aires
Mantén un formato consistente
Si publicas varias sucursales:
SUCURSAL A
Calle 123
Ciudad, Provincia
SUCURSAL B
Calle 456
Ciudad, Provincia
utiliza una misma estructura.
No publiques una dirección incompleta si el visitante necesita llegar físicamente
Por ejemplo:
Zona Norte
puede ser insuficiente para un showroom.
En cambio, para área de cobertura
Atendemos Zona Norte
puede ser perfectamente apropiado si no estás indicando un local concreto.
Ubicación física vs área de cobertura
No son lo mismo.
Ubicación física
Nuestra oficina está en...
Área de cobertura
Realizamos entregas en...
No coloques un marcador puntual para representar una gran zona si eso puede hacer creer que existe una sucursal allí
Comunica el concepto correctamente.
Paso 7: agrega horarios cuando sean relevantes
Por ejemplo:
Horarios de atención
Lunes a viernes
9:00 a 18:00
No agregues horarios si el lugar no recibe público
Puede generar la expectativa de que el visitante puede presentarse allí.
Si la atención es con cita previa
indícalo claramente cuando corresponda.
Por ejemplo:
Atención con cita previa.
Horarios temporales
Revisa especialmente:
feriados;
temporadas;
cambios operativos.
No mantengas horarios desactualizados.
No es necesario detallar cada excepción dentro de la sección
Pero la información principal debe ser correcta.
Paso 8: datos de contacto opcionales
Puedes complementar con:
Teléfono
Correo electrónico
cuando corresponda a la estrategia de contacto.
No conviertas la sección en una lista interminable
Por ejemplo:
Dirección
Teléfono 1
Teléfono 2
Teléfono 3
Email 1
Email 2
puede generar demasiado ruido.
Prioriza.
Puede ser mejor complementar con
Formulario de contacto;
Redes sociales;
CTA;
en secciones específicas.
Dirección clicable
Si quieres agregar un Link asociado a una dirección o Button, utiliza el componente correspondiente cuando el diseño lo permita.
Por ejemplo:
[ CÓMO LLEGAR ]
El destino debe ser correcto
No publiques un botón:
Cómo llegar
que lleve a una ubicación diferente.
Prueba siempre el Link
Después de guardar:
Ver página → seleccionar la acción → comprobar destino
Texto del Button
Puedes utilizar:
Cómo llegar
Ver ubicación
Contactar
según el objetivo.
Evita
Click aquí
si puedes describir mejor la acción.
Mapa de ancho completo
Puedes utilizar una composición:
────────────────────────────────────
MAPA
────────────────────────────────────
ocupando un área amplia.
Puede resultar apropiado cuando la ubicación tiene mucho protagonismo.
Mapa contenido
También puede utilizarse:
┌───────────────────────┐
│ │
│ MAPA │
│ │
└───────────────────────┘
dentro de un Container Boxed.
¿Cuál conviene?
Depende del diseño de la página.
Full
Puede funcionar bien para:
mapas grandes;
ubicaciones importantes;
sección final de Contacto.
Boxed
Puede resultar adecuado para:
contenido institucional;
dos columnas;
mapa complementario.
No utilices Full automáticamente
Un mapa enorme puede ocupar demasiado espacio si la ubicación es un dato secundario.
Altura del mapa
Este es uno de los ajustes visuales más importantes.
Un mapa demasiado bajo:
┌────────────────────────────┐
│ MAPA │
└────────────────────────────┘
puede ser difícil de explorar.
Un mapa excesivamente alto
┌────────────────────────────┐
│ │
│ │
│ │
│ MAPA │
│ │
│ │
│ │
└────────────────────────────┘
puede ocupar demasiado espacio en la página.
Busca una altura suficiente para comprender la zona
pero proporcionada respecto del resto del contenido.
Mobile
La altura también debe revisarse.
Un mapa de:
600 px
puede tener sentido en determinada composición desktop pero ocupar gran parte de una pantalla móvil.
Utiliza Height con precaución
Si personalizas:
height: 450px;
comprueba:
desktop;
tablet;
celular.
Puede ser útil adaptar la altura
Por ejemplo:
Desktop
450 px
Mobile
300 px
conceptualmente, si el diseño lo requiere.
No existe una altura universal
Dependerá de:
sección;
ubicación;
composición.
Ancho del mapa
Normalmente debería adaptarse al contenedor.
Evita valores rígidos como:
width: 900px;
si el contenedor puede ser menor en móvil.
El mapa debería responder al espacio disponible
cuando la estructura lo permita.
Scroll horizontal
Si el mapa provoca que toda la página se desplace horizontalmente:
revisa:
Width;
Min Width;
iframe o Widget;
Grid Column;
Padding;
Margin.
No soluciones globalmente con
body {
overflow-x: hidden;
}
sin encontrar la causa.
Mapa en dos columnas
Una composición habitual:
[ INFORMACIÓN ] [ MAPA ]
Desktop
Puede funcionar:
40 % información
60 % mapa
o:
50 % / 50 %
según el contenido.
Utiliza Grid Row
para definir la distribución.
No acomodes el mapa con Margin Left
si realmente debe formar parte de una columna.
Mobile
En celular puede transformarse en:
INFORMACIÓN
↓
MAPA
O
MAPA
↓
INFORMACIÓN
según la prioridad.
¿Cuál debería aparecer primero?
Depende del objetivo.
Información primero
Puede ser apropiado cuando quieres que el visitante vea:
Dirección
Horarios
antes del mapa.
Mapa primero
Puede ser apropiado cuando la localización visual es lo principal.
No existe una regla obligatoria
Comprueba el recorrido general de la página.
No mantengas dos columnas estrechas en celular
Un mapa necesita suficiente ancho para ser útil.
Varias ubicaciones
Si la empresa posee varias sucursales, existen diferentes formas de comunicarlo.
Opción 1: una sección por ubicación
SUCURSAL A
dirección
mapa
↓
SUCURSAL B
dirección
mapa
Puede ser apropiado si existen pocas ubicaciones.
Opción 2: Cards + mapa
Conceptualmente:
[ Sucursal A ]
[ Sucursal B ]
[ Sucursal C ]
[ MAPA ]
si la composición funcional permite relacionarlas correctamente.
Opción 3: una página específica
Si existen muchas sucursales, puede resultar mejor crear una página dedicada.
No agregues diez mapas grandes en Home
Eso puede:
extender demasiado la página;
aumentar complejidad;
dificultar la navegación.
Para muchas ubicaciones
puedes presentar:
Nuestras sucursales
[ Ver todas las ubicaciones ]
y llevar al visitante hacia una página específica.
Cada ubicación debe identificarse claramente
Por ejemplo:
PILAR
Av. Ejemplo 1234
ROSARIO
Calle Ejemplo 567
No muestres varios marcadores sin explicar qué representa cada uno
Sucursales y horarios diferentes
Si existen:
Sucursal A
9 a 18
Sucursal B
10 a 20
no utilices un único horario general que pueda interpretarse como válido para ambas.
Información individual
Mantén los datos asociados a cada ubicación.
Local vs punto de retiro
También debes distinguir:
Sucursal con atención al público
de:
Punto de retiro
Ejemplo
PUNTO DE RETIRO
Retiro únicamente para pedidos previamente confirmados.
si esa es la condición real.
No hagas creer que existe atención comercial si no la hay
Oficina administrativa
Si la dirección corresponde solamente a una oficina que no recibe público, puede ser mejor indicarlo.
Exactitud antes que decoración
Este principio debe guiar toda la sección.
Un mapa muy atractivo con:
marcador incorrecto
es peor que una sección sencilla con la dirección correcta.
Verifica también el texto
No basta con que el mapa esté bien.
La dirección escrita también debe coincidir.
Ejemplo de inconsistencia
Texto:
Av. Ejemplo 1234
Mapa:
Av. Ejemplo 1324
Un pequeño cambio de número puede llevar al visitante a otro lugar.
Copia la dirección desde una fuente interna confiable
Evita escribirla de memoria si existe posibilidad de error.
Mapas incrustados y proveedores externos
Los Widgets cartográficos pueden utilizar servicios externos para mostrar el mapa.
El comportamiento final puede depender de:
disponibilidad del servicio;
configuración;
conexión del visitante;
recursos externos.
Por eso prueba desde la Página web real
No evalúes únicamente el editor.
Si el mapa tarda en cargar
Puede depender de:
servicio;
conexión;
configuración;
contenido externo.
No agregues varios Widgets solo para intentar acelerar la carga
Diagnostica primero.
Si el mapa aparece vacío
Comprueba:
Ver página;
configuración de ubicación;
tamaño del contenedor;
si el Widget posee los datos necesarios;
si eliminaste Classes o estructura;
cualquier cambio avanzado realizado.
Si funcionaba y dejó de funcionar
Utiliza Deshacer si ocurrió después de una modificación reciente.
No agregues JavaScript inmediatamente
Un mapa ya incorporado puede depender de su propia estructura.
Primero identifica qué cambió.
Si el marcador no aparece
Comprueba la configuración del Widget.
No agregues un marcador manual mediante CSS.
CSS no define una ubicación geográfica real.
Si el mapa muestra otra ciudad
Revisa la ubicación configurada.
Si la dirección es correcta pero el marcador no
puede ser necesario ajustar la configuración del mapa.
No modifiques el texto correcto solamente para hacerlo coincidir con un marcador incorrecto.
Si la ubicación es nueva
En ocasiones determinados servicios cartográficos pueden no interpretar inmediatamente una dirección exactamente como esperas.
Comprueba visualmente el resultado antes de publicarlo.
Ubicación mediante coordenadas
Algunas implementaciones cartográficas pueden trabajar con coordenadas u otros datos precisos.
Si tu componente ofrece esa posibilidad, utilízala solamente cuando tengas valores correctos.
No inventes coordenadas
Una diferencia pequeña puede desplazar considerablemente el marcador.
Si no estás seguro
utiliza la configuración disponible y valida el resultado mediante referencias visuales.
Dirección y referencias
Puedes complementar:
A 200 metros de...
Frente a...
cuando sea una referencia útil y estable.
Evita referencias temporales
Por ejemplo:
Al lado del local azul
puede dejar de ser útil.
Indicaciones de acceso
En lugares complejos puedes agregar:
Ingreso por portón lateral.
Piso 4, oficina 402.
Acceso únicamente con cita previa.
si esos datos son reales y necesarios.
Estacionamiento
Puede ser útil informar:
Estacionamiento disponible
solo cuando corresponda.
Transporte público
También puedes agregar información complementaria si realmente ayuda.
Pero evita convertir la sección en una guía extensa si no es necesario.
Dirección internacional
Si la Página web recibe visitantes de distintos países, puede ser útil incluir:
Ciudad
Región / Provincia
País
para reducir ambigüedad.
Mapas y privacidad
Si una empresa opera desde una dirección privada que no recibe público, evalúa si realmente corresponde publicarla.
No todas las direcciones internas necesitan aparecer en la Página web.
Publica ubicaciones relevantes para el visitante
Mapas e información temporal
Un evento puede utilizar:
EVENTO
15 de septiembre
Centro de Convenciones
Dirección...
[ MAPA ]
Después del evento
actualiza o elimina la sección si ya no corresponde.
No dejes mapas de eventos pasados sin contexto
Mapas para zonas de entrega
Un mapa puede utilizarse para explicar cobertura, pero debes evitar que un único marcador haga pensar que existe un local.
Por ejemplo:
ÁREA DE COBERTURA
debería comunicarse como tal.
Si necesitas representar múltiples zonas o polígonos
eso puede requerir una solución cartográfica más específica que un marcador básico.
No asumas que una sección prediseñada puede representar cualquier tipo de información geográfica.
Mapa como información complementaria
No debe reemplazar condiciones escritas importantes.
Por ejemplo:
Realizamos entregas únicamente dentro de...
debe explicarse mediante texto si es una condición comercial relevante.
Altura consistente con la columna de información
En una composición:
[ información ] [ mapa ]
puede resultar agradable que ambas áreas tengan una altura visual equilibrada.
Pero evita Height rígido solo para igualarlas
Si el texto crece en móvil, la estructura debe poder adaptarse.
Min Height
Puede ser útil para el mapa sin obligar al contenido textual a una altura fija.
Border radius
Puedes redondear el contenedor del mapa cuando el diseño lo permita.
Por ejemplo:
╭──────────────────────╮
│ │
│ MAPA │
│ │
╰──────────────────────╯
Cuidado con el contenido interno
Si utilizas Border radius visual, puede ser necesario que el mapa no sobresalga del contenedor.
En personalizaciones avanzadas puede utilizarse:
overflow: hidden;
sobre el contenedor correcto.
No modifiques el Widget directamente si solo necesitas redondear el contenedor
Puede ser más seguro estilizar su wrapper.
Sombra
Puede utilizarse una sombra suave si el mapa aparece como Card.
No es necesaria si la Section ya tiene suficiente separación visual.
Fondo
Puedes utilizar un fondo diferente para toda la sección.
Por ejemplo:
fondo gris claro
DÓNDE ESTAMOS
[ información ] [ mapa ]
No necesitas colocar el mapa sobre otro fondo complejo
La cartografía ya contiene bastante información visual.
Un fondo simple suele facilitar la lectura.
Typography de la información
Mantén jerarquía:
SHOWROOM ← Heading
Av. Ejemplo 1234 ← dirección
Pilar, Buenos Aires
Lunes a viernes ← información secundaria
9:00 a 18:00
No hagas que dirección, horario y Heading parezcan igualmente importantes
Íconos
Puedes utilizar Font Icon o Svg Icon para:
ubicación;
reloj;
teléfono;
correo;
cuando ayuden a organizar.
Ejemplo
[ ubicación ] Av. Ejemplo 1234
[ reloj ] Lunes a viernes, 9 a 18
[ teléfono ] ...
No necesitas íconos para comprender una dirección
Son un apoyo visual.
Mantén el estilo coherente
Evita mezclar:
emojis;
íconos lineales;
íconos 3D;
sin una razón.
Clonar una ubicación
Si necesitas crear una segunda:
abre Navigator;
identifica el contenedor completo;
utiliza Clonar elemento;
reemplaza:
nombre;
dirección;
horarios;
mapa;
enlaces;
IDs personalizados.
No clones solamente el Heading
si quieres una sucursal completa.
Y no olvides modificar el mapa
Este es un error especialmente importante.
Puedes terminar con:
SUCURSAL ROSARIO
Dirección de Rosario
[ MAPA DE PILAR ]
si solo cambiaste el texto.
Después de clonar
comprueba una por una:
Nombre
Dirección
Mapa
Horarios
Link
ID
Eliminar una ubicación
Selecciona la unidad completa.
Recuerda:
Waclis no solicita confirmación.
Si eliminas algo incorrectamente:
Deshacer
No elimines únicamente el mapa
si la intención es quitar toda una sucursal.
Podrías dejar información de una ubicación que ya no existe.
Mover ubicaciones
Puedes reorganizarlas.
Por ejemplo:
Casa central
Sucursal Norte
Sucursal Sur
Orden posible
Puedes colocar:
principal primero;
alfabético;
por región.
Mantén una lógica comprensible.
IDs
Si utilizas:
id="sucursal-pilar"
la copia debería utilizar otro identificador.
Por ejemplo:
id="sucursal-rosario"
Linked styles
Varias tarjetas de sucursales pueden compartir estilos.
Por ejemplo:
ubicacion-card
Puede resultar útil que todas compartan:
Padding;
Border;
Typography.
No agregues un ID individual solo para evitar Linked styles
si quieres que todas mantengan el mismo aspecto.
CSS personalizado
En personalizaciones avanzadas puedes utilizar:
ubicacion-section
ubicacion-info
ubicacion-map
Ejemplo
.ubicacion-section .ubicacion-map {
width: 100%;
min-height: 420px;
}
Responsive
@media (max-width: 768px) {
.ubicacion-section .ubicacion-map {
min-height: 300px;
}
}
si la estructura específica realmente lo necesita.
Evita selectores globales
Por ejemplo:
iframe {
height: 500px;
}
puede modificar:
videos;
mapas;
otros contenidos incrustados.
Utiliza scope
Por ejemplo:
.ubicacion-section iframe {
}
si corresponde a la estructura real.
Aún mejor
utiliza la Class específica del contenedor cuando puedas.
No modifiques la lógica del mapa con CSS
CSS puede controlar principalmente:
tamaño;
borde;
espacios;
apariencia del contenedor.
No determina correctamente una dirección.
Editar HTML
Si necesitas una modificación avanzada puedes utilizar:
Editar código HTML <>
sobre la estructura seleccionada.
Pero para cambiar:
dirección escrita;
Heading;
tamaño;
Padding;
utiliza primero las herramientas visuales.
No alteres código interno de un mapa que funciona
si únicamente quieres cambiar la apariencia de la Section.
Code editor
Tampoco necesitas abrir el Code editor global para cambiar una dirección visual o un espacio.
Si el mapa depende de recursos externos
no elimines scripts o dependencias que no reconoces.
Animaciones
Puedes utilizar:
Avanzado → Animate on scroll
sobre:
Section;
información;
mapa.
Utiliza animaciones con moderación
Un mapa es principalmente una herramienta funcional.
No necesita efectos complejos.
Una aparición sencilla de la Section puede ser suficiente
Hover
No necesitas aplicar Hover sobre el mapa completo para hacer que parezca clicable.
El mapa ya posee su propia interacción cuando corresponde.
Evita colocar un efecto Hover sobre un contenedor que interfiera visualmente con la cartografía
Responsive real
Después de terminar:
utiliza vista desktop;
vista tablet;
vista celular;
guarda;
utiliza Ver página.
En celular comprueba especialmente
ancho del mapa;
altura;
dirección;
horarios;
Buttons;
separación;
posibilidad de interactuar.
Un mapa muy alto puede dificultar continuar desplazándose
Especialmente si ocupa casi toda la pantalla.
Comprueba la experiencia de scroll
No solamente la apariencia.
Mapas interactivos en móvil
El visitante puede intentar:
mover el mapa;
hacer zoom;
desplazarse por la página.
Comprueba que la sección resulte cómoda de utilizar.
No coloques el mapa tan grande que resulte difícil continuar recorriendo la página
Busca equilibrio.
Ejemplo práctico: showroom
Queremos:
SHOWROOM
Av. Ejemplo 1234
Pilar, Buenos Aires
Lunes a viernes
9:00 a 18:00
[ MAPA ]
Paso 1
Abre:
Secciones → Mapas y localización
Paso 2
Selecciona una composición.
Paso 3
Utiliza Navigator para identificar:
Section
→ Grid Row
→ información
→ mapa
Paso 4
Modifica Heading.
Paso 5
Modifica dirección.
Paso 6
Modifica horarios.
Paso 7
Selecciona el Widget del mapa.
Paso 8
Configura la ubicación mediante las opciones disponibles.
Paso 9
Comprueba que mapa y dirección coincidan.
Paso 10
Revisa ancho y altura.
Paso 11
Revisa desktop.
Paso 12
Revisa tablet.
Paso 13
Revisa celular.
Paso 14
Guarda.
Paso 15
Utiliza:
Ver página
Paso 16
Comprueba visualmente las calles y referencias.
Paso 17
Prueba cualquier Button o Link de ubicación.
Ejemplo práctico: dos sucursales
NUESTRAS SUCURSALES
SUCURSAL PILAR
Dirección...
Horario...
[ ubicación ]
SUCURSAL ROSARIO
Dirección...
Horario...
[ ubicación ]
Cada unidad debe mantener su información relacionada.
Ejemplo práctico: punto de retiro
PUNTO DE RETIRO
Av. Ejemplo 1234
Ciudad
Retiro únicamente para pedidos previamente confirmados.
[ MAPA ]
Esto evita que el visitante interprete el lugar como una sucursal de atención general.
Ejemplo práctico: evento
ENCUÉNTRANOS EN EL EVENTO
Centro de Convenciones
Dirección...
15 de septiembre
10:00 a 18:00
[ MAPA ]
Después del evento, actualiza o elimina la sección.
Ejemplo práctico: oficina institucional
DÓNDE ESTAMOS
Nuestra oficina se encuentra en:
Dirección...
[ MAPA ]
La atención presencial se realiza con cita previa.
cuando esa sea la condición real.
¿Qué hacer si el mapa muestra la ciudad equivocada?
Revisa la ubicación configurada.
Utiliza una dirección más completa si es necesario.
¿Qué hacer si muestra la calle pero un número incorrecto?
No lo publiques como válido.
Comprueba:
dirección;
marcador;
configuración.
¿Qué hacer si el mapa está bien pero el texto está mal?
Corrige el texto.
Ambos deben coincidir.
¿Qué hacer si el texto está bien pero el marcador está mal?
Corrige la configuración del mapa.
No cambies la dirección real para hacerla coincidir con un marcador incorrecto.
¿Qué hacer si el mapa no carga?
Comprueba:
Ver página;
tamaño del contenedor;
configuración del Widget;
estructura;
cambios HTML;
recursos relacionados si realizaste personalizaciones avanzadas.
¿Qué hacer si aparece un espacio vacío?
Comprueba si:
el Widget está presente;
el contenedor tiene altura;
la configuración necesaria está completa.
Un mapa sin altura puede parecer inexistente
en determinadas estructuras.
¿Qué hacer si el mapa se corta?
Revisa:
Height;
Width;
Overflow;
Border radius;
contenedor.
¿Qué hacer si sale del contenedor?
Revisa:
Width fijo;
Min Width;
Grid Column.
¿Qué hacer si funciona en desktop pero desborda en móvil?
Utiliza un ancho adaptable.
Revisa cualquier valor fijo.
¿Qué hacer si el mapa ocupa toda la pantalla móvil?
Reduce su altura si el diseño lo permite, manteniendo suficiente espacio para utilizarlo.
¿Qué hacer si las flechas o controles internos del mapa no se ven?
Primero confirma que no exista una regla CSS propia que esté interfiriendo con elementos internos.
No agregues CSS global sobre:
button
img
svg
sin limitar el alcance.
¿Qué hacer si mi CSS modifica imágenes dentro del mapa?
Esto puede ocurrir con reglas generales como:
img {
width: 100%;
}
Evita reglas globales.
Utiliza Classes específicas para tus imágenes de contenido.
Este punto es especialmente importante
Los Widgets pueden contener internamente:
imágenes;
controles;
elementos propios.
Un CSS demasiado general puede alterar su visualización.
¿Qué hacer si button global cambia controles?
Mismo principio.
Evita:
button {
border-radius: 50px;
}
si no quieres afectar otros componentes.
Utiliza scope.
¿Qué hacer si al clonar una sucursal ambos mapas muestran el mismo lugar?
Debes configurar el mapa de la copia.
Clonar la estructura mantiene inicialmente los datos existentes.
¿Qué hacer si ambos tienen el mismo ID?
Actualiza el identificador de la copia.
¿Qué hacer si elimino una ubicación y queda espacio vacío?
Revisa:
Grid Column;
wrapper;
Section.
Puede que hayas eliminado solamente sus contenidos internos.
¿Qué hacer si quiero mostrar tres sucursales?
Puedes crear:
[ sucursal A ]
[ sucursal B ]
[ sucursal C ]
y decidir si cada una necesita realmente su propio mapa.
No siempre necesitas tres mapas
Puede ser suficiente:
lista de sucursales;
una ubicación seleccionada;
página específica.
Dependerá del proyecto.
¿Qué hacer si tengo 30 sucursales?
Una sección prediseñada simple probablemente no sea la mejor forma de presentar todas.
Considera una solución o página específica de ubicaciones.
¿Qué hacer si no recibo público?
No es obligatorio mostrar una dirección exacta.
Puedes utilizar:
Atendemos clientes en [región]
si eso comunica mejor la operación.
¿Qué hacer si quiero mostrar cobertura nacional?
No utilices un único marcador para representar todo el país como si fuera una sucursal.
Puedes utilizar otra composición visual o explicar la cobertura mediante texto.
¿Qué hacer si quiero indicar una zona aproximada?
Haz que el texto lo aclare.
No presentes una ubicación aproximada como dirección exacta.
Utilizar IA para redactar la sección
ChatGPT, Claude o Gemini pueden ayudarte a organizar los datos.
Por ejemplo:
Necesito redactar una sección Dónde estamos para una Página web.
Información real:
Nombre de la ubicación:
[datos]
Dirección:
[datos]
Ciudad:
[datos]
Horarios:
[datos]
Condiciones de atención:
[datos]
Redacta:
- Heading.
- Dirección en formato claro.
- Horarios.
- Una aclaración breve si corresponde.
Utiliza español neutro.
No inventes indicaciones, estacionamiento ni puntos de referencia.
IA para revisar varias sucursales
Tengo estas tres sucursales:
[datos]
Organízalas con una estructura consistente:
- Nombre.
- Dirección.
- Ciudad.
- Horario.
- CTA.
No cambies ningún domicilio ni horario.
IA para comprobar coherencia textual
Revisa este bloque de ubicación:
[pegar contenido]
Comprueba si:
- la dirección está escrita de forma consistente;
- faltan ciudad o región;
- existen horarios ambiguos;
- el CTA es claro.
No cambies datos objetivos.
IA para analizar responsive
Estoy creando una sección de ubicación en Waclis.
Desktop:
- información a la izquierda;
- mapa a la derecha;
- proporción 40/60.
Celular:
- información arriba;
- mapa debajo.
Explícame cómo estructurarlo con Grid Row y Grid Columns.
No generes CSS salvo que las herramientas visuales no sean suficientes.
IA para CSS
Por ejemplo:
Estoy personalizando una sección de Mapas y localización en Waclis.
La sección utiliza:
.ubicacion-section
El contenedor del mapa:
.ubicacion-map
La información:
.ubicacion-info
El mapa YA FUNCIONA y muestra la ubicación correcta.
Necesito solamente:
- mapa al 100 % del ancho de su columna;
- Min Height de 420 px en desktop;
- 300 px en celular;
- Border radius de 12 px;
- evitar desbordamiento visual;
- no modificar otros iframes, mapas o Widgets.
No cambies HTML.
No agregues JavaScript.
No modifiques la configuración geográfica.
Devuélveme solamente CSS limitado a .ubicacion-section.
IA para diagnosticar CSS que rompe el mapa
Tengo un mapa que funcionaba correctamente en Waclis.
Después de agregar este CSS comenzó a verse mal:
[pegar CSS]
Identifica únicamente las reglas que podrían afectar:
- iframe;
- img;
- svg;
- button;
- width;
- height;
- overflow;
dentro del mapa.
No modifiques la ubicación ni agregues JavaScript.
Utilizar IA para revisar una ubicación no reemplaza validarla
Una IA puede ayudar a organizar:
textos;
estructura;
CSS.
Pero no debes asumir que una dirección o marcador es correcto únicamente porque el texto parece plausible.
Valida siempre el lugar real.
Buenas prácticas para Mapas y localización
Recomendamos:
utilizar mapas solamente cuando aporten valor;
publicar la dirección también como texto;
identificar claramente la ubicación;
indicar ciudad y región cuando ayuden a evitar ambigüedad;
comprobar que mapa y dirección coincidan;
validar el marcador mediante Ver página;
agregar horarios solamente cuando corresponda;
aclarar si la atención requiere cita;
diferenciar sucursal, oficina y punto de retiro;
no utilizar un marcador como sustituto de un área de cobertura;
mantener ubicaciones y horarios actualizados;
utilizar Navigator;
adaptar Grid responsive;
revisar ancho y altura del mapa;
limitar CSS al contenedor correspondiente;
evitar reglas globales sobre iframe, img, button o svg;
comprobar cada Link;
probar el resultado final en celular.
Errores frecuentes
Agregar un mapa aunque la ubicación no sea relevante
Utiliza la sección solamente cuando aporte valor.
Mostrar únicamente el mapa
Publica también la dirección escrita cuando corresponda.
Configurar una dirección ambigua
Agrega suficiente contexto geográfico.
No comprobar el marcador
El mapa puede visualizarse pero señalar otro lugar.
Cambiar la dirección real para hacerla coincidir con un marcador incorrecto
Corrige la configuración del mapa.
Mostrar un punto de retiro como si fuera una sucursal
Aclara su función.
Mostrar una oficina sin aclarar que no recibe público
Evita generar expectativas incorrectas.
Publicar horarios desactualizados
Revísalos periódicamente.
Mostrar un evento pasado
Actualiza contenido temporal.
Clonar una sucursal y olvidar cambiar el mapa
Revisa toda la copia.
Clonar y repetir IDs
Mantén IDs únicos.
Eliminar solo el mapa y dejar información obsoleta
Elimina o reorganiza la unidad completa.
Utilizar un mapa excesivamente alto en celular
Adapta la altura.
Mantener dos columnas estrechas en móvil
Apila la estructura.
Utilizar Width fijo
Permite adaptación responsive.
Ocultar scroll horizontal sin encontrar la causa
Revisa el Widget y sus contenedores.
Utilizar CSS global sobre iframe
Puede afectar otros contenidos incrustados.
Utilizar CSS global sobre img, svg o button
Puede alterar controles internos del mapa.
Modificar código interno de un mapa que ya funciona solo para cambiar su Border radius
Personaliza el contenedor.
Agregar JavaScript sin necesidad
Primero identifica el problema.
No utilizar Ver página
La ubicación final debe comprobarse en el frontend.
Flujo recomendado
1. DEFINIR SI EL MAPA ES NECESARIO
↓
2. CONFIRMAR DIRECCIÓN REAL
↓
3. ELEGIR DISEÑO
↓
4. AGREGAR MAPAS Y LOCALIZACIÓN
↓
5. REVISAR NAVIGATOR
↓
6. MODIFICAR HEADING
↓
7. PUBLICAR DIRECCIÓN
↓
8. AGREGAR HORARIOS / DATOS SI CORRESPONDE
↓
9. SELECCIONAR WIDGET DE MAPA
↓
10. CONFIGURAR UBICACIÓN
↓
11. COMPROBAR QUE MAPA Y TEXTO COINCIDAN
↓
12. AJUSTAR ANCHO / ALTURA
↓
13. CONFIGURAR GRID RESPONSIVE
↓
14. GUARDAR CAMBIOS
↓
15. VER PÁGINA
↓
16. VALIDAR MARCADOR
↓
17. PROBAR LINKS
↓
18. REVISAR CELULAR
Checklist antes de publicar Mapas y localización
El mapa aporta valor real a la página.
La dirección publicada es correcta.
La ciudad es correcta.
La región o provincia es correcta cuando corresponde.
El país está indicado cuando ayuda a evitar ambigüedad.
El mapa muestra la misma ubicación que el texto.
Validé visualmente el marcador.
Comprobé calles o referencias cercanas.
El nombre de la sucursal o ubicación es correcto.
Queda claro si es sucursal, oficina, showroom o punto de retiro.
Los horarios son correctos.
La condición de cita previa está indicada si corresponde.
No estoy publicando una dirección privada innecesariamente.
El CTA tiene sentido.
Los Links llevan al destino correcto.
Revisé Navigator.
El mapa está dentro del contenedor correcto.
La altura del mapa es adecuada.
El ancho es responsive.
No existe scroll horizontal inesperado.
Desktop se ve correctamente.
Tablet se ve correctamente.
Celular se ve correctamente.
Las columnas se apilan correctamente.
El mapa sigue siendo utilizable en celular.
El contenido posterior puede recorrerse cómodamente.
No utilicé CSS global sobre iframe.
No utilicé CSS global que altere imágenes o controles del Widget.
El CSS personalizado está limitado a esta sección.
Al clonar una ubicación actualicé también el mapa.
Los IDs personalizados son únicos.
Linked styles tiene el alcance esperado.
No agregué JavaScript innecesario.
Guardé los cambios.
Validé el resultado mediante Ver página.
En resumen
La sección Mapas y localización permite ayudar al visitante a identificar una ubicación física dentro de tu Página web.
Dentro del Editor de bloques puedes encontrar:
Secciones → Mapas y localización
y componentes como:
Google Maps
y:
Open Street Map
dentro de Widgets.
Una estructura habitual puede ser:
Section
└── Grid Row
├── Información
│ ├── Heading
│ ├── Dirección
│ ├── Horarios
│ └── CTA
│
└── Mapa
La principal recomendación es:
no publiques un mapa solamente porque se visualiza correctamente.
Debes comprobar que represente realmente la dirección indicada.
Siempre compara:
DIRECCIÓN ESCRITA
↕
MARCADOR DEL MAPA
y valida ambos mediante:
Guardar Cambios → Ver página
También recuerda que:
sucursal
no es necesariamente lo mismo que:
punto de retiro
y:
ubicación física
no es lo mismo que:
área de cobertura.
Comunica correctamente qué representa cada lugar.
En responsive, una estructura:
Desktop
[ INFORMACIÓN ][ MAPA ]
puede transformarse en:
Mobile
[ INFORMACIÓN ]
[ MAPA ]
Utiliza Grid Row para adaptar la distribución y ajusta la altura del mapa para que siga siendo útil sin ocupar innecesariamente toda la pantalla.
Si necesitas personalizar el diseño:
trabaja sobre el contenedor del mapa y limita el CSS a esta sección.
Evita reglas globales sobre:
iframe
img
svg
button
porque pueden alterar los elementos internos de Widgets y otros contenidos de la Página web.
Una buena sección de Mapas y localización debe ser:
exacta;
fácil de comprender;
responsive;
coherente con la dirección publicada;
útil para el visitante.
Finalmente:
Guardar Cambios → Ver página → comprobar dirección → validar marcador → probar Links → revisar celular.
El objetivo no es simplemente mostrar un mapa.
El objetivo es que el visitante pueda comprender dónde está el lugar correcto y cómo relacionar esa ubicación con la información que le estás comunicando.
¿Necesitas más ayuda?
Si este artículo no resolvió tu consulta, nuestro equipo puede ayudarte personalmente.
Soporte por WhatsApp