loading

09/05/2019

Gutenberg y sus bloques de dise├▒o. (con ejemplos)

Gutenberg y sus bloques de dise├▒o. (con ejemplos)

Gutenberg es el nuevo editor de WordPress. Fue lanzado junto con la versi├│n 5.0 de WordPress y la verdad que tiene herramientas muy importantes para el dise├▒o de nuestros contenidos.

En un art├şculo anterior dec├şamos que este producto de WordPress fue creado en colaboraci├│n con Yoast SEO, lo que permite inferir las ventajas que brinda al posicionamiento de nuestra web.

A pesar de que a├║n carece de algunas funcionalidades, lo cierto es que introdujo muchos elementos que nos facilitan el trabajo.

Vamos a ver algunos de sus bloques de elementos de dise├▒o: Columnas – Medios y texto.

Bloque de columnas

Este es uno de los más versátiles que trae Gutenberg. Puede ayudarnos a dejar de depender de algunos constructores como Visual Composer u otros.

Nos da la posibilidad de tener un bloque con las columnas necesarias variando su cantidad en la barra lateral.

Tambi├ęn nos permite agregar im├ígenes y mejorar el aspecto visual de nuestro texto. La barra flotante habilita diferentes dimensiones y adem├ís contamos con las opciones generales de otros bloques.

Aqu├ş te dejo un ejemplo:

Perros

Imagen1

Cuidados especiales. Atenci├│n las 24 horas.

Gatos

Imagen3

Cuidados especiales. Atenci├│n las 24 horas.

Aves

Imagen4

Cuidados especiales. Atenci├│n las 24 horas.

Es quiz├ís un poco dif├şcil de manejar al principio pero con la pr├íctica se vuelve muy sencillo de usar y los resultados son muy buenos

Bloque de medios y texto

Este bloque nos permite colocar un archivo multimedia que puede ser un video o una imagen. Además podemos agregar texto explicativo y editarlo para que se vea más atractivo.

De la misma forma que en el bloque de columnas, es muy sencillo aplicar diferentes dimensiones. Contiene las mismas opciones de los demás elementos.

Podemos cambiar el tama├▒o de fuente y ajustar el color de fondo y de texto en la barra lateral. Tambi├ęn es posible agregar enlaces en el texto lo que resulta muy ventajoso a la hora de promocionar determinados productos.

Estos son algunos ejemplos:

Agencia de viajes

Torre Eiffel  Par├şs

Par├şs en oto├▒o. Una experiencia inolvidable.

St Peters Basilica 2875093 1920

Roma y sus maravillas, ideal para tus vacaciones.

Real State

Architecture 1867187 1920

La casa de tus sue├▒os en Inmobiliaria Dreams. Vis├ştanos.

Residence 2219972 1920

Proyecto residencias en balneario La Costa. Quedan pocos unidades.

Los ejemplos anteriores son sólo una muestra de todo lo que podemos hacer con el editor Gutenberg. Si aplicas un poco de creatividad y aprendes a usarlo bien, se transformará en una herramienta imprescindible para destacar tus publicaciones.

An├şmate y ver├ís los resultados.

Imágenes: Freepik, Pixabay

Traducci├│n: Deepl

Generic placeholder image
Nicolás González

Dise├▒ador & Desarrollador Web
Freelance

+598 98 398 010

nico@nicowebsite.com

Art├şculos
Relacionados

El proyecto web
de tu empresa.
┬┐Por d├│nde
empezar?

El proyecto web de tu empresa se traduce en la creación de una página web que te aporte visibilidad, tráfico y lo más importante: clientes. ...

Seguridad
en Internet:
C├│mo proteger
su página web

La Seguridad en Internet es más necesaria ahora que nunca, debido al aumento significativo de los ataques a sitios web que crece cada año. Según ...

┬┐C├│mo usar
imágenes en una
página web?
Tips para 2019

¿Cómo usar imágenes en una página web? Más de una vez nos habremos preguntado esto. Sabemos que el aspecto visual es determinante porque atrae nuevos ...