02. Instalación y exploración de Blocksy
¿Qué aprenderás?
Sección titulada «¿Qué aprenderás?»En este tutorial conoceremos las herramientas principales de Blocksy y aprenderemos a preparar WordPress para implementar nuestro portafolio profesional UX/UI.
También revisaremos cómo seleccionar una plantilla inicial y qué debemos considerar antes de importarla.
Objetivos de aprendizaje
Al finalizar esta lección podrás:
- Instalar y activar el tema Blocksy en WordPress.
- Comprender la función del plugin Blocksy Companion.
- Identificar las principales secciones del panel de Blocksy.
- Explorar y comparar plantillas Starter Sites.
- Seleccionar una plantilla compatible con Gutenberg.
- Reconocer las principales herramientas del personalizador.
- Preparar la estructura visual de un portafolio profesional UX/UI.
- Nivel: Inicial.
- Herramientas: WordPress, Blocksy y Blocksy Companion.
- Requisito previo: Tener acceso como administrador a una instalación de WordPress.
- Proyecto: Portafolio profesional de un diseñador gráfico especializado en UX/UI.
1. Preparación del entorno
Sección titulada «1. Preparación del entorno»Antes de comenzar, es importante comprobar que WordPress funciona correctamente.
En nuestro proyecto, WordPress será la plataforma principal para administrar el contenido del portafolio.
Blocksy se encargará de gran parte de su apariencia visual, mientras que Gutenberg permitirá crear y editar las páginas mediante bloques.
¿Qué necesitamos?
Sección titulada «¿Qué necesitamos?»- Acceso al panel de administración de WordPress.
- Permisos para instalar temas y plugins.
- Conexión a internet para descargar Blocksy.
- Una instalación de prueba o desarrollo.
Importante: Si ya tienes Blocksy instalado y activado, puedes avanzar directamente a la sección 3.
2. Instalar el tema Blocksy
Sección titulada «2. Instalar el tema Blocksy»Un tema de WordPress controla aspectos importantes de la presentación visual del sitio.
Blocksy proporciona opciones de personalización que utilizaremos durante la implementación y optimización de nuestro portafolio.
Paso a paso
Sección titulada «Paso a paso»Ingresar al panel de administración
Accede al panel de administración de tu instalación de WordPress.
Inicia sesión con una cuenta que tenga permisos para instalar y administrar temas.
Abrir la biblioteca de temas
En el menú lateral, selecciona Apariencia → Temas.
Haz clic en Añadir nuevo tema o Añadir nuevo, según la interfaz de tu instalación.
Buscar e instalar Blocksy
Utiliza el buscador de temas y escribe Blocksy.
Identifica el tema y selecciona Instalar.
Espera hasta que WordPress confirme que la instalación terminó.
Activar Blocksy
Una vez completada la instalación, haz clic en Activar.
Regresa a Apariencia → Temas y comprueba que Blocksy aparece como el tema activo.
Recuerda: instalar un tema no significa necesariamente que esté activado.
Documentación oficial
Sección titulada «Documentación oficial»Cómo instalar Blocksy — Documentación oficial
3. Instalar Blocksy Companion
Sección titulada «3. Instalar Blocksy Companion»Blocksy Companion es un plugin complementario que amplía las funcionalidades del tema.
Aunque Blocksy puede funcionar sin este plugin, lo utilizaremos para acceder a las plantillas iniciales, extensiones y herramientas adicionales.
¿Por qué es importante?
Sección titulada «¿Por qué es importante?»Debemos diferenciar claramente:
- Blocksy: tema encargado de opciones visuales y estructurales.
- Blocksy Companion: plugin que añade funcionalidades complementarias.
- Gutenberg: editor de bloques para crear y modificar contenidos.
Instalar Blocksy Companion
Después de activar Blocksy, revisa si aparece una invitación para instalar Blocksy Companion.
Si está disponible, utiliza esa opción para instalarlo y activarlo.
También puedes ingresar a Plugins → Añadir nuevo plugin, buscar Blocksy Companion, instalarlo y activarlo.
Documentación oficial
Sección titulada «Documentación oficial»Instalación de Blocksy y Blocksy Companion
4. Conocer el panel de Blocksy
Sección titulada «4. Conocer el panel de Blocksy»Después de activar Blocksy Companion, podremos acceder a herramientas adicionales desde el panel de WordPress.
El panel de Blocksy organiza distintas funcionalidades del tema.
Entre sus secciones principales se encuentran:
- Home: información general y accesos a herramientas del tema.
- Starter Sites: biblioteca de sitios y diseños iniciales.
- Extensions: funcionalidades adicionales.
- Useful Plugins: complementos recomendados.
- Changelog: historial de cambios y actualizaciones.
La disponibilidad de algunas herramientas depende de los plugins instalados y del plan de Blocksy utilizado.
Explorar el panel de Blocksy
Desde el panel de WordPress, ingresa a la sección Blocksy.
Explora sus apartados principales sin modificar todavía ninguna configuración.
Identifica dónde se encuentran las plantillas y las extensiones.
Documentación oficial
Sección titulada «Documentación oficial»Blocksy Dashboard — Documentación oficial
5. ¿Qué son los Starter Sites?
Sección titulada «5. ¿Qué son los Starter Sites?»Los Starter Sites son sitios de ejemplo diseñados para facilitar el comienzo de un proyecto web.
Pueden incluir páginas, estructuras de navegación, composiciones visuales y contenido de demostración.
Son útiles como punto de partida, pero no reemplazan el proceso de diseño UX/UI.
Aplicación a nuestro proyecto
Sección titulada «Aplicación a nuestro proyecto»Nuestro objetivo no es copiar una plantilla sin modificaciones.
Debemos elegir una base que podamos adaptar al portafolio profesional definido durante el desarrollo de nuestro prototipo en Figma.
Por ejemplo, podríamos buscar una plantilla que permita presentar:
- Portada profesional.
- Presentación personal.
- Proyectos destacados.
- Servicios o especialidades.
- Formulario o información de contacto.
La estructura final debe responder al proyecto académico, no solamente a la apariencia de la plantilla.
6. Explorar las plantillas disponibles
Sección titulada «6. Explorar las plantillas disponibles»Abrir la biblioteca Starter Sites
Ingresa a Blocksy → Starter Sites.
Explora los diseños disponibles y revisa sus vistas previas.
Puedes comenzar buscando opciones relacionadas con portafolios, perfiles profesionales o servicios creativos.
Comparar plantillas para el portafolio
Selecciona dos plantillas que puedan servir como punto de partida.
Para cada una, observa:
- Organización de la página de inicio.
- Jerarquía visual.
- Distribución de imágenes y textos.
- Estructura de navegación.
- Adaptación a dispositivos móviles.
- Compatibilidad con Gutenberg.
No es necesario importar todavía ninguna plantilla.
¿Por qué elegiremos Gutenberg?
Sección titulada «¿Por qué elegiremos Gutenberg?»Nuestro proyecto académico utilizará el editor de bloques de WordPress.
Por eso, cuando una plantilla ofrezca versiones para Gutenberg y Elementor, priorizaremos la versión de Gutenberg.
Esto nos ayudará a mantener una metodología de trabajo consistente durante las clases.
Ver plantillas oficiales
Sección titulada «Ver plantillas oficiales»Galería oficial de Starter Sites de Blocksy
7. Importar una plantilla
Sección titulada «7. Importar una plantilla»Advertencia importante: la importación de un Starter Site puede modificar contenido y configuraciones del sitio.
Para esta actividad, recomendamos utilizar una instalación nueva de WordPress.
Si ya estás trabajando sobre un sitio con contenido, realiza un respaldo completo y confirma con el docente antes de importar una plantilla.
Revisar las opciones de importación
Una vez seleccionada una plantilla, utiliza la opción Importar para abrir su asistente de instalación.
Antes de confirmar la importación:
- Comprueba si tiene una versión compatible con Gutenberg.
- Revisa los plugins que solicita.
- Revisa si ofrece crear un tema hijo.
- Comprueba qué contenido se incorporará.
- Verifica que estás trabajando en un entorno de prueba o con respaldo.
Si el sitio contiene trabajo previo que necesitas conservar, detén el procedimiento antes de confirmar la importación.
Documentación oficial
Sección titulada «Documentación oficial»Importar un Starter Site — Blocksy
8. Conocer el personalizador de Blocksy
Sección titulada «8. Conocer el personalizador de Blocksy»El personalizador de WordPress permite modificar numerosas opciones visuales y revisar sus efectos sobre el sitio.
Con Blocksy podemos trabajar en aspectos como:
- Encabezado y navegación.
- Pie de página.
- Colores globales.
- Tipografías.
- Anchos y contenedores.
- Presentación de páginas y entradas.
Abrir el personalizador
Desde WordPress, ingresa a Apariencia → Personalizar.
Explora las distintas secciones disponibles.
Identifica especialmente las opciones relacionadas con el encabezado, pie de página, colores y tipografías.
Por ahora, observa las herramientas sin realizar modificaciones importantes.
Documentación oficial
Sección titulada «Documentación oficial»Opciones del tema y personalizador — Blocksy
9. Aplicación al portafolio UX/UI
Sección titulada «9. Aplicación al portafolio UX/UI»Ahora relacionaremos estas herramientas con nuestro proyecto académico.
Imagina que debes construir el sitio profesional de un diseñador gráfico especializado en UX/UI.
Su portafolio necesita comunicar su identidad, mostrar proyectos y facilitar el contacto con potenciales clientes o empleadores.
Antes de comenzar a editar visualmente el sitio, responde:
1. ¿Qué plantilla utilizarías como punto de partida?
Identifica su nombre y explica por qué la seleccionaste.
2. ¿Qué partes modificarías?
Compara la plantilla con el prototipo desarrollado en Figma.
3. ¿Qué elementos administrarías desde Blocksy?
Considera el encabezado, pie de página, colores y tipografías.
4. ¿Qué contenidos construirías con Gutenberg?
Identifica las páginas y secciones que necesitarás crear.
Evidencia de aprendizaje
Sección titulada «Evidencia de aprendizaje»Registra la plantilla seleccionada, una captura de su vista previa y una breve justificación de tu elección.
Esta actividad es preparatoria y no sustituye la pauta oficial de evaluación de la asignatura.
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»Para continuar profundizando, consulta los siguientes recursos:
- Instalación del tema Blocksy
- Panel principal de Blocksy
- Biblioteca de Starter Sites
- Importación de Starter Sites
- Personalización del tema
- Documentación oficial de WordPress
Próximo tutorial
Sección titulada «Próximo tutorial»En la siguiente lección estudiaremos los fundamentos del diseño responsivo.
Aprenderemos por qué una interfaz debe adaptarse a distintos tamaños de pantalla y cómo aplicar estos principios al portafolio profesional UX/UI.