El blog de dinahosting
  • Inicio
  • Novedades
  • Contenidos Técnicos
    • Marketing
    • Seguridad
    • WordPress
    • Prestashop
  • Eventos
  • Equipo DH
  • Clientes

El blog de dinahosting

  • Inicio
  • Novedades
  • Contenidos Técnicos
    • Marketing
    • Seguridad
    • WordPress
    • Prestashop
  • Eventos
  • Equipo DH
  • Clientes
#HalloweenDH

Suscríbete a nuestra newsletter

Recibe quincenalmente consejos muy útiles para tu web y ecommerce. Además con tu alta te regalamos 2 guías: una de iniciación a WordPress y otra con recursos de marketing.

Newsletter
Imagen presentación bloques Gutenberg

Probamos los bloques de Gutenberg WordPress Editor

escrito por Marta Mariño marzo 26, 2019

Si trabajas con WordPress, sabrás que desde hace un tiempo tiene un nuevo editor mucho más visual, Gutenberg, que te permite maquetar tus páginas y entradas mediante bloques. 

Si todavía no lo conoces, lo primero es que obtengas un Hosting WordPress, en nuestra web tienes diferentes opciones para elegir 😀 Una vez tengas tu hosting, te recomendamos que no te pierdas el post Primeros pasos en Gutenberg, el nuevo editor de WordPress.

Índice de contenidos

  • 1 ¿Qué son los bloques?
  • 2 Tipos bloques de Gutenberg
  • 3 Bloques comunes
    • 3.1 Bloque de Párrafo
    • 3.2 Bloque de Listas
    • 3.3 Bloque de Encabezado
    • 3.4 Bloque de Cita
    • 3.5 Bloque de Imagen
    • 3.6 Bloque de Galería
    • 3.7 Bloque de Fondo
    • 3.8 Bloque de Archivo
    • 3.9 Bloque de Audio
    • 3.10 Bloque de Vídeo

¿Qué son los bloques?

Los bloques son secciones categorizadas de contenido que puedes añadir a tú página.

Cada vez que insertas un texto o una imagen en tu entrada, el editor Gutenberg lo convierte en un bloque, de tal forma que te permite darle formato y manejarlo de forma mucho más sencilla.

Herramientas de bloque Gutenberg

Cada bloque es como una caja que tiene su propia barra de herramientas formada por las propias del bloque y las comunes a todos. En la parte izquierda están los botones de desplazamiento que te permiten arrastrar y cambiar la posición del bloque dentro de la página.

Tipos bloques de Gutenberg

Los bloques se dividen en categorías según su contenido o función:

Listado bloques Gutenberg

Bloques comunes

Son los más habituales, te permiten añadir textos, imágenes y contenido multimedia.

Bloque de Párrafo

Te permite insertar texto y darle formato. Puedes cambiar la alineación del texto, añadir negritas, cursivas y tachados e incluir enlaces.

bloque de párrafo

Ajustes avanzados: tamaño de fuente, capitalizar, ajustes de color y clase CSS adicional.

Permite cambiar a los siguientes bloques: Encabezado, Lista, Cita, Preformateado y Verso.

Bloque de Listas

Crea una lista numérica o con viñetas para estructurar mejor tu contenido.  A mayores, puedes variar la sangría, añadir negritas, cursivas, tachado y enlaces.

Bloque de Listas

Ajustes avanzados: Clase CSS adicional.

Permite cambiar a los siguientes bloques: Párrafo y Cita.

Bloque de Encabezado

Solamente podrás añadir un H1 (el del título) pero con este bloque podrás estructurar tu entrada con diferentes H2 y H3. Puedes añadirle negritas, cursivas, enlaces y tachados.

Bloque de Encabezado

Ajustes avanzados: nivel de encabezado (H1, H2, H3…), alineamiento del texto, clase CSS adicional y anclaje de HTML.

Permite cambiar a los siguientes bloques: Párrafo, Cita y Fondo.

Bloque de Cita

Destaca la frase que prefieras de tu contenido. Tiene las mismas herramientas que el bloque de texto. A mayores te permite añadir la referencia o autor de la cita.

Bloque de Cita

Ajustes avanzados: estilos normal y grande y clase CSS Adicional.

