Cómo crear cuadros de mensaje para su sitio web de WordPress

Que Internet haya cambiado la forma en que recibimos y procesamos la información no es solo un cliché: es la verdad. Por un lado, nuestro la capacidad de atención se está acortando: la gente tiene cada vez menos tiempo para el contenido textual. Por otro lado, no hay reemplazo para él si desea transmitir información con cualquier significado o complejidad.

Una cosa que puede hacer para evitar que sus visitantes simplemente se salten un gran cuerpo de texto es hacer que su contenido textual se pueda escanear, en caso de que todo lo que desee es resaltar algunos datos interesantes. También puede usar texto resaltado para acentos. Los cuadros de mensajes de WordPress son otra cosa que puede probar: se destacan claramente del resto del texto y transmitir fragmentos selectos de información a sus visitantes.

Le mostraremos cómo crear cuadros de mensaje para su sitio web de WordPress. Pero antes de entrar en el meollo de la cuestión, nos gustaría discutir el cuadro de mensaje en términos más generales. Si está seguro de que todo lo que necesita es saber cómo hacerlo, desplácese hacia abajo hasta la sección de tutoriales. Esto es de lo que hablaremos:

¿Qué es un cuadro de mensaje de WordPress?

Un cuadro de mensaje de WordPress es un elemento de diseño utilizado para llamar la atención de un visitante sobre una pieza de información. Consiste en un cuadro, texto y posiblemente iconos u otros gráficos. Por lo general, relacionan información importante con un visitante del sitio web y sobresalir del cuerpo principal del texto.

Además, un cuadro de mensaje normalmente se puede descartar haciendo clic en un signo X u otro tipo de icono de cierre. Una vez que el usuario obtiene la información, puede quitar el cuadro de mensaje con un simple clic del mouse y continuar con la lectura. Se ven así:

Ejemplo de cuadros de mensaje

Cuándo usar un cuadro de mensaje de WordPress

Es mejor utilizar un cuadro de mensaje cuando desee hacer que sus visitantes presten especial atención a una información discreta lo cual puede informar el resto del contenido, pero no es necesario para comprenderlo. Puede estar estrechamente relacionado con el texto, pero no es necesario.

Quizás el artículo que está leyendo un visitante no sea la primera parte de una serie. En ese caso, es posible que desee alertarlos con un cuadro de mensaje de que primero deben leer algo más. ¿Tu tienda tiene una oferta especial relacionada con el texto? Quizás puedas anunciarlo en un cuadro de mensaje. ¿Tu libro o reseña de película contiene spoilers? Será mejor que lo aclare con anticipación.

Cómo crear un cuadro de mensaje en WordPress usando complementos Qi

Se puede crear un cuadro de mensaje usando código o un complemento. Usaremos un complemento gratuito, desarrollado por nosotros, llamado Qi Addons para Elementor. Qi Addons amplía la ya formidable paleta de widgets de Elementor con 60 elementos nuevos y bellamente diseñados, uno de los cuales es el cuadro de mensaje.

En relación :  Cómo agregar el atributo de título a su menú de WordPress

Con nuestro plugin puede crear cuadros de mensajes de WordPress llamativos en cuestión de minutos. Todo lo que necesita hacer de antemano es instalar la última versión de Elementor (la versión gratuita está bien) y luego instalar Qi Addons. Junto con Qi Addons para Elementor, usaremos nuestro propio Qi Theme. Para obtener los mejores resultados, le sugerimos que también lo haga. Si ya ha invertido en otro tema, no se preocupe: Qi Addons también funcionará con él.

Qi Addons es un complemento separado diseñado para funcionar con Elementor y complementarlo, y es completamente libre. Una vez que haya instalado ambos, estará listo. Puede ver cómo crear un cuadro de mensaje en el video a continuación:

Sin embargo, si prefiere su tutorial en forma de texto, siga leyendo a continuación. Para empezar, necesita encontrar un Cuadros de mensaje elemento en el menú del lado izquierdo y arrástrelo a donde desee en la página.

Arrastrar elemento de cuadro de mensaje

Verá el cuadro de mensaje con su configuración predeterminada. Tiene un título de marcador de posición y algo de texto lorem ipsum. Puede editarlos en el General pestaña del widget.

Aspecto predeterminado de los cuadros de mensaje

No usaremos el Clase personalizada ajustes para esta demostración. Lo que haremos es cambiar el Título a Ajusta los colores de fondos, iconos, títulos y texto.. Todo se necesita solo un par de clics y borrar el texto, lo que lo convierte en un cuadro de mensaje muy simple.

Lo que también queremos hacer es cambiar los iconos. El icono en la parte superior izquierda del cuadro es el primero en su General aplicación, y se llama Icono. Desplácese para mostrar los menús, luego Biblioteca de iconos para cambiarlo.

