Nuevos 5 trucos Elementor y Elementor Pro
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
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.
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:
- Añade el widget de imagen
- Pulsa en la imagen del panel de edición > subir archivos > elige el archivo .svg > abrir > Insertar Medio
- Todo parecerá igual como si hubieras subido un archivo .jpeg o .png, pero si sales de la edición de la imagen el archivo svg va a desaparecer en la visualización en la página. Si vuelves a pulsar en el widget para editarlo, lo volverás a ver.
- Para que se mantenga visible en la página, tenemos que ajustar en estilo > ancho > el porcentaje que queramos. También podemos ajustar el alto para crear margen.
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:
- Primero tenemos que definir qué tipo de encabezado es H1, H2, H3, etc.. Esto lo haremos en la edición del encabezado > Contenido > Etiqueta HTML
- Una vez definido ir a Avanzado
- Añadir un ID al widget del encabezado. En este ejemplo voy a usar #titulo-diseno-web
- En CSS personalizado añadir el siguiente código (o el código que quieras para el efecto hover):
#titulo-diseno-web h3:hover {
color: #D84E4E;
}
- Dependiendo del tipo de encabezado que hayas elegido, tendrás que cambiar el h3 por el que corresponda.
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.
- Edita el widget de listado de iconos > avanzado > añade una clase.
- Añade el siguiente código para alinear el icono arriba y luego le decimos cuánto lo queremos bajar para posicionarlo.
.top-align .elementor-icon-list-item {
align-items: flex-start;
}
.top-align .elementor-icon-list-icon {
padding-top: 10px;
}
- Si en el contenido del listado has añadido enlaces, tendrás que añadir una "a" en el código
.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:
- En este caso le he puesto la clase que controla la posición del icono. Como puedes comprobar, al escribir más de una fila, el icono se posiciona donde hemos configurado.
- En este caso no le he puesto la clase que controla la posición del icono. Como puedes comprobar, al escribir más de una fila, el icono se posiciona en el centro.
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.
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:
- Cuando estés editando el encabezado y quieras cambiar a la edición de la página > pulsa en botón derecho del ratón en cualquier punto de la página a editar (que puedas ver Editar Entrada)
- Esto va a bloquear la vista y a continuación pulsa en 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:
También te dejo unos enlaces a entradas del blog que te pueden interesar:
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!