¶ Página Web WP
¶ Configuración del Header
Para la configuración del encabezado principal del sitio se utilizó la plantilla Brooklyn (#42), la cual incluye una estructura predefinida con animaciones y diseño moderno. No se realizó un rediseño completo, sino ajustes puntuales para adaptarla a las necesidades del sitio.
¶ Top Header
Se activó la opción Top Header, que se muestra cuando el usuario se encuentra en la parte superior del sitio. Para configurarlo, se siguieron los siguientes pasos:
- Ir al panel lateral de WordPress → Brooklyn → Theme Options → Header.
- En las secciones disponibles al final de esta página, se configuraron los siguientes apartados:
- Left Top Header Area: Se seleccionó la opción Custom Fields, donde se ingresó la ubicación de la empresa y su número telefónico.
- Right Top Header Area: Para que muestre correctamente los íconos sociales, se completaron los campos en Top Header → Company Details y, en especial, la opción Social Icons, donde se añadieron los enlaces a redes sociales junto con sus respectivos íconos.
- Left Top Header Area: Se seleccionó la opción Custom Fields, donde se ingresó la ubicación de la empresa y su número telefónico.
¶ Header Principal
Aunque no se modificó de forma significativa la estructura del header principal, se realizaron algunos ajustes menores:
- Botones del header: Desde Header & Navigation → Manage Buttons, se modificó un botón ya existente para que responda a las necesidades del sitio.
- Logo: Se configuró el logo accediendo a General → Logo & Accent Color, donde se subió la imagen del logotipo que se muestra en el encabezado principal.
- Menú de navegación: Para editar las secciones que aparecen en la barra de navegación del header, se accedió a Apariencia → Menús, y se seleccionó el menú llamado main. Desde allí, se añadieron, eliminaron o reorganizaron los elementos según los requerimientos del sitio.
Estas configuraciones permitieron adaptar el encabezado de la plantilla Brooklyn de manera efectiva, manteniendo la coherencia visual del tema mientras se personalizaba con la identidad de la empresa.
¶ Configuración del Slider Principal
Para la sección inicial del sitio web, se utilizó el plugin Slider Revolution, una herramienta robusta para la creación de sliders animados. Este slider se encuentra visible inmediatamente después de la carga del sitio y también es accesible desde el menú lateral de WordPress bajo el nombre Slider Revolution.
¶ Estructura del Slider
Se configuró un slider compuesto por tres slides, cada uno con:
- Un título.
- Un texto breve.
- Un botón de acción.
¶ Configuración del Fondo de Video
Por solicitud, se reemplazaron todas las imágenes originales de los slides individuales por un video de fondo. Para ello, se trabajó sobre la sección Global Layers y se aplicaron las siguientes configuraciones:
-
Carga del video:
- Se añadió un video (en este caso desde YouTube, pero puede ser local o externo).
- Se activaron las opciones en Content → Advanced Media Settings:
-
Overlay:
- Se aplicó un overlay tipo Cross con tamaño
1. - Se ajustó el color del overlay para que armonice con el diseño del sitio, desde la misma sección Content → Overlay.
- Se aplicó un overlay tipo Cross con tamaño
-
Ajustes de tamaño y profundidad:
- Desde la opción Size & Pos (fuera del panel Content), se habilitó:
- ✅ Static Layer Depth / Force Z Depth
- En Position & Size → Size Presets, se seleccionó la opción Stretch para que el video se adapte a cualquier tamaño de pantalla.
- Desde la opción Size & Pos (fuera del panel Content), se habilitó:
¶ Animaciones de Entrada y Salida
Cada elemento dentro de los slides (título, texto, botón) fue animado de forma personalizada:
- En la pestaña Animation, dentro de KeyFrames, se seleccionaron las transiciones:
In: animación de entrada.Out: animación de salida.
Estas animaciones permiten darle dinamismo a los elementos al mostrarse o desaparecer del slider.
Nota: La apariencia final del slider depende del estilo visual que se quiera lograr, por lo que las animaciones y elementos pueden variar según las necesidades del proyecto.