Con más de 1.000.000 instalaciones activas y más de 3700 valoraciones de 5 estrellas, Astra se presenta con unas muy buenas valoraciones por parte de la comunidad de usuarios de WordPress.
Si la versión gratuita de esta plantilla presenta estos números, y teniendo en cuenta que esta versión viene limitada en cuanto a opciones de diseño y funcionalidades, aún así nos permite diseñar una página web más que aceptable. Pero ¿que posibilidades nos ofrece la versión pro? ¿realmente vale la pena pagar por cualquiera de las versiones de pago?.
En esta entrada vamos a dar un repaso a todas las mejoras que hacen de la compra de la versión de pago una excelente inversión.
Descubre porque Astra Pro es la plantilla perfecta para tu web en 2020.
Índice de contenidos
Qué hace a Astra Pro una plantilla muy recomendable
Si de algo alardean los chicos de Brainstorm force es que Astra pro es una plantilla rápida como un rayo, y es cierto, este tema esta muy optimizado para tener una buena velocidad de carga, factor que cada vez influye más en el posicionamiento de los resultados de búsqueda.
Se integra perfectamente con cualquiera de los constructores visuales más populares: Elementor, Divi, Visual composer, o incluso con Gutenberg, el nuevo modulo integrado en el core de Wordpres.
Otro factor que hace que esta template destaque sobre otra es la cantidad de opciones que ofrece para su personalización, practicamente podrás estructurar el diseño de tu web como te apetezca.
También es interesante recalcar que podemos hacer uso de una única licencia en todas las páginas web que queramos.
Un último punto a destacar son los plugins gratuitos que podemos encontrar en el repositorio oficial de WordPress.
¿Cómo de rápida es Astra Pro?
Al ser una plantilla enfocada al rendimiento y la velocidad de carga se espera de ella unos valores altos, y los resultados hablan por si solos.
Para realizar esta prueba tomamos como referencia uno de nuestros últimos trabajos realizados en el que practicaménte estaban todos los módulos activados y testeamos que resultados nos daba en GTmetrix. Ojo, hay que puntualizar que en el resultado de el test un buen hosting es un factor relevante.
Estos son los números:
- PageSpeed score: 97% cuando la puntuación media de PageSpeed es de 72%.
- Yslow Score: 81% cuando la puntuación media de PageSpeed es de 70%. Este porcentaje mejora con el uso de un CDN.
- Velocidad de carga: 2 segundos cuando el tiempo promedio de carga completa es de 7 segundos.
- Peso de la página: 640Kb cuando el tamaño total de página promedio es de 3,23 MB.
- Peticiones al servidor: 42 cuando el promedio de solicitudes es de 89.
Y estos son los resultados que nos da GTmetrix de nuestra página web utilizando Astra pro:
Módulos de Astra Pro
Una de las ventajas que destaca a Astra Pro es que podemos activar solo aquellos módulos que utilicemos, esto permite que podamos mantener nuestro sitio web con una carga liviana.
Veamos cada uno de los módulos:
- Colores y fondo: permite personalizar el fondo de la web y cualquier parte de tu página web. Desde la cabecera al pie de página o el sidebar. También permite personalizar los colores de las etiquetas de título 1 (H1) a 6 (H6), los colores de los enlaces y los hover.
- Tipografía: al igual que pasaba con los colores y el fondo, este módulo permite definir las fuentes que queramos usar en cualquier parte de la estructura de nuestra web. También nos permite definir el tamaño, el peso, la altura de la linea o si queremos aplicar alguna transformación.
- Espaciado: permite modificar el margen y el relleno para varios elementos de Astra. Los valores podrán ser definidos en px, EM o porcentaje.
- Blog pro: permite definir los ajustes generales para la página de archivos del blog y para las entradas individuales. Aún siendo ajustes generales, desde las páginas individuales nos permite modificar estos ajustes si nos interesa dar otro aspecto a una entrada o página en concreto.
- Cabecera para móviles: permite definir una cabecera especifica para dispositivos móviles, ajustar el punto de interrupción del encabezado, establecer diferentes logotipos, elegir diferentes estilos de menú, establecer colores por separado para el menú.
- Secciones de cabecera: crea dos secciones nuevas antes y después de la cabecera del menú.
- Menú de navegación: al activar este módulo nos permite crear mega menús.
- Cabecera fija: este módulo nos permite que al hacer scroll vertical el menú se quede anclado en la parte superior.
- Cabeceras de página: permite crear y personalizar cabecera de página, ojo no confundir con la cabecera del menú. Entre sus opciones podemos encontrar diferentes tipos de layouts, personalizar colores, insertar breadcrumbs, etc etc
- Diseños personalizados: activando este módulo podremos crear diseños personalizados para la cabecera, el footer y la página de error 404. También podremos crear secciones en cualquier parte de la estructura de la página mediante el uso de los hooks de Astra.
- Diseños del sitio: con el módulo puedes administrar el diseño general del sitio web. Permite 4 tipo de layouts: diseño de ancho completo, diseño de ancho máximo, diseño acolchado y disposición fluida.
- Widgets del pie de página: te permite agregar 7 diseños diferentes de widgets al pie de página. Como para el resto de secciones también permite personalizar fondos, margenes, fuentes y layout.
- Ir arriba: añade un botón al final de página que al clicarlo hace scroll vertical hasta el inicio.
- Woocommerce: añade opciones de personalización a las páginas de la tienda, producto único, carrito y pago de tu woocommerce.
- Easy Digital Downloads: añade opciones de personalización a las páginas general, archivos de producto, producto único y pago del plugin easy digital download.
- LifterLMS: añade funciones a LifterLMS.
- LearnDash: complemento del módulo LifterLMS para añadir opciones de personalización a páginas destinadas a el e-learning.
- Marca blanca: permite presentar un producto o un complemento como propio. Esto te ayuda a ocultar la identidad real del tema y los complementos utilizados y usar tu nombre de marca.
Módulo blog pro de Astra
Una vez activemos el módulo desde Apariencia/Opciones de Astra podremos configurar los ajustes generales de nuestra página del blog desde Apariencia/ Personalizar/ Diseño/ Blog.
Blog/Archivo
- El módulo nos ofrece 3 layout predefinidos: ancho completo, imagen a la izquierda y imagen a la derecha.
- Dependiendo de nuestra selección, en diseño de cuadricula aparecerán diferentes opciones.
- En el contenido de la entrada del blog definiremos si queremos que se vea la totalidad del post o un extracto. En número de extracto definiremos el número de carácteres a mostrar.
- Permite modificar el texto para acceder al post individual y si queremos mostrarlo como texto o como botón.
- En paginación de entrada definiremos que tipo de paginación queremos y su personalización.
- En estructura de entrada del blog y información meta del blog definiremos que información se debe mostrar en cada post. Para ocultar alguno de los parametros clicaremos sobre el ojo y para modificar el orden arrastraremos los bloques hasta la posición deseada.
- En ancho del contenido del blog nos permite personalizar el ancho del contenedor del blog.
Entrada individual
- Igual que en el los ajustes de blog/archivo encontraremos como nos permite definir la estructura de entrada del blog y información meta del blog.
- En este apartado nos permite configurar aspectos visuales una vez a finalizado el contenido de la entrada individual. Las opciones que nos permite son: mostrar datos del autor, mostrar entradas antiguas, ocultar la navegación para ver la entrada anterior o la antigua y eliminar el relleno de la imagen destacada.
- En la sección espaciado podremos definir los margenes fuera y dentro del contenedor. Los valores los podremos definir en px, EM y porcentaje. También podemos defirnir diferentes espacios para tablet y mobil clicando sobre el icono rojo del recuadro de la imagen.
- Permite personalizar el ancho del contenedor de la entrada individual.
Módulo de cabecera principal y para móviles de Astra Pro
Activamos el módulo y accedemos a Apariencia/ Personalizar/ Diseño/ Cabecera/ Cabecera principal.
- El módulo nos ofrece 3 layout para la cabecera: logo a la izquierda, a la derecha o sobre el menú. La siguiente opción nos permite ocultar el menú.
- Último elemento en el menú nos permite insertar un elemento al final del menú. Entre las opciones nos permite insertar un botón, un filtro para buscar contenido, insertar texto plano o HTML o un widget. En el caso de querer insertar un widget lo haremos desde Apariencia/ Personalizar/ Widgets/ Cabecera. En el caso de querer insertar un botón los 2 siguientes campos servirán para definir el texto y el enlace.
- En tamaño de borde de la parte inferior de la cabecera definiremos el ancho del borde de la cabecera.
- En ancho de cabecera podremos definir si queremos la cabecera al mismo ancho del contenido o al ancho completo.
- En borde del contenedor del submenú encontraremos todas las opciones de personalización en el caso que tengamos elementos en los submenus. Borde, color, color del borde y efecto de animación al hacer el hover.
- Pasamos a personalizar la cabecera para móviles. En punto de quiebra definiremos que ancho máximo debe tener la pantalla para que aparezca el menú para dispositivos móviles.
- El siguiente paso será definir el estilo del menú configurando el color, la forma de desplegarse, el color y el radio del borde.
- Ocultar el último elemento en el menú para móviles y colocar el último elemento fuera del menú hacen referencia al elemento que hemos definido el el punto 2. Activaremos según nuestra necesidad.
- En alineación de cabecera en móviles definiremos si queremos el logo y el botón de menú alienados o el logo sobre el botón.
- Ya para finalizar definiremos el borde de los elementos del menú y el color.
Módulo de secciones de cabecera de Astra Pro
- El módulo nos ofrece 2 layout : ancho completo y a 2 columnas. Dependiendo de tu selección las opciones de personalización pueden variar.
- Definimos el contenido de las secciones. Entre las opciones nos permite insertar un menú, un filtro para buscar contenido, insertar texto plano o HTML o un widget. En el caso de querer insertar un menú deberemos acceder a Apariencia/ Widgets y insertar el menú en el area de widget donde quiera que aparezca.
- En cabecera para móviles definiremos si se debe o no se deben mostrar las secciones de cabecera. También nos permite elegir entre 2 layout. Para finalizar, la ultima opción nos permite alterar el orden de las secciones.
Módulo de menú de navegación de Astra Pro
Este módulo nos permite crear megamenús. Para crear nuestro megamenu accederemos a Apariencia/ Menús desde nuestro panel de administración de WordPress.
Una vez en el la pagina de menú, desplegaremos el elemento que vaya a ser la raiz de nuestro megamenu y entraremos en los ajustes activaremos el megamenu. Para crear los elementos de menú que deben ir dentro del megamenú basta con arrastrar el bloque y definirlo como elemento de mega menú. Dentro del bloque del submenú encontraremos los ajustes para su personalización.
En el caso de que nuestra intención fuera la de crear columnas dentro del mega menú repetiremos los pasos del punto anterior. Seguidamente, en los ajustes de los subelementos marcaremos la casilla usar este menú como encabezado de columna.
Ya para acabar definiremos los elementos que deben de ir en cada columna como subelemento de cada uno del los bloques definidos como columnas.
Si quieres insertar y personalizar un formulario de búsqueda como último elemento del menú solo tienes que visitar nuestra entrada cómo personalizar la herramienta de búsqueda de Astra.
Módulo de cabecera fija en Astra Pro
- Para definir como fija la precabecera.
- Para definir como fija la cabecera principal.
- Para definir como fija la postcabecera.
- Para definir un logo distinto para la cabecera fija.
- Para modificar el alto de la cabecera principal al hacer scroll vertical.
- Para la animación de la cabecera.
- Para activar en que dispositivos la cabecera debe ser fija.
Módulo de diseños personalizados en Astra Pro
Con este módulo, puedes crear encabezados, pie de página, página de error 404 y personalizaciones en todos los hooks que ofrece la plantilla. Para personalizarlas accedemos a Apariencia/ Opciones de Astra/ Diseño personalizado.
- Definimos el título de la sección que vamos a diseñar.
- Esta opción nos permite crear el contenido de la sección mediante código.
- Si no tenemos conocimento de código podemos crear el contenido con cualquier editor visual (Elementor o Beaver Builder).
- Definimos el tipo de plantilla.
- Para finalizar, definiremos para que tipo de sección/página es nuestro diseño y configuraremos donde se debe o no se debe ver.
Módulo de diseño del sitio de Astra Pro
Con el módulo Diseño de sitio, puede administrar el diseño general del sitio web. Para personalizarlas accedemos a Apariencia/ Personalizar/ Diseño/ Contenedor.
- Definimos que tipo de ancho queremos para el contenedor general. Dependiendo de nuestra selección las opciones de personalización varian.
- La función del resto de opciones sirven para personalizar de forma especifica el ancho del contenedor. Es decir, estas opciones nos permiten personalizar secciones de forma diferente a la predeterminada en los ajustes generales.
Módulo de widgets del pie de página de Astra pro
Con el módulo Diseño de sitio te permite agregar 7 diseños diferentes de widgets de pie de página. Para elegir el tipo de estructura de widgets queremos debemos ir a Apariencia/ Personalizar/ Diseño/ Pié de página/ Widgets del pié de página.
- Nuestro primer paso sera elegir que tipo de estructura queremos para nuestro pié de pagina.
- Acto seguido definiremos los margenes que separaran las áreas de widgets.
- Lo siguientes sera definir que ancho queremos para el área de widgets.
- Para finalizar definiremos el grueso del borde del contenedor del pié de página y el color.
- Una vez creada y personalizada para añadir los widgets a cada una de nuestras areas accederemos a Apariencia/ Widgets/.
Módulo de Woocommerce de Astra Pro
Este módulo añade opciones de personalización a las que trae por defecto WooCommerce. Para elegir el tipo de estructura de widgets queremos debemos ir a Apariencia/ Personalizar/ Diseño/ Woocommerce.
Hay que puntualizar que hay algunos ajustes que no se previsualizan en el personador por lo que para ver el resultado de nuestra personalización hay que ir a la página.
General
- Con notificaciones de venta decidiremos el mostrar o no mostrar si un producto esta en oferta o tiene algún descuento. También nos permite definir si simplemente queremos mostrar que porcentaje de desciento tienen aplicado cada uno de los productos.
- Definimos que tipo de placa utilizaremos para mostrar los productos en oferta.
- En icono del carrito en la cabecera definiremos todo lo referente al icono que aparece en el menú: tipo, estilo, color y radio.
- El último punto de este apartado nos lleva a definir si al lado del icono de la tienda queremos que aparezca el titulo de carrito y el total del importe del carrito.
Tienda
- El primer paso sera definir que tipo de layout queremos para nuestro productos en la página de la tienda. Nos permite escoger entre 2 opciones: Información del producto bajo la imagen o a lado de la imagen.
- Seguimos con el número del columnas. Podemos modificar el número de columnas para diferentes pantallas clicando en el icono que aparece con un recuadro azul en la imagen.
- El módulo nos permite escoger entre varios efectos cuando ponemos el puntero sobre las imágenes de los productos.
- Con los siguientes 3 selectores podremos mostrar o ocultar toda la información que aparece antes de los productos.
- En estructura de producto de la tienda determinaremos que información del producto queremos mostrar y el orden en la que queremos mostrarla. Para mostrar/ocultar clicaremos sobre el icono del ojo y para cambiar el orden arrastraremos los bloques hasta la posición deseada.
- Siguiente punto, alineamos la información del producto.
- Los siguientes 2 selectores nos permiten definir la sombra de la caja de los productos.
- En el partado botón definiremos los margenes de botón de añadir al carrito que aparece bajo los productos.
- En paginación de tienda definiremos el tipo y el estilo de la paginación.
- La siguiente opción nos permite echar un vistazo a cualquier producto sin tener que abandonar la página de la tienda.
- Barra lateral fuera del lienzo es una caracteristica del módulo que nos ha gustado mucho. La gran mayoría de tiendas online en su página de productos muestran una columna en la que aparecen filtros de búsqueda o valoraciones de productos. Barra lateral fuera del lienzo te permite utilizar el 100% del ancho para mostrar tus productos y mostrar el contenido de la columna mediante una ventana emergente. El contenido de la ventana emergente se define mediante widgets y para ello deberemos ir a Apariencia/ Widgets.
- Finalizaremos determinado el ancho del contenedor de la tienda.
Producto individual
- En diseño de galería podremos personalizar la disposición de la galería de imágenes de los productos.
- Estructura de producto individual realizaremos las mismas acciones que en la página de la tienda.
- En habilitar Ajax esta opción restringirá la actualización de la página cuando se agregue un producto al carrito.
- La siguiente opción nos permite activar el zoom al ponernos sobre la imagen.
- En navegación de producto definiremos cual sera el aspecto visual de los botones para visualizar el producto anterior o siguiente.
- Llegamos a las pestañas de descripción del producto. Podremos habilitar o deshabilitar esta opción y personalizar el tipo de visualización.
- Finalizaremos la personalización de los productos individuales con los artículos relacionados. En caso de no querer mostrarlos tambíen permite mostrar artículos relacionados con el producto que se muestra. Acabamos con el número de columnas para los diferentes dispositivos.
Página de pago
- Finalizar compra en dos pasos: muestra por separado los detalles de facturación y las secciones de su pedido . Inicialmente, aparecerá el formulario de detalles de facturación, luego el usuario puede ver el resumen del pedido y puede proceder al pago.
- Mostrar notas del pedido: mostrará notas de pedido en la parte inferior de la información de facturación. Contiene notas sobre su pedido, por ejemplo, notas especiales para la entrega.
- Mostrar campo Aplicar cupón: el campo del cupón estará visible en la parte superior de la página de pago.
- Página de pago sin distracciones: cuando habilita esta opción, el menú en el encabezado y el primer pie de página del sitio web desaparecen.
- Usar etiquetas como marcadores de posición: mostrará etiquetas de formulario como un marcador de posición. Esto reducirá la altura del formulario de información de facturación.
- Formulario de compra persistente: conservará los campos del formulario de Checkout incluso si el visitante vuelve a cargar accidentalmente la página.
- Finalizamos definiendo el ancho de la página de págo.
Plugins gratuitos para añadir funciones a Astra
- Ultimate Addons for Gutenberg: Editor visual para Gutenberg con más de 20 módulos.
- Sidebar Manager: Permite crear y personalizar diferentes sidebars.
- Custom Typekit Fonts: Te permite insertar cualquier fuente de Adobe.
- Astra Widgets: Añade widgets a los nativos de WordPress.
- Custom Fonts: Inserta fuentes personalizadas en formato woff2, woff, ttf, svg, eot y otf.
- Astra Hooks: Este plugin permite insertar código personalizado, shortcodes o javascript en los diferentes hooks de la plantilla.
- Mega Menu for Astra: Añade la función para crear un mega menú.
- Home Page Banner for Astra Theme: Crea un banner personalizado en tu página de inicio.
- Customizer Search: Añade un filtro de búsqueda a tu página del personalizador de WordPress.
Astra Starter Sites Pro
Astra Starter Sites es un plugin en el que encontraremos una biblioteca con más de 100 plantillas listas para importar a tu WordPress. Unicamente deberás tener instalado el plugin del editor visual con el que vayas a trabajar y los necesarios para el diseño de esa plantilla. La mayoría descargables desde el repositorio oficial.
El plugin incluye 2 filtros para realizar búsquedas de plantillas: el primero para filtrar por editor visual y el segundo para filtrar por temática.
Concusión
Astra Pro es un tema versátil y dinámico, con infinidad de opciones de personalización y configuración, una velocidad de carga muy baja y muy fácil de usar.
Si no tienes conocimientos de programación y no quieres limitar tus opciones, si es recomendable hacerte con cualquier de los planes profesionales que ofrece Brainstorm Force.
A pasado a ser uno de nuestros temas favoritos junto a Genesis, Generatepress y Hello Elementor.
Excelente artículo. Me ha servido de ayuda para decidirme a la hora de comprar la versión pro de la plantilla.
Muchas gracias por tu comentarios. Nos agrada saber que te ha servido de ayuda.
Después de leer vuestro artículo me anime a comprar la versión pro de Astra theme y debo decir que la plantilla es una maravilla. Las limitaciones en cuanto a personalización son practicamente inexistentes. Gracias por darme a conocer este tema. Un saludo
Hola Ramiro, bienvenido al club de los enamorados de Astra. Que la disfrutes. Un saludo
¡Qué gran tutorial sobre Astra! Me ha ido de fábula para darme cuenta de que es la plantilla que necesito para mi proyecto web. ¡Gracias!
Muchas gracias por tu comentario, Amelia. Mucha suerte con tu proyecto web. Un saludo
Excelente. Soy novato en esto de WordPress y creo que algo así es lo que necesito. Muchas gracias, gran tutorial.
Un saludo
Gracias por tu comentario Silvio. Es una gran plantilla, no te arrepentiras.
Suerte con tu proyecto.
El mejor tutorial que he encontrado hasta ahora de este fantástico tema. Recomendado 100% Todo una joya.
Tengo una pequeña duda que no sé si me la podríais resolver. Estoy haciendo una web de prueba para un cliente y quiero colocar encima de la cabecera, en el área de widgets, los horarios y el teléfono de contacto (con sus respectivos iconos). Me gustaría que se mostrara uno encima del otro, es decir:
(icono telf) +34 123456789
(icono horarios) lun – viernes 9:00 a 17:00
He probado con html y con widgets de foto + texto separado por columnas, pero no consigo que se muestre como quiero. ¿alguna sugerencia al respecto?
Gracias de antemano y enhorabuena por el magnífico tutorial
Hola Alejandro:
Primero de todo agradecerte tu comentario y felicitarte el año nuevo.
¿Trabajas con Elementor pro?
Buenas tardes, soy nueva en este mundo tan apasionante.
He estado realizando pruebas con la plantilla gratuita de Astra el modelo Bistro, (video en pagina inicio) y para el proyecto que tengo que realizar es ideal.
Sería cambiar fotos, hacer un video de presentación, texto y poco más. Editando la plantilla y un poco de Elementor me puede servir.
Mi problema es que necesito gestionar un portfolio por producto, de cada imagen al pulsar debe de abrirse un pequeño contenido de texto y varias imágenes de el producto en cuestión.
Como puedo gestionar todo este conjunto.
Compro la plantilla y busco un plugin para el portfolio o puedo usar la plantilla gratuita y comprar un plugin
Muchas gracias
Hola Paqui, por favor, escríbenos desde el formulario de contacto de la web para aclarar algunas dudas.
Gracias.
Hola!
Utilizo el tema astra y elementor… pero he instalado yoast seo y en la pagina de la home me ha duplicado el titulo H1, sabrias como quitar uno de los dos?
Gracias por este pedazo de tutorial!!!
Prueba deshabilitando el titulo desde la opciones de Astra.
Un saludo.
Saludo, aún no he usado esa plantilla, pero me parace genial sus contenido
Vale mucho la pena, tanto su versión gratuita como la de pago. Dale una oportunidad.