Cuadro de información

Casi todas las páginas terminan necesitando una fila de tarjetas pequeñas que combinan un ícono con un título corto y una línea de texto. Características, servicios, pasos, datos de contacto, todos de la misma forma. El Cuadro informativo widget adentro Complementos maestros para Elementor construye esa tarjeta. Elige un ícono o imagen, escribe un título y una descripción, elige uno de los cuatro diseños ya preparados y diseña cada pieza desde el panel Elementor.

Es uno de esos widgets a los que terminas buscando constantemente, ya que un ícono, un encabezado y una oración cubren muchas secciones de un sitio. A continuación se muestra un recorrido por cada configuración, desde los ajustes preestablecidos de estilo hasta los controles de ícono, título y descripción.

Qué hace el widget Info Box #

Un cuadro de información apila un ícono o imagen encima de un título y una breve descripción. Los cuatro ajustes preestablecidos de estilo significan que el mismo contenido puede parecer una tarjeta llena, una tarjeta con borde o un bloque centrado limpio, y puede alinear varios uno al lado del otro para formar una fila de funciones.

El título se puede vincular a cualquier lugar, el ícono se puede intercambiar por una imagen cargada y la tarjeta puede llevar su propio fondo, borde y animación flotante. Hay tres pestañas: Contenido del icono, título y texto, Estilo para colores y espaciado, y Avanzado para las opciones habituales de Elementor.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
• Un icono en mente o una imagen para cargar, además del título y el texto de la descripción.

Cómo agregar el widget Info Box #

En el editor Elementor, abra el Elementos panel y búsqueda Cuadro informativo, o desplácese hasta la sección Complementos maestros. Arrastrarlo a su página. Se carga con un ícono de muestra, un “Título del cuadro de información” y una descripción del marcador de posición, para que comience desde una tarjeta de trabajo en lugar de una en blanco.

Configura el contenido #

Abre el Contenido pestaña. El Contenido la sección contiene todo lo que muestra la tarjeta y es donde ocurre la mayor parte de su edición.

• Preestablecido de estilo: elija las variaciones uno a cuatro. Cada uno presenta el ícono, el título y la descripción de manera diferente (más sobre estos a continuación).
• Imagen o icono: un interruptor de tres vías para Ninguno, Icono o Imagen. Elija Icono para usar la biblioteca de iconos o Imagen para cargar la suya propia.
• Icon: cuando se selecciona Icono, elija cualquier icono de la biblioteca Font Awesome o cargue un SVG.
• Título: el texto del titular, con una opción Escribir con IA al lado.
• Url titului: convierta el título en un enlace a cualquier página o URL externa.
• Descripción: la o dos líneas de texto bajo el título, también con Escribir con IA.

Debajo de ellos encontrarás un Documentos de ayuda enlace y a Enlace envolvente opción (una función Pro) que hace que se pueda hacer clic en toda la tarjeta.

Elija un estilo preestablecido #

Los cuatro ajustes preestablecidos cambian todo el aspecto sin tocar su contenido, por lo que cambiar entre ellos es una forma rápida de encontrar el diseño que se ajuste a la sección.

• Variación uno: una tarjeta centrada con el icono, el título y la descripción apilados, a menudo sobre un fondo lleno.
• Variación dos: una carta con borde con el icono alineado a la izquierda encima del título.
• Variación tres: una tarjeta con el icono colocado en un bloque cuadrado de color encima del encabezado.
• Variación cuatro: un diseño centrado con el icono dentro de una insignia circular.

Utilice una imagen en lugar de un icono #

Si una foto o logotipo encaja mejor que un icono, configúrelo Imagen o icono a Imagen y elija un archivo de la biblioteca multimedia. Luego, el widget muestra su imagen en la ranura de iconos, lo que funciona bien para logotipos de socios, miniaturas de productos o tarjetas de funciones ilustradas. Vuelva a configurarlo Ninguno cuando quieras un cuadro de solo texto.

Estila la caja #

El Estilo la pestaña se divide en Estilos generales, Estilo icono, Título, Descripción, y Patrones (una opción profesional). General Styles controla el propio contenedor de tarjetas.

• Tipo de borde, ancho y color: el contorno alrededor de la tarjeta.
• Radiu de border: alrededor de las esquinas.
• Relleno y margen: espaciado dentro y alrededor de la caja.
• Antecedentes: establezca un fondo normal y otro flotante, ya sea de color sólido o de imagen.
• Animación flotante: agregue un efecto de movimiento incorporado como Bob o Grow cuando alguien coloque la tarjeta en el suelo.

Estilo de iconos, títulos y descripciones #

El Estilo icono la sección establece el tamaño, el color y el fondo del ícono, con estados Normal y Hover separados más alineación.

El Título y Descripción las secciones manejan la tipografía, el color, la alineación y el espaciado del texto. Cada uno tiene sus propios estados Normal y Flotante, por lo que la tarjeta puede moverse a medida que los visitantes se mueven sobre ella.

Opciones de imagen y color de fondo #

De vuelta en General Styles, el Antecedentes el control toma cualquiera de los dos un sólido Color o un Imagen. Un fondo teñido con texto blanco, como la tarjeta llena “Acerca de nosotros”, es una manera fácil de hacer que una caja se destaque en una fila de otras simples.

El resultado en la página #

Publique o obtenga una vista previa y los cuadros se representarán con sus íconos, títulos y descripciones en su lugar. Aquí hay una fila de tres cuadros de información, cada uno con un estilo preestablecido diferente, el tipo de diseño que se adapta a una sección de características o servicios.

Casos de uso comunes #

• Destacados destacados en una fila de tres o cuatro columnas debajo del héroe.
• Servicios u ofertas cada uno con un icono y un resumen de una línea.
• Pasos de cómo funciona con un icono numerado o temático por paso.
• Detalles de contacto como teléfono, correo electrónico y dirección como cuadros vinculados.
• Acerca de o llamadas del equipo usando el fondo completo preestablecido para destacar.

Consejos para trabajar con el widget Info Box #

• Mantenga las descripciones breves. Una o dos líneas se leen mejor y mantienen una fila de cartas igualadas.
• Haga coincidir los tamaños de los íconos en una fila. Establezca el mismo tamaño de icono en cada cuadro para que se alineen. Esto es lo que normalmente desaparece cuando las cartas no coinciden del todo.
• Utilice un ajuste preestablecido por fila. Mezclar ajustes preestablecidos en la misma fila tiende a parecer desigual; En su lugar, cambie el color de fondo cuando desee resaltar uno.
• Vincula el título o el envoltorio. Envíe personas a algún lugar útil con la URL del título o haga que se pueda hacer clic en toda la tarjeta con Wrapper Link.
• Agregue una sutil animación flotante. Un pequeño Bob o Grow en señales flotantes la tarjeta es interactiva sin estorbar.

Preguntas frecuentes #

Envolviendo #

El widget Info Box convierte un icono, un título y una oración en una tarjeta limpia que puede repetir en cualquier sección. Elija un ajuste preestablecido, elija un ícono o imagen, agregue su texto y enlaces, luego diseñe el cuadro para que coincida con su página. Para herramientas de diseño relacionadas, consulte Widget Flipbox y el Widget de miembro del equipo, navega por completo Widgets y extensiones de complementos maestros, y comprueba el página de precios por lo que incluye cada plan.