Astra Theme

Cuando afrontamos un proyecto WordPress, hay dos aspectos fundamentales a los que prestar atención: theme y plugins a utilizar. En el caso de los themes, no debemos fijarnos en si es más o menos "bonito", puesto que de eso ya nos encargaremos más adelante.
Lo verdaderamente importante es la eficiencia y la optimización del código del theme. Debemos utilizar themes sencillos, con código limpio y optimizado, que aseguren tiempos de carga lo más rápido posibles, que se integre con nuestro editor visual favorito...como ves, muchas cosas a tener en cuenta. Y, por supuesto, utilizar Child Themes.

¿Y si te decimos que hay un theme que cumple con todos estos requerimientos y muchos más? Se trata de Astra theme, y en este curso aprenderás todo sobre él; instalación, configuración, uso, capacidades de expansión, personalización...Dale una oportunidad y, seguramente se convierta en tu theme de referencia.

Transcript

1. imanolteran.com ASTRA THEME Tema WordPress para construir webs rápidas, potentes y optimizadas Astra Theme
2. Astra Theme imanolteran.com HOLA, SOY IMANOL DESARROLLADOR WEB CONSULTOR DE ESTRATEGIA DIGITAL FORMADOR EN NUEVAS TECNOLOGÍAS hola@imanolteran.com @imanolteran
3. Astra Theme imanolteran.com PODCAST SI DUDAS, HAZLO Spotify Apple Podcasts Google Podcasts imanolteran.com Astra Theme
4. Astra Theme imanolteran.com OTROS PROYECTOS DE FORMACIÓN ACADEMIADEPRODUCTIVIDAD.COM REMOTEWORKTOOLS.ES NOCODETOOLS.ES
5. imanolteran.com 1. Introducción 2. ¿Qué es Astra Theme? 3. Instalación 4. Uso y configuración 5. Plugins 6. Astra Pro 7. Uso con editores visuales 8. Ejemplos prácticos 9. Práctica índice Astra Theme
6. imanolteran.com 01 Introducción Pongámonos en situación Astra Theme
7. Astra Theme imanolteran.com • Sin duda, cuando trabajamos con WordPress, hay que tener dos aspectos muy en cuenta, a nivel general. • Aspecto. • Funcionalidad. • No debemos perder de vista, el rendimiento. Introducción 01 7
8. Astra Theme imanolteran.com • Entre otras cosas, esto lo conseguimos mediante: • Plugins. • Themes. • No dejarse llevar por themes temáticos o “bonitos”. Introducción 01 8
9. Astra Theme imanolteran.com • Consideraciones a la hora de elegir un theme: • Posibilidades de personalizar diseño. • Velocidad de carga. • Preparada pensando en SEO. • Seguridad. • Posibilidades de expansión. • Compatibilidad con plugins de terceros. Introducción 01 9
10. Astra Theme imanolteran.com • Themes mejor valorados: • Astra • Genesis • Divi • GeneratePress • Avada Introducción 01 10
11. Astra Theme imanolteran.com • Astra es un theme muy completo. • Se ha popularizado mucho. • Entra en muchas comparaciones con Genesis Framework. Introducción 01 11 THEME VS FRAMEWORK
12. Astra Theme imanolteran.com • Difieren principalmente en que, además de theme, Genesis también es un framework. • Tanto themes como frameworks tienen características comunes. • ¿Qué diferencia exactamente un theme de un framework? Introducción 01 12 THEME VS FRAMEWORK
13. Astra Theme imanolteran.com • Para manejar un framework se necesitan ciertos conocimientos técnicos. • Si tienes nociones de PHP, puedes hacer un montón de personalizaciones mediante código. • Digamos que un framework es más “potente” en cuanto a la versatilidad que nos ofrece. • El framework más potente y conocido para WordPress es Genesis. Introducción 01 13 THEME VS FRAMEWORK
14. Astra Theme imanolteran.com • En ambos casos es recomendable utilizar Child Themes. • En el caso del framework es “obligatorio”. Introducción 01 14 THEME VS FRAMEWORK
15. Astra Theme imanolteran.com • Principales Frameworks para WordPress • Genesis Framework. • Cherry Framework. • Thematic Theme Framework. • Themify Framework. Introducción 01 15 THEME VS FRAMEWORK
16. Astra Theme imanolteran.com • Ventajas del uso de frameworks: • Eficiencia del código utilizado. • Carga de páginas rápidas. • Soporte. • Facilidad para actualizar. • Funcionalidades añadidas. • Libertad a la hora de diseñar nuestra web. • Orientados a SEO. Introducción 01 16 THEME VS FRAMEWORK
17. imanolteran.com 02¿Qué es? Conozcamos Astra Theme Astra Theme
18. Astra Theme imanolteran.com • Theme gratuito • Repositorio oficial WordPress • Nos va a permitir crear webs • Muy potentes • Ligeras • Rápidas ¿Qué es? 02 18
19. Astra Theme imanolteran.com • Theme fácil de configurar. • No hay que tocar código. • Se integra con el personalizador de WordPress. • Podemos extender sus capacidades con otros plugins. • Basado en Underscores, como muchos themes por defecto de WordPress. ¿Qué es? 02 19
20. Astra Theme imanolteran.com • Astra es theme con mayor tasa de crecimiento. • Theme ligero (menos de 50 KB) • Plantillas pre-diseñadas. • Se integra con el personalizador de WordPress. • No son necesarios conocimientos de programación. • Carga ultra-rápida (menos de 0.5 s) ¿Qué es? 02 20 CARACTERÍSTICAS
21. Astra Theme imanolteran.com • Sin jQuery. JavaScript puro. • Preparado para accesibilidad. • Optimizado para SEO. • Preparado para traducción. • 100% código abierto. (Github) • Compatible con editores visuales. ¿Qué es? 02 21 CARACTERÍSTICAS
22. Astra Theme imanolteran.com • Listado oficial de características (versión gratuita y versión PRO) ¿Qué es? 02 22 CARACTERÍSTICAS
23. Astra Theme imanolteran.com ¿Qué es? 02 23 DE INSTALACIONES ACTIVAS +1.000.000
24. Astra Theme imanolteran.com ¿Qué es? 02 24 EN CONSEGUIRLO, FUERA DE LOS THEMES POR DEFECTO DE WORDPRESS PRIMER THEME https://wptavern.com/astra-becomes-the-only-non-default-wordpress-theme-with-1-million-installs
25. Astra Theme imanolteran.com ¿Qué es? 02 25 DE USUARIOS ÚNICOS +3.000.000
26. imanolteran.com 03Instalación Puesta en marcha Astra Theme
27. Astra Theme imanolteran.com • Astra Theme puede instalarse como cualquier theme dentro del repositorio de WordPress. • Desde el menú “Apariencia/Temas” de nuestra instalación de WordPress • Descargar y subir: • https://es.wordpress.org/themes/astra/ Instalación 03 27
28. Astra Theme imanolteran.com • Una vez instalado, tendremos una nueva opción de menú: • Apariencia / Opciones de Astra • Estas opciones se pueden ampliar utilizando Astra Pro y plugins adicionales. Instalación 03 28
29. Astra Theme imanolteran.com • Según instalemos, nos pedirá seleccionar nuestro editor visual preferido. • Se carga la biblioteca de plantillas de la colección de Astra. • Podremos importarlas. • Plantilla. • Páginas. • Assets multimedia. Instalación 03 29
30. imanolteran.com 04Uso Y configuración Astra Theme
31. Astra Theme imanolteran.com • Una vez instalado, lo primero que deberíamos hacer es añadir un Child Theme a nuestra instalación. • Activamos el Child Theme. • De esta forma, todos los cambios y personalizaciones que hagamos, no se verán afectados por futuras actualizaciones. Uso 04 31
32. Astra Theme imanolteran.com • Astra ofrece una herramienta online para generar nuestro child theme de forma sencilla. • Con ella, personalizamos: • Info desarrollador. • Descripción y versiones del tema. • Imagen screenshot (1200x900 px) • Descargamos .zip e instalamos. Uso 04 32
33. Astra Theme imanolteran.com • Funcionalidad incluida de base con el theme: • Subida de logotipo. • Colores. • Fuentes personalizadas. • Opciones de cabecera. • Ajustes pie de página. Uso 04 33
34. Astra Theme imanolteran.com • Funcionalidad incluida de base con el theme: • Opciones de diseño. • Diseño de blog. • Opciones de barra lateral. • Trabajamos todo a nivel del personalizador de WordPress. • Apariencia / Personalizador. Uso 04 34
35. Astra Theme imanolteran.com • Aquí configuramos: • Tipografía. • Colores. • Contenedor. • Botones. Uso 04 35 USO > GLOBAL
36. Astra Theme imanolteran.com • Opciones relativas a la cabecera: • Cabecera principal. • Cabecera transparente. • Menú principal. • Identidad del sitio. • Logo, favicon, título y descripción. Uso 04 36 USO > CABECERA
37. Astra Theme imanolteran.com • Podemos añadir “breadcrumbs” en nuestra web desde Astra, sin plugins de terceros. • Indicamos posición de las migas de pan: • Dentro de la cabecera. • Después de la cabecera. • Antes del título. • A partir de aquí, configuramos en qué páginas queremos que aparezcan, colores y tipografía. Uso 04 37 USO > MIGAS DE PAN
38. Astra Theme imanolteran.com • Aquí podemos configurar la apariencia de nuestro blog: • Página de archivo. • Páginas de entradas individuales. • Opciones a configurar: • Ancho. • Estructura de contenido. • Colores y tipografía. Uso 04 38 USO > BLOG
39. Astra Theme imanolteran.com • A nivel de diseño, indicamos si vamos a tener una sidebar: • Izquierda, derecha o ninguna. • Podemos redefinirlo a nivel de tipo de contenido: • Páginas, entradas o archivos. • Ancho de la barra. • Colores y tipografía. Uso 04 39 USO > BARRA LATERAL
40. Astra Theme imanolteran.com • Aquí configuramos el aspecto general de footer de nuestra web. • Podemos configurar: • Diseño. • Ancho. • Contenido de cada sección (dos secciones) • Colores y tipografías. Uso 04 40 USO > PIE DE PÁGINA
41. Astra Theme imanolteran.com • Muchas de estas configuraciones dependerán también de cómo este enfocado nuestro proyecto. • Puede que haya cosas que diseñemos desde nuestro editor visual. • En este caso, prevalecen las configuraciones realizadas con el editor visual. • También podemos sobrescribir la configuración a nivel de página/entrada. Uso 04 41
42. Astra Theme imanolteran.com • Al más puro estilo editor visual, podemos personalizar muchos ajustes en función del tipo de dispositivo (móvil, tablet o desktop). • Los propios creadores de Astra, proporcionan una documentación muy extensa y detallada, para aprender a usar el theme. • También podemos encontrar un montón de tutoriales en vídeo. Uso 04 42
43. imanolteran.com 05Plugins Complementos para Astra Theme Astra Theme
44. Astra Theme imanolteran.com • El principal plugin para extender las capacidades de Astra es su versión PRO. • Ofrece personalizaciones adicionales a la versión estándar. • Permite ampliar las capacidades del theme, haciéndolo mucho más completo. Plugins 05 44
45. Astra Theme imanolteran.com • También existen otros plugins para Astra: • Premium Starter Templates. • Ultimate Addons for Elementor. • Ultimate Addons for Beaver Builder. • Ultimate Addons for Gutenberg. • WP Portfolio. Plugins 05 45
46. Astra Theme imanolteran.com • También existen otros plugins para Astra: • CartFlows. • WooCommerce Cart Abandonment Recovery. • Schema – All In One Schema Rich Snippets Plugins 05 46
47. Astra Theme imanolteran.com • También existen otros plugins para Astra: • Import/Export Customizer Settings. • Astra Customizer Reset. • Customizer Search. • Astra Bulk Edit. • Astra Widgets. Plugins 05 47
48. Astra Theme imanolteran.com • También existen otros plugins para Astra: • Custom Fonts. • Custom TypeKit Fonts. • Sidebar Manager. • Astra Hooks. • http://developers.wpastra.com/theme-visual-hooks/ Plugins 05 48
49. imanolteran.com 06Astra Pro Capacidades Premium Astra Theme
50. Astra Theme imanolteran.com • El theme Astra es gratuito y está muy bien. • Si queremos aprovecharlo al 100% y obtener todos sus beneficios, lo ideal es pasarse a la versión PRO. • $59, uso en todas las webs que quieras, actualizaciones durante un año. • $249, actualizaciones de por vida. Astra Pro 06 50
51. Astra Theme imanolteran.com • Uso de por vida. • Instalaciones ilimitadas. • Compatibilidad con WooCommerce. • Compatibilidad con maquinadores visuales. • Opciones de personalización WordPress. Astra Pro 06 51 PRINCIPALES VENTAJAS
52. Astra Theme imanolteran.com • Cabecera fija. • Cabecera para móviles. • Cabeceras de páginas. • Mega menú. Astra Pro 06 52 OPCIONES ASTRA PRO
53. Astra Theme imanolteran.com • Nuevas opciones en cuanto a colores y fondos, con respecto a las que vienen de serie, en varias secciones del personalizador: • Global. • Cabecera. • Blog. • Sidebar. Astra Pro 06 53 COLORES Y FONDO
54. Astra Theme imanolteran.com • Modificar tipografía de: • Pie de página. • Cabecera principal. • Barra lateral. • Botones. • Título de página o post. Astra Pro 06 54 TIPOGRAFÍA
55. Astra Theme imanolteran.com • Añade posibilidad de manejar márgenes y espacios interiores en diferentes partes de la web. • Sobrescribe los valores por defecto del tema. • Diferentes espaciados para responsive. • Unidades relativas o absolutas. Astra Pro 06 55 ESPACIADO
56. Astra Theme imanolteran.com • Diferentes estilos para mostras los posts: • Grid Layout. • List Layout. • Masonry Layout. • Destacar primer post. • Carga infinita. • …etc. Astra Pro 06 56 BLOG PRO
57. Astra Theme imanolteran.com • Opciones añadidas al header en dispositivos móviles: • Nuevos estilos de menú. • Colores. • Fondos. • Borde para items de menú. Astra Pro 06 57 CABECERA PARA MÓVILES
58. Astra Theme imanolteran.com • Introduce dos nuevas secciones en la cabecera de la web: • Sobre la cabecera. • Bajo la cabecera. • Podremos añadir información adicional sobre o bajo nuestra cabecera principal. Astra Pro 06 58 SECCIONES DE CABECERA
59. Astra Theme imanolteran.com • Con esta extensión podemos crear mega-menús. • Esto es, menú desplegables que pueden mostrar una gran cantidad de información. • Varias columnas, una por submenú. Astra Pro 06 59 MENÚ DE NAVEGACIÓN
60. Astra Theme imanolteran.com • Podemos fijar la cabecera en la parte superior de la página y que permanezca ahí al hacer scroll. • De esta forma, tendremos el menú siempre accesible. • También aplica a las zonas “sobre” y “bajo” la cabecera, en caso de que las tengamos activadas. • Se puede usar un logo diferente. • Podemos hacer que la cabecera “encoja” al hacer scroll. Astra Pro 06 60 CABECERA FIJA
61. Astra Theme imanolteran.com • Tenemos la posibilidad de personalizar la cabecera de nuestras páginas. • Ajustar estas personalizaciones e integrarlas con la cabecera del sitio. • Podemos aplicar estas cabeceras a todo el sitio, páginas o posts específicos… • También indicar para qué rol de usuario son visibles. Astra Pro 06 61 CABECERA DE PÁGINAS
62. Astra Theme imanolteran.com • Módulo muy potente, que permite personalizar de forma completa diferentes partes de la web. • Cabecera. • Pie de página. • Página 404. • Astra Pro 06 62 ESTRUCTURAS PERSONALIZADAS
63. Astra Theme imanolteran.com • Con este módulo activado, podremos configurar la estructura general del sitio web. • Ancho completo. • Ancho máximo. • Ancho completo con opción de espaciado interno. • Estructura fluida. Astra Pro 06 63 ESTRUCTURA DEL SITIO
64. Astra Theme imanolteran.com • Posibilidad de añadir 7 estilos de layout diferentes al footer. • Tamaños. • Espaciados. • Colores. • Tipografía. Astra Pro 06 64 WIDGETS DE PIE DE PÁGINA
65. Astra Theme imanolteran.com • Gracias a esta opción podemos añadir un botón al final de la página al hacer scroll. • Este botón nos llevará automáticamente desde donde estemos, hasta el inicio de la web. • Podemos colocarlo en diferentes posiciones. • Personalizar icono del botón. Astra Pro 06 65 SCROLL AL INICIO
66. Astra Theme imanolteran.com • Podemos ocultar el nombre de los desarrolladores de Astra. • Renombramos para que, a efectos del cliente, todo lo relacionado con información del theme y plugins parezca desarrollo nuestro. Astra Pro 06 66 MARCA BLANCA
67. Astra Theme imanolteran.com • También hay extensiones que necesitan de plugins de terceros que deben estar instalados: • WooCommerce • Easy Digital Downloads. • LearnDash. • LifterLMS Astra Pro 06 67 PLUGINS DE TERCEROS
68. imanolteran.com 07 Editores visuales Elementor, Beaver Builder, Visual Composer, Divi… Astra Theme
69. Astra Theme imanolteran.com • Astra Theme está totalmente preparado para trabajar con editores visuales: • Beaver Builder. • Elementor. • Divi. • Site Origin. • Visual Composer. Editores visuales 07 69
70. Astra Theme imanolteran.com • Además, mediante la extensión “Starter Templates”, podemos partir de diseños pre-creados y preparados para nuestro editor visual favorito: • Elementor. • Beaver Builder. • Brizy. • Gutenberg. Editores visuales 07 70
71. imanolteran.com 08Ejemplos prácticos Webs hechas con Astra Theme Astra Theme
72. Astra Theme imanolteran.com • Hacer pruebas de rendimiento Ejemplos 08 72
73. imanolteran.com 09Práctica Web hecha con Astra Theme y Elementor Astra Theme
74. Astra Theme imanolteran.com • Funcionalidades: • Marca blanca. • Child Theme. • Scroll to top • Cabecera fija • Logo diferente en móvil. Práctica 09 74 PRÁCTICA
75. Astra Theme imanolteran.com • Funcionalidades: • Insertar código en cabecera. • Hooks. • Migas de pan. • Cabeceras generales de página. • Distintas tamaños de letra en móvil. Práctica 09 75 PRÁCTICA
76. Astra Theme imanolteran.com PRÓXIMOS CURSOS APPGYVER HERRAMIENTAS DE FORMACIÓN ONLINE OBS STUDIO PRODUCTO MÍNIMO VIABLE LANDING PAGES SIN CÓDIGO
77. imanolteran.com Astra Theme hola@imanolteran.com Eskerrik asko