465 | Plan en 8 pasos para reemplazar Elementor (sin perder calidad)

En el episodio 465 de WordPress semanal te marco un plan de 8 pasos para reemplazar Elementor y hacer tus próximas webs con el editor nativo de WordPress y por supuesto manteniendo la calidad en tus diseños. Vamos allá. Hola, hola. Soy Gonzalo Navarro y Bienvenidos al episodio 465 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar tus propias webs con WordPress en profundidad. Y este episodio viene porque cada vez veo más gente que usa Elementor o utilizaba Elementor pero se va pasando poco a poco a la edición digamos nativa, porque WordPress ya trae su propio constructor. Hace apenas unos días estuvimos hablando en la comunidad privada de Telegram y también noto un poco de confusión en la gente que siempre ha usado Elementor, conoce WordPress como ya ligado a Elementor, es decir, instalan WordPress en un servidor y automáticamente instalan Elementor para empezar a construir. ¿Entonces el hecho de hacerlo sin Elementor es como no tengo un constructor? Bueno pues si lo tienes, WordPress desde hace ya bastante tiempo tiene su propio constructor nativo, es lo que mucha gente llama Gutenberg, porque se empezó llamando así, o simplemente el editor de WordPress o el editor por bloques o de bloques. Entonces esto es lo primero que debemos entender, que WordPress ya incorpora un constructor y mucha gente pues quiere aprender esta modalidad, a lo mejor pues usan elementos porque están más cómodos, pueden hacer los diseños que tienen que hacer, sobre todo gente que se dedica a hacer webs para otros, pero les gustaría explorar la posibilidad de dejar de utilizarlo, pues porque seguramente han escuchado que Elementor sobrecarga mucho las webs y que puede haber aproximaciones más livianas con resultados similares. Entonces vamos a ver hoy los 8 pasos que te van a llevar a conseguir esto, pero antes novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues hay nuevo vídeo de la zona código y en él aprendes a generar PDFs de tus entrada de WordPress, o más bien permitir que tus visitantes generen PDF. Y para esto yo te enseño en la zona código a instalar una librería que hay, me refiero a nivel de código, que va a permitir que después tú ofrezcas la posibilidad a tus visitantes de que puedan leer o llevarse a cualquier dispositivo tus entradas, tus publicaciones en formato PDF. Esto puede aportar un valor muy chulo, muy útil a tus visitantes, así que échale un vistazo. Ya sabes, todos los miembros tenéis acceso, los miembros de pago en Gonzalo es tenéis acceso a todos los vídeos de la zona código, que lleva más de 400 y que se llama la zona código, pero es código para no desarrolladores. Simplemente copias el código, sigues el vídeo y lo pegas tal y como te muestro. Te voy a dejar el enlace, ya sabes que para ir a ver el formato texto de este episodio, el esquema del programa y todos los enlaces, tienes un link rápido que es Gonzalo Navarro es 465, que es el número de este episodio. Gonzalo Navarro es 465. Y ahí también vas a ver un montón de contenidos recomendados porque a lo largo de este episodio te voy a decir mis preferencias para hacer esa transición de utilizar Elementor a valerte del editor que viene con WordPress y voy a ir dejando todo enlazado. Lo vas a tener de muy fácil acceso. Fantástico, pues estas son las novedades. Vámonos ahora con el plugin de la semana que se llama WP Mail Login y como su nombre indica, este es un plugin que permite registrar y revisar todos los correos que envía tu web con WordPress. Pues lo típico de cuando alguien solicita recuperar la contraseña, cuando alguien se registra y le llegan sus datos. Si utilizas WooCommerce, cuando se mandan los emails relativos a las ventas o cualquier otra cosa, entonces muchas veces hay problemas de entrega. Tú no sabes por qué no están llegando los emails, ni si llegan o no llegan, no estás seguro, a lo mejor la persona te dice que no le llega, pero realmente le ha llegado a spam. Entonces tú para controlar si se están enviando o no, pues este es uno de los plugins que te lo permiten. ¿De acuerdo? Si solo quieres esto, es decir, comprobar si se están enviando, pues este plugin está bien. Si además de esto quieres configurar el envío para que se haga correctamente y que no falle, entonces te recomiendo configurar un plugin de SMTP. Yo ya tengo un episodio del podcast que lo acompaña con un vídeo premium sobre cómo puedes hacer esto. No lo tengo enlazado, pero me lo acabo de apuntar para dejártelo enlazado si es lo que necesita. Venga, pues ahora sí, vámonos con el tema central del el plan en ocho pasos para reemplazar Elementor sin perder calidad. Y vamos con el paso número uno, que es familiarizarte con el editor de bloques y su ecosistema. Esto es un poco lo que contaba en la intro, porque te sonará, seguramente lo conozcas, a lo mejor lo has usado incluso para publicar entradas utilizas el editor de bloques, pero explora más a fondo su potencial porque tiene un montón de características bastante avanzadas, como agrupar bloques, el uso de las columnas, jugar con los anchos totales, con el espaciado. Hay características que son esenciales, sobre todo si vienes de un constructor externo donde se reutilizan muchas cosas y demás. Con el editor nativo tienes algunas características que van en esta línea. Ya digo, es diferente y ahora te hablaré un poquito más de esto, de la mentalidad a la hora de utilizar una herramienta u otra, pero tienes a tu disposición patrones y estilos globales que es lo que te va a permitir ahorrar tiempo y que tus diseños sean consistentes a lo largo de todas las páginas que vayas creando. Así que lo primero es que te familiarices con lo que ofrece el editor y su ecosistema. Segundo, utiliza un buen tema que sea compatible con el editor de bloques. Y aquí tienes dos caminos. Ya siento que sea así, pero en el mundo WordPress hay cosas, hay tanta oferta que muchas veces nos hace compleja la elección, pero hay el mundo de los temas clásicos y el mundo de los temas de bloques. Ambos funcionan y son compatibles con el editor nativo de WordPress. La diferencia está en que con los temas clásicos tú solo vas a utilizar el editor para el contenido y la estructura de las páginas individuales, mientras que con los temas de bloques utilizas el constructor de forma global también para definir, por ejemplo, la cabecera de la web, el pie de página o páginas de archivo como las de blog o categoría. Tengo un episodio dedicado precisamente a esto. También hablo de otros tipos de temas, como los desastrosos o algo así, no me acuerdo qué nombre le di, pero os lo dejo enlazado para que entendáis bien la diferencia si aún no la conocéis, entre los temas clásicos y los de bloques. Repito, son dos caminos, pero no uno es mejor que otro. Mucha gente piensa en que si se va a pasar, pues por ejemplo, utilizar Elementor a utilizar el editor nativo de WordPress, que automáticamente tiene que utilizar un tema de bloques, porque se llama de bloques, y entonces parece que es el que hay que usar, no puedes utilizar un tema clásico donde también vas a poder aprovechar el editor de WordPress, lo que pasa que luego usas características del tema para configurar cosas como la cabecera, el footer y demás. Ahí está la gran diferencia, pero ambos son caminos válidos. De todas maneras, ya digo, te dejo el enlace al episodio que es el 390 por si lo quieres buscar en tu aplicación de podcast. Bien, algunas recomendaciones si por ejemplo utilizas el camino o eliges el camino de los temas clásicos. A mí me gustan temas como por ejemplo Astra, como GeneratePress o como Kadence, que se escribe Cadence. El otro día pusieron en Telegram, en la comunidad, alguien dijo, no me acuerdo, pero saqué un vídeo y alguien puso si algo he aprendido del vídeo es como se pronuncia Kadence. Bueno, espero que aprendiera alguna cosa más aparte de la pronunciación de este tema. Bueno, en fin, estos son los clásicos que me gustan, hay muchos más. Tienes un curso de cada uno de estos tres temas que he comentado y luego si eliges los de bloques, yo de momento solo tengo el curso de Spectra One, que es un tema de bloques que está muy bien, pero en el curso de de cómo utilizar el full site editing, es decir, de cómo utilizar el editor de WordPress de forma global, cuando utilizas un tema de bloques, ahí utilizo un tema de los Twenty. Estos twenties son los temas que saca WordPress con cada gran actualización y que por supuesto son compatibles con el editor de bloques y además son temas de bloques, pues por ejemplo Twenty Twenty Four o Twenty Twenty Five, que son de los últimos, depende de cuando estés escuchando esto, pues están muy bien y mucha gente los usa también. Ya digo, esto son recomendaciones pero qué puedes tú tener en cuenta si hay otro que te gusta, por ejemplo de bloques, es muy popular también uno que se llama Bloxy, que salió al princip, pues lo que tienes que revisar y asegurarte es de que te permita modificar colores y tipografías de forma global, porque si no vas a echar en falta constructores externos. También es buena idea que traiga o que sea compatible con plantillas prediseñadas, porque esto facilita mucho la tarea y también es algo similar a lo que podrías estar acostumbrado seguramente si utilizabas Elementor. Bien, Ahora puede ser que necesites extender las posibilidades de lo que te ofrece el editor nativo de WordPress, no siempre es necesario, hay gente que con lo que trae le es suficiente, de hecho mucha gente utiliza Elementor para diseños súper sencillos, donde ahí sí desde luego yo no recomendaría utilizar Elementor, yo sólo recomiendo utilizar si vas a aprovechar todas sus funcionalidades para diseños muy básicos no tiene sentido y menos hoy en día. Bueno, pongamos que te ves en la necesidad de extender el editor con más bloques avanzados o con más características. Bueno, algunos de los plugins de bloques avanzados que además reemplazarían funcionalidades de Elementor pues pueden ser Espectra, que es de los mismos creadores de Astra que te he dicho antes que tiene un tema clásico y también de Spectra One que es su tema de bloques y yo personalmente es el que suelo utilizar, te ofrece contenedores bastante más flexibles que los que vienen de forma nativa y luego un montón de widgets o de bloques extra como acordeones, testimonios, todo este tipo de cosas que no suelen venir o vamos que no vienen de forma nativa. Luego tenemos otro súper similar pero que es otra empresa y que se llama Cadence Blogs y que pues como su nombre indica es de los mismos creadores que el tema clásico que te he recomendado antes que se llama Cadence y un poco lo mismo, te da más flexibilidad en cuanto al diseño, te da opciones avanzadas, ambos te permiten utilizar características extra como por ejemplo copiar los estilos de un bloque y llevártelo a otro, digamos trabajar de forma más rápida. No solo te aportan bloques extra y demás, sino también un flujo de trabajo mucho más que te puede hacer mucho más productivo incluso en sus versiones premium. Spectra por ejemplo en su versión premium tiene un constructor de pop ups que puedes mostrar de forma condicional y como ves pues ya son como cositas que uno normalmente utiliza en Elementor, entonces convierten el editor de bloques en un constructor más potente, lo. Luego también tienes Genesis Blogs, que es el antiguo Atomics Blogs y que no trae tantas características, pero es una buena opción si quieres algunos bloques extra y algunas características extra como más sencillas, es un poco más minimalista, al menos así lo percibo yo. Tienes cursos completos de estos tres plugins que extienden el editor. Lo dejo enlazado. En este tercer paso de nuestro camino a reemplazar Elementor vamos con el cuarto que es crear los diseños aprovechando los patrones y los estilos globales y esto es lo que te va a hacer que no sea un suplicio, igual que con Elementor, lo ideal es definir los colores al principio y otra serie de características. Con el editor nativo igual, en lugar de crear cada página desde cero, definiendo los colores, definiendo partes que realmente vas a utilizar también en otras páginas, pues utiliza patrones de bloques, que es un conjunto de bloques ya creados que tú puedes reutilizar y utiliza los estilos del tema, es decir, los estilos globales, si es un tema de bloques lo vas a hacer desde el propio editor y si es un tema clásico lo vas a hacer desde las propias opciones del tema. Lo típico, defines tipografía, colores espaciados, todo esto a nivel global, a nivel general, porque si no luego en cada página vas a tener que hacerlo de forma individual y pierdes mucho tiempo. Y luego el tema de los patrones reutilizables los puedes ir creando tú o también puedes utilizar patrones que ya existan, serían como plantillas de secciones, para que te hagas una idea, pues una zona de llamada a la acción, la típica zona de precio, las tres tablitas que salen con los precios. Todo esto tú lo puedes reutilizar, puedes usar patrones existentes, por ejemplo WordPress tiene una librería oficial de patrones, hay mucha gente incluso que los vende y como estás utilizando el editor nativo, pues la estructura la vas a mantener luego a lo mejor pues tienes que darle un retoque a los colores o lo que sea y los puedes hacer reutilizables, donde si tú haces un cambio en uno de ellos, pues ese cambio se ve afectado en todas las páginas donde tengas ese patrón puesto, o puedes decir quiero quitar el vínculo, entonces como que lo duplicas y lo haces único para esa página en la que lo estés usando sin necesidad de que se actualice en el resto de patrón. Entonces todo esto tienes que dominarlo bien para poder de verdad aprovechar las opciones nativas. Venga, vámonos con el quinto paso en nuestro camino, a reemplazar Elementor. Pues aquí ya depende de lo que tú estés acostumbrado a utilizar con Elementor, optimizar tu experiencia, tu forma de trabajar con herramientas extra. Por ejemplo si utilizabas los formularios de Elementor, pues ahora instala cualquier plugin de formularios, incluso hay bloques de formulario, aunque yo prefiero hacerlo con un plugin, pero bueno, si tú te gusta hacerlo con un bloque o en Elementor serían widgets, sería un poco lo mismo, pues por ejemplo alguno de los plugins que te he comentado antes que extienden los bloques que tienes en el editor, pues te aportan por ejemplo bloques de formulario, Ya digo que yo utilizaría mejor un plugin tienes cursos, te dejo enlace a todos los cursos que hay de plugins de formulario en Gonzalo Navarro, es que tengo varios de plugins gratuitos como Contact Form Seven y plugins premium como Gravity Forms o WPForms. Luego si por ejemplo, no lo sé, en Elementor utilizabas tablas avanzadas, pues puedes instalar un plugin para tablas avanzadas como Gutenberg Tables o Table Builder. Si utilizabas efectos y animaciones, que esto es una de las cosas por las que la gente puede utilizar Elementor, pues también hay plugins. Bueno, puedes usar por supuesto CSS personalizado, que yo en la zona código te explico un montón de animaciones y de trucos que puedes hacer por CSS, que simplemente es copiar y pegar, o puedes utilizar algún plugin como Editors Kit que te aporta características extra también y con algunas animaciones y demás. Te dejo un vídeo donde explico cómo se usa este plugin. Otras posibles cosas que puedes querer hacer es mostrar elementos, bloques, zonas de forma condicional, pues si el usuario está conectado, si se está en móvil o en pantalla grande, pues que lo muestre o que no lo muestre. Este tipo de cosas que también suelen traer constructores como Elementor, lo puedes hacer también con un plugin como Block Visibility que te dejo enlazado, de hecho algunos temas de WordPress ya incorporan estas características, como por ejemplo Astra y Kadence y demás. Te ponen una opción para ocultar el título de la página, que esto suele ser muy útil cuando tú después quieres crear otro título y controlar su diseño, su aspecto y que no se vea el típico título que sale por defecto, pues entonces se suele hacer con Elementor, pues también lo puedes hacer con muchos temas y si no con el plugin que te he dicho antes de Editors Kit. En fin, que hay opciones para lograr lo que pudieses hacer antes. Vámonos con el sexto paso en nuestro camino, definir un nuevo flujo de trabajo. Tienes que olvidarte o ir transicionando de cómo se trabaja en Elementor a cómo trabajas ahora con el editor de bloques en Elementor, pues es como arrastrando y soltando, lo ves todo visualmente desde la parte frontal. En Gutenberg el enfoque es más estructurado, es más como maquetar. Sí que vemos un poco cómo se vería en la parte frontal, pero no tanto. Entonces tienes que pensar más en trabajar con patrones, con secciones predefinidas, ajustando márgenes y el espaciado desde las propias opciones que te da el editor de bloques. Entonces tienes que acostumbrarte a moverte con todas estas partes estructurales que son muy importantes para cómo se va a ver la página al final, más allá de los elementos que vayas incorporando, pues es a lo que te tienes que familiarizar. Te voy a dejar un enlace a, por ejemplo, la clase del curso del Full Site Editing, que es como diseño global, cómo utilizar el editor para diseñar globalmente tu web. Ahí vemos los patrones y te dejo un enlace a esa clase. Pero vamos, te recomiendo el curso completo, al igual que el curso del editor de bloques. Tengo dos cursos, uno del editor de bloques puro y duro, que es cómo utilizarlo en contenidos concretos para maquetar una página, una entrada. Y luego el curso de edición global, que es en el caso de que utilizaras un tema de bloques, pues ahí ves cómo se aprovechan esas características para maquetar la web al completo. Y en esta línea de definir tu flujo de trabajo, yo te recomiendo que evites el exceso de plugins, porque puedes caer en la tentación de pues esto lo tenían Elementor, voy a añadirlo primero, ya digo, familiarízate bien porque el editor nativo ya permite hacer muchísimas cosas sin necesidad de herramientas adicionales y muchas veces es que se hacen de forma distinta o que el enfoque mental que tienes que tener es otro. Así que al final si te pones a añadir de todo, pues un poco salimos de lo bueno. Por lo que estamos yéndonos de utilizar Elementor a utilizar el editor que viene con WordPress, si lo empezamos a cargar de historias, pues al final vamos a estar en las mismas. Paso número 7 práctica con un proyecto real. Créate una web en local, créate una web de estas de usar y tirar. Te dejo un enlace, por cierto, al curso de WordPress en local y pruebas, donde te enseño todas las opciones que tienes para trabajar de forma, pues digamos, o en local o de pruebas o incluso pasar pues de lo que estés trabajando en la web de pruebas pasarlo a la web real y viceversa. Pero bueno, en definitiva que tengas un entorno donde puedas aprender a hacer todo esto, porque si lo haces de primera, si estás un poco verde y lo quieres hacer en un proyecto real, te va a suponer un esfuerzo extra, seguramente te vayas a frustrar y al final pues ni siquiera lo pruebes bien y acabes volviendo a lo que te resulta rápido, a lo que te resulta reconocible que es Elementor. Y luego otra cosa que podrías hacer es comparar por ti mismo el rendimiento de una web hecha con Elementor y el rendimiento de una web hecha con el editor nativo. Puedes pasarlo por la típica herramienta como gt Metrix o PageSpeed para ver los distintos rendimientos y luego tú mismo cuando vayas por la web, vayas navegando, la vayas gestionando, vayas editando cosas, también vas a notar mejoras en cuanto a velocidad. Y luego si la inspeccionas por dentro, pues por supuesto limpieza de código. Siempre por supuesto que mantengas unas buenas prácticas en esa web que has hecho con el editor nativo, porque si le has metido de todo o no has optimizado nada, pues te va a dar un poco igual. Y número 8, quiero reforzar esta idea y es la de adaptar tu mentalidad. La clave cuando estás utilizando las herramientas nativas de WordPress es que planifiques bien el diseño antes de implementar, porque realmente Elementor es cierto que da mucha flexibilidad visual inmediata, lo ves todo como mucho más rápido, pero el editor de bloques pues tiene esas ventajas que hemos dicho en rendimiento, mantenimiento y en compatibilidad. Pero aún así, si tú planificas bien y no estás pensando en elementos hacia sí asado, sino que estás viendo cómo se hace con las herramientas que tienes delante, también hoy en día es que se puede diseñar muy rápido. Tenemos las plantillas prediseñadas que incluso se pueden generar con inteligencia artificial y todas compatibles con el editor nativo. Entonces puedes partir de diseños que estructuralmente te gusten mucho o que al 60% te gusten y luego ir modificando sobre eso que ya tienes y eso te ayuda mucho porque ya te crea toda la las estructuras, los espaciados, los colores a nivel global. Entonces hoy en día cada vez es más fácil deshacerte de herramientas pues como estas como otros editores que se ponen encima de lo que ya trae WordPress y que en muchos casos es que no tiene sentido alguno. Ya digo, en otros sí, Si utilizas absolutamente todas las herramientas que trae, utilizas mucho la parte condicional, las opciones premium y eres una bala construyendo con Elementor y entregas proyectos rápido, pues te puede merecer la pena, pero si no, en muchos casos puede realmente conviene dedicarle ese tiempo de aprendizaje igual que se lo dedica a este Elementor en su día y aprender a usar el editor que ya trae WordPress. Sí, fantástico. Estos son los ocho pasos. Como te decía, te dejo un montón de enlaces de todo lo que he comentado de opciones recomendadas, pues el curso de Astra, el curso de Kadence, el de generatepress, si quieres de bloques, temas de bloques, pues el de Spectra One, plugins específicos para potenciar, pues el curso de Spectra también lo tienes. Por supuesto, si vas en serio con aprender a utilizar el editor de WordPress, tanto el curso del editor de bloques, que explico básicamente cómo usar el editor, como el curso de Full Site Editing, si es que quieres utilizar el enfoque de diseño global del sitio con un tema de bloques, pues ese curso es fundamental también. ¿Y en general, si tienes alguna duda sobre qué curso hacer o lo que sea, primero que en la página de cursos tienes un buscador, tienes filtros y segundo pues me puedes contactar en el footer de la web, tienes un enlace que lleva el formulario de contacto y me dices Gonzalo, quiero hacer esto, esto, qué curso me recomiendas? Recuerda que en Gonzalo es 465, tienes el esquema del episodio y todos los enlaces. Nada más, nos seguimos escuchando, adiós.