BLOG 馃摪 -

WordPress 5.0: Gutenberg, y c贸mo puede ayudar a tus blogs y nichos

El que nunca ley贸 un tweet de 鈥渙dio el nuevo twitter鈥 que tire la primera piedra. Lo mismo va para Facebook y sus renovaciones hace ya unos cuantos a帽os, de la 茅poca de cuando introdujeron el 鈥渢imeline鈥. Ni hablar del “nuevo windows”.

C贸mo humanos, odiamos el cambio y el estr茅s que eso conlleva, por eso hoy, a pesar de que Gutenberg como plugin, tiene apenas 2.5 estrellas, quiero contarte todos los beneficios y novedades que tiene para tu blog, web de afiliados o nicho y c贸mo puedes sacar partido de ello.

La principal caracter铆stica que nos presenta, es la creaci贸n de contenido por bloques, donde cada elemento, desde p谩rrafos hasta widgets, representan bloques de contenido 隆vamos a ello!.

驴Es Gutenberg un website builder o constructor de sitios?

No exactamente, si lo quieres ver como constructor de alguna manera, vendr铆a siendo un constructor de art铆culos, ya que de ninguna forma Gutenberg te permite modificar cosas al tema principal, para eso es el personalizador de WordPress.

Dicho esto, las comparativas entre Divi, Elementor y Visual Composer contra gutenberg, no tienen mucho sentido. Si bien pudieses crear una p谩gina y estructurar algunas cosas con Gutenberg, su fin no es el de agregar animaciones, aplicar estilos complicados ni nada por el estilo.

El problema del editor anterior

El editor anterior fue creado con la 煤nica funci贸n de mostrar texto, como si estuvi茅semos tratando de redactar contenido de un peri贸dico impreso, texto y a lo sumo, una imagen alineada a la derecha o a la izquierda.

Como si se tratase de Microsoft Word, cuya funci贸n principal era crear contenido para ser impreso en papel.

驴Recuerdan lo engorroso que es crear una tabla en ese editor? Hab铆a que copiar algo de Excel, buscar un generador, o de plano instalar un plugin.

Y no solo las tablas, cualquier tonter铆a como un bot贸n, necesitabas un plugin o echarle cabeza al c贸digo.

Gutenberg cumple la funci贸n de crear contenido para Internet, y todos los formatos que ello conlleva, siendo los m谩s comunes el m贸vil, tablet y port谩til / ordenador de escritorio.

Crear contenido para Internet

En internet tenemos formatos que son nativos digitales, como los 鈥渉ero header鈥, botones, posts relacionados, widgets, contenido embebido (Youtube, Instagram) entre otros.

Gutenberg te ayuda a crear contenido moderno, enriquecido, para los distintas pantallas que pueden visualizar internet.

Es un editor hecho para la web. El editor que hac铆a falta y que se estaba tratando de solucionar con pesadisimos website builders.

Ventajas de Gutenberg para tus blogs 

Las ventajas de la creaci贸n de contenido por bloque son varias, el bloque predeterminado es un p谩rrafo, y al momento de escribir, no tienes que estar agregando manualmente cada p谩rrafo. De resto, los dem谩s bloques est谩n a par de clicks de distancia, te presento los que considero m谩s 煤tiles para los temas de nichos y webs de afiliaci贸n:

Imagen / Video de fondo

Este bloque sirve al estilo “hero header”, para destacar alg煤n texto con fondo.

Es una especie de hero header (creo que le faltar铆a un bot贸n de llamado a la acci贸n) , en el que podemos tener una imagen (o video) de fondo, con texto encima, centrado, que va genial como un  titulo o testimonios, o si le ponemos un enlace, una especie de banner. Lo malo en este elemento es que no le podemos colocar un bloque de bot贸n dentro (por ahora), lo que es una pena.

Bot贸n 

Algo tan simple y 煤til como un bot贸n, era trabajo de un HTML y CSS bien hecho, y digo “bien” porque si fallabas una comilla, te descuadrabas toda la web. Este bot贸n ser谩 nuestro aliado principal en las webs de afiliados y reviews, junto con el bloque de tablas.

El color del bot贸n lo puedes modificar desde el panel derecho, tanto de fondo como de texto.

Tablas

NichopressUna Piedra
Carga optimizada
Actualizaciones Autom谩ticas
Puede herir
Compatible con gutenberg

Ahora nativas de WordPress, ideales para comparativas o tablas de precios, y si los mezclas con emojis, tendr谩s un trabajo con buen impacto visual, los emojis los soporta WordPress de forma nativa, as铆 que por all铆 no tendr谩s problemas. 

