Hace unos meses hablamos sobre uno de los temas premium más completos del mercado: Total, que además de incluir una enorme variedad de diseños predefinidos, cuenta con una sólida estructura personalizable y apta tanto para principiantes como para desarrolladores expertos.

Hoy vamos a recomendar un tema gratuito que en este último tiempo ha estado ganando renombre en la comunidad de WordPress, gracias a su increíble facilidad de uso, su velocidad y su flexibilidad para convertirlo en la base fundamental de todo sitio que use un constructor de páginas.

Astra, por Brainstorm Force, se presenta como el tema más rápido, hermoso y totalmente personalizable, adecuado para blogs, portafolios personales y sitios corporativos.

Es muy liviano (menos de 50KB en la interfaz del usuario), y ofrece una velocidad sin par. Construido con la SEO en mente, Astra incluye código schema.org integrado, así que a los buscadores les encantará.

También ofrece muchas opciones de barras laterales y áreas de widgets, que brindan un control absoluto de las personalizaciones. Más aún, incluye características especiales y plantillas, otorgando la libertad de elegir el constructor de páginas preferido, para que el usuario pueda crear contenidos y transformar la apariencia de manera rápida y sencilla.

Algunas de sus características:

El foco principal de Astra está puesto en el rendimiento. En lugar de jQuery usa Vanilla JavaScript y necesita solo 50 KB de recursos, lo cual hace que la carga sea súper rápida. Pero la fortaleza de Astra no reside únicamente ahí, sino que se complementa con las incontables posibilidades de personalización y con la herramienta de importación de sitios prediseñados en un par de clics.

Construir un sitio web atractivo, rápido, adaptable y amigable con los buscadores es más fácil que nunca con Astra. Y lo mejor de todo, es que es gratuito. 🙂

En esta entrada vamos a seguir cada uno de los pasos necesarios para crear una web profesional con Astra y los plugins más populares y vigentes que están disponibles en el repositorio de WordPress.

Tutorial de Astra

Descargar traducciones

El tema Astra y el plugin Astra Free Sites tienen traducción al español en espera de ser aprobada en el repositorio. Mientras tanto, se puede descargar de aquí.

Instalar el tema

Astra se instala como cualquier tema del repositorio de WordPress, buscándolo en Apariencia > Temas > Añadir tema.

Una vez instalado y activado, veremos una apariencia muy simple en la portada y estaremos listos para añadir contenido y personalizar.

Astra - Página frontal

Instrucciones para personalizar el tema

Toda la personalización de Astra se lleva a cabo desde el personalizador integrado de WordPress. Al hacer clic en Apariencia > Personalizar veremos todas las opciones disponibles, junto con la vista previa en vivo.

Astra - Personalizador

Obtenga más con Astra Pro

Este es un enlace a la web de la versión premium de Astra. Esta versión es un complemento que se instala como plugin e incluye características adicionales como la cabecera fija o transparente, los encabezados de página, más opciones de color y de tipografías, más herramientas para el pie de página, un botón para volver a la parte superior de la página y hooks avanzados.

Identidad del sitio

Aquí podemos añadir un logo para que aparezca en la cabecera de la página. Hacemos clic en el botón Elegir logo, buscamos la imagen en la Biblioteca multimedia o subimos una nueva y hacemos clic en Guardar/Guardar y publicar.

Además, podremos configurar el título del sitio, la descripción y el icono del sitio (favicon) tal como lo haríamos con cualquier otro tema de WordPress. También podemos elegir no usar un logo y mostrar el título y descripción del sitio en formato texto, seleccionando las casillas Mostrar título del sitio y Mostrar descripción corta.

Astra - Identidad del sitio

Diseño > Diseño del sitio

  • Ancho del contenedor – Aquí podemos asignar el ancho del contenedor. La medida en píxeles puede ser un mínimo de 768 y un máximo de 1920. El valor predeterminado es 1200.

Astra - Diseño del sitio

Diseño > Contenedor

Aquí podemos elegir entre cuatro estilos de diseño para el contenedor del sitio. Podremos incluso asignar cada diseño individualmente a las páginas, a las entradas o a los archivos.

Astra - Diseño del contenido

Los tipos de diseño disponibles son:

  • Recuadro – Este diseño muestra el área del contenido y los widgets en un recuadro de color distinto del fondo general del sitio.

Astra - Contenido en recuadro

  • Recuadro de contenido – Este diseño muestra solo el área del contenido en un recuadro de color distinto del fondo general del sitio.

Astra - Recuadro de contenido

  • Ancho completo / Contenido – Este diseño muestra el contenido y la barra lateral en ancho completo, sin recuadro.

Astra - Contenido ancho completo

  • Ancho completo / Estirado – Este diseño muestra el contenido y la barra lateral en ancho completo, hasta los extremos de la pantalla (útil para constructores de página).

Astra - Contenido ancho completo / Estirado

Diseño > Cabecera

  • Cabecera – Aquí podemos elegir entre los tres diseños de cabecera disponibles: Logo a la izquierda, Logo centrado y Logo a la derecha.
  • Desactivar menú – Seleccionamos esta casilla si no deseamos usar un menú en la cabecera.
  • Elemento de menú personalizado – Aquí podemos elegir mostrar un elemento personalizado en el menú, tal como un botón que resalte con un color y estilo distinto, un campo de búsqueda, un widget o cualquier texto / HTML.
  • Tamaño del borde inferior – Aquí podemos asignar el peso del borde inferior de la barra del menú (el valor predeterminado es de 1px; llevar a 0 para no mostrar el borde).
  • Color del borde inferior – Si el borde tiene al menos 1px podemos elegir el color que queramos.
  • Ancho de cabecera – Aquí podemos elegir mostrar la cabecera con el ancho del contenido del sitio, o con el ancho completo de la pantalla.
  • Etiqueta del menú en dispositivos pequeños – Aquí podemos escribir el texto (por ejemplo, “Menú”) que se mostrará junto al icono hamburguesa cuando el sitio se visualice en celulares y tablets. Dejar vacío para no mostrar ningún texto.
  • Alineación de cabecera en móviles – Aquí podemos elegir la posición del icono hamburguesa respecto del logo: Apilado (el icono del menú se mostrará debajo del logo) o Integrado (el icono del menú se mostrará en línea con el logo, en la parte derecha).

Astra - Cabecera

Diseño > Blog / Archivo

  • Contenido de entrada del blog – Aquí podemos seleccionar si la entrada en la página del blog mostrará un extracto o el contenido completo.
  • Estructura de entrada del blog – Aquí podemos elegir mostrar la imagen destacada y el título e información meta de la entrada, además de asignarles la posición. Haremos clic en el icono del ojo para ocultar o mostrar la sección, y podemos arrastrar y soltar los bloques para cambiar la posición.
  • Información meta del blog – Aquí podrá elegir mostrar los comentarios, la categoría, el autor, la fecha de publicación y las etiquetas de la entrada, además de asignarles el orden. Haga clic en el icono del ojo para ocultar o mostrar la sección, y arrastre y suelte los bloques para cambiar el orden.
  • Ancho del contenido del blog – Aquí podrá asignar el ancho del contenedor para las páginas del blog.

Astra - Blog / Archivo

Diseño > Entrada individual

  • Estructura de entrada individual – Aquí podemos elegir mostrar la imagen destacada y el título e información meta de la entrada, además de asignarles la posición. Haremos clic en el icono del ojo para ocultar o mostrar la sección, y podemos arrastrar y soltar los bloques para cambiar la posición.
  • Información meta de entrada individual – Aquí podemos elegir mostrar los comentarios, la categoría, el autor, la fecha de publicación y las etiquetas de la entrada, además de asignarles el orden. Haremos clic en el icono del ojo para ocultar o mostrar la sección, y podemos arrastrar y soltar los bloques para cambiar el orden.
  • Ancho del contenido de entrada individual – Aquí podemos asignar el ancho del contenedor para las entradas individuales del blog.

Astra - Entrada individual

Diseño > Barra lateral

  • Diseño predeterminado – Aquí podemos asignar la ubicación global de la barra lateral (a la izquierda o a la derecha), o elegir no mostrarla, seleccionando la opción Sin barra lateral.
  • Páginas – Aquí podemos asignar la ubicación de la barra lateral en las páginas (a la izquierda o a la derecha), o elegir no mostrarla, seleccionando la opción Sin barra lateral.
  • Entradas del blog – Aquí podemos asignar la ubicación de la barra lateral en las entradas (a la izquierda o a la derecha), o elegir no mostrarla, seleccionando la opción Sin barra lateral.
  • Archivos de entradas del blog – Aquí podemos asignar la ubicación de la barra lateral en las páginas de archivo (a la izquierda o a la derecha), o elegir no mostrarla, seleccionando la opción Sin barra lateral.
  • Ancho de la barra lateral – Aquí podemos asignar el ancho de la barra lateral. La medida en porcentaje puede ser un mínimo de 15 y un máximo de 50. El valor predeterminado es 30.

Astra - Barra lateral

Diseño > Widgets del pie de página

  • Diseño de widgets del pie de página – Aquí podemos desactivar o mostrar los widgets del pie de página. La versión gratuita de Astra incluye cuatro columnas de widgets.

Astra - Diseño de widgets

Diseño > Barra del pie de página

  • Diseño de la barra del pie de página – Aquí podemos elegir desactivar la barra del pie de página (donde se muestran los créditos), o alternar entre dos diseños diferentes: con una o dos secciones centradas o con una o dos secciones alineadas a la izquierda y/o derecha.
  • Sección 1 – Aquí podemos elegir el tipo de contenido que se mostrará en la primera sección del pie de página: Ninguno para desactivar, Menú del pie de página para asignar un menú de enlaces (previamente creado), Texto personalizado o Widget. El texto personalizado puede contener código HTML y shortcodes tales como [current_year] para mostrar el año en curso, [site_title] para mostrar el título del sitio y [theme_author] para mostrar el nombre del autor (Astra).
  • Sección 2 – Aquí podemos elegir el tipo de contenido que se mostrará en la segunda sección del pie de página: Ninguno para desactivar, Menú del pie de página para asignar un menú de enlaces (previamente creado), Texto personalizado o Widget. El texto personalizado puede contener código HTML y shortcodes tales como [current_year] para mostrar el año en curso, [site_title] para mostrar el título del sitio y [theme_author] para mostrar el nombre del autor (Astra).
  • Ancho de la barra del pie de página – Aquí podemos elegir mostrar la barra del pie de página con el ancho del contenido del sitio, o con el ancho completo de la pantalla.
  • Borde superior de la barra del pie de página – Aquí podemos asignar el peso del borde superior de la barra (el valor predeterminado es de 1px; llevar a 0 para no mostrar el borde).
  • Color de borde superior de la barra del pie de página – Si el borde tiene al menos 1px podrá elegir el color que desee.

Astra - Diseño del pie de página

Colores y fondo > Colores de base

  • Color del tema / Color de enlace – Aquí podemos elegir el color de acento del tema y de los enlaces.
  • Color de texto – Aquí podemos elegir el color de los textos.
  • Color de enlace al posar el puntero – Aquí podemos elegir el color que tomarán los enlaces al posar el puntero.
  • Color de fondo – Aquí podemos elegir el color de fondo del sitio.

Astra - Colores

Colores y fondo > Widgets del pie de página

Aquí podemos elegir los colores de los siguientes elementos de los widgets del pie de página: título, texto, enlace, enlace al posar el puntero y fondo.

Astra - Colores de widgets

Colores y fondo > Barra del pie de página

Aquí podemos elegir los colores de los siguientes elementos de la barra del pie de página: texto, enlace, enlace al posar el puntero y fondo.

Astra - Colores del pie de página

Tipografía > Tipografía de base

  • Cuerpo y contenido – Aquí tendremos el control sobre la apariencia de las fuentes del contenido del sitio: la familia, que podremos elegir entre más de 800 fuentes de Google; el peso, la transformación del texto, el tamaño de la fuente (disponible para las vistas de escritorio, tablet y celular), la altura de línea y el margen inferior del párrafo.
  • Encabezados – Aquí podemos seleccionar una fuente para los títulos, además del peso y la transformación de texto.

Astra - Tipografía de base

Tipografía > Contenido

Aquí podemos controlar los tamaños de los títulos del contenido, tanto para la vista de escritorio como de dispositivos móviles.

Astra - Tipografía del contenido

Tipografía > Blog / Archivo

Aquí podemos controlar los tamaños de los títulos de las páginas de archivo del blog, tanto para la vista de escritorio como de dispositivos móviles.

Astra - Tipografía del blog

Tipografía > Página individual/ Entrada

Aquí podemos controlar los tamaños de los títulos de las páginas de archivo del blog, tanto para la vista de escritorio como de dispositivos móviles.

Astra - Tipografía de entrada

Botones

Aquí tendremos el control sobre la apariencia de los botones del sitio, que incluye el color de texto, el color de texto al posar el puntero, el color de fondo, el color de fondo al posar el puntero, el radio del borde del botón, el relleno vertical y el relleno horizontal.

Astra - Botones

Menús > Ubicaciones de menús

Este tema soporta dos menús: Menú primario (en la cabecera) y Menú del pie de página. Podremos seleccionarlos de los desplegables correspondientes, y editar el contenido de los menús desde el administrador de WordPress Apariencia > Menús, o desde el enlace Editar menú de este panel.

Astra - Menús

Widgets

Aquí tendremos acceso a las áreas de widgets disponibles. Tener en cuenta que para que aparezcan todas, deberán estar seleccionadas las opciones de widgets en las secciones correspondientes. Por ejemplo, para que se muestre el área de widgets en la cabecera, debe estar seleccionado Widget en el panel Diseño > Cabecera > Elemento de menú personalizado. Para que se muestren las dos áreas de widgets en la barra del pie de página, debe estar seleccionado Widget en Diseño > Barra del pie de página > Sección 1 / Sección 2. Para que se muestren las cuatro áreas de widgets del pie de página, debe estar seleccionado el diseño en el panel Diseño > Widgets del pie de página.

Astra - Áreas de widgets

Importar diseños predefinidos con Astra Sites

Hasta aquí hemos visto las herramientas principales del tema gratuito Astra, que no son pocas, si se me permite afirmar.

Pero el atractivo de este tema no termina aquí, sino que ofrece un complemento ideal para tener una web lista en cuestión de minutos, y es el plugin Astra Free Sites. Se trata de una biblioteca de diseños listos para importar en unos pocos pasos. Veremos en esta sección el proceso de importación de un sitio entero y listo para personalizar:

Instalar y activar Astra Free Sites

Este plugin se encuentra disponible para descarga e instalación desde nuestro escritorio de WordPress. Iremos a Plugins > Añadir nuevo y escribiremos Astra Sites en el campo Buscar plugins…

Astra Sites - Biblioteca

Una vez instalado y activado, tendremos acceso a la biblioteca de sitios desde el menú Apariencia > Astra Sites – Lite.

Astra Sites - Biblioteca

Al día de hoy la biblioteca gratuita cuenta con dieciséis diseños que abarcan una gran gama de categorías: desde reparación de autos hasta dentistas, pasando por servicios para mascotas, bodas y jardinería, entre otras.

Cada diseño se puede previsualizar con un clic sobre la miniatura, y en la vista previa se listarán los plugins necesarios para que el sitio importado pueda funcionar correctamente con el diseño elegido.

Astra Sites - Vista previa

La mayoría requiere Elementor, y otros plugins complementarios como Contact Form 7 y el paquete de widgets de SiteOrigin. Otros usan la versión Lite del conocido Beaver Builder. Lo importante es que todos se pueden instalar con un clic, y una vez instalados estaremos listos para importar los diseños.

Para este ejemplo vamos a elegir el diseño Agency. Le damos clic a Detalles y vista previa y en la siguiente pantalla instalaremos los plugins necesarios.

Astra Sites - Instalar plugins necesarios

Al terminar de instalar y activar los plugins, se habilitará el botón Importar este sitio.

Astra Sites - Importar sitio

Un clic en el botón, y aparecerá un mensaje de advertencia con la siguiente información:

Ejecutar la importación de demo hará su sitio similar al nuestro. Por favor, tenga en cuenta –

1. Se recomienda ejecutar la importación en una instalación nueva de WordPress.
2. La importación del sitio no elimina ninguna página o entrada. Sin embargo, puede sobrescribir el contenido existente.
3. Los archivos multimedia con derechos de autor no se importarán. En su lugar, se reemplazarán con marcadores de posición.

Le damos clic a Aceptar y aguardaremos hasta que se complete el proceso de importación. Esto puede llevar varios minutos, dependiendo de la cantidad de imágenes y velocidad carga de los servidores. Cuando se haya llevado a cabo la importación completa, veremos el siguiente botón:

Astra Sites - Ver sitio

Sí, ¡listo! Eso es todo 🙂 En cuestión de minutos tenemos un sitio idéntico a este, y estamos en condiciones de editarlo con nuestros propios contenidos.

Astra Sites - Sitio personalizado

Hasta aquí, la presentación de Astra, el tema gratuito para WordPress más prometedor del año. La empresa Brainstorm Force está abocada de lleno a promocionarlo como su producto de bandera y promete ir agregando a su biblioteca de sitios gratuitos de dos a cuatro diseños nuevos por mes. También ofrece plugins complementarios para Astra que se pueden encontrar en el repositorio oficial:

  • Custom Fonts – Permite subir archivos de fuentes adicionales para poder usar en el sitio y aplicar desde el personalizador. Los formatos admitidos son woff2, woff, ttf, svg y eot.
  • Astra Hooks – Permite usar hooks de acciones para agregar código o contenido al tema Astra desde el personalizador.
  • Switch To Astra – Permite convertir automáticamente todas las páginas creadas con los constructores Elementor, Beaver Builder y Visual Composer en páginas de ancho completo en el caso de cambiar de un tema anterior a Astra.
  • Lightweight Sidebar Manager – Permite crear barras laterales personalizadas y mostrarlas de manera condicional. Se pueden usar barras ilimitadas, colocarlas en entradas o páginas específicas (también en tipos de entradas personalizadas) y hacerlas visibles de acuerdo con el perfil del usuario. Este plugin es compatible con cualquier tema.

En la próxima entrega repasaremos las características completas del plugin Astra Pro.

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)