Theme Builder de Elementor Pro

Dificultad del post: facilmediadifícil
[Total: 1   Promedio: 5/5]
theme builder elementor pro

Por fin, tras el lanzamiento de Elementor Pro 3 puedo publicar este post que tanto me apetecía. El Theme Builder de Elementor Pro es una de mis herramientas favoritas en WordPress y creo que con él se pueden hacer cosas muy curiosas y muy dinámicas, como un sitio de membresías o un hosting de imágenes, no solo webs, blogs y tiendas online.

Como he dicho, he esperado al Theme Builder de la versión 3 de Elementor porque ha pegado un cambio radical en la interfaz.

Ha pasado de esto:

theme builder elementor pro

A esto otro:

theme builder elementor pro

A nivel de funcionalidades no se aprecian grandes cambios, pero en la apariencia como puedes ver la cosa cambia bastante.

En cuanto a funcionalidades, quizás lo más destacado de cara a la creación del theme con Elementor Pro son los estilos globales. De esta forma, nos ahorra mucho trabajo cuando estamos creando un nuevo sitio web y no queremos realizar 50 veces la misma acción de configuración.

Volviendo al tema… El editor de Theme Builder de Elementor Pro nos da todo lo que podemos necesitar para darle forma a nuestro “theme virtual” con el pagebuilder, utilizando como base un theme real mucho más simple (el esqueleto) como, por ejemplo, el propio Hello Elementor que podemos conseguir de forma totalmente gratuita.

theme builder elementor pro

La diferencia entre usar un theme esqueleto como Hello Elementor o un theme más avanzado y con funcionalidades como GeneratePress, es que Hello Elementor carga muchas menos cosas y por lo tanto es un poco más rápido que los otros themes, ya que las funcionalidades del theme real no las queremos para nada, vamos a utilizar solo las de Elementor.

Para adentrarnos un poco más ya en lo que es el theme builder en la práctica, quiero mencionar el sistema de condicionales de Elementor Pro, ya que es una de las partes que más me gustan:

theme builder elementor pro

Este sistema de condicionales nos permite hacer cosas muy curiosas y seleccionar específicamente dónde queremos que se muestren los elementos que nosotros creamos en el theme builder de Elementor Pro.

Y en realidad el theme builder de Elementor Pro no tiene mucho más, simplemente que es completamente modular y precisamente eso es lo que vamos a ver en este post, los distintos módulos o partes que podemos crear y gestionar con el theme builder.

Algo que quiero dejar claro es que, aunque los elementos y widgets que puedes utilizar son similares a los que puedes utilizar en el contenido común, con Elementor Pro podemos utilizar esos elementos y widgets en CUALQUIER parte de la web.

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

 

Header o cabecera con Elementor Pro

La cabecera es una de las partes más importantes en la estructura de una web y contiene elementos que son característicos como el menú, el logo y en algunos casos botones sociales o un buscador.

Con Elementor Pro podemos darle forma al header o cabecera como nosotros queramos. Podremos elegir el color, la posición de los elementos e incluso cómo se mostrará en ordenadores y dispositivos móviles o tablets.

theme builder elementor pro

Como puedes ver en la imagen anterior, Elementor Pro también te proporcionara una serie de plantillas predefinidas en las que basarte para empezar a diseñar en caso de que no tengas ideas.

En este vídeo puedes ver un poco más sobre lo que te hablo y sobre cómo crear un header con Elementor Pro:

Como puedes ver y tal y como te decía, puedes utilizar cualquiera de los elementos y widgets de Elementor en el header. Además, tendrás ciertos elementos dinámicos como el logo o los menús que ya son específicos para el header de una web, aunque con Elementor Pro puedas insertarlos en cualquier lado.

Con el sistema de condicionales, podemos utilizar distintas cabeceras en distintas partes de la web. Esto también es aplicable a los pies o footers que creemos.

 

Footer o pie de página con Elementor Pro

Otra de las partes más importantes de la estructura de una web es el footer, muy similar a lo que podemos hacer con la cabecera.

La personalización que podemos conseguir con Elementor Pro en cuanto al footer es total, desde elementos dinámicos con campos dinámicos hasta poder utilizar los tradicionales widgets de WordPress.

Como en la mayoría de casos, Elementor Pro tiene plantillas predefinidas con las que podemos empezar a diseñar fácilmente:

theme builder elementor pro

En este vídeo puedes ver cómo crear un footer con Elementor Pro y cómo personalizarlo:

Los footers normalmente son más grandes y pueden llevar mucho más contenido “resumen” que se saca del resto de la web, lo que puedes conseguir fácilmente con Elementor Pro.

