Curso de maquetación de nichos

Gracias a este curso nuestros nichos parecerán más creíbles y más atractivos.

La gente que entre en nuestra web tiene que tener la impresión de que están ante una página cuidada, y para ello el diseño es fundamental.

A lo largo de este curso veremos cosas como los colores, reglas básicas de maquetación o la tipografía, e incluso aprenderás a usar el plugin Ultimate Shortcodes para darles un toque mucho más visual a tus webs/nichos.

Todo esto es algo que suele pasarse por alto pero son cosas muy importantes, y más teniendo en cuenta cómo está Google actualmente.

Galería de Imágenes

logo con colore positivo y negativo

logo aplicando colores de paleta

Diseña tu contenido con Canva

variaciones de logo

Introducción al curso

Te dejo una  lista de los temas que aprenderás. Presentación del curso:

1. Elección de los colores y la tipografía.
2. Diseño de un logotipo express con Canva (Bueno, bonito y barato).
3. Diseño de una buena cabecera.
4. Reglas básicas de un buen contenido.
5. Creación de elementos visuales con ultimate shortcodes
6. Retoque con CSS, el ingrediente final.

¿Por qué es tan importante la maquetación?

• Mejora la experiencia del usuario -> Mejora el SEO indirectamente
• Encontramos un valor diferencial
• Maximizamos las conversiones.

¿Que vamos a necesitar?

1. Google chrome
2. WordPress con plantilla personalizable (orbital theme o generatepress)
3. Canva
4. Plugin ultimate shortcodes.

1. Tipografía y colores

1.  ¿Qué debemos tener en cuenta con el color?

• Agradable a la vista, que se lea bien.
• Consonancia con la temática (https://climatizadorportatil.top/ – https://cochesrc.online/ – https://cortasetoselectrico.net/).
• Ser coherente con el color corporativo (cabecera, enlaces, botones y otros CTA, bullet points).

2. ¿Qué debemos tener en cuenta con la tipografía?

• Lectura limpia y agradable, que al ojo le resulte cómodo al leer el texto.
• Carga de fuentes google correcta en todos los navegadores.

3. Ejemplos mejorables -> Ejemplo buenos

• ejemplo mejorable:
• horno-electrico.com
• recortasetos.com
  ejemplos buenos:
• hornoelectrico.pro
• cortaseoselectricos.net

Código header para cambiar el color «.site-header«.

Para elegir colores de mi web: colorhunt.co.

2. Logotipo

cómo crear un logotipo de forma sencilla pero muy visual con la herramienta canva.

Vamos a ver como usar la herramienta canva y crearemos dos logotipos a modo de ejemplo:
1 teinfusion.net
2 lasplayas.net

En canva ir a logotipos:
primero elegir el fondo del color corporativo
tipografía sifonn, lo recomiendo para nichos de salud, color verde. Espacio carta a 0.
ejemplo 2: fondo azul, tipografía playlist script, elementos degradados.

3. Cabecera

Web de ejemplo:
https://creditogratis.net/
climatizadorportatil.top

Código CSS para dejar la cabecera fija en Orbital Theme
.site-header .container {
width: 1200px !important;
}
***
@media (min-width: 900px) {
.sub-menu, .sub-menu li {
width: 250px !important;
}
.default-header .title {
margint-top:60px;
}
.site-header {
position:fixed;
width: 100%;
top:0px;
z-index:999;
border-bottom: 0px;
}
}
***

Código CSS para dejar la cabecera fija en GeneratePress
.inside-header {
padding:10px;
}
.main-navegation .main-nav ul li [class*=»current-menu-«] > a {
background-color: #8cc63f;
}
.main-navegation .main-nav ul li a:hover {
background-color: #547626;
}
****
.main-navigation {
position: sticky;
position: -webkit-sticky;
top: 0;
}
****

Vamos a ver con orbital theme y con generatepresss
1 aplicar el color y el logo
Orbital, el color de fondo menu y enlaces son el mismo. Para el logo es en identidad del sitio.
Generatepress, el logotipo su ancho 260px. Colores, el menu es un color claro verde y el hover un poco mas oscuro.
2 menu en una linea
3 hacer que la cabecera sea fija

4. Reglas básicas de maquetación

En esta ocasión vamos a maquetar una web  a partir de un articulo, teniendo en cuenta:

1 La importancia del above the fold
2 Parágrafos que entren por la vista, hacerlo de 2 a 3 como mucho.
3 Buena jerarquización con los títulos h2 y h3
4 Incorporar fotos
5 Incorporar elementos visuales

Recursos

• Web climatizadorportatil.top
• Plugin AAWP
• Plugin Ultimate Nofollow
• Plugin Ultimate Shortcodes

5. Creación de elementos visuales con Ultimate Shortcodes

Vamos a aprender como insertar varios elementos visuales con ultimate shortcodes:

1. Columnas
2. Caja
3. Lista de iconos
4. Botones
5. Notas

VER EJEMPLOS CODIGOS USADOS.

1. Elemento Columnas

Por defecto es una fila con 2 columnas. ¿Qué pasa si quieres mas columnas? Simplemente cambia el «1/2» por «1/3» así tendrás 3 columnas.

shortcode de 2 columnas (1/2):

shortcode de 3 columnas (1/3..si quieres de 4 (1/4):

2. Elemento Columnas + Cajas

En color, poner el color corporativo #627ec9. Color del texto #ffffff blanco porque es  el que mas contrasta.

Las cajas se pueden combinar con las columnas, dentro de «contenido de la columna».

Ejemplo 1

• titulo: Primera caja
• #627ec9
• radio 0

Ejemplo 2

• titulo: Segunda caja
• estilo: blando
• radio 5

3. Elemento Columnas + Cajas + Lista

Inserta el elemento lista en la parte de shortcode. En color poner el color corporativo #627ec9. Recuerda usar las etiquetas html <ul></ul> y <li></li>

CSS lista theme generatepress

/* Lista con ticks, sirve para darle buen aspecto a las listas */
.entry-content ul {
list-style: none;
padding: 0;
}
.entry-content ul li {
padding-left: 0.6em;
}
.entry-content ul li:before{
content: «\f00c»;
font-family: FontAwesome;
display: inline-blocks;
width: 1.3em;
color: #627ec9;
}
***

4. Elemento Columnas + Cajas + Lista + Botón

Inserta desde el numero shortcode el elemento botones.

Puedes combinar de la siguiente manera: Dentro de una columna, escribir un texto copy, una lista y un boton cta.

Ejemplo 1 (segunda caja)

• color: #627ec9
• tamaño: 3
• fluido: si
• atributo rel: nofollow
• incluso puedes agregar un icono
• texto: texto CTA

Ejemplo 2, mejor opcion con boton grande  (primera caja)

• estilo: blando
• tamaño: 6
• fluido: no
• centrado: si
• radio: redondo
• texto: texto CTA

Ejemplo 3, mas mejor. (primera caja)

• estilo: por defecto
• tamaño: 9
• fluido: si
• centrado: no
• radio: auto
• texto: texto CTA

5. Elemento Notas

Sirve para destacar ciertas partes del contenido.

Ejemplo 1
color de fondo: #FFFF66
color de texto: #333333
radio: 3
contenido: aquí va tu texto

Ejemplo 2
color de fondo: #fbf2c6
color de texto: #333333
radio: 3
contenido: aquí va tu texto

Cambiar tamaño del texto de la nota con CSS (en caso que la letra sea pequeña)

En google chrome usa inspeccionar con clic derecho para saber el tamaño de letra y la clase CSS donde se aplicara, esos datos lo encontraras en el lado derecho styles. Si no te sale el tamaño en pixeles, ve a la pestaña computed dentro del cuadro de inspeccionar.

Incluso puedes crear tus estilos por defectos al usar elementos del shortcode, pero siempre usando !important para darle mas importancia.

6. Elemento Nota + Columnas + Servicio

Para terminar vamos a crear una nota con 2 filas y 2 columnas y un servicio por columna.

Primero define tu color corporativo pero lo optimizas para que sea un color suave.

Agregando elemento nota

• color de fondo: #d4dbef
• color de texto: #333333

Agregando elemento columnas 1/2

• colocar 1 fila con 2 columnas 1/2
• center: no
• class: «» vacio.
• luego duplicar debajo, para que sean 2 filas y 2 columnas.

Agregando elemento servicios

• color corporativo: #627ec9 , es mas fuertes que el color de fondo de la nota.
• titulo: Características
• tamaño del icono: 24
• contenido: Explicación más extensa sin enrollarme
• Agregaras 4 servicios

6. Retoques con CSS

En esta clase veremos cómo dar el toque final a tu web mediante CSS para que quede mucho más bonita y visual.  Aprenderás a ser retoques con CSS y definir estilos, bordes, sombras.

Explicaremos cómo crear una clase y un id con CSS para que un cierto elemento de la web tenga un estilo propio que podremos usar siempre que queramos.

Aprenderás a usar el inspector de elementos para copiar los estilos de CSS.

1. ¿Qué es CSS y para que sirve?

Es un lenguaje que sirve para dar estilos a los elementos de html.
Podemos crear clases y definir reglas estéticas, por ejemplo:

• Cuerpo de la página: Márgenes, color de fondo etc.
• Texto: tipografía, tamaño, grosor, interlineado, alineación etc.
• Imágenes: tamaños.

2 Reglas básicas de CSS

Tamaños:

• width: 900px;
• height: 30px;
• max-width: 1000px;

Bordes:

• border: 1px solid #786025;

Márgenes interiores y exteriores:

• padding: 20px;
• padding-top: 12px;
• margin: 8px;
• margin-left: 0px;

Tipografia:

• font-size: 12px;
• font-family: Roboto;
• font-weigth: bold;
• line-height: 30px;
• text-aling: left;
• color: #fffff’;

Mostrar u ocultar:

• display: block;
• display: none !important;

Color de fondo:

• background-color: #627ec9;

Web de w3schools para aprender CSS

Datos del Instructor

• Instructor: Dani Llamazares. Es ingeniero mecánico y se dedica a trabajar con temas de diseño web para clientes. Se gana la vida con amazon y adsense haciendo seo y creando nichos.
• Web: danillamazares.com
• YouTube: Dani LLamazares.
• Twitter: @dani_llamazares

Nichos de Dani

• Climatizador portatil. Nicho amazon.
• Cortasetos electricos.
• Coches control remoto.