Lección 07

Personalizar Astra: el tema WordPress

En la lección, Astra: el mejor tema para WordPress, conocimos este fantástico tema que será el que utilicemos para el desarrollo de este curso de WordPress.

En esta lección veremos todas las opciones de personalización que nos ofrece Astra para diseñar nuestro sitio web.

Índice del contenido
    Add a header to begin generating the table of contents

    1. Personalizando Astra

    Para conocer todas las opciones de personalización que ofrece Astra, dirígete a Apariencia >> Personalizar.

    Opciones de personalización de Astra
    Opciones de personalización de Astra

    1.1 Global

    En este apartado vamos a configurar todas las opciones globales del tema.

    I. Tipografía

    La tipografía se refiere a las fuentes (texto) que vamos a utilizar en nuestro sitio web.

    • Tipografía de base
      Aquí vamos a seleccionar la fuente que va a tener todo nuestro contenido como párrafos, el menú principal, menú de pie de página y las barras laterales. Además puedes configurar otros valores que tendrá la fuente elegida.
    Configurando la tipografía de base en Astra
    Configurando la tipografía de base en Astra
    • Encabezados
      Los encabezados serán el título y los subtítulos de nuestro sitio web. Suelen ser 6 encabezados y se designan con H1 hasta H6 (la H es de Heading, término en inglés). Puedes seleccionar una fuente para todos los encabezados o una para cada uno. Además puedes configurar otros valores que tendrá la fuente elegida.
    Configurando la tipografía de los encabezados en Astra
    Configurando la tipografía de los encabezados en Astra

    Como ayuda puedes visitar la página de Google Fonts para ver sus fuentes y elegir las que más te gusten para tu sitio web.

    II. Colores

    • Colores de base
      En este apartado vamos a indicar los colores que vamos a utilizar en nuestro sitio web.

    Cuando se diseña un sitio web, es necesario indicar un color base (o color principal llamado también Acent) que se utilizará en los principales elementos como enlaces, menú, bordes entre otros.

    En WordPress, los colores se asignan en formato hexadecimal (HEX) o RGBA y suelen coincidir con el color principal del logo.

    Configurando los colores en Astra
    Configurando los colores en Astra

    III. Contenedor

    Aquí tendremos que asignar el valor máximo del ancho del contenido (Anchura) que tendrá nuestro sitio web. También podemos indicar el tipo de diseño que tendrán todos los tipos de contenido como páginas y entradas.

    El valor del campo Anchura, será el tamaño máximo que habrá, de izquierda a derecha, para alojar el contenido de nuestro sitio web incluyendo la cabecera y el pie de página.

    Por defecto Astra asigna 1200px pero puedes modificarlo según el tipo de contenido que vayas a alojar.

    Configurando el contenedor en Astra
    Configurando el contenedor en Astra

    IV. Botones

    Aquí podemos configurar el estilo que tendrán los botones por defecto. Estos botones pueden ser los de un formulario de contacto (botón Enviar), los del formulario de comentarios del blog entre otros.

    Configurando los botones en Astra
    Configurando los botones en Astra

    1.2 Cabecera

    Desde mi punto de vista esta es la parte más importante de todo tema: la cabecera. Aquí es donde vamos a configurar el logo, el menú principal y algunos detalles adicionales de nuestro sitio web.

    I. Identidad del sitio

    En este apartado es donde subiremos el logo de nuestro sitio web.

    En la lección, crear un logo en WordPress, puedes encontrar una completa información para que aprendas a crear y a subir un logo a tu sitio web con WordPress.

    Una opción interesante que suelen ofrecer los temas WordPress son los iconos del sitio. Estos, también conocidos como favicon, son los que se muestran en las pestañas de los navegadores (Chrome, Safari, Firefox...).

    Suele ser una imagen cuadrada, en formato PNG (favicon.png) y WordPress recomienda que las dimensiones sean de, al menos, 512px x 512px. Esta imagen puede ser el logo, parte de el o una imagen relacionada con la temática del sitio web.

    Configurando el logo y favicon en Astra
    Configurando el logo y favicon en Astra

    II. Cabecera principal

    En este apartado podemos configurar la distribución de la cabecera de nuestro sitio web tanto en PC como en versión RESPONSIVE.

    Configurando la cabecera principal en Astra
    Configurando la cabecera principal en Astra

    II. Menú primario

    En este apartado podemos configurar y dar estilo al menú principal tanto en versión PC como en versión RESPONSIVE.

    Configurando el menú primario en Astra
    Configurando el menú primario en Astra

    En la lección, menús en WordPress, veremos con más detalles como configurar esta opción de Astra.

    IV. Cabecera transparente

    Una cabecera transparente es aquella que no tiene color de fondo y se superpone sobre el contenido principal. Un ejemplo de esto es una página con una imagen o vídeo apantallado donde el logo y el menú se encuentran encima de esta imagen o video.

    Por lo general, tanto el logo como el menú principal, suelen ser de color blanco para que se puedan visualizar sobre el contenido que, normalmente, es de varios colores.

    Marcando la casilla Activar en toda la web, aparecen otras opciones del tema para que puedas configurar y dar estilo al logo, menú principal y resto de contenido cuando se activa la cabecera transparente. También puedes desactivar este tipo de cabecera en algunas de las secciones principales del sitio web.

    Configurando la cabecera transparente en Astra
    Configurando la cabecera transparente en Astra

    1.3 Migas de pan

    Las "migas de pan" es lo que se conoce como Breadcrumbs. Estos son los típicos enlaces, en letras más pequeñas, que suelen estar cerca del título principal de una página o entrada.

    Por ejemplo:

    Inicio > WordPress > Guía para instalar WordPress

    ¿Te suena? Si lo activas, Astra creará las migas de pan en todo el sitio web teniendo en cuenta el contenido.

    1.4 Blog

    I. Blog / Archivo

    En este apartado podrás configurar las opciones básicas del listado de entradas del blog. Estas opciones se aplicarán tanto a la página principal del blog como a la de las categorías.

    Configurando el listado de entradas de un blog en Astra
    Configurando el listado de entradas de un blog en Astra

    II. Entrada individual

    En este apartado podras configurar las opciones básicas que tendrán las entradas del blog.

    Configurando las entradas de un blog en Astra
    Configurando las entradas de un blog en Astra

    En la lección, crear un blog con WordPress, veremos con más detalles como configurar estas opciones de Astra.

    1.5 Barra lateral

    La barra lateral (conocida también como Sidebar) es el espacio que solemos ver en las entradas de un blog a un lado del contenido y suelen mostrar las últimas entradas, categorías, comentarios, banners mediante widgets.

    En este apartado puedes configurar la posición y en que tipos de contenido quieres mostrar la barra lateral (páginas, entradas o archivos) además del ancho.

    Configurando la barra lateral en Astra
    Configurando la barra lateral en Astra

    1.6 Pie de página

    El pie de página (también conocido como Footer) es el contenido que suele estar al final de cualquier página o entrada.

    I. Widgets del pie de página

    Astra ofrece 4 espacios para añadir widgets en el pie de página. Puedes configurar el tamaño y color del borde y los colores del fondo y el contenido.

    Configurando los widgets del pie de página en Astra
    Configurando los widgets del pie de página en Astra

    En la lección, widgets en WordPress, conoceremos los widgets y veremos como añadirlos en nuestro sitio web.

    II. Barra del pie de página

    Este apartado se suele utilizar para mostrar el Copyright del sitio web y el menú de pie de página aunque puedes añadir cualquier tipo de contenido. También puedes configurar el tamaño y color del borde y los colores del fondo y el contenido.

    Configurando la barra del pie de página en Astra
    Configurando la barra del pie de página en Astra

    1.7 CSS adicional

    La mayoría de temas WordPress (por no decir que el 100%) ofrecen un apartado donde podemos indicar reglas CSS para personalizar un poco más el diseño de nuestro sitio web como colores, fuentes personalizadas, márgenes entre otras.

    En la lección, HTML y CSS para WordPress, puedes encontrar una breve introducción a estos lenguajes de diseño.

    1.8 Resto de opciones

    El personalizador de Astra incluye 3 opciones adicionales que en realidad no tienen nada que ver con el tema sino que son apartados relacionados con la estructura de WordPress aunque puede que los hayan incluido para agilizar un poco el trabajo.

    • Menús
      Desde este apartado podrás crear un menú y asignarlo al sitio web. También puedes hacerlo desde el apartado Apariencia >> Menús.
    • Widgets
      Desde este apartado puedes asignar widgets en las áreas disponibles de tu sitio web. También puedes hacerlo desde el apartado Apariencia >> Widgets.
    • Ajustes de la página de inicio
      Desde esta opción puedes elegir cuál será tu página de Inicio y la del Blog. También puedes hacerlo desde el apartado Ajustes >> Lectura.

    1.9 Opciones Responsive

    Una característica adicional que ofrece el personalizador de Astra, es la posibilidad de asignar valores según el tipo de dispositivo: PC, tablets o móviles.

    En la parte inferior izquierda podrás encontrar los iconos de cada dispositivo. En cada uno de ellos, podrás asignar valores diferentes a cualquiera de las características.

    Por ejemplo: en versión PC el logo tiene 180px de ancho mientras que en versión móvil tendrá 120px.

    Opciones Responsive en Astra
    Opciones Responsive en Astra

    Anuncio publicitario

    2. Opciones adicionales en el personalizador de Astra

    Astra es un tema FREEMIUM: es gratis (FREE) pero ofrece la posibilidad de adquirir una versión PREMIUM. Existe un plugin llamado Astra PRO con el que se pueden ampliar las opciones de configuración del tema.

    Para ver todas las opciones que ofrece Astra PRO, dirígete al apartado Apariencia >> Opciones de Astra.

    Módulos de Astra PRO
    Módulos de Astra PRO

    Astra PRO ofrece un conjunto de opciones adicionales que te permitirán configurar el sitio web de una manera más profesional:

    • Colores y fondos adicionales para cualquier apartado.
    • 3 diseños diferentes para las entras del blog.
    • 2 secciones adicionales para la cabecera.
    • Opción de configurar una cabecera fija.
    • Diseños y cabeceras personalizadas para landing pages.
    • 7 diseños diferentes para el pie de página.

    Y muchas opciones más para que el diseño de tu sitio web sea una experiencia única.

    Aunque para el desarrollo de este curso vamos a utilizar la versión gratuita, vale la pena invertir en la versión PRO de manera que puedas sacar el máximo provecho del tema y realizar diseños realmente profesionales.

    Curso de WordPress

    Uno de los mejores temas que puedes instalar para comenzar a crear un proyecto profesional con WordPress, es Astra. Este tema ofrece una versión gratuita, que puedes instalar desde WordPress y, una de pago, con excelentes opciones de diseño.

    Este tema Multipurpose (múltiples propósitos) es ideal para crear blogs, páginas y tiendas online en una misma instalación.

    3. Astra en una página o entrada

    Como hemos visto, desde el personalizador de Astra, podemos configurar todas las opciones y estilos de nuestro sitio web. Adicionalmente, Astra incluye en cada página o entrada algunas de estas opciones para que se puedan configurar puntualmente.

    Accede a cualquier página de tu sitio web desde el apartado Páginas. En la barra lateral derecha hay una pestaña: Ajustes de Astra.

    Opciones de Astra en una página o entrada
    Opciones de Astra en una página o entrada

    Verás varias opciones referentes a la cabecera, barra lateral y pie de página. Estas opciones suelen ser muy útiles cuando se diseña una landing page, por ejemplo.

    Anuncio publicitario

    4. Conclusión

    Astra cuenta con un personalizador muy potente y en tiempo real que además permite configurar las opciones tanto para PC como para versiones RESPONSIVE. Algo que se agradece mucho ya que hoy en día muchos usuarios cuentan con móviles y tablets.

    El plugin Astra PRO es una excelente opción para diseñar sitios web más profesionales ya que añade opciones adicionales con las cuales mejorar el diseño y funcionalidad de un sitio web.

    ¿Te ha gustado?

    Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este curso de WordPress y ayudas a otras personas que desean aprender.

    1 estrella2 estrellas3 estrellas4 estrellas5 estrellas
    (2 votos, promedio: 5,00 de 5)

    Cargando…
    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on linkedin
    LinkedIn
    Share on telegram
    Telegram
    Share on whatsapp
    WhatsApp
    Share on email
    Email

    Este curso es gratis y siempre lo será pero, mantenerlo, requiere de mucho tiempo y esfuerzo. Si te gusta el curso y te ha ayudado, considera invitarme un café haciendo un pequeño donativo a este proyecto que he creado con el para ti y muchas personas que desean aprender. Las donaciones me ayudan a seguir trabajando en este fantástico curso gratuito. ¿Me invitas un café?.

    Suscríbete y aprende WordPress desde cero.

    No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre WordPress.

    Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.

    Comparte tu experiencia

    Deja un comentario si tienes alguna duda o cuéntanos cómo ha sido tu experiencia.

    guest
    0 Comentarios
    Inline Feedbacks
    Ver todos los comentarios
    0
    ¿Dejas un comentario? Gracias!x
    ()
    x
    Ir arriba

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Moderar y responder comentarios de usuarios.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@gianoliveira.com, así como el derecho a presentar una reclamación ante una autoridad de control.
    • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.
    • Información adicional: En mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Suscribirte a la lista de correos electrónicos.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@gianoliveira.com, así como el derecho a presentar una reclamación ante una autoridad de control.
    • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.
    • Información adicional: En mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.