Astra: MEGAGUÍA de la mejor plantilla para WordPress con Elementor

Astra es, para mí y a día de hoy, la mejor plantilla para WordPress que hay.

¿Muchas opciones en cuanto a plantillas, verdad?

Si… es un cacao mental, sobre todo cuando no sabes bien con cuál personalizar bien tu web y que te resulte fácil.

Tienes un montón de opciones en el mercado, no te lo discuto: que si Génesis, Divi, Avada

En el post de hoy, te presento la opción que yo te recomendaría: la plantilla Astra.

Vamos a ver como funciona con el page builder de Elementor al igual que ya hicimos anteriormente con otro Framework de los grandes hoy día: GeneratePress.

¿Te quedas? 🙂

Qué es Astra

Pues bien, Astra no es más ni menos que otro theme gratuito que puedes descargar desde el repositorio de WordPress, con el que puedes crear una web potente, con un diseño atractivo y funcional.

Y lo más importante: fácil de personalizar, ya que no tienes que tocar nada de código.

mejor-plantilla-wordpress-astra

Características principales de la plantilla Astra

Estas son algunos de los puntos fuertes de este theme:

  • Optimizado para el código.
  • Gran velocidad de carga, en menos de 0,5 segundos.
  • Ocupa menos de 50 KB.
  • Fácil de personalizar, gracias a sus opciones tan intuitivas.
  • Combina muy bien con plugins como Elementor, WooCommerce y Lifter LMS.

¿Te parece poco?

Pues aquí puedes ver en profundidad todo lo que te permite hacer esta plantilla en cuanto a niveles de personalización, que veremos después más a fondo.

Actualmente cuenta con más de 200.000 instalaciones activas y tiene valoración 5 estrellas.

astra-wordpress

Además cuenta con un child theme, que te recomiendo que instales si vas hacer alguna actualización a nivel de CSS, para que después cuando actualices la plantilla, no se borren estos datos que hayas incluido a nivel de estilo.

Puedes descargártelo aquí mismo.

¿Sirve Astra para diseñar cualquier web?

Con esta plantilla puedes crear páginas estáticas, blogs, páginas nicho, tiendas y academias online… vamos todo lo que se te ocurra.

Cómo te decía antes y veremos luego, este theme se integra perfectamente con el plugin de Elementor, por lo que el diseño no va ser un problema para cualquier tipo de página que quieras crear.

Eso sí, si quieres acceder a todo el nivel de personalización tendrás que optar por la versión premium, es decir, comprar los Addons.

Pero eso te lo contaré más tarde.

Ahora vamos a ver que nivel de diseño puedes tener con la versión libre de la plantilla.

Cómo instalar esta plantilla

Vamos a meternos en materia para enseñarte de que es capaz esta plantilla con su versión free.

Lo primero que tienes que hacer es instalarla desde «Apariencia>Temas» en tu WP, y tendrás la opción de ver como trabajar con esta plantilla haciendo clic en el botón «Primeros pasos«.

Una vez hagas clic, se te abrirá un asistente para seleccionar que maquetador quieres usar: Gutenberg, Beave Builder, Elementor o Brizy.

Sin duda te recomiendo que elijas la opción de Elementor.

instalacion-theme-wordpress

Una vez realizados estos primeros pasos, se te abrirá una biblioteca de plantillas de la colección de Astra, que podrás utilizar para importar en tu WordPress.

plantillas-astra-wordpress

Esta es una opción de crear tu web partiendo de una plantilla y la otra es partir desde cero, creando un boceto inicial y empezar a diseñar cada una de las páginas que van a conformar tu proyecto online.

Consejo: Después de instalar el tema padre, te recomiendo que instales posteriormente el child theme, y lo dejes activo, tal y como te explicaba antes por si vas a realizar posteriores modificaciones de estilos en la plantilla.

Vamos a ver como hacerlo paso a paso con un vídeo:

Opciones de personalización gratuitas

