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.

    (15 votos, promedio: 4.9 de 5)

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on whatsapp
    WhatsApp
    Share on telegram
    Telegram
    Share on email
    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.