Contents

viaje en globo aerostático parte 1

Bueno, pues aquí estamos de nuevo con otro gran tutorial.

Introducción

Como es habitual no podemos empezar este artículo sin una buena introducción.
Les explicare rapidamente.

1.- Esta es la parte uno de una página completa que crearemos, no se cuantas secciones hagamos (xD) solo terminaremos hasta el formulario.

Como bien sabemos ahora nuestro cliente dorzata ( que mencionamos en el capítulo 2) , más que nada parece vendedor xD ya que nos trae diferentes proyectos
algo que nos gusta a nosotros poder experimentar y crear nuevas cosas que si sean aplicables.

Bueno en este caso dorzata, nos dice que quiere una página de turismo de viajes en globo aeroestático, pero se le ocurrio que el globo y las nubes tuvieran
movimiento, para quitarle lo aburrido de una imagen jpg.

Así que ya saben aquienes les hablo ¡si! a Realeza La real fuerza del branding  ( Publicidad Cashing xD )

Pasando a algo más serio empecemos con el tutorial

INICIO TUTORIAL

Insertamos una columna con dos módulos



Configuración de tipografía

Una vez que hemos insertado el módulo, añadimos nuestro texto

vamos a diseño / Desing y ajustamos nuestros valores

HEADING TEXT / TÍTULOS DE TEXTO

H1

HEADING FONT / TIPOGRAFÍA DE TÍTULO

Open Sans

HEADING FONT WEIGHT / TIPO DE TÍTULO

Bold

HEADING FONT STYLE / ESTILO DE TITULO

Capital letters / Mayúsculas

HEADING TEXT COLOR / COLOR DE TIPOGRAFÍA

#4f4f4f

HEADING TEXT SIZE / TAMAÑO DE TIPOGRAFÍA

55px

Insertamos una división

Abajo del módulo de texto que insertamos ahora añadiremos una división para añadir otro texto

DIVIDER SETTINGS / CONFIGURACIÓN DIVISIÓN

DIVIDER STYLE / ESTILO DE DIVISIÓN

Dashed / Lineas punteadas

DIVIDER POSITION / POSICIÓN DE DIVISIÓN

Top / Parte superior

SIZING / TAMAÑO

width 80% / Anchura 80%

MODULE ALIGNMENT/ ALINEACIÓN DE MÓDULOS

Left / Izquierda

SPACING / ESPACIADO

Custom Margin -24px / Margen personalizado -24px

Módulo texto 2 “Globo”

Ya que terminamos de configurar nuestra línea divisora, añadimos otro módulo de texto.

Añadimos nuestra información

Ahora ajustamos el diseño / desing es igual que el otro asi que lo que pueden hacer es click derecho sobre el módulo anterior del texto copiar estilo y pegar sobre
este o añadir la información a mano.

HEADING TEXT / TÍTULOS DE TEXTO

H1

HEADING FONT / TIPOGRAFÍA DE TÍTULO

Open Sans

HEADING FONT WEIGHT / TIPO DE TÍTULO

Bold

HEADING FONT STYLE / ESTILO DE TITULO

Capital letters / Mayúsculas

HEADING TEXT COLOR / COLOR DE TIPOGRAFÍA

#4f4f4f

HEADING TEXT SIZE / TAMAÑO DE TIPOGRAFÍA

55px

HEADING TEXT ALIGNMENT / ALINEACIÓN DE TEXTO

Izquierda / Left

SPACING / ESPACIADO

Custom Margin -20px / Margen personalizado -20px

Módulo texto 2 “Aeroestático”

agregamos el módulo de texto aeroestático debajo del módulo que dice globo

ajustamos las propiedades, aquí si cambia un poco el estilo de la tipografía

HEADING TEXT / TÍTULOS DE TEXTO

H1

HEADING FONT / TIPOGRAFÍA DE TÍTULO

Open Sans

HEADING FONT WEIGHT / TIPO DE TÍTULO

Bold

HEADING FONT STYLE / ESTILO DE TITULO

Capital letters / Mayúsculas

HEADING TEXT COLOR / COLOR DE TIPOGRAFÍA

#4f4f4f

HEADING TEXT SIZE / TAMAÑO DE TIPOGRAFÍA

50px

HEADING LETTER SPAGING / SEPARACIÓN DE LETRA

2px

HEADING TEXT ALIGNMENT / ALINEACIÓN DE TEXTO

Izquierda / Left

SPACING / ESPACIADO

Custom Margin TOP -30px / Margen personalizado SUPERIOR -30px
Custom Margin BOTTOM 24px / Margen personalizado INFERIOR 24px

Duplicamos División

Ya estamos terminando esta parte (UFFF )

Ahora duplicamos la línea divisoras para añadir un texto abajo.

Una vez duplicado arrastramos hacia abajo

y entramos a configuración hacer unas pequeñas modificaciones

DIVIDER SETTINGS / CONFIGURACIÓN DIVISIÓN

DIVIDER STYLE / ESTILO DE DIVISIÓN

Dashed / Lineas punteadas

DIVIDER POSITION / POSICIÓN DE DIVISIÓN

Bottom / Parte Inferior

SIZING / TAMAÑO

width 80% / Anchura 80%

MODULE ALIGNMENT/ ALINEACIÓN DE MÓDULOS

Left / Izquierda

SPACING / ESPACIADO

Custom Margin top -20px / Margen personalizado Superior -20px
Custom Margin Bottom 30px / Margen personalizado Inferior 30px

Último módulo de texto

Añadimos un poco de información para respaldar nuestros dos módulos anteriores de texto y darle fuerza a nuestra imagen


Botón

Este botón solo lo usaremos de enlace a alguna página que sea prioritaria, con la configuración que tiene por defecto es suficiente

Terminamos una parte, es hora de festejar y descansar un poco

Nube Transparente

Ya llegamos a la parte divertida.
En el lado derecho de la columna añadiremos nuestras 3 imagenes.

NUBE TRANSPARENTE

Así como vamos añadiendo las imagenes iremos configurando, para que esto sea más rápido



Image Settings / Configuración de imagen

IMAGE ALIGNMENT / ALINEACIÓN DE IMAGEN

Left / Izquierda

SIZING / TAMAÑO

width 80% / Anchura 80%

MODULE ALIGNMENT/ ALINEACIÓN DE MÓDULOS

Left / Izquierda

CUSTOM MARGIN / MARGEN PERSONALIZADO

Custom Margin Bottom -303px / Margen personalizado Inferior -303px
Custom Padding Bottom 0px / Margen personalizado Relleno 0px

Globo Aerostático

Añadimos el globo debajo de la nube transparente, el globo quedara enfrente de la nube transparente


Image Settings / Configuración de imagen

IMAGE ALIGNMENT / ALINEACIÓN DE IMAGEN

Left / Izquierda

SIZING / TAMAÑO

width 64% / Anchura 64%

MODULE ALIGNMENT/ ALINEACIÓN DE MÓDULOS

Left / Izquierda

CUSTOM MARGIN / MARGEN PERSONALIZADO

Custom Margin Bottom -186px / Margen personalizado Inferior -186px

Nube

Esta nube quedara enfrente del globo


Image Settings / Configuración de imagen

IMAGE ALIGNMENT / ALINEACIÓN DE IMAGEN

Left / Izquierda

SIZING / TAMAÑO

width 63% / Anchura 63%

MODULE ALIGNMENT/ ALINEACIÓN DE MÓDULOS

Left / Izquierda

Selección general

Ya estamos por terminar este tutorial amigos, no desesperen, asi esto.

Configuraremos el fondo vamos a propiedades o ajustes de selección general, como muestra la imagen

SPACING / ESPACIADO

