La maquetación web es un concepto que va más allá de la estética y tiene un efecto directo tanto en el aspecto final de nuestra web, como en general en la experiencia de usuario, lo cual también repercute en la consecución de nuestros objetivos y el posicionamiento en buscadores. En este webinar con Max Camuñas te mostrará ejemplos e ideas de maquetación web, así como recursos para diseñar de forma creativa menús, cabeceras, contenidos, efectos, y más, con lo que podrás para mejorar tu proyecto.

1. #SGwebinar
@siteground_es
MAQUETACIÓN WEB
Recursos para diseñar una
página web con gancho
siteground.es

2. Ponente
Max Camuñas
@maxcf | maxcf.es
Diseñador Web en WordPress y emprendedor.
Diseño páginas con gancho, que cargan rápido y
están optimizadas para SEO. Amante de la
creatividad, el marketing y los animales.
#SGwebinar
@siteground_es
siteground.es

3. ¿De qué voy a hablar?
#SGwebinar
@siteground_es
siteground.es

4. Recursos de diseño y
maquetación web
● Cabecera / Header
● Maquetar contenido
● Pie de página / Footer
● Estructura web
● Otros recursos
#SGwebinar
@siteground_es
siteground.es

5. Cabecera / Header
#SGwebinar
@siteground_es
siteground.es

6. ● Logo
● Menú
● Botón destacado / CTA
● Buscador
● Avisos / notificaciones
● Otros elementos: idiomas, carrito, login…
● Datos de contacto ？
● Redes sociales ✘
¿Qué debe incluir la cabecera de una
web?
#SGwebinar
@siteground_es
siteground.es

7. #SGwebinar
@siteground_es
siteground.es
Logo + menu + CTA

8. #SGwebinar
@siteground_es
siteground.es
Logo + menu + buscador

9. #SGwebinar
@siteground_es
siteground.es
Logo + menu + contacto + redes sociales

10. #SGwebinar
@siteground_es
siteground.es
Logo + menu + CTA + carrito + buscador

11. #SGwebinar
@siteground_es
siteground.es
Logo + menú hamburguesa

12. #SGwebinar
@siteground_es
siteground.es
Logo + menú hamburguesa + CTA

13. #SGwebinar
@siteground_es
siteground.es
Logo + doble menú + buscador + contacto +
accesos + idiomas + aviso

14. #SGwebinar
@siteground_es
siteground.es
Logo + menú + buscador +
carrito + login + aviso

15. #SGwebinar
@siteground_es
siteground.es
Logo + tagline + doble menú (clásico +
hamburguesa) + aviso con CTA

16. #SGwebinar
@siteground_es
siteground.es
Logo + doble menú (clásico + hamburguesa) +
aviso con CTA y cuenta atrás

17. #SGwebinar
@siteground_es
siteground.es
Logo + menú + aviso grande

18. ● Clásico
● Centrado
● Transparente
● Menú pantalla completa
● Menú vertical
● Superpuesto
Formatos y estilos para el header
#SGwebinar
@siteground_es
siteground.es

19. #SGwebinar
@siteground_es
siteground.es
Clásico

20. #SGwebinar
@siteground_es
siteground.es
Centrado

21. #SGwebinar
@siteground_es
siteground.es
Centrado en línea

22. #SGwebinar
@siteground_es
siteground.es
Transparente

23. #SGwebinar
@siteground_es
siteground.es
Pantalla completa

24. #SGwebinar
@siteground_es
siteground.es
Vertical

25. #SGwebinar
@siteground_es
siteground.es
Superpuesto

26. Recursos para maquetar
contenido web
+ EJEMPLOS
#SGwebinar
@siteground_es
siteground.es

27. ● Divi
● Elementor
● Thrive Architect (Thrive Content Builder)
● Visual Composer / WPBakery Page Builder
● Page Builder by SiteOrigin
● Beaver Builder
● Gutenberg
● Live Composer
● Oxygen Builder
● Brizy
Editores visuales /
maquetadores / builders
#SGwebinar
@siteground_es
siteground.es

28. #SGwebinar
@siteground_es
siteground.es
Slider / carrusel

29. #SGwebinar
@siteground_es
siteground.es
Listados
(una o varias columnas)

30. #SGwebinar
@siteground_es
siteground.es
Hero

