Maquetar con Gutenberg Wordpress

Gutenberg, el nuevo editor de WordPress

Hoy vamos a hablar de Gutenberg, pero no del inventor de la imprenta con teclas móviles moderna, si no del nuevo editor de WordPress que va a cambiar completamente la forma en que publicamos contenido en nuestras páginas web.
Gutenberg es el nombre del proyecto que va a reemplazar en algún momento la forma en que publicamos contenido dentro de WordPress.

Actualmente la herramienta que tenemos para llevar a cabo esa labor es un editor Tiny mce que lo permite básicamente escribir texto, insertar imagenes, citas, listas, etc etc, sin embargo esta experiencia de publicación se ha ido quedando anticuada respecto a los avances tecnológicos de otras plataformas.

Paginas web Vilafranca del Penedes
Interface del editor Tiny Mce
Paginas web Vilafranca del Penedes
Interface del editor Gutenberg

La gran diferencia que ofrece Gutenberg respecto al anterior editor es que la gestión de los contenidos se basa en bloques.
En dicho bloques podremos ir editando los contenidos en el orden que nos interese pero manteniendo todas las opciones de página de siempre. Independientemente de estas opciones mencionadas, Gutenberg añade unas nuevas funciones para la configuración de los bloques.

Ajustes generales

Empecemos por lo más esencial. En la barra superior y de izquierda a derecha(recuadro rojo de la imagen):

  • Botón para insertar bloques: Para insertar botones en el contenido.
  • Botones de rehacer y deshacer: Para rehacer o deshacer acciones realizadas.
  • Botón de estructura de contenido: Para ver información detallada de todo el texto.
  • Botón de Navegación de bloques: Para ver la estructura de bloques y acceder a cualquier bloque directamente.
  • Botón de guardar borrador: Para guardar el post sin publicarlo. Si eliges esta opción el contenido se guardará pero no estará visible para las personas que accedan a tu web.
  • Botón de vista previa: Para ver una vista previa de como quedaría el post antes de publicarlo.
  • Botón de publicar: Una vez has echo todas las revisiones y el post esta a tu gusto publicalo para que tus lectores puedan leerlo.
  • Botón de ajustes(engranaje):Para que la barra de los ajustes de pagina desaparezcan.
  • Botón de herramientas y opciones(tres puntos): Para configurar los ajustes de la página.

Debajo de los botones de vista previa y publicar encontraremos las pestañas de documento y bloque. La función de dichas pestañas es configurar las opciones que nos ofrece el post (configuraciones generales del documento) o el bloque que tengamos seleccionado en ese momento. Las funciones de los bloques variaran dependiendo de que tipo de bloque tengamos seleccionado.

Diseño web Vilafranca del Penedes
Barra superior de ajustes generales

Insertando mi primer bloque de texto en Gutenberg

Una vez dentro de Gutenberg lo primero que realizaremos sera darle un titulo a nuestro post o entrada. Lo debemos hacer en la sección donde pone anadir titulo(recuadro verde de la imagen).

Para insertar nuestro primer bloque de contenido pulsaremos en el signo + que hay en la esquina superior izquierda(recuadro rojo de la imagen). Una vez aparezcan las opciones de bloques clicamos sobre párrafo. Automáticamente en el contenido del post se cargara un bloque de párrafo . Ya podemos añadir nuestro primer texto. En la barra superior apareceran las opciones para alinear el texto, marcar texto como negrita, hacer cursiva, crear enlaces, etc etc.

Para finalizar este primer bloque de texto nos fijaremos en las opciones del bloque (recuadro azul de la imagen). Podremos ver las opciones de personalización del bloque de párrafo. Entre ellas podremos definir el tamaño del texto, definir color de fondo y de texto y si tienes nociones de CSS podrás aplicar tu propia clase de estilos.

Si lo que queremos es insertar un bloque de encabezado o titulo de sección o un bloque de lista lo podemos hacer de la misma forma que hemos insertado un bloque de párrafo.

Diseño de webs con Gutenberg y WordPress

Añadimos un bloque de imagen a Gutenberg

Para ello repetiremos la misma acción que para el bloque de párrafo. Nos situaremos en la esquina superior izquierda y hacemos click sobre el simbolo + (recuadro rojo de la imagen), desplegamos el selector y seleccionamos bloque de imagen.

Desde el bloque nos da diferentes opciones para subir nuestra imagen:

  • Botón subir: Para subir y insertar una imagen alojada en tu ordenador.
  • Botón biblioteca de medios: Para insertar una imagen que tengamos en la biblioteca de medios. Si queremos insertar una imagen que hemos utilizado en otro contenido no es necesario volverla a subir.
  • Botón de insertar desde url: Para insertar una imagen utilizando una url. Hay que recalcar que eticamente no es una buena practica si no es que la url desde donde cargas la imagen no es de tu propiedad o no tienes consentimiento, por lo que no es recomendable hacer uso de esta opcion.

Una vez nos carga la imagen seleccionada en el bloque veremos 2 cosas. En la barra superior nos aparecerán 3 iconos (recuadro rosa de la imagen). Estos botones nos sirven para definir la alineación de la imagen, izquierda, derecha o centrada. Lo segundo que veremos son unos puntos en la imagen (recuadros verdes de la imagen). Seleccionando los puntos y arrastrando podemos modificar el tamaño de la imagen.

