Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Add a flex-layout.row
inside of footer-layout.desktop
:white_check_mark: Add flex-layout.col#footer-left-desktop
inside of flex-layout.row#footer-1-desktop
:white_check_mark: Add flex-layout.col#footer-right-desktop
inside of flex-layout.row#footer-1-desktop
:white_check_mark: accepted-payment-methods
inside of flex-layout.col#footer-left-desktop
:white_check_mark: props of accepted-payment-methods
are properly configured
:white_check_mark: social-networks
inside of flex-layout.col#footer-right-desktop
:white_check_mark: props of social-networks
are properly configured
Pie de Página
:sparkles: Branch: footer
Introducción
En este paso, vamos a aprender cómo crear un componente que comúnmente se considera poco importante, pero que es fundamental para dar al usuario una buena experiencia: el footer.
Pocos usuarios se desplazan hasta el footer. Sin embargo, esa parte que llega puede estar buscando información que normalmente se encuentra en este bloque, como enlaces a medios sociales y medios de pago aceptados por la tienda. También puede contener páginas personalizadas que dirigen al sitio de oportunidades laborales de la empresa, soporte al cliente y menús de categorías.
FOTO Footer
Configurando el Footer
El bloque de Footer, al igual que el bloque de Header, es responsivo. Esto significa que puede configurarse para que se adapte a diferentes dispositivos, como desktop y mobile.
A continuación, podemos ver un ejemplo de implementación de Footer para desktop:
Actividad
Ahora, vamos a configurar un footer para la página inicial de su tienda, teniendo en cuenta el código de ejemplo presentado anteriormente para desktop y mobile.
No vamos a implementar el menú en esta actividad, porque ya fue visto en el contexto de Header. Cubriremos los casos de medios de pago aceptados y redes sociales de la tienda.
footer.jsonc
, copie el código anterior para utilizarlo en su tema.Basado en el bloque anterior, construya el
flex-layout.col#footer-left-desktop
con el siguiente children:accepted-payment-methods
.Ahora construya el bloque
accepted-payment-methods
con los siguientes medios de pago:MasterCard
,Visa
yDiners Club
. Solo para mostrar un poco más de conocimiento, descubra también cómo mostrar los medios de pago en colores en esta documentación.En el próximo paso vamos a usar el bloque
social-networks
para mostrar las redes sociales de nuestra tienda. Consulte en la documentación cómo hacer esto. E implemente como children del bloqueflex-layout.col#footer-right-desktop
. Queremos mostrarFacebook
,Instagram
yTwitter
.Ahora, haga que los logos de las redes sociales aparezcan con colores, como lo menciona la documentación del footer.
:information_source: Recuerde acceder a la documentación del Footer si tiene alguna duda durante la actividad.
Resultado esperado:
:no_entry_sign: ¿Perdido?
¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? :pray:
Crear feedback
Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.