Desconozco de momento si es mala practica para el SEO las tablas con emojis, si tienes alg煤n conocimiento al respecto, te invito a compartirlo en los comentarios.

No es tan potente como otras tablas, que pueden desplegar por precios, puntuaci贸n u otros atributos, pero funciona, principalmente cuando lo que necesitas es una simple tabla para mostrar contenido.

馃敟 Truco: en las tablas no puedes a帽adir im谩genes f谩cilmente, pero con editarlas en modo HTML,  podemos colarlas (eso si, coloca el tama帽o deseado con anterioridad)

Medios y texto

Especial para un llamado a la acci贸n, para un producto o post destacado, en este bloque si podemos colocar otros bloques dentro, como p谩rrafos y botones.

Podemos destacar un producto y su descripci贸n, por ejemplo.

Columnas

Algo tan simple que estaba a varios plugins de distancia en el editor anterior, aqu铆 te lo presentan como un bloque de dise帽o m谩s. Viene predeterminado para dos , pero si metes  dentro de un bloque de columnas, otro bloque de lado y lado, tienes un total de 4 columnas.

Ventajas 馃憤

  • Puedes hacer cosas estilo “ventajas y desventajas”
  • Ya incluye CSS par las columnas, no tienes que agregar nada.

Desventajas馃憥

  • S贸lo m煤ltiplos de 2, no puedes tener 3 columnas
  • Para crear 4 columnas, debes meter unas columnas dentro de otras.

Otros bloques

Tambi茅n existen otros bloques que omit铆 por ser simples, y que no representan novedad alguna, como los bloques de imagen, p谩rrafos, citas, listas, entre otros.

馃挕 Tambi茅n otro punto a favor, es que podemos editar el color de texto y color de fondo de todos los bloques.

Cosas por mejorar en Gutenberg

A煤n no est谩 completo, este proyecto es un beb茅 que apenas comienza a mostrar madurez, sin embargo tiene actualizaciones muy frecuentes, solucionando fallas y mejorando algunas cosas.

Yo personalmente lo 煤nico que extra帽o del editor anterior, es el soporte de marcado, yo estaba acostumbrado colocar los t铆tulos con “#”, espero a un futuro pr贸ximo lo puedan incorporar.

Nota: mientras tenia este post en borrador, colocaron soporte para el marcado.

Preguntas frecuentes

Debido a que es un paso relativamente grande en cuanto a actualizaci贸n, quiero responder las preguntas m谩s frecuentes que me surgen como usuario, si tienes alguna pregunta, te invito a compartirla en los comentarios.

驴Es Gutenberg compatible con mis plugins?

Actualmente los creadores estamos trabajando en compatibilidad con Gutenberg, plugins como Yoast Seo est谩n disponibles con full funcionalidad,  si bien hay much铆simos plugins existentes, puede que muchos se vuelvan incompatibles.

En principio, si un plugin no tiene nada que ver con el editor de texto, como Akismet por ejemplo, no pasar谩 nada. Ahora, un plugin que se basaba en incrustar shortcodes desde el editor anterior, no estoy seguro de que corra con la misma suerte.

驴Gutenberg romper谩 mi tema?

Posiblemente, pero en mi experiencia, lo m谩s probable es que no, a menos que uses constructores de sitios como divi o elementor. Y te explico: las modificaciones de Gutenberg son m谩s que todo a nivel del backend, en el front, sigue funcionando como lo hac铆a anteriormente, reconoce los shortcodes, y si el tema tiene alg煤n filtro, lo aplicar谩. 

Lo m谩s com煤n que podr铆a pasar es una incongruencia a nivel de dise帽o o estilos CSS, como que no se muestre bien el texto del bloque “imagen de fondo” o que los botones aparezcan con subrayado.

De todas formas, siempre haz respaldo de tus sitios antes de alguna actualizaci贸n, as铆 no pase nada, tendr谩s la paz mental de que puedes revertir los cambios.

Recomendaciones antes de actualizar:

  • Realiza un respaldo manual o con plugins como Updraftplus o Duplicator.
  • Si usas plugins muy importantes para tu web, verifica en la web del desarrollador la compatibilidad antes de proceder.
  • De ser posible, instala Gutenberg en un blog de pruebas primero.

En todos los sitios en los que he instalado Gutenberg, s贸lo no se visualizo bien en LaVidaFreelance.com, y era cuesti贸n de modificar una linea de CSS, de resto a la primera.


Nichopress es 100% compatible con Gutenberg y en proceso de integraci贸n, para el viernes del black friday, lanc茅 un demo de “turismo”  que puedes ver aqu铆.  Est谩 construido visualmente con Nichopress y Gutenberg exclusivamente.

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *