Saltar al contenido
Hotmart

Mis apuntes del Curso Funnelead

octubre 30, 2022
funnelead
Curso Funnelead Hotmart

Índice

IDENTIDAD VISUAL

¿Qué es la identidad visual?

La identidad visual es un conjunto de atributos que define a las marcas. Es importante porque le darán una personalidad a tu landing.

Atributos de la identidad visual:

  • Colores
  • Tipografía
  • Elementos gráficos
  • Logo

Paleta de Colores

La psicología del color es un campo que estudia lo que producen los colores en las emociones y conductas de las personas.

Este estudio nos da una buena nociones general de que simboliza cada color.

psicología del color funnel

1. Color Azul

El color azul se asocia al mar y el cielo. Es un color relajante que transmite estabilidad, calma, armonía, confianza y seguridad.

Relacionado con la salud, tecnología o para perfiles profesionales.

2. Color Rojo

El rojo es el color del fuego, de la llama, de la fuerza. Es un poderoso y muy visual, que representa el amor y el odio al mismo tiempo.

Para webs relacionadas con la moda, entretenimiento o deportes.

3. Color Naranja

Representa la creatividad, la aventura, el entusiasmo, el éxito y el equilibrio. El color naranja agrega un poco de diversión.

Se suele utilizar para webs de entretenimiento y alimentarios.

4. Color Rosa

El significado del color rosa gira en torno a la feminidad, el juego, la inmadurez, sexualidad, encanto, cariño y el amor incondicional.

Se suele utilizar para webs femeninas.

5. Color Amarillo

Evoca sentimientos de felicidad, positivismo, optimismo y verano pero, cuidado porque es uno de los colores que representa el engaño y advertencia.

Se usa para webs juveniles y relacionados con el entretenimiento.

6. Color Morado

Es un color de alta gama. El significado del color purpura o morado esta relacionado con el poder, la nobleza, el lujo, la sabidurai y la espiritualidad.

Apropiado para webs de belleza y de lujo.

7. Color Negro

El significado del color negro representa misterio, poder, elegancia y sofisticación.

Es una buena opción para webs de lujo, moda o cosmética.

8.  Color Verde

Nos transporta a la naturaleza y nos transmite sostenibilidad, generosidad y esperanza.

Para webs relacionadas con el medio ambiente, la medicina o con turismo.

Inspiración para definir nuestra gama de colores.

Coolors es una web que nos ayuda a decidir los colroes de nuestro proximo proyecto. Una vez dentro de la web apretando la barra espaciadora notaras como la web misma te va generando diferentes paletas de colores.

https://coolors.co/generate

Nota:

  • Tener de 3 colores a 4 como máximo.
  • A la lado derecho en las 3 líneas, puedes explorar para ver otras paletas.

¿Cómo combinar colores?

  1. Elige un color principal: Deberá elegirse a partir de los valores y personalidad de la marca. (Va partir desde la psicología del color que quieres transmitir, puedes utilizar para fondos)
  2. Elegir un color complementario: Este color debe combinar, contrastar o complementar con el color principal elegido. (puedes usar para botones o fondos mas claros).
  3. Elegir un color neutro claro: Servirá de soporte para fondos o detalles específicos de la marca. Sirve para combinar con fondos oscuros y claros.
  4. Elegir un color neutro oscuro: Deberá ser armónico con los otros colores. Este color se puede usar principalmente para textos.

Tipografías

Serif

Se caracteriza por sus terminaciones como pequeños adornos, generalmente en los extremos de las líneas.

Según los diseñadores esta tipografía proporciona el efecto de tranquilidad, autoridad, dignidad y firmeza.

Serif, no recomiendo usar para textos corridos o párrafos porque no es fácil de leer, se usa mas para títulos.

Sans-Serif

Las fuentes Sans Serif están simplemente sin patines o pies, es decir, no tienen remates en sus extremos.

Según los diseñadores este tipo de fuente crea el efecto de modernidad, sobriedad, alegría y seguridad y es mas neutra.

Es la fuente recomendada para párrafos o textos corridos.

Manuscrita

Caligrafía – hecho a mano. En el mundo digital esta fuente es mas usada para acentuar el titulo principal, o la firma del autor, pues los trazos mas finos pueden desaparecer, comprometiendo la legibilidad.

Exhibición