Como en el caso de las cabeceras y el resto de elementos, puedes utilizar el sistema de condicionales para elegir exactamente en qué partes de la web quieres que salga el footer.

 

Plantilla Single Post con Elementor Pro

Aunque el nombre pueda ser algo “equivocado”, la verdad es que este tipo de plantilla que podemos moldear con Elementor Pro es el que permite personalizar los posts o entradas y también todos los custom-posts que podemos crear en WordPress.

Para que te hagas una idea, si tienes una web donde has creado un custom-post con campos personalizados específicos, también podrás darle forma desde este tipo de plantillas y aprovechar la funcionalidad de campos dinámicos de Elementor Pro.

Como en el caso de los dos tipos de módulos anteriores, también ofrece plantillas para darnos ideas:

theme builder elementor pro

También quiero decir que esto es aplicable a WooCommerce, ya que los productos de WooCommerce son custom-post en WordPress y también tenemos plantillas para darles forma:

theme builder elementor pro

En el siguiente vídeo puedes ver cómo darle forma al single-post o individual de forma práctica:

Debes tener en cuenta que con esto no le das forma a la cabecera o al footer, sino solamente a la parte que afecta.

Con el sistema de condicionales puedes hacer cosas que molan mucho, ya que si fuese necesario puedes filtrar hasta por ID de post y no solo por tipo de post.

 

Plantilla Single Page con Elementor Pro

Esto no tiene mucha ciencia, simplemente es una plantilla que le dará forma a las páginas (y solo a las páginas). Esto no quita que puedas crear diseños y maquetaciones personalizadas para páginas específicas, pero de este modo puedes dar forma a las páginas de forma general.

Los elementos y widgets recomendados son los mismos que para Single Post, aunque nosotros podemos diseñar como queramos. Las plantillas predefinidas que trae Elementor Pro son más “técnicas” que de diseño:

theme builder elementor pro

En el siguiente vídeo puedes ver un ejemplo de cómo construir la apariencia de una página con Elementor Pro:

Aunque lo más común es establecer un solo diseño para todas las páginas y tratar las excepciones por separado, con el sistema de condicionales de Elementor Pro podemos establecer distintos diseños para distintas páginas, incluso filtrando por ID.

 

Categorías y taxonomías con Elementor Pro

La verdad es que esta es una de las capacidades de personalización de Elementor Pro que más me gustan, debido a que las categorías son una parte que WordPress debería dejar personalizar mejor. Esto también es aplicable a WooCommerce y a otros plugins que declaran custom-taxonomies, así como a los tags o etiquetas, que no he mencionado hasta ahora porque poca gente los utiliza.

En la sección de plantillas de Elementor Pro este tipo de contenidos se llaman “Archive”:

theme builder elementor pro

En el siguiente vídeo puedes ver cómo crear un ejemplo de “Archive” orientado a crear una categoría:

Al igual que en el resto de casos, con el sistema de condicionales de Elementor Pro tú eliges en qué tipo de contenidos se cargará la plantilla a la que no le has dado forma.

Como he dicho al principio, las categorías en el papel de clasificar contenido son una de las grandes olvidadas de la mayoría de los themes. Sin embargo, con Elementor Pro podemos dejarlas como nosotros queramos.

 

Resultados de búsqueda con Elementor Pro

Si queremos diseñar el modo en que WordPress nos devuelve los resultados de búsqueda, simplemente tenemos que usar el theme builder de Elementor Pro y dar forma a esa parte. No existen plantillas para esto, aunque podemos utilizar cualquiera de las de “Archive”.

En el siguiente vídeo puedes ver cómo configurar una plantilla de resultados de búsqueda en Elementor Pro:

Podemos combinar elementos dinámicos con elementos fijos, consiguiendo así una página de resultados de búsqueda atractiva y con un buen engagement.

theme builder elementor pro

En este caso, el sistema de condicionales de Elementor Pro es muy simple y solo hay una opción posible.

 

Error 404 personalizado con Elementor Pro

Con el theme builder de Elementor Pro también podemos personalizar completamente el error 404 de nuestro sitio web hasta conseguir cosas como esta:

theme builder elementor pro

En el siguiente vídeo puedes ver cómo maquetar y personalizar el error 404 con el theme builder de Elementor Pro:

Como en el caso anterior, el sistema de condicionales es muy simple para este caso y solo tenemos una opción.

 

Sección en Elementor Pro

Llegamos a la parte final y también a las más polivalente: las secciones.

Las secciones son bloques completos en los que podemos combinar distintos elementos y que pueden ser insertados mediante un shortcode donde nosotros queramos.

Precisamente esto, la posibilidad de insertarlos mediante shortcode en cualquier lado, es su punto fuerte.

theme builder elementor pro

