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:
A esto otro:
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.
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:
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.
¿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.
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:
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:
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:
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:
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”:
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.
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:
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.
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.
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
21 Responses
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.
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.
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.
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…
Muchísimas gracias, Álvaro. te la paso si quieres por linkedin que es más rápido.
Gracias de nuevo.
Buenas Carlos, te acabo de contestar al email. Si no te ha llegado hablame por linkedin y te lo paso por Linkedin.
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?.
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.
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
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…
Qué tal, Alvaro.
Muy valioso el conocimiento que nos comparte.
Muchas gracias.
Hola Yesid, muchas gracias por tu comentario 😉
Hola Alvaro, he llegado hasta tu blog, después de mirar mucho sobre Elementor, pues creo que algo estoy haciendo mal, que no consigo poder crear páginas con el Theme Builder.
Yo he creado una plantilla de Single Page, ya con unas imágenes y textos para reemplazar al ir creando diferentes páginas y con una condición para poder aplicarla a unas páginas concretas.
Pero es que cuando creo las páginas, luego no veo dónde poder editarlas y cambiar solo el contenido, pues me abre el enlace para cambiar toda las plantillas.
Gracias por todo!
Hola Eva, es que una single page no es para eso, creo que lo que tu quieres hacer es un single post.
Una single page es lo que dice el nombre, una pagina, no puedes usarla ni como plantilla ni como layout.
Sin embargo el single post si, ya que puedes asociarlo a cualquier custom-post declarado en WordPress.
Hola Álvaro! Primero darte la gracias por compartir.
Soy nuevo en WordPress y he creado mis pagina con elementor mediante el theme building, ahora que las engo todas querria organizar los enlaces de mi menu. Vamos, que cuando clicke en contactos me envie a mi plantilla de contactos. Deberia insertar los shortcode en las urls del menu?? podrias ayudarme o referenciarme algun tutorial donde encuentre respuestas. Gracias
Hola Raul, pues depende de como lo hayas estructurado.
Pero si tu creas un menú mediante el método nativo de WordPress, puedes insertarlo en cualquier parte utilizando el widget de Nav Menu de Elementor, o si quieres colocarlo en cualquier lado mediante shortcode, puedes crear una “Sección” de Elementor donde metes un Nav Menu y después con shortcode puedes meter esa “Sección” donde quieras.
Hola Álvaro!
Me encantan todos tus posts, de verdad! Como siempre, disculpa si mis preguntas son de novata total. Anteriormente había construido un par de webs con Divi, que para empezar… muy bien! Como personalicé mucho, me ha permitido tener algunas nociones de CSS y tal. Ahora estoy iniciándome en un proyecto más interesante y quería dar un salto. Tengo muchas dudas ya que me gustaría crear mi web en GeneratePress Pro (tengo que estudiármelo!), por lo que leo es muy versátil, teniendo en cuenta su ligereza. Aun así, por ejemplo, para la HomePage, que me gustaría hacer algo más espectacular, no sé si se me quedará corto (teniendo en cuenta mi nivel de conocimientos) y veo que con Elementor sí podría lograrlo y es compatible. Sé que las principales críticas a Divi, Elementor… es que cargan muchos elementos no necesarios. Mi pregunta es, con un plugin tipo Perfmatters podría evitar esto? Es decir, aprovechar las virtudes de GeneratePress y en la HomePage, por ejemplo, sí tener activado Elementor y en el resto de la web no? O aun así se cargarían todos esos estilos y elementos innecesarios? Muchas gracias!!!
Hola Victoria, la respuesta tendría que ser mucho más larga y matizada, pero en resumen: sí, podrías usar Perfmatters para desactivar los scripts y CSS de Elementor en las demás páginas (que no sean la home).
genial, gracias!
Alvaro: A propósito de este contenido, sobre Elementor, hago la siguiente consulta, dado un a tienda que utiliza WP + Woo + Elementor Pro. De que forma se debe utilizar la Single Page, tal que pueda ser FLEXIBLE como ¿para representar 2 tipos de productos cuya estructura son muy diferentes entre si? Pasa que la plantilla, si funciona con los productos que son simples o comunes, pero para el otro tipo de producto, al tener una estructura muy distinta (con metaboxes y custom fields), no se puede utilizar la misma “Plantilla Single”, creada con Elementor, ya que no tienen los mismos campos. Lo apropiado sería tener 2 tipos de Singles Pages pero Elementor No lo permite. Sabes cual es le método a utilizar? Gracias
Hola Rodrigo, bufff, lo que me comentas es un tema complejo. Yo personalmente siempre suelo usar un mismo single para todos los productos, aunque sean muy diferentes, y las modificaciones que necesite hacer las hago usando custom-fields en los productos.
Aunque se pueden usar distintos layouts para distintos productos, esto puede ser un “lio” a nivel de condicionales. Incluso aunque los agrupemos por una taxonomia (como por ejemplo una categoria).
Elementor sí que lo permite, pero vas a tener que pegarte con los condicionales del Single Post y añadirle que cubra los productos, pero que cumpla la condición de ser de una categoría concreta o similar.