GUÍA BÁSICA | Las herramientas que más vas a usar

¡Bienvenido/a! Si acabas de iniciarte en tu web, este es tu lugar. Te voy a mostrar como hacer las gestiones más básicas: desde crear una página a saber como poner encabezados, texto o añadir imágenes. Vamos a ello.

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.

¿Cómo accedo a mi panel de control?

Lo primero de todo es saber entrar al panel de control de tu web. Deberás consultar los archivos que te envié, en él deberías ver la URL del panel de control (normalmente sería algo tipo: http://paginaweb.com/wplogin), y debería aparecerte una pantalla así:

acceso a panel de control

Simplemente ingresas tu usuario y contraseña y ¡voilà! ya estás dentro. Deberías aparecer en una página similar a ésta.

panel de control wordpress

¿Cómo añadir una nueva entrada?¿y una página?

Podemos crear una entrada de dos maneras distintas:

  1. Desde el panel de WordPress. Si nos dirigimos a la columna izquierda, tenemos la opción Entradas > Añadir nueva o directamente entrando en Entradas, en el botón superior “Añadir nueva”.
  2. Otra opción en la barra superior de administración disponible tanto desde el panel como en la web, siempre que estemos registrados en nuestro WordPress. En la barra encontraremos la opción “+ Añadir”, si nos colocamos encima aparecerá la opción “Entrada”.

El procedimiento es similar para crear una nueva página:

  1. Desde el panel de WordPress. Si nos dirigimos a la columna izquierda, tenemos la opción Páginas > Añadir nueva o directamente entrando en Páginas, en el botón superior “Añadir nueva”.
  2. Otra opción en la barra superior de administración disponible tanto desde el panel como en la web, siempre que estemos registrados en nuestro WordPress. En la barra encontraremos la opción “+ Añadir”, si nos colocamos encima aparecerá la opción “Página”.

Si no tienes claro que las diferencia, en este otro tutorial te explico la diferencia entre página y entrada, y cuando usar una o la otra.

Primeros pasos

Una vez hayamos creado una página o una entrada, veremos que el editor de bloques tiene una interfaz de escritura limpia. ¿Por qué se le llama editor de bloques? sencillo, porque todos los elementos (sean párrafos, títulos, imágenes, etc. están contenidos en un bloque). Veamos como empezar a escribir:

añadir título para post

  1. En la parte superior, introducirás el título de tu entrada o página. Para empezar a escribir tu primer párrafo, tan solo necesitarás hacer click en la frase donde dice «empieza a escribir…» debajo del título y empezar a escribir. Por defecto, cada vez que pulses Enter te creará un párrafo automaticamente.
  2. Sin embargo, si en un momento dado deseas añadir un título, imagen, lista, etc. necesitarás cambiar el tipo de bloque con el que trabajas. Es tan sencillo como pulsar pinchar en el icono “+” de la barra superior. Aquí se desplegarán todos los tipos de bloque que tienes disponibles.

Otros elementos de la barra superior

Otro de los apartados más importantes se encuentra en la barra superior.

elementos de la barra superior
  1. Deshacer / Rehacer. En caso de error, con estos botones podrás deshacer o rehacer acciones que acabes de hacer.
  2. Información. Este botón te dará información resumida de la entrada o página que estás escribiendo (número de palabras, párrafos, encabezados, etc.).
  3. Guardar como borrador, si aún no has terminado tu contenido o tienes que revisarlo antes de publicar, puedes guardar todos los cambios de la entrada o página y dejar la publicación para más adelante.
  4. Vista previa. Te lleva a ver en el navegador la apariencia que tendrá tu entrada cuando esté publicada. Puedes verlo cada vez que hagas un cambio, sobretodo cuando estás empezando y aún te cuesta hacerte una idea de como se verá la maquetación que estás haciendo.
  5. Publicar/Actualizar. Al principio encontrarás únicamentenel botón de publicar, no hay más que decir :), cuando hagas click en él habrás publicado tu entrada o página. ¿Quieres modificar algo? Siempre podrás volver a hacer cambios, verás que el botón ahora se llama actualizar, haciendo click en él guardarás los cambios que hagas sobre la entrada ya publicada.
  6. Haciendo click en este icono se desplegará la columna derecha se con otras opciones importantes tanto a nivel global de la entrada o página, así como opciones de los bloques que estemos utilizando. Es posible que por defecto no se muestre, así que compruébalo. En este tutorial te hablo de todas las opciones que te permiten las páginas, y en este otro tutorial te hablo de las opciones que te permiten las entradas.
  7. Bloque de YOAST. Se desplegarán todas las opciones del plugin Yoast para posicionamiento en Google.
  8. Otras opciones de visualización. Una lista de opciones para esconder y/o mostrar herramientas. Ninguna de las opciones es realmente importante o necesaria así que no las explicaré aquí.

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:

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:

opciones de párrafo en gutenberg
  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

ajustes de barra derecha para párrafo en wordpress
  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

opciones de encabezado en gutenberg
  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

opciones de lista en gutenberg
  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

ajustes de las listas de wordpress
  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

añadir imagen en artículo wordpress

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:

opciones para imagen
  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

ajustes de la imagen en 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.

ejemplo del bloque texto y medios
  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

ajustes de medios y texto en wordpress
  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

opciones de incrustación de videos en wordpress

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

ajustes para video
  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.

¿Necesitas más ayuda?

Volver a todos los tutoriales

o Contáctame