Saltar al contenido

Tema de WordPress: GeneratePress – Diseño Web

En esta primera parte del diseño configuramos algunas cositas básicas en GeneratePress en WordPress sin pararnos mucho, para empezar cuanto antes a crear contenido y NO ESTANCARNOS.

Nos basamos en:

  • Minimalismo
  • Regla del 80/20 de Pareto

Voy a hacer la web con el theme GeneratePress. Recuerda que veremos más cosas de diseño sobre la marcha mientras creo la Homepage.

Códigos CSS para mejorar diseño:

Cambiar el color del menú:

.main-navigation {

background-color: #000000;

}

Quitar fecha y autor de los posts:

.entry-meta {

display: none;

}

CSS para GeneratePress

¿No tienes suficiente y quieres saber más de diseño web y CSS? Entonces esta masterclass de CSS con GeneratePress te va a gustar.

Diseño web con GeneratePress

Para el diseño de un micro nicho nos vamos a basar en dos reglas:

  • La ley del 80/20 de Pareto: aprender solo ese 20% que nos va a permitir obtener un diseño mínimo viable para seguir avanzando, es decir, lo justo y necesario para transmitir confianza al usuario
  • El minimalismo: cuantos menos elementos tiene la web, más fácil va a ser encontrar una armonía y un diseño entre ellos. Si saturas la web de elementos pensando en el diseño, una de dos: o te vas a esforzar mucho en crear esa armonía o la web no va a transmitir confianza.

Como nosotros queremos avanzar rápido, nuestro objetivo es transmitir confianza desde el minimalismo para no complicarnos la vida.

Vamos a usar la plantilla gratuita de WordPress Generate Press.

Hay un montón de plantillas gratis, así que esto ya es cuestión de gusto.

Nos vamos a Apariencia > Temas > Añadir nuevo

Aquí buscamos Generate Press, instalamos y activamos.

Ya tenemos activa la plantilla de WordPress y nos vamos a ir al menú Apariencia > Personalizar.

Podemos decir que WordPress tiene dos secciones: el escritorio y la parte de personalizar.

Esta última sería como una selección propia de cada plantilla, donde además se incluyen algunas funciones que también se podrían hacer desde el escritorio.

Lo primero, nos vamos a Identidad del sitio y aquí vamos a poner el título de nuestra web.

Yo de momento voy a poner mesita de noche vintage y en Descripción corta una descripción del sitio web. Por ejemplo: mesitas de noche vintage online.

También nos permite elegir un logotipo y se puede ocultar la descripción y el título para que se vea solo el logo.

Puedes ajustar el tamaño del logo, aunque yo de momento lo voy a quitar.

El icono del sitio es lo que aparece en la pestaña del navegador.

Diseño en contenedor: podemos ajustar el ancho del contenedor y la disposición del contenido en un contenedor o en contenedores separados.

Barra lateral: la vamos a quitar para tener el contenido en modo columna, que es cómo se vería desde el móvil. Esto siempre es cuestión de gustos.

Me voy a Contenido > Sin barras laterales

En la parte de Colores, el color de fondo vemos que está en color gris claro. Yo lo voy a poner en blanco.

El color de texto lo dejo en negro, los enlaces los dejo en azul

Color del menú: es en color negro, que es el actual y aquí podemos elegir que sea blanco, gris, rojo, verde o azul. Es una paleta de colores bastante limitada y para una mesa vintage elegiría el color marrón, así que os voy a enseñar un truco para poner el color que queráis.

Nos vamos a Google y buscamos #000000 y nos va a salir aquí una paleta de colores, aquí por ejemplo podría elegir un marrón, y tenemos que copiar y pegar estos seis dígitos y los vamos a pegar en este código:

.main-navigation {

background-color:#00000

}

Luego copiamos y pegamos el código en el apartado Apariencia > CSS Adicional para que se cambie el color.

Me interesa quitar la fecha y el autor para que parezca más una tienda que un blog y transmitir que el contenido es evergreen, es decir, que no caduca.

Eso lo haremos con el siguiente código:

.entry-meta {

display:none;

}

Más allá de esto lo necesitamos tocar el CSS, así que vamos a seguir avanzando para no perder tiempo.

Luego nos vamos a ir a Tipografía y aquí podemos elegir la tipografía de todo el cuerpo del texto. Yo voy a elegir una que me gusta que es Muli, pero esto ya es cuestión de gustos, tú elige una tipografía que encaje con tu nicho.

Aquí también puedes cambiar la letra de los encabezados.

¿List@ para empezar a publicar contenido en tu web? En la siguiente lección veremos cómo hacer un estudio de palabras clave para un micronicho de Amazon Afiliados.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *