Do not remove – Anchor for back to top button

Nuevos 5 trucos Elementor y Elementor Pro

Descubre los nuevos 5 trucos en Elementor y Elementor Pro que he recopilado en esta entrada. Ahorra tiempo y trabaja más eficiente.
Web-Sastre

Web-Sastre

Diseñadora Web WordPress
para empresas familiares y bloggers.

¡Hola! Una de las entradas del blog más populares es la de Los 8 trucos en Elementor que quizás no sabes, al ver que es un tema que gusta y ayuda en el diseño de las páginas web WordPress, he pensado en traerte 5 trucos más para que puedas implementar.

Algunos los podrás aplicar tanto en Elementor como Elementor Pro, otros son sólo para Elementor Pro. Si aún estás pensando en si vale la pena adquirir la licencia Pro, esta entrada del blog te puede interesar: Guía iniciación Elementor Pro Gratis

cambiar idioma elementor logo

Tabla de contenido

1.

Eliminar texto en archivos .svg al pasar el ratón

Con este formato de archivo no tendrás nunca imágenes pixeladas ya que son vectores. Cuando uso iconos personalizados, nunca uso imágenes .jpeg o .png, siempre uso .svg

En Elementor, la primera vez que añadas un archivo .svg te va a mostrar un aviso de seguridad:

¡Por favor, ten en cuenta! Permitir la subida de cualquier archivo (incluidos SVG y JSON) es un riesgo potencial de seguridad.
Elementor intentará sanear los archivos no filtrados, eliminando códigos y scripts potencialmente maliciosos.
Recomendamos que solo actives esta característica si comprendes los riesgos de seguridad que conlleva.

También puedes activar la subida de archivos .svg en Elementor desde el Escritorio de WordPress:
Ir a Elementor > Ajustes > Avanzado > Permitir la subida de archivos sin filtrar > Activar. Ahora ya puedes subir los archivos .svg como lo harías con imágenes .jpeg o .png.

escritorio wordpress elementor ajustes
escritorio wordpress elementor ajustes avanzado
escritorio wordpress elementor ajustes avanzado permitir svg activar

En las páginas me gusta ponerles botones para volver a la parte superior o poner iconos en el apartado de servicios. Hasta aquí todo bien, pero me di cuenta que, en una de las últimas actualizaciones de WordPress, al pasar el ratón por encima de esos iconos, aparecía el nombre del archivo. Aún y borrando todos los campos de Texto Alt, Título, Leyenda y descripción seguía apareciendo este efecto de hover. Estéticamente no me gusta y con CSS se puede solucionar.

En Elementor Pro puedes añadir el código CSS en los ajustes generales o en la sección, columna o widget en concreto. Intenta mantener un criterio para cuando necesites hacer cambios, sepas donde has escrito el código. Si no usas Elementor Pro, aquí te cuento como añadir CSS en la página de WordPress. (no será tan cómodo y rápido ya que tendrás que actualizar la página cada vez que modifiques algo del código).

Este es el código que tienes que añadir para dejar de visualizar el texto al pasar el ratón:

				
					svg {
    pointer-events: none;
  }

				
			

2.

Las ilustraciones en svg desaparecen

Como te he comentado en el primer punto, siempre que puedo uso el formato .svg para iconos, pero también en ilustraciones para usarlas como imágenes. La calidad es insuperable y el peso del archivo es mínimo.

Una vez tengas activada la subida de archivos svg, podrás añadir ilustraciones en este formato en el widget imagen. El problema es que ¡la imagen va a desaparecer una vez salgas de la edición del widget!

Siguiendo los siguientes pasos, vas a poder añadir las ilustraciones sin que desaparezcan:

trucos elementor widget imagen
trucos elementor widget magen subir archivos
trucos elementor widget imagen subir archivos selecciona
trucos elementor widget imagen subido
trucos elementor widget imagen subido desaparece
trucos elementor widget imagen svg editar imagen estilo

3.

Configurar el efecto Hover en el encabezado

Cuando añadimos un encabezado, en Estilo no podemos ajustar el aspecto al pasar el ratón (Hover) , la buena noticia es que podemos cambiarlo añadiendo código CSS.

Igual como te comento en el primer apartado, puedes añadir el código en el CSS general o en la sección, columna o widget en concreto.

Estos son los pasos a seguir para poder añadir el código CSS para el encabezado:

trucos elementor widget titulo contenido
				
					
#titulo-diseno-web h3:hover { 
  color: #D84E4E; 
}
				
			

Aquí te dejo un par de ejemplos para que puedas ver la diferencia:

4.

Posición del icono en el widget listado de iconos

Si el texto en el widget listado de iconos ocupa más de una fila, el icono se posiciona en el centro. Puede que te interese este aspecto, pero si lo quieres modificar, no lo vas a encontrar las opciones de la edición del widget.

Esto sucede desde la última actualización de Elementor. Quizás lo van a volver a cambiar en actualizaciones futuras, pero de momento vamos a resolverlo usando CSS.

				
					.top-align .elementor-icon-list-item {
  align-items: flex-start;
}
.top-align .elementor-icon-list-icon {
  padding-top: 10px;
}
				
			
				
					.top-align .elementor-icon-list-item a {
  align-items: flex-start;
}
.top-align .elementor-icon-list-icon {
  padding-top: 10px;
}
				
			

Para que todas los listados de iconos adquieran las mismas características, tienes que añadirles la clase que hayas decidido.
Te dejo un ejemplo para que veas el resultado y decidas si es algo que quieres implementar en tu página:

5.

Editar página cuando usas encabezado transparente

Con Elementor Pro se puede añadir encabezado personalizado a la página. Luego puedes editar el encabezado mientras estás editando la página con Elementor. Cuando este encabezado sea transparente vamos a darle el margen negativo a la página que sea necesario. Haciendo esto, nos van a quedar el encabezado y la página solapados. Para editar el encabezado, simplemente tienes que pasar el ratón y pulsar en Editar cabecera.

trucos elementor editar cabecera

Pero cuando quieras volver a la página y editarla, al pasar el ratón no podrás pulsar en Editar entrada, porque el encabezado queda por encima.

Un truco que me sirve es:

trucos elementor editar entrada

Este sencillo truco, te permite moverte de la edición de la cabecera transparente y la entrada sin problemas.

Si estás leyendo esta entrada es porque seguramente ya usas Elementor, si te estas planteando si vale la pena adquirir Elementor Pro, mi experiencia personal me enseñó que, ¡realmente vale la pena si quieres diseñar una o varias páginas web sin límites!

He hecho una guía de iniciación en Elementor Pro con los primeros pasos a seguir y consejos en el uso de plantillas y popups:

Si necesitas ayuda en la creación de tu página web o blog WordPress, no dudes en ponerte en contacto conmigo. Para ayudas puntuales tengo bolsas de horas muy prácticas que puedes usar cuando las necesites. O si quieres que sea yo tu diseñadora web WordPress, ¡cuéntame tu proyecto!

Compartir:
Suscríbete al Blog WordPress
¡Y no te pierdas ninguna novedad!
Directamente en tu correo

Suscríbete a Web Sastre para recibir nuevas entradas, ofertas, novedades y conseguir la Guía iniciación Elementor Pro Gratis!