Armado responsive
Páginas revisadas en 375 y 390 px, con áreas táctiles de 44 px en la navegación y los botones mobile.
EL CONTEXTO
Un sitio de colegio con mucho para contar.
El cliente es un colegio internacional independiente del Reino Unido. Necesitaba reconstruir su sitio institucional, con información de cada etapa escolar, vida estudiantil, admisiones, noticias y recursos para su comunidad.
EL DESAFÍO
Un sitio con mucho diseño es fácil de romper. Quienes lo actualizan son docentes y administrativos, no diseñadores web, así que el armado también tenía que ser fácil de mantener:
- Armar las páginas con fidelidad a partir de diseños completos entregados, con versión desktop y una referencia mobile
- Que el personal del colegio pueda crear y editar páginas sin tocar los controles de diseño
- Mantener el SEO accesible después de sacar la opción extra “Edit” que el colegio pidió quitar
- Manejar noticias y vacantes desde campos y no desde el constructor de páginas
MI ROL
Armarlo y dejarlo fácil de manejar.
- Desarrollo WordPress responsive a partir de diseños entregados
- Adaptación del CMS: panel por rol, flujo de creación de páginas, patrones reutilizables y contenido por campos
- Listado automático de páginas hijas a partir de la jerarquía de páginas de WordPress
- Un botón a medida “SEO Settings” que abre el SEO de cada página desde el sitio
- Yoast SEO instalado como pidió el colegio, más indicaciones sobre imágenes y caché para el equipo
El diseño visual fue entregado; el armado y la experiencia de edición son trabajo mío.
STACK
- WordPress
- Astra
- Elementor Pro
- Pods
- ACF
- Gutenberg
- Yoast SEO
- WP Fastest Cache
- PHP
- HTML
- CSS
- JavaScript
PROBLEMAS Y SOLUCIONES
Cinco cambios que hicieron el sitio más fácil de manejar.
01
Creación guiada de páginas
EL PROBLEMA
Crear una página significaba arrancar de una pantalla vacía y elegir una estructura técnica (Flexbox o Grid) antes de escribir una palabra.
LO QUE HICE
- Ahora, agregar una página empieza con un título y una elección entre plantillas de página ya armadas.
- La página se abre directo en Elementor, y saqué la opción extra "Edit" que confundía a quienes editan.
- El título que se escribe al crear nombra la página en WordPress y arma su slug. Las plantillas ocultan el título del tema, así que nada se muestra dos veces.
02
Un panel más simple para cada rol
EL PROBLEMA
Los controles de diseño y los menús del panel eran fáciles de romper y difíciles de manejar para quien solo tenía que cambiar un texto o una imagen.
LO QUE HICE
- Ajusté lo que ve cada rol de WordPress: qué controles de Elementor y qué botones y menús de WordPress aparecen. La persona que edita el sitio del colegio, con el rol Editor, tiene una experiencia simplificada.
- Plantillas de página que abren directo en Elementor, más el modo "Edit content only" de Elementor, permiten cambiar textos, imágenes y enlaces dentro de estructuras ya preparadas.
- Las plantillas globales de encabezado, pie y publicaciones mantienen el diseño coherente en todo el sitio.
03
Noticias y patrones reutilizables
EL PROBLEMA
Las noticias mezclaban edición con Gutenberg y con Elementor, y las imágenes chicas salían borrosas o inconsistentes.
LO QUE HICE
- Una plantilla global de publicaciones controla la estructura, y el cuerpo del artículo se edita en Gutenberg.
- Un patrón Quote / Panel, que se inserta desde el editor, agrega contenido destacado con formato consistente.
- Indicaciones claras para subir imágenes con el tamaño y el peso adecuados, y para manejar la caché.
04
Listado automático de páginas hijas
EL PROBLEMA
Las páginas principales necesitaban tarjetas con enlaces a sus subpáginas, y mantener esas listas a mano era lento y fácil de dejar inconsistente.
LO QUE HICE
- Las páginas principales muestran tarjetas enlazadas a sus subpáginas, generadas a partir de la jerarquía de páginas de WordPress.
- Menos mantenimiento manual y una presentación consistente en todo el sitio.
- Una etiqueta visible “Automatic Child Page” marca las páginas que se generan y actualizan solas a partir de sus páginas hijas.
- La etiqueta le indica al equipo que no edite esas páginas directamente: para cambiar lo que muestran, hay que gestionar las páginas hijas correspondientes. Así las distinguen de las páginas de edición manual y se evitan confusiones dentro del CMS.
05
Vacantes y SEO
EL PROBLEMA
Las vacantes tenían que ser manejadas por personal sin conocimientos técnicos. Y con la opción extra “Edit” quitada a pedido del colegio, quienes editan ya no podían llegar al editor de WordPress, donde se edita el SEO.
LO QUE HICE
- Las vacantes se manejan con campos de ACF: un enlace externo y una fecha de cierre obligatoria.
- El colegio pidió el plugin Yoast SEO, así que lo instalé.
- Para llegar a él, armé un botón a medida, “SEO Settings”. Aparece cuando quien edita pasa el mouse por encima de una página y abre la configuración de SEO de esa página.
ANTES Y DESPUÉS
Lo que cambió para el equipo del colegio.
ANTESDESPUÉS
ANTES
Crear una página era arrancar de una pantalla vacía y elegir una estructura técnica.
DESPUÉS
Se escribe un título y se elige una plantilla armada.
ANTES
Algunas opciones de edición generaban dudas.
DESPUÉS
La página se abre directo en Elementor y la opción extra Edit ya no está.
ANTES
Las listas de subpáginas había que mantenerlas a mano.
DESPUÉS
Las páginas principales arman sus tarjetas desde la jerarquía de páginas y llevan una etiqueta “Automatic Child Page”.
ANTES
Sin la opción extra Edit, quienes editan no tenían cómo llegar a la configuración de SEO.
DESPUÉS
Un botón a medida “SEO Settings” al pasar el mouse abre el SEO de esa página.
ANTES
Los controles de diseño y los menús eran difíciles de manejar.
DESPUÉS
Quien edita ve solo los controles que necesita para su rol.
ANTES
Agregar contenido destacado implicaba reproducir su formato.
DESPUÉS
Se inserta el patrón Quote / Panel.
TAMBIÉN ARMÉ
El resto del sitio.
Cambios de navegación
Una nueva sección Community, y Swimming pasó a otro lugar del menú.
Pop-up de la home
Implementado y aprobado, con contenido editable y control de activado/desactivado.
Plantillas globales
El encabezado, el pie y las publicaciones comparten plantillas globales, junto con secciones reutilizables de Elementor.