Transcripciones
1. Te damos la bienvenida a la clase.: Hola, me llamo Patti y
bienvenidos a mi clase de Skillshare. Soy
especialista en marketing digital y he trabajado en la industria desde hace varios años,
ayudando a las pequeñas y grandes firmas crear los sitios web
y asesorarles sobre las
mejores prácticas para dar eso
utiliza el mejor viaje
de navegación. En esta clase, nos vamos a
centrar en usar animaciones y efectos de desplazamiento en
la plataforma Editor X. Esta es una plataforma intuitiva, muy bien diseñada para ayudar
a usos como ustedes mismos a construir sitios web
en un manera muy fácil de usar. Este sitio web en particular que
ves frente ti es un ejemplo que
vamos a usar, que fue en mi primera clase de carrera de
edición. Entonces si no te has registrado
o te unes a esa, te
exhorto a que hagas para
que me puedas seguir medida que pasamos por esta clase
en particular. Esta clase
vamos a mirar usando paralaje, revelar características, diferentes
técnicas de animación y dónde
colocarlos y cómo hacerlo usando el sistema intuitivo que tiene ingenio publicado,
que es Editor X. Lo que espera. Realmente espero que te unas a mí en esta clase y
espero verte ahí. Y como siempre, si
hay alguna pregunta,
una vez que te hayas unido, siéntete libre de
ponerlas en el área de discusión y me
aseguraré de volver contigo.
2. Cómo hacer un sitio web más inmerso: Entonces cuando se trata de hacer
un sitio web inmersivo, uno de los
atractivos clave para el espectador o el usuario es lo
inmersivo que es el sitio web. ¿ Permite que el usuario
se sienta transportado al producto o al servicio
que está ofreciendo. Y una de las formas en que a menudo
podemos hacer que el sitio web se vea más inmersivo es incluyendo
muchas imágenes, videos, agregando efectos, animaciones, desplazando animaciones
al sitio web que realmente ayudar a amplificar
esa experiencia para el usuario.
3. Comienza con la imagen de aterrizaje de el héroe: Entonces lo que vamos a hacer es
recoger desde donde lo dejamos. Entonces si aún no
has visto mi primera clase en crear este sitio web de la
empresa de turistas de naturaleza. Te sugiero que empieces ahí
y luego únete a nosotros aquí donde vamos
a estar un poco más avanzados y añadir algunas animaciones
bonitas, efectos de
desplazamiento, que realmente hacen que el sitio web
pop y destaque.
4. Razones para efectos y animaciones: Siempre se puede pensar esta clase como un complemento
para la anterior, donde vamos a cambiar
la configuración de las imágenes y textos que tenemos aquí para intentar
hacerla más inmersiva, utilizando las
funciones avanzadas que Editor X tiene para intentar hacer que la experiencia sea
más inmersiva. Una de las primeras cosas que
vamos a hacer es mirar hacer
esta imagen de héroe, que es la imagen de la landing
page más inmersiva y tener algún desplazamiento de
paralaje. desplazamiento por paralaje
significa esencialmente que este contenedor, que tiene la imagen
en él, se convierte una ventana y la imagen
se coloca detrás de eso. Así que cuando se desplaza, puede hacer que la
imagen se mueva hacia arriba y hacia abajo en relación con el movimiento de desplazamiento
del ratón.
5. Añadir efectos y animaciones: Una de las cosas obvias que
podemos hacer es cuando hacemos click en esta área de imagen y
aseguramos que las imágenes seleccionadas, podemos entrar en la pestaña de
animación. Ahora esta pestaña de animación
tendrá varias animaciones
para elegir. Y si pasas el cursor sobre cada uno, verás cómo da una bonita vista previa de cómo
podría parecer. Ahora, esto es obviamente animaciones
muy básicas y pueden servir a un
propósito en la página web. Pero no me siento como
una imagen de héroe de aterrizaje, tienen más sentido. Una de las cosas que
vamos a hacer es abrir la columna del inspector y podemos dirigirnos
a algunas de las propiedades de aquí. Ahora, en primer lugar,
queremos asegurarnos de que la imagen en sí fluida y esté dentro de este contenedor,
que obviamente lo es. Y puedes decir eso
mirando la caja azul debajo del menú de Configuración Rápida donde
dice sección e imagen. Eso significa que la imagen se
coloca dentro de este contenedor. En el lado derecho aquí, verá diferentes
opciones que tenemos. Es posible que deseemos
elegir la capacidad hacer que se
baje un poco. Eso será útil para que
el título de la
página web sea más prominente. Es posible que desee
elegir un fondo, por lo que el fondo
será una superposición. Pero queremos hacer es que
mencioné antes es agregar algunos
efectos de desplazamiento a esta imagen principal. Para ello, vamos en configuraciones. Tales cosas
abrirán una caja emergente. Podemos mover esto
por ahí si quieres. Aquí tienes la opción de
ajustar la configuración de la imagen, como el degradado, el matiz, el brillo, el
contraste, etc. Pero también tenemos
aquí la opción de tener comportamiento de desplazamiento. Ahora arruinar el comportamiento es en lo que
nos vamos a centrar. Aquí tienes dos opciones, tu paralaje y
has revelado. Si hacemos clic en paralaje, verá cómo la imagen ahora tiene una perspectiva diferente. Eso se debe a que Wix
entiende automáticamente cuán grande
es la imagen y la cantidad de
movimiento que puede ocurrir a través de la imagen
mientras se mantiene en resolución. Ahora hemos hecho clic en paralaje. Demos clic en la vista previa y
veamos cómo se ve eso. Ahora si me desplaza hacia abajo, verás cómo
la imagen se mueve casi lentamente detrás del
texto mientras te desplaza hacia abajo. Esto hace una experiencia
inmersiva realmente genial para el usuario. Y casi
lo convierte en un efecto 3D. Ahora, de verdad me gusta esto. Y una de las cosas que
podemos hacer es que sé antes
mencionamos de
tener animaciones que pueden parecer un poco aburridas. Vamos a añadir un fade in. Entonces si hacemos clic en fade-in y vamos a personalizarlo. Ahora queremos que sea
realmente rápido y ágil. Entonces en lugar de
ser 1.2 segundos, vamos a bajar esto a
alrededor de Cinco de segundo. También podemos optar por
tener un retraso, pero vamos a
mantener eso como es
porque queremos que se cargue
al instante. Ahora vamos a probarlo. Ve esa
animación muy rápida al estilo. Eso es exactamente lo que buscamos. Eso es solo un ejemplo
de usar paralaje. El otro ejemplo que tenemos
es la característica reveladora. Ahora, personalmente me
gustó mucho la función de revelar porque te permite tener una imagen casi
se ve estática, sobre todo si hay diferentes superposiciones que
quieres poner encima
de esa imagen. Entonces hagamos una nueva sección y tengamos un ejemplo y
veamos cómo se ve eso. Si bajamos aquí y
abrimos una nueva sección. Así que agreguemos aquí una nueva sección, sección
en blanco. Y vamos a
añadir una especie de algunos elementos aquí. Podemos llegar rápidamente a
la herramienta de composición. Esto nos da algunos bonitos presets. Siempre podemos usar uno de esos, o simplemente podemos ir a un rápido agregado e importar nuestras propias
cosas ahí. Primero lo primero, vamos a añadir en un diseño que es una cuadrícula. Por lo que esto nos ayuda a
compartimentalizar sección. Así que de nuevo, cubrí todo
esto en mi video anterior. Así que asegúrate de volver
ahí si quieres aprender más sobre cómo funcionan todas
estas funciones, pondré un link En
la descripción de esta clase si
quieres ir que vamos a poner en una cuadrícula. Entonces pongamos
aquí una rejilla y estiremos esto es que cubre
toda el área de la sección. Ahora de un lado
vamos a tener texto del otro lado
vamos a tener una imagen. Ahora, puedes usar
funciones reveladoras como una forma
de contar una historia. Entonces, por ejemplo, si
queríamos reutilizar una de estas
imágenes desde aquí abajo. Entonces, por ejemplo, podríamos
usar el Reino Unido. Lo que vamos a
hacer es contar una historia sobre el Reino Unido. Por lo que tal vez queremos
mantener mencionados los
países o lo lamentamos, las ciudades o condados o diferentes puntos de interés de los turistas en el
Reino Unido. Esa será una, una historia que contar. En el lado izquierdo,
vamos a sumar algún texto. Podemos hacerlo directamente aquí. O si tiene algún activo
que haya cargado previamente, puede traerlos desde
la carpeta de
activos guardados aquí. Para esto, sólo vamos
a traer una cabecera. Entonces vamos a arrastrar y soltar esto aquí y asegurarnos de que
esto esté centrado. Puedes hacerlo usando
los Ajustes Rápidos aquí. Así que asegúrate de que esté en el centro. Y justo en el
medio. Ahí vamos. Llamemos a esto Reino Unido. Y ese texto es bastante grande. Entonces vamos a bajar esto a 70. Y estirarlo también
para que vaya en una línea. Y luego asegúrate de nuevo
que esté bien centrado. Eso es uno. Podemos elegir
el fondo para que obviamente
podamos hacer de
este cualquier color que
queramos . Teniendo en cuenta. Vamos a tener una imagen
en el lado derecho, por lo que cubrirá donde sea el
fondo que elijamos. Podemos elegir por ahora solo un
bonito fondo blanco en blanco. Y por el lado derecho, ahora vamos a
incluir algunos lanzamientos. Si nos dirigimos a
la sección Medios, tendremos algunos ejemplos
de imágenes que ya tenemos. Así que vamos aquí. Y obviamente estas
imágenes para reflejar Londres. Pero con Wix, si sí tienes la capacidad de
buscar cualquier tipo de imágenes. Entonces si solo escribimos
en Reino Unido, no sale nada
que aprenda a aguantar. Probemos Unsplash. Aquí vamos. Usaremos algunas
de estas imágenes de chicos. Unsplash o gratis imágenes de alta
resolución que
puedes usar en tu sitio web
para relativamente, vamos a usar esta imagen aquí. Así que agreguemos estas dos páginas y luego llevemos esto
al lado derecho. Y verás aparecer esta caja. Esto significa que lo vamos a
adjuntar a esta sección. Si pinchamos aquí y estiramos, eso ahora llenará el
lado derecho de la zona. Genial, eso se ve bastante bonito. Pero lo que dijimos que queríamos
hacer fue contar una historia. Lo que vamos a hacer
ahora es que vamos a copiar y pegar
esta sección de cuadrícula. Es sólo una copia y pega. Entonces ese es un control
C y V en Windows, o Comando C y V en Mac. Lo que tenemos aquí son ahora dos de las mismas secciones exactas. Lo que vamos a hacer aquí
es quizás mencionado Londres como nuestra primera ubicación. Ponga esto un
poco más alto y vamos a
añadir un poco más de texto. Esto sólo puede ser
algún texto de párrafo. Ahora esto puede ser cualquier cosa. No me voy a volver demasiado
loco en este tutorial, pero obviamente puedes elegir
lo que quieras incluir. Alambres tan pequeños. Nuevamente, sólo un ejemplo. Londres es la capital
del Reino Unido que alberga algunos de los sitios históricos
y arquitectura más
singulares del país . Ahora, lo que podemos hacer es establecer alguna animación para esta sección. Así que haz clic con el botón derecho aquí
y
vamos a ir a la configuración y
vamos a elegir Reveal. Ahora es importante aquí
porque hemos hecho clic en revelar. Podemos hacer que el
siguiente también tengamos revelan. Lo que podemos escuchar ahora
es lo que revela hace es que pone la imagen detrás la ventana cuando se está
desplazando más allá de ella, la ilusión es que el texto
izquierdo se mueve mientras la imagen correcta permanece. Entonces vamos a darle un adelanto a esto.
Mira cómo se ve ahí. Lo que se hace es que se le da la ilusión de que la imagen está atascada y estacionaria mientras el texto de
la izquierda se mueve. Si voy a la sección, probablemente
se dio cuenta de que había algún tipo de
línea blanca pasando entre sí. Eso es porque le dimos la sección de
color de fondo del blanco. Podemos cambiar eso
y podemos hacer que no tengan color de fondo. Siempre podemos ir nada 0. Y eso debería
deshacerse de la parte inferior. Y luego hagamos
el top también. Lo siento, la imagen, la
opacidad de la imagen está ahí. Hagamos que
no tenga imagen de fondo. Y lo mismo va a éste. Por lo que ahora son ambos
Antecedentes menos Ahí vamos. De esa manera se obtiene la ilusión de este sitio en particular
teniendo una imagen detrás de él. Ahora bien, esta es una característica realmente
única que muchos sitios web en estos
días están incorporando. Porque como se puede imaginar, a veces es agradable
tener una historia contada. Antes teníamos estas funciones
donde teníamos efectos de hover, donde el color cambia
en base a movimientos de hovering, donde ahora tenemos la capacidad de
pasar por diferentes secciones ya que tienes la opción aquí
para ir tan profundo como quieras. Por lo que quieras. Hay dos de los paralaje
principal y revelan
animaciones de desplazamiento que realmente
pueden hacer que un
sitio web se vea genial. Otra cosa que les gusta hacer a
las empresas o a los sitios web les gusta tener
es el desplazamiento de Azure. Diferentes animaciones entran
en diferentes momentos. Si nos dirigimos
a una página en blanco. Entonces en este caso particular,
estamos usando ubicaciones. Y reutilicemos la misma
sección con Londres ahí dentro. Entonces ve aquí y nos vamos a centrar
en el Reino Unido. Ahora lo que vamos a
hacer es a medida que agregamos una sección y la gente se desplaza
por este sitio web. Ver diferentes animaciones
aparecen mientras se desplazan. Una de las formas en que podemos hacer eso es agregar otra sección. Aquí vamos.
Hagámoslo una rejilla de dos por dos. Esto nos está
permitiendo de nuevo tener diferentes elementos o activos diferentes
en diferentes bandos. Y vamos a añadir en un pre
hecho una composición. ¿ Qué tal si usamos, vamos a usar algo un
poco más interesante. Vamos a usar este aquí.
En este momento tenemos muy agradable, digo imagen precreada. Vamos a reemplazar
esta imagen
trasera algo un poco
más interesante. Vamos a ponernos a una persona trabajando, caminando por un bosque. Obviamente bosque existente
en el Reino Unido también. Entonces no estamos muy lejos. Prevemos esto rápidamente. Verás cómo esto se
sienta muy bien aquí y obviamente
comenzó a cambiar el texto. Pero una de las
cosas que podemos hacer es agregar algunas animaciones a esto. Así que como estás desplazando el
pop-up, vamos a duplicar esto. Copia y pega que
tengamos dos de ellos. Y vamos a cambiar
esta imagen a otra cosa. Entonces sólo por el bien de ello, vamos a usar
esta imagen de playa. Por lo que ahora tenemos dos imágenes
separadas. Lo que podemos hacer es
cambiar el punto focal. Por lo que en este momento
lo puedes ver estamos empezando aquí. A lo mejor queremos
usar más de esta esquina
inferior derecha
con las conchas. Eso es como una cosa que
podríamos hacer es agregar animaciones. Animaciones como esta se ven bastante bonitas si fluyen o se desvanecen. Siempre me gusta
flotar en función porque hace que parezca. Es una animación de
experiencia de desplazamiento más intuitiva. Por lo que tomamos el flotador y
sólo animamos la primera vez. Eso es bastante importante porque
lo último que queremos es cada vez que alguien carga
la página constantemente anima, puede volverse bastante
molesto después de un tiempo. Voy a golpear
vienen de la izquierda. Por lo que preferimos la animación. Eso se ve bien. Podemos hacer lo mismo
aquí. Pero lo que vamos a hacer es mover esta
caja a la izquierda. De esa manera tenemos un poco de
diferencia a través de los dos. Vamos a hacer lo mismo aquí, pero esta vez vamos a hacer que se anime desde la derecha. Flotar en, personalizar
animate desde la derecha. Ahora si previsualizamos esto, verás cómo la
animación solo llega cuando llegues
a la ventana gráfica. Nuevamente, un toque realmente agradable. Esto se puede hacer por cualquier
cosa en Wix, cualquier elemento o activo
que traigas, puedes agregarle animaciones. Entonces solo por ejemplo, vamos a poner
algunas decoraciones aquí. Podemos poner en una bonita imagen
grande aquí. Vamos a poner
algún texto aquí, que va a decir, va a decir un 50% de descuento
en venta o algo así. 50% libro por quinto 2022. Este es un ejemplo que
tenemos aquí. Vamos a poner esto en el lugar
centro en contenedor. Entonces esa es una cosa
que hice que cambio y sostengo ambos, que se coloca
en el contenedor. Ahora eso significa que se puede ver la forma básica y
ponerla ahí. Copia esto, agrupa los juntos. Y vamos a
editar rápidamente este texto para que se vea un poco
mejor que lo que hace. Por lo que el 50% del libro para el
quinto de diciembre. Ahora hagamos que este
texto sea blanco porque todos
sabemos que el blanco
se ve mejor en gris. Beneficio. Lo que queremos hacer es querer animar también a
este grupo. Para que podamos hacer animación. Haga clic en fluir o expandir. Volando tal vez. Nuevamente, animaciones
geniales aquí. Hagamos fluir de nuevo. Agradable, Eso es bastante profesional. En realidad podemos hacer que
la longitud de la misma sea un poco más corta. No
hemos llegado demasiado tarde. Déjame volver a
animar 0.8 la primera vez. Si empezamos eso otra vez. Mira cómo viene en
agradable y despacio. Nuevamente, animaciones y
se pueden añadir botones, estos pueden ir a
formularios de contacto y cosas así. Entonces consiguieron cosas realmente útiles. Y esta es una
cosas pequeñas que puedes usar un add para mejorar tu experiencia en tu
sitio web.
6. ¡Y es un WRAP!: Así que realmente espero que hayas encontrado útil
esta clase muy corta. No quise
hacerlo demasiado largo. Planeo hacer una serie de videos de
clase de diez a 15 minutos cada
semana los cuales se centran en
temas específicos usando
el Editor X. El primero fue
alrededor de una hora y media porque quería presentar el plataforma
a usted como nuevo usuario. Y esta vez se trataba enfocarse solo en los efectos de animación, desplazamiento y paralaje. El siguiente que vamos a hacer
es sobre la gestión de contenidos. Así que ten cuenta esa próxima clase donde
vamos a crear esencialmente una
base de datos de gestión de contenidos llena de imágenes que puedan
colocarse en páginas dinámicas. Entonces una vez que esa base de datos
obtiene imágenes, automáticamente
se agrega a ciertas páginas y páginas dinámicas, lo cual puede ser muy útil, sobre todo para los usuarios que
buscan crear tiendas o e- sitios web de comercio donde como nuevas imágenes vienen
a través de anuncios o dispositivos o
servicios personalizados, ¿qué tienes? Puedes simplemente cambiar una base de datos y se
envía a otras partes del sitio web sin tener el tedioso proceso
de agregar imágenes constantemente a diferentes páginas y perderte en
perder el tiempo haciendo eso. Así que definitivamente mira hacia fuera
para ese próximo video. Y si tiene alguna
otra pregunta, por favor déjelas en
el apartado de preguntas. Y te agradeceré
si pudieras revisar este y el video anterior si ya los
has visto. Y espero
verte en una clase en el futuro.
Saad Bhatty, GeoTiktoker and UX/UI Designer
