El elemento de marquesina de texto puede ser una adición bienvenida a la bolsa de trucos de cualquier diseñador web. Agrega algo de movimiento a una página, evitando que esté completamente quieta. Funciona bien con otros elementos, incluidas imágenes, texto estático y botones. Finalmente, con el complemento adecuado, puede ser increíblemente fácil de agregar y estilizar para que coincida con el diseño del sitio web.
Hemos reunido todas las mejores cosas sobre las marquesinas de texto (la versatilidad, la facilidad de uso y el aspecto elegante) y las presentamos en un sencillo widget de marquesina de texto. Es uno de los sesenta widgets que componen Qi Addons para Elementor, la mayor colección gratuita de widgets personalizados para Elementor.
Si bien eres más que bienvenido a explorar todos los increíbles widgets en el complemento, aprovecharemos esta oportunidad para demostrar algunas de las cosas para las que podría usarse el widget Text Marquee. Con suerte, debería impulsarte a crear increíbles marquesinas por tu cuenta. En el artículo, leerá sobre:
Si prefieres mirar a leer, aquí tienes un video que cubre más o menos los mismos puntos. Así que elige tu medio y ¡vamos!
Porque el widget solo funciona con Elementor, primero debe asegurarse de instalar y activar este popular creador de páginas. Nuestra Complementos Qi para Elementor El plugin funciona igualmente bien con la versión gratuita o pro de Elementor.
Después de instalar y activar Elementor y Qi Addons, navegue hasta una publicación o página. Puede ser una publicación o página existente, o puede crear una nueva para jugar. Una vez que la página o publicación esté abierta y la esté editando con Elementor, simplemente use el menú del lado izquierdo para buscar el Texto Widget de marquesina. Arrastrarlo a la primera sección gratuita nos ayudará a comenzar.
Este será el campo donde le mostraremos cómo hicimos un ejemplo como el de la página del complemento.
Editar el contenido de la marquesina es bastante sencillo. El texto de la marquesina consta de varias secciones: los elementos que podrá ver en el menú del lado izquierdo. Si desea agregar más secciones de texto, presione el botón Agregar elemento. Eliminar un elemento es tan simple como presionar el botón marcado con una «x» al lado de cada elemento. Elegimos reducir la cantidad de elementos a dos.
Para cambiar el texto del elemento, solo necesita hacer clic en él. Tendrá muchas opciones para diseñar el texto en el menú Estilo, pero por ahora, todo lo que puede hacer aquí es cambiar lo que dicen los elementos. Hemos cambiado los dos a «Desplazamiento automático».
Ahora que el contenido de la marquesina está configurado, podemos pasar a diseñarlo.
Las opciones de estilo se abren con un selector de color, un lugar donde puede elegir o ingresar un código hexadecimal para el color que desea. Sin embargo, estamos mucho más interesados en las opciones de Tipografía, ya que ahí es donde podemos elegir la fuente, el tamaño, el peso, el estilo, así como la altura y el espaciado de las líneas.
Allí cambiamos varias opciones. Cambiamos la fuente a Montserrat, cambiando el tamaño de las letras a 160 píxeles. Hemos puesto el título en negrita al poner la opción de peso en 700 y la hemos transformado en mayúsculas.
La siguiente opción interesante es el efecto de trazo de texto: lo cambiamos a «sí», haciendo de nuestro texto un esquema. Esto abrió opciones adicionales para cambiar el color del trazo del texto: cambiamos el nuestro a #dbdbdb – y el ancho del trazo del texto, que no cambiamos. La última opción le permite cambiar el espacio entre los elementos: cambiamos el nuestro a 30.
La muestra que creamos incluye una superposición donde nuestro texto de marquesina pasa debajo de una imagen y sobre algún texto. La marquesina en sí es de ancho completo, no en caja. Hemos cambiado eso presionando el botón Editar sección para la sección que contiene la marquesina y luego configurando el ancho del contenido a ancho completo en las opciones de Diseño.
En cuanto a la imagen y el texto, hemos agregado una sección de dos columnas, una con el widget de título de la sección y la otra con el widget de imagen. Luego tomamos toda la sección y en sus opciones avanzadas establecemos el margen superior en -90.
Con eso, nuestro trabajo estaba hecho – hemos creado el ejemplo que nos propusimos hacer.
¡Vamos a envolverlo!
WordPress viene con infinitas opciones de personalización gracias a creadores de páginas como Elementor y complementos como Qi Addons para Elementor. Le mostramos cómo puede crear un gran marco de texto con un par de clics, e incluso tenerlo en general con una imagen. Pero, sin duda, encontrará una forma diferente de utilizar este widget y hacerlo realmente suyo.
Apoya nuestro trabajo ❤️
Si te ha gustado este artículo, considera dejar una propina para ayudarnos a seguir publicando contenido de calidad.
