Los 8 trucos en Elementor que quizás no sabes
Web-Sastre
Diseñadora Web WordPress
para empresas familiares y bloggers.
Divulgación de afiliados: Algunos de los enlaces de esta entrada son enlaces de afiliados. Esto significa que si pulsas en el enlace y haces una compra, recibiré una comisión sin ningún coste para ti. ¡Gracias por tu soporte!
Primero te haré una pequeña introducción sobre qué es Elementor, aunque si estás aquí muy probablemente ya lo estés usando.
Elementor para mí, es la mejor herramienta para crear páginas web. Usa el método de arrastrar y soltar y permite crear diseños únicos y creativos sin necesidad de tener conocimientos en programación. En algunos momentos sí es útil saber conceptos de CSS, cómo te explico en esta entrada.
Es un Plugin que puedes instalar fácilmente como cualquier otro, y después de hacer los ajustes para dejarlo configurado según tu diseño, ya puedes empezar a crear páginas con todo su potencial! Personalmente uso Elementor Pro para crear las páginas web, tiene más opciones que Elementor y la gran ventaja es que reduce mucho el número de Plugins extra a usar.
Esta no es una entrada para explicar como funciona Elementor, sinó que te voy a contar 8 trucos muy útiles que en momentos puntuales te ahorran tiempo y quebraderos de cabeza. ¡Entonces empezamos!
Tabla de contenido
Definir colores globales
En Elementor se pueden definir colores globales para luego usarlos en toda la página y no tener que escribir el código del color cada vez. Para poderlos definir, se accede desde las tres líneas de la barra superior del panel de edición.
- Pulsando en las tres líneas se nos abrirá el menú de ajustes y aquí escogemos ajustes del sitio.
- Al pulsar en ajustes del sitio, saldremos del modo edición de la página o entrada y veremos el menú Diseño del Sistema. Aquí en la parte superior encontraremos los colores globales.
- Y al pulsar en colores globales, entraremos en la lista de colores globales que podemos definir.
- Una vez definidos los colores, volvemos a la edición de la página, y ahora, en el estilo de cualquier elemento, será posible escoger uno de estos colores. La definición de los colores globales sólo la tendrás que hacer una vez y te servirá para todas las páginas y entradas.
- Te pongo un ejemplo de edición de un elemento. En el momento de elegir el color, pulsamos en el icono con forma de globo terrestre, y nos aparecerán los colores globales definidos.
Usar la herramienta Navigator
Si estás empezando a usar Elementor, quizás no te habrás dado cuenta que, en el pie de la columna de edición, hay varios iconos. La herramienta Navigator es el segundo empezando por la izquierda.
- La utilidad que tiene esta herramienta, es que te permite mover el contenido de tu página de manera rápida, sin tener que moverte ni arrastrar el contenido por la página.
- Puedes renombrar las secciones y todos los elementos que te sean necesarios, columnas, textos, imágenes, etc.. para que te sea más fácil localizarlos. Simplemente tienes que hacer doble clic encima del elemento de la lista que quieres renombrar.
- Si pulsas una vez encima de unos de los elementos de la lista del Navigator, automáticamente te desplazará hasta el contenido en la página.
- Si mantienes pulsado el elemento de la lista, lo puedes mover y colocar donde lo necesites y así estarás moviendo el contenido de la página.
Igualar propiedades entre los mismos widgets
Durante el diseño hacemos ajustes a secciones, columnas, textos, imágenes..., en todos los elementos (widgets) que nos ofrece Elementor. Si por ejemplo, cambias el margen de una sección y quieres hacer este mismo cambio en otras, lo puedes hacer igualando propiedades. Ten en cuenta que se igualarán todas las propiedades.
- Selecciona el elemento donde has hecho los cambios o simplemente pon el ratón en el área del elemento para que aparezca el icono de edición (esquina superior izquierda)
- Haz clic con el botón derecho en el elemento y selecciona copiar.
- Desplázate hasta el elemento que quieres igualar propiedades, pulsa botón derecho y selecciona pegar estilo. Y así tendrás los dos elementos con las mismas propiedades sin tener que repetir la edición.
- Siempre podrás resetear el estilo de un elemento seleccionado restablecer estilo.
Copiar secciones enteras entre páginas o guardarlas como plantilla
Si has trabajado el diseño de una sección que quieres repetir en otra página, para no tener que invertir tiempo en volver a configurarlo todo, es posible copiar secciones enteras entre páginas e incluso transformarlas en plantillas para poder usarlas cuando las necesites.
- Es tan simple como, con el ratón encima de la sección, clicar botón derecho y seleccionar copiar.
- Ir a la otra página que tendrás abierta en otra pestaña del navegador, clicar botón derecho y seleccionar pegar. El truco es que el botón derecho lo tienes que pulsar encima de los iconos superiores de la sección, lo mismo sirve para copiar secciones dentro de una misma página.
- Si crees que vas a usar la sección en el futuro y no quieres tener que estar copiando y pegando, la puedes guardar como plantilla.
- Igual como el truco de pegar una sección, pulsamos botón derecho encima de la parte superior de la sección que se ilumina en azul y seleccionamos Guardar como plantilla.
- Se abrirá una ventana donde nos pide el nombre que queremos dar a la plantilla y pulsamos guardar.
- Ahora cuando queramos añadir una sección nueva, en vez de seleccionar el signo +, seleccionaremos la carpeta que es donde tenemos nuestras plantillas guardadas.
- Y pulsamos en Insertar en la plantilla que queremos añadir al diseño.
Subir tus propios iconos en formato SVG
En caso de tener tus propios iconos en format SVG, con Elementor es posible subirlos a la biblioteca de medios y usarlos en toda nuestras páginas.
- Puedes usar cualquier elemento de la barra lateral que utilice iconos: Icono, Caja de icono, Listado de iconos, Iconos sociales.
- Una vez arrastrado el widget de icono a la página, pulsar para entrar en la edición y lleva el ratón encima de la imagen de icono en la barra lateral de edición, sin pulsar.
- Seleccionar subir SVG, y sube el archivo igual como subirías una imagen. Es importante que el icono SVG sea en color negro. El color lo podremos cambiar en Estilo. Si se sube un archivo SVG con un color concreto, creará problemas y no le podremos cambiar el color fácilmente.
Añadir "enter" en el título en cuadros de imagen y cajas de icono
Si tenemos más de un cuadro de imagen o caja de icono de lado, puede pasar que uno de ellos tenga dos líneas en el título y nos desplace el contenido. Podemos intentar encontrar cuánto se ha desplazado y modificar en Estilo > Contenido > Título > Espaciado. Pero si sabemos que se mantendrán en los diferentes tamaños de pantalla en una y dos líneas, le podemos añadir un enter al título de una línea y se nos igualará el contenido.
Este es el encabezado
Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.
Este es el encabezado con más palabras y añade una línea
Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.
- Es tan sencillo como añadir al final del título el siguiente código:
<br>
- El código añadido no será visible pero añadirá el enter que necesitamos para igualar el contenido.
Este es el encabezado
Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.
Este es el encabezado con más palabras y añade una línea
Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.
Widget Editor Texto: eliminar el margen abajo por defecto
Los márgenes izquierda, superior y derecha del widget Editor Texto están ajustados al texto por defecto, excepto el margen inferior que tiene 30px añadidos.
- Para no tener que ajustar el margen inferior, un truco rápido es, estando en la edición del Widget de texto, ir a la pestaña Contenido.
- Cambiar de la subpestaña visual a la HTML.
- Borrar la última letra que haya escrita y volverla a teclear. Es importante estar en la pestaña HTML.
- Los 30px extra de abajo habrán desaparecido. Si editas el texto añadiendo más contenido o cambias alguna característica visual, automáticamente se volverá a añadir. Sólo tendrás que repetir el truco.
Controlar el contenido visible en cada tipo de dispositivo
Elementor tiene una función muy útil para tener el control de dejar visibles o apagar las secciones o widgets según el dispositivo que se use.
- Cualquier sección o widget de Elementor, en la barra de edición lateral izquierda, en la pestaña Avanzado, encontramos la opción configurable de Adaptabilidad.
- Aquí podremos elegir ocultar la sección o elemento que estamos editando, en la versión escritorio, tableta o móvil. Tenemos que tener en cuenta que, como alerta Elementor, la seguiremos viendo en el modo de diseño.
- Si queremos ver como está quedando realmente nuestro diseño, podemos ocultar el panel izquierdo de edición y los elementos para el tipo de dispositivo que estés diseñando ya no se verán.
- Así es como se verá el elemento oculto en el tamaño de dispositivo que estemos usando:
Hasta aquí los 8 trucos con Elementor que te ahorran tiempo en tu diseño. Si te animas a probar Elementor Pro, a continuación te dejo el enlace para que puedas consultar la tarifa que más se ajusta a tus necesidades.
[Actualización Abril 2022: Ahora Elementor ofrece la tarifa de Hosting + Elementor Pro. Pago único y sin sorpresas. Si te interesa he escrito esta entrada donde te cuento sus ventajas.]
Si necesitas ayuda puntual mientras estás creando tu web WordPress, puedes adquirir bolsas de horas y te puedo echar una mano para seguir adelante con tu proyecto.
