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.

    (16 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.

    guest
    2 Comentarios
    Inline Feedbacks
    Ver todos los comentarios
    Jorge Roman

    Otra super leccion......

    Gian Oliveira

    Hola Jorge, muchas gracias por tu comentario. Saludos!

    2
    0
    驴Dejas un comentario? Gracias!x
    ()
    x
    Search
    Generic filters

    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.