Tras años trabajando diariamente con Elementor y Elementor Pro, hemos adquirido un know how en nuestro proceso de diseño que trasladamos a todos nuestros proyectos. Parece mentira que hace 3 años nuestras webs no estuvieran diseñadas con Elementor, ahora no nos imaginamos el diseño web en WordPress sin él. Fruto de todo este trabajo, hoy podemos compartirte este post con 5 tips para trabajar más eficientemente con tu web diseñada con Elementor.
Índice de contenidos
Ahorra tiempo con el widget Plantilla de Elementor
Las plantillas de Elementor son un recurso súper útil para acelerar el proceso de diseño y para reutilizar secciones de contenido.
Las plantillas nos permite guardar una franja o sección entera o páginas enteras.
Podemos utilizar este recurso para no tener que diseñar una página entera desde cero, o traernos estructuras y secciones de contenido de otras páginas de nuestra propia web. Al traérnosla tendremos el beneficio que ya viene estilado y configurado y sólo tendremos que preocuparnos de cambiar el contenido.
Este widget nos permite mostrar cualquier plantilla de Elementor dentro de nuestros diseños.
El caso donde más lo usamos es en la columna del blog, ya que esta sección aparece también en las categorías (que es una plantilla diferente) y a veces incluso en el post.
Lo que hacemos en diseñar por separado la columna y luego incrustarla usando este widget.
En este caso nosotros lo utilizamos como un gran bloque de contenido que se repite en diferentes zonas de la web, que tiene que ser igual en todos lados. De esta manera puedo editar la plantilla y se aplicarán los cambios en todos los sitios al mismo tiempo.
Te ahorrará mucho tiempo de copiar y pegar. Es más, en la pestaña de editar con Elementor que aparece en la admin bar, podrás acceder al diseño de esta plantilla directamente sin tener que pasar por el diseño de la página donde está incrustada.
Acelera el proceso de diseño reutilizando contenido y estilo con los Widgets globales
Los Widgets son las piezas con las que rellenamos las estructuras de las secciones.
Son los ingredientes con los que creamos nuestras plantillas como botones especiales, formularios, acordeones para FAQ y mucho más. Con este truco podrás acelerar el proceso de diseño con Elementor.
Actualmente, esta es una opción exclusiva de Elementor PRO.
Widgets Globales para encapsular estilo
Digamos que diseñas un formulario maravilloso con Elementor, pero ¿y si quiero reutilizar su estilo?
Es decir, quiero que el formulario se vea igual pero sea un formulario diferente.
Puedo guardarlo como widget global para luego usarlo en cualquier otra parte de la web, su estilo quedará guardado y su contenido será editable siempre que elija la opción de Desvincular.
De esta forma mantienes la consistencia en tu web evitando diseñar partes reutilizables una y otra vez.
Nuestros clientes pueden encontrar en la pestaña global del sidebar de Elementor, todos los tipos de Widgets globales que hemos utilizado al construir su web. Los Widgets globales sólo aparecen ahí.
Para convertir un widget en uno global, solo tienes que hacer click derecho sobre él y darle Guardar como global.
Recuerda que después de arrastrar el Widget Global a tu nueva página de Elementor, tienes que desvincularlo para solo reutilizar el estilo.
Widgets Globales para reutilizar contenido editable de forma masiva con Elementor
¿Te imaginas tener las redes sociales por toda la web pero editables desde un solo sitio?
Fantasía.
Aunque el uso principal de los widgets globales es parecido al uso que hacemos de las plantillas en el punto anterior, ya que al usar un widget como global, si no usamos la opción de Desvincular y lo mantenemos tal y como está, estaremos incrustando un clon interactivo de este, de manera que si editamos el widget global, los cambios se aplicarán a todos sus clones que no hayan sido desvinculados.
Otro ejemplo sería si quieres diseñar una serie de banners con Imagen, contenido y URL determinados, por ejemplo, para tu embudo de ventas.
Si quieres reutilizar este banner en todas las paginas de tu web, solo tienes que guardarlo como Widget global e incrustarlo sin desvincularlo del original. Si en el futuro tienes otro embudo y quieres cambiar la imagen, contenido y link del banner, solo tienes que editar el original y el cambio se replicará en todos su clones.
Hack para separar estilos de los títulos globales para seo
Clara es muy fan de poner títulos H1 con el aspecto de párrafo y viceversa. Por suerte, Elementor nos deja cambiar la etiqueta HTML de casi todo, pero ¿y si quiero que mi H1 tenga un tamaño enano? ¿Y si quiero que mi copy sin importancia SEO sea grande como un H1?
Para estos casos es genial guardar los estilos estandarizados de títulos, párrafos y anotaciones como estilos tipográficos, para poder asignarlos luego al Elementor que sea sin importar su etiqueta HTML.
Para hacer esto de forma sencilla, solo tenemos que seguir estos pasos:
- Abre Elementor en cualquier página y añade 6 bloques de título simple.
- Por defecto, todos serán H2, así que cambia la etiqueta HTML para tener cada uno de lo headings de HTML, desde el H1 al H6
- Ahora, ve al apartado tipografía y pulsa sobre el lápiz para asignar tamaños y otras propiedades como grosor a cada uno de los 6 headings.
- Con el botón +, puedes guardar cada uno de los 6 estilos con su nombre correcto, el estilo del H1 lo llamaremos H1 y así sucesivamente.
- Cuando hayas guardado los 6 estilos, prueba a alternar el diseño de cada heading haciendo click en la bola del mundo y eligiendo, por ejemplo, que el H1 se vea como un H4.
- Díselo a tu SEO y se pondrá contento, porque ahora podrás tener un diseño para humanos y para Google.
Adicionalmente a las mejoras que vas a experimentar en SEO y diseño, al tener estandarizados los tamaños no solo de los headings sino del resto de formatos tipográficos, no vas a perder ni un segundo en crear desde cero nuevas composiciones, ya no tienes que editar la tipografía, sino reutilizar alguno de los estilos guardados, lo que, de paso, aumentará la consistencia.
Por no decir que todos estos estilos son accesibles desde los Ajustes Globales, y que sin algún día quieres cambiar el estilo de todos los H1 de la web puedes hacerlo una sola vez, en lugar de cambiarlos uno a uno.
Truco para poner la fecha automática en el footer con Elementor
Una de las tonterías (porque al final tampoco es que sea algo interesantísimo) que da la sensación de desatendida a una web es que la fecha del año al final del footer no esté actualizada.
Para automatizar la típica frase de Wondermochi © 2022. Todos los derechos reservados, podemos usar los datos dinámicos, de manera que el año se sincronice solo con el año actual.
Para hacer esto solo tenemos que poner un texto con HTML span o div para que no tenga importancia SEO y rellenarlo con la Fecha actual del sitio web pulsando en el icono de los discos y seleccionando > Current Date Time en el apartado Sitio.
Al hacer esto, el texto que teníamos se va a reemplazar por la fecha de hoy. Si volvemos a clicar en la caja, veremos que nos deja personalizar algunas cosas, principalmente, el Date Format. Debemos seleccionarlo y elegir Formato Personalizado. Entonces, aparecerá un nuevo campo editable con varios caracteres, los cuales reemplazaremos por “Y” para que solo muestre el año actual.
Luego solo tendremos que añadir las otras partes de la frase antes y después de la fecha del año. Esto se hace en el panel Avanzado, justo debajo de los Ajustes donde acabamos de poner el año. Ahí encontraremos 3 campos, los 2 primeros “Antes” y “Despues” son para añadir palabras antes y después de la fecha. Solo tendremos que añadir el nombre de la web y un espacio en blanco en el antes y “ 2022. Todos los derechos reservados” en el después.
Hacer esto es dejar hecha para siempre una pequeña pero incómoda tarea que, de no hacerse, puede dar cierta mala imagen de web desatendida.
Utiliza una nomenclatura clara para plantillas de Elementor
Las plantillas en Elementor son muy útiles, pero todavía se puede mejorar mucho en su categorización. Elementor llama a todo plantillas y a la hora de reutilizarlas aparecen todas de golpe. Aunque tiene un pequeño indicador de el tipo de plantilla que es, esto solo nos sirve para distinguir las secciones de los headers, footer, singles o archives.
Para no perderte, te recomendamos poner algo como: (Tipo) – (Nombre descriptivo) – Versión, por ejemplo Landing – Black Friday 2022 – V1.
- Con el tipo, vemos si es una landing, una página, una sección, etc… Si ponemos esta simple palabra delante tendremos muy a mano la naturaleza de la plantilla y ahorraremos tiempo navegando en la tabla de plantillas.
- Con el nombre, podremos distinguir entre tipos iguales. Por ejemplo podremos distinguir las landings de Black Friday de las de Navidad o Halloween. Esto aplica un nivel más de detalle a nuestra colección, y nos evitará estar abriendo landings una tras otra hasta dar con la que queremos.
- Con la versión, podremos distinguir entre landings iguales en sus diferentes vertientes. Esto es importantísimo cuando queremos hacer grandes cambios en un diseño, pero no estamos seguros de que estos cambios vayan a ser definitivos y queremos guardarnos un checkpoint antes de hacerlo, en este caso tendríamos como V1 la landing original y como V2 la segunda versión. Otra utilidad de este tercer dato de la nomenclatura es diferenciar en el testing AA o AB. También podemos ubicar en este tercer dato el año en caso de que las plantillas se modifiquen 1 vez al año, por ejemplo, Halloween – 2021.
Nosotros usamos esta nomenclatura, pero puedes adaptarla a tus necesidades de diseño, lo importante es adelantarnos las carencias de Elementor en este sentido y ahorrar tiempo a la hora de reutilizar nuestras plantillas desde el editor.
En resumen
Elementor es valioso por el trabajo que ahorra y la consistencia que genera, y cada vez es más potente y user friendly, pero podemos aplicando estos 5 tips optimizar el tiempo que le dedicamos a nuestra web diseñada con Elementor, minimizando el esfuerzo y maximizando resultados, que al final es de lo que trata cualquier esfuerzo de marketing.
Si estás leyendo esto es porque seguramente ya utilizas Elementor o Elementor Pro con tu web.
