Con las secciones personalizadas, podés 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 podés 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 sabés cómo agregar secciones en tu tienda, revisá 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é podés 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 querés 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 tenés 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), podés 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 querés 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 podés 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), consultá ¿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, podés sumarle los bloques que quieras. Seguí estos pasos:
1. Dentro de la sección personalizada, hacer clic en "+ Agregar bloque".
2. Elegir el bloque que querés 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 tenés 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. Hacé 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 querés 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 querés 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 agrupás (vertical u horizontal), activar "Dirección diferente para celulares" si querés 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 querés insertar HTML, CSS o JavaScript propio (y no solo CSS), podés hacerlo con el bloque "Código". Solo se admite un bloque de código por sección: si necesitás otro, crear una nueva sección personalizada.
Para agregarlo, seguí 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 tenés tu código propio funcionando dentro de la sección personalizada.
Si querés conocer más sobre el diseño Ipanema y sus funcionalidades, consultá: