El bloque «Contenido alternativo» te permite mostrar dos secciones de texto diferentes con un interruptor interactivo. Este bloque ofrece una forma cómoda y eficaz de presentar varios conjuntos de información en tu sitio web, lo que permite a los usuarios cambiar fácilmente entre diferentes áreas de contenido de texto.
Con el bloque Content Toggle, puedes crear comparativas, mostrar planes de precios alternativos, presentar escenarios antes y después, o ofrecer cualquier tipo de contenido de texto intercambiable. Esto crea una experiencia de navegación sin distracciones y maximiza el valor del espacio de tu página.
Añadir el bloque de alternancia de contenido a tus páginas
Sigue estos pasos para añadir un bloque de alternancia de contenido a tu página SeedProd:
Paso 1: Añadir el bloque
En Diseño > Bloques, arrastra y suelta el bloque Alternar contenido en la sección deseada de tu página.
Busca el bloque «Alternar contenido» en el panel de bloques y arrástralo a la ubicación deseada en la página.
Paso 2: Configurar los ajustes de contenido
Una vez añadido, haz clic en el bloque «Alternar contenido» para abrir su configuración. En la pestaña «Contenido», puedes configurar las dos áreas de contenido de texto entre las que los usuarios podrán alternar.
Área de contenido 1:
- Título 1: Introduzca el texto del título que aparecerá encima de la primera área de contenido. Esta etiqueta ayuda a los usuarios a comprender qué contenido están viendo.
- Contenido de la sección: elija si desea mostrar contenido de texto personalizado, contenido existente de su sitio o partes de la plantilla en la primera área de alternancia.
- Contenido 1: Añade el contenido de texto que aparecerá cuando el interruptor esté en la primera posición.
Área de contenido 2:
- Título 2: Introduzca el texto del título que aparecerá encima de la segunda área de contenido. Esta etiqueta describe la opción de contenido alternativo.
- Contenido de la sección: elige si deseas mostrar contenido de texto personalizado, contenido existente de tu sitio o partes de plantillas en la segunda área de alternancia.
- Contenido 2: Añade el contenido de texto que aparecerá cuando el interruptor se cambie a la segunda posición.
Configura los encabezados y el contenido de texto para ambas áreas de alternancia en la pestaña Contenido.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes personalizar la apariencia visual de tu bloque Contenido alternativo:
Encabezado / Contenido:
- Encabezado 1 Tipografía: Personaliza la familia de fuentes, el tamaño, el grosor, la altura de línea y el espaciado entre letras del primer encabezado. Haz clic en Editar para acceder a los controles detallados de tipografía.
- Tipografía del encabezado 2: personaliza la familia tipográfica, el tamaño, el grosor, la altura de línea y el espaciado entre letras del segundo encabezado. Haz clic en Editar para acceder a los controles tipográficos detallados.
- Contenido 1 Tipografía: personaliza la configuración tipográfica del primer área de contenido de texto. Haz clic en Editar para acceder a los controles tipográficos detallados.
- Contenido 2 Tipografía: personaliza la configuración tipográfica del segundo área de contenido de texto. Haz clic en Editar para acceder a los controles tipográficos detallados.
- Color del encabezado 1: Establezca el color del texto del primer encabezado para que coincida con el diseño de su página.
- Color del título 2: Establezca el color del texto del segundo título para que coincida con el diseño de su página.
- Contenido 1 Color: Establece el color del texto para el primer área de contenido.
- Color del contenido 2: Establece el color del texto para la segunda área de contenido.
- Color de fondo: Establece el color de fondo para todo el bloque de alternancia de contenido.
Conmutador:
- Estilo del interruptor: elige el estilo visual de tu interruptor de palanca. Las opciones incluyen Redondo (interruptor circular), Cuadrado (interruptor rectangular) y Cuadro de etiqueta (interruptor basado en texto con estilo de cuadro).
- Tamaño del interruptor: Seleccione el tamaño de su interruptor de palanca. Las opciones incluyen grande, mediano, pequeño y mini para adaptarse a sus necesidades de diseño.
- Color de fondo primero: Establece el color de fondo para la primera posición del conmutador (cuando el área de contenido 1 está activa).
- Segundo color de fondo: Establece el color de fondo para la segunda posición del conmutador (cuando el área de contenido 2 está activa).
- Color del conmutador: Establece el color del elemento del conmutador.
Espaciado:
- Margen: controla el espacio exterior alrededor del bloque Contenido alternativo (superior, derecho, inferior, izquierdo). Esto determina cuánto espacio aparece entre el alternativo y los elementos circundantes.
- Relleno: Ajusta el espacio interior dentro de tu bloque Contenido alternativo (Arriba, Derecha, Abajo, Izquierda). Esto crea un espacio entre el contenido del texto y los bordes del bloque.
Atributos:
- ID CSS: muestra el identificador único generado automáticamente para tu bloque Content Toggle. SeedProd crea este ID automáticamente para personalizar el estilo o la orientación de JavaScript.
- Clase personalizada: añade clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: añade cualquier atributo HTML al elemento contenedor del alternador. Introduce cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor (por ejemplo, data-section|comparison).
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque de alternancia de contenido en las pantallas de escritorio.
- Ocultar en tableta: Ocultar el bloque de alternancia de contenido en dispositivos tableta.
- Ocultar en dispositivos móviles: Ocultar el bloque de alternancia de contenido en dispositivos móviles.
Efectos de animación:
- Animación de entrada: elige entre varios efectos de animación que se reproducen cuando el conmutador de contenido se desplaza a la vista. Las opciones incluyen rebote, fundido de entrada, zoom, rotación y muchas más. Esto ayuda a llamar la atención sobre tu conmutador interactivo y crea interés visual.
Personaliza la tipografía, los colores, la apariencia del interruptor y el espaciado en la pestaña Avanzado.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Content Toggle y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque de alternancia de contenido a tu página! El bloque de alternancia de contenido mejora la interacción del usuario al proporcionar una forma interactiva de presentar opciones alternativas de contenido de texto sin saturar tu página. Experimenta con diferentes estilos de alternancia, colores y combinaciones de contenido para crear una comparación eficaz o una presentación de información que se adapte a tu público.