Template kits, las plantillas de Elementor vitaminadas

Seguro que muchas veces has tenido bloqueos al diseñar tu página web u otros proyectos en WordPress. Si no sabes por dónde empezar, una manera fácil, rápida y efectiva de crear tu sitio web es utilizando los template kits de Elementor. [elementor-template id="80835"]

Un poco de historia de los template kits

Mucho ha pasado desde que se lanzaron los template kits de plantillas para Elementor, allá por julio de 2021. La verdad es que yo era super fanática de los kits que tenía la gente del tema Astra en su plugin Starter templates. ¡Tenías una web instalada en 5 minutos! Este plugin, que ha sufrido muchas modificaciones, fue lanzado en 2017 y tiene, ojo, más de un millón de instalaciones activas. Es probablemente uno de los precursores en kits completos para page builders, en su día para diseños con el plugin de Beaver Builder o Elementor. Hablaremos un poco más de él después, de sus luces y sombras, pero lo comento aquí porque era terriblemente fácil de instalar, en un solo clic todo: elegir el builder, la plantilla y, en unos pocos minutos, estaba todo instalado en tu proyecto a través de un super script. Está claro que Elementor se ha inspirado en esta sencillez y lo ha llevado a otro nivel.

¿Qué son los template kits?

Los template kits son una serie de plantillas y elementos que componen un diseño y estructura de una página web completa, con todas sus funciones y sin necesidad de código ni desarrolladores. Estos template kits están previamente diseñados y estructurados, para acelerar el proceso de creación de tu web para así poder tenerla lista lo antes posible, sin comerte mucho la cabeza, y son la máxima expresión de las famosas plantillas de Elementor. Elementor siempre ha dispuesto de una extensa librería de plantillas de páginas individuales con las que poder construir una web completa. Años atrás, ya sacaban un juego de plantillas mensuales completo. Estas incluían, normalmente, la plantilla de página de Inicio, de Quiénes somos, Nuestros productos o servicios, Contacto, etc. Pero la web en WordPress se tenía que construir todavía a mano, importando individualmente, y sin disponer de plantillas dinámicas avanzadas. Y ahí nacieron los kits de plantillas de Elementor.

Estructura de los kits de plantillas de Elementor

Ya hemos hablado de las páginas que componen un kit. La otra parte son las plantillas, en este caso dinámicas, que incluyen los kits. Estas plantillas las puedes ver en el maquetador de temas y son, en esencia, las mismas plantillas de página que tiene un tema de WordPress: Cabecera, Pie de página, Página individual, Entrada individual o Single post, Archivo, Resultados de búsqueda, Producto, Archivo de productos y Página 404. Esta es la magia de Elementor Pro y también de los template kits. Al seguir la misma estructura de plantillas dinámicas de WordPress, Elementor sigue las buenas prácticas recomendadas y hace cualquier proyecto válido ahora y en el futuro. Los template kits derivan de la funcionalidad de importar y exportar kits completos disponible dentro de la sección de Elementor > Herramientas > Importar / Exportar kit. Esta funcionalidad, si os interesa, la podemos desarrollar en otro artículo. Es súper interesante y abre una auténtica variedad de posibilidades de trabajo e, incluso, de modelos de negocio muy atractivos (incluidos los marketplace de template kits, algunos de los cuales os comparto más abajo, hacia el final del artículo). Además, un buen kit de Elementor no estaría completo sin un pop-up. Aunque hay debate de si se deben usar ventanas emergentes o no, Elementor lo incluye. Ya queda en cada usuario cómo usarlas, dónde y con qué frecuencia. Y las ventanas o mensajes emergentes también las puedes usar para crear menús modernos. Mira algunos ejemplos en la imagen de abajo. Podemos encontrar esta serie de kits en la biblioteca de kits de Elementor, donde hay gran variedad de diseños para diferentes tipos de sitios web, e incluso filtrarlas por categorías así como blog, portfolio o ecommerce.

Descubre la biblioteca de kits

