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.
Otra super leccion......
Hola Jorge, muchas gracias por tu comentario. Saludos!