Una vez tengas instalado Astra, tendrás que acceder a «Apariencia>Personalizador» para empezar a realizar los primeros ajustes a nivel de diseño de tu web.

personalizador

Con la versión gratuita de Astra podrás ajustar todo esto a golpe de clic:

  • Diseño: desde esta opción podrás personalizar la cabecera, las migas de pan, el blog, la barra lateral, el pie de página y el contenedor.

diseño-personalizador

  • Colores y Fondo: en este otro apartado podrás editar los colores de base, de las migas de pan, la cabecera y la barra del pie de página.

colores-y-fondo

  • Tipografía: aquí igualmente podrás elegir que tipo de letra quieres aplicar de base para la web, las migas de pan, la cabecera, el contenido y blog.

tipgrafia

  • Botones: con estas opciones podrás personalizar el color y la forma de los botones.

botones

  • Menús: este apartado es el mismo que trae WP de partida, donde podrás crear menús para tu web.
  • Widgets: igualmente desde aquí, al igual que lo hacemos en el escritorio, podrás elegir que widgets quieres insertar en la barra lateral principal.
  • Ajustes de portada: en este bloque puedes seleccionar que página mostrar en la portada de tu sitio web.
  • CSS Adicional: por último, desde aquí puedes incluir estilos a nivel de código CSS para tu página.

Creo que lo mejor es que veas las opciones de personalización que te proporciona Astra en su versión gratuita a través de un vídeo resumen:

Además, si entras dentro de «Apariencia>Opciones de Astra«, encontrarás unas funcionalidades extras, que podrás ejecutar con la instalación de algunos plugins gratuitos:

extensiones-astra

  • Importar y exportar las configuraciones iniciales que hagas en una plantilla para otra web
  • Puedes restablecer las configuraciones que hagas en el personalizador a golpe de clic
  • Activar la Búsqueda del personalizador
  • Astra Bulk Editar
  • Astra Widgets
  • Fuentes personalizadas
  • Fuentes Typekit personalizadas
  • Administrador de la barra lateral
  • Últimos addons para Gutenberg

Astra Premium

Si necesitas acceder a personalizaciones más a fondo, puedes recurrir a la versión de los Addons premium de Astra.

Por sólo 59$/año puedes tenerlo todo en tu sitio web.

Ahora, si eres un freelance que se dedica al diseño web o una agencia, te recomendaría mejor que optarás por el paquete de Astra PRO para Agencias, ya sea el formato mini o completo, por 169 y 249$ respectivamente.

Ojo, que también puedes comprar la versión premium en un único pago para toda la vida 🙂

precios-astra-pro

Veamos uno a uno, que diferencias existen entre los distintos planes.

Precios y tipos de planes

Plan Básico

En primer lugar, tenemos el plan básico, que nos incorpora de más sobre la versión libre lo siguiente:

  • Acceso a todos los addons premium.
  • Más de 20 sitios de inicio gratis.
  • Soporte uno a uno para las dudas que puedan surgirte.
  • Entrenamiento exclusivo para conocer a fondo los addons.
  • Uso de los addons en todos los sitios webs que necesites.

Plan Mini

En segundo lugar, el plan Mini para agencias incluye sobre el plan básico lo siguiente:

  • Más de 50 sitios de inicio de agencia.
  • WP Portfolio: un plugin premium creado por Astra para insertar portfolios en tu web.
  • Elección de uno de los Addon para estos constructores:
    • Ultimate Addons for Beaver Builder: otro plugin para este maquetador con funcionalidades extras.
    • Ultimate Addons for Elementor: un plugin que también incluye funcionalidades al maquetador de Elementor.

Plan Agencias

¿Y que incluye el paquete para Agencias como extra sobre el plan Mini?.

  • Plugin Convert Pro: para captar suscriptores.
  • Plugin Schema Pro: para introducir esquemas en tu web.
  • Ultimate Addons for Beaver Builder: otro plugin para este maquetador con funcionalidades extras.
  • Ultimate Addons for Elementor: un plugin que también incluye funcionalidades al maquetador de Elementor.
  • Acceso a los futuros plugins y complementos creados por Astra.

Aquí puedes ver todo lo que incluye cada plan más a fondo.

Si compras la versión anual, tendrás derecho a soporte y actualizaciones durante todo un año.

Si luego renuevas, automáticamente tendrás un descuento del 20% en el precio 🙂

Repaso de Addons de pago

Una vez hayas adquirido la versión PRO de Astra, vas a encontrar todos estos addons que te ayudarán a diseñar tu web:

addons-wordpress

Veamos uno a uno que opciones nos permite:

  • Encabezado transparente: Con esta función puedes crear encabezados transparentes en tu web, de forma atractiva y visual. Puedes habilitarlo tanto para escritorio, móvil, o escritorio + móvil.

cabecera-transparente

  • Etiqueta blanca: Con esta opción, puedes añadir tus datos para establecer como marca blanca, que un producto de Astra ha sido diseñado por ti. Lo que haces es añadir tu nombre dentro de las características del plugin o plantilla que hayas creado. Como puedes ver en este ejemplo:

white-label-plugin-label

  • Diseños de blog: Activando este apartado tienes opciones de personalización para el listado de post y cada entrada individual.

diseños-de-blog

  • Diseños del sitio: En este apartado puedes establecer el ancho del contenido del sitio web. Tienes las opciones: diseño de ancho completo, ancho máximo, acolchado y disposición fluida.
  • WooCommerce: con este bloque, podrás personalizar la página tienda de WooCommerce para la venta de tus productos o servicios a través de tu web.

woocommerce-astra-pro

  • Encabezado fijo: gracias a esta opción, podrás dejar como fija la cabecera, de manera que cuando el usuario haga scroll en la página, éste se quede pegado arriba de la pantalla para no perder nunca el menú de navegación.

cabecera-fija-astra-pro

  • Encabezados de página: Con este personalizador puedes crear diseños propios para los encabezados de páginas, y establecer en cuales de ellas quieres aplicarlo.

page-headers-astra-pro

  • Más controles de color: Dentro de este apartado tendrás más ajustes disponibles para trabajar los colores de toda la web: encabezados, menús primarios, contenidos y H1,H2… listados de post, entradas individuales y barra lateral.

colores-y-fondo

  • Mejor tipografía: en este otro bloque igualmente podrás trabajar la tipografía de la web a un nivel mucho más profundo. Podrás establecer que tipo de letra quieres para los encabezados, menús, listados de post, entradas únicas, widgets y barra lateral.

tipografia-astra-pro

  • Diseños personalizados: en cambio este bloque es muy interesante, ya que desde aquí podrás crear diseños personalizados y específicos para tu web: encabezados, pies de página, páginas 404 e incluir los famosos fragmentos de código para los Hooks.

Nota: Tienes un plugin propio de Astra que puedes descargar aquí, que te permite conocer visualmente estas zonas de hooks de la plantilla, donde puedes insertar códigos para ejecutar ciertas funcionalidades.

diseños-personalizados

  • Botón para ir arriba al menú: Con este personalizador puedes activar un botón para que el usuario cuando se encuentre haciendo scroll en tu web, pueda volver hacia arriba cómodamente.

boton-volver-arriba

  • Widget de pie de página: En este apartado podrás establecer los widgets que quieras justo encima del footer. Puedes elegir entre estos 7 diseños disponibles.

footer-widget

  • Secciones de encabezado: En este otro bloque puedes crear secciones determinadas para las cabeceras de las páginas. Puedes introducir dos secciones de encabezado (Encabezado anterior y encabezado inferior) en el header del sitio web.

cabecera-secciones

gif-cabecera-movil

  • Control de espacio: con esto se activarán en algunos apartados del personalizador, la posibilidad de trabajar los espaciados en distintas partes de la web, como por ejemplo la cabecera:

espaciados-cabecera-astra-pro

  • Lifter LMS, Learn Dash y Easy Digital Downloads: Los chicos de Astra nos ofrecen varios addons premium que nos dan la opción de trabajar a nivel de diseño cada una de las páginas que nos creen estos plugins.

El combo perfecto es…

Como habrás visto, Astra no sólo se combina bien con el maquetador de Elementor, sino que funciona también con otros Page Builders como:

  • Beaver Builder
  • Thrive Architect
  • Visual Composer
  • Divi
  • Toolset

Cómo ves las opciones que tienes para diseñar tu web, son infinitas 🙂

En mi experiencia, he probado Astra + Elementor, que como veremos luego, es la opción que más te recomiendo a día de hoy.

integraciones-astra-wordpress

Veamos en detalle como se comporta con este maquetador.

Cómo crear una página con Astra y Elementor

Una vez tengas claras las opciones de personalización de Astra y tengas instalado el plugin de Elementor, vamos a ver como crear las páginas de tu web con estas dos herramientas.

Lo primero que tienes que saber es que cuando añadas una nueva página, vas a tener los siguientes ajustes disponibles de Astra:

ajustes-pagina-astra

  • Barra lateral: puedes activar la barra lateral derecha, izquierda, o sin barra lateral.
  • Diseño del contenido: aquí podrás definir el ancho de tu página (según el contenido, ancho total…).
  • Desactivar secciones: en este bloque puedes desactivar elementos como el header, título, imagen destacada, footer…
  • Cabecera transparente (opción Astra Pro)
  • Cabecera de página (opción Astra Pro)
  • Cabecera fija (opción Astra Pro)

Aquí puedes ver un ejemplo para que aprendas a crear una página desde cero con Astra y Elementor:

Si quieres aprender a fondo como crear tu propia web paso a paso con Astra Pro + Elementor PRO, puedes conocer nuestro Curso Online CTW.

Astra + WooCommerce para crear tiendas online

El plugin por excelencia para crear tiendas virtuales en WordPress es WooCommerce; por tanto, si lo combinamos con una buena plantilla para personalizar las páginas de la tienda, mucho mejor.

woocommerce-astra

Gracias a este addon de Astra Pro, podrás personalizar:

Nota: También tienes un bloque extra cuando instalas el plugin de WooCommerce, que te permite elegir los colores y opciones de fondo en el personalizador.

Astra + Lifter LMS o LearnDash para crear academias y cursos online

Otro plugin que viene bien conocer es Lifter LMS, ya que con éste podemos crear cursos y academias online en nuestro WordPress.

Gracias a su buena compatibilidad con Astra, los chicos del equipo, han creado un addon específico para este plugin, que te permite personalizar lo siguiente:

lifter-lms

A nivel genérico, puedes personalizar:

  • las columnas de los cursos y membresías,
  • puedes activar el pago en la página del checkout sin distracciones (eliminando el header y el footer) y,
  • te permite personalizar el menú de «Mi Cuenta» del alumno.

Además, a nivel de Curso o Lección, puedes activar distintas opciones, como:

  • habilitar imágenes de las características y la descripción del curso;
  • los metadatos y detalles del instructor,
  • habilitar una barra de progreso, y
  • gestionar los encabezados para los menús personalizados.

Ejemplos de páginas con Astra y Elementor

ejemplo-diseño-astra

El blog de Haciaelautoempleo.com es uno de los ejemplos de gran diseño realizado con Astra y Elementor.

También tienes cursos online creados con estas dos potentes herramientas:

ejemplo-diseño

Por último, recuerda que puedes instalar en cualquier momento el plugin gratuito de Astra Sites, para instalar alguna de las plantillas que ofrecen desde su biblioteca.

Astra VS GeneratePress

