Saltar al contenido

Tutorial Astra Theme. El Mejor Tema de WordPress

Uno de los mejores, más rápidos, personalizables y gratuitos de Wordpress.

astra theme

Astra Theme es una de las maravillas que se pueden encontrar en WordPress totalmente gratis.

Sin ningún tipo de conocimiento en diseño web, se pueden lograr páginas super profesionales y, lo mejor de todo, es una plantilla muy ligera.

¡Se pueden lograr velocidades de carga de menos de un segundo!

¿Te interesa saber más de Astra Theme? Sigue leyendo…

Características de Astra

  • Funciona perfecto con Elementor.
  • Funciona perfecto con el plugin Ultimate Addons for Gutenberg.
  • Tiene una inmensa librería de plantillas ya diseñadas que puedes usar en tus webs.
  • Todo se puede modificar desde el personalizador de wordpress.
  • Es gratis.

Es muy divertido trabajar con Astra. Tiene una enorme posibilidad de cutomización sin consumir recursos en exceso.

Esa es la combinación que todos buscamos cuando elegimos un theme de wordpress: buen rendimiento y diseño.

En esta guía te mostraremos, de la forma más visual posible, las webs que puedes hacer con Astra.

Antes de comenzar…

Instala el theme + el plugin Ultimate Addons for Gutenber. Ambos son de Brainstorm Force. También puedes instalar Starter Templates si quieres comenzar con una plantilla pre diseñada.

Recuerda que puedes trabajar con Elementor si así lo deseas, pero en esta ocasión, te mostraremos lo que puedes hacer sin la necesidad de usarlo.

Cabecera y footer

La cabecera es uno de los elementor que más profesionalidad y credibilidad le dá a un sitio web, junto con el footer. Son detalles imprecindibles que marcan la diferencia.

Cabecera

cabecera en Astra

Mira cómo puedes construír esta maravillosa cabecera, simplemente usando el plugin que te recomendamos al comienzo, y Astra versión gratis.

En principio, tenemos que lograr que la cabecera que contiene al menú y al logo sea transparente, y esto lo hacemos desde Apariencia > Personalizar > Header > Transparent Header.

Y allí cuentas con una enorme disponibilidad de personalización para la cabecera transparente. Pruébalas y toca sin miedo.

cabecera transparente astra

Lo siguiente que haremos, es colocar un elemento del menú personalizado. Lo puedes obserbar en la imagen de la cabecera. El que dice: CONTRATAR.

En otros themes se requiere de seleccionar el elemento y editarlo con css, en Astra sólo tienes que ir a Apariencia > Personalizar > Header > Primery Menu, y seleccionar en la casilla «Last Item in Menu» lo que quieres agregar al final del menú.

Puede ser un botón, un widget, un ícono o un buscador.

También tienes la opción de ocultarlo en dispositivo móvil si no te gusta como queda.

Como ves, todo se puede personalizar y modificar ¡Es genial! Sigamos

Footer

footer con astra theme

En este caso, decidimos utilizar el plugin Ultimate Addons for Gutenberg para maquetar el footer, y añadirlo como bloque reutilizable.

Tan solo bastó con añadirlo manualmente a cada una de las páginas, y listo.

Esto se puede aplicar perfectamente para sitios enormes, y no hay necesidad de que lo hagas manualmente, sino que puedes hacerlo mediante el uso de hooks.

Lo veremos más adelante.

Secciones de ancho completo

seccion ancho completo con astra theme

Para este tipo de secciones, también utilizaremos el plugin Ultimate Addons for Gutenber (te avisamos que era un plugin imprescindible), al igual que lo hicimos con la cabecera principal del sitio.

En la columna de edición de bloques, configuraremos la sección para que abarque todo el ancho de la pantalla, y además le colocaremos una capa overlay para que el texto dentro resalte más.

Tan solo basta con añadir las columnas (también con los bloques del plugin) y colocar el contenido dentro de ellas.

Aquí simplemente colocamos una caja de información con un título, un subtítulo y un enlace, pero puedes añadir formularios de suscripción, promoción de eBooks, banners, productos, lo que sea que quieras destacar, Astra te permite hacerlo de forma super visual, y sin saber nada de diseño.

Personalización

Aunque se podría dedicar un artículo entero a la personalización de Astra, ya que cuenta con muchas opciones en este apartado, lo que intentaremos hacer es mencionar lo más destacable, lo que no contienen otros themes.

Aunque, como siempre, es posible que se nos quede algo olvidado.

Ancho del contenido

ancho del contenido astra theme

Esta es una característica que NO todas las plantillas tienen, pero hay una gran cantidad que sí.

Lo diferente de Astra, es que ofrece la posibilidad de cambiar el ancho del contenido difereciando los post types. Es decir, un ancho para las páginas, que puede ser distinto al ancho de las entradas, o archivos, por ejemplo.

Botones

Otra característica muy buena de Astra, es que te permite personalizar los botones desde el personalizador. Tanto el color, como la tipografía y el ancho, tanto para escritorio como para dispositivos móviles.

Aunque desde los bloques de Gutenberg se puede hacer, sí que es bueno tener una base de customización que se pueda aplicar a todo el sitio, para mantener la identidad en cuanto a colores y diseño.

Widgets

La plantilla cuenta con 8 areas de widgets, de las cuales 6 son solamente para el footer, lo que te permite personalizar el footer al máximo, siendo este un sector de la web que se imprimirá en todas las url´s del sitio.

Las otras dos son para la cabecera y para la barra lateral, ya vistas en la mayoría de las plantillas.

Entradas de blog

De momento, ya podría decirse que con los conocimientos y la personalización que cuenta Astra Theme versión gratuita, podemos maquetar una home page de forma muy visual, una página de sobre nosotros, un formulario de contacto bonito para captar suscriptores pero…

¿Qué pasa con el contenido dinámico? ¿Cómo podemos tener un diseño personalizado sin tener que editarlo manualmente cada vez que añadimos un nuevo artículo?

Bueno, Astra también te permite esta opción en la barra lateral derecha, en donde puedes seleccionar los elementos que quieras modificar, agregar o quitar. Pero no es mucho, espera a ver lo que encontrarás en la versión PRO…

seccion astra para entradas

Hasta aquí, puede que ya te hayas convencido de que Astra Theme es el tema gratuito más personalizable de todos, y además, un theme muy ligero. Pero, todavía falta la versión PRO…

Y si, como casi todo theme gratuito, tiene su versión PRO. Que puede que no sea necesario para ti, y es que Astra es tan personalizable que se pueden hacer maravillas con su versión free.

Pero su versión premium es como la cereza del postre. Esos detalles que se le ocurren a todo desarrollador web que, normalmente se van añadiendo con css, php, o incluso tirando de algun plugin, Astra los incluye en su versión premium.

¿Quieres saber cuáles son? Bien, te los comentamos:

Procedemos a instalar la versión PRO, y comenzamos a instalarle sus cosillas…

Astra Theme – versión PRO

addons astra pro

Una vez instalado el plugin de convierte tu tema gratuito en pro, podrás activar los addons que quieras utilizar.

Lo más recomendable es activar todos, probar lo que te sirve y lo que no, y luego desactivar lo que no usarás para no gastar recursos.

Scroll to top

Se trata del pequeño botón para «ir arriba» que se sitúa en la parte derecha inferior de la web. Claro está que ésta no es una funcionalidad por la que comprar la versión pro de Astra, pero suma, y allí está.

Opciones de cabecera

Y aquí sí que empieza lo bueno. Si ya te parecía una pasada la cabecera transparente, Astra PRO suma 3 opciones más para personalizar el diseño del header: above header, below header, sticky header.

cabecera astra pro

Como verás en la imagen, hemos agregado contenido por debajo y por encima de nuestra cabecera principal. Éste contenido puede ser html y texto, un widget, o un buscador como el que se ve a la derecha.

El sticky header, o cabecera fija, nos permite que la cabecera se sigua mostrando cuando el usuario haga scroll down.

Cabeceras y Layouts personalizados

Al instalar el plugin de Astra PRO, se nos habilita una opción para añadir cabeceras y layouts personalizados.

En el caso de las cabeceras, sirve, por ejemplo, para añadir un diseño predeterminado para diferentes tipos de contenido.

En nuestro caso, diseñamos una cabecera de ancho completo para las entradas del blog, en menos de un minuto.

entrada con cabecera personalizada

Layouts personalizados + Hooks

Al igual que con las cabeceras, lo mismo ocurre con los layouts, y es que Astra PRO te da la posibilidad de crear layouts para cualquier tipo de contenido, sin saber nada de diseño ni programación php.

Por ejemplo, al comienzo del artículo te mentionamos como crear un footer. Bien, el layout del footer puedes crearlo aquí mismo, utilizando el maquetador de Gutenberg.

También puedes maquetarlo con Elementor o Beaver si tienes alguno de ellos instalado.

Los layouts personalizados te permiten editar también los hooks, por lo que las opciones de personalizar tu Astra se vuelven infinitas.

En nuestro ejemplo, utilizamos el hook astra_entry_content_after para añadir un formulario de suscripción al newsletter debajo de todos los artículos del blog.

Como ves, tus artículos del blog pasaron de tener un contenido plano de solo texto, a obtener una cabecera personalizada y un formulario de captación de leads que se imprime automaticamente debajo de cada post.

Conclusión… Entonces, ¿Vale la pena la versión PRO?

Llegado al final del artículo, la pregunta final sería… ¿pagar por la versión pro o seguir con la gratuita?

Nuestra recomendación, explota todo lo que puedas la versión free.

Intenta lograr el máximo de customización tirando del plugin Ultimate Addons y la personalización del core de Astra.

¿Te gustó de lo los hooks, el diseño en los artículos y las cabeceras personalizadas?

Pues bueno, Astra Pro es la opción más completa para este tipo de diseño web para no desarrolladores.

Incluso si eres desarrollador, sabrás el tiempo que requiere hacer este tipo de procesos de forma manual, y valorarás el dinamismo que te ofrece trabajar con Astra.

¿Es Astra theme el mejor tema para WordPress?

Hay temas para una cosa y temas para otra. Probablemente, para diseño bonito y buen rendimiento, si, Astra es el mejor tema de todos.

5/5 (1 Review)