270 | ¿Es necesario usar un page builder en WordPress teniendo Gutenberg?

En el episodio 270 de WordPress semanal te hablo de las dudas que genera el uso de constructores visuales en WordPress, sobre todo teniendo en cuenta que existe el Editor de Gutenberg. Vamos allá. Hola hola, soy Gonzalo de Gonzalo Navarro ES y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress de principio a fin. Porque ya lo sabes, no hay mejor inversión que la de aprender a crear y gestionar tus propias webs con WordPress. Hoy te voy a hablar de los Page Builders para WordPress, un poco contrapuesto al uso de Gutenberg. Vamos a ver qué son los Page Builders para estar todos un poco en la misma línea. Os explicaré si yo considero o si en general el Editor de Gutenberg es un Page Builder, mencionaré los Page Builders más populares, hablaremos de las diferencias entre utilizar un Page Builder externo o utilizar el nativo, es decir, el Editor de Gutenberg y por último, daré respuesta a la duda que se plantea en este episodio, que es si considero necesario utilizar un Page Builder teniendo Gutenberg ya instalado o digamos como editor nativo de WordPress. Todo esto en un momentito, pero antes, como siempre, novedades. ¿Qué está pasando en Gonzalo Navarro ES? Esta semana y como siempre, como cada martes, hay publicado un nuevo vídeo de la Zona Código, en este caso es el vídeo 220, y en él te enseño a permitir la subida de otros formatos de archivo a WordPress, como por ejemplo XML, y esto sirve para que tú mismo, desde la librería multimedia, puedas subir otros formatos que algunos no están permitidos por seguridad, por ejemplo los archivos con terminación XML, porque en estos archivos se puede subir contenido o digamos código malicioso que se puede ejecutar en tu web, entonces por eso, por seguridad, digamos que en WordPress viene por defecto prohibido, está capado el hecho de que se pueda subir ese formato, al igual que algún otro tipo de formato, pero en ocasiones necesitamos que se suba pues porque por el trabajo que utilizamos o porque a lo mejor nuestros visitantes o nuestros suscriptores a través de un formulario necesitamos que nos suban ese tipo de archivos. Pues de esta manera vas a permitir, como digo, que se suba no sólo tú mismo desde la librería multimedia, sino que alguien a través de un plugin de formulario también te lo pueda enviar. Este vídeo lo he preparado porque un suscriptor me preguntó cómo se podía hacer esto y en ese momento no tenía ningún contenido, pero me lo apunté me pareció interesante y aquí tenéis cómo podéis hacerlo. Vídeo 220 de la zona código, ya sabéis, ahí os enseño a hacer cosas por código sin saber código, simplemente seguís lo que hago en el vídeo y lo tenéis. Eso en cuanto a la zona código. En cuanto a los cursos, que ya sabéis que es el otro gran contenido al que puedes acceder si estás suscrito en Gonzalo Navarro es pues Bueno, hay aproximadamente 55 cursos pero los más recientes son el curso de LearnDash que lo he ampliado enseñándoos por ejemplo cómo vincular LearnDash con un plugin de e commerce para conseguir una experiencia más completa sobre todo en el checkout y luego también amplié el curso de Gravity For porque sacaron una actualización en la que incluían un editor visual para la construcción o para la creación de esos formularios, pues también lo amplié para que lo tengáis actualizado. Pero ya sabéis, como digo, hay un montón de cursos sobre todo lo necesario para crear y gestionar webs con WordPress de forma profesional, ya sea que lo necesites para un proyecto propio o que te quieras dedicar a esto de la creación de webs con WordPress para otros. Ya sabéis, de nuevo toda la info en Gonzalo Navarro es perfecto. Eso en cuanto a las novedades. Vamos ahora con el plugin de la semana que se llama WP Markdown Editor, antiguamente se llamaba Dark Mode y este plugin te permite cambiar totalmente la experiencia de creación de contenidos, básicamente si no necesitas editar los contenidos de tu web pensando en los bloques de Guttenberg, añadiendo cosas ni nada, sino que simplemente quieres escribir texto y la posibilidad de utilizar marcado. El marcado es una forma de sintaxis que te permite escribir a la vez que dar formato específico a tus textos. Así que si te gusta el marcado y quieres además un cambio digamos en la paleta de colores de tu editor, lo puedes poner en modo oscuro, por eso antes se llamaba Dark Mode. Este plugin pues tienes todo ese tipo de detalles. Además si eres nuevo en esto del marcado que hay que aprenderlo, tiene pues su. Su propia nomenclatura pues te dan como shortcode para que lo puedas incrustar sin necesidad de tú saber. El marcado es como una especie de chuleta donde te ponen lo que puedes utilizar si por ejemplo tú publicas simplemente pues texto, alguna foto con títulos y demás, puede ser una cosa interesante y está chulo, te da como una experiencia totalmente distinta. Es un plugin que está activo en 3.000 webs con WordPress, que se actualiza regularmente, así que podéis echarle un vistazo. Además os dejo el enlace para que vayáis a la página oficial dentro de WordPress. Org y y tienes un vídeo para que te hagas una idea de lo que te vas a encontrar con este plugin. Recuerda, se llama WP Markdown Editor y puedes ir directamente a las notas del episodio para ver el enlace en Gonzalo Navarro es 270. Y ahora sí, vámonos con el tema central, los page builders para WordPress Contrapuestos al editor de Gutenberg. Y empezamos por la base. ¿Qué es un Page Builder para WordPress? Bueno, básicamente es un plugin o un componente que viene con un thing y que te permite estructurar y diseñar páginas visualmente. Lo más habitual es que te ofrezca como componentes o trocitos de elementos que tú puedes arrastrar o decir que lo quieres poner en distintas zonas de una página. Previamente, cuando vas a introducir esos componentes, pues normalmente decides la estructura general de las páginas, es decir, el ancho de la página, si una zona va a tener una columna, dos columnas, las distintas secciones, lo que viene siendo la estructura. Y después ahí vas arrastrando, vas soltando y vas colocando los elementos que quieras, imágenes, texto, cosas más avanzadas. Es en definitiva, una herramienta para diseñar webs sin utilizar código. Sí. Vale, y entonces el editor de Gutenberg, ¿Qué pasa con él? ¿El editor de Gutenberg es también un constructor visual? ¿Es un Page Builder? Sí, yo lo definiría como tal. Gutenberg también es un editor visual, lo que pasa que viene de forma nativa con WordPress, es decir, no lo añadimos con un plugin, ni con un componente de un tema, ni nada. Sí es cierto que trae menos opciones por defecto, aunque se pueden ampliar con otras extensiones que van saliendo. Lleva menos tiempo Gutenberg que el resto de constructores visuales, pero el futuro o lo que se está haciendo ya, en lo que se está trabajando es que se parezca cada vez más a lo que permiten hacer el resto de Page Builders que añadiríamos de forma externa. Sobre todo la funcionalidad tan famosa del Full Site Editing, que no es otra cosa que permitir el diseño de toda la web en general, es decir, de también zonas estructurales como puedan ser la cabecera o el pie de página, y no solamente de los contenidos específicos de una página o de una entrada. Pero de momento eso no lo tenemos. Bien, ahora seguimos profundizando, pero antes vamos a hablar un poco o a mencionar los Page Builders más populares. Me voy a dejar seguro muchos, voy a hablar de los que a mí me han venido a la cabeza cuando estaba escribiendo el esquema del episodio, por supuesto Elementor que es gratuito y su versión Elementor Pro. ¿Divi Builder que tienes? Divi trae un tema, decíamos antes cuando explicaba lo que es un constructor visual, os decía que puede ser o un plugin que instalas, que en este caso Divi tiene un plugin específico que puedes instalar en cualquier web y da igual el tema que tengas activo o tiene el theme, el tema Divi que trae un módulo, un componente que te permite o una funcionalidad que te permite, que te permite diseñar páginas. Entonces para que veáis que no sólo tiene que ser un plugin, sino que puede ser algo aparte que viene con un tema o lo que sea. Otro de los populares es Beaver Builder, después tenemos Page Builder de Site Origin, que este antiguamente era muy popular, ahora se utiliza menos, la gracia de este plugin es que es gratuito y sigue teniendo muchos usuarios, aunque cada vez se ha quedado un poco más ahí en tierra de nadie. Después tenemos Oxygen Builder, que es un poco un concepto diferente y otro de los populares es Visual Composer, que es el típico que antes venía con todos los temas de themeforest, ahora eso está empezando a cambiar un poco porque muchos ya incluyen o Elementor o incluso están hechos con Gutenberg. Seguro que muchos o todos estos nombres te suenan, No voy a hablar de ellos en profundidad porque bueno, si alguno te interesa o alguno te ha llamado la atención puedes buscarlo, aunque seguramente tenga yo incluso contenidos de ellos en otros episodios que haya dedicado a los Page Builders. Pero bueno, vamos a lo que nos ocupa en este episodio. ¿Cuáles son las diferencias entre utilizar un Page Builder externo o el nativo que viene con WordPress que es Gutenberg? Bueno, primero la experiencia general de uso es diferente en cada Page Builder, independientemente de que sea uno de los externos que añadimos con un plugin o lo que sea, como Divi, Elementor, ViewerBuilder, lo que sea, a que sea Gutenberg, cada uno tiene su look and feel, es decir su expert, su aspecto y su experiencia de uso. Después Gutenberg, ya he comentado antes que trae menos opciones de base, aunque se puede extender como digo con plugins, hay muchos plugins, cada vez más, que te permiten convertir Gutenberg en algo a lo que los usuarios de otros Page Builders están más acostumbrados, es decir, tener más opciones, sobre todo en cuanto a diseño estructural, en cuanto a lo que se puede hacer con cada bloque o con cada elemento que introducimos en el diseño de nuestra página, pues más opciones para controlar los colores, los espacios, incluso la posibilidad de hacer contenidos condicionales, es decir, dar más opciones en cuanto a diseño y en cuanto a funcionalidades para cada bloque o cada elemento que ponemos en el diseño de nuestras páginas. Los Page Builders suelen tener muchísimas opciones y Gutenberg no trae tantas, y esto es normal y es algo muy habitual dentro de WordPress. Normalmente el enfoque que ha tenido históricamente WordPress es tener lo básico, porque no todos necesitamos todo, entonces con WordPress te viene la base y luego si tú quieres extenderlo vas añadiendo plugins que son eso precisamente, extensiones te permiten extender lo que se puede hacer de forma nativa con WordPress. Entonces, que para ti está bien lo que trae Gutenberg por defecto, fantástico. ¿Que necesitas? Pues no lo sé, hacer algún bloque condicional, cosa que se puede hacer con un plugin, y ya lo vimos o lo hablé en la parte de plugins de la semana en episodios anteriores ya comenté un plugin que te permite hacer esto, o que como digo necesitas más opciones visuales, de diseño y demás, pues también hay varios plugins que también he comentado anteriormente, es el espíritu de WordPress y esto dudo mucho que cambie. ¿Otras diferencias? Bueno, algunos Page Builders permiten el diseño estructural y bastante avanzado, Gutenberg aún no y queda mucho para esto si es que se llega a implementar digamos de la misma manera, por ejemplo, con plugins de Page Builder como Elementor Pro, tú puedes crear plantillas de página, es decir, puedes crear una plantilla, una estructura para todas las páginas de tu web o para algunas puedes crear una estructura para la página de entradas. Cuando digo una estructura digo que puedes decidir cuál es el ancho, que puedes decidir dónde va a estar la caja de comentarios, que puedes decidir si va a tener barra lateral o no la va a tener. ¿Lo que haría un desarrollador? Pues tú lo puedes hacer visualmente con un constructor visual como Elementor Pro, no lo puedes hacer con todos, pero con algunos de los más populares sí podrías diseñar por ejemplo la cabecera de la web y el pie de página de la web, cosa que con Gutenberg no se puede hacer, de momento podrías diseñar las páginas de archivo, es decir, la página de blog, las páginas de categoría, la página de resultados de búsqueda, podrías diseñar algunas páginas de WooCommerce, por ejemplo, la página de producto. Me refiero a nivel estructural, crear la estructura base o sustituir la que existe en ese momento por otra que tú diseñes a medida desde cero. Esta es una de las grandes diferencias. Otra de las grandes diferencias es que con Page Builders como por ejemplo Elementor Pro, puedes utilizar contenido dinámico en las páginas, es decir, tú puedes decir en una página aquí quiero que aparezca el nombre de la web y no escribes el nombre de la web, sino que es un contenido que se recoge automáticamente, o puedes decir aquí quiero que aparezca un contenido personalizado, o puedes decir aquí quiero que se muestren las publicaciones más recientes de un tipo de contenido que yo tengo que se llama noticias o o las del blog. Todo este tipo de cosas más avanzadas que como digo se harían a nivel de código, se pueden hacer con Page Builders como Elementor Pro o como Oxygen Builder, y Quingenter también trae algunas opciones en este sentido. Entonces, ¿Es necesario utilizar un Page Builder teniendo Gutenberg? Básicamente y reduciéndolo mucho, si buscas diseño y maquetación estructural sin utilizar código, sí necesitas usar un Page Builder. Por otro lado, si necesitas usar contenido dinámico, por ejemplo, como lo que hemos comentado, sin utilizar código, también necesitas un Page Builder. Esto resumiéndolo mucho, para todo lo demás no. Y siempre hablamos de ahora, en el momento en el que estoy grabando este episodio, en el futuro esto va a cambiar, sobre todo con el Full Site Editing se van a poder hacer más cosas. Con Gutenberg no creo que todo, porque al final el camino que yo creo que siguen los Page Builders es permitirte lo que podría hacer un desarrollador, hacerlo tú sin saber código ni nada. Buscan un poco ese camino. En el caso del editor de Gutenberg no es tan así, es más sólo la parte visual y el tener una experiencia más amigable cuando uno está creando contenidos y que lo que va creando en la página sea lo que después se va a ver reflejado en la parte frontal y no como antes que nosotros estábamos escribiendo. Antes del editor de Gutenberg escribíamos, poníamos una imagen y demás, pero no teníamos una sensación de cómo se iba a ver eso en la parte frontal. Ahora sí, y es un poco lo que busca el editor de Gutenberg, pero no traer todas estas funcionalidades que traen los constructores visuales para ese aspecto, para la parte de la experiencia, cuando estamos diseñando una página y demás, al final va a ser una cosa de de gustos, sobre todo cuando aparezca el full site editing. Hay gente que preferirá utilizar Divi porque lo llevo utilizando toda la vida, gente que preferirá utilizar Elementor porque lo lleva usando toda la vida y otros que preferirán utilizar Gutenberg. La clave está, como siempre, en definir bien lo que vas a necesitar y ya en función de ello, pues decantarte por uno u otro. Por último comentar que, a ver, normalmente si tú eliges un tema de WordPress que estructuralmente te gusta, es decir, que trae todo lo que tú buscas en la parte de la cabecera, que tiene las áreas de menú donde tú quieres, que tiene el logo donde tú quieres, que también te gusta estructuralmente los espacios que te ofrece, por ejemplo, en las páginas, es decir, el ancho, lo que ocupa el texto, lo que ocupa el contenido con respecto a lo que queda de espacio blanco alrededor, te convence tanto para, como digo, las páginas como para las entradas, que te convence cómo se muestra todo en la página de blog, en las páginas de archivo que te gusta cómo se muestran las posibilidades que tienes para poner contenidos en el pie de página, pues si encuentras ese tema como punto de partida, fantástico. Luego ya simplemente con el editor de Gutenberg tú maquetas el contenido dentro de esa estructura, el contenido de cada página y de cada entrada. Esto sería una aproximación, digamos, lo más lean posible, sin que tengas que añadir nada extra. Hombre, todo esto siempre teniendo en cuenta que no sabes de código, que no sabes modificar todo eso a través de código, que es un poco el perfil del usuario que busca un constructor visual. Entonces, como digo, teniendo en cuenta esto, si has elegido un tema que se ajusta a lo que buscas y que luego tienes el control visual con el editor de Gutenberg más las extensiones que ya sabemos que se pueden añadir, pues con eso lo tendrías de acuerdo. Ya si buscas control sobre absolutamente todo o casi todo, entonces tendrías que tirar, por ejemplo, pues con Elementor Pro o uno similar. Sí. Espero que te haya aclarado esto, tus dudas. He publicado este episodio porque recibo esta pregunta mucho a través del soporte que tenéis los que estáis suscritos. Por eso, en lugar de añadirlo como una pregunta suelta dentro de mis episodios de preguntas y respuestas, he decidido crear un episodio al completo sobre esta temática. ¿Por último, recordad que tenéis un montón de cursos a vuestra disposición si estáis suscritos, entre ellos por ejemplo, el curso del editor de Gutenberg, el curso de Elementor, el curso de Elementor Pro, el curso de Divi, de acuerdo? Por si os encaja alguna de las cosas de las que hemos hablado, que podáis profundizar y ver mis vídeos paso a paso donde os explico cómo se utiliza cada herramienta. Estos son solo 4 de los 55 o más cursos que tenéis disponibles, más uno nuevo o una renovación de uno existente que saco al mes, más los más de 200 vídeos de la zona código, ya sabéis, saco uno a la semana y encima tenéis soporte personalizado conmigo a través de correo electrónico. Ya sabéis que todo esto sólo por 10 euros al mes y además sin permanencia. Y si aún no te has apuntado y quieres probarlo, tienes 15 días de garantía, te apuntas, lo trasteas, lo pruebas todo, si no te convence, pues me contactas, Oye Gonzalo, que lo he probado pero no quiero seguir, no pasa nada, te hago la devolución del dinero sin preguntas. Recuerda, toda la info en GonzaloNavarros es. Nada más por este episodio, nos seguimos escuchando. Adiós.