Para acceder a esta biblioteca tan solo debemos ir a la pestaña de Plantillas > Biblioteca de Kits. Aquí se nos abrirá un panel con todos los kits disponibles para insertar en nuestro sitio web.

Tipos de Kits de plantillas de Elementor que podemos encontrar

Kits gratuitos

Los kits gratuitos son más básicos y no disponen de las plantillas dinámicas del maquetador de temas. Están pensados para la versión de Elementor del repositorio de WordPress, es decir, la versión gratuita, que no dispone de tales funcionalidades. Si solo quieres usar la versión gratuita de Elementor, encontrarás una serie más limitada de kits disponibles en la biblioteca de kits de Elementor. A día de hoy, estos kits están diseñados solamente con secciones y columnas en vez de contenedores, pero en unos minutos puedes convertirlos manualmente a contenedores y desde ahí seguir construyendo con esta nueva tecnología. Los kits gratuitos no están pensados para WooCommerce porque las funcionalidades de Elementor para WooCommerce solo están incluidas en la versión Pro, al igual que el resto de funcionalidades dinámicas. Si quisieras hacer un WooCommerce con Elementor gratuito, te recomiendo que uses algún tema de WordPress que esté especializado en WooCommerce y Elementor, en los cuales encontrarás ya algunas funcionalidades y widgets gratuitas incluidas. Ojo, recuerda que el comercio electrónico requiere ya algo más de conocimiento, así que ármate de paciencia. Para ayudarte, estoy preparando un artículo especial de Elementor y WooCommerce.

Kits para Elementor PRO

Los kits de Elementor Pro son más completos que los gratuitos. Incluyen todas las páginas estáticas que vas a necesitar, así como todas las plantillas dinámicas que te mostré y expliqué más arriba en la estructura de los kits. Son kits realmente preciosos y sofisticados con una interfaz de usuario muy bien diseñada. Además, cubren todas las temáticas imaginables.

Kits para Elementor Pro con WooCommerce

Los kits para ecommerce no son tan amplios, pero puedes encontrar una gran variedad de temas, como tiendas de cerámica, ecológicos, de ropa, de café, de merchandising, de flores, de skate. etc. También tienes uno en modo hilo de alambre o wireframe que te puede servir para cualquier caso que te puedas imaginar...

Wireframe Kits, un gran descubrimiento

Hace poco, Elementor empezó a incluir entre sus diseños los wireframe kits. Tienen una aproximación totalmente distinta a las otras plantillas. A veces solo necesitas una estructura de base para tu web, sin mucho diseño ni complejidades. Aunque al principio pueden parecer un producto menor, ya que los diseños son básicos, con tipografías y colores más bien neutros, es precisamente ahí donde está su valor.

Detalles de los Wireframe kits

Estos Wireframe Kits contienen también la plantilla de la página de inicio, de servicios, información, de contacto, de 404... En fin, todo lo necesario para la construcción del sitio web de tu negocio. Se centran mucho más en la estructura general y la jerarquía de información de la página. Están diseñados en una escala de grises con marcadores para agregar tu contenido. Se trata de elegir colores y fuentes y añadir las fotos y los textos que queremos añadir. Aquí, además, con la nueva herramienta de Elementor AI ya puedes añadir textos e imágenes directamente a las plantillas y páginas de Elementor con un clic o dos. También son una gran elección cuando no hemos encontrado anteriormente kits que encajen del todo con lo que queremos reflejar en nuestra web. Muchas veces, es más difícil quitar elementos en diseños muy personalizados que simplemente ir añadiendo lo que necesitamos. Los wireframes son totalmente personalizables, por lo que puedes ajustarlos a tus necesidades específicas a través de las fuentes y colores globales. Además, los puedes encontrar fácilmente en una de las categorías dedicadas en la página de la biblioteca de kits. Para usar un kit de tipo wireframe (o hilo de alambre) ve al panel de control de WordPress y haz clic en "Biblioteca de kits" en la pestaña Plantillas, filtra por Wireframe y, luego, elige la plantilla que más se ajuste a la estructura que necesitas para tu web.

