Transcripciones
1. Introducción: Hola a todos, y bienvenidos
a este nuevo curso sobre landing
page de
aprendizaje está diseñado con técnicas adecuadas de
optimización SEO. Ha sido un sueño
mío crear este curso definitivo para cualquiera que quiera
trabajar con el
lado comercial del diseño. Aquí estamos. Estoy con la esperanza de que este curso pueda literalmente
cambiar tu vida. Entonces, ¿qué es esto, qué
vamos a aprender aquí? Entonces, el diseño web es en realidad
una combinación de dos
conjuntos de habilidades o industrias diferentes. Una de ellas es el diseño gráfico. Cómo usar el diseño, las formas, el texto y las imágenes para
transmitir un mensaje. Y el otro es la web. Cómo interactúan las personas en la
web, qué experiencias de los usuarios y cómo desarrollas
tus ideas
de tráfico para que
funcionen en el navegador. Entonces todas estas cosas son cosas que vamos a
cubrir en este curso. Puede esperar aprender los fundamentos de
las páginas
de destino, donde las cosas adicionales como topografía, el uso de colores, el uso de diseños y el uso de imágenes, y otros técnicas de mercadotecnia como escasez,
autenticidad, credibilidad. También vamos a hablar sobre todas las habilidades web
desde la experiencia del usuario, punto de vista del diseño de la
interfaz y todo
funciona realmente en la web. En este curso, vamos a ver cómo ganar dinero con
esta habilidad. Cómo puedes tomar proyectos y hacerlos
realmente para los clientes. Y, y dinero al convertir un NADH simple y dos
planeaciones convergentes enfocadas, que si estás planeando para comercialización y publicidad de
tu sitio web, tu producto o servicio en línea,
entonces obtendrás resultados mucho mejores enviando tu tráfico a una página de destino
dedicada. Y para eso, no necesitas ningún conocimiento previo
de derechos de autor. También, habilidades amarillas. Todo lo
que necesitas es seguir estas sencillas instrucciones que voy a cubrir
en este curso. Ahora, ¿quién soy yo? Si no estás familiarizado con,
Mi nombre es Jay casco de pelo. Soy diseñador UX, teniendo experiencia de
más de cinco años. En este punto,
había estado trabajando como diseñador Senior UX con una compañía multinacional
durante todo este tiempo, he ayudado a cientos de propietarios de pequeñas empresas, agencias de
diseño, startups empresas y
diferentes casas de software para obtener una mejor conversión de leads
a sus sitios web. Analice personalmente los periodos de final de
cola con análisis
competitivo y
guíelos en cómo pueden mejorar sus landing
pages para que obtengan calidad y generen más leads al caer las técnicas de
CRO. He compartido mis
técnicas y consejos de SEO con diferentes empresas,
emprendedores. Y están bastante
satisfechos con estas técnicas y han generado más hojas en
comparación con las páginas de destino
anteriores. Y ahora me
entusiasma enseñarles a ustedes estos marketings
y técnicas y consejos en mi nueva
landing page Curso. Este curso está diseñado de tal
manera que incluso un principiante
que no conoce el diseño web y es
nuevo en el diseño web, puede entender y
utilizar fácilmente técnicas en
su diseño artístico. Y esto es lo
que vamos a cubrir sobre esto, en este curso. Ahora bien, ¿por qué debería importarte? ¿Por qué deberías querer
convertirte en diseñador de UX? Como he dicho, esta es
una habilidad muy valiosa en el mercado hoy y también
en el futuro. Los sitios web no van a ninguna parte. No importa que la mayoría de la gente esté
en sus móviles. Siguen
visitando sitios web, siguen haciendo
compras en línea. Por eso voy a cubrir las
técnicas de venta de marketing en nuestro diseño web o landing page. Entonces eso
es más o menos para esta conferencia. Los veo en
la próxima conferencia.
2. Uso de los archivos de ejercicio: En este video, te voy a mostrar cómo
puedes comenzar
con peleas de ejercicios. Los expedientes de ejercicio este curso se incluyen
con esta conferencia. El archivo de ejercicio que subí
contiene un archivo Figma. Contiene todos los activos
utilizados en este curso. Por favor, descargue este archivo para que podamos continuar nuestro viaje
creando una página de aterrizaje de zapatos con técnicas CRO en Figma. Este archivo de ejercicio que
subí no
contiene afecta a mi archivo, así sucesivamente que solo me
siguen
a través de este curso. Entonces ustedes saben cómo pueden crear su propio proyecto Figma. Eso es todo por este video. Los veo chicos en el siguiente video.
3. ¿Qué son las páginas de destino, incluida mi opinión personal?: Bien, entonces hay muchos tipos diferentes
de páginas
de Nanak allá
arriba en Internet. Hay muchos
tipos diferentes de plantillas para páginas. Pero hoy, voy a guiarte
a través cuatro tipos muy comunes de plantillas y landing
pages en línea. que puedas aprender un
poco más sobre específicamente cómo necesitas
configurarlos para que puedas
tener el mayor impacto
en las conversiones micro y macro
y hacer crecer tu negocio en línea. ¿Bien? Entonces, la primera de la que quiero hablar es la landing page. Entonces, si no estás familiarizado
con la landing page, es la página principal de
tu sitio donde quieres que gente entre y
quieres que se conviertan. Probablemente estés usando esto para optimización de motores de
búsqueda y una gran cantidad de medios pagados
en muchas páginas. Se construyen específicamente para
medios de pago. Pero si lo haces bien, puedes usar la misma página
para clasificar dentro de Google. Y usarás la misma
página para medios pagados. Y puedes apuntar a
las mismas palabras clave, y puedes apuntar a la misma
audiencia en esas páginas. Entonces específicamente,
¿cómo quieres configurar tu landing page para que
obtengas los mejores resultados? Entonces, lo primero que
quieres hacer es tener un titular poderoso y un par de
viñetas o algún texto. Y cuando piensas en eso, quieres pensar en
la prueba de siete segundos. Entonces dentro de los siete segundos, si alguien viene
específicamente a esa zona, ¿saben quién eres? ¿Conocen el
problema que resuelves? Debido a conocer tus
diferenciadores clave. Y ¿tienen certeza
suficiente de que
quieren hacer clic en el botón de
Contacto? Ellos quieren llegar a ti. También dentro de la parte superior
de la página de aprendizaje. Seguramente una buena idea tener una imagen poderosa que se alinee específicamente
con ese demográfico. Quieres probar cosas
diferentes. Entonces una imagen es genial
si se alinea con el demográfico y lo
que estás tratando de vender. Además de eso, también
puedes probar testimonios. Puedes probar curso. Hay muchos tipos
diferentes de cosas que podríamos querer poner ahí dependiendo del
tipo de negocio que tengas. Entonces tienes el titular, la prueba de siete segundos. Has captado algún
tipo de imaginería que le habla específicamente
a esa persona. Y en muchos casos, vas a poder
obtener una conversión correcta. Ahora. Por otra cosa que
voy a mencionar es este llamado a la acción es
súper, súper importante. Entonces probar el color de eso, probar ese texto que tienes, sus micrófonos son realmente,
realmente una gran diferencia. Entonces los comunes son aprender más. Prueba de contacto. Ahora, empieza,
consigue una propuesta gratis. Llámanos. Hay que pensar todas las diferentes formas en
las que la gente querría llegar. Y tendrías que
pensar en el nivel de compromiso que
tienen en ese momento. Entonces, si es solo para aprender más, mucho
menos compromiso que contactarnos. Entonces quieres pensar sabiduría está en el viaje y
probar diferentes mensajes, además de probar diferentes
colores allí también. A mucha gente le encanta
el gran botón naranja. Botón de oink de cerdo es fantástico, pero en realidad no
importa tanto el color, tanto
como cómo encaja
dentro de la página, ¿verdad? Entonces, con cualquier página web dada, nunca
querrás tener
demasiado ocupado o combinación de colores. Hay algo muy, muy
importante. Quieres que el
llamado a la acción principal sea lo
más brillante de la página. Ahí va a ir el
ojo. Y verás
que si instalas cosas como heatmaps
llamados Content Analytics, entonces eso llama la
mayor atención. Entonces a medida que te mueves más
abajo en la página, quieres pensar en, bueno ,
bien, Así que aquí arriba, le
di mi mejor lanzamiento de
ascensor, ojo
derecho a la segunda prueba de
salmón, hice un buen trabajo, pero
no los vendió completamente. Entonces, ¿qué vas a hacer a continuación? Bueno, esta es una persona que
necesita más información. Entonces, en lo que quieres pensar es,
a medida que vayas más
abajo en la página, ¿cuáles son los
módulos principales que
van a hacer que esta
persona se convierta? Muchas veces son
cosas como credibilidad. Entonces, ¿ha aparecido
en las principales industrias, publicaciones o publicaciones
nacionales? Es testimonios. Tienes testimonios de tus clientes específicos que aportan ese nivel de credibilidad. Si las CPU tienes
1,000 reseñas, ya sabes, para confiar en piloto o
algo así, donde traes y puedes mostrar ese nivel de credibilidad. ¿Son preguntas frecuentes donde respondes preguntas
específicas
que
tendría esta persona para que el torque T. Y vaya a tratar de averiguarlo en
otras páginas de su sitio web. Me encanta poner preguntas frecuentes. ¿Es entrada de blog? ¿Se trata de premios, ya sabes, cosas que refuerzan
esa credibilidad? Y tú como experto en la
materia o tu negocio como experto en la
materia, que ellos quieran convertir. ¿Es inversión de riesgo? Si no estás familiarizado con el concepto de inversión de riesgo, es esa idea que
si ya, ya sabes, has comprado una garantía de devolución de dinero de
30 días. La inversión del riesgo
es enorme para lograr gente se comprometa
porque
hace que corten por completo la barrera entrada
para inscribirse en su negocio. Entonces, cuando
pensamos en una landing page, quieres pensar en todos estos diferentes elementos
y estar constantemente probando. te puedo decir cuántas veces la gente
acaba de salir de esta zona. Son iguales por años
y años y años. Piensa en cuánto dinero
podrías ganar con solo deslizar las cosas y
aumentar esa tasa convergente, uno o dos por ciento. Especialmente si estás ejecutando decenas de miles,
cientos de miles, millones en medios de pago
cada mes, un 1% más de cambio. Hay sustancial
en el negocio. Absolutamente sustancial. He compartido mis
técnicas y consejos de SEO con diferentes empresas,
emprendedores. Y son técnicas bastante
satisfechas y han generado más hojas en
comparación con las páginas de destino
anteriores. Ahora, me entusiasma
enseñarles a ustedes estas técnicas de
venta de marketing y consejos en mi landing page. optimización de la tasa de conversión es una de las cosas más divertidas existen cuando ves
que realmente funciona. Bien, entonces
hablamos de landing pages, y obviamente podría profundizar
mucho en eso. Pero para este video, solo
quiero
darte una visión general
de las páginas de la clínica, qué son las landing pages y cómo
te ayudará en tu negocio. Eso es todo por este video. Los veo chicos en el siguiente video.
4. Configuración de cuadrícula para Landing Page: Bienvenidos de nuevo a los alumnos. En este video,
vamos a
configurar pago por nuestra landing page. En primer lugar, crea un marco presionando la
tecla F desde tu teclado. Y en el escritorio.
Desplegable, elija 14, 40 por 1024 marco. Cambie el nombre del marco para
mostrar la página de destino. Ahora en el Inspector de Propiedades, haga clic en esta opción de capa. A partir de aquí. Elija columnas. Después de eso, cambie
la cuenta a 12, su margen lateral a 160 píxeles. Y es crítico para 24. Ahora, presiona Mayús más r desde tu teclado,
trayendo las reglas. Después de eso, agrega una regla a la izquierda y otra a la derecha. También agrega una regla desde la parte superior
con una altura de 80 píxeles, que es el espacio
asignado para nuestro encabezado. Entonces así es como
configuras una cuadrícula para una landing page. Nos
vemos en el siguiente video. Vamos a ver
un resumen de diseño. Y luego
profundiremos en la absolución de la sección
de héroes de nuestra landing page.
5. Encabezado y sección de héroe: En este video,
vamos a poner en marcha la sección de encabezado y héroe
de nuestra landing page. Pero antes de eso, permítame darle una descripción rápida
de Four design brief. Entonces esta es nuestra vista de diseño. Aquí se ve ese
nombre de la compañía, descripción de la compañía, ese diseño de entregables
y la fecha límite del proyecto que
no es entregables. Verás que el
cliente quiere
crear una página de destino, sitio web de zapatos de
fallas. La landing page debe ser una CRO optimizada para que pueda generar más
leads y negocios. Entonces ahora pasemos a nuestro amigo. Aquí vamos a
diseñar el encabezado de nuestra landing page ya que esta
es la landing page. Entonces no voy a diseñar el logo para esta landing page. Sólo estoy poniendo un logo
genérico aquí. Después de eso en el
lado derecho de la barra de navegación, voy a poner un ícono de navegación de doce por 12 círculos con
un ícono de carrito de compras ya que es
una página de destino de comercio electrónico. Esta es la paleta de colores que estamos usando en
nuestra landing page. Y las formas que
vamos a utilizar en este idioma o choques
juegan y hebreo. Ahora hemos diseñado el
encabezado para nuestra página de aprendizaje. Presione la tecla L y agregue una línea
separada debajo de esto, y cambie su color
a rojo también. Ahora bajemos
a nuestra sección de héroes. En el lado izquierdo de
nuestra sección héroe, vamos a escribir
l propuesta de valor con una pequeña descripción
sobre el producto. Después de eso, vamos
a agregar el tamaño y tipo de producto porque
es una página de inicio de zapatos. Ahora vamos a agregar un CTA, que es que deberíamos ser prominentes, así sucesivamente que dibuje un
rectángulo de redondo 295 por 64. Rellenar con su color radial
negro. Cambia el radio
del borde de este rectángulo a cuatro. Después de eso, agrega un ícono de carrito de
compras aquí. Copia ese icono de
los archivos de ejercicio. Ahora, agregue un texto CTA
y el precio del producto. Por lo que tocará la atención del
usuario. No para hacer este
CDM o atractivo, vamos a agregarle una sombra
paralela. Así que simplemente haz clic en este fondo
CTF. Y en el panel Propiedades, haz clic en este paso de efecto y
elige sombra paralela desde aquí. Ahora, en la
sombra paralela las propiedades cambian el eje x a cero, accede a 39 colores
a este color. Y su opacidad al 40
por ciento debería ser 53, y su propagación debería ser -20. Después de eso, vamos
a agregar autenticidad, así sucesivamente que agregue una nota
y parche de pago sesgado, copie la página de
los archivos de ejercicio y
péguela bajo este botón de CTA. Después de eso tuvo un testimonio
bajo esta pestaña de autenticidad. Entonces para agregar un testimonio aquí,
dibujaRectángulo de alrededor de 395
por 70 para que sea redondo. Pero hay que
soportar un radio. Después de eso, agregue un trazo de 0.7 y píxeles
alrededor de esta forma. Ahora en esta forma a la izquierda, agrega estrellas escritas por el usuario. Copia las estrellas de
los archivos de ejercicio y colócala aquí en el centro, derecha, un testimonio genérico a la derecha a tu
lado. La imagen. Ahora alinearlos correctamente
con la cizalla. La columna izquierda está lista. Entonces ahora vamos a
ajustar los espacios de nuestra columna izquierda ya que estamos trabajando con el sistema de cuadrícula de ocho
columnas. Entonces vamos a ajustar
nuestro diseño en consecuencia. Ocho columnas, eso
significa que
estableces el espacio en los
múltiplos de ocho. Digamos que 8162430 a 40. Después de eso. Pasemos al
lado derecho de nuestra sección de héroes. Aquí vamos a sumar
un fuerte que va, que justificará nuestra propuesta de
valor. Del lado derecho para un rectángulo blanco de
alrededor de 614 por 61, pobre. Colócala aquí. Agrega un trazo de este color con el
tamaño de magnitud cinco. Después de eso, trajo tres
labios sobre este círculo, que será un castillo
para nuestro producto. Ahora, agrega otra elipse
dentro de estas vidas blancas. Cambia su color a amarillo. Después de eso, agregue
algunas características sobre este círculo o
rectángulo amarillo de alrededor de 239 por 73. Agrega una visual de calzado con
esta característica encima. Alinear correctamente. Ahora selecciona la herramienta pluma y dibuja una línea curva de
alrededor de 80 por 4%. Y después de eso, cierto, 360 grados de sobrepeso. Ahora coloca la imagen principal
en el círculo CRO. Mostrar imágenes
del archivo de ejercicio. Después de eso, vamos a sumar diferentes ángulos
de esta sesión. Para eso. Dibuja tres rectángulos con
un radio de borde de 16. Voy a cambiar el color
de estos rectángulos. Primero a amarillo a verde y tercero a morado. Después de eso, a las imágenes de los archivos de ejercicio
sobre estos rectángulos. Ahora vamos a agregar
eso a estas imágenes. Entonces para eso trajeron tres
formas debajo de estos zapatos. Las imágenes cambian su color
según sus padres. Y después de eso, manténgalos capa desenfoque propiedad
de alrededor de cuatro. Ahora en el lado izquierdo
y derecho de estas imágenes, agregue dos carruseles. Después de eso, vamos a sumar la credibilidad así sucesivamente que queremos agregar logotipos de diferentes logotipos de
diferentes empresas. Simplemente coloque los logotipos
aquí con el mismo espaciado. Después de eso, dibuja un
rectángulo de alrededor de 11, 20 sobre estos logotipos. Mantenga el color gris rectángulo
de nuestra paleta de colores. Cadena del color del rectángulo a gradiente
lineal de color gris. Ahora selecciona los
rectángulos y el logotipo haciendo clic en este
botón de máscara en la parte superior. Puede presionar Control más
Alt más n desde el teclado. Y así es como diseñas una sección de héroe de una landing page con una preposición de valor
adecuada, un visual claro, un CTA prominente y con la autenticidad
y credibilidad adecuadas. Entonces eso es todo por este video. Los veo en el siguiente video.
6. Sección de Testimonios genéricos: En este video, vamos a diseñar una sección genérica
testimonial, que aumentará la
credibilidad de nuestra landing page. Entonces, antes que nada, agrega un título aquí con un tamaño de 64 píxeles. Y colocar este título sobre
estas ocho columnas internas. Después de eso dibujarRectángulo
de alrededor de 11, 20 por 640 con un
radio de borde de 12 píxeles. En este rectángulo,
vamos a agregar un video testimonial para eso. Simplemente toma la imagen de los archivos de ejercicio y
colócala dentro de este rectángulo. Ahora, simplemente dibuja una
elipse de 124 por 124 sobre este rectángulo y
cambia su color a rojo. Ahora, agrega un ícono de reproducción
sobre esta elipse. Alinear correctamente para que
este botón de reproducción sea más prominente. Simplemente agrega una
capa de opacidad del 24 por ciento sobre esta imagen. Entonces el botón Reproducir
se ve más prominente. Después de eso, vamos a agregar dos testimonios
sobre esta imagen. No dibuje un rectángulo, cambie su radio de borde a 14 y agregue una imagen CR7 sobre él. Después de eso, toma una forma
testimonial de los archivos de ejercicio, colócala aquí y agrega
algo de texto sobre él. Digamos que me veas
desplazando mis 100. Entonces parece un testimonio. Después de eso, agarra la herramienta
pluma y dibuja una línea apuntada hacia o video. Cambia su color a amarillo. Por lo que captará las
atenciones de los usuarios hacia el video. Ahora, basta con tapar este
testimonio anterior y colocarlo en la parte inferior derecha de la imagen y cambiar su color a azul, y también cambiar
su texto también. Por lo que ahora nuestra sección se completa con la técnica adecuada
de optimización SEO. Eso es credibilidad. Eso es todo por este video. Los veo en el siguiente video.
7. Sección de beneficios: En este video,
vamos a trabajar con los beneficios de
nuestra landing page. Porque en las landing pages nos
centramos más en los beneficios en
lugar de en las características. En primer lugar, copia este encabezamiento
anterior, muévelo hacia abajo. El espaciado superior de 160 píxeles. Recuerde que el espaciado entre
secciones es de 160 píxeles y el espaciado dentro los encabezados de
sección y sección es de 80 píxeles. Estos son los estándares que
hemos definido para Atlantic Beach. Después de eso, agrega una imagen en
el lado izquierdo de la sección. Copia la imagen de
los archivos de ejercicios y colócala aquí correctamente. Ahora, agrega dos íconos plus
en estos zapatos de hombre. Estos iconos más
indicarán esa característica
del producto cuando un usuario
haga clic en este icono más. Ahora del lado derecho, vamos a agregar un subtítulo, nuestra descripción. Y SATA. El subtítulo a medio
y su tamaño a 60, y renombrarlo para que se ejecute
como nunca antes. Jane hace prueba de Siria
para ver colección. Ahora vamos a agregar
algunos beneficios aquí. Entonces para eso, dibuja, un rectángulo de
alrededor de 534 por 170, cambia su
radio de borde a 20 píxeles, quita su relleno y dale
un trazo de color rojo. Después de eso, agregue una
línea separadora dentro del barco. Ahora vamos a agregar
dos beneficios aquí. En el lado izquierdo,
vamos a agregar un elemento de beneficio, un título y alguna descripción. Cambia el tamaño del título y la
descripción a 16. Aquí, renombró el
título a ninguna alma. Después de eso, agrega un icono
de alma de 28 por 28 píxeles
dentro de esta elipse. Copie ese icono de
los archivos de ejercicio y colóquelos aquí y
alinéelos correctamente. No solo desechar el icono, título y descripción y
moverlo hacia la derecha y cambiar su icono para mostrar que
podría copiar eso que pueda de los archivos de ejercicio
y colocarlo aquí. Después de entonces renombrar el
título a cuadrícula sólida. Ahora vamos a agregar una CRO, técnica de
optimización
dentro de esta sección. Para la deuda, dibuje un rectángulo
alrededor de cuatro por 92 con un
radio de borde de 12 píxeles. Dale un trazo de
este color gris. Además, agrega una sombra paralela
de este color también. Ahora, dentro de este rectángulo, vamos a agregar una
imagen de usuario y un testimonio. Así que dibuja una elipse
de alrededor de 56 por 56. Después de eso, inserte una
imagen de usuario en esta forma. Entonces para eso, simplemente
copia la imagen de los archivos de ejercicio y simplemente
pegarla dentro de esta forma. Después de eso, toma la herramienta de texto
y agrega algunos testimonios. Ahora para hacerlo más atractivo, solo agrega un ícono de corazón en la
parte superior derecha del rectángulo. Ahora solo selecciona todo este texto con su grupo testimonial. Todos ellos juntos,
renombrarlo a columna derecha. De igual manera, haz
lo mismo con la imagen. Renombrarlo a la columna izquierda. Ahora seleccione ambas
columnas, alinéelas verticalmente al centro y colóquelas con un margen
superior de 80 píxeles. Entonces eso es todo por este video. Los veo chicos en el siguiente video.
8. Toda la nueva interfaz de usuario de la sección técnica: Bienvenidos de nuevo a los alumnos.
En este video, vamos a crear una sección de texto
completamente nueva. Entonces, antes que nada, dibuja un marco de ancho completo con
una altura de 656 píxeles. Llénalo con un
color oscuro de nuestra paleta. Después de eso, de
la sección anterior, copia esa columna derecha sin el beneficio y colócala en el lado izquierdo de la pantalla y cambia su título a una tecnología
completamente nueva. También cambia su descripción, CTA, y su
color testimonial a blanco. Aquí. También reemplace el
icono del corazón por un icono de estrella. Todos estos iconos están
disponibles en el archivo de ejercicio. Después de eso, toma la imagen de los archivos de ejercicio y colócala en el
lado derecho de la pancarta. Como nuestro producto son los zapatos. Así que solo recorta la imagen
y concéntrate en los zapatos. Después de eso. Agrega más iconos sobre estos
zapatos y algunas curvas. Las curvas con una herramienta
pluma y
las mantienen de color blanco
con 50% de capacidad. Por último, dibuja una elipse con
una línea recta sobre ella. Cambia los colores a rojo. Y cambiar esta línea. Y cambiar esta
línea Flecha inferior de las propiedades de trazo. Entonces se verá como
una opción de desplazamiento hacia abajo. Y ahora nuestra
sección de texto está terminada. Eso es todo por este video. Los veo en el siguiente video.
9. Sección de zapatos personalizados: En este video,
vamos a crear, personalizar tu sección de zapatos. En primer lugar, copia
la
sección de columna izquierda anterior y
muévala hacia abajo con un
espaciado de 80 píxeles, cambia el título, descripción. Y en la CTA, a una declaración de credibilidad del
100 por ciento diferente si no se trabajaba en 48 h icono de
afeitado a la izquierda
de esta declaración también. Copia que puedo formar
los archivos de ejercicio y colocarlos aquí correctamente. Después de eso, cambiar ese
testimonio también. Ahora, en el lado derecho, vamos a agregar diferentes
tallas y color de un zapato. Entonces en la parte superior derecha, selecciona tamaño con un
desplegable debajo de él, agrega un rectángulo de
alrededor de 48 por 64, quita su relleno y
dale un trazo de este color oscuro con una opacidad del
diez por ciento. Dale un radio
de borde de alrededor de ocho píxeles. Y para que sea más suave, basta con hacer clic en estos tres puntos y cambiar la
propiedad de suavizado de esquinas al 100 por ciento. Ahora agrega talla aquí. Digamos que agrupe estas dos capas y haga
tres copias de ella y cambie sus
tamaños también. Después de eso, selecciona
la capa de sitio, muévala hacia abajo con un
espaciado de 40 píxeles. Cambie el nombre del texto para seleccionar color. Ahora, solo dibuja una
elipse de 53 por 53. Dentro de esta elipse. Nuevamente, haz una elipse
de 38 por 30 píxeles. Dale un trazo de color blanco. Alinea estas dos
elipses juntas. Ahora haz tres copias de ella
y muévala a la derecha. No cambiarlos por el
color de elipse a algunos colores aleatorios. Después de eso, vamos
a agregar nuestra imagen. Así que simplemente copia la imagen de los archivos de ejercicio y
colócala aquí en el centro. No sólo dejar que la herramienta pluma y hacer un círculo
alrededor del zapato. El zapato. Y David recolor. Después de eso, agrega una elipse
roja de 75 por 75 píxeles con un icono de 360
grados sobre ella. Y colocarlo en el centro. Por lo que un usuario
sabrá que puede ver el zapato en 360 grados
en dos flechas a la derecha y a la
izquierda del zapato, para que el usuario sepa
que puede ser desplazable. Ahora vamos a agregar una técnica de
optimización CRO sobre esta sección. En primer lugar, agrega una
firma de Cristiano Ronaldo sobre el zapato. Después presiona la tecla T y escribe autógrafo exclusivo
CR7
en cada par. El teléfono debe ser 16
claro y con color rojo. Después de eso, agregue aquí un CTA, parches de pago
sesgado. Así que simplemente copia el CDA con páginas de pago
curadas de
la sección héroe y colócalo aquí. Cambiar la orientación de los
berries de pago SQL para alinear el centro. Después de eso, agrega una flecha, copia la flecha de
nuestra segunda sección, copia la flecha de
nuestra segunda sección,
y pegarla aquí y
voltearla horizontalmente. Ahora agregue a los iconos de fiebre aquí, copie los íconos de FIFA de Exercise Files y
colóquelo aquí. Por último, agregue
aquí una capa de texto con un tamaño de 24 píxeles y cámbiela
a nuestros socios oficiales. Por lo que el usuario sabrá que la FIFA es nuestro socio
oficial. El espaciado que estoy usando en nuestra landing page
es de ocho píxeles. Entonces significa que estamos usando
espacios que están en los
múltiplos de ocho. Y ahora se completa una sección. Eso es todo por este video. Los veo en el siguiente video.
10. Nuestra interfaz de usuario de la sección: En este video, vamos a crear nuestra sección de colección. En primer lugar, copia este encabezado
principal de 64 píxeles. Colócala aquí con un
espacio superior de 160 píxeles. Renombrarlo a nuestra colección. Se debe colocar sobre cuatro
columnas. Vivir en columna. Después de esa descripción del anuncio
en las otras siete columnas. Ahora vamos a agregar
algunas categorías aquí. En primer lugar, dibuja un rectángulo
de alrededor de 15 por 60 píxeles. Radio de borde de 12 píxeles. También
suaviza su esquina haciendo clic
en estos tres puntos. Dale un trazo de
este color gris. Ahora plagas que d t
y escriben tendencias, agrega un ícono de entrenamiento también. Todos estos iconos están disponibles
en los archivos de ejercicio. Ahora haz tres copias
de ella y colócala con un espaciado igual y cambia también sus nombres
e íconos. Ahora para hacer esta conferencia estado encadenar el primer
rectángulo de color a rojo, con su texto a blanco, que el usuario sepa que este estado está seleccionado
actualmente. Ahora vamos a agregar
diferentes productos aquí. Entonces, antes que nada, dibuja un rectángulo
de alrededor de 357 a 03:45 píxeles con un
radio de borde de ocho píxeles. También hace que haya ido
suave. 200 por ciento. Cambia su color a
este color gris. Ese huevo y Nike y
un icono favorito a este carrito en una imagen de zapato
en el centro de esta tarjeta. Para agregar, adáptate a esta imagen
para una mejor sombra paralela. Ahora agregue estrellas de lectura de usuario, nombre
del producto, producto, precio antiguo y precio nuevo del producto
de un descuento para crear urgencia en los detalles de la vista del
cliente, CTA en el
lado izquierdo de esta tarjeta, y en el lado derecho en un contador de cantidad y un icono de carrito de compras con fondos gris
oscuro. Ahora para ahorrar nuestro tiempo, vamos a replicar
esta tarjeta y hacer cinco copias de la misma y
colocarlas adecuadamente. Después de eso, vamos a
cambiar las imágenes del producto y color de estas tarjetas para
que se vean diferentes
entre sí. Entonces a partir de aquí, sólo estoy acelerando el proceso
para decirlo todo el tiempo. Y ahora hemos hecho todas nuestras tarjetas y nuestra
sección de colección está terminada. Eso es todo por este video. Los veo en el siguiente video.
11. Sección de testimonio de Instagram: Bienvenidos de nuevo a los alumnos.
En este video, vamos a crear una sección
testimonial
para Instagram. En primer lugar, permítame darle una breve descripción
de los testimonios. Los testimonios son un tipo de prueba
social que indica
al visitante que personas con el mismo dolor o confianza están disfrutando de nuestro
producto. Landing page. Los testimonios son
efectivos por una razón. Me gustan los argumentos de venta. Los testimonios son imparciales, lo que
facilita que
su negocio establezca credibilidad
y aumente confianza en las ofertas de Atlantic Beach. De hecho, estudios muestran que los testimonios
creíbles incrementan la intención de compra en
más de 92 por ciento. Así que saltemos a nuestra
landing page y
empecemos a crear un
testimonio de Instagram. En primer lugar, añadir un encabezamiento. Digamos que en vez de eso nos obsesionamos
debajo de ella en la columna de la izquierda, vamos a crear
nuestra tarjeta de instancia. Entonces para eso, dibuja un rectángulo alrededor de 98 por 640 píxeles. Dame el
radio de esquina de 60 pixeles. Después de eso, en esta tarjeta, agrega una imagen de usuario con un
nombre de usuario y su ubicación. También agrega un carrusel de tres puntos, igual que en Instagram, frente a esta imagen de usuario. Después de eso, agregue una imagen
principal de alrededor de 442 por 386 píxeles con un radio de
esquina de 20 píxeles. Aquí también hizo su
esquina lisa también. Ahora debajo de esta imagen, agrega un comentario Me gusta, comparte y un ícono de marcador. Después de eso, escribe
una línea de texto como Lucas y 903
otros frente a ella. En TU, las imágenes. Después de eso agregar un
testimonio principal destacado con
una fecha debajo del mismo. Ahora nuestra columna izquierda está completa. Pasemos a la
columna derecha de esta sección. En la columna de la derecha, agregue el título
principal y el subtítulo
de un testimonio. Después de eso, en Trust Pilot
parche con estrellas de calificación de usuarios. Con estrellas de calificación de usuario, luego un testimonio de usuario. Después de eso, agregue la firma de un
usuario, parche
certificado de nivel Shu. No entres en pánico. Todas estas cosas están disponibles en
esos archivos de ejercicio. Por último, agregue las
revisiones piloto de prueba en Despacho. Copia la bolsa de Exercise
Files y colócala aquí. Por último, pero no menos importante, solo agrega Agregar al carrito siéntate aquí con páginas de
pago ensartadas. Simplemente copie eso de la sección
anterior y colóquelo aquí en el centro con
un espaciado de 80 píxeles, no alinearlos todos correctamente, y nuestra sesión esté terminada. Eso es todo por este video. Los veo chicos en el siguiente video.
12. Testimonial general con la interfaz de usuario de la sección de bandera de la FIFA: En este video,
vamos a crear un banner de FIFA con sección de
testimonios generales. Entonces primero, dibuja nuestro rectángulo
de alrededor de 11, 20 por 248. Dale a esto el color radial rojo. Después de eso, agregue un encabezado
y alguna descripción. Suma suficiente Cd aquí. Ahora voy a agregar
tres imágenes aquí. Entonces a la izquierda en la Copa FIFA, y a la derecha tenía
futbol con imagen neta. Copie estas imágenes de los archivos de ejercicios y
colóquelas aquí correctamente. Ahora, bajemos y agreguemos un encabezado con un
espaciado superior de 160 píxeles. Renombrarlo a algunas historias
satisfechas. Después de eso, agregue
estrellas de lectura de usuario bajo este rubro. Ahora, dibujemos un
rectángulo de alrededor de 14, 40 por 960 píxeles. Cambia su color a
este color gris claro. Después de eso, vamos a
agregar algunas historias de usuarios aquí. Entonces para eso, dibujar, un rectángulo de alrededor de 358
por ex nueve píxeles. Cambia su color a blanco. También cambia su esquina para suavizar haciendo clic
en estos tres puntos. Ahora, dibuja otro marco. Dentro de este fotograma de alrededor de 333 por 2.4 píxeles con un radio de
borde de seis píxeles. Mientras que el radio
del borde del marco exterior debe ser de 12 píxeles. Por lo que se ve
estéticamente agradable. Aquí. Jane, esta
montura interna de color a gris. Porque vamos a agregar
algunas imágenes aquí debajo de esto, agregue una imagen de usuario, nombre de usuario y una
verificada por nuestro lote. Después de eso en la calificación de los usuarios estrellas y un testimonio debajo de ella. Ahora a la derecha, agrega algunas comas invertidas aquí. Entonces parecía un testimonio. Haga dos copias del mismo y colóquelas con
un espaciado igual. Después de eso, las imágenes y el nombre de
usuario y las imágenes también. Aquí también se suman las flechas izquierda
y derecha, así sucesivamente que dibujan una
elipse de 40 por 40. Cambia su color a blanco y agrega una
flecha izquierda de color rojo sobre él. Ahora haz un duplicado
de ella y muévala a la derecha y cambia su
abstracción para escribir también. Ahora bajo este testimonio, agregue una línea separadora. Entonces voy a mostrar
algunas estadísticas aquí. En primer lugar, dibuje un rectángulo
alrededor de 61 por 224 con un
radio de borde de 12 píxeles. Dale a esto un trazo de
un píxel de color gris. Después de eso, agregue estrellas de calificación de
usuarios y número total
de reseñas en él. Ahora, en el medio, vamos a sumar algunas barras de progreso
porcentuales. Entonces, antes que nada, agrega una capa de texto de cinco estrellas. Delante de ella. Agrega un
rectángulo de alrededor de 402 por 18 con un
radio de borde de cuatro píxeles. Duplicarlo y cambiar
su color a verde, y su ancho debe ser 361. Después de eso, con una etiqueta del 80
por ciento en él. Frente a esta barra de progreso, agregue una capa de 10.5 K X, que fue el número total de usuarios que dan calificación de cinco estrellas. Ahora haz cuatro copias de esta barra de progreso y cambia su color y
etiquetas x también. Por último, en el lado derecho, duplique esta caja izquierda aquí más de
ocho millones de ventas mundiales de
productos por año. Y ustedes dos estas
estrellas también. Cliente, esta
capa de texto correctamente, alinea estas capas de textos
correctamente con este cuadro. Entonces eso es todo por este video. Los veo en el siguiente video, vamos a diseñar
lo que hay en la sección box.
13. ¿Qué obtienes en la interfaz de usuario de la sección de pedido?: Bienvenida de nuevo. En este video,
vamos a crear lo que hay
en la sección box. Entonces, antes que nada, agrega un encabezado con un
espaciado superior de 160 píxeles. Renombrarlo a. Aquí está
lo que hay en la caja. Después de eso, dibuja un
marco de 11, 20 por 891. Dale a esto un trazo de este color rojo y un
color de relleno con 30% de opacidad. En la columna de la izquierda,
vamos a agregar imagen principal y algunas imágenes. Copia las subimágenes de la sección
héroe y pégalas aquí verticalmente y
redimensionarlas en consecuencia. Después de eso, dibuja un marco
hacia arriba alrededor de 4306504, cambia su
radio de borde a 2010, su color a rojo. También hacen que su esquina sea lisa. Después de eso, agrega una imagen principal, copia esa imagen de
los archivos de ejercicio, y colócala aquí y
alinéala correctamente con respecto. Ahora, en la columna de la derecha, vamos a agregar algunos
detalles sobre nuestro producto. En primer lugar, en el nombre de un producto, luego la calificación del usuario, las estrellas, todo el precio y el nuevo precio. Después de eso, agregue seleccione Color
y seleccione Tamaño desplegables. Después de eso, vamos a agregar un
contador de cantidades selectas. Para eso. Dibuja una línea gris, haz un duplicado de ella. Cambia el color de
la línea anterior a rojo. Después de eso, a una elipse
de 14 por 14 píxeles, cambia su color
a gris también. Haz un duplicado de
esta elipse y
muévala hacia la derecha y
cambia su color a rojo. Dale un trazo de un
píxel de color blanco. Aquí. Dale también una sombra de color
negro en su
eje y. Entonces se ve más realista. Aquí también, agrega una capa de texto de
cantidad t con cambios cuando
un usuario cambia, hace contador de litros de cantidad. Ahora vamos a
agregar un CTA aquí. Entonces solo copia el CDF de la sección de
héroes y pégalo aquí. Hágalo de ancho completo. Si mueve el
precio y coloca texto y descarta icono en el
centro de este botón. Bajo este botón,
queremos agregar una entrega rápida y un lote de
nota y seguridad. Copie eso de los
archivos de ejercicio y colóquelo aquí correctamente con
el espaciado adecuado. Después de eso, vamos
a agregar un banner para eso. Dibuja un fotograma de
941 por 188 píxeles. Vamos a golpear con una charla de
espaciamiento de las células ATP. Cambia su radio de esquina a 20 píxeles. Los colores
deben ser leídos. Ahora en la
información de entrega aquí. Entonces cópielo de los archivos de
ejercicio y colóquelo aquí correctamente
con un espaciado igual. Ahora, nuestro peor en la
sección de caja está terminado. Eso es todo por este video. Los veo chicos en el siguiente video. Vamos a diseñar una
sección de preguntas frecuentes para nuestra landing page.
14. Preguntas frecuentes con la interfaz de usuario: Bienvenidos de nuevo a los alumnos.
En este video, vamos a crear una sección de preguntas frecuentes con
sección de pie de página. Primero que nada,
copia el encabezado de la
sección anterior y lo
colocas aquí con el margen
superior en 160 píxeles, que hemos definido anteriormente. Agrega una descripción
delante de este texto. Después de eso,
bajemos y comencemos a
crear preguntas frecuentes. Entonces, antes que nada, dibuja un rectángulo alrededor de 548 por 64 y cambia su
radio de esquina a seis píxeles, dale un trazo de un
píxel de color rojo también. Ahora presiona la tecla T y
escribe la primera pregunta. Digamos daño y
es vamos a dejar en vivo retomar pregunta por qué el cambio es font-weight a medio
y su color a este color oscuro juega una flecha
desplegable delante de él. Copie eso de los archivos de
ejercicio y colóquelo aquí correctamente. Ahora agrupa estas tres capas y haz
siete copias de ellas. Bendícelos con un
espaciado igual de 40 píxeles. Ahora, vamos a cambiar las preguntas aquí ya
que es un proceso largo. Entonces estoy acelerando
el proceso aquí. Ahora se ha completado la sección
de preguntas frecuentes. Pasemos a la última y
última sección de
esta landing page, que es la sección de pie de página. Entonces para eso, dibujemos un
frame de alrededor de 14, 42 por 292. Cambia su color a color negro. Ahora a la izquierda,
agrega un logotipo ficticio, alguna descripción e íconos de redes
sociales. Todos estos están disponibles
en los archivos de ejercicios. Colóquelos aquí.
Propiedad. Ahora presiona la tecla T, Android un encabezado. Y algunos enlaces aquí, alrededor de tres a cuatro enlaces. Agrupa estas tres capas y
duplícalas tres veces. Ahora vamos a renombrar
estas terminaciones de encabezamiento. Entonces a partir de aquí sólo estoy
acelerando el proceso aquí. Después de eso, agrega una imagen de patrón de
zapatos en el centro de esta sesión. Así que simplemente copia eso de
Exercise Files y colóquelo aquí con 8% de opacidad. Por último, dibuja un rectángulo de 14, 40 por 50 para cambiar
su color a rojo. Por último, presione la tecla T
y simplemente escriba los derechos de autor. Y bien, reserva el texto. Alinea el centro con
este rectangular rojo. Ahora nuestras páginas de destino terminadas. Los veo chicos en el siguiente video. Vamos a diseñar
una versión responsive de la landing page.
15. Versión receptiva de la interfaz de usuario: Bienvenidos de nuevo a los alumnos. En este video, vamos a diseñar responsivamente y
ofrecer landing page. En primer lugar, les voy
a contar las reglas para nuestra área de
respuesta. Tomemos un marco de
iPhone Pro Max para que esto sea posible presionando
la tecla F de tu teclado y seleccionamos
este marco de iPhone. Después de eso, vamos a configurar nuestra grilla y los gobernantes
son los responsables. Para esta versión responsive. Vamos a usar
estándares de iOS. En primer lugar, hagamos clic en este marco y hagamos clic en este icono
más en el panel de capas. Después de eso, da click en
estos tres puntos. Y a partir de aquí, elige
columnas de disruptor. La mayoría de ustedes saben que para las versiones
móviles
utilizamos para la cuadrícula de columnas. Entonces, en primer lugar, solo escribe cuatro
columnas en la pestaña Columna. Después de eso en los márgenes. Si no lo sabes, Martin, son estos espacios de
izquierda y derecha. Estos espacios en blanco en su interior
se llaman canalones. ¿Correcto? 20. También puedes
ir por 24 márgenes. Pero por ahora
voy a escribir 20. Y en ese cráter,
golpecito, derecha 16. Pero recuerde, hemos elegido el espaciado de
ocho columnas en la
página web y la página de la extremidad superior. En este trabajo móvil de nuevo, vamos a utilizar
el
espaciado de cuatro píxeles desde cuatro píxeles. Es decir, establecemos el espaciado
en los múltiplos de cuatro. Y el espaciado que
hemos definido para cualquier pH se dividirá por
dos y la versión responsive. Significa que si hemos establecido el
espaciado entre dos secciones, 160 píxeles en versión web, luego en versión móvil, te proporcionará de nuevo a. Entonces estableceremos 80 píxeles espaciado entre
sesiones en el móvil, porque las pantallas móviles son pequeñas y no podemos ver mi
espaciado en el móvil. De lo contrario, el usuario tiene
que desplazarse demasiado para llegar al contenido deseado
y probar no lo que queremos. Ahora, pongamos regla
para nuestro esquema. Así que solo presiona la tecla de acceso rápido
Shift R desde tu teclado. Y de aquí, justo donde están los gobernantes y
los colocan con esta capa. Después de eso, para cabecera vertical, sólo para un rectangular
alrededor de 60 píxeles y colocar una regla en consecuencia. Aquí vamos a colocar
nuestra sección de cabecera. Después de eso, borra
este rectángulo, y comencemos a
crear nuestro encabezado. Entonces, en primer lugar, copia el logotipo, icono del
carrito y el menú. Puedo formar la landing
page y pegarla aquí. Y fijarlos un
poco para que quede bien de
acuerdo a la pantalla del móvil. Después de eso, bajemos
a nuestra sección de héroes aquí. En primer lugar, elige esta columna
de la izquierda de la web y pegarla aquí. Y rosa por sus
tallas también. Y colocarlos con estos
gobernantes de izquierda y derecha. También haga la alineación de la fuente al centro porque es
conveniente para pantallas pequeñas. En la web, se puede ir mínimo
a 60 píxeles o subtexto. Pero en el móvil se puede
ir a, bueno pixeles mínimo. Pero por ahora, apegémonos
a 64 SetText móvil. Después de eso, bajemos. Y aquí en nuestra imagen principal. Copia eso de esa página de destino con todas las cosas a su alrededor y colóquelo aquí y
ajustado de acuerdo a nuestra calificación. Después de eso, copie este desplegable CTA y los detalles del
testimonio y colóquelo aquí correctamente y cambie la alineación para
centrar horizontalmente. Por último, copie estos logotipos de clientes y colóquelos aquí también. Ahora, voy a
la primera sección está terminada. Bajemos hacia
nuestra siguiente sección. Aquí. En primer lugar, agregue un encabezado, así que simplemente copie el encabezado en la página de destino
y cambie su tamaño a bola
48 y colóquelo aquí con
un margen superior de 80 píxeles. Porque recuerden,
para la pantalla móvil, el espacio entre dos
secciones se convierte en la mitad. Digamos que si el espacio
entre dos secciones en rep es 160 píxeles entonces debería ser de
80 píxeles en las pantallas móviles. Después de eso, dibuja un marco
de alrededor de 388 por 340. Cambia su radio de esquina. Dos propósitos. Después de eso, copia la imagen de la landing page y
colócala aquí presionando el control de teclas de acceso rápido
Alt V. Después de eso, copia el botón de reproducción
y testimonial y colócala sobre esta
imagen correctamente. Ahora selecciona estos testimonios
con esta imagen y
agruparlos pulsando
Control G desde tu teclado. Y después de eso, colóquelo con
un espaciado superior o 40 píxeles. Ahora vamos a bajar aquí. Agrega un encabezado. Copia el encabezado en
la landing page, pegarlo aquí y
redimensionarlo a 48, y colóquelo con el
espaciado superior de 80 píxeles. Después de eso, agrega la imagen de usuario, copia esa imagen de la
landing page y
colócala aquí
redimensionándola en el medio. Después de eso, seleccione los detalles de columna
correctos y colóquelos debajo de
esta imagen uno por uno. Pero recuerda
redimensionarlo en consecuencia. Ahora, vamos a bajar aquí. Dibuja un marco de 428 por 945, cambia su color a color negro. Después de eso, antes que nada, agrega esta imagen de columna derecha a este fotograma,
la redimensiona en consecuencia. Ahora debajo de esta imagen, elija los detalles de esta columna izquierda y colóquelos en consecuencia. Recuerda, nuestro rumbo
debe ser 48, descripción tamaño
debe ser 16 luz, CTA debe ser 20 regular. Y dejar el
testimonio cuatro a 16. Ahora vamos a bajar para personalizar
tu sesión de zapatos aquí. En primer lugar, en el encabezamiento de la
sección, descripción, esta columna de la izquierda, y esta columna detalla. Después de ese anuncio Mostrar
imagen redimensionándola hacia abajo. Agrega estos
íconos de 360 grados y el CTA, arbitrario para logotipos,
todas las cosas también. Recuerda, esa cosa
que colocamos en la web se cambiará a
línea central en una vista responsive. Pero no es obligatorio. De todos modos, pasemos
a la siguiente sección, que es nuestra sección de colección. Aquí, agrega título, algunos pasos de categoría de
descripción. Después de eso. Agrega
tarjetas de zapatos verticalmente. Solo agrega tres tarjetas aquí. Solo agrega tres
autos aquí por ahora. Y después de eso, agregue una voluntad
todo CDA después de la tercera tarjeta, que sea
fácil para el usuario ver en lugar de desplazarse por
todo el camino a través de ella. Ahora pasemos a
nuestra siguiente sección, que es la sección
testimonial. Aquí. En primer lugar, añadir un encabezamiento. Después de eso. En esta tarjeta de columna izquierda, encogerla a
alrededor de cuatro columnas. Ahora vamos a
agregar nuestro banner de FIFA, tal como sea posible. Por lo que queremos personalizar esta
sesión no es obligatoria para mostrar todas las cosas de la web en pantallas móviles. Aquí. Simplemente dibuja un
rectángulo alrededor de 36 por 536 y cambia su color
a degradado lineal. Para eso, sólo tienes que seleccionar
este marco de la web. Presione Control Alt Z
y rellene este fotograma en el móvil presionando Control
Alt V. Después de eso, agregue una descripción de encabezado y un CTA verticalmente
con igual espaciado. Por último, copia este ícono de FIFA. Sentémonos aquí y
redimensionémoslo para hacer un cuatro por 241 y alinear su
centro horizontalmente. Ahora agruparlos todos juntos. Pasemos a la
siguiente sección aquí. En el encabezado de la sección, este usuario
califica estrellas y reseñas. Después de eso, vamos
a agregar una tarjeta aquí. Así que simplemente copie la tarjeta
del WebView y
colóquela aquí y cambie su tamaño a cuatro columnas
en la parte superior de esta tarjeta, y
flechas izquierda y derecha en el centro. Lo único que olvidé agregar es el fondo gris claro. Entonces solo agrega un fondo
gris claro detrás de esta tarjeta y flechas. Después de eso. Después de esta tarjeta, vamos a agregar tarjeta de calificación de
usuario y tarjetas de venta total por año. Sólo tienes que copiarlos desde
el WebView y
colocarlos aquí en 2.2 columnas. Ahora bajemos a lo que hay
en la sección box aquí. En primer lugar, agregue
un encabezado de sección. Después de eso en esta
imagen principal sobre estas cuatro columnas. Aquí, agrega estas otras
imágenes de zapatos debajo de esta imagen principal. Ahora elija los detalles de esta columna
correcta y colóquelos aquí en consecuencia. Después de eso, vamos
a personalizar este banner. Entonces, antes que nada, dibuja un
rectángulo alrededor para 23, 44. Aquí en estos envíos
y detalles escritos, la disposición de 2.2 columnas y redimensionarlas
según la pantalla del móvil. Por ejemplo, cambiar estos texto de envío
gratuito a 16 medios y
la descripción a 14 carecía. Después de colocar estos detalles de
envío, primero, la tecla L del teclado y dibujar una línea arriba
alrededor de esta noche, tres, cambia su velocidad a 0.5 píxeles y su color a
blanco, color lineal. Y colóquelo en el
centro de esta columna izquierda y derecha para que pueda
diferenciar entre. Entonces, ¿eres capaz de diferenciar entre estas dos columnas? Ahora bajemos
a la sección de preguntas frecuentes. Aquí en el
nombre de la sección y descripción. Después de eso, elige esta
primera pregunta de la web. Colóquelo en esta
pantalla móvil para columnas. Cambiar el tamaño del texto de la pregunta a 16 medios y cambiar esta posición de
flecha también. Ahora haz seis copias de esto. Primera pregunta. Duplicarlos con un espaciado
de los píxeles entre ellos. No sólo cambiar el texto
de estas preguntas. Ahora, o sección de preguntas frecuentes
está terminada. Pasemos a nuestra última sección de esta
responsabilidad de landing page. Aquí. En primer lugar, dibuja un
rectángulo negro de 14428 a los 74 años. Después de eso, en su descripción
local de alrededor de dos líneas. Después de eso, coloque estos enlaces de
cuatro columnas en el formato de 2.2 columnas
en urgente responsivo. Por último, agrega estos
íconos de redes sociales después de estas cosas. Y aquí, dibuja un rectángulo de
alrededor para 28 por 50 píxeles. Cambia su color a rojo. Y seleccione este, bien, su propio texto, y
pegarlo en este rectángulo rojo. Y alinea tu centro
vertical y horizontalmente. Ahora nuestra página de destino, agente
responsable está terminada. Así es como creas
una landing page con su versión responsive con CRO
adecuado,
técnicas de optimización. Eso es todo por este video. Espero que les resulte
útil este curso y los vea chicos en
otro curso de Figma. Gracias por ver este curso.
Shehar Yar, UI/Ux Designer
