En lecciones anteriores hemos visto como crear las páginas, entradas y la estructura general que va a tener nuestro sitio web. En esta lección haremos una introducción al diseño web para comenzar a darle vida a nuestro sitio.
Básicamente te voy a hablar de 2 opciones que puedes implementar para configurar las tipografías, colores, cabecera y pie de página del sitio web aprovechando todo lo que nos ofrece el tema Astra y Elementor.
La mayoría de temas PREMIUM y FREEMIUM (como Astra) suelen ofrecer una serie de plantillas prediseñadas para instalar en un sitio web. Cada una de estas plantillas es un DEMO completo de sitios web desarrollados con el tema.
Al instalar una plantilla, se creará un sitio web con colores, tipografías, imágenes, páginas, entradas, productos y menú. El plugin hace todo el trabajo, con solo un clic, para que solo tengas que modificarlo a tu gusto.
Existe un plugin gratuito llamado Starter Templates, que ofrece plantillas prediseñadas para Astra, el cual incluye varios diseños que podrás instalar si no quieres comenzar desde cero.
Esta opción es muy útil si tienes habilidad con el diseño web ya que podrás entender el diseño y realizar las modificaciones según tu proyecto.
En la entrada, Starter Templates, te muestro cómo instalar el plugin y las opciones que nos ofrece para el diseño web de nuestro proyecto.
Anuncio publicitario
Esta es la opción más elegida por los usuarios que están aprendiendo WordPress ya que te ayudará a conocer todos los pasos y configuraciones para que puedas realizar el diseño web de tu sitio.
Como la finalidad de este curso de WordPress es que aprendas a trabajar con Astra y Elementor, iremos diseñando el sitio web desde cero.
Astra es un tema muy completo con el cual podemos desarrollar nuestro sitio web y ofrece un paquete de opciones para personalizarlo.
Dirígete al apartado Apariencia >> Opciones de Astra. En este apartado encontrarás todas las opciones que incluye este tema.
En este bloque hay 8 enlaces directos a la configuración del tema a la que se puede acceder desde Apariencia >> Personalizar. Estas opciones son las más utilizadas.
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.
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, sitios web corporativos y tiendas online en una misma instalación.
Adicionalmente, los desarrolladores del tema, han creado una serie de plugins gratuitos para mejorar el diseño y funcionamiento de un sitio web con Astra.
En la entrada, plugins gratuitos para Astra, podrás conocer estos plugins y cómo funcionan con el tema.
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 el sitio web oficial 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.
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.
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 entrada, 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.
Aunque hayas conocido todas las opciones de configuración que nos ofrece Astra para el diseño web, en las siguientes lecciones, veremos con más detalles algunas de estas combinándolas con las opciones de diseño que también nos ofrece Elementor.
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 encontrarás la 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 es un excelente tema con el cual realizar sitios web muy profesionales. Como has podido apreciar, cuenta con una gran variedad de opciones para personalizar el sitio web a tu gusto. Además, el plugin Astra PRO, añade opciones adicionales con las cuales mejorar el diseño y funcionalidad del sitio web.
Utilizar el plugin Starter Templates es una buena opción para realizar pruebas en un sitio web pero, si no estás familiarizado con el diseño web, es mejor que no utilices este plugin y desarrolles tu sitio web 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.
Copyright © 2025 Curso de WordPress
Hecho con Venezolano!
Desarrollado con WordPress y diseñado con Hello Theme y Elementor.
Otra super leccion......
Hola Jorge, muchas gracias por tu comentario. Saludos!