En la segunda clase del curso intermedio de Storefront vamos a ver cómo modificar el CSS de los elementos de nuestra web, sin saber nada de código.
Vamos a lograrlo a través de un plugin que nos detectará cada uno de los elementos de nuestro eCommerce, y nos permitirá modificar sus características principales: Visibilidad, color, tamaño, margin, padding, bordes y demás.
Es una aproximación que no es tan rápida y directa como usar código personalizado en la plantilla a través del archivo style.css, pero más cómoda y rápida si prefieres no tener que programar. ¡Empecemos!
Ya lo veis. La flexibilidad que nos permite este plugin es muy alta, y podemos crear tantos estilos como queramos. Solamente debemos seleccionar el elemento, e indicar que cambios queremos en él.
Además, gracias a la previsualización del personalizador, podemos ver a tiempo real cómo queda en cada momento, algo que hace muy simple las modificaciones.
En esta ocasión, os invito a a realizar las siguientes tareas:
- Modificar el color del título de la web, y aumentar los margenes superior e inferior.
- Cambiar el color de fondo de vuestro site.
- Ocultar la descripción (tagline) de vuestra web.
- Modificar el color de los enlaces, y añadirles subrayado a todos ellos.
- Poner el menú de navegación en negrita y añadir un borde sólido redondeado a 10
¡Y esto es todo por hoy! Espero que esta herramienta os parezca útil y que podáis modificar todo lo necesario en vuestro eCommerce.
Como siempre, si tenéis cualquier duda, podéis mandarla a través del formulario de soporte de la intranet. ¡Nos vemos en la siguiente lección! :)
Todos los capítulos de este curso:
- Curso intermedio de Storefront #1. Instalación
- Curso intermedio de Storefront #2. Modificar CSS
- Curso intermedio de Storefront #3. Layout y checkout
- Curso intermedio de Storefront #4. Encabezado y pie de página
- Curso intermedio de Storefront #5. Homepage
- Curso intermedio de Storefront #6. Página de producto
- Curso intermedio de Storefront #7. Mensajes informativos
- Curso intermedio de Storefront #8. Página de tienda
- Curso intermedio de Storefront #9. Usabilidad móvil
- Curso intermedio de Storefront #10. Detalles finales