Antes de empezar con el tutorial quiero decirles que utilizaremos un complemenento llamado ScrollMagic wordpress cuesta $20 dollares y no soy un afiliado
lo encontre cuando estaba estudiando como crear el scroll y parallax con CSS o JS, pero si no lo quieren comprar pueden utilizar ScrollMagic Free

¿Que diferencias existen en ScrollMagic Wordpress y ScrollMagic ?

ScrollMagic Wordpress

Vaya la unica diferencia es que ScrollMagic Wordpress es un complemento con entorno gráfico

scrollmagicwordpress

ScrollMagic

Es puro código debes de instalar el script en el encabezado despues descargar el zip y subirlo a tu hosting y modificar CSS, JS.
https://github.com/janpaepke/ScrollMagic

scrollmagic

He decidido utilizar el complemento ScrollMagic Wordpress para que todos puedamos seguir el tutorial. Nosotros o al menos yo, no soy de desarrollador web,
mi especialidad es el branding corporativo pero si entiendo de código y lo que he estudiado de scrollmagic lo pasaremos a ScrollMagicWordpress es más gráfico
y se puede entender mejor la idea. Así todos aprendemos.

Pero no se preocupen hare varios tutoriales con el plugin para que la inversión que hagan valga la pena y además pueden vender sus sitios a un elevado precio
y tengan un retorno de ganacia mejor.

No por usar un plugin nos vamos asentir menos para hacer este efecto, hay personas que saben de programación y no tienen nociones de diseño.
hay diseñadores que son muy buenos pero no conocen de programación.

Mi idea es que nosotros ” Creemos diseños funcionales para que a la hora de la aplicación el plugin quede en segundo plano”

Despues de esta introducción pasamos a crear el tutorial

ver demo tutoriales divi elegant

crear un efecto scroll con ScrollMagic Wordpress y DIVI Themes

Empecemos con el tutorial.

1.- Creamos nuestra página para la construcción, con la nueva actualización nos aparece un diseño de envato xD ( Si es de envato esos recuadros de bienvenida)
Seleccionamos la de constructor

2.- Vamos a sección general propiedades, aquí daremos formato del hero image

 

3.- Cambiamos de color el fondo  (0,0,0,0.66)

4.- Seleccionamos nuestra hermosa imagen de nuestro hero image y la configuración es la siguiente:
Tamaño de fondo de la imagen:  Cubierta
Mezcla de imagen de fondo: Multiplicar

5.- Vamos a pestaña de diseño
Configuramos el relleno personalizado a:
Superior: 329px y Abajo: 329px

6.- Configuración de columna (Aquí va el H1), Añadimos un módulo de texto

7.- Abrimos el módulo de texto y añadimos nuestro texto, escogemos la opción H1 ya que es nuestro título

8.- Vamos a diseño de tipografía para añadir nuestros estilos.

Escogemos la tipografía que mejor se adapte asu diseño, esta vez escogi una que sellama ANTON por forma es pesada y un poco gordita
asi como la hamburguesa aparte se ve un poco desgastada.

Seleccionamos tipografia: ANTON
peso de la fuente: Bold
Alineación: Centro
Tamaño de tipografía: Escritorio: 70px Tablet: 50px y Smartphone: 30px
Sombra: la 3  a la derecha
Color de sobra: Negro tota: #000
Listo terminamos de darle estilo a la tipografía

9.- Para terminar con nuesto hero image lo que haremos sera poner en 0PX la columna del texto

Muy bien terminamos una sección, ahora  viene lo importante.
1.- Vamos aconfigurar la tipografía de cada ingrediente. Esta vez es de ingredientes, ( mientras hago este tutorial se me ocurrio la animación de un motor de carro con la misma técnica
que la de la hamburguesa, quedaria muy bien ). Una vez que nuestra tipografía ya este adecuada, la duplicaremos las veces necesarias, con este metodo no tendremos que
modificar, copiar o pegar estilos por que ya esta lista.

2.-  En las imagenes vamos hacer configuraciones muy pequeñas, solo para darle proporción a acada elemento, ya que unas son más grandes que otras y necesitamos
que sea uniforme ( Y como soy diseñador, soy muy detallista).

 “A lo que te truje chencha” ( Estar atentos)

Diseñando composición Hamburguesa

ENVOLTURA

Primero crearemos toda la hamburguesa (El esqueleto podriamos decirlo asi)

1.- Insertaremos una sección general para configurar nuestro fondo, esto puede llamarse como envolvente por que aquí van todas nuestras columnas.

2.- Configuraremos las propiedades de  fondo

Degradados:
Color pricipal: rgba(0,0,0,0.9)
Color secundario: rgba(0,0,0,0.89)

3.- Seleccionamos la imagen
1.- Tamaño del fondo: Tamaño actual ( Image pequeña para no perder resolución )
2.- posición de imagen: Centro
3.- Repetir imagen: Repetir
4.- Mezclar imagen de fondo: Overlay (Sobre puesta)

