Esta vez veremos una sección que le llamaremos header o sección de inicio, tambien podriamos llamarle menu. Realmente no lo sé (Tu escoge o ponle como mas te guste), pero si sé donde podriamos utilizarla.

Caso Ficticio
En este caso simularemos una Panadería, utilizaremos un personaje llamado Dorzata es de la consultora donde trabajo como Asesor.

Dorzata:
Explica al asesor en diseño tengo estos 6 tipos de panes y todos son importantes me gustaria que al Inicio
Estuvieran los 6 y quiero que esta imagen este de fondo.

Tambien quiero añadir una pequeña descripción acada tipo de pan que vendo.
Y quiero que se desplace hacia abajo al seleccionar un tipo de pan.

Ya recogimos algunos datos asi que nos vamos bien felices por la vida, por que nos han contrado ahora es cosa de buscar la mejor solución.

Solucion 1:
Podriamos utilizar un slider para resolverlo lo unico negativo es que tiene que pasar como carrusel o diapositiva por diapositiva, estariamos perdiendo
el objetivo.

Solucion 2:
Sabemos que son 6 tipos de panes que le interesa promocionar todos tienen la misma importancia. Lo que haremos es utilizar una seccion o columna de 4 modulos
Podriamos utilizar una de 6 modulos, pero sabemos si llevara descripción cada tipo de pan, Asi que yo recomiendo no arriesgar la legibilidad de los textos, obvio
tampoco la estetica de la página

Si tienes una mejor solución, porfavor de comentarla.

HOVER Y MENU ONE PAGE

1.-Primero vamos añadir una sección regular

2.- Colocamos la imagen de fondo, asi que seleccionamos las propiedas de la selección regular.
Por ahorita lo dejamos sin ningún cambio.

3.- Seleccionamos una columna con 4 módulos

MÓDULO DE TEXTO

4.- Añadimos un módulo de texto, con este módulo vamos atrabajar todos los estilos para despues duplicarlos todas las veces que sean necesarias.

5.- El formato que usaremos para el Título debe de ser H4 y el texto es Parrafo, si llega a ver un h2 o h3 o hasta h1 ( no haya problemas)

6.- Aplicamos formato Formato al Títular que es H4. (Ahorita pondremos un tamaño de tipografía, pero más adelante lo cambiaremos
para ajustar todos los modulos al mismo tamaño, no se vayan a confundir)

7.- Modificamos el Padding, solo en Desktop, igual lo iremos cambiando adelante, por que no sabemos la cantidad
de texto de los demás módulos.

8.- Agregamos borde a nuestro Módulo TEXTO (Para que el usuario sepa que hay algo ahí)

9.- Estilo de borde

CSS ID & CLASSES

1.- Módulo de Texto Propiedades

2.- Ahora vamos a la pestaña avanzada donde colocaremos la clase css

CSS CLASS: blurb-4

3.- vamos a Divi / Opciones /Personalización CSS

CODIGO COPIAR Y PEGAR

background-color: rgba(153,19,15,0.85) (Lo que esta de rojo es el color del HOVER es transparente pueden cambiarlo por uno solido)

/* ************************** */
/* ** CSS FOR DIVI BLURB 4 ** */
/* ************************** */

blurb-4,
.blurb-4 .et-pb-icon,
.blurb-4 h4 {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.blurb-4:hover {
background-color: rgba(153,19,15,0.85)!important;
}
.blurb-4:hover .et-pb-icon,
.blurb-4:hover h2 {
color: #fff!important;
}

/* ************************** */
/* ************************** */

Si todo salio bien ya tendrías el Efecto HOVER , hasta podriamos terminar aquí el Tutorial

BIEN HECHO

4.- Dupliquemos el módulo 4 veces

5.- Duplicamos la columna y borramos 2 modulos de texto.

ALINEACIÓN DE MÓDULOS

Una vez que hemos reemplazado los textos, nos daremos cuenta que no son del mismo tamaño.
(Esta parte es un poco complicada asi que hay que poner mucha atención y ver el video )

1.- Seleccionamos propiedades de columna, para hacer unos ajustes

2.- Personalizamos, la alineación, Espacio entre columnas y Padding

CONFIGURACIÓN MODULOS TEXTO

Aqui vamos, ajustar el padding, en el Movil, Tablet y Desktop.
Tambien acomodaremos el tamaño de letra que les mencione anteriormente.

(Recuerden que estos datos sedeben de cambiar para el tipo de su información)

PAN BLANCO

Personalización Padding

DESKTOP: TOP/SUPERIOR: 2OPX RIGTH /DERECHO: 10PX BOTTOM/INFERIOR: 105PX LEFT/IZQUIERDA: 10PX
TABLET: TOP/SUPERIOR: 2OPX RIGTH /DERECHO: 10PX BOTTOM/INFERIOR: 95PX LEFT/IZQUIERDA: 10PX
SMARTPHONE: TOP/SUPERIOR: 2OPX RIGTH /DERECHO: 10PX BOTTOM/INFERIOR: 95PX LEFT/IZQUIERDA: 10PX

TITULO H4 TAMAÑO: 24PX

PAN INTEGRAL

DESKTOP: TOP/SUPERIOR: 2OPX RIGTH /DERECHO: 10PX BOTTOM/INFERIOR: 90PX LEFT/IZQUIERDA: 10PX
TABLET: TOP/SUPERIOR: 2OPX RIGTH /DERECHO: 10PX BOTTOM/INFERIOR: 95PX LEFT/IZQUIERDA: 10PX
SMARTPHONE: TOP/SUPERIOR: 0PX RIGTH /DERECHO: 0PX BOTTOM/INFERIOR: 0PX LEFT/IZQUIERDA: 0PX

TITULO H4 TAMAÑO: 32PX

PAN CON SALVADO

DESKTOP: TOP/SUPERIOR: 2OPX RIGTH /DERECHO: 10PX BOTTOM/INFERIOR: 65PX LEFT/IZQUIERDA: 10PX
TABLET: TOP/SUPERIOR: 2OPX RIGTH /DERECHO: 10PX BOTTOM/INFERIOR: 65PX LEFT/IZQUIERDA: 10PX
SMARTPHONE: TOP/SUPERIOR: 2OPX RIGTH /DERECHO: 10PX BOTTOM/INFERIOR: 65PX LEFT/IZQUIERDA: 10PX

TITULO H4 TAMAÑO: 32PX

PAN NOLEUDADO

DESKTOP: TOP/SUPERIOR: 2OPX RIGTH /DERECHO: 10PX BOTTOM/INFERIOR:65PX LEFT/IZQUIERDA: 10PX
TABLET: TOP/SUPERIOR: 2OPX RIGTH /DERECHO: 10PX BOTTOM/INFERIOR: 65PX LEFT/IZQUIERDA: 10PX
SMARTPHONE: TOP/SUPERIOR: 2OPX RIGTH /DERECHO: 10PX BOTTOM/INFERIOR: 65PX LEFT/IZQUIERDA: 10PX

TITULO H4 TAMAÑO: 32PX

PAN DE CENTENO

DESKTOP: TOP/SUPERIOR: 2OPX RIGTH /DERECHO: 10PX BOTTOM/INFERIOR: 60PX LEFT/IZQUIERDA: 10PX
TABLET: TOP/SUPERIOR: 2OPX RIGTH /DERECHO: 10PX BOTTOM/INFERIOR: 60PX LEFT/IZQUIERDA: 10PX
SMARTPHONE: TOP/SUPERIOR: 2OPX RIGTH /DERECHO: 10PX BOTTOM/INFERIOR: 60PX LEFT/IZQUIERDA: 10PX

TITULO H4 TAMAÑO: 32PX

PAN DE MAÍZ

DESKTOP: TOP/SUPERIOR: 1OPX RIGTH /DERECHO: 30PX BOTTOM/INFERIOR: 72PX LEFT/IZQUIERDA: 10PX
TABLET: TOP/SUPERIOR: 1OPX RIGTH /DERECHO: 30PX BOTTOM/INFERIOR: 72PX LEFT/IZQUIERDA: 10PX
SMARTPHONE: TOP/SUPERIOR: 1OPX RIGTH /DERECHO: 30PX BOTTOM/INFERIOR: 72PX LEFT/IZQUIERDA: 10PX

TITULO H4 TAMAÑO: 32PX

TERMINAMOS OTRA SECCIÓN AGOTADOR

COLUMNA DE IDIOMAS / CREDITOS O ALGUNA OTRA COSILLA

Ya estamos por terminar, aguanten un poco.

Tratare de resumirlo lo más que se pueda.

1.- Hay que reducir el margen a cero el que esta en medio de las dos columnas

2.- Agrandamos el margen de la segunda columna el margen inferior

3.- Añadimos, un nueva columna con dos módulos

4.- Insertamos módulo texto

5.- Añadimos la información en este caso yo puse el nombre y eslogan donde trabajo.

6.- Duplicamos el módulo de texto y arrastramos al módulo de a lado, reemplazamos textos y damos formato con alineación a la izquierda

7.- Despues vamos apropiedades de columnas y añadimos los siguientes datos.

8.- Vista previa

9.- Recuerdan que al principio añadimos la imagen de fondo, bueno ahora vamos aconfigurarla

CONFIGURACIÓN MÓDULOS DE TEXTO ENLACES

Creeo que hemos llegado a lo que todos esperaban la configuración de enlaces, esto es rápido y sencillo.
Solo se lo aplicaremos aun solo módulo por que lo demas ya es repetitivo.

1.- Seleccionamos nuestros Texto y le añadimos el enlace si aun no sabemos cual sera el enlace ponemos el signo de gato ( # )

2.- El texto cambiara azul por que se vuelve enlace, nosotros cambiaremos el color a blanco y esto se hace para todos los módulos

3.- Añadimos algun tema de los de Elegant Theme

MENU ANCLAJE

Esta explicación sera un poco rápida, aun asi pienso hacer otro tutorial, donde profundice un poco más sobre el tema.

Primero Explicare uno y despues se lo aplicamos a los demás.

secciones

Este es el truco o lo difícil.

1.-Colocar nombre a la sección CSS ID debe de ser uno fácil de reconocer o escribir

APARENCIA MENU

Antes de pasar al menu debemos de estar bien conciente como sera nuestra navegación para poder crear un menu funcionable
antes de seguir explicando más aclaro que no estoy haciendo el enlace desde la raiz

RAIZ: www. realeza.com.mx/#panblanco

Desde la raíz solo se necesita diagonal y gato

NO RAIZ: