Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Astra Theme

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.

6c68edbaa40e50a0420ee1c125d17189?s=128

Imanol Terán

October 14, 2020
Tweet

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