¿Cómo instalar un Template Kit?

Ahora que ya sabemos qué tipo de kit nos conviene, lo primero que tenemos que decidir, cuando instalamos un kit de plantillas o Template Kit de Elementor, es qué tema vamos a usar. Por regla general, con las funciones avanzadas que tiene Elementor, la opción clara es elegir Hello Elementor (ya escribí una reseña sobre Hello Elementor, por si quieres leerla). Te hago un poco de spoiler: es gratuito, así que no tienes que incrementar el presupuesto y carga a la velocidad del rayo. En algunos casos, en plantillas de Starter templates o WooCommerce, el tema Astra puede ser una alternativa, así como algún tema especializado en comercio electrónico. Pero ojo, porque Hello Elementor se defiende muy bien también para ecommerce. Lo segundo que tenemos que decidir es si vamos a trabajar con el modo clásico de secciones y columnas (no os lo recomiendo ya para sitios web nuevos) o si queremos trabajar con el modelo moderno de contenedores, mucho más potente y ligero. Para ello, antes de importar nada, debes comprobar en los ajustes de Elementor las características (antes conocidas como experimentos) y estar seguro de tener activado los contenedores. Y, en el caso contrario, si quieres usar el modo clásico de secciones debes desactivar los contenedores. Recuerda que (casi) todas las funcionalidades nuevas que está sacando Elementor, que son muchas, están basadas en contenedores: una tecnología más moderna, potente y flexible. Resuelto el tema de si queremos secciones o contenedores, para instalar en nuestro sitio web un kit, debemos ir a la pestaña de Plantillas > Biblioteca de Kits. Para filtrar entre las diferentes plantillas podemos ayudarnos de las categorías que aparecen en la barra lateral izquierda. Te recomiendo previsualizar cualquier kit antes de instalarlo, tanto en versión escritorio como en tablet o móvil. Si hacemos clic en el botón overview del kit, veremos todas los elementos que se insertarán en nuestra web junto con las plantillas, el contenido del sitio, las ventanas emergentes o los ajustes globales. Adicionalmente, también contamos con una página de global styles donde podremos ver rápidamente cómo quedan los diseños de todas las configuraciones globales que se están aplicando en el kit. Una vez hayamos elegido un kit de plantillas que nos guste, será tan sencillo como hacer clic en el botón de "Apply Kit" situado en la parte superior derecha de la pantalla. Seguidamente, nos preguntará si queremos importar todo o personalizar, es decir, nos permite seleccionar los elementos marcando o desmarcando las casillas de las plantillas que queremos importar a nuestra web. Todos estos elementos se introducirán en el sitio web en cuanto haya finalizado la importación; normalmente, en unos segundos.

Otras librerías donde encontrar template kits

En la biblioteca de kits hay muchas plantillas para Elementor que puedes instalar en tu sitio web. Pero ni es la única, ni vas a encontrar todo lo que puedes necesitar, ni a lo mejor es la que más te guste. Aunque insisto, antes de usar otras librerías, no dejes de revisar las template kits aunque tengas que adaptarla un poco a tus necesidades o empezar con un wireframe kit.

Envato Elements

Envato Elements fue lanzado en 2019 como un producto para diseñadores, con un stock inabarcable de audios, canciones, fotografías, animaciones, modelos 3D, plantillas de páginas web, plugins y temas de WordPress y, cómo no, kits de plantillas para Elementor completos por un precio fijo mensual. Es un mundo en sí mismo y merece un artículo entero, pero vamos a ver al menos un aperitivo y vamos a entender cómo funcionan sus kits. Hay dos formas de acceder al contenido de Envato Elements: desde una cuenta de pago donde puedes navegar por todo su contenido desde su plataforma o, mucho mejor, desde el plugin para WordPress de Envato Elements. Te puedes descargar cosas gratuitamente y te da acceso directo a, ojo al dato, kits completos gratuitos, premium, plantillas sueltas e incluso bloques. Además, dispone de una enorme biblioteca de fotografías. Antes creo recordar que era una selección gratuita de fotos pero, aunque es una pena, ya no. Los kits de plantillas para Elementor de Envato tiene algunas peculiaridades que los hacen, a la vez, muy interesantes y únicos en WordPress. En el momento de estar escribiendo esto, dispone de más de 150 kits completos gratuitos, unos 3300 kits premium, cientos de bloques gratuitos y más de un millón de fotos de stock premium. Todo a un clic de tu alcance.