Si a esta imagen queremos añadir una leyenda o pie de foto lo haremos insertando el texto en el recuadro naranja de la imagen.

Para finalizar esta sección echemos un vistazo a las opciones del bloque (recuadro azul de la imagen). Podemos definir el texto alternativo de la imagen, definir un enlace que apunte a un archivo multimedia, una pagina de adjutos o una url personalizada.

Tambien nos permite definir el tamaño de la imagen de diferentes formas:

  • Tamaño de la imagen: modificar el tamaño de la imagen a alguno de los tamaños definidos en ajustes/medios.
  • Dimensión de la imagen: personalizar el tamaño de imagen al que se crea conveniente o por porcentaje en relación al tamaño original.

Si en lugar de insertar una imagen queremos añadir una galería podemos seguir los pasos de esta sección, con la única diferencia que en los ajustes del bloque nos aparecerá para seleccionar cuantas columnas debe tener la galeria.

Recuerda realizar una buena optimización de las imágenes. Haz click aquí para saber como hacerlo.

Maquetar entradas con Gutenberg WordPress

Insertar un vídeo en Gutenberg

Misma acción. Nos situaremos en la esquina superior izquierda y hacemos click sobre el simbolo + (recuadro rojo de la imagen), desplegamos el selector y seleccionamos bloque de video.

El bloque nos ofrece varias opciones para insertar el video (recuadro azul de la imagen):

  • Botón subir: Para subir y insertar una imagen alojada en tu ordenador.
  • Botón biblioteca de medios: Para insertar un vídeo que tengamos en la biblioteca de medios.
  • Botón de insertar desde url: Para insertar un vídeo  utilizando una url. Dicha url es la que aparece en la barra del navegador. Si por ejemplo queremos añadir un video de You Tube la url se parecera bastante a esto: https://www.youtube.com/watch?v=DxpaUuMhPeU
Insertar una video en Gutenberg Diseño web Vilafranca del Penedes

Añadiendo un vídeo o imagen de fondo con Gutenberg

Añadimos un bloque situandonos sobre el simbolo + (recuadro rojo de la imagen), desplegamos el selector y seleccionamos bloque imagen/vídeo de fondo.

El bloque nos ofrece varias opciones para insertar el contenido:

  • Botón subir: Para subir y insertar una imagen alojada en tu ordenador.
  • Botón biblioteca de medios: Para insertar un vídeo que tengamos en la biblioteca de medios.

Ya presente la imagen o el vídeo en el bloque podemos apreciar que se nos da la opción de insertar un texto para la imagen (recuadro verde de la imagen). Esta opción es ideal para crear cabeceras de contenido.

Pasamos a los ajustes del bloque (recuadro azul de la imagen). La primera opción nos permite definir si queremos que el contenido del fondo sea fijo. Con ello conseguiremos un efecto parecido al famoso efecto parallax.
La segunda opción de personalización es superposición. Lo que nos permite hacer es dale una capa de color al contenido del fondo. Con el selector de opacidad regulamos las cantidad de color.

Vilafranca del Penedes Paginas web

Añadiendo más funciones de bloque a Gutenberg

Si bien para un maquetado de contenido muy básico podemos tener suficiente con los bloques  que trae por defecto, en ocasiones podemos encontrarnos que nos limita nuestras opciones de diseño y personalización. Si buscamos en el repositorio de  WordPress ya podemos encontrar varios plugins gratuitos que ofrecen una biblioteca más amplia. Algunos de estos plugins son:

 

Demos un pequeño repaso a todo lo explicado...

Compártenos en tu red social favorita
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on whatsapp
¿Te ha resultado útil? ¡Puntúalo!
[Total: 3 Media: 5]

Dejar un comentario

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

He leido y acepto nuestra política de privacidad. *

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.

Últimos post del blog

Por que crear paginas web con Wordpress

Por qué crear tu página web con WordPress

En la actualidad existen gran variedad de herramientas para crear una página web sin grandes conocimientos de programación, ejemplo de ello pueden ser Joomla, Wix, Blogger, Weebly o Jimdo. Sin enbargo, de entre todas estas aplicaciones, ¿por qué crear tu página web con WordPress? ¿Qué hace

Maquetar con Gutenberg Wordpress

Gutenberg, el nuevo editor de WordPress

Hoy vamos a hablar de Gutenberg, pero no del inventor de la imprenta con teclas móviles moderna, si no del nuevo editor de WordPress que va a cambiar completamente la forma en que publicamos contenido en nuestras páginas web.Gutenberg es el nombre del proyecto que

Mejorar imágenes para Wordpress

Cómo optimizar imágenes para tu página web

Un elemento que da mucho valor a nuestras paginas o entradas de blog son las imágenes. Hacer uso de una buena imagen en nuestras publicaciones incorpora un número de características que le añaden un valor añadido: Mejoran el SEO: Mediante el uso de las etiquetas

Ir arriba

Esta web utiliza cookies para que tengas la mejor experiencia. Si continúas navegando estás dando su consentimiento para la aceptación de las mencionadas cookies y de sus políticas.