2. Los 6 bloques más importantes

Estos son los bloques que vas a utilizar más a menudo y con los que te interesa familiarizarte. Vamos a ver las opciones que se desplegan una vez seleccionados estos bloques. Habrán también opciones desplegadas en la barra derecha que iré comentando en cada caso:

En este video resumen intento mostrarte de forma resumida un poco de todo lo que vamos a ver en este tutorial. Encontrarás explicaciones más concretas y precisas a lo largo del tutorial.

1. Párrafo

Es el bloque básico para redactar el contenido, el que se creará por defecto. Al hacer click en el primer párrafo que escribas verás que se desplegarán una serie de opciones encima, veamos para qué sirven:

1. Haciendo click sobre este símbolo nos dará opciones para convertirlo en otro tipo de bloque (título, lista, etc.)
2. Las flechas de arriba y abajo nos desplazarán el párrafo un elemento más arriba o más abajo. Nos sirve para reordenar nuestro texto.
3. Haciendo click en este símbolo nos dará opciones para alinear nuestro texto a la izquierda, centrarlo, o alinearlo a la derecha.
4. El símbolo «B» convertira nuestro texto en negrita mientras que el símbolo «I» lo convertira en cursiva. No es necesario convertir todo el párrafo en negrita o en cursiva. Siempre podemos seleccionar la palabra o palabras con el mouse que queramos cambiar y así lo hará.
5. Hipervínculo. Cuando queramos crear un enlace a otra página o contenido seleccionaremos el texto que nos interese y haremos click aquí. Nos dará los pasos a seguir.
6. Opciones más avanzadas tales como código integrado, subindice, tachado. Raramente se utilizan.
7. Otras opciones. Las más útiles son las de «eliminar bloque», «copiar» y «duplicar». De todas maneras, haciendo click derecho en tu mouse también podrás copiar, cortar y pegar.

Párrafo | Ajustes de la barra derecha

1. Tipografía. Podremos cambiar el tamaño de nuestra letra de forma manual mediante dos opciones: «Tamaño de la fuente» (nos mostrará unas dimensiones predeterminadas como «grande», «muy grande») o bien «Personalizado» en el que introduciremos el tamaño en píxeles.
2. Ajustes de color. Haciendo click en esta opción podremos cambiar el color tanto de nuestra letra como del fondo.
3. Ajustes del texto. Con la opción de capitalizar se mostrará una primera letra inicial grande.
4. Avanzado. Es recomendable nunca tocar este apartado a no ser que se sepa muy bien qué es lo que que se va a hacer.

2. Encabezado

1. Las mismas opciones que ya expliqué en el bloque de párrafo.
2. Alineación con la página. Nos permite cambiar a «ancho amplio» o a «ancho completo» (el título ocupará el ancho de la pantalla). Por cuestiones de maquetación es preferible no tocarlo.
3. Con este símbolo asignaremos la jerarquía o importancia de tu título en el contenido. H1 será más importante, H2 menos importante y así sucesivamente. Procura que la jerarquía tenga sentido, es decir, si tienes un contenido con un título H2 y deseas añadir subtítulos en ese apartado, empieza utilizando H3 para esos subtítulos.
4. Las mismas opciones que ya expliqué más arriba.

Encabezado | Ajustes de la barra derecha

Aquí encontramos las mismas opciones que para el bloque de párrafo (tipografia y ajustes de color) con la única diferencia que en este caso no podemos «capitalizar» las letras.

3. Listas

1. Las mismas opciones que ya expliqué en el bloque de párrafo.
2. Podemos escoger si queremos que se nos muestre una lista normal o una lista numérica.
3. Estos dos botones contienen dos pequeñas flechas que nos permiten controlar la tabulación o sangría dentro de la lista. Es decir si queremos que un elemento se muestre más a la derecha (por ejemplo para un subíndice) o a la izquierda dentro de la lista.
4. Las mismas opciones que ya expliqué en el bloque de párrafo.

