Zonas activas con DIVI en la página principal

Un menú convencional puede estar muy bien para la gran mayoría de las páginas webs, pero a veces, queremos destacar de una manera diferente la página principal de nuestro website. Creando zonas activas con DIVI, conseguimos centrar la atención de nuestro visitante en lo que nosotros queremos.

Cómo crear zonas activas con Divi en la Home Page

Por qué en DIVI, porque si se puede hacer en este tema se puede extrapolar a EXTRA o cualquier plantilla que tenga instalado el plugin "DIVI Builder". Así de simple.

Cómo en el vídeo dejo muy claro todo el proceso de realización, no voy a volver a extenderme en el artículo, pero si reforzaré algunos puntos que puedan haber quedado en el aire.

Estructura de las zonas activas

La base del diseño es muy simple, una sección estándar que contiene una fila que dividiremos en tantas columnas como zonas necesitemos, aunque en el vídeo se muestran dos, podemos añadir hasta 4.

Si nos volvemos más creativos, podemos combinar los tamaños de las zonas eligiendo entre las opciones de columnas que nos da el constructor.

Dentro de cada columna se colocará un botón al que asignaremos el tamaño máximo de la zona activa, será el 100% de la anchura de la columna y el 100% de la altura que muestre la ventana en ese momento.

Configuración de la sección estándar

Algo muy sencillo, al ser el contenedor del resto de elementos, tenemos que comprobar que está configurado con un tamaño de anchura total o al 100%.

Dentro de la pestaña "Diseño", los valores de los márgenes y del relleno (Padding), los pondremos en 0px.

Configuración de la fila

Dependiendo del número de columnas que hayamos elegido, tendremos varias zonas para añadir una imagen de fondo. Debemos colocar cada imagen en su columna correspondiente y dejar vacío el fondo general.

En la pestaña del "Diseño" nos centramos en las siguientes opciones:

• Alineación: Centrada
• Tamaño: Marcamos que tenga anchura completa. Activamos el "El Uso Personalizado De Canalón De Ancho" y le ponemos el valor mínimo. Y también activamos "Igualar las alturas de las columnas".
• Separación: Aplicamos el valor 0px al margen y relleno personalizados generales. Dejamos vacíos los que hacen referencia a las diferentes columnas.

Para terminar con la fila, seleccionamos la pestaña "Avanzados", donde tenemos que aplicar un cambio de estilo en el elemento principal. Escribimos:

La primera línea mide la altura, que hay en ese momento de la ventana del navegador, y adapta la fila al 100%, la segunda línea oculta el scroll en caso de que haya alguna pequeña variación.

Configuración de los botones (zonas activas)

Los módulos de los botones nos van a permitir una mayor personalización, teniendo multitud de posibilidades para adaptarlo a nuestras necesidades.

Por ejemplo, en el vídeo elijo un color para superponer a la imagen y hacerla más opaca hasta que el ratón se pone sobre ella, pero podemos elegir una imagen diferente que sustituya al fondo cada vez que realicemos esa acción.

Y hasta ahí puedo leer, como se suele decir, para gustos los colores.

La configuración básica que hay que tener, es la del tamaño del botón y la transparencia del título, os indico cómo lo he hecho.

Para empezar, os recomiendo que configuréis un botón y luego lo dupliquéis. Ahorraréis tiempo y esfuerzo. Sólo tenéis que modificar la URL del enlace para que os dirija al lugar correcto.

La primera opción es colocar un sólo caracter como título, una letra, un número... al reducirlo será tan pequeño que no molestará.

En el enlace ponéis el que necesitéis, luego lo tendréis que modificar al duplicar el módulo.

Vamos a la pestaña "Diseño":

• Alineación: Izquierda
• Botón: Activamos el "Uso personalizado del botón" y ponemos todos los valores al mínimo. Elegimos una transparencia total para el color del texto y jugamos con los colores del fondo y de superposición a nuestro criterio.
• Separación: Escribimos 0px como valor de los márgenes. Ahora hay que prestar atención a los valores del relleno, ya que hay que variarlos según el dispositivo para que sea "responsive" nuestro diseño.
  • Escritorio: Superior: 100vh - Derecha: 100%
  • Tablet y Smartphone: Superior: Depende del número de columnas elegidas, para dos sería 50vh, pero si elegimos 4, el valor será 25vh - Derecha: 100%

Ocultar el menú y el pie de la página principal

Esta opción puede variar dependiendo del tema que estemos utilizando, necesitamos conocer varias cosas para poder aplicarlo.

Averiguar el identificador de la página

WordPress asigna un número a cada página o entrada que escribimos, este número es único y no se repite, por lo que, si aplicamos el cambio a ese identificador, sólo afectará a esa página.

Al editar la página en WordPress, en la URL interna de administración aparece ese número. Tenemos que copiarlo a acordarnos de el para aplicarlo luego.

Aplicar los cambios CSS sobre la etiqueta HTML y clase correcta

Si estamos con el tema Divi no habrá problemas porque os lo dejaré abajo indicado, pero si estamos utilizando el plugin "Divi Builder" sobre una plantilla diferente, tendréis que localizar la etiqueta que corresponda al menú y al pie de vuestra home.

Desde el personalizador del tema, abrimos la pestaña "CSS adicional" y colocamos el siguiente código:

Donde pone el número 7 (corresponde a mi página, no a la vuestra), lo cambiáis por el que corresponda con vuestra página.