Display o estilo único. La forma de sus caracteres puede aludir una época o periodo histórico concreto, otras pueden contener elementos de fantasía que les otorgan mayor personalidad.

Elementos Gráficos

  1. Iconos.
  2. Imágenes.
  3. Ilustraciones.
  4. Mockups.

Buscando inspiración: En Pinterest busca «landing page + keyword (landing page mascotas)»

Extras

Delay – Ocultar Seccion

Delay se usa cuando necesitas esconder una sección determinada o que aparezca en un tiempo determinado, luego que mi visitante permanezca en mi pagina.

Sección Principal - A ocultar
Avanzado:
Clases CSS: «bloque» (coloca un nombre a tu sección).

En la ultima sección de tu pagina, agrega un elemento HTML.

HTML
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
$('.bloque').hide();
setTimeout(function() {
$('.bloque').show();
}, 900000);
</script>

Convertir a Milisegundos.

Conclusión: Para que funcione el código, necesitas poner un nombre de clase css dentro de la sección a ocultar «bloque» y colocar el tiempo en milisegundos en este caso esta en 900.000 que son 15 minutos, 1 minutos es 60.000.

Optimización de Velocidad de tu Landing con Wp Rocket

Es un plugin de caché de página guardado en disco con funcionalidades de optimización de archivos CSS y JS.

En otras palabras optimiza el rendimiento para mejorar la velocidad de carga de los sitios web de WordPress.

Cache:
Habilitar la caché para dispositivos móviles ✅.
Vida útil de la caché: 1 día.
Guardar cambios.

Optimizar archivos:
Optimizar Google Fonts (no hay en nueva versión) ✅.
Minificar archivos CSS ✅.
Combinar archivos CSS ✅.
Optimizar la entrega del CSS ✅.
Archivos JavaScript
Minificar archivos JavaScript ✅.
Cargar archivos JavaScript de manera diferida ✅.
Guardar cambios.

Medios:
Habilitar para las imágenes ✅.
Desactivar Emoji (no hay en nueva versión) ✅.
Guardar cambios.

Precargar:
Habilitar la precarga (por defecto) ✅.
Guardar cambios.

Tratamiento de Imágenes:

  • Una buena pagina reducir el peso de las imágenes sin perder calidad es tinypng.com.
  • La resolución de la pantalla es 1920×1080 es el recomendado, no pasarse demás. Las imágenes no deben pesar mas de 200kb.

Pagina de Venta

estructura de la pagina de venta

  1. Botón checkout, aquí va tu hotlink.
  2. Esto es para ti Si…, aquí puede variar el copy de acuerdo al producto (transformación, dolores).
  3. Quien soy, aquí va la información del productor.
  4. Qué vas encontrar en el curso, que es lo que compone el curso o que es lo que la persona va aprender.
  5. El curso incluye, si incluye descargable o plantillas ósea algo anexo que vayas a dar aparte de los bonos.
  6. Módulos, mostrar cuantos módulos hay dentro del curso.
  7. Testimonios, muestra los resultados de las personas.
  8. Bonos, que es lo que vas a regalar por esa compra.
  9. Precio, aquí va el precio y que incluye todo el producto.
  10. Preguntas frecuentes, si de pronto tu sabes que tu cliente tiene objeciones respecto al producto.
  11. Garantía, ofrece una devolución en un cierto tiempo.
  12. Precio, para finalizar pon el precio del producto.

Diseño de Pagina de Ventas

Nueva Pagina

  • Nombre de la pagina: «Venta».
  • Plantilla: 👉 Elementor ancho completo.
  • Desactivar secciones (astra) –
  • ✅ Desactivar cabecera principal
  • ✅ Desactivar la cabecera para móvil
  • ✅ Desactivar título
  • ✅ Desactivar migas de pan
  • ✅ Desactivar imagen destacada
  • ✅ Desactivar el pie de página
  • Publicar

Editar con Elementor

Sección 1

Estilo
color: #E9E9E9

Elemento Espaciador
Espacio: 10px.

SECCION 2

  • Estilo (poner imagen de fondo)
    Capa de fondo
  • Tipo de fondo clásico, elegir tu imagen.
  • -Posición centro centro.
  • -Adjunto Por defecto.
  • -Repetir, no-repetir.
  • -Tamaño, abarcar.

Elemento Espaciador (por defecto).

Elemento Seccion Interior

Primera Columna

Elemento Imagen

  • Estilo
  • ancho 100%.
    Avanzado
    Efectos de movimiento
  • Animación de entrada: fade in left.

Segunda Columna

Elemento Encabezado

  • Texto: «FUNNELEAD».
    Estilo
  • Familia: Poppins
  • Tamaño: 69px
  • Peso: 800

Elemento Separador

  • Estilo
  • Peso 1
  • Brecha 2

Elemento Encabezado

  • Texto: «Escribe Aquí tu PROMESA Impactante.».
  • Color Negro.
  • Tamaño 37px.

Elemento Editor de texto

  • Alineación, justificar.
  • Color Negro.
  • Tamaño 17px.

——–
Elemento Icono

  • icono: Chevron down.
  • color negro.

Elemento Botón

  • Contenido
  • Texto: «QUIERO APRENDER».
  • icono: mouse pounter.
  • espacio del icono, 18.
    Estilo
  • color #F76400
  • Tamaño: 33px.
    Avanzado
    Efectos de movimiento
  • Animación de entrada: fade in down.

Elemento Cabecera (por defecto espacio 10)

Tipografía por defecto en elementor: Roboto v30.

Animar Botones e Imágenes

SECCION «Esto es para ti»

  • Estilo
  • fondo color #C44F0E
    Forma del divisor
  • tipo: flecha.

Elemento Espaciador (por defecto espacio 50)

Elemento Cabecera

  • Titulo: «ESTO ES PARA TI SI…».
    Estilo
  • color blanco.
  • familia: Poppins.
  • Peso 600.

Elemento Sección Interior x3

Elemento Caja de icono

  • Estilo
  • color blanco.
    Contenido
  • Espaciado 16.
  • Duplicar x3.

Elemento Espaciador (por defecto espacio 50)

SECCION «Autoridad»

Elemento Cabecera

  • Titulo: «ESTO ES PARA TI SI…».
    Estilo
  • color negro.
  • familia: Poppins.
  • Peso 600.

Elemento Espaciador (por defecto espacio 50)

Elemento Sección Interior

1. Elemento Editor de texto

  • Editor Columna
    Avanzado
  • Margen 30 30 30 30.
    Efectos de movimiento
  • animación de entrada: Fade in right.
    —
    Estilo
  • alineación: Justificado.

2. Elemento imagen

  • Estilo
  • ancho 51.

SECCION Adorno

  • Estilo
  • color #CECECE
    Forma del divisor
  • Tipo: Cepillo de olas.

Elemento Icono

  • icono: heart.
  • color negro.
  • tamaño 37

Elemento Encabezado

  • titulo: «Mi objetivo es apoyarte para que obtengas resultados excepcionales.​».
    Estilo
  • color negro.
  • tamaño 22px.
  • Peso: 800

Elemento Espaciador (por defecto espacio 10)

SECCION «que incluye el curso»

Elemento Encabezado

  • texto: «EL CURSO INCLUYE».
  • Alineación centro.
    Estilo
  • color negro.
  • Tamaño 35px.
  • Peso 800.

Elemento Sección interior x3

Primera y Tercera columna

  • Editar columna
  • ancho de la columna 10.

Segunda columna

  • Editar columna
    Estilo
  • Borde – Tipo de borde continuo (solido).
  • Ancho 0 – 2 – 2 – 0.
  • color #E17000.

Elemento Encabezado

  • texto: «1. Información base».
    Estilo
  • Tamaño 19px.
  • Peso 600.
  • Altura de linea 1,2em.

Elemento Espaciador (por defecto 10).

Duplicar Sección interior hasta completar la información del curso.

SECCION «Módulos»

Elemento Encabezado

  • texto: «MÓDULOS».
  • Alineación centro.
    Estilo
  • color negro.
  • Tamaño 35px.
  • Peso 800.

Elemento Sección interior x4

Primera columna

  • Editar columna
    Estilo
  • Borde – Tipo de borde continuo.
  • ancho 2 – 2 – 2 – 2.
  • color #E17000.
    Avanzado
  • Margen 10 – 10 – 10 -10.

Editar Segunda columna

  • Estilo
  • Fondo – Tipo de fondo clásico
  • color #E17000.

Elemento Encabezado

  • Estilo
  • Color negro.
  • Tamaño 55px.
  • Peso 800.

