Elementor

Cómo añadir una caja de doble cara en Elementor

Cómo añadir una caja de doble cara en Elementor

Tabla de contenidos

¿Qué es el widget de Caja de doble cara en Elementor?

El Widget de Caja de doble cara en Elementor te permite añadir una caja interactiva que se puede girar para mostrar contenido diferente en cada lado. Es útil si quieres mostrar información adicional o detalles extra sin ocupar más espacio en tu página web.

¿Cómo usar el widget de Caja de doble cara en Elementor?

El Widget está dividido en tres elementos: Anverso, Atrás y Ajustes

Paso 1. Añade el Widget al lienzo

Widget Caja de doble cara
Widget Caja de doble cara en Elementor

Haz clic en el Widget de Caja de doble clara, luego arrástralo y suéltalo dentro del lienzo.

Paso 2. Edita el Anverso de la caja de doble cara

Contenido Anverso
Contenido Anverso

En la pestaña Contenido > Anverso > Personaliza la apariencia del lado frontal de la caja de doble cara.

Paso 2.1 Edita el contenido del Anverso

Elemento gráfico: Elige si quieres mostrar un icono, una imagen o nada en el lado frontal de la caja de doble cara.

Contenido del Anverso Imagen
Contenido del Anverso Imagen

Si eliges la opción de Imagen:

  • Seleccionar imagen: Elige una imagen de la biblioteca de medio o sube una imagen nueva.
  • Resolución de la imagen: Elige un tamaño para la imagen.

Revisa el tutorial Cómo insertar una imagen en Elementor para saber más.

Contenido del Anverso Icono
Contenido del Anverso Icono

Si eliges la opción de Icono:

  • Icono: Selecciona un icono de la biblioteca de FontAwesome o sube un icono personalizado en formato SVG.
  • Ver: Elige entre Por defecto, Apilados o Encuadrado.
  • Forma: Si has elegido Apilado o Encuadrado, elige Círculo o Cuadrado.

Revisa el tutorial Cómo añadir iconos en Elementor para saber más.

Título y Descripción
Título y Descripción

Título y descripción: Escribe un título y una descripción para que aparezca debajo de la imagen o icono que hayas elegido.

Paso 2.2 Edita el Fondo del contenido

Tipo de fondo: Elige un color, una imagen o un degradado como fondo de la parte frontal de la caja de doble cara.

Anverso Fondo Color
Anverso Fondo Color

Si eliges la opción de Color:

  • Color: Elige un color para el fondo.
Anverso Fondo Imagen
Anverso Fondo Imagen

Si eliges la opción de Imagen:

  • Posición: Elige una posición para la imagen.
  • Adjunto: Elige entre Por defecto, Desplazamiento o Fijo.
  • Repetir: Elige si quieres o no que se repita la imagen de fondo.
  • Tamaños de pantalla: Elige cómo quieres que se muestre la imagen de fondo.
  • Capa de fondo: Elige un color para que oscurezca la imagen de fondo.
Anverso Fondo Degradado
Anverso Fondo Degradado

Si eliges la opción de Degradado:

  • Color: Elige un color principal para el degradado.
  • Ubicación: Elige la ubicación del color principal.
  • Segundo color: Elige un color secundario para el degradado.
  • Ubicación: Elige la ubicación para el color secundario.
  • Tipo: Elige entre Radial o Lineal.
  • Ángulo: Establece el ángulo del degradado.

Paso 3. Edita el Reverso de la caja de doble cara

La parte trasera de la caja de doble cara tiene los mismos ajustes que la parte delantera. Por eso, a continuación, solo te explicaré los ajustes nuevos.

Texto del botón y Enlace
Texto del botón y Enlace

Texto del botón: Escribe el texto que aparece en el botón

Enlace: Usa el campo Enlace para añadir la opción de hacer clic en tu Cuadro de imagen. Puedes elegir entre: Ninguno, Archivo de medios y URL personalizada. Haz clic en el icono de ajustes (⚙️) para configurar el enlace. Ahora tienes la opción de abrir en enlace en una nueva pestaña o añadir la etiqueta “nofollow”. Además, puedes añadir atributos personalizados al enlace. Para hacerlo, separa las claves de los valores usando el carácter ‘|’ (barra vertical) y separa los pares de valores-clave con una coma.

Paso 4: Personaliza los ajustes de la caja de doble cara

Ajustes de la Caja de doble cara
Ajustes de la Caja de doble cara
  • Etiqueta HTML de título y descripción: Elige la etiqueta HTML para el título y la descripción de tu caja de doble. Esto ayudará a los motores de búsqueda a entender mejor la jerarquía de información y mejorará el SEO. Puedes elegir entre H1 y H6, párrafo, span o div.
  • Alto: Usa el control deslizante para establecer la altura de la caja de doble cara.
  • Radio de borde: Usa este ajuste para redondear las esquinas.
  • Efecto de voltero: Elige uno de los efecto que ofrece Elementor.
  • Dirección de volteo: Si eliges los efectos de voltear o deslizar, puedes elegir la dirección hacia la que se reproduce el efecto.
  • Profundidad 3D: Activa esta opción para añadir un efecto de profundidad al girar la caja de doble cara. Usa esta opción con cuidado, ya que algunos navegadores, como Safari, no la soportan y puede no verse bien.

Paso 5. Personaliza el estilo de la caja de doble cara

Estilo Anverso y Reverso
Estilo Anverso y Reverso

Personaliza el estilo de la parte delantera y trasera.

Escrito por:

Richi Pérez

Richi Pérez

11/06/2024

Tutoriales de WordPress y diseño

Sigue aprendiendo

Tutoriales de WordPress y Elementor para conocer todos los recursos disponibles

¿Por qué usar fuentes y colores globales en Elementor? Para unificar el aspecto de un sitio web, es...

¿Qué es el widget de Valoración en Elementor? El Widget de Valoración en Elementor te permite añadir valoraciones...

¿Qué es el widget de Indicador de avance en Elementor? El Widget de Indicador de avance en Elementor...