Descubrirán un nuevo y fantástico concepto para crear sitios de WordPress, por más que rompa con muchas tradiciones. No nos adjudicamos la invención del combo Elementor y Underscores, aunque no hemos escuchado que alguien más lo usara hasta el momento de escribir esta entrada. Por lo tanto, se los enseñaremos para que tal vez puedan cambiar el punto de vista. Como recompensa, se beneficiarán de un sitio WordPress con mejor rendimiento y menor sobrecarga.
El flujo de trabajo normal en la creación de un sitio WordPress
Un método establecido, y que apela al sentido común, es algo parecido a esto:
- ¡Comprar un tema WordPress en Themeforest!
- ¡Usar el constructor que viene integrado!
- ¡Llenar el sitio de plugins!
- ¡Personalizarlo!
- ¡Quejarnos de que es lento!
- ¡Temblar ante cada actualización!
Esto era todo lo que conocíamos y recomendábamos a nuestros amigos y conocidos. Claro que genera tráfico y ventas a los temas premium de Themeforest, pero, ¿a qué costo? La mayoría de los sitios hoy en día tienen colgado el cartel luminoso “¡PLANTILLA!” Se puede notar que el dueño está conforme con el diseño predeterminado, y no se molestó mucho en ajustar nada. ¿Nuestro método puede ser un cambio en las reglas del juego?
¿Qué hicimos para encontrar esta solución?
Nos pasamos horas incontables “amansando” costosos temas de WordPress hasta que se comportaran como queríamos. Aunque un tema esté catalogado como “multipropósito”, a la larga se vuelve en contra de sí mismo. Se han tornado tan complicados, que uno diseña el sitio entero y no queda casi nada del concepto original del tema. Muy a menudo, los creadores de temas tienden a añadir un constructor de páginas (entre otros plugins) a su ya complejo código de base, para seguir siendo competitivos en el mercado. Si quitamos todos los plugins adicionales y las bonitas fotos de bancos de imágenes que aparecen en las demos, ¿qué queda? Si de todas maneras vamos a diseñar todo nosotros mismos, ¿para qué comprar un tema tan caro?
Hemos trabajado con distintos constructores de páginas, más que nada con WPBakery Page Builder, antes conocido como Visual Composer. Nuestra experiencia fue encontrar que algunos temas premium desactivaban la edición en vivo del front-end. Eso nos priva de su verdadera fortaleza, y nos devuelve una experiencia tortuosa en la interfaz de administración. Hemos creado un sitio con el combo tema premium y Visual Composer, pero nos cansamos de su complejidad. Decidimos abandonarlo y buscar una estrategia mejor, que más tarde se convirtió en la pareja Elementor y Underscores.
¿Qué tal si un constructor de páginas fuera tan poderoso como para hacer también el papel de tema? Tendríamos un sitio más rápido, con un solo producto por aprender. Uno de los mejores para esta tarea es Elementor, en su versión Pro.
Nuestro método alternativo con Elementor Pro y Underscores
Hemos notado, luego de adentrarnos en las pantallas de administración de Elementor Pro, que tiene las mismas capacidades que un tema. Podemos crear un diseño y asignarlo a los archivos. Crear otro para las páginas 404, las barras laterales, etc. Curiosamente, hace todo lo que se supone que debería hacer un tema. Por lo tanto, parecía promisorio y quisimos ver cuánto podría lograr por sí solo.
No nos tomó mucho tiempo hasta dar con un tema casi completamente vacío, llamado Underscores. Ese tema está muy lejos de lo que podríamos encontrar en Themeforest. Es como un lienzo en blanco, con lo mínimo requerido para que funcione WordPress. La idea era que todo el colorido que se viera en el front-end, proviniera de Elementor (ya que el tema carece de estilos). ¡Así nació la combinación de Elementor y Underscores!
¿Qué es el tema de WordPress Underscores?
Puede que se pregunten qué es. Cuando se crean temas (quizá para ser comercializados), un desarrollador no quiere empezar de cero. Estos “temas esqueleto” incluyen código general que es común entre cada tema existente. Es como la estructura fundamental. Claro que existen variantes en la manera en la cual los programadores implementan esa estructura general, pero la base del núcleo es la misma. Queríamos una plantilla que tuviera solo esas líneas esenciales y nada más.
Las etiquetas específicas de la plantilla son las que mantienen la unidad de un sitio WordPress. Tales como las que se usan para crear un área que se transformará en la cabecera o el pie de un documento HTML. De manera similar, la página necesita saber dónde se mostrará el contenido, el menú, la barra lateral, o los comentarios. Es claro y directo.
Si instalamos este tema, el front-end parecerá “roto”. Colores azules y morados para los enlaces, ningún estilo, texto negro sobre fondo blanco. La cosa entera tiene menos de 100KB. Para empezar, hace que el sitio sea rápido. No hay sobrecarga del lado del tema. Tal y como nos gusta.
No por nada Automattic (los responsables del proyecto WordPress) crearon Underscores. Su naturaleza de código abierto asegura que el tema incluye los conocimientos de numerosos desarrolladores y un funcionamiento casi libre de errores. No se actualiza con frecuencia, ya que no lo necesita. Y por fortuna es completamente gratuito, y se puede modificar a gusto. Nosotros lo personalizamos agregando nuestros códigos en un tema hijo.
¿Qué es Elementor?
Es un lindo y moderno constructor de páginas que le da vida a nuestro sitio. Elementor es amigable con los desarrolladores y es ampliable. Este constructor hace posible un muy agradable flujo de trabajo, principalmente gracias a la edición en vivo. Todas estas bondades suenan a anuncio publicitario, pero de verdad nos ha gustado la respuesta inmediata a cada cambio de valor. Podemos aumentar o disminuir valores de márgenes o rellenos con la rueda del ratón y ver cómo cambia el elemento en tiempo real. Nos ha ahorrado un montón de tiempo cuando creamos el diseño.
Por supuesto, como somos programadores, necesitamos añadir mucho código PHP personalizado, CSS y JS. Pero no tuvimos que crear todo de cero, solo las partes que eran propias de nuestro sitio. Estos componentes son los indicadores de dificultad, nuestros enlaces con subrayado animado, y la carga diferida de imágenes, entre otros ajustes.
Elementor y Underscores combinados
Una vez que nos largamos a andar, fue evidente de inmediato que el resultado era fácil de cambiar. Elementor tenía casi todo en su caja de herramientas para emular un tema hecho y derecho. Nuestro sitio es la prueba de que el combo Elementor y Underscores funciona, y creemos que salió bastante bien. En lugar de dos “atiborramientos”, solo tenemos uno. ¿Por qué? Pues porque el tamaño de Elementor es aún significativo, y es capaz de hacer mucho más de lo que necesitamos. Pero al menos, cuando necesitamos algo (un componente), es probable que ya exista en su biblioteca. Es un costo bajo en comparación con un sitio codificado a mano desde cero.
Dificultades con Elementor
No sería una recomendación sincera si omitiéramos mencionar algunos problemas. Algo que Elementor no puede hacer al día de hoy son los comentarios de las entradas. Es decir, insertamos el widget de comentarios, pero este asume que el diseño provendrá del tema en uso. Y como nosotros no tenemos uno, apareció sin estilos; tuvimos que escribir todo el código CSS para ese propósito.
Ningún constructor de páginas o programa es perfecto, así que nos encontramos con varios errores. Los desarrolladores son buenos para corregirlos si se les informa de ellos. No es razón para abandonar el viaje, pero hay que ser consciente de que en el mar de WordPress, las aguas donde tendremos que navegar nunca serán apacibles. Sin importar el discurso adornado con el cual nos quieran vender un tema o un plugin, tarde o temprano enfrentaremos algún problema. Aunque sonemos un tanto pesimistas, es la verdad.
Por desgracia, les tenemos miedo a las actualizaciones, ya que con frecuencia desacomodan las cosas. Como práctica recomendada, sugerimos guardar una copia del sitio para ensayos, y aplicar las actualizaciones y cambios de diseño allí. Los desarrolladores prueban nuevas características para mantenerse al día con las nuevas tecnologías, pero esto no siempre es bueno. Los diseños podrían romperse, y si no sabemos cómo arreglarlos o no tenemos a un experto a mano que se encargue, la pasaremos mal. Lo mismo ocurre con los temas, por cierto, aunque en ese terreno sea tal vez peor. Así que no desestimen nuestro método con base en esto.
Conclusión
¿Podrían no necesitar un tema WordPress después de todo? El combo Elementor y Underscores es una método rentable, bien que alternativo, para un flujo de trabajo típico. Es sencillo de usar y muestra una respuesta instantánea en el resultado de cómo se verá el sitio, aún antes de pulsar el botón Guardar. Nos enorgullece el hecho de no haber utilizado un tema premium en nuestro sitio. Nos permite evitar los descalabros que con frecuencia conllevan.
Usar Elementor y Underscores juntos es lo más cercano a codificar el sitio uno mismo. La combinación tiene incluso más espacio para crecer, pero ya es buena por sí misma. Por eso recomendamos esta solución aún para los principiantes. Elementor contiene bloques integrados para no tener que empezar de cero. Además, la experiencia de construir con una vista previa en vivo es adictiva y se enamorarán de un verdadero proceso “lo que ves es lo que obtienes”.
Nota de la admin: Esta entrada fue publicada originalmente el 12 de octubre de 2018 en el blog Let’s WP, y actualizada el 29 de febrero de 2020. Es la primera de las traducciones de una serie de entradas relevantes creadas por Firsh en ese blog, que abarcan temas de interés y consejos relacionados con WordPress, Elementor y otros plugins recomendados.
- Configurar un formulario de contacto de la manera correcta (From, To, Reply-to) - 30 de noviembre de 2020
- Añadir snippets de código PHP a WordPress de la manera correcta - 31 de octubre de 2020
- Elementor y Underscores: ¿Es realmente necesario un tema? - 22 de septiembre de 2020
Hola! En lo personal me encanta esta combinación y no había tenido problema hasta que lo integré con WooCommerce… Todo iba de maravilla hasta que, por alguna extraña razón, El template Underscores no fue capaz de mostrar el loop de productos cuando intenté hacerlo desde Elementor (Ni en la página principal de la tienda, ni en ninguna categoría o etiqueta).
El catálogo de productos funciona correctamente, pero cuando intenté crear una plantilla con Elementor para mostrar los Archivos de Producto entonces deja de mostrarlos. Lo más raro es que en el constructos de Elementor todo funciona bien, pero al visualizarlo en el sitio web no se muestran los productos.
¿A alguien más le ha pasado? No se me ocurre qué hacer al respecto para resolverlo.
Gracias.
Hola, Sema.
Gracias por tu comentario.
No sabría decirte exactamente, pero por lo que describís podría ser un problema de caché o de incompatibilidad de algún plugin. Fijate que esté todo actualizado, vaciá cachés y probá abrir el sitio en una ventana de incógnito.
Saludos.