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.
Para conocer todas las opciones de personalización que ofrece Astra, dirígete a Apariencia >> Personalizar.
En este apartado vamos a configurar todas las opciones globales del tema.
La tipografía se refiere a las fuentes (texto) que vamos a utilizar en nuestro sitio web.
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.
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.
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.
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.
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.
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.
En este apartado podemos configurar la distribución de la cabecera de nuestro sitio web tanto en PC como en versión RESPONSIVE.
En este apartado podemos configurar y dar estilo al menú principal tanto en versión PC como en versión RESPONSIVE.
En la lección, menús en WordPress, veremos con más detalles como configurar esta opción de Astra.
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.
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.
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.
En este apartado podras configurar las opciones básicas que tendrán las entradas del blog.
En la lección, crear un blog con WordPress, veremos con más detalles como configurar estas opciones de Astra.
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.
El pie de página (también conocido como Footer) es el contenido que suele estar al final de cualquier página o entrada.
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.
En la lección, widgets en WordPress, conoceremos los widgets y veremos como añadirlos en nuestro sitio web.
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.
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.
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.
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.
Anuncio publicitario
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.
Astra PRO ofrece un conjunto de opciones adicionales que te permitirán configurar el sitio web de una manera más profesional:
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.
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.
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.
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
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.
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.
Hola, como puedo modificar el color de fondo por defecto azul, y la forma en que se muestra el menu principal?
Hola Renato, puedes hacerlo desde el apartado Colores de base. Para los colores del menú, si no me equivoco, es necesario contar con la licencia de Astra PRO. Saludos!
hola Gian, quisiera cambiar el fondo de 'identidad del sitio' (ponerlo en violeta) y las letras del nombre del sitio en blanco, pero no encuentro como hacerlo
Hola Graciela, los colores de la cabecera en Astra se pueden personalizar con la versión PRO. Si no la tienes, puedes conseguirla haciendo clic en este enlace: Astra PRO. Un saludo!
Hola Gian, soy nuevo en todo esto de WordPress, estoy siguiendo el curso y no puedo configurar menús yaque la sección AÑADIR ELEMENTOS AL MENU aparece como desactivada, no dejando añadir ningún elemento, en cambio la sección ESTRUCTURA DEL MENU si funciona normalmente. Tengo el tema ASTRA. ¿ Me podrías ayudar?. Gracias y un saludo.
Hola Jesús, la sección AÑADIR ELEMENTOS AL MENU te aparece desactivada porque antes deberías crear un menú en la sección ESTRUCTURA DEL MENU para que se active y te deje añadir elementos al menú. En esta entrada https://www.gianoliveira.com/curso-wordpress/menu-en-wordpress/ puedes ver cómo se hace. Espero que esto te pueda ayudar. Un saludo!
Hola Gian, muy bueno y orientador tu articulo. Una pregunta, cuando desactivo el titulo en los "ajustes de Astra", para diseñar un mejor titulo o H1 con Elementor, por qué se me duplican? Astra realmente no me esta desactivando el título? Gracias
Hola Raquel, gracias por tu comentario. Esto lo puedes hacer desde las opciones de Astra en cada página o entrada individual como puedes ver en el punto 3 de esta entrada. También puedes hacerlo con Elementor, seleccionando Elementor ancho completo, en la Estructura de página, que puedes encontrar en esta entrada: https://www.gianoliveira.com/curso-elementor/estructura-elementor/. Un saludo!
Hola, este tema me va perfecto, con un pequeño detalle: En la pagina inicial configuro que en la sección central aparezca una página (y no la lista de posteos). A esa página la armé solo con un widget de slider. Hay forma de evitar que se muestren los margenes superior e inferior en la página principal? Gracias
Hola Andres, si que puedes. Desde el apartado Global >> Contenedor puedes elegir el tipo de diseño que quieres en tu página. Saludos!
Hola, gracias por la info. Cuando intento ingresar a: apariencia-personalizar aparece una ventana con este texto: Esta página no funcionamagiarecords.com no ha enviado ningún dato.ERR_EMPTY_RESPONSE
Cambie de plantilla en astra y sigue sin funcionar. Qué debo hacer?
Hola Xavi, nunca había visto este error. Posibles soluciones: 1. Desactiva todos los plugins y prueba nuevamente. Si funciona, activa uno a uno los plugins para descartar el que está causando el problema; 2. Aumenta la memoria de WordPress. En esta entrada, editar archivos en WordPress, puedes ver los pasos para añadir al archivo wp-config.php un par de líneas de código; 3. Instala un tema por defecto de WordPress. Por ejemplo, Twenty Twnety y prueba si el personalizador funciona con los plugins activados. Cuéntame si has podido resolver el problema y cómo lo has hecho. Un saludo!
Efectivamente, desactivé todos los plugins y probe nuevamente. El plugin que, al parecer, tiene ese error es Astra Widget.
Gracias!
Que bueno Xavi, me alegra saber que lo hayas podido resolver. Un saludo!
Hola! Qué tal? Necesito tu ayuda. La cabecera de mi pagina de Tienda (Shop) me sale en blanco y los menús no se ven. Como podría poner fondo a la cabecera principal o cambiar el color de los menús? Gracias de nuevo! (Por el momento uso la version gratuita de Astra)
Hola Noelia, por lo que veo estas utilizando la cabecera transparente en todo el sitio y has declarado el color del menú en blanco. Esto, con la versión gratuita de Astra, afecta a todo tu sitio web. Por eso en el resto de páginas, que no tienes fondo a color, no se visualiza el menú. Además con la versión gratuita de Astra, no es posible modificar más valores en la cabecera como colores y fondos. Para esto tendrías que compra la versión PRO que puedes hacerlo desde aquí: Astra PRO. Otra posible solución sería que pusieras en tu tienda un banner a color para que se viera como en la HOME (un poco más pequeño) aunque esto solo sería posible hacerlo con la versión PRO de Elementor. Si no la tienes, puedes conseguirla aquí: Elementor PRO. Por último, para que no tengas que comprar los dos plugins PRO, con Elementor PRO puedes crear cabeceras personalizadas para todo tu sitio además de personalizar las páginas de tu tienda manteniendo la versión gratuita de Astra. Aprovecho para invitarte a que te suscribas a mi canal de YouTube que en unos días voy a comenzar a recrear este curso en vídeos y, paralelamente, comenzare un curso de Elementor (incluye Elementor PRO) que puede ayudarte con el desarrollo de tu sitio web. Espero que te haya podido ayudar. Un saludo!