5.- Añadimos nuestro título H2

6.-Configuramos tipografía:

Texto del encabezado: H2
Tipografía del encabezado: Anton
Peso de la tipografía: bold
color: #d6a156
Tamaño de la tipografía: Escritorio: 80px Tablet: 50px Smartphone: 30px

7.- Relleno personalizado: 97px tanto superior como inferior

Ahora vamos aconfigurar nuestros ingredientes, configuraremos la tipografía y esta la duplicaremos, despues solo haremos ajustes a la imagen y a la tipografía ya reemplazada
omitiremos algunos pasos que ya deben de ser básicos. Pueden revisar el video que es el complemento

INGREDIENTE “PAN”

1.- Insertamos una columna como muestra la imagen

2.- insertamos módulo de imagen y seleccionamos nuestra imagen

3.- Ajustes de imagen
Alineación de la imagen: izquierda
Anchura de la imagen: Desktop: 85%
Alineación del módulo: Centrado

4-Insertamos texto en la columna derecha

5.- Configuramos el estilo de la tipografía;
Texto del encabezado : H2
Tipografía del encabezado: RUBIK MONO ONE
Peso del título de la tipografía: Bold
Color: #d6a156
Tamaño de la tipografía: Escritorio: 50px Tablet: (Vacio) Smartphone: 30px
Espaciado:
Margen personalizado: Desktop: Izquierda:-100px Tablet: (Vacio) Smartphone: 0px
Relleno personalizado: Desktop: Superior:75px Tablet: Superior: (Vacio) Smartphone:Superior:  0px

6.-Configuración de columna:
Usar ancho personalizado entre columnas: 2
Spacing
Relleno personalizado: Superior:0px Inferior:0px Izquierda:0px derecho: 0px

INGREDIENTE “JITOMATE”

1.-Duplicamos la columna del pan y añadimos un módulo de imagen y seleccionamos la imagen

2.- Ajustes de imagen:
Anchura (Tamaño de imagen) 88%
Alineación del módulo: centrado

TEXTO
3.-Espaciado:
Margen personalizado: Desktop: Izquierda:-100px Tablet: 0px Smartphone: 0px
Relleno personalizado: Desktop: Superior:0px Tablet: Superior: 0px Smartphone:Superior:  0px

4.- Relleno personalizado: 33px superior e inferior:33 px

INGREDIENTE “QUESO Y CARNE”

1.-Duplicamos la columna anterior y añadimos un módulo de imagen y seleccionamos la imagen

2.- Ajustes de imagen:
Anchura (Tamaño de imagen) 85%
Alineación del módulo: centrado

TEXTO
3.-Espaciado:
Margen personalizado: Desktop: Izquierda:-100px Tablet: 0px Smartphone: 0px
Relleno personalizado: Desktop: Superior:58px Tablet: Superior: 0px Smartphone:Superior:  0px

4.-Configuración de columna:
Spacing
Relleno personalizado: Superior:20px Inferior:20px Izquierda:0px derecho: 0px

 

INGREDIENTE “CEBOLLA”

1.-Duplicamos la columna anterior y añadimos un módulo de imagen y seleccionamos la imagen

2.- Ajustes de imagen:
Anchura (Tamaño de imagen) 84%
Alineación del módulo: centrado

TEXTO
3.-Espaciado:
Margen personalizado: Desktop: Izquierda:-100px Tablet: 0px Smartphone: 0px
Relleno personalizado: Desktop: Superior:0px Tablet: Superior: 0px Smartphone:Superior:  0px

4.-Configuración de columna:
Spacing
Relleno personalizado: Superior:20px Inferior:20px Izquierda:0px derecho: 0px

INGREDIENTE “PEPINOS”

 

1.-Duplicamos la columna anterior y añadimos un módulo de imagen y seleccionamos la imagen

2.- Ajustes de imagen:
Anchura (Tamaño de imagen) 85%
Alineación del módulo: centrado

TEXTO
3.-Espaciado:
Margen personalizado: Desktop: Izquierda:-100px Tablet: 0px Smartphone: 0px
Relleno personalizado: Desktop: Superior:0px Tablet: Superior: 0px Smartphone:Superior:  0px

4.-Configuración de columna:
Spacing
Relleno personalizado: Superior:48px Inferior:48px Izquierda:0px derecho: 0px

 

INGREDIENTE “LECHUGA”

1.-Duplicamos la columna anterior y añadimos un módulo de imagen y seleccionamos la imagen

2.- Ajustes de imagen:
Anchura (Tamaño de imagen) 80%
Alineación del módulo: centrado

TEXTO
3.-Espaciado:
Margen personalizado: Desktop: Izquierda:-100px Tablet: 0px Smartphone: 0px
Relleno personalizado: Desktop: Superior:70px Tablet: Superior: 0px Smartphone:Superior:  0px

4.-Configuración de columna:
Spacing
Relleno personalizado: Superior:0px Inferior:0px Izquierda:0px derecho: 0px