Template kits y bloques

Los template kits gratuitos (y los de pago, por supuesto) a diferencia de los de Elementor, sí usan widgets y funcionalidades de la versión Pro. Esto los hace especialmente atractivos, sobre todo comparados con otros marketplaces de plantillas de Elementor, que incluyen widgets de pago diferentes de los de Elementor Pro, incrementando los plugins requeridos y, muchas veces, con una calidad de código y diseño inferior. En cuanto a los kits de plantillas premium, si hay algo difícil es elegir uno, por la cantidad enorme que existe. Una cosa que suele acompañar a los kits premium es la inclusión de una página dedicada a la hoja de estilo que nos ayuda a visualizar, de manera muy cómoda, las tipografías y colores globales del tema elegido.

Librería de fotografía

Aunque esto no son estrictamente kits de plantillas, las imágenes te van a ayudar mucho a conseguir las fotos que necesitas realmente y tiene cositas muy "chulis". Las fotos las puedes filtrar por orientación, tipos de fondo, o incluso, flipa, por colores. Aunque esta parte sea exclusivamente de pago, tener un millón de fotos a tu disposición (generalmente muy superiores en calidad, pero sobre todo en opciones) es un auténtico lujo.

Algunas malas noticias sobre los template kits de Envato

Aunque estos templates y páginas web son extraordinarias, hay varias consideraciones que tienes que tener en cuenta al elegirlas. Meten mucho código CSS (pero mucho, mucho). Los diseñadores de marketplaces son muchos de la vieja escuela y tiran de CSS aunque no lo necesiten. Eso produce dos problemas:

• Es difícil encontrar dónde están las personalizaciones.
• Te exige saber CSS y no siempre lo básico.

El otro gran problema que tienen estas plantillas para Elementor es que muchas de ellas se hicieron hace un tiempo y están basadas en el modelo de diseño de Elementor de secciones y columnas, en vez del más moderno de contenedores flexbox.

Template kits de Astra

Los template kits de plantillas de Astra, que mencionaba al principio, merecen un lugar en este artículo. Aunque disponen de muchos kits completos, su aproximación es menos elegante y más engorrosa que la de Elementor. Lo primero es que te exige tener el tema Astra instalado y activado para poder acceder a sus plantillas. Lo segundo es que pone mucha funcionalidad en el tema, lógicamente, pero ya hemos hablado que el tema está perdiendo mucho terreno frente a los builders. Están migrando de Elementor a Gutenberg. Aunque todavía tienen muchos clientes fieles a Elementor, la verdad es que su camino hacia el editor de bloques no tiene marcha atrás. Su desarrollo de un editor vitaminado para Gutenberg lo dice a las claras. Si estás usando Elementor, quizás sea momento de irte despidiendo de este tema y de su instalador de plantillas.

Templately, una herramienta cloud de plantillas de Essential Addons

Templately es una aproximación distinta también. Es un cloud donde puedes tener tus propias plantillas y compartir con compañeros de trabajo o incluso poner tus plantillas a la venta. También te da acceso a una enorme cantidad de plantillas gratuitas, más de 700, y a otras tantas de pago. Lo que más me gusta es la capacidad de filtrar que no solo es muy completa sino que, además, permite filtrar por dependencias tales como Elementor Pro, Learndash o Essential. +10 por este dato tan chulo :)

Otros desarrolladores de plantillas para Elementor

Para ir cerrando dónde encontrar Elementor kits, vamos a hablar de Themeforest y TemplateMonster (atención, spoiler: esto es zona radioactiva).

