5 tips para ahorrar tiempo y trabajar eficientemente con Elementor

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.

    Ahorra tiempo con el widget plantilla de elementor
    Puedes encontrarlo en la barra de widgets de elementor

    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.

    Editar Widget Plantilla

    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.

    Accede al editor de widgers desde la barra de admin y optimiza tu tiempo con elementor
    Editar la plantilla desde la barra de admin

    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.

    Ejemplos de Widgets globales para reutilizar el estilo con Elementor
    Ejemplos de Widgets Globales para encapsular estilo

    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.

    Desvincula el Widget global para editar el contenido y ahorrar tiempo diseñando con Elementor.
    Al quitar el enlace del Global, conseguiremos una copia editable del original

    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.

    Boton de editar el widget global donde podrás editar el padre  
y se actualizarán todos los clones. Trabaja más eficientemente con Elementor.
    Al editar el widget global, modificamos todas sus copias que no hayan sido desvinculadas

    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.

    Ejemplos de Wigets Globales creados para clientes y trabajar más eficientemente con Elementor en el proceso de diseño.
    Estos Widgets Globales se pueden reutilizar en toda la web y al actualizarlos, donde sea que estén, se aplicarán los cambios si siguen conectados entre si.

    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:

    1. Abre Elementor en cualquier página y añade 6 bloques de título simple.
    2. 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
    3. 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.
    4. 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.
    5. 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.
    6. Díselo a tu SEO y se pondrá contento, porque ahora podrás tener un diseño para humanos y para Google.
    Ejemplo de selector de etiqueta HTML en Elementor
    Todos los widgets de elementor que sean o contengan títulos tienen este selector HTML
    Panel de propiedades de texto en Elementor
    En este panel asignamos propiedades a cualquier texto en Elementor
    Ejemplos de estilos de titulos seo para ahorrar tiempo en la edición de la web
    Al hacer click en la bola del mundo, veremos nuestros estilos guardados y podremos aplicarlos a cada texto independientemente de si son títulos o textos

    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.

    Ajustes del sitio en Elementor
    En el panel de Ajustes Globales podemos modificar cada estilo en cualquier momento de forma masiva

    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.

    Cómo poner fecha automática desde un encabezado
    En el icono de los discos abrimos el panel de Etiquetas Dinámicas

    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.

    Texto dinámico de fecha y hora actual en Elementor
    De todas las opciones, la que nos interesa es Fecha y Hora actuales

    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.

    Ahorra tiempo configurando la fecha automatica en el footer
    Con esta configuración, aparecerá el año en curso en la Widget

    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.

    Truco para mostrar el año automaticamente en el footer con elementor
    Rellenando estos campos, nuestro widget está listo para mostrar el año correctamente

    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.

    Comparte

    ¡Difunde la palabra mochi!

    ¿Tienes familiares emprendiendo y crees que esto les puede interesar? ¿Quieres que el mundo sea un lugar mejor gracias a nuestros conocimientos? Pulsa un botón y desata la potencia del conocimiento digital compartiendo esta noticia

    Facebook
    LinkedIn
    WhatsApp

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Información Básica sobre Protección de Datos:

    Responsable: Mª Clara El Maatawy Corchuelo Finalidad: enviarte comunicaciones comerciales y Newsletter informativo. Legitimación: Consentimiento. Destinatarios: No se ceden a terceros, salvo obligación legal. Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en hola@wondermochi.com así como el derecho a presentar una reclamación ante una autoridad de control.