01. WordPress, Blocksy y Gutenberg
¿Qué aprenderás?
Sección titulada «¿Qué aprenderás?»En este tutorial conocerás las herramientas que utilizaremos para implementar nuestro portafolio profesional UX/UI.
Objetivos de aprendizaje
Al finalizar esta lección podrás:
- Explicar qué es WordPress y para qué se utiliza.
- Diferenciar un CMS, un tema, un editor y un plugin.
- Identificar las funciones de Blocksy y Gutenberg.
- Reconocer las principales áreas del panel de administración.
- Comprender qué herramienta utilizar para modificar cada parte del sitio.
- Nivel: Inicial
- Herramientas: WordPress, Blocksy y Gutenberg
- Requisito previo: Tener acceso a una instalación de WordPress.
1. ¿Qué es WordPress?
Sección titulada «1. ¿Qué es WordPress?»WordPress es un sistema de gestión de contenidos, también conocido como CMS (Content Management System).
Permite crear, administrar y publicar sitios web desde una interfaz de administración.
Con WordPress podemos:
- Crear y editar páginas.
- Publicar artículos.
- Administrar imágenes y archivos.
- Organizar menús.
- Gestionar usuarios.
- Instalar temas y plugins.
- Configurar diferentes aspectos del sitio web.
Ejemplo aplicado
Sección titulada «Ejemplo aplicado»Para nuestro portafolio profesional UX/UI, WordPress será la plataforma desde la cual administraremos las páginas de Inicio, Sobre mí, Proyectos y Contacto.
2. ¿Qué es un tema de WordPress?
Sección titulada «2. ¿Qué es un tema de WordPress?»Un tema es el conjunto de archivos y configuraciones que determina gran parte de la apariencia y presentación de un sitio WordPress.
Según sus características, permite controlar aspectos como:
- Colores.
- Tipografías.
- Encabezado.
- Pie de página.
- Anchos y contenedores.
- Presentación de páginas y entradas.
WordPress permite instalar diferentes temas.
En nuestro proyecto utilizaremos Blocksy.
3. ¿Qué es Blocksy?
Sección titulada «3. ¿Qué es Blocksy?»Blocksy es un tema de WordPress que proporciona herramientas visuales para personalizar la apariencia y estructura del sitio.
Entre sus principales funcionalidades encontramos:
- Configuración de colores globales.
- Configuración tipográfica.
- Header Builder.
- Footer Builder.
- Opciones de diseño para páginas.
- Controles de presentación responsiva.
- Integración con el editor de bloques.
Blocksy y Blocksy Companion
Sección titulada «Blocksy y Blocksy Companion»Es importante distinguirlos:
Blocksy: es el tema que controla gran parte de la presentación visual del sitio.
Blocksy Companion: es un plugin complementario que permite acceder a funcionalidades adicionales, como Starter Sites y extensiones.
Blocksy puede funcionar sin Companion, aunque determinadas funcionalidades requieren instalarlo.
También existen diferencias entre las funcionalidades gratuitas y las de Blocksy Pro.
Ejemplo aplicado
Sección titulada «Ejemplo aplicado»Utilizaremos Blocksy para:
- Configurar los colores de nuestra identidad visual.
- Establecer las tipografías del portafolio.
- Incorporar nuestro logotipo.
- Construir el menú principal.
- Adaptar el encabezado para dispositivos móviles.
- Configurar el pie de página.
4. ¿Qué es Gutenberg?
Sección titulada «4. ¿Qué es Gutenberg?»Gutenberg es el nombre del proyecto asociado al editor de bloques de WordPress.
El editor de bloques permite crear y organizar contenidos mediante componentes independientes llamados bloques.
Por ejemplo:
- Párrafo.
- Encabezado.
- Imagen.
- Botón.
- Columnas.
- Grupo.
- Lista.
- Galería.
Cada bloque puede incluir sus propios ajustes de presentación.
Ejemplo aplicado
Sección titulada «Ejemplo aplicado»Para construir nuestra página de inicio utilizaremos:
- Un bloque de encabezado para el título.
- Un bloque de párrafo para la presentación.
- Un bloque de imagen para una fotografía.
- Bloques de columnas para distribuir proyectos.
- Bloques de botones para incorporar enlaces.
Importante: Gutenberg no reemplaza a WordPress ni a Blocksy. Es el sistema que utilizaremos para editar el contenido de nuestras páginas.
5. ¿Qué es un plugin?
Sección titulada «5. ¿Qué es un plugin?»Un plugin es una extensión de software que agrega o amplía funcionalidades de WordPress.
Por ejemplo, existen plugins para:
- Formularios de contacto.
- Copias de seguridad.
- Posicionamiento SEO.
- Seguridad.
- Comercio electrónico.
- Optimización de imágenes.
No es necesario instalar un plugin para cada función del sitio.
Primero debemos comprobar qué funcionalidades ya proporciona WordPress o nuestro tema.
6. Diferencias entre las herramientas
Sección titulada «6. Diferencias entre las herramientas»| Herramienta | Tipo | Función principal |
|---|---|---|
| WordPress | CMS | Administrar el sitio y sus contenidos |
| Blocksy | Tema | Configurar la apariencia y estructura visual |
| Gutenberg | Editor | Crear y organizar contenido mediante bloques |
| Blocksy Companion | Plugin | Ampliar las funcionalidades del tema |
| Otros plugins | Extensiones | Incorporar funcionalidades específicas |
¿Cómo trabajan juntas?
Sección titulada «¿Cómo trabajan juntas?»Imagina que estamos construyendo nuestro portafolio UX/UI.
WordPress administra las páginas y los contenidos.
Blocksy define la presentación global, el encabezado y el pie de página.
Gutenberg permite construir el contenido de cada página utilizando bloques.
Los plugins incorporan funcionalidades complementarias cuando resultan necesarias.
7. Reconociendo el panel de administración
Sección titulada «7. Reconociendo el panel de administración»Ahora realizaremos una exploración práctica utilizando nuestra instalación de WordPress.
Ingresar a WordPress
Accede al panel de administración de tu instalación y utiliza tus credenciales.
Normalmente, puedes ingresar agregando /wp-admin/ a la dirección de tu sitio web.
Localizar los temas
Desde el menú de administración, ingresa a:
Apariencia → Temas
Identifica cuál es el tema activo.
Comprueba que estás utilizando Blocksy para el desarrollo del portafolio.
Identificar las opciones de Blocksy
Desde el panel de administración, ingresa a:
Apariencia → Personalizar
Identifica los controles disponibles para modificar la presentación del sitio:
- Colores globales.
- Tipografías.
- Encabezado.
- Pie de página.
- Contenedores y diseño.
Por ahora, no necesitas modificar ninguna configuración.
Identificar el editor Gutenberg
Regresa al panel de administración.
Ingresa a:
Páginas → Todas las páginas
Selecciona una página de prueba que tengas autorización para editar.
Reconoce los siguientes elementos:
- Área de contenido.
- Insertador de bloques.
- Barra de herramientas.
- Panel de ajustes.
- Opciones de vista previa.
No publiques modificaciones durante este ejercicio.
8. Errores frecuentes
Sección titulada «8. Errores frecuentes»No encuentro el personalizador
Sección titulada «No encuentro el personalizador»Comprueba que Blocksy esté instalado y activado.
Algunas opciones del menú pueden cambiar según el tema, la versión de WordPress y los permisos de usuario.
No aparecen las opciones que veo en una guía
Sección titulada «No aparecen las opciones que veo en una guía»Comprueba:
- La versión de Blocksy.
- Si la guía utiliza Blocksy Free o Pro.
- Si la funcionalidad requiere Blocksy Companion.
- Si tienes permisos suficientes.
Confundo Blocksy con Gutenberg
Sección titulada «Confundo Blocksy con Gutenberg»Recuerda esta diferencia:
Blocksy configura principalmente la presentación del sitio.
Gutenberg permite editar contenido mediante bloques.
Algunas configuraciones pueden interactuar o superponerse, pero ambas herramientas cumplen funciones distintas.
9. Ejercicio práctico
Sección titulada «9. Ejercicio práctico»Identificando las herramientas del portafolio
Sección titulada «Identificando las herramientas del portafolio»Observa tu instalación de WordPress e identifica qué herramienta utilizarías para realizar las siguientes acciones:
- Cambiar el logotipo del encabezado.
- Crear una página llamada Proyectos.
- Insertar una galería de imágenes.
- Cambiar la tipografía global.
- Agregar un formulario de contacto.
- Configurar la distribución del pie de página.
Para cada acción, explica qué herramienta utilizarías y por qué.
10. Lista de verificación
Sección titulada «10. Lista de verificación»Lista de verificación
Marca las actividades que hayas completado.
11. Documentación oficial
Sección titulada «11. Documentación oficial»WordPress
Sección titulada «WordPress»Documentación oficial de WordPress
Referencia general sobre la administración y funcionamiento de WordPress.
Editor de bloques
Sección titulada «Editor de bloques»Explica cómo funciona Gutenberg y cómo utilizar sus bloques.
Blocksy
Sección titulada «Blocksy»Documentación oficial de Blocksy
Referencia general para conocer y configurar el tema.
Instalación de Blocksy
Sección titulada «Instalación de Blocksy»Procedimiento oficial para instalar el tema y su plugin complementario.
Configuración del tema
Sección titulada «Configuración del tema»Getting Started with Theme Options
Introducción a las opciones globales del personalizador.
Última revisión del contenido: 25 de octubre de 2026.
12. Continuamos aprendiendo
Sección titulada «12. Continuamos aprendiendo»Ahora que conocemos las herramientas, en el siguiente tutorial exploraremos el personalizador de Blocksy y sus principales controles.
Aprenderemos a distinguir las configuraciones globales de los ajustes aplicados a páginas individuales.