Afectiva es una escuela para el de desarrollo emocional y social de niños y adolescentes.
Theme
En afectiva necesitaban actualizar su página web y poder beneficiarse de la funcionalidad avanzada que ofrece un gestor de contenidos como WordPress.
En principio se puede integrar el blog en la página y así se benefician del tráfico que generado.
La plantilla, creada desde cero con underscores , se adapta perfectamente a los dispositivos móviles ( responsive ).
Como empezamos con una plantilla desde cero, he podido replicar fielmente el aspecto de la antigua web.
Por tanto, el aspecto de la web por fuera sigue siendo sencillo y efectivo, pero por dentro cuenta con las comodidades de WordPress.
Menú Principal
El menú principal nos da acceso a todas las páginas de marketing.
Como ves se adapta perfectamente a los dispositivos móviles.
Desde el menú podemos acceder a todas estas páginas:
- Niños y adolescentes
- Inteligencia emocional y social
- Técnicas de estudio
- Psicoterapia
- Evaluaciones psicológicas
- Familias
- Pautas para padres y madres
- Talleres para padres y madres
- Orientación emocional en adopción
- Adultos
- Psicoterapia
- Centros educativos
- Conócenos
- Socias fundadoras
- Colaboraciones
- Cursos
- Contacto
Páginas de marketing
Aunque hay varias páginas de marketing, todas tienen la misma estructura.
Una cabecera con el logo, el sello de centro certificado por la comunidad de Madrid, y el lema de Afectiva.
Estos tres elementos se integran perfectamente y se adaptan según cambia el tamaño de la pantalla.
Sobre el menú principal tenemos acceso al blog, los enlaces a redes sociales y el contacto telefónico.
A continuación el menú principal que nos da acceso a todos los contenidos de la web.
La imagen de gran formato en la parte superior.
Y en la parte inferior tenemos un título pintado a mano y luego digitalizado ( lettering ) y el texto dividido en dos columnas.
El título html está oculto pero visible para los motores de búsqueda, de esta forma no perjudicamos el SEO.
El pie de página es una imagen sobre la que he superpuesto el icono para enlazar a la página de contacto.
Como la cabecera, este pie de página se repite en el resto de páginas.
Inicio
En la página de inicio tenemos un slider que es muy eficaz para explicar a los visitantes cuál es nuestra propuesta de valor, y cualquier característica diferenciadora de nuestro negocio.
En la parte inferior tenemos el título con hecho con lettering y el texto a dos columnas.
Y a continuación tenemos un área para widgets.
En concreto hemos utilizado uno para imágenes que nos permite mostrar el lettering y que además permite descargar el catálogo de cursos en formato PDF.
En un espacio reducido comparado con otras páginas damos toda la información necesaria.
Cursos
El apartado de cursos está hecho con un custom post type, un conjunto diferenciado de información dentro de nuestra web.
Con lo que conseguimos que los usuarios de la web puedan dar de alta nuevos cursos facilmente.
Y además facilitamos la visualización de los cursos disponibles para los usuarios.
También nos permite ordenar los cursos en función de la fecha en la que se impartirán.
Seleccionando cualquiera de los cursos podemos ver la información detallada de cada curso.
Blog
En la parte izquierda podemos ver de forma resumida las últimas entradas, con una imagen sobre el título para generar interés.
En la parte derecha tenemos la barra lateral con los widgets habituales para permitir buscar dentro de nuestro contenido de varias formas diferentes.
Contacto
Y llegamos a la página de contacto, muy importante si como es el caso tenemos un negocio de cara al público.
Muy importante indicar la dirección y las diferentes formas de contacto.
Y a continuación mostramos el formulario de contacto.
Configuración de otras herramientas
Sin entrar en detalles también quiero enumerar otras herramientas que se han configurado, y aunque muchas no se ven, son clave para el buen funcionamiento de la web.
- Certificado de seguridad SSL
- Seguridad y copias de respaldo
- SEO
- Custom post type
- Mapas
- Analytics de Google
- Google Search Console
- Descarga de ficheros
- Aviso de cookies
Para terminar
Replicar la página anterior y hacer que sea adaptable a dispositivos móviles ha sido bastante laborioso, sobre todo por las formas geométricas de la cabecera y pie de página.
Pero el esfuerzo a merecido mucho la pena.
Y el trabajo de lettering le da un toque realmente especial a la página.
Si quieres ver como ha quedado puedes utilizar este enlace afectiva escuela.