Custom Padding TOP 152px / Relleno personalizado Superior 152px
Custom Padding Bottom 121px / Relleno personalizado Inferior 121px

Ahora vamos a configurar el fondo de la sección general

Degradado

Color principal : #fafafa
Color secundario: #efedee

Background / Imagen

Background image size “Actual Size” / Tamaño de la imagen de fondo “Tamaño Actual”

Background image position “Top Right” / Posición de la imagen de fondo “Parte superior derecha”
Background image blend “Darken” / Mezcla imagen de fondo “Oscuro”

COLUMNA

Configuramos la única columna que tenemos

Configuración Dispositivos

Ya estamos acabando, lo que haremos sera ponerle nombre a nuestra sección general que se llamara desktop.
despues la duplicamos y le cambiamos el nombre. más practico veamos estas imagenes



TABLET

Ahora vamos a configurar tablet, configuramos la visibilidad

Entramos en modo grilla, esqueleto, no recuerdo como se le dice xD


Ahora vamos arrastra las imagenes al lado opuesto (izquierda)

Y el texto hacia el lado derecho

Configuramos el fondo de selección general

Background / Imagen

Background image size “Fit” / Tamaño de la imagen de fondo “Ajuste”

Background image position “Bottom Center” / Posición de la imagen de fondo “Parte inferior central”
Background image blend “Darken” / Mezcla imagen de fondo “Oscuro”

Modificamos EXPERENCIAS INCREIBLES, EN GLOBO. Con estos valores

HEADING TEXT SIZE / TAMAÑO DE TIPOGRAFÍA

50px

El tamaño de letra para AEROSTÁTICO

HEADING TEXT SIZE / TAMAÑO DE TIPOGRAFÍA

40px

Smartphone

Lo casi último, ya que hemos duplicado tablet en smartphone la cambiamos el nombre.

modificamos el tamaño de texto en todos los textos excepto nuestro parrafo, es el único que no le hemos hecho cambios.

HEADING TEXT SIZE / TAMAÑO DE TIPOGRAFÍA

25px

Cambiamos la configuración en nube traslucida que es la que esta atras del globlo

SPACING / ESPACIADO

Custom margin Botton -100px / Margen personalizado inferior -100px

Cambiamos la configuración del globo

SPACING / ESPACIADO

Custom margin Botton -200px / Margen personalizado inferior -200px

css en imagenes

Esta parte es muy importante, vamos a propiedades —> personalizado css

Despues regresamos a nuestra vista, esqueleto, retícula, grilla, sigo sin recordar como se llama.
añadimos los codigos de passing2 a las nube de atras y passing a la de enfrente y al globo la etiqueta float.
esto lo hacemos en todos los dispositivos, desktop, Tablet, Smartphone.

.passing { 
animation: passing_4084 5s linear infinite; 
transform-origin: 50% 50%; 
}
 
@keyframes passing_4084 { 
0% { transform:translateX(-50%); opacity:0 } 
33.33333% { transform:translateX(0%); opacity:1 } 66.66667% { 
transform:translateX(50%); opacity:0 } 
100% {transform:translateX(50%); opacity:0 } 
}
.passing2 { 
animation: passing_4084 8s linear infinite; 
transform-origin: 50% 50%; 
}

@keyframes passing_4084 { 
0% { transform:translateX(-50%); opacity:0 } 
33.33333% { transform:translateX(0%); opacity:1 } 66.66667% { 
transform:translateX(50%); opacity:0 } 
100% { transform:translateX(50%); opacity:0 }
 }
.float { 
animation: float_1109 2s linear infinite; 
transform-origin: 50% 50%;
} 

@keyframes float_1109 { 
0% { transform: translateY(0) } 
50% { transform: translateY(-6px) } 
100% { transform: translateY(0) } }

Listo hemos terminado

descargar-divi-json-wordpress

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

Suscríbete a nuestro boletín.

Recibe notificaciones cuando publiquemos algo nuevo.

Gracias por suscribirte

Shares