Biblioteca de iconos de cuadros de mensaje

Una vez allí, puede elegir entre sus bibliotecas disponibles. Estaremos agregando un Marcador icono buscándolo en el campo de búsqueda, seleccionándolo y haciendo clic en Insertar.

Insertar icono de marcador

También cambiaremos el Cerrar icono, el icono de la derecha que se utiliza para cerrar el cuadro de mensaje. Para cambiar un ícono cargando una imagen .svg, coloque el cursor sobre el control y luego haga clic en Subir SVG.

Cargar Cerrar icono

Luego puede cargar una nueva imagen o seleccionar una de la biblioteca de medios, como lo haremos. Simplemente seleccione una imagen y haga clic Insertar medios cuando esté listo.

Elegir icono

Con nuestros iconos configurados, estamos listos para pasar al Estilo pestaña.

En la sección principal de la Estilo pestaña, puede encontrar muchas opciones para diseñar el título, el texto, el icono y el fondo de su widget.

Cambiaremos nuestro Etiqueta de título a H4, pero puede cambiarlo a cualquier configuración de encabezado o texto de párrafo. También puede cambiar el Color del título, lo que no haremos, y el Tipografía de título.

En el Tipografía de título configuración, puede cambiar el tipo de fuente (Familia), Tamaño (hemos puesto el nuestro en 21 píxeles), y Peso (o «audacia»). El Transformar control cambia las mayúsculas del título, el Estilo se puede utilizar para poner en cursiva la fuente o seleccionar una fuente oblicua, mientras que Decoración El control se utiliza para subrayar, sobrelizar o tachar.

En relación :  8 recursos gratuitos para poner la banda sonora a tu video social sin ser demandado

El Altura de la línea puede espaciar las líneas de un título si tiene más de uno, pero también tiene un efecto en el tamaño del cuadro, ya que reserva espacio para una línea lo suficientemente alta. Estableceremos el nuestro en 30 píxeles. El Espaciado de letras El control se usa para espaciar letras individuales del título, y no lo usaremos para este cuadro de mensaje en particular.

El Color de texto y Configuración de tipografía de texto son exactamente iguales, pero se aplican al texto, a diferencia del título. Este cuadro de mensaje en particular no tiene texto, por lo que no lo usaremos.

Color del texto y tipografía

A continuación, encontramos el Posición del icono control S. Puede colocar su icono en la parte superior, media o inferior de la línea de título. Nos gusta encima, así que lo dejaremos como está. Vamos a cambiar Color del icono a # 1e1e1e – casi negro, para que coincida con el color de fuente de nuestro título. Finalmente, configuraremos el Tamaño de ícono a 23 píxeles.

Configuración de estilo de icono de cuadro de mensaje

Los controles para el Cerrar tamaño del icono funcionan exactamente igual que para el Icono. El Cerrar color del icono control le permite elegir un color diferente para su icono. Lo configuraremos en negro (# 000000). El Cerrar icono Color de desplazamiento es el color del icono cuando el mouse del usuario lo coloca sobre él. También configuraremos esto en negro, pero con algo de transparencia (# 000000cc).

Cerrar color del icono

A continuación, encontramos el Tipo de fondo control S. Este control tiene dos modos principales: Degradado, que no usaremos, y Clásico, que lo haremos. Usaremos un fondo de color liso, azul claro (# d5eaf4), pero también puedes usar un Imagen si así lo eliges.

En la parte inferior de la Estilo sección de esta pestaña puede encontrar el Radio del borde de la caja control S. Puede usarlos para redondear algunas o todas las esquinas de su cuadro de mensaje. No lo usaremos para esta demostración.

Estilo de fondo

Finalmente, encontramos el Estilo de espaciado sección de la pestaña. En el Margen de icono control, puede establecer la distancia entre el icono y los otros elementos. Haremos clic en el Enlace icono para desvincular los valores, porque queremos ajustar la posición del icono. Estableceremos el margen superior en 4 y el margen derecho a 18 píxeles.

El Margen de texto superior el control está ahí si desea separar el texto del título. Como este cuadro de mensaje no tiene texto, no lo necesitamos.

Finalmente, el Acolchado de caja El control se utiliza para controlar la distancia entre los bordes de la caja y su contenido. No lo necesitaremos para esta demostración.

Estilo de espaciado

Y ahí lo tiene, un hermoso cuadro de mensaje en solo un par de minutos.

En conclusión

Como puede ver, es muy fácil configurar un cuadro de mensaje en WordPress. Todo lo que necesita es un par de complementos gratuitos (Elementor y Qi Addons) y una buena idea para un diseño llamativo. Con Qi Addons, obtienes un cuadro de mensaje completamente funcional con opciones de estilo virtualmente ilimitadas. Lo animamos a darle un buen uso.