Plantilla WordPress Your Way.

Tema ‘Your Way Theme’


Febrero 2014.

Desarrollo de una plantilla para WordPress en una única página enfocada a proyectos creativos en los que la parte visual sea especialmente relevante. Aporta soluciones originales a la presentación de grandes cantidades de contenido en poco espacio, y diferentes alternativas para la ubicación de fotografías e imágenes en alta definición.

En los últimos años hemos visto como el formato web en una sola página dividida en secciones ganaba presencia en Internet. La principal ventaja de esta técnica es la de ofrecer una navegación atractiva y muy directa: scroll vertical animado, evita cargar nuevas páginas, permite representar visualmente un hilo narrativo… En contra, disponemos de menos recursos a la hora de trabajar con técnicas SEO y nos platea evidentes limitacions en cantidad de contenido; el desplazamiento vertical puede ser infinito, ¡pero quizás la paciencia del usuario no lo sea!

La solución propuesta en este caso es el uso de posts y páginas desde el interior de lo que se conoce como lightboxes: superposiciones a la pantalla principal sujetos a la navegación del usuario. Estéticamente pueden recordar al funcionamiento de las ventanas emergentes, pero con esta técnica la interacción con el navegador es mucho más fluida ya que en realidad no se trata de nuevas ventanas, simplemente se simulan para ganar espacio en momentos concretos de la interacción con el usuario.

Plantilla WordPress frontend

El modelo de navegación se basa en un sistema de tarjetas, totalmente configurables desde el panel de administración de WP, donde el cliente / administrador de la web puede crear y vincular cada tarjeta con el post o página que desee, tal y como se muentra en la siguiente imagen del backend.

Configuració backend WordPress Plantilla

Las cuatro secciones que componen el tema ofrecen establecer cuatro imágenes a pantalla completa que actuarán como fondo de cada una de las secciones. La primera sección consiste en un mensaje de bienvenida junto al botón de inicio de desplazamiento vertical. En ella el usuario puede configurar efectos de animación creados en CSS para dicha imagen de fondo, a través de dos capas preestablecidas. Por ejemplo, podríamos subir a la capa estática la fotografía de un cielo, y a la capa animada con traslación horizontal subir la imagen de nubes con el fondo en transparencia. De esta manera, lograríamos la simulación del movimiento de las nubes sin tener que animar todo el fondo. Con este algoritmo y un poco de creatividad se pueden hacer combinaciones muy atractivas de bajo coste computacional usando solo dos imágenes.

Animació CSS a pantalla completa

La segunda sección es la anteriormente comentada, en la que se presentaba el sistema de navegación con tarjetas y desde donde se accede a los posts o páginas creadas. Los menús, que aparecen y desaparecen al clicar la correspondiente etiqueta, están aminados con Javascript. En la tercera sección se presenta una galería de imágenes con scroll horizontal, efectos en CSS3 y método lightbox para ver cada imagen en pantalla completa.

Galeria d'imatges horitzontal

Para la gestión interna de la galería se ha creado un plugin que permite subir y ordenar cómodamente las imágenes desde el panel de administración, aprovechando de base el código del propio gestor multimedia de WordPress. Incluye además la funcionalidad de arrastrar y soltar para ubicar las imágenes en el orden deseado, así como la introducción de pies de imagen y metadatos que incide positivamente en el SEO de la página.

Gestor de galeria d'imatges per WordPress.

La cuarta sección está destinada a un formulario de contacto, personalizando el popular plugin ‘Contact Form 7’. Como siempre, se trata de un tema 100% responsive, no solo en la adaptación del formato a los distintos dispositivos, sino también en la carga de elementos condicionada a la pantalla en la que se muestran, logrando así una navegación más eficiente y ligera.

Formulari de contacte personalitzat.

Finalmente, destacar que la barra de navegación está preparada para incluir enlaces a redes sociales, parámetro totalmente configurable desde el backend de la plantilla. Basta con acceder al apartado ‘Menú’ de WP y crear uno nuevo marcando la opción ‘Social Icons Menu’. Hecho esto, solo quedará añadir los enlaces de nuestras redes sociales y automáticamente se mostrarán en el frontend los iconos correspondientes.

Afegir icones de xarxes socials.

 

Curiosea otros trabajos:


»