Con las secciones personalizadas, puedes armar tus propias secciones dentro del editor de diseño Ipanema combinando los bloques que quieras: botón, imagen, título, descripción, separador y grupo. También puedes sumar un bloque de código propio para insertar HTML, CSS y JavaScript directamente en tu tienda sin abrir el FTP.
Esta funcionalidad te da libertad para crear diseños a medida sin depender de las secciones predefinidas. Si todavía no sabes cómo agregar secciones en tu tienda, revisa primero cómo gestionar las páginas y secciones con el diseño Ipanema.
En este tutorial te explicamos cómo agregar una sección personalizada, qué puedes configurar en ella, cómo sumarle bloques y qué opciones de personalización tiene cada uno.
¿Cómo agregar una sección personalizada?
Para agregar una sección personalizada a tu tienda, seguí estos pasos:
1. Ingresar al administrador de la tienda y acceder a "Tienda online" en el menú lateral izquierdo.
2. Hacer clic en "Editar diseño" para abrir el editor de diseño Ipanema.
3. En la página donde quieres incluir la nueva sección, hacer clic en "Agregar sección".
4. Elegir la sección "Personalizada" dentro del listado de secciones disponibles y hacer clic en el botón "Agregar".
Ahora tienes la sección personalizada creada, lista para configurar y para sumarle los bloques que quieras.
¿Qué se puede configurar en la sección personalizada?
Haciendo clic sobre la sección (no sobre un bloque en particular), puedes ajustar los siguientes campos desde el panel lateral.
En "Disposición", elegir la "Dirección" en la que se acomodan los bloques (vertical u horizontal). Activar "Dirección diferente para celulares" si quieres que se acomoden distinto en estos dispositivos, y elegir esa dirección en "Dirección para celulares".
Con "Alineación", definir la posición de los bloques dentro de la sección, tanto en el eje horizontal (izquierda, centro o derecha) como en el vertical (arriba, centro o abajo).
En "Diseño", elegir el "Ancho" de la sección: "Página" para que respete el ancho estándar del contenido, o "Completo" para que ocupe todo el ancho de la pantalla. Con "Separación entre elementos", definir el espacio entre los bloques, y con "Espaciado superior e inferior" y "Espaciado izquierdo y derecho", ajustar el margen interno de la sección (este último solo se habilita si elegiste "Completo" en "Ancho").
En "Colores", elegir el "Color de fondo" y el "Color del texto" de la sección desde el selector de color.
Además, desde el mismo panel puedes desplegar "CSS personalizado" para agregar estilos que se aplican únicamente a esta sección, sin afectar el resto de la tienda.
Helpjuice Info Callout Title
Si tu objetivo es agregar estilos CSS a toda la tienda (y no solo a esta sección), consulta ¿Cómo personalizar mi tienda con códigos CSS en el diseño Ipanema?
¿Cómo agregar bloques a la sección personalizada?
Con la sección personalizada ya creada, puedes sumarle los bloques que quieras. Sigue estos pasos:
1. Dentro de la sección personalizada, hacer clic en "+ Agregar bloque".
2. Elegir el bloque que quieres incluir: "Botón", "Imagen", "Título", "Descripción", "Separador", "Grupo" o "Código".
3. Repetir el paso anterior por cada bloque que quieras sumar a la sección.
4. Hacer clic en cada bloque para personalizar su contenido y su estilo desde el panel lateral.
¡Listo!
Ya tienes tu sección personalizada armada con los bloques que elegiste.
¿Qué se puede configurar en cada bloque?
Cada bloque tiene su propio panel de configuración. Haz clic en el bloque correspondiente para ver el detalle:
Botón
En "Texto del botón", escribir el texto que va a mostrar el botón, y en "Link del botón", agregar la URL de destino.
En "Diseño", elegir el "Ancho": "Ajustar" para que el botón se acomode al tamaño del texto, o "Rellenar" para que ocupe todo el ancho disponible.
En "Estilo", elegir el "Estilo" visual ("Principal", "Secundario" o "Terciario"), el "Tamaño" ("Chico", "Mediano" o "Grande"), y el "Color de fondo" y "Color del texto" del botón.
Título
En "Texto", escribir el contenido del título con el editor de texto enriquecido (negrita, cursiva, subrayado, color, links, listas).
En "Diseño", elegir el "Ancho" del bloque ("Ajustar" o "Rellenar").
En "Ajustes de texto", elegir el nivel de "Estilo" desde el desplegable. Podés seleccionar hasta 6 niveles de estilo. También podés usar la opción Personalizado para crear un estilo propio definiendo la fuente y el tamaño en píxeles. Activar "Tamaño diferente para celulares" si querés definir un tamaño distinto para esa vista.
Imagen
En "Imagen", subir o seleccionar la imagen que querés mostrar. Activar "Usar otra imagen para celulares" si quieres mostrar una imagen distinta en estos dispositivos, y agregar un "Link" si querés que la imagen funcione como acceso a otra página.
En "Diseño", elegir el "Ancho" del bloque ("Ajustar" o "Rellenar").
Descripción
En "Texto" escribir el contenido con el editor de texto enriquecido.
En "Diseño", elegir el "Ancho" del bloque ("Ajustar" o "Rellenar").
En "Ajustes de texto", elegir el "Tamaño" ("Chico", "Mediano" o "Grande").
Separador
En "Diseño", ajustar el "Espaciado" alrededor del separador con el slider.
Activar "Línea divisoria" si quieres mostrar una línea visible, y elegir su "Color de línea" (este campo solo aparece si activaste la línea divisoria).
Grupo
En "Disposición", elegir la "Dirección" de los bloques que agrupas (vertical u horizontal), activar "Dirección diferente para celulares" si quieres una dirección distinta en esa vista, y definir la "Alineación" de los bloques dentro del grupo, tanto en el eje horizontal como en el vertical.
En "Diseño", elegir el "Ancho" del grupo ("Ajustar" o "Rellenar") y ajustar la "Separación entre elementos", el "Espaciado superior e inferior" y el "izquierdo y derecho".
En "Colores", elegir el "Color de fondo" y el "Color del texto" del grupo.
Código
Si quieres insertar HTML, CSS o JavaScript propio (y no solo CSS), puedes hacerlo con el bloque "Código". Solo se admite un bloque de código por sección: si necesitas otro, crear una nueva sección personalizada.
Para agregarlo, sigue estos pasos:
1. Una vez que lo hayas incorporado la sección Personalizada, escribir o pegar el código en el campo de texto. Podés incluir HTML, CSS dentro de etiquetas <style> y JavaScript dentro de etiquetas <script>.
2. En "Diseño" elegir el ancho del bloque: "Ajustar" para que se acomode al contenido, o "Relleno" para que ocupe todo el ancho del contenedor.
3. Guardar y publicar los cambios.
Helpjuice Warning Callout Title
El editor te avisa si hay errores de sintaxis, pero solo el CSS inválido bloquea el guardado. El código se publica en tu tienda tal como lo escribiste, sin que Tiendanube lo modifique: sos responsable de su contenido. El campo admite hasta 50.000 caracteres.
¡Listo!
Ya tienes tu código propio funcionando dentro de la sección personalizada.
Si quieres conocer más sobre el diseño Ipanema y sus funcionalidades, consulta: