Diseño web: personalizando WordPress

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.

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

    1. Opción I: Instalando Starter Templates

    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

    2. Opción II: Personalizando Astra

    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.

    2.1 Ajustes del personalizador

    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.

    Enlaces directos a los ajustes del personalizador de Astra
    Enlaces directos a los ajustes del personalizador de Astra

    2.2 Módulos de Astra PRO

    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.

    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.

    Astra Theme

    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.

    2.3 Plugins gratuitos de Astra

    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.

    Plugins gratuitos para Astra
    Plugins gratuitos para Astra

    En la entrada, plugins gratuitos para Astra, podrás conocer estos plugins y cómo funcionan con el tema.

    3. Introducción al personalizador de 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

    3.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.

    Configurando la tipografía de base en Astra
    Configurando la tipografía de base en Astra
    Configurando la tipografía de los encabezados en Astra
    Configurando la tipografía de los encabezados en Astra

    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.

    II. Colores

    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

    3.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

    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

    3.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.

    3.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

    3.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

    3.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

    3.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 entrada, HTML y CSS para WordPress, puedes encontrar una breve introducción a estos lenguajes de diseño.

    3.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.

    3.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

    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.

    4. 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 encontrarás la 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

    5. Conclusión

    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.

    ¿Te ha gustado?

    Te estaría muy agradecido si pudieras valorar esta entrada y compartirla en tus redes sociales. De esta manera me animas a continuar trabajando en este proyecto y ayudas a otras personas que desean aprender.

    (23 votos, promedio: 4.9 de 5)

    Facebook
    Twitter
    WhatsApp
    Telegram
    Email

    ¿Me invitas un café?

    Todo el contenido que puedes encontrar en este sitio web es gratis y siempre lo será pero, mantenerlo, requiere de muchos cafés y muuuuchas horas . Si te gusta mi trabajo y te está ayudando, considera invitarme un café para apoyarme y apoyar este proyecto. ¡Te invito 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.

    Suscríbete!
    Avísame sobre

    2 Comentarios
    Inline Feedbacks
    Ver todos los comentarios

    Otra super leccion......

    Hola Jorge, muchas gracias por tu comentario. Saludos!

    2
    0
    ¿Dejas un comentario? Gracias!x

    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@cursowordpress.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: Moderar y responder comentarios de usuarios.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@cursowordpress.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.