Lo que estuvimos haciendo fue centrar la tipografía con la imagen para que se vea alineado (Seria lo mismo con código, buscar y buscar hasta que quede, Pero en divi nosotros lo visualizamos)
Este es el resulto que hemos obtenido. ya tenemos casi terminada nuestra estructura de scroll

SECCIÓN MENU

En esta sección añadiremos el menu, vamos a omitir el texto de bajo del título por que creo que eso es muy fácil y ya saben como hacerlo
y este tutorial es nivel medio, necesitaba poca explicación.

Haremos lo mismo configuramos un modulo duplicamos y reemplazamos elementos, esto nos ayuda atrabajar más rápido

1.- Añadimos una columna de bajo de la lechuga xD

2.- duplicamos nuestro título y lo movemos hacia abajo, donde creamos nuestra columna

3.- Reemplzamos tipografías:
Seleccionamos tipografia: RUBIK MONO ONE
peso de la fuente: Bold
Alineación: Centro
Tamaño de tipografía: Escritorio: 70px Tablet: 50px y Smartphone: 30px

4.-Configuración de columna:
Spacing
Relleno personalizado: Superior:68px Inferior:111px Izquierda:0px derecho: 0px

 ” HAMBURGUESA. FRITURAS, BEBIDAS”

1.- Colocamos módulo de imagen

2.- Vamos a pestaña de diseño
Alineación de imagen: izquierda
Ancho de imagen: 60%
Alineación de módulo: Centrada

1.- Colocamos módulo de imagen en segunda columna

2.- Vamos a pestaña de diseño
Alineación de imagen: Centrada
Ancho de imagen: 60%
Alineación de módulo: Centrada

1.- Colocamos módulo de imagen en la 3 columna

2.- Vamos a pestaña de diseño
Alineación de imagen: Izquierda
Ancho de imagen: 25%
Alineación de módulo: Centrada

La tipografía para los titulos que van debajo de cada imagen son:
Texto del encabezado: H3
Seleccionamos tipografia: dafult
peso de la fuente: Bold
Alineación: Centro
Tamaño de tipografía: Escritorio: 29px Tablet: 29px y Smartphone: 29px
Color de sobra: Negro tota: #fff
Listo terminamos de darle estilo a la tipografía

 

Listo terminamos el diseño ahora viene lo más fácil gracias a nuestro plugin scrollmagicwordpress y a mi que ya configure el efecto 😀

SCROLL MAGIC WORDPRESS

Vamos al menu de herramientas de wordpress, ahi encontraremos a scrollmagic wordpress, es un sombrero
fácil de reconocer. damos click no saldran algunas opciones y escogemos en añadi nueva escena.

FADE-IN-VERTICAL

Primero haremos el efecto de desplazamiento vertical para las imagenes, una vez que se lo coloquemos
auna imagen copiamos y pegamos en todas las demás.

Explico un poco:
Name ID  (Class name): Fade-in-vertical (Este es lo que se copia y sepega en el módulo css de nuestra imagen )
Duration: lo que va adurar la imagen en hacer el desplazamiento
Translate Y: -200 e nuestro plano cartesiano tenemos las Y se desplezara negativamente para encontrarse con las letras
Translate Y: 0 cuando termine el desplazamiento se quedara fijo

Esto es básico

1.- Módulo de imagen (Avanzado –> Css Class –> Pegar y copiar
En todos los modulos de imagen hacer este mismo procedimiento

2.- Ejemplo de como pegar en las imagenes

3.- En la columna de “Hamburguesa.Frituras y bebidas” pegar el codigo en ajustes de columna, como muestra la imagen

 

FADE-IN-VERTICAL-NEGATIVO

Ahora añadiremos el ultimo efecto, para las letras esto es lo contrario al positivo
son los mismos pasos, dejo capturas de pantalla

1.- pegar fade-in-vertical-negativo en texto y hacerlo con todos los demás

2.-Ejemplo de como pegar el Css Class

3.- Pegar el Css Class en ajustes de la columna del menu y listo

Listo hemos terminado, un poco extenso pero es fácil ya que todo se reemplaza.

Aun que no tuvieramos este plugin, lo hubieramos resuelto con código o sin código,¿porque?, en Realeza “La real fuerza del branding”, siempre nos esforzamos
y tratamos de innovar.

Espero que sea de su agrado y sea de utilidad

 

 

 

¿Te parece interesante este artículo?
Puntaje
[Total: 13 Average: 5]

Hola, me llamo Antonio Mtz, soy el iniciador de Divicon que hace referencia a (DIVI y CONferencias). Soy diseñador gráfico, con especialidad en imagen corporativa, me gusta mucho la ilustración, el 3D, Motion graphic, fotografía, tipografía. jajaja bueno todo lo que se refiere al diseño.

Suscríbete a nuestro boletín.

Recibe notificaciones cuando publiquemos algo nuevo.

Gracias por suscribirte

Shares