Una vez que has visto las posibilidades que ofrece Astra, voy a contarte los pros y contras que tiene esta plantilla de WP con respecto a su primo GeneratePress creado por Tom Usborne.

Como ya habrás visto si ya conocías GeneratePress anteriormente, verás que Astra es un gran competidor, ya que las funcionalidades que ofrece son muy parecidas a este otro theme.

Vamos a ver en profundidad las diferencias entre ambos frameworks.

Pros y Contras de Astra y GP

Voy hacer una pequeña lista con las principales diferencias que encontramos en los dos themes para que lo tengas a modo resumen:

Característica                         Astra                                                     GP

Precio                                      59$                                                        49,95 $

Soporte                                   Uno a uno                                            Foros

Espacio en disco                    Menos de 50 KB                                Menos de 30 KB

Velocidad                                Carga en menos de 0,5 seg              Velocidad de primer nivel (no especifica)

JQuery                                     No. Utiliza Javascript                       No. Utiliza Javascript

Código                                     Optimizado y seguro                         Optimizado y seguro

¿WooCommerce?                 Compatible                                          Compatible

¿Lifter LMS?                          Compatible                                          Compatible

¿WPML?                                 Compatible                                          Compatible

Creo que uno de los puntos más fuertes de Astra es claramente el tema del soporte técnico.

Con GP, sólo puedes preguntar tus dudas a través de foros; o consultar la documentación que hay colgada en la web oficial.

Sólo te permiten contactar a través del formulario de contacto para pre-venta de la plantilla; mientras que con la opción de Astra tienes soporte uno a uno, de ahí su diferencia de precio (10$ más que merece la pena como inversión).

Conclusiones y opinión sobre la plantilla Astra

Opino que Astra es una gran opción para aquellas personas que quieren usar un theme fácil de personalizar, junto con un buen maquetador de páginas y sin tener que saber necesariamente picar código.

Sin duda, al lado de GeneratePress es una de las mejores plantillas que puedes encontrar en el mercado para crear tu página web.

Vale cada euro o dollar de su precio, teniendo en cuenta todas las opciones disponibles y la compatibilidad que tiene con distintos plugins.

Así que puedo afirmar, que Astra es otra herramienta muy potente a valorar para aquellos diseñadores que estén pensando qué plantilla de WordPress utilizar en los proyectos webs de sus clientes y en la suya propia.

Espero que te haya servido esta guía 🙂

¿Y tú, lo has utilizado alguna vez? ¿Qué opinas de Astra?

Nos vemos en los comentarios si tienes dudas.

Astra: MEGAGUÍA de la mejor plantilla para WordPress con Elementor
5 (100%) 1 vote[s]

Jessica Berlar
Jessica Berlar
Colaboradora del equipo de Haciaelautoempleo. Guardiana de los contenidos y del soporte. Experta en WordPress especializada en Elementor y GeneratePress.

¡Muchas gracias por compartir!

Share on facebook
Facebook
Share on twitter
Twitter

¿Necesitas algo en concreto?

No te vayas sin dejar tu comentario...

2 comentarios en “Astra: MEGAGUÍA de la mejor plantilla para WordPress con Elementor”

  1. Wow me viene como anillo al dedo.

    Resulta que estoy enfrascado con el rediseño de mi web y no encontraba mucha info sobre Astra en Español para resolver dudas sobre algún ajuste «confuso».

    Ahora ya sé dónde encontrarlo o acudir para preguntar 😉

    Grande Jessica

    1. Jessica Berlar

      Hola Diego,

      ¡Que bien! Muchas gracias, me alegro que te sirva la guía; es cierto que no hay mucha info sobre esta plantilla, así que espero que te sirva de ayuda.

      Dale caña a ese rediseño web 😉

      Un abrazo!!

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Responsable » Omar de la Fuente Prieto (servidor)
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de Haciaelautoempleo) dentro de la UE. Ver política de privacidad de Webempresa. (https://www.webempresa.com/aviso-legal.html).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.