Casi todas las páginas acaban necesitando una fila de tarjetas pequeñas que combinan un icono con un título corto y una línea de texto. Características, servicios, pasos, datos de contacto, todos de la misma forma. El gratis Widget de cuadro de información en Complementos maestros para Elementor construye esa tarjeta. Elige un ícono o imagen, escribe un título y una descripción, elige un estilo preestablecido (cinco son gratis, diez con Pro) y diseña cada parte 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 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 elemento 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 cinco en el complemento gratuito o seis a diez con Master Addons Pro. Cada uno establece 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.
- Icono: 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.
- Leer más Texto y Leer más Enlace: estos aparecen solo con la Variación Seis, que necesita Pro.
Debajo de ellos encontrarás un Documentos de ayuda enlace y a Enlace envolvente sección de lo libre Extensión de enlace envolvente eso hace que se pueda hacer clic en toda la tarjeta.
Elija un estilo preestablecido #
Los 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 a cinco (gratis): cada uno organiza el icono, el título y la descripción de manera diferente. La Variación Dos y Tres agregan una copia grande y descolorida del ícono detrás de la tarjeta, y la Variación Cinco establece el ícono en forma hexagonal.
- Variación Seis a Diez (Pro): cinco diseños más. Variation Six agrega el botón Leer más y una opción de fondo de ícono degradado.
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 (de la extensión Patterns gratuita). General Styles controla el propio contenedor de la tarjeta.
- 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 ruborizarse 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.
Para ajustes preestablecidos, demostraciones y una comparación con Elementor Icon Box, consulte Página del widget del cuadro de información.
Preguntas frecuentes #
¿qué es el widget Info Box en Master Addons?
Es un widget Elementor que combina un icono o imagen, un título y una breve descripción en una tarjeta con estilo. Obtienes cinco ajustes preestablecidos de estilo gratuitos (diez con Pro) y control sobre colores, espaciado y efectos de desplazamiento, para que puedas crear filas de funciones, listas de servicios y llamadas directamente desde el panel.
¿cuántos ajustes preestablecidos de estilo tiene el cuadro de información?
Diez. Las variaciones uno a cinco son gratuitas y las variaciones seis a diez necesitan Master Addons Pro. Cada uno organiza y decora el icono, el título y la descripción de manera diferente. Cambias entre ellos desde el menú desplegable Estilo preestablecido sin rehacer tu contenido.
¿Puedo usar una imagen en lugar de un ícono?
Sí. En la pestaña Contenido, configure Imagen o Icono en Imagen y elija un archivo de la Biblioteca multimedia. El widget muestra su imagen en lugar del icono, lo que funciona bien para logotipos, tomas de productos o tarjetas ilustradas. Elija Ninguno para un cuadro de solo texto.
¿Puedo hacer que se pueda hacer clic en el cuadro de información?
Puede vincular el título con el campo URL del título en la pestaña Contenido. Para que se pueda hacer clic en toda la tarjeta, utilice la opción Enlace envolvente, desde la extensión gratuita Enlace envolvente. Ambos permiten a los visitantes tocar el cuadro para llegar a otra página o sección.
¿puedo agregar un efecto flotante al cuadro de información?
Sí. General Styles tiene un menú desplegable Hover Animation con efectos integrados como Bob y Grow, y las secciones de Icono, Título y Descripción tienen cada una sus propios estados Hover para color y fondo. Juntos dejan que la tarjeta reaccione cuando alguien se mueve sobre ella.
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.
