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.

Afectiva Plantilla Personalizada

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.

Afectiva Menu Principal 1

Como ves se adapta perfectamente a los dispositivos móviles.

Afectiva Menu Principal Responsive

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.

Afectiva Pagina Marketing 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.

Afectiva Pagina Marketing Inferior

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.

Afectiva Home Superior

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.

Afectiva Home Inferior 1

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.

Afectiva Catálogo 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.

Afectiva Cursos Resumen

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.

Afectiva Blog

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.

Afectiva 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
  • AdWords de Google
  • Alta del fichero LOPD
  • 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.