Listas | Ajustes de la barra derecha

1. Ajustes de color. En el caso de las listas encontramos una opción que no tienen los otros bloques. En la sección de «color de fondo» podremos escoger entre utilizar un fondo sólido o un fondo degradado.
2. Ajustes de listas ordenadas. En el caso de que usemos listas numéricas nos saldrá esta opción. En «valor inicial» podrás escoger en qué valor quieres que empiece tu lista (si en «1», «0», u otro número). Adicionalmente, también tendrás la opción de invertir el orden de los números.

4. Imágenes

Tenemos tres opciones para añadir una imagen. O bien hacerlo desde el botón de «subir» y subir la imagen que tengamos en nuestros archivos. Desde «biblioteca de medios», es decir, de imágenes que ya hayamos subido previamente a la web, aquí podremos escogerla. O bien insertarla desde una URL, opción no recomendable (ya que si dicha URL desaparece la imagen también se borrará).

Una vez incrustada la imagen veremos las siguientes opciones:

1. Las mismas opciones que ya expliqué en el bloque de párrafo.
2. Alineación. Podremos alinear la imagen a la izquierda, al centro o a la derecha de la columna. ¡Ojo! Cuando alinees la imagen a la izquierda o a la derecha, colocará el texto en el espacio sobrante, es decir, puede afectar a la visualización del espacio. También tendrás las opciones de «ancho amplio» (será un poco más ancho que el ancho total de la columna) o «ancho completo» (cubrirá todo el ancho de la pantalla). Es recomendable no usar estas dos últimas opciones a no ser que tengas muy claro lo que quieres.
3. Hipervínculo. Podremos vincular la imagen a otra página web o bien vincularla al archivo original de la imagen. Esta última opción es práctica si por cuestiones de espacio tu imagen es demasiado grande y se queda pequeña al ponerla en la web. En ese caso cuando el usuario pulse en la imagen se abrirá la imagen en tamaño completo en otra pestaña del navegador.
4. Cortar. En caso de que queramos retocar rapidamente la imagen, esta opción nos permite cortar la imagen en el propio editor de bloques.
5. Reemplazar. Como el nombre indica, te permitirá cambiar la imagen por otra. Haciendo click nos mostrará dos opciones para ello: o bien mediante la biblioteca de medios o bien subiéndola nosotros mismos.
6. Las mismas opciones que ya expliqué en el bloque de párrafo.
7. Pie de foto. Nos permitirá añadir un pie de foto tan solo haciendo click encima y escribiendo.

Imágenes | Ajustes de la barra derecha

1. Estilos. Con esta opción podrás redondear los contornos de tus imagen. En «estilos por defecto» podrás establecer esta opción como la predefinida para todas las imágenes que subas.
2. Texto alt (texto alternativo). Este apartado es sumamente importante para posicionar Google. Deberías añadir una pequeña descripción de la imagen o lo que representa.
3. Tamaño de la imagen. Aquí podrás escoger el tamaño de la imagen, por si la imagen es demasiado grande o demasiado pequeña. Tiene tres opciones predeterminadas para que no tengas que modificar el tamaño de forma manual
4. Dimensiones de la imagen. Una opción más completa que te permite tener más control sobre el tamaño de la imagen.

Opción alternativa: Medios y Texto

Si lo que buscas es que el texto y la imagen estén uno junto al otro como en el ejemplo que he puesto aquí a continuación, puedes usar alternativamente el bloque ‘Medios y Texto’. Lo podrás encontrar facilmente pulsando en el icono «+» de la barra superior. Este bloque te ayuda a envolver el texto alrededor de la imagen en WordPress.

1. Las mismas opciones que ya expliqué en el bloque de párrafo.
2. Alineación imagen / texto. Con estos dos botones podrás alinear la imagen a la izquierda o a la derecha del texto
3. Alineación vertical. Las tres opciones de alineación vertical nos permitirán alinear el texto o arriba, o en el centro o en el lado inferior de la columna.
4. Las mismas opciones que ya expliqué en el bloque de párrafo.

Medios y texto | Ajustes de la barra derecha

1. Ajustes de color. Al igual que con las listas, aquí también tendrás la opción de añadir un fondo degradado.
2. Apilar en móvil. Activando esta opción convertiremos las columnas en una sola para la versión móvil. Esta opción es la recomendada para evitar problemas de lectura en dispositivos pequeños.
3. Recortar imagen para rellenar toda la columna. En caso de que la imagen quede demasiado descompensada con la columna, podrás hacer que encaje de forma automática. Además con el «selector del punto focal» podrás arrastrar el mouse por la imagen para definir su centro (en caso de que después de cortarla se haya descentrado)
4. Las opciones de «texto alt» y «tamaño de la imagen» que ya expliqué en el bloque de «Imagen».

5. Cómo añadir vídeos

A la hora de añadir un video te desaconsejo subir un video mediante el bloque «Video». Esa opción te obliga a subir el video directamente en la web y eso afectará seriamente la velocidad de tu web y puede incluso bloquear el servidor.

La opción recomendable es subirlo a una plataforma tipo youtube o similares y luego incrustarlo automaticamente desde wordpress. ¿Cómo? pues muy fácil. en la imagen muestro las opciones que encontrarás en el listado de bloques, en el apartado de «incrustados». Usa el bloque que coincida con la plataforma donde tengas subido el video y ya.

Si lo prefieres, también puedes simplemente copiar y pegar la URL del vídeo en un bloque de párrafo, y WordPress lo convertirá automáticamente en un bloque de incrustación de vídeo.

Videos | Ajustes de la barra derecha

1. Ajustes de medios. Por defecto vendrá con esta opción activada. Lo dejamos así ya que nos ayudará a mantener una correcta proporción del video en dispositivos pequeños.

Si necesitas más ayuda sobre imágenes y videos, echa un vistazo a mi otro tutorial sobre ello

6. Cita

Este bloque es práctico en caso de que queramos añadir algún tipo de cita. Las opciones son similares a las de párrafo, simplemente tendremos dos líneas por defecto: una para la cita en si y otra abajo para añadir el autor del comentario.

Cita | Ajustes de la barra derecha

1. Estilos. Con esta opción podrás escoger entre estilo por defecto y estilo «grande» que mostrará la cita en un tamaño de letra mayor.

¿Qué otros tipos de bloques hay?

Existen otros bloques que raramente utilizarás en un artículo a no ser que quieras hacer algo muy concreto:

• Grid, es un elemento de maquetación, es una herramienta de diseño de páginas, no lo vas a usar en tu blog.
• Container, lo mismo que Grid.
• Buttons, el mismo bloque que «Botón» pero con más opciones.
• Headline, el mismo bloque que «Encabezado» pero con más opciones.
• Fondo, te permite añadir a la imagen elegida un texto superpuesto.
• Archivo, Permite añadir un archivo para que el lector pueda descargarlo.
• Galería, con este bloque podrás añadir una galería de imágenes.
• Audio, añade un reproductor de audio en tu entrada con un archivo de sonido de tu biblioteca de medios.
• Código, solo lo usarás si necesitas insertas código de programación.
• HTML Personalizado, con este bloque podrás añadir un fragmento HTML, por ejemplo, el fragmento de código que te dé tu proveedor para mostrar un botón de pago.
• Tabla, permite diseñar tablas de contenido.
• Botón, permite añadir un botón con enlace personalizado, además el estilo del botón es editable.
• Columnas, permite utilizar columnas de maquetación, por ejemplo para poner una imagen y al lado texto.
• Separador, añade una línea horizontal.
• ShortCode, permite añadir elementos a través de ShortCodes que te ofrezca tu tema o un plugin.