31. #SGwebinar
@siteground_es
siteground.es
Tablas

32. #SGwebinar
@siteground_es
siteground.es
Iconos

33. #SGwebinar
@siteground_es
siteground.es
Cuadrículas /
parrillas / grid

34. #SGwebinar
@siteground_es
siteground.es
Conmutadores / acordeones

35. #SGwebinar
@siteground_es
siteground.es
Pestañas

36. #SGwebinar
@siteground_es
siteground.es
Contadores / barras de progreso

37. Pie de página / footer
#SGwebinar
@siteground_es
siteground.es

38. ● Logo
● Redes sociales
● Copyright
● Textos legales
● Menú
● En definitiva: contenido secundario y prescindible
¿Qué debe incluir el pie de página de
una web?
#SGwebinar
@siteground_es
siteground.es

39. #SGwebinar
@siteground_es
siteground.es

40. #SGwebinar
@siteground_es
siteground.es

41. #SGwebinar
@siteground_es
siteground.es

42. #SGwebinar
@siteground_es
siteground.es

43. #SGwebinar
@siteground_es
siteground.es

44. #SGwebinar
@siteground_es
siteground.es

45. #SGwebinar
@siteground_es
siteground.es

46. #SGwebinar
@siteground_es
siteground.es

47. #SGwebinar
@siteground_es
siteground.es

48. #SGwebinar
@siteground_es
siteground.es

49. #SGwebinar
@siteground_es
siteground.es

50. #SGwebinar
@siteground_es
siteground.es

51. #SGwebinar
@siteground_es
siteground.es

52. Cómo estructurar
correctamente una web
+ EJEMPLOS
#SGwebinar
@siteground_es
siteground.es

53. ● Páginas habituales
● Textos legales
● Otras páginas
● Servicios
● Blog
● Productos (ecommerce)
Consejos para la estructura
de una web
#SGwebinar
@siteground_es
siteground.es

54. ● Inicio
● Sobre mí / equipo / nosotros
● Servicios (una o varias páginas)
● Blog
● Contacto
Páginas habituales
#SGwebinar
@siteground_es
siteground.es

55. ● Política de privacidad
● Política de cookies
● Aviso legal
● Condiciones de compra (ecommerce, membersite…)
Textos legales
#SGwebinar
@siteground_es
siteground.es

56. ● Landings
● Portfolio / trabajos
● Testimonios / referencias
● Recursos: herramientas, descargables…
Otras páginas
#SGwebinar
@siteground_es
siteground.es

57. ● Servicio 1
● Servicio 2
● Servicio 3
Si ofreces servicios en tu web
#SGwebinar
@siteground_es
siteground.es
● Servicio único:
Modalidad 1
Modalidad 2
Modalidad 3
● Servicio principal
● Servicio secundario
EJEMPLO AGENCIA
● Marketing
● Redes sociales
● SEO
EJEMPLO FOTÓGRAFO
● Sesión 10 fotos
● Sesión 20 fotos
● Sesión 30 fotos
EJEMPLO DISEÑADOR
● Diseño web
● Diseño gráfico

58. ● Temas principales: categorías
● Temas secundarios: etiquetas
Blog
#SGwebinar
@siteground_es
siteground.es

59. ● Categorías
● Subcategorías
● Etiquetas
Ejemplo tienda de ropa:
Hombre > Chaquetas > cuero /
vaqueras / forros polares
Productos
#SGwebinar
@siteground_es
siteground.es

60. Recursos para
diseño web
#SGwebinar
@siteground_es
siteground.es

61. Imágenes
● Shutterstock
● Unsplash
#SGwebinar
@siteground_es
siteground.es
Vectores
● Freepik
● Vecteezy
Iconos
● Flaticon
● Font Awesome
Fondos
● Hero Patterns
● SVG backgrounds
Vídeos
● Mixkit
● Pexels
CSS
● CSS button generator
● StyleBot (ext Chrome)

62. MAX CAMUÑAS
Diseñador Web WordPress
www.maxcf.es
@maxcf
¡Gracias!
#SGwebinar
@siteground_es
siteground.es

63. #SGwebinar
@siteground_es
siteground.es

64. Ejemplo de Título
Your Business The Event The Ecosystem
#SGwebinar
@siteground_es
siteground.es