El bloque de alternancia de contenido te permite mostrar dos secciones de texto diferentes con un interruptor interactivo. Este bloque proporciona una forma cómoda y eficaz de presentar varios conjuntos de información en tu sitio web, permitiendo a los usuarios cambiar fácilmente entre diferentes áreas de contenido de texto.
Con el bloque de alternancia de contenido, puedes crear pantallas de comparación, mostrar planes de precios alternativos, presentar escenarios de antes y después o entregar cualquier tipo de contenido de texto conmutables. Esto crea una experiencia de navegación sin desorden, al tiempo que 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 de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Alternancia de contenido en la sección deseada de tu página.
Localiza el bloque de alternancia de 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 de alternancia de 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 alternarán.
Área de contenido 1:
- Encabezado 1: Introduce el texto del encabezado que aparecerá encima de la primera área de contenido. Esta etiqueta ayuda a los usuarios a entender qué contenido están viendo.
- Contenido de la sección: Elige si quieres mostrar contenido de texto personalizado, contenido existente de tu sitio o partes de plantilla en la primera área de alternancia.
- Contenido 1: Añade tu contenido de texto que aparecerá cuando el interruptor esté en la primera posición.
Área de contenido 2:
- Encabezado 2: Introduce el texto del encabezado que aparecerá encima de la segunda área de contenido. Esta etiqueta describe la opción de contenido alternativa.
- Contenido de la sección: Elige si quieres mostrar contenido de texto personalizado, contenido existente de tu sitio o partes de plantilla en la segunda área de alternancia.
- Contenido 2: Añade tu 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: Personaliza el Diseño
En la pestaña Avanzado, puedes personalizar la apariencia visual de tu bloque de alternancia de contenido:
Encabezado / Contenido:
- Tipografía del Encabezado 1: Personaliza la familia de fuentes, el tamaño, el peso, la altura de línea y el espaciado entre letras del primer encabezado. Haz clic en Editar para acceder a los controles de tipografía detallados.
- Tipografía del Encabezado 2: Personaliza la familia de fuentes, el tamaño, el peso, la altura de línea y el espaciado entre letras del segundo encabezado. Haz clic en Editar para acceder a los controles de tipografía detallados.
- Tipografía del Contenido 1: Personaliza los ajustes de tipografía para la primera área de contenido de texto. Haz clic en Editar para acceder a los controles de tipografía detallados.
- Tipografía del Contenido 2: Personaliza los ajustes de tipografía para la segunda área de contenido de texto. Haz clic en Editar para acceder a los controles de tipografía detallados.
- Color del encabezado 1: Establece el color del texto del primer encabezado para que coincida con el diseño de tu página
- Color del encabezado 2: Establece el color del texto del segundo encabezado para que coincida con el diseño de tu página
- Color del contenido 1: Establece el color del texto de la primera área de contenido
- Color del contenido 2: Establece el color del texto de la segunda área de contenido
- Color de fondo: Establece el color de fondo de todo el bloque de alternancia de contenido
Conmutador:
- Estilo del conmutador: Elige el estilo visual de tu interruptor de alternancia. Las opciones incluyen Redondo (interruptor circular), Cuadrado (interruptor rectangular) y Caja de etiqueta (interruptor basado en texto con estilo de caja)
- Tamaño del conmutador: Selecciona el tamaño de tu interruptor de alternancia. Las opciones incluyen Grande, Mediano, Pequeño y Mini para que coincidan con las necesidades de tu diseño
- Primer color de fondo: Establece el color de fondo de la primera posición de alternancia (cuando el Área de contenido 1 está activa)
- Segundo color de fondo: Establece el color de fondo de la segunda posición de alternancia (cuando el Área de contenido 2 está activa)
- Color del conmutador: Establece el color del propio elemento del interruptor de alternancia
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de alternancia de contenido (Superior, Derecho, Inferior, Izquierdo). Esto determina cuánto espacio aparece entre el interruptor y los elementos circundantes
- Relleno: Ajusta el espaciado interior dentro de tu bloque de alternancia de contenido (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre el contenido de texto y los bordes del bloque
Atributos:
- ID de CSS: Muestra el identificador único generado automáticamente para tu bloque de alternancia de contenido. Esta ID es creada automáticamente por SeedProd para estilos personalizados o para la segmentación con JavaScript
- Clase personalizada: Agrega clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: Agrega cualquier atributo HTML al elemento contenedor del interruptor. Ingresa cada atributo en una nueva línea usando el formato: nombre-del-atributo|valor (por ejemplo, data-section|comparison)
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de alternancia de contenido en pantallas de escritorio
- Ocultar en tableta: Oculta el bloque de alternancia de contenido en dispositivos tableta
- Ocultar en móvil: Oculta 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 bloque de alternancia de contenido aparece en la vista. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Rotación de entrada y muchas más. Esto ayuda a atraer la atención a tu interruptor interactivo y crea interés visual
Personaliza la tipografía, los colores, la apariencia del interruptor de alternancia y el espaciado en la pestaña Avanzado.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de alternancia de contenido y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has agregado con éxito un bloque de alternancia de contenido a tu página! El bloque de alternancia de contenido mejora la participación del usuario al proporcionar una forma interactiva de presentar opciones de contenido de texto alternativas sin saturar tu página. Experimenta con diferentes estilos de interruptor, colores y combinaciones de contenido para crear una comparación efectiva o una visualización de información que sirva a tu audiencia.