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é podés configurar en él. Para conocer los pasos para sumarlo a una sección, consultá ¿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é podés 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" escribí el texto que va a mostrar el botón, y en "Link del botón" agregá la URL de destino.
En "Estilo", elegí 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", elegí el "Tamaño" del botón ("Chico", "Mediano" o "Grande") y, si querés, un "Color de fondo" y "Color del texto" distintos a los definidos globalmente.
En "Diseño", elegí 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", cargá el archivo que querés mostrar. Activá "Usar otra imagen para celulares" si querés cargar una versión distinta para esa vista, y completá "Link" si querés que la imagen dirija a otra página al hacer clic.
En "Diseño", elegí 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.
Escribí el texto en el campo de texto, con opciones de formato como negrita, cursiva, color y enlaces.
En "Diseño", elegí 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”, elegí el "Estilo", el nivel de título: por ejemplo, "Título 1" a "Título 6" o “Personalizado” si querés establecer otro tamaño diferente. Cuanto más bajo el número, más grande y destacado se ve el texto. Activá "Tamaño para celulares" si querés 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.
Escribí el texto en el campo de texto, con opciones de formato como negrita, cursiva, color y enlaces.
En "Diseño", elegí 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", elegí 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", ajustá el "Espaciado" (en píxeles) alrededor del separador: cuanto más alto el valor, más espacio queda entre los bloques a cada lado.
Activá "Línea divisoria" si querés mostrar una línea visible en lugar de solo dejar el espacio vacío, y elegí 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", elegí 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. Activá "Dirección diferente para celulares" si querés que cambie en esa vista.
En "Alineación", definí 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", elegí el "Ancho": "Ajustar" (el grupo ocupa solo el espacio de su contenido) o "Rellenar" (ocupa todo el ancho disponible del contenedor). Ajustá 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", definí 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", elegí 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. Sos responsable del contenido que insertes.
El editor de código incluye herramientas para facilitarte la escritura y detectar errores antes de publicar.
Elegí 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 escribís, 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>. Navegá las sugerencias con las flechas del teclado y confirmá con "Enter" o "Tab".
Usá "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 necesitás más espacio para escribir código extenso, hacé 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 cerrás la ventana flotante sin guardar, los cambios se conservan en el panel del editor; si cerrás 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 dejás 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 alcanzás ese límite, y no vas a poder guardar el bloque si lo superás.
Helpjuice Info Callout Title
Si estás agregando este bloque dentro de una sección personalizada, solo podés sumar un bloque de Código por sección. Si necesitás otro, agregá 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, hacé clic en "+ Agregar Anuncio" para sumar cada mensaje. En cada uno, completá el "Texto" que querés mostrar y, de forma opcional, un "Link" de destino. Podés agregar tantos anuncios como necesites: se van a rotar entre ellos en la barra de navegación.
En "Disposición", elegí la "Alineación en computadoras" (izquierda, centro o derecha). En "Diseño", ajustá 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", elegí la "Alineación en computadoras" (izquierda, centro o derecha). En "Diseño", ajustá 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, seguí 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 con vos.
Activá "Mostrar teléfono", "Mostrar WhatsApp" y "Mostrar e-mail" según los datos que quieras que aparezcan.
En "Disposición", elegí la "Alineación en computadoras" (izquierda, centro o derecha). En "Diseño", ajustá 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", elegí el menú que ya tengas creado en tu tienda.
En "Disposición", elegí la "Alineación en computadoras" (izquierda, centro o derecha). En "Diseño", ajustá 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, hacé clic en "+ Agregar Ícono y texto" para sumar cada ítem. En "Tipo de ícono", elegí entre "Íconos del diseño" o "Imagen propia" para subir tu propio ícono.
Si elegís "Íconos del diseño", podés 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.
Completá la "Descripción" con el texto del beneficio y, de forma opcional, un "Link" de destino. Podés agregar tantos ítems como necesites.
¡Listo!
Ya conocés los bloques que podés agregar en las secciones de tu tienda con el diseño Ipanema. Para conocer las secciones disponibles y sus bloques predeterminados, consultá el catálogo de secciones disponibles con el diseño Ipanema.