Permite cambiar a los siguientes bloques: Párrafo, Encabezado, Lista y Párrafo de Cita.

Bloque de Imagen

Añades imágenes subiéndolas tú mismo, desde la biblioteca de medios o desde una URL y modificar su alineado en el contenido.

Bloque de Imagen

Ajustes avanzados: clase CSS adicional.

Permite cambiar a los siguientes bloques: Galería, Archivo, Fondo y Medios y texto.

Bloque de Galería

Muy similar al bloque de imagen, te permite añadir varias imágenes a la vez y estructurarlas en columnas.

Bloque de Galería

Ejemplo de galería:

  • Personalizar tema WordPress
  • htaccess WordPress
  • Inbound Marketing
  • Personaje errando el tiro en una diana
  • Editar tema WordPress
  • Registrar dominio .ES o .COM en dinahosting

Ajustes avanzados: columnas, recortar imágenes, enlazar y clase CSS adicional.

Permite cambiar a los siguientes bloques: Encabezado y Vídeo o Imagen

Bloque de Fondo

Es un bloque de imagen o vídeo que te permite añadir un texto sobrescrito. Muy útil si quieres hacer una cabecera de página o un destacado con un toque de diseño. Te permite alinearlo y modificar el estilo del texto.

Bloque de Fondo

Ejemplo de fondo:

Ejemplo de fondo

Ajustes avanzados: color de superposición, opacidad y clase CSS adicional.

Permite cambiar a los siguientes bloques: Galería, Archivo, Fondo y Medios y texto.

Bloque de Archivo

Funciona igual que el bloque de imagen, pero te permite añadir cualquier archivo y crear un enlace para verlo en el explorador o descargarlo.

Bloque de Archivo
Ejemplo de archivoDescargar

Ajustes avanzados: enlazar, abrir en pestaña nueva, botón de descarga y clase CSS adicional.

Permite cambiar a los siguientes bloques: Imagen.

Bloque de Audio

Bloque similar a los de imagen y archivo. Permite vincular un archivo de audio que se podrá reproducir directamente en la página. También puedes alinearlo en la página.

Bloque de Audio

Ejemplo de bloque de audio:

Ajustes avanzados: reproducción automática, repetir, precarga y clase CSS adicional.

Permite cambiar a los siguientes bloques: Archivo.

Bloque de Vídeo

Bloque similar al de audio. Permite vincular un archivo de vídeo que se podrá reproducir directamente en la página. También puede alinearlo en la página.

Bloque de Vídeo

Ejemplo de bloque de vídeo:

Ajustes avanzados: reproducción automática, repetir, silenciado, controles de reproducción, precarga, imagen del póster y clase CSS adicional.

Permite cambiar a los siguientes bloques: Archivo, Fondos, Medios y Texto.

Además de todos estos bloques comunes existen otros tantos de diseño con los que puedes modificar la apariencia y estructura de la página, de formato que te permiten añadir códigos y estilos, incrustados con lo que añadir contenido de otras páginas o redes y widgets con lo que añadir shortcodes, índices, etc.

Como siempre te recomendamos, lo mejor es que los pruebes y experimentes con ellos. ¿Ya los has probado? ¿Qué te parecen los nuevos bloques de Gutenberg?

4 comentarios
0
Facebook Twitter Google + Pinterest

4 comentarios

Jose Luis marzo 31, 2019 - 10:30 pm

Hola buenas. Antes de nada gracias por el articulo. Pero me surge una duda…

No soy capaz de añadir la leyenda tal y como lo hacia yo antes con el antiguo editor de WP.

Te cuento. Yo en mis galerías (en la home) tenia una galería y en cada imagen rellenaba su leyenda, Alt, titulo, url y de mas…..

