Biblioteca Online : ¡La Suscripción ENI por 9,90 € el primer mes!, con el código PRIMER9. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. WordPress 5
  3. Dar formato al contenido
Extrait - WordPress 5 Un CMS para crear y gestionar blogs y sitios web
Extractos del libro
WordPress 5 Un CMS para crear y gestionar blogs y sitios web
3 opiniones
Volver a la página de compra del libro

Dar formato al contenido

Objetivos

En este capítulo estudiaremos el uso de Gutenberg y de sus bloques para el diseño de contenidos, ya sea para las entradas o las páginas. El diseño de contenidos ya no se hace desde un único campo de escritura en una única barra de herramientas de formato, sino que utiliza la navegación por bloques. Para añadir contenido, usará un bloque específico. Para añadir un título, utilizará un bloque de tipo Título; para añadir una imagen, utilizará un bloque de tipo Imagen; para una lista, un bloque Lista, etc.

La pantalla de diseño de contenidos

La pantalla de diseño de contenidos de las entradas y de las páginas es muy similar.

Esta es la pantalla de diseño de una entrada sin título:

images/7_p02.png

Y esta la de una página:

images/7_p03a.png

A la derecha, solo difieren los paneles de la pestaña Documento.

 Para ver u ocultar la columna derecha, haga clic en Ajustes.

images/7_p03b.png

Esta es la pantalla resultante:

images/7_p04a.png

En la parte superior, puede ver la barra de herramientas en la que aparece un primer botón que será el que más utilice, es el que permite añadir un bloque.

images/7_p04b.png

A continuación, los botones Deshacer, Rehacer, Estructura del contenido (para ver los distin-tos tipos de bloque y el número de palabras) y Navegación de bloques (para moverse rápida-mente por el contenido estructurado).

Administrar los bloques

1. Utilizar el primer bloque

Bajo el título del contenido, dispone de un primer bloque que por defecto es de tipo Párrafo.

images/7_p05a.png

 Haga clic en este bloque y escriba el texto.

images/7_p05b.png

2. Añadir un bloque

Para añadir un bloque, tiene varias opciones. La primera consiste en utilizar el primer botón de la barra de herramientas.

 Haga clic en el botón Añadir bloque.

images/7_p05c.png

 En el menú que se abre, escoja el tipo de bloque que quiera añadir.

images/7_p06a.png

En este ejemplo, hemos seleccionado un bloque Párrafo. El nuevo bloque de párrafo se ha insertado detrás del bloque activo o detrás del último bloque, cuando no hay ningún bloque seleccionado. 

images/7_p06b.png

Observe que puede utilizar el campo de búsqueda colocado en la parte superior de la lista de bloques para encontrar más rápidamente un bloque.

La segunda solución es utilizar el menú de las opciones de bloques que está representado por tres puntos verticales. Este menú se muestra sistemáticamente a la derecha de la barra de herramientas de configuración de formato de todos los bloques. Este es el menú en la barra de herramientas de un bloque de tipo Párrafo:

images/new-C7-011.png

Este es el menú local desplegado:

images/7_p07.png

En este menú, tiene los elementos Insertar antes e Insertar después.

  • Utilice Insertar antes si quiere añadir un bloque antes...

El bloque Párrafo

1. La barra de configuración de formato

El bloque Párrafo forma parte de la categoría Bloques comunes. Recuerde que tiene un párrafo por bloque. La barra de configuración de formato de los bloques de tipo Párrafo contiene los botones clásicos para dar formato al texto.

images/new-C7-029.png

Tenemos los botones de alineación:

  • Alinear texto a la izquierda.

  • Alinear texto al centro.

  • Alinear texto a la derecha.

Después tenemos los botones de estilo:

  • Negrita.

  • Cursiva.

A continuación, el botón para crear los vínculos de hipertexto:

 Seleccione el texto en el que los visitantes podrán hacer clic.

 Haga clic en el botón Enlace.

images/7_p17a.png

En el primer ejemplo, vamos a dirigir hacia una página de una web distinta a la suya.

 En el campo de escritura, indique la dirección web de la página a la que va a redirigir.

images/7_p17b.png

 Haga clic en el botón de opciones.

images/7_p18a.png

 Puede hacer clic en el botón Abrir en pestaña nueva para que la página se abra en una nueva pestaña del navegador del visitante.

 Confirme mediante la tecla Intro del teclado o haga clic en el botón Aplicar.

images/7_p18b.png

 En la ventanita del enlace, puede hacer clic en el enlace para comprobar que funciona.

images/7_p18c.png

 Elimine la selección del vínculo; este se ha creado correctamente:

images/7_p18d.png

 Para modificar el vínculo, haga clic en él y después...

El bloque Encabezado

1. Insertar un encabezado

El bloque Encabezado forma parte de la categoría Bloques comunes.

 Inserte un bloque de tipo Encabezado y escriba el texto.

images/7_p27c.png

2. La barra de configuración de formato

La barra de configuración de formato de los encabezados permite modificar el nivel de estos. De forma predeterminada, se utiliza un nivel 2 de encabezado, H2 en HTML. El nivel 1 se suele reservar al título del artículo o de la página. Cuanto más alto sea el nivel, más importancia tiene. Un encabezado de nivel H2 es más importante que un encabezado de nivel H4.

images/7_p28a.png

 Para modificar el nivel del encabezado, utilice los tres botones H2, H3 o H4.

También tiene los botones Negrita, Cursiva, Enlace y Tachado que vimos anteriormente.

3. La pestaña Bloque

En la columna lateral derecha, la pestaña Bloque también permite configurar el formato del contenido de los bloques mediante distintos paneles.

El primer panel le indica el tipo de bloque.

images/7_p29a.png

4. El panel Ajustes de encabezado

En el panel Ajustes de encabezado, la zona Nivel permite cambiar el nivel de importancia del encabezado con los seis niveles disponibles en HTML.

images/7_p29b.png

Se puede alienar el texto con los botones Alineamiento del texto.

5. El panel Avanzado

El último panel, Avanzado, permite añadir una clase CSS adicional al bloque seleccionado si usted domina el lenguaje CSS.

images/7_p30a.png

El bloque Cita

El bloque Cita forma parte de la categoría Bloques comunes.

 Cuando elige insertar un bloque de tipo Cita, debe escribir el tecto de esta cita y su fuente.

images/7_p30b.png

En la barra de herramientas de configuración de formato, encontrará los mismos botones que en el bloque Párrafo.

 En la pestaña Bloque, en el panel Estilos, puede escoger dos estilos predetermindados de formato: Por defecto y Grande.

images/7_p31a.png

El bloque Lista

El bloque Lista forma parte de la categoría Bloques comunes. El bloque Lista permite insertar listas con viñetas y listas numeradas.

images/new-C7-090.png

 Cuando inserte el bloque, escriba la lista pasando a la siguiente línea después de cada elemento con la tecla Intro.

images/7_p32a.png

La configuración del formato de las listas se hace desde la barra de herramientas del bloque.

Por defecto, la lista es con viñetas y se llama lista desordenada.

images/7_p32b.png

 Para tener una lista numerada, haga clic en el botón Convertir a lista ordenada.

images/7_p32c.png

Para crear sublistas dentro de una lista, utilice los botones Reducir sangría al elemento de la lista y Añadir sangría al elemento de la lista.

 Haga clic en un elemento de la lista.

 Para sangrar este elemento, haga clic en el botón Añadir sangría al elemento de la lista.

images/7_p33a.png

 Para eliminar una sangría, haga clic en el botón Reducir sangría al elemento de la lista.

El bloque Imagen

1. Insertar una imagen

El bloque Imagen forma parte de la categoría Bloques comunes. Cuando inserta un bloque de tipo Imagen, Gutenberg le propone varios métodos para añadir una imagen:

images/7_p33b.png

Tiene estas opciones:

  • Arrastrar una imagen desde su administrador de archivos hasta esta ventana. La imagen se añadirá automáticamente a la biblioteca de medios de su sitio.

  • Subir permite ver la ventana de selección de archivos de su ordenador para que pueda elegir una imagen. La imagen se añadirá automáticamente a la biblioteca de su sitio.

  • Biblioteca de medios abre la ventana de selección de medios de la biblioteca de su sitio.

images/7_p34.png

 Haga clic en la imagen que quiera seleccionar.

images/7_p35a.png

 Haga clic en el botón Elegir.

  • Insertar desde URL permite hacer un copia-pega de la dirección web de una imagen ya publicada en la web. Pero hay que tener cuidado con los derechos de autor de la imagen publicada.

Cuando inserte una imagen, debe escribir una leyenda si no lo había hecho ya.

images/7_p35b.png

Puede configurar el formato de esta leyenda.

images/7_p36.png

2. La barra de configuración del formato

Cuando selecciona una imagen, puede cambiarla, si no le interesa, haciendo clic en el botón Editar imagen.

images/7_p37a.png

En la ventana de la biblioteca de medios, puede seleccionar otra imagen.

images/7_p37b.png

También puede hacer clic en el enlace Editar imagen, a la derecha, para modificar esta imagen con un editor simple propuesto...

El bloque Galería

1. Seleccionar las imágenes de la galería

El bloque Galería forma parte de la categoría Bloques comunes. El bloque Galería permite mostrar una galería de imágenes interactiva. Cuando inserta un bloque Galería, Gutenberg le pide la fuente de las imágenes que constituirán esta galería.

images/7_p44a.png

Tenemos los dos botones clásicos Subir y Biblioteca de medios.

 Seleccione los archivos que utilizará en la galería.

images/7_p45a.png

 Para desmarcar una imagen, haga clic en el botón de arriba a la derecha, con forma de X.

 Haga clic en el botón Crear una nueva galería.

 Escriba la descripción de cada imagen.

images/7_p45b.png

 Haga clic en el botón Insertar galería.

Se ha insertado la galería:

images/7_p46a.png

 Podrá ver el botón Subir una imagen, para añadir otra imagen a la galería.

 Para hacer cambios en la galería, haga clic en el botón Editar galería.

images/7_p46b.png

Puede añadir y eliminar las imágenes de la galería.

2. La configuración del formato de la galería

 En la pestaña Bloque, en el panel Ajustes de la galería, mediante el campo Columnas, puede indicar cuántas columnas quiere que tenga esta galería.

images/7_p47.png

 Deje marcada la opción Recortar imágenes para que las imágenes se vean bien en la galería.

Observe...

El bloque Fondo

1. Insertar la imagen del fondo

El bloque Fondo forma parte de la categoría Bloques comunes. El bloque Fondo permitirá insertar una imagen con efecto de superposición cuando los visitantes utilicen la barra de desplazamiento. Utilice una imagen de tamaño grande para que se vea mejor.

images/7_p48b.png

 Tiene los mismos métodos que hemos visto anteriormente para seleccionar una imagen.

Cuando selecciona la imagen, Gutenberg le pide que añada un título que aparecerá superpuesto en la imagen.

images/7_p50a.png

 Escriba un título y dele formato.

images/7_p50b.png

2. La configuración del formato del fondo

La configuración del formato del fondo y del efecto de superposición se hacen desde la pestaña Bloque.

images/7_p51a.png

 Para tener el efecto de superposición, en el panel Ajustos de fondo, marque la opción Fondo fijo.

images/7_p51b.png

 En el panel Superposición, escoja el Color de superposición que se mostrará por encima de la imagen y determine la Opacidad del fondo. Es decir, la transparencia.

images/7_p52a.png

Si visualiza la entrada o la página, verá el efecto de superposición. Al principio la imagen está fija en el fondo de la página.

images/7_p52b.png

Después, cuando el visitante usa la barra de desplazamiento, la imagen sigue fija, pero deja ver la parte superior por el efecto de superposición.

images/7_p53a.png

El título de la imagen sigue centrado encima de ella.

Multimedia

1. El bloque Vídeo

El bloque Vídeo forma parte de la categoría Bloques comunes. El bloque Vídeo permitirá crear enlaces que dirijan a un vídeo ya publicado en una plataforma. Esta solución es la más fácil, la más eficaz para añadir un vídeo a nuestra página y, sobre todo, la más económica en términos de capacidad de almacenaje, ya que el archivo del vídeo no está alojado en su espacio de disco.

Cuando inserta un Vídeo, Gutenberg le pide su fuente:

images/7_p54a.png
  • Subir permite abrir la ventana de selección de archivos de su ordenador. El archivo de vídeo se colocará en la biblioteca de medios de su sitio de WordPress.

  • Biblioteca de medios muestra la ventana de selección de medios de la biblioteca de su sitio.

  • Insertar desde URL permite hacer un copia-pega de la URL de un vídeo ya publicado.

 Copie la URL del vídeo que desea insertar.

 Haga clic en el botón Insertar desde URL.

 En el campo de escritura, pegue la URL copiada.

images/7_p54b.png

 Confirme.

 Escriba la leyenda.

images/7_p55a.png

 Para modificar el vídeo, haga clic en el botón Editar URL.

images/7_p55b.png

En la pestaña Bloque, en el panel Ajustes de medios, la opción Cambia el tamaño para dispositivos más pequeños ya está activado. Esto permite una mejor visualización desde los smartphones.

Obviamente...

El bloque Medios y texto

El bloque Medios y texto forma parte de la categoría Diseño. Este bloque permite crear diseños elaborados con una imagen que se verá al lado de un texto.

Cuando inserte este bloque, WordPress le pedirá que indique la fuente de la imagen y que escriba un texto asociado a dicha imagen.

images/7_p59.png

 Agregue una imagen y escriba el texto.

images/7_p60a.png

 Puede cambiar el tamaño de la imagen utilizando los puntos azules del lado derecho de la imagen seleccionada.

 Haga clic en el texto para hacer los ajustes de formato.

Por defecto, la imagen se coloca a la izquierda del texto.

images/7_p60b.png

 Para colocar la imagen a la derecha, haga clic en el botón siguiente:

images/7_p60c.png

El bloque Tabla

El bloque Tabla forma parte de la categoría Formatos. El bloque Tabla permitirá insertar tablas en sus contenidos. Cuando inserta este bloque, Gutenberg le pregunta cuántas columnas y filas quiere que tenga la tabla. Siempre está a tiempo de modificar el número de columnas y filas.

images/7_p61a.png

 Escriba los valores deseados y haga clic en el botón Crear.

images/new-C7-118.png

 Escriba los datos en la tabla utilizando la techa Tab para pasar de una celda a otra.

images/7_p62.png

 Para modificar la estructura de la tabla, haga clic en una celda.

La modificación se hace con respecto a la celda que está seleccionada, que contiene el punto de inserción.

 En la barra de herramientas, haga clic en el botón Editar tabla y escoja el elemento que le permita añadir o eliminar una fila o una columna.

images/7_p63a.png

 En la pestaña Bloque, en el panel Estilos, seleccione el estilo deseado: Por defecto o Franjas para que las filas se alternen con un color de fondo gris claro.

images/7_p63b.png

 En la pestaña Bloque, en el panel Ajustes de tabla, puede marcar la opción Celdas de tabla de ancho fijo para que las celdas tengan todas el mismo ancho.

images/7_p63c.png

El bloque Columnas

El bloque Columnas forma parte de la categoría Elementos de diseño. Este bloque le permitirá colocar el texto en columnas.

Cuando inserta este bloque, el punto de inserción parpadea en la primera columna para que escriba el texto.

images/7_p64a.png

 Escriba el texto que quiera.

images/7_p64b.png

 Haga clic en la segunda columna y escriba el texto.

images/7_p65a.png

 Haga clic en cada columna para dar formato al texto mediante los botones de la barra de herramientas de formato del texto y con la pestaña Bloque de la columna lateral derecha.

 Para configurar el bloque, coloque el puntero del ratón en uno de los lados del bloque y haga clic cuando vea aparecer el borde azul y el tipo de bloque.

images/7_p65b.png

 En la barra lateral derecha, en la pestaña Bloque, en el panel Columnas, puede modificar el número de columnas,

images/7_p66a.png

 Si aumenta el número de columnas, WordPress muestra una nueva columna para añadir texto.

images/7_p66b.png

 Si disminuye el número de columnas, la última columna de la derecha junto con su contenido se eliminarán.

El bloque Clásico

El bloque Clásico forma parte de la categoría Formatos. Este bloque permite volver al antiguo editor de contenido TinyMCE, que estaba en la versión 5 de WordPress.

images/7_p67a.png

Los otros bloques de configuración de formato

En la categoría Formatos, Gutenberg propone varios bloques especializados y de uso menos frecuente:

  • HTML personalizado permite insertar código HTML/CSS para las personas con un muy buen conocimiento de estos lenguajes.

  • Código: este bloque permite escribir código respetando los espacios, tabulaciones y sangrados.

  • Preformateado: el texto escrito conservará todos los espacios adicionales y se mostrará con una fuente con espacios fijos de tipo Courrier.

  • Cita permite mostrar una cita con un formato específico.

  • Verso permite un formato particular para mostrar un extracto de una canción o de un poema.

Los otros bloques de formato de diseño

En la categoría Elementos de diseño, Gutenberg propone otros tipos de bloque.

1. El bloque Más

Por defecto, todo el contenido de una entrada se muestra en la página de inicio. Esto no siempre es práctico para los visitantes, ya que la página de inicio puede estar muy cargada y ser demasiado larga para desplazarse por ella. El bloque Más permite mostrar solamente el principio del contenido de la entrada.

 Vaya al bloque al que le seguirá el bloque Más.

 Haga clic en el botón Añadir bloque.

images/7_p68a.png

 En la lista de bloques, escoja Más.

Se ha insertado el bloque:

images/7_p69.png

 Puede modificar el texto LEER MÁS.

Así es como quedaría en la página de inicio:

images/7_p70a.png

2. El bloque Salto de página

No siempre es agradable utilizar la barra de desplazamiento en un artículo largo para ver el final. El bloque Salto de página permite crear una paginación automática en la parte de artículo que usted quiera. Puede insertar varios bloques de este tipo cuando tiene artículos muy largos con mucho contenido.

images/7_p70b.png

No hay que configurar nada en este bloque.

Así queda la página publicada con un artículo que tiene dos saltos de página:

images/7_p70c.png

3. El bloque Separador

Para ver bien las diferentes partes de un artículo largo, puede insertar el bloque Separador, que mostrará una línea...

Los bloques de tipo Widget

En los capítulos anteriores, vimos la utilización de los widgets vinculados a los contenidos. Pues bien: Gutenberg le propone utilizar algunos de ellos directamente en los contenidos. Estos bloques se clasifican en la categoría Widgets.

1. El bloque Últimas entradas

El bloque Últimas entradas permite insertar el widget que muestra las últimas entradas publicadas.

images/7_p73b.png

Por defecto, las últimas entradas se muestran en una lista. En la barra de configuración de formato se halla el botón Vista en lista, que está activo.

 También puede ver las entradas en cuadrícula con el botón Vista de cuadrícula.

images/7_p75a.png

 Para configurar las entradas mostradas, en la columna lateral derecha, en la pestaña Bloque, utilice los parámetros disponibles en el panel Ajustes de últimas entradas.

images/7_p75b.png

2. El bloque Categorías

El bloque Categorías permite ver la lista de todas las categorías de entradas en un contenido. Observe que este bloque muestra también las categorías sin artículos.

images/7_p76a.png

 Para configurar las categorías, en la columna lateral derecha, en la pestaña Bloque , utilice los parámetros disponibles en el panel Ajustes de categorías.

images/7_p76b.png

3. El bloque Archivos

El bloque Archivos permite mostrar las entradas clasificadas por año y por mes.

images/7_p77a.png

 Para configurar las categorías...

Los bloques de Incrustrados

Los bloques de Incrustrados permiten mostrar en un artículo o en una página contenidos de otros sistemas de publicación, como Twitter, Facebook, Instagram, Flickr... Gutenberg le propone más de una docena de contenidos incrustrados. Veamos un ejemplo con Twitter.

 Inserte un bloque de tipo Incrustrados y escoja Twitter.

 En el campo de escritura, indique la URL de la cuenta de Twitter que desea añadir.

images/7_p80a.png

 Haga clic en el botón Incrustar.

images/7_p80b.png

 Abajo del bloque puede escribir una leyenda.

 Para configurar la vista del contenido incrustado de tipo Twitter, en la columna lateral derecha, en la pestaña Bloque, utilice en el panel Ajustes de medios la opción Cambia el tamaño para dispositivos más pequeños, para optimizar la visualización en los smartphones.

images/7_p81.png