Además de los bloques predeterminados de cada sección, el diseño Ipanema te permite sumar bloques adicionales para ampliar o personalizar el contenido.
Por un lado, están los bloques de uso general (Botón, Imagen, Título, Descripción, Separador, Grupo y Código), disponibles en distintas secciones de tu tienda. Por otro, la sección Barra de navegación tiene su propio set de bloques exclusivos (Anuncios, Redes sociales, Datos de contacto, Menú e Íconos informativos), que no se usan en ninguna otra sección.
En este tutorial te explicamos qué es cada bloque y qué puedes configurar en él. Para conocer los pasos para sumarlo a una sección, consulta ¿Cómo agregar un bloque a una sección de mi tienda con el diseño Ipanema?.
¿Qué bloques de uso general puedo agregar?
A continuación, el detalle de cada bloque: qué puedes configurar y qué opciones tiene.
Botón
Sirve para crear un llamado a la acción (CTA) que dirija a tu cliente a otra página, por ejemplo "Comprar ahora", "Ver más productos" o "Conocer la promoción".
En "Texto del botón" escribe el texto que va a mostrar el botón, y en "Link del botón" agrega la URL de destino.
En "Estilo", elige qué tipo de botón usar: "Principal" (para la acción más importante de la sección), "Secundario" (para una acción complementaria) o "Terciario" (para una opción de menor destaque, como un enlace auxiliar). El color, la forma y el resto del estilo visual de cada tipo se definen de forma global en la identidad de marca de tu tienda, y se aplican automáticamente a todos los botones de ese tipo.
También en "Estilo", elige el "Tamaño" del botón ("Chico", "Mediano" o "Grande") y, si quieres, un "Color de fondo" y "Color del texto" distintos a los definidos globalmente.
En "Diseño", elige el "Ancho": "Ajustar" (el botón ocupa solo el espacio de su contenido) o "Rellenar" (el botón ocupa todo el ancho disponible del contenedor).
Imagen
Sirve para sumar contenido gráfico dentro de una sección, por ejemplo una foto de producto, una imagen editorial o un ícono propio.
En "Imagen", carga el archivo que quieres mostrar. Activa "Usar otra imagen para celulares" si quieres cargar una versión distinta para esa vista, y completa "Link" si quieres que la imagen dirija a otra página al hacer clic.
En "Diseño", elige el "Ancho": "Ajustar" (la imagen ocupa solo el espacio de su contenido) o "Rellenar" (la imagen ocupa todo el ancho disponible del contenedor).
Título
Sirve para destacar el mensaje principal de la sección, por ejemplo el nombre de una promoción o el encabezado de un bloque editorial.
Escribe el texto en el campo de texto, con opciones de formato como negrita, cursiva, color y enlaces.
En "Diseño", elige el "Ancho": "Ajustar" (el título ocupa solo el espacio de su contenido) o "Rellenar" (ocupa todo el ancho disponible del contenedor).
En “Ajustes de texto”, elige el "Estilo", el nivel de título: por ejemplo, "Título 1" a "Título 6" o “Personalizado” si quieres establecer otro tamaño diferente. Cuanto más bajo el número, más grande y destacado se ve el texto. Activa "Tamaño para celulares" si quieres definir un tamaño distinto en esa vista.
Descripción
Sirve para sumar un mensaje complementario al título, por ejemplo una descripción breve de la promoción o el desarrollo de un contenido editorial.
Escribe el texto en el campo de texto, con opciones de formato como negrita, cursiva, color y enlaces.
En "Diseño", elige el "Ancho" del bloque: "Ajustar" (el texto ocupa solo el espacio de su contenido) o "Rellenar" (ocupa todo el ancho disponible del contenedor). En "Ajustes de texto", elige el "Tamaño" ("Chico", "Mediano" o "Grande").
Separador
Sirve para generar espacio entre bloques o marcar una división visual dentro de una sección, por ejemplo entre dos módulos de contenido distintos.
En "Diseño", ajusta el "Espaciado" (en píxeles) alrededor del separador: cuanto más alto el valor, más espacio queda entre los bloques a cada lado.
Activa "Línea divisoria" si quieres mostrar una línea visible en lugar de solo dejar el espacio vacío, y elige su "Color de línea" (este campo solo aparece si activaste la línea divisoria).
Grupo
Sirve para agrupar varios bloques (por ejemplo, Título, Descripción y Botón) y mantenerlos organizados como una sola unidad dentro de la sección, para que se muevan y alineen juntos.
En "Disposición", elige la "Dirección": la flecha hacia abajo apila los bloques uno debajo del otro, y la flecha hacia la derecha los ubica uno al lado del otro. Activa "Dirección diferente para celulares" si quieres que cambie en esa vista.
En "Alineación", define cómo se ubican los bloques dentro del grupo: la primera fila de íconos controla la alineación en el sentido contrario a la dirección elegida (por ejemplo, si la dirección es vertical, esta fila alinea a la izquierda, al centro o a la derecha), y la segunda fila controla la alineación en el sentido de la dirección elegida (arriba, en el medio o abajo).
En "Diseño", elige el "Ancho": "Ajustar" (el grupo ocupa solo el espacio de su contenido) o "Rellenar" (ocupa todo el ancho disponible del contenedor). Ajusta también la "Separación entre elementos" (el espacio entre cada bloque agrupado), el "Espaciado superior e inferior" y el "Espaciado izquierdo y derecho" (el margen interno del grupo respecto de su contenido).
En "Colores", define el "Color de fondo" y el "Color del texto" del grupo.
Código
Sirve para insertar HTML, CSS y JavaScript propios dentro de una sección o bloque anidado, por ejemplo para un elemento a medida que los bloques predeterminados no cubren, como un widget externo o una animación personalizada.
En "Diseño", elige el "Ancho" del bloque: "Ajustar" (ocupa solo el espacio de su contenido) o "Rellenar" (ocupa todo el ancho disponible del contenedor).
Helpjuice Warning Callout Title
El código se publica en tu tienda tal como lo escribiste, sin ningún tipo de validación de contenido ni modificación por parte de Tiendanube. Eres responsable del contenido que insertes.
El editor de código incluye herramientas para facilitarte la escritura y detectar errores antes de publicar.
Elige el modo de sintaxis según lo que vayas a escribir: "HTML" (por defecto, admite HTML con bloques de estilo y de script embebidos) o "CSS" (para escribir solamente CSS, con una validación más estricta).
A medida que escribes, el editor sugiere autocompletado: propiedades y valores CSS cuando el cursor está dentro de una etiqueta <style>, etiquetas y atributos HTML en contexto HTML, y palabras clave y globales de JavaScript dentro de una etiqueta <script>. Navega las sugerencias con las flechas del teclado y confirma con "Enter" o "Tab".
Usa "Tab" para insertar una sangría de 2 espacios. Al presionar "Enter", el editor mantiene automáticamente el nivel de sangría de la línea anterior. Al cerrar una llave "}" o una barra "/", el editor reduce la sangría de forma automática.
Si necesitas más espacio para escribir código extenso, haz clic en el botón ubicado en la esquina superior derecha del editor para abrirlo en una ventana flotante independiente. Los cambios que hagas ahí se sincronizan automáticamente con el panel del editor. Si cierras la ventana flotante sin guardar, los cambios se conservan en el panel del editor; si cierras la pestaña del navegador donde se abrió, el estado del panel no se ve afectado.
El editor valida el código automáticamente después de que dejas de escribir, y muestra los errores debajo del campo de texto con el número de línea y columna donde ocurren. Si hay muchos errores, se muestran los primeros y el resto se agrupa como "+ N más".
En modo HTML, el editor revisa que las etiquetas estén bien abiertas y cerradas, que no haya comentarios ni comillas sin cerrar, y valida por separado el contenido de las etiquetas <style> y <script>. En modo CSS, la validación es más estricta.
Un CSS inválido bloquea el guardado del bloque. Un HTML o JavaScript inválido muestra la advertencia, pero te permite guardar igual.
El campo de código admite hasta 50.000 caracteres. El editor te avisa apenas alcanzas ese límite, y no vas a poder guardar el bloque si lo superas.
Helpjuice Info Callout Title
Si estás agregando este bloque dentro de una sección personalizada, solo puedes sumar un bloque de Código por sección. Si necesitas otro, agrega una nueva sección personalizada.
¿Qué bloques puedo agregar en sección Barra de navegación?
La sección Barra de navegación tiene su propio menú de bloques, distinto al del resto de las secciones. Permite agregar hasta 3 bloques
Anuncios
Sirve para mostrar mensajes cortos y rotativos en la barra de navegación, por ejemplo "Envíos a todo el país" o "20% de descuento en tu primera compra".
Al agregar el bloque, haz clic en "+ Agregar Anuncio" para sumar cada mensaje. En cada uno, completa el "Texto" que quieres mostrar y, de forma opcional, un "Link" de destino. Puedes agregar tantos anuncios como necesites: se van a rotar entre ellos en la barra de navegación.
En "Disposición", elige la "Alineación en computadoras" (izquierda, centro o derecha). En "Diseño", ajusta la "Separación entre elementos".
Redes sociales
Sirve para mostrar los íconos de tus redes sociales en la barra de navegación, por ejemplo Instagram o Facebook, y facilitar que tus clientes te encuentren en ellas.
En "Disposición", elige la "Alineación en computadoras" (izquierda, centro o derecha). En "Diseño", ajusta la "Separación entre elementos".
Este bloque muestra las redes sociales que ya tengas configuradas en tu administrador, no tiene campos propios para completar. Si todavía no las agregaste, sigue los pasos en cómo agregar los íconos de mis redes sociales.
Datos de contacto
Sirve para mostrar tus datos de contacto, que hayas configurado en tu administrador, en la barra de navegación, por ejemplo tu teléfono o WhatsApp, y facilitar que tus clientes se comuniquen contigo.
Activa "Mostrar teléfono", "Mostrar WhatsApp" y "Mostrar e-mail" según los datos que quieras que aparezcan.
En "Disposición", elige la "Alineación en computadoras" (izquierda, centro o derecha). En "Diseño", ajusta la "Separación entre elementos".
Menú
Sirve para mostrar un menú de navegación adicional dentro de la barra, por ejemplo un submenú de categorías o de páginas de contenido.
En "Menú a mostrar", elige el menú que ya tengas creado en tu tienda.
En "Disposición", elige la "Alineación en computadoras" (izquierda, centro o derecha). En "Diseño", ajusta la "Separación entre elementos".
Íconos informativos
Sirve para destacar información breve con un ícono, por ejemplo envíos gratis, formas de pago o políticas de devolución, dentro de la barra de navegación.
Al agregar el bloque, haz clic en "+ Agregar Ícono y texto" para sumar cada ítem. En "Tipo de ícono", elige entre "Íconos del diseño" o "Imagen propia" para subir tu propio ícono.
Si eliges "Íconos del diseño", puedes seleccionar entre estas opciones: Envío, Tarjeta de crédito, Seguridad, Devoluciones, Efectivo, Promociones, Bolsa, Carrito, Tienda, Regalo, Favoritos, Estrella, Teléfono, Correo, Ubicación, Internacional, Calendario, Verificado y WhatsApp.
Completa la "Descripción" con el texto del beneficio y, de forma opcional, un "Link" de destino. Puedes agregar tantos ítems como necesites.
¡Listo!
Ya conoces los bloques que puedes agregar en las secciones de tu tienda con el diseño Ipanema. Para conocer las secciones disponibles y sus bloques predeterminados, consulta el catálogo de secciones disponibles con el diseño Ipanema.