En el siguiente vídeo puedes ver cómo maquetar una sección con Elementor Pro:

A diferencia del resto de elementos y módulos que hemos visto en este post, las secciones no tienen que ser creadas utilizando el theme builder y pueden ser utilizadas en la interfaz normal de Elementor Pro, como puedes ver en la imagen anterior.

Podemos utilizar secciones para crear bloques completos como un sidebar, un CTA o un formulario insertable. Precisamente he hablado de las secciones, aunque no se crean desde el theme builder, porque pueden ser muy útiles para ser utilizados en el theme builder.

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

Tal vez te interese...

Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.

10 respuestas

  1. Hola Alvaro y muchas gracias por éstos post tan concienzudos y esclarecedores que te curras y compartes.
    Te quería preguntar si (teniendo en cuenta las nuevas características y funcionalidades de Elementor) consideras oporturno prescindir de la utilización de un tema o plantilla como GeneratePress o Astra y usar HelloTheme .
    Soy nuevo en éste mundillo y estoy intentado desarrollar un sitio web. Había pensado utilizar Elementor como maquetador y Astra como plantilla; pero ahora tengo la duda si será preferible utilizar HelloTheme.

    1. Hola Joaquin, pues la verdad es que creo que es cuestion de gustos, ya que yo por ejemplo hace tiempo que desarrollo todo con Hello Elementor, pero hay mucha gente que usa GeneratePress, Astra u OceanWP como base.

      Todos estos tienen bastantes funcionalidades, pero Hello Elementor es una base limpia.

  2. Alvaro el post es una maravilla 😉

    Quisiera hacerte una pregunta. Tengo varias webs desarrolladas en wordpress con Elementor + GeneratePress y desde que he actualizado a Elementor 3.0, la velocidad que marca Page Speed de Google ha descendido drásticamente. De 80 pts de media a unos 15 pts.

    Me he vuelto loco porque tengo los recursos minificados, la caché activada correctamente y las imágenes reducidas.

    Al leer tu post he cambiado el tema a Hello Elementor (Genial, por cierto) pero la velocidad sigue siendo la misma. Es algo que me tiene desesperado.

    ¿Sabes si hay algo que pueda optimizar en Elementor para que no me pase esto? Ya te digo que ha sido justo despues de actualizar a 3.0

    Muuuchas gracias.

    1. Hola Carlos, pues…si puedes mandarme una URL por el form de contacto lo reviso…

      Esta la cosa jodida, ellos dicen que han mejorado en toda la parte de perfweb, pero…no lo tengo yo tan claro…por una razón de naturaleza el sistema es pesado…

    1. Buenas Carlos, te acabo de contestar al email. Si no te ha llegado hablame por linkedin y te lo paso por Linkedin.

  3. Hola Alvaro, primero gracias por compartir sabiduría en tus artículos.
    Sobre éste, la verdad es que siempre me da la sensación de que Elementor te da un incontable número de posibilidades y más para los que como yo, no sabemos código. Pero he oido sobre cierta discusión sobre si ralentiza o no tu web…. qué opinas?.

    1. Hola Hector, pues es algo de lo que he hablado y he expuesto mi postura al menos 6 veces en la ultima semana…

      ¿Es mejorable? Si
      ¿Ralentiza la web? Solo da una mala puntuación en PageSpeed, en velocidad perceptible va bien.
      ¿Es dañino para la web? No, aunque depende de los elementos que le metas y si te pasas metiéndole complejidad a la web.

      Para mas info sobre mi postura, consulta este articulo: https://alvarofontela.com/wpo-teoria-vs-practica-metricas-puntuaciones-tiempos/

      Si tienes cualquier duda, pregunta sin miedo e intentare darte mi punto de vista, aunque repito, es simplemente mi punto de vista.

  4. Hola Álvaro.

    Gracias por tus posts. En mi caso me ayudan mucho a mejorar la web poco a poco.

    Me ha pasado como a otros lectores. Llevaba unos días con la mosca detrás de la oreja con la velocidad de carga ya que también me ha aumentado y no entendía el motivo.

    Con lo que acabo de leer me quedo un poco más tranquilo ya que sobrentiendo que es cosa de Elementor. En mi caso no me planteo prescindir de este plugin así que esperemos que en próximas actualizaciones mejore este tema.

    Un saludo

    1. Hola Jose, gracias por tu opinion.

      Efectivamente, solo queda esperar. Hay una opción nueva en Elementor para bajar el tema de los elementos DOM, pero con el CSS creo que aun no han hecho nada relevante…

Deja una respuesta

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

Share on twitter
Share on facebook
Share on linkedin
¿Quieres recibir mi contenido semanal?
¡Te enviare todas las semanas mi contenido!
Cabecera del formulario de suscripción