Elemento Separador

  • Peso 1.
  • Brecha 2.

Elemento Encabezado

  • texto: «INFORMACIÓN BÁSICA».
  • color negro.

SECCION «QUE APRENDERAS»

Elemento Sección interior x3

a. Primera y Tercera columna

  • Editar columna
  • ancho de la columna 20%

b. Segunda columna

  • Editar columna
    Borde – Sombra de caja
  • – Posición: Hundido (antes Recuadro).

Elemento Espaciador (por defecto 50).

Elemento Encabezado

  • texto: «ADEMÁS TAMBIÉN APRENDERÁS A…».
  • Alineación centro.
    Estilo
  • color negro.
  • Tamaño 35px.
  • Peso 800.

Elemento Separador.

Elemento Listado de iconos

  • Texto 1: «INTEGRAR LA PLATAFORMA DE EMAIL MARKETING».
  • Texto 2: «CONECTAR EL PIXEL DE FACEBOOK».
    Estilo
  • Alineación en el centro.
  • Color negro.
  • Tamaño 20px.

Elemento Espaciador (por defecto 50).

SECCION «BONOS»

  • Estilo
  • color de fondo #DADADA.

Elemento Espaciador (por defecto 50)

Elemento Encabezado

  • texto: «BONOS».
  • Alineación centro.
    Estilo
  • color negro.
  • Tamaño 35px.
  • Peso 800.

Elemento Sección interior

a. Primera columna

Elemento Imagen

b. Segunda columna

Elemento Encabezado

Elemento Editor de texto

  • color negro
  • tamaño 23px

Elemento Encabezado

SECCION «TESTIMONIOS»

Elemento Espaciador (por defecto 50)

Elemento Encabezado

  • texto: «TESTIMONIOS».
  • Alineación centro.
    Estilo
  • color negro.
  • Tamaño 35px.
  • Peso 800.

Elemento Sección interior x3

a. Primera y Tercera columna

  • Editar columna
  • ancho de la columna 5%.

b. Segunda columna

Elemento Cuadro de imagen

  • Contenido
  • tamaño de la imagen 150×150.
  • posición de la imagen a la izquierda.
    Estilo
  • Espaciado 50.
  • Ancho 12.
  • Radio del borde 100.

Elemento Espaciador (por defecto 50)

SECCION «OFERTA»

  • Estilo
  • color de fondo #E17000.

Elemento Espaciador (por defecto 50)

Elemento Encabezado

  • texto: «OFERTA».
  • Alineación centro.
    Estilo
  • color negro.
  • Tamaño 35px.
  • Peso 800.

Elemento Sección interior x3

a. Primera columna

  • Editar columna
    Estilo
  • Borde – Sombra de caja

Elemento Encabezado

  • Peso 600

Elemento Encabezado

  • Estilo
  • tamaño 21px.
    Avanzado
  • margen: -20, 0, 0, 0.

Elemento Separador

  • Peso 1.
  • Brecha 2.

Elemento Listado de iconos

  • Estilo
    Lista
  • separador: activado.
  • ancho 17
    —
  • alineación centro.
  • Color del texto e icono #000000.

Elemento Botón

  • texto: «COMPRAR».
    Estilo
  • color negro.
  • tamaño 22px.

b. Segunda y Tercera columna se duplica del primero.

Elemento Espaciador (por defecto 50)

SECCION «PREGUNTAS FRECUENTES»

Elemento Encabezado

  • texto: «PREGUNTAS FRECUENTES».
  • Alineación centro.
    Estilo
  • color negro.
  • Tamaño 35px.
  • Peso 800.

Elemento Pestaña es opcional al acordeón (es horizontal)

Elemento Acordeón (es vertical)

  • ancho del borde 2
  • color negro.

SECCION «GARANTIA 7 DIAS»

Elemento Icono

  • icono thumbs ups
    Estilo
  • color negro.
  • tamaño 143

Elemento Encabezado

  • texto: «COMPRA SEGURA».
  • Alineación centro.

SECCION «GARANTIA DE DEVOLUCION»

  • color de fondo Negro.

Elemento Encabezado

  • texto: «GARANTÍA DE DEVOLUCIÓN​».
  • color blanco.

Datos:

  • Andre Cano & Humberto Alzate
  • Web: https://www.cursofunnelead.com/org-andre