Themeforest

Este marketplace, también conocido como Envato Market, es el hermano mayor de Envato Elements. La gran diferencia entre ambos es que en este haces uno solo pago por cada elemento y en el otro haces un pago periódico por acceso a toda la biblioteca. Puedes encontrar más de 3500 template kits de Elementor, pero no se te ocurra comprar ningún tema. Si dudas, descártalo.

TemplateMonster

Este marketplace es de la misma categoría que el anterior y conviene evitarlo. Hay una excepción y es la selección de más de 700 template kits y plantillas para Elementor entre 9 y 30 dólares que a lo mejor querrías estudiar.

Conclusiones

Ventajas de utilizar los template kits

Realmente, cuando no tenemos esa ayuda de un diseñador o nos frustramos por no terminar de lanzar nuestra página web, las plantillas de kits pueden resultar muy útiles.

• Te ahorras mucho tiempo. Al usar un Wireframe Kit, puedes tener lista la maquetación de tu sitio web en cuestión de minutos e incluyendo todos sus componentes. De esta forma, puedes invertir más tiempo en pensar cómo vas a diseñar tu web sin preocuparte tanto por su estructura.
• Personaliza el kit. Puedes adaptar el kit a la identidad visual de tu marca. Los wireframe kits serían los ideales si nuestro objetivo es usarlo como base para nuestro sitio web sobre el que podemos construir y aplicar nuestro propio contenido y diseño.
• Crea tu propio kit. Puedes crearte un kit completamente a medida con los elementos básicos que puedes necesitar en cualquier sitio web y dejar listas algunas de las configuraciones globales que necesitarás.
• Hace que tu diseño sea homogéneo. Mantener el estilo visual en todos los componentes de tu web puede ser algo tedioso si estás empezando. Los template kits pueden facilitarte esta labor, ya que todos los elementos que lo componen trabajan la misma línea.
• Fuente de inspiración. Como hemos visto, podemos previsualizar todos los kits sin necesidad de insertarlos. La gran variedad de estilos aplicados en estas plantillas nos puede servir como inspiración. Podemos ver cómo podemos diseñar los diferentes widgets y maquetar secciones en Elementor que quizá no se te habrían ocurrido antes. También nos pueden servir de inspiración a la hora de crear animaciones.

¿Debería usar un template kit?

Como siempre, la respuesta es "depende". Lo mejor es preguntarse:

• ¿Cuánto voy a cobrar por el trabajo?
• ¿Cuánto tiempo le puedo dedicar a este proyecto?
• ¿Cuál es mi capacidad de diseño?
• ¿Cuáles son las necesidades del proyecto?

Como ves, son bastantes las preguntas que hay que responder pero seguro que, si no usas un template kit de Elementor en el diseño de tu proyecto, al menos puedes buscar inspiración en alguna de las librerías que he compartido. Y no te olvides de que muchos profesionales usan una plantilla en su proyecto si eso responde a algún problema que encuentran, aunque sea una sola página o un kit de base de wireframe. Los kits han sido creados por y para diseñadores profesionales de Elementor con el fin de que los elementos que los componen puedan modificarse y cambiarse para una fácil adaptación a las líneas de estilo de la marca o el negocio. Además, muchas de las que consideradas buenas prácticas han sido implementadas al crear estos kits de Elementor, así como nombrar cada sección para facilitar su búsqueda, la reducción del tamaño de las imágenes usadas dentro de los kits y el uso adecuado de las configuraciones globales para que sea más eficiente y sencillo realizar cambios sobre la plantilla. Todo el responsive, de ordenador a tableta y a móvil, está preconfigurado y apenas te va a llevar ajustarlo en tu versión final. Crear un sitio web es un proyecto que requiere tiempo y paciencia. El objetivo de estos kits es ayudarte en el proceso y que te sea mucho más fácil lanzar tu página web sin que tengas que partir desde cero. Espero que te haya gustado el post. Puedes dejar a continuación tus comentarios, dudas o solicitudes para nuevos artículos.