El mundo web se encuentra creciendo a pasos agigantados. A diario aparecen una gran cantidad de nuevas herramientas que nos ayudan en el desarrollo de sitios web y de aplicaciones móviles. En WordPress, dos de estas herramientas son Beaver Builder y Gutenberg. Gracias a estas herramientas, podemos editar nuestro sitio web con mayor facilidad y darle una mejor apariencia. Considerando que, como se dice popularmente, “todo entra por los ojos”, estas herramientas nos permitirán tener un sitio web de calidad profesional sin mayor esfuerzo.

Qué es Beaver Builder y cómo usarlo?

Beaver Builder es un plugin que nos ayuda con la elaboración y maquetación de nuestro sitio web. Es un Page Builder de WordPress del tipo drag and drop. Con este plugin, podemos crear un sitio web de muy buena calidad sin necesidad de ser un experto en el mundo web; Solo basta con activar el plugin y empezar a usarlo. A continuación, se detalla una pequeña muestra de cómo se usa, y de algunos elementos que nos brinda.

La creación de una página no cambia en nada, al momento de previsualizar nuestra página va a aparecer una nueva opción en el menú superior de WordPress, justo la que tiene el punto verde, que se llama Page Builder. Al dar click en esta opción, nos va a cargar los elementos visuales con los que cuenta Beaver.

Al darle click en el ítem de Page Builder  nos va a cargar la página de la siguiente forma:

Esto nos indica que la página se encuentra en modo edición con Beaver Builder, a la derecha pueden notar que aparece una sección con algunos módulos que ofrece Beaver, tienen módulos sencillos, desde insertar texto o imagen, hasta más avanzados como son agregar un carrusel o acordeones. Incluso puedes definir cuantas columnas quieres que aparezca en tu página para organizar el contenido.


Pero te preguntarás ¿para qué quiero Gutenberg en mi sitio si ya tengo Beaver Builder para construir mi sitio web? Bueno, lamentablemente Beaver Builder no funciona en el contenido de los Post, así que no puedo disponer de los elementos que me ofrece Beaver a la hora de crear o editar un post, por lo que este va a quedar con los estilos por defecto que tiene el tema. Puede que tú quieras que aparezca de diferente forma o incluso editar la estructura de tu blog. Bueno, para eso existe Gutenberg, el cual nos va a ayudar a que nuestro blog quede de una mejor forma.

¿Qué es Gutenberg y cómo usarlo?

Gutenberg es un plugin para la edición de texto que nos ayuda y nos facilita con la estructuración de nuestro contenido en los blog post, con Gutenberg podemos desde cambiar el tamaño y color de nuestro texto, hasta incluso maquetarlo con columnas, actualmente desde la versión 4.9.8 Gutenberg ya viene instalado en el core de WordPress. A continuación, se va a mostrar unas cuantas opciones con las que cuenta Gutenberg.

Cuando entramos a crear un nuevo post nos va aparecer de la siguiente forma:

Cuando ya tenemos contenido en nuestro post, vamos a poder cambiar el tamaño de nuestro texto, el color y el formato de este, en la siguiente imagen aparecen algunas opciones que ofrece Gutenberg.

Pero ¿qué pasa si quiero agregar código? Ya sea Python o JS. Bueno, Enlighter en su última actualización es compatible con Gutenberg, Enlighter es una herramienta de resaltado de sintaxis para nuestro contenido. A continuación podrás ver cómo luce:

Magnifico ¿verdad? Gutenberg es una herramienta indispensable si tenemos un sitio web de artículos o un blog, con Gutenberg vamos a poder darle el formato que queramos a nuestros blog, sin necesidad de instalar tantos plugins para suplir algunas necesidades que solemos tener a la hora de escribir un blog o artículos.
Ahora, imagínate una combinación entre Beaver Builder Y Gutenberg. Puedes usar Beaver Builder para montar todo el sitio y Gutenberg para el contenido de los posts, una combinación que puede llegar a ser increíble si la usas correctamente. Por ejemplo este artículo que estás viendo está construido con Gutenberg, y el sitio con Beaver Builder ¡Mira qué bien se ve!. Ahora es tu turno de usarlos y hacer maravillas con ellos.


Comentarios