El código que usaba y funcionaba era: (edito el codigo para que no se reconozca y puedas verlo. El resultado es el mostrado más abajo. Solo he metido algún espacio y eliminado el cierre final

BIKINIS
Siéntete sexy y atrevida con nuestros bikinis más chulos del mercado.<p style="text-align: center;”

BIKINIS
Siéntete sexy y atrevida con nuestros bikinis más chulos del mercado.

Pero ahora me sale un error….

Por el contrario si añado la imagen directamente desde la galería de medios (la cual por cierto no tiene todas las imágenes que tenía antes subidas) y esta imagen ya tenía dicha leyenda con el código anterior ya “puesto” no hay problema. Se visualiza sin problema.

El problema viene cuando subo una foto nueva y quiero ponerle una leyenda,,,,no me deja. Cuando actualizo se ve error.

Alguna idea?????

Muchas gracias de antemano.

Reply
Marta Mariño abril 1, 2019 - 9:33 am

Hola Jose Luis,
Te recomendamos que lo consultes con el desarrollador del plugin o en los foros de la comunidad WordPress, ahí te podrán dar una respuesta más ajustada de lo que te podemos dar aquí.
¡Un saludo!

Reply
Jose Luis marzo 31, 2019 - 10:31 pm

h3 style=»text-align: center;»> BIKINIS</h3
Siéntete sexy y atrevida con nuestros bikinis más chulos del mercado.<p style="text-align: center;”

Este es el código,,,,,

Reply
Jose Luis abril 1, 2019 - 11:17 am

Muchas gracias Marta.

En realidad también estoy intentando esa vía para resolver el problema. Aún así muchas gracias por contestar.
Un saludo

Reply

Deja un comentario Cancelar respuesta

*

code

Puedes revocar tu consentimiento, así como otros derechos, tal y como se describe en la información adicional

Información básica sobre protección de datos

Responsable
Dinahosting S.L.  [+ info]
Finalidad y legitimación
Tratamos los datos que nos proporcionas con la finalidad de gestionar tu comentario, incluida su publicación en nuestro blog. Al enviarnos tu comentario o sugerencia nos das tu consentimiento explícito para que tratemos tus datos con esta finalidad  [+ info]
Destinatarios
Publicamos los comentarios que nos envías en el blog. Enviar un comentario en nuestro blog implica la publicación en el blog del ‘nombre’ y, en su caso, el ‘avatar’ que utilices al dejar el comentario  [+ info]
Derechos
Puedes revocar tu consentimiento, así como otros derechos, tal y como se describe en la información adicional  [+ info]
Información adicional
Para más información, consulta nuestra Política de Privacidad

En dinahosting

Promotion Image

Dominios

Promotion Image

Hosting SSD NVMe

Promotion Image

VPS

Suscríbete a nuestra newsletter

Promotion Image Newsletter

Newsletter

Recibe quincenalmente consejos muy útiles para tu web y ecommerce. Además con tu alta te regalamos 2 guías: una de iniciación a WordPress y otra con recursos de marketing.

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable
Dinahosting SL. [+ info]
Finalidad y legitimación
Trataremos tus datos con la finalidad de enviarte el boletín electrónico informándote sobre los contenidos del blog. Estamos legitimados para tratarlos porque te has suscrito a nuestra newsletter.[+ info]
Personas destinatarias
No comunicaremos tus datos a terceros, salvo obligación legal.[+info]
Derechos
Puedes revocar tu consentimiento, modificando tu perfil tal y como se describe en el correo electrónico de suscripción.[+ info]
Información adicional
Para más información, consulta nuestra Política de Privacidad.

Conviértete en afiliado

Gana dinero recomendando dinahosting a todo el mundo.
Hazte afiliado

¡Síguenos!

Facebook Twitter Instagram Linkedin Youtube
dinahosting
Facebook Twitter Instagram Linkedin Youtube

LLÁMANOS GRATIS

900 854 000


ESCRÍBENOS

soporte@dinahosting.com

En dinahosting

  • Hosting
  • Dominios

Área privada

  • Panel de administración
  • Webmail
  • Feedback
  • Protección de datos
  • Ayuda
  • 900 854 000
  • soporte@dinahosting.com

@2020 - Dinahosting

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable
Dinahosting SL  [+ info]
Finalidad y legitimación
Trataremos tus datos con la finalidad de enviarte el boletín electrónico informándote sobre los contenidos del blog. Estamos legitimados para tratarlos porque te has suscrito a nuestra newsletter  [+ info]
Personas destinatarias
No comunicaremos tus datos a terceros, salvo obligación legal  [+ info]
Derechos
Puedes revocar tu consentimiento, modificando tu perfil tal y como se describe en el correo electrónico de suscripción  [+ info]
Información adicional
Para más información, consulta nuestra Política de Privacidad