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
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:
En este ejemplo se necesita /La página donde esta el contenido / nombe de seccion CSS ID.
1.- Aparencia menu
2.- Enlace Personalizado
PERSONALIZACIÓN DE MENU
Encabezado y navegación
Menu primario
Configuración de navegación fija
TERMINAMOS CON EL TUTORIAL DE HOY