Ediciones ENI Editorial | líder en informática
Dar formato al contenido
Objetivos
En este capítulo vamos a estudiar el uso de Gutenberg y sus bloques para diseñar los contenidos, tanto de las entradas como de las páginas. La creación de contenidos no se realiza a través de un único campo de escritura con una sola barra de herramientas de formato. Se trabaja utilizando bloques de diferentes tipos. Para añadir un tipo de contenido, deberá insertar un bloque específico: para un título, un bloque de tipo Título; para una imagen, un bloque de tipo Imagen; para una lista, un bloque de tipo Lista, etc.
La pantalla de creación de contenidos
La pantalla de creación de contenidos de las entradas y de las páginas es muy similar.
He aquí la pantalla de edición de una nueva entrada, con todos los paneles de la columna lateral derecha cerrados:
Y he aquí el de una página:
La interfaz de edición de entradas y páginas se compone de varias secciones.
En la parte superior encontrará la barra de herramientas:
A continuación, se detallan los botones, en el orden en que aparecen, y su función:
-
El botón
con el logo de WordPress permite regresar al
panel de administración general del sitio. -
El botón Alternar insertador de bloques
muestra
la lista de bloques disponibles para añadir contenido.
He aquí un ejemplo:
-
El botón Herramientas
permite elegir el modo de trabajo sobre los
bloques. Puede utilizar el modo Editar,
que es el modo predeterminado, o el modo Seleccionar,
que sirve para seleccionar bloques de contenido.
-
Los botones Deshacer y Rehacer
permiten, respectivamente, cancelar la última operación
realizada o restaurarla si es necesario. -
El botón Resumen del documento
muestra la lista de bloques utilizados en la
redacción.
-
A la derecha, el botón Ver
permite previsualizar cómo se ejecuta
la responsividad, es decir, cómo quedará el
contenido en una pantalla de ordenador, en una tableta...
Administrar los bloques
1. Utilizar el primer bloque
Debajo del título del contenido, encontrará un primer bloque que, por defecto, es un bloque de tipo Párrafo.
Haga clic en este bloque e introduzca el texto.
2. Añadir un bloque
Para añadir otro bloque, dispone de varias opciones. La primera consiste en utilizar el primer botón de la barra de herramientas.
Haga clic en el botón Alternar insertador de bloques.
En el menú que se abre, elija el tipo de bloque que desee insertar.
En este ejemplo, se selecciona un bloque de tipo Párrafo. El nuevo bloque de párrafo se inserta después del bloque activo o después del último bloque, si no hay ninguno seleccionado.
Tenga en cuenta desde ahora que puede utilizar el campo de búsqueda situado en la parte superior de la lista de bloques para encontrar más rápidamente el bloque deseado.
La segunda solución consiste en utilizar el menú de opciones de los bloques, representado por tres puntos verticales. Este menú se muestra sistemáticamente a la derecha de la barra de herramientas de formato de todos los bloques.
Aquí está el menú desplegable:
En este menú, dispone de los elementos Añadir antes y Añadir después.
-
Utilice Añadir antes si desea añadir un bloque antes del bloque que contiene el punto de inserción. ...
El bloque Párrafo
1. La barra de herramientas de formato
El bloque Párrafo forma parte de la categoría TEXTO. Recuerde que tiene un párrafo por bloque. La barra de herramientas de formato de los bloques de tipo Párrafo contiene los botones clásicos para dar formato al texto.
Encontrará los botones de alineación:
-
Alinear el texto a la izquierda.
-
Alinear el texto al centro.
-
Alinear el texto a la derecha.
Los botones de estilo:
-
Negrita.
-
Cursiva.
A continuación, el botón para crear enlaces de hipertexto:
Seleccione el texto en el que desea que los visitantes hagan clic.
Haga clic en el botón Enlace.
En este primer ejemplo, vamos a enlazar con una página de un sitio web externo.
En el campo de escritura, indique la dirección web (URL) de la página a la que desea enlazar.
En este ejemplo, WordPress ha reconocido la URL introducida y la muestra como válida.
Confirme pulsando la tecla Intro.
Para modificar el enlace, haga clic en él.
Puede probar el enlace haciendo clic en su URL.
Luego, haga clic en el botón Editar el enlace para modificar el enlace.
Para eliminar un enlace, haga clic en el enlace y luego en el botón Eliminar enlace.
Ahora veamos cómo insertar un enlace que dirija a otra página de su sitio WordPress:
Seleccione el texto en el que los visitantes harán clic.
Haga clic en el botón Enlace.
En el campo de entrada del enlace, escriba algunos caracteres que estén presentes en el título o en el contenido de la página que desea enlazar.
En la lista desplegable que se muestra, haga clic para seleccionar la entrada, página o medio deseado.
La edición y la eliminación del enlace funcionan igual que en el caso anterior.
La barra de herramientas de formato finaliza con un último botón:
-
El último botón, Más
, permite acceder a otras opciones de formato.
2. La pestaña Bloque
En la columna lateral derecha, la pestaña Bloque también permite dar formato al contenido de los bloques, utilizando varios paneles.
Haga clic en el bloque de párrafo al que desea dar formato.
El primer panel le indica el tipo de bloque seleccionado.
El segundo panel permite aplicar un estilo rápido al párrafo seleccionado...
El bloque Encabezado
1. Insertar un encabezado
El bloque Encabezado forma parte de la categoría Texto.
Inserte un bloque de tipo Encabezado e introduzca su texto.
2. La barra de formato
La barra de formato de los encabezados permite modificar su nivel. Por defecto, se utiliza un nivel de encabezado 2, que corresponde a un H2 en HTML. El nivel 1 suele reservarse para el título de la entrada o de la página. Cuanto menor es el número del nivel, mayor es la importancia. Un encabezado de nivel H2 es, por tanto, más importante que un encabezado de nivel H4.
Para modificar el nivel del encabezado, utilice los tres botones H2, H3 o H4.
También tiene a su disposición los botones para modificar la alineación del bloque y del texto.
Encontrará los botones Negrita, Cursiva, Enlace y las opciones de formato adicionales vistas anteriormente.
He aquí los parámetros de alineación del bloque:
-
Ancho amplio muestra el encabezado a lo largo de toda la página, dejando márgenes a la izquierda y a la derecha.
-
Ancho completo muestra el encabezado ocupando toda la anchura de la página, sin márgenes laterales.
-
Ninguna permite volver a la alineación inicial.
3. Los otros paneles
En la columna lateral derecha, en la pestaña Bloque, encontrará los paneles Estilos, Color, Tipografía, Dimensiones y Avanzado que ya hemos visto anteriormente.
El bloque Lista
El bloque Lista forma parte de la categoría TEXTO. Permite insertar listas con viñetas y listas numeradas.
Cuando inserte el bloque, escriba la lista pulsando la tecla Intro después de cada elemento para pasar a la línea siguiente.
Para dar formato a la lista, debe seleccionar el bloque Lista. Cada vez que esté introduciendo un elemento, la barra de herramientas solo permitirá dar formato a ese elemento y no a la lista completa.
Cuando esté escribiendo un elemento, para seleccionar el bloque Lista, haga clic en el botón Seleccionar bloque superior lista.
El bloque Lista quedará entonces seleccionado:
El formato de las listas se realiza únicamente en la barra de herramientas del bloque.
Por defecto, la lista utiliza viñetas y se denomina Sin ordenar.
Para crear una lista numerada, haga clic en el botón Ordenada.
Para crear listas anidadas, utilice los botones Disminuir margen y Aumentar margen.
Haga clic dentro de un elemento de la lista.
Para indentar ese elemento, haga clic en el botón Aumentar margen.
Haga lo mismo para cada elemento de la lista.
Para eliminar una anidación, haga clic en el botón Disminuir margen.
En la columna lateral derecha, en la pestaña Bloque, encontrará nuevamente los paneles Color, Tipografía, Dimensiones, Borde y Avanzado que hemos visto con anterioridad.
El bloque Imagen
1. Insertar una imagen
El bloque Imagen forma parte de la categoría MEDIOS. Cuando elige insertar un bloque de tipo Imagen, Gutenberg proporciona varios métodos para añadir una imagen:
Puede utilizar las opciones:
-
Subir para mostrar la ventana de selección de archivos de su ordenador de modo que pueda seleccionar la imagen que desee. A continuación, la imagen se añadirá automáticamente a la biblioteca de su sitio.
-
Biblioteca de medios para abrir la ventana de selección de medios de la biblioteca de su sitio.
Haga clic en la imagen que desea para seleccionarla.
Si es necesario, también puede rellenar los campos descriptivos.
A continuación, haga clic en el botón Seleccionar.
-
Insertar desde una URL para copiar/pegar la dirección web de una imagen que ya se ha publicado en la Web. Pero hay que prestar atención a los derechos de autor y a la durabilidad de esta imagen publicada.
Cuando se inserta la imagen, conviene que introduzca una leyenda.
Puede dar formato a esta leyenda.
Si desea eliminar la leyenda, haga clic en el botón Eliminar leyenda.
2. La barra de formato
Cuando la imagen está seleccionada, puede cambiarla, si no le gusta, haciendo clic en el botón Reemplazar:
El botón Alineación permite colocar la imagen en el centro, a la derecha, en su ancho completo...
El botón Añadir...
El bloque Galería
1. Seleccionar imágenes de la galería
El bloque Galería forma parte de la categoría MEDIOS. El bloque Galería permite mostrar una galería de imágenes. Cuando inserta un bloque Galería, Gutenberg pide la fuente de las imágenes que deben formar esa galería.
Encontrará los dos botones clásicos Subir y Biblioteca de medios. En este ejemplo, las imágenes ya están en la biblioteca de medios.
Seleccione los archivos que desea utilizar en la galería.
Para cancelar la selección de una imagen, haga clic en el botón en forma de X en la parte superior derecha.
Haga clic en el botón Crea una nueva galería.
Introduzca una descripción para cada imagen.
Haga clic en el botón Insertar galería.
Se inserta la galería.
Con el bloque Galería seleccionado, en la barra de herramientas, el botón Añadir permite agregar una nueva imagen a la galería.
Puede agregar una imagen de la biblioteca de medios o cargar una nueva imagen.
También puede editar una imagen de la galería.
En la galería, seleccione la imagen que desea editar.
Tiene acceso a estos botones:
-
Aplicar filtro de duotono,
-
Insertar un Enlace,
-
Recortar,
-
Eliminar leyenda de la imagen seleccionada,
-
Reemplazar.
Para editar la leyenda, haga clic en ella y realice...
El Bloque Fondo
1. Insertar la imagen del fondo
El bloque Fondo forma parte de la categoría MEDIA. El bloque Fondo permite insertar una imagen con un efecto de paralaje cuando los visitantes utilicen la barra de desplazamiento. Considere usar una imagen grande para una mejor visualización.
Encontrará los mismos métodos que hemos visto anteriormente para seleccionar una imagen.
2. El texto del fondo
Cuando se selecciona la imagen, Gutenberg pide que se agregue un título que se mostrará encima de ella.
Introduzca un título al que pueda dar formato con la barra de herramientas.
3. El formato del texto
Al escribir el texto de un fondo en un bloque de tipo Párrafo, puede dar formato al bloque en la pestaña Bloque.
La configuración de color le permite personalizar los colores del Texto, el Fondo y el Enlace.
En el panel Tipografía, puede cambiar el TAMAÑO del texto.
En el panel Dimensiones, puede personalizar el Relleno y el Margen.
4. Aplicar efecto de paralaje
El efecto de paralaje se determina en la columna lateral derecha.
Seleccione el bloque Fondo.
En la columna lateral derecha, en la pestaña Bloque, seleccione la subpestaña Ajustes.
Para lograr el efecto de paralaje, en Ajustes, seleccione el botón Fondo fijo.
5. El formato del fondo
Por último, puedes dar formato al fondo utilizando numerosos parámetros de estilo....
Multimedia
1. Insertar vídeo
Si desea insertar un vídeo en su sitio, la mejor solución, y la más económica en términos de recursos, es publicar el vídeo en una plataforma para compartir, como YouTube, Vimeo... y enlazarlo a tu sitio.
En la lista de bloques, en la categoría INCRUSTADOS, seleccione el bloque correspondiente a la plataforma para compartir utilizada. En este ejemplo, es YouTube.
El bloque se inserta:
En la plataforma (aquí, YouTube), copie la URL para compartir del vídeo elegido.
En el campo del bloque, pegue la URL copiada y haga clic en el botón Incrustar.
El video se ha incrustado correctamente en el contenido:
Puede introducir una leyenda pulsando el botón Añadir una leyenda:
En la columna de la derecha, en la pestaña Bloque, en el panel Ajustes, solo dispone de un ajuste, Cambia el tamaño para dispositivos más pequeños, que permite cambiar automáticamente el tamaño del bloque, es decir, el vídeo, cuando la página se muestra en un dispositivo de tipo teléfono inteligente.
2. El bloque Audio
El bloque Audio forma parte de la categoría MEDIA. Puede especificar la fuente del sonido desde su biblioteca de medios o desde una dirección web.
Seleccione el archivo de audio.
En la pestaña Bloque, en el panel Ajustes, tiene tres opciones de configuración...
El bloque Medios y texto
El bloque Medios y texto forma parte de la categoría MEDIOS. Este bloque permite crear diseños elaborados con una imagen que se mostrará junto a un texto.
Cuando se inserta este bloque, WordPress pide que se indique la fuente de la imagen y que se introduzca el texto asociado a ella.
Añada una imagen e introduzca el texto.
Puede cambiar el tamaño de la imagen usando el controlador azul en el lado derecho de la imagen seleccionada.
Haga clic en el texto para darle formato. Es un bloque Párrafo clásico.
De forma predeterminada, la imagen se coloca a la izquierda del texto:
Para mover la imagen a la derecha, haga clic en el botón siguiente:
El botón Cambiar la alineación vertical permite elegir la alineación vertical entre la imagen y el texto. Inicialmente, la alineación está centrada. En este ejemplo, la alineación está en la parte superior, por lo que el texto está alineado con la parte superior del marco, al igual que la imagen.
Al seleccionar el bloque Medios y texto, en la columna lateral derecha, en la subpestaña Ajustes de la pestaña Bloque, puede dar formato este bloque en el panel Ajustes.
-
La opción Apilar en móvil permite una visualización optimizada en teléfonos inteligentes, colocando el bloque de imagen y el bloque de texto uno encima del otro.
-
La opción...
El bloque Tabla
El bloque Tabla forma parte de la categoría TEXTO. Este bloque permite insertar tablas en los contenidos. Al insertar este bloque, Gutenberg pregunta cuántas columnas y filas desea tener para su tabla, sabiendo que luego puede modificar estos números.
Introduzca los valores deseados y haga clic en el botón Crear tabla.
Introduzca los datos de la tabla utilizando la tecla Flèche à droite para pasar de una celda a otra. También puede añadir una leyenda pulsando el botón correspondiente de la barra del bloque.
Para cambiar la estructura de la tabla, haga clic en una celda.
El cambio se realiza en relación con la celda seleccionada, que contiene el punto de inserción.
En la barra de herramientas, haga clic en el botón Editar la tabla y elija el ítem para agregar o quitar una fila o columna.
La configuración de la tabla seleccionada se realiza en la columna lateral derecha, en la subpestaña Ajustes de la pestaña Bloque, en el panel Ajustes.
Se ofrecen tres configuraciones:
-
Celdas de tabla de ancho fijo, para que todas las celdas tengan el mismo ancho.
-
Sección de la cabecera y Sección del pie de página para tener una primera fila y una última fila en la que insertar datos particulares.
El formato de la tabla se aplica en la subpestaña Estilos:
-
En el panel Estilos, puede elegir el formato...
El bloque Columnas
El bloque Columnas forma parte de la categoría DISEÑO. Este bloque permite mostrar texto en columnas.
Cuando inserte el bloque, deberá especificar el número y las dimensiones de las columnas.
En este ejemplo, trabajaremos con dos columnas de dimensiones iguales: 50/50, siendo la unidad el porcentaje.
Se insertan las columnas:
En la primera columna, haga clic en el botón + para agregar un bloque de contenido.
Para este ejemplo, se elige un Párrafo y se le agrega texto.
Haga lo mismo para la segunda columna:
Tiene a su disposición la barra de herramientas y los paneles para dar formato a los textos de los párrafos, tal y como hemos visto anteriormente.
Comencemos por dar formato a cada una de las dos columnas.
Haga clic en el texto de la primera columna.
Para seleccionar la primera columna, haga clic en el botón Seleccionar bloque superior: Columna.
En la columna lateral derecha, en la pestaña Bloque, seleccione la subpestaña Ajustes.
El panel Estructura contiene solo la opción Los bloques interiores usan el ancho del contenido: permite que los bloques incluidos en esta columna usen el ancho completo de dicha columna. Si desea determinar usted mismo el ancho de los bloques incluidos, marque esta opción.
A continuación, tiene acceso al ANCHO DEL CONTENIDO y al JUSTIFICADO, es decir, a la posición horizontal...
Otros bloques de formato
En la categoría TEXTO, Gutenberg ofrece varios bloques especializados y de uso menos frecuente:
-
Código: este bloque le permite introducir código respetando los espacios, las tabulaciones y las sangrías.
-
Preformateado: el texto introducido conservará todos los espacios adicionales y se mostrará en una fuente de espacio fijo, de tipo Courrier.
-
Cita y Párrafo de cita permiten mostrar una cita con un formato específico.
-
Verso utiliza un formato determinado para mostrar un fragmento de una canción o un poema.
Otros bloques de diseño
1. El Bloque Más
Por defecto, todo el contenido de una entrada se muestra en la página de inicio. Esto no resulta necesariamente muy práctico para los visitantes, ya que la página de inicio puede estar muy recargada y requerir mucho desplazamiento. El bloque Más, de la categoría DISEÑO, permite mostrar únicamente el inicio del contenido de una entrada.
Muestre el bloque que sirve como introducción a la entrada.
Después de este bloque de «introducción», inserte el bloque Más.
Puede editar el texto LEER MÁS.
En la configuración de este bloque, puede marcar la opción Ocultar el extracto en la página con el contenido completo para que no se muestren los bloques colocados antes del bloque Más, cuando esta entrada se muestra en una sola página.
Cuando se muestra el sitio, en la página de inicio, solo aparecerá el título del artículo y los bloques colocados antes del bloque Más.
2. El bloque de salto de página
No siempre resulta muy cómodo utilizar la barra de desplazamiento en una entrada muy larga para acceder a la parte inferior de esta. El bloque Salto de página, de la categoría DISEÑO, permite crear una paginación automática en el punto que usted desee dentro de su entrada. Puede insertar varios bloques...
Los bloques Incrustados
Los bloques de contenidos Incrustados permiten mostrar contenido de otros sistemas de publicación, como X, Facebook, Instagram, Flickr, etc., en un artículo o en una página. Gutenberg ofrece más de una docena de tipos de contenidos incrustados. Veamos un ejemplo con X (antigua Twitter).
Inserte un bloque de tipo INCRUSTADOS y elija Twitter (Por ahora, WordPress mantiene la nomenclatura y el logo antiguos de esta red social).
En el campo de entrada, introduzca la URL de la cuenta de Twitter que desee.
Haga clic en el botón Incrustar.
En la parte inferior del bloque, puede introducir una leyenda pulsando el botón correspondiente de la barra de herramientas.
Para configurar la visualización de contenido incrustado de tipo Twitter, en la barra lateral derecha, en la pestaña Bloque, use la opción Cambia el tamaño para dispositivos más pequeños en el panel Ajustes de medios, a fin de tener una pantalla optimizada para teléfonos inteligentes.
El bloque Botones
El bloque Botones de la categoría DISEÑO permite a los visitantes realizar una acción haciendo clic en un botón. Esta acción puede ser, por ejemplo, la posibilidad de volver a la página de inicio del sitio o a otra página.
En la categoría DISEÑO, inserte el bloque Botones.
Se inserta el bloque de botones:
En el campo del botón, introduzca la etiqueta deseada.
Para agregar un enlace al botón, en la barra de herramientas del bloque, haga clic en el botón Enlace.
En el campo del enlace, introduzca la URL deseada, sabiendo que también puede copiar/pegar una URL de su navegador.
A continuación, WordPress analiza la URL y muestra el sitio de destino.
Confirme con la tecla Intro.
Se crea el botón con el enlace:
Puede eliminar el enlace haciendo clic en el mismo botón.
Puede cambiar la URL haciendo clic en el botón 
.
La aplicación de formato al botón se realizará, como siempre, en la barra lateral derecha.
Seleccione el botón.
En la pestaña Bloque, subpestaña Ajustes, en el panel Ajustes, puede personalizar la anchura del botón con valores predefinidos expresados como porcentajes del ancho disponible.
En la pestaña Bloque, subpestaña Estilos, tiene a su disposición varias configuraciones que ya hemos visto con anterioridad:...
Los patrones
1. Usar patrones
Al redactar sitios web, puede ocurrir que ciertos contenidos sean siempre los mismos. Por ejemplo, imaginemos que queremos incluir la foto del redactor y su información de contacto en las redes sociales. Sería muy tedioso insertar estos elementos en cada entrada. Y si hubiera que modificar alguna información de contacto, habría que revisar todo el contenido para actualizar esos datos.
Con WordPress, puede configurar contenido recurrente con patrones, que son bloques reutilizables.
2. Crear patrones
El primer paso consiste en insertar los bloques que desea convertir en patrones.
En una entrada o página, inserte los bloques que quiera y añada contenido.
En este ejemplo, estamos usando un bloque de Medios y texto al que estamos dando formato.
En la barra de herramientas de bloques, haga
clic en el botón Opciones (
) y elija Crear patrón.
A continuación, WordPress pide que asigne un nombre y una categoría a este patrón:
Proporcione estos datos y haga clic en el botón Añadir.
El bloque inicial se transforma inmediatamente en una instancia del patrón creado:
En la pestaña Bloque, puede ver que se trata de la instancia de un patrón:
Haga lo mismo con todos los patrones que necesite.
3. Administrar los patrones
A continuación veremos cómo gestionar los patrones.
Abra el contenido (entrada o página) que incorpora uno de los patrones que ha creado.
En la columna lateral derecha, desde el menú Opciones (el botón con los tres puntos verticales), elija Gestionar patrones.
Guarde la página para no perder el trabajo hecho. A continuación...
Otros patrones
Además de los patrones personalizados que acabamos de ver, los temas pueden ofrecer patrones de diseño listos para usar. El tema predeterminado para esta versión de WordPress ofrece varios patrones «de serie».
Cree un nuevo contenido, publicación o página.
Agregue un bloque y haga clic en la pestaña Patrones.
Los patrones se clasifican por categorías. En la categoría Todos podrá encontrar todos los patrones de todas las categorías, incluidos los patrones personalizados que acabamos de ver.
Para insertar un patrón, haga clic en su nombre.
El patrón se inserta.
A continuación, puede editar los bloques individuales y añadirles su contenido.