Curso Creación Web Enero 2022

BLOQUE 1: CONCEPTOS BÁSICOS Y PRIMEROS PASOS

  • EL DISEÑO
  • EL CONTENIDO
  • DOMINIO Y ALOJAMIENTO WEB CON RAIOLA
  • WORDPRESS POR DENTRO
  • QUÉ ES UN TEMA. INSTALACIÓN Y CONFIGURACIÓN DE ASTRA WP GRATUITO

BLOQUE 2: CREACIÓN DE LAS PÁGINAS Y PLUGINS RECOMENDADOS

  • DESARROLLO DE LAS PÁGINAS DE LA WEB CON ELEMENTOR GRATUITO
  • PÁGINAS
    • INICIO CON VENTA DE UN SERVICIO CON WHATSAPP Y STRIPE
    • SOBRE MI
    • BLOG
    • CONTACTO
    • TEXTOS LEGALES
  • PLUGINS RECOMENDADOS

Antes de enseñarte cómo crear técnicamente las páginas de tu web, quiero que reflexiones y tomes nota del contenido de cada página que quieras que contenga tu web.

En esta lección vas a descubrir las claves para escribir unos textos que te ayuden a vender!! ¡Vamos a crear una web con estrategia, y no un simple escaparate!

 

Inicio – Home

Es el escaparate de tu negocio. Lo primero que ven cuando llegan a tu web. Sólo tienes unos pocos segundos para cautivarles.

Las 3 preguntas que debes responder en esta página son:

  • ¿Qué hay aquí para mi? Esto es lo primero que hay que responder, y se debe hacer en la primera sección de la página. Por eso en la cabecera debemos decirle de forma breve qué es lo que hay en esta página web para esa persona.
  • ¿Cuáles es el problema de tu cliente y qué solución le aportas? La persona que llega a tu web quiere que le ayudes a solucionar su problema, no que le cuentes tu vida o le muestres 20 opciones que la vuelvan loca y salga corriendo de allí.
  • ¿Cuáles son los beneficios de trabajar contigo? ¿Por qué tendría que elegirte a ti?

 

Un error muy común (si, yo también lo cometí en su día) es poner botones a todas las páginas de la web, las entradas del blog, servicios o productos que vendes, feed de las redes sociales, lead magnet y todo lo que se te ocurra.

 

En cada página de la web debe haber un único objetivo. Máximo 2. Porque cuantas más opciones le des a la persona, es más fácil que salga sin hacer nada.

 

En el caso de la página de inicio, decide cuál es tu objetivo más prioritario, en este momento, en tu negocio.

Si quieres llevar a los visitantes a tu lista de suscriptores, muestra un lead magnet. Si es vender un servicio, muestra tu servicio.

Habla del problema de tu cliente y cómo lo solucionas con tu servicio, lead magnet o lo que sea que hayas puesto como objetivo, para que el texto de tu página consiga esa conversión que quieres.

Si quieres poner una llamada a la acción a un segundo objetivo, hazlo de forma muy desapercibida, para que la persona que llegue aquí cumpla el objetivo que tú quieres.

También puedes mostrar autoridad o prueba social mostrando medios de comunicación donde hayas aparecido, clientes grandes para los que hayas trabajado, colaboraciones importantes o pantallazos o pequeños testimonios de clientes.

No olvides poner una pequeña presentación de ti.

Respecto a si poner las entradas del blog, las redes sociales o el feed de Instagram en la página de Inicio, no es lo recomendable. Piensa que son puntos de fuga. A ti lo que interesa es que se mantengan en tu web y realicen el objetivo que tú tengas (que se suscriban, que te contacten, vender un producto, etc). Los enlaces a redes sociales los puedes poner en el pie de la página web, con iconos pequeños.

Ejemplos:

https://saavedrafisioterapia.com/

https://www.maidertomasena.com/

 

Nota: todavía no te pongo mi página de Inicio como ejemplo porque la estoy renovando, ya que quiero que el objetivo de la página sea vender la Escuela y también tengo que aplicar las claves que te he dicho en este apartado.

 

Si quieres simplificar tu web y sólo tienes un producto o servicio, aprovecha la página de Inicio como página de venta.

 

 

Sobre mi – Quienes somos

Las 3 preguntas que debes responder en esta página son:

  • ¿Por qué haces lo que haces?
  • ¿Por qué es tan importante para ti?
  • ¿Por qué tendría que elegirte a ti?

 

Objetivos de este texto:

  • Que la persona se sienta identificada
  • Que la persona conecte con la marca

 

Respecto a las llamadas a la acción de esta página, decide cuál es el objetivo de esta página (elige 1): que se descarguen tu regalo (y así se suscriban a tu lista de emails), que contacten contigo para contratar un servicio, comprar una formación, etc.

También puedes mostrar autoridad o prueba social mostrando medios de comunicación donde hayas aparecido, clientes grandes para los que hayas trabajado, colaboraciones importantes o pantallazos o pequeños testimonios de clientes.

Si quieres que lean hasta el final, tu página debe ser limpia, clara, específica y directa.

 

OPCIÓN 1: Cuenta tu historia personal.

Cuando una persona llega a la página de Sobre mi, lo que está buscando es saber quién eres tú y por qué haces lo que haces.

Entonces, nosotros tenemos que darle esta información, pero no simplemente hablar de nosotras, sino que queremos que la persona se sienta identificada con lo que está leyendo y diga “Carmen estaba como estoy yo ahora, y yo quiero estar como Carmen está ahora”.

Hay que encajar la historia, de manera que, aunque hables de ti, consigas que la otra persona se sienta identificada.

Ejemplos:

https://saavedrafisioterapia.com/sobre-mi/

https://www.carmenercilia.com/sobre-mi/

https://www.maidertomasena.com/sobre-mi/

 

OPCIÓN 2: Habla de los valores de tu marca.

Si no quieres hablar de tu historia personal, o eres una marca de empresa, donde no eres tú sola sino un equipo de personas, puedes optar por hablar de los valores de la marca, de por qué surgió ese negocio, de por qué vendes lo que vendes y lo haces de esa manera única.

Ejemplos:

https://www.pepephone.com/los-principios-de-pepephone

https://www.desigual.com/es_ES/corporate/about-us/

 

Servicios

Ya hemos respondido a las preguntas «¿Qué hay aquí para mi?» y «¿Quién eres tú y porqué haces lo que haces?».

Ahora toca responder: «¿Cómo haces lo que haces»?

 

Cuando hablo de servicios, hablo del trabajo que realizas previo pago.

Puede ser sesiones 1 a 1, venta de cursos, talleres, tanto online como presenciales, etc.

Te comparto la estructura de una página de ventas.

  1. Promesa (lo que va a conseguir con tu producto/servicio) + CTA (botón con llamada a la acción)
  2. Problema de la persona a la que te estás dirigiendo y por qué es importante que solucione el problema
  3. Breve historia + presentación de ti
  4. Oferta.
    1. Explicación de la oferta en una frase (beneficios, no características)
    2. ¿Qué vas a aprender/conseguir con el producto/servicio/curso?
    3. ¿Cómo lo vas a aprender? (si es formación) / ¿Qué incluye el servicio?
    4. Bonus (si hay)
    5. Precio
    6. CTA
  5. Testimonio
  6. Transformación de tu producto/servicio
  7. ¿Por qué debería comprar tu servicio y no otro?
  8. Testimonio
  9. Esto es para ti si…
  10. Preguntas frecuentes
  11. Cierre + CTA

 

Ejemplos:

https://saavedrafisioterapia.com/servicios/

https://www.carmenercilia.com/consultoria-privada/

https://www.maidertomasena.com/conferencias/

https://jennyruizg.com/el-refugio/

 

 

Contacto

Esta página es para todas esas personas que llegan a tu web, que no encajan en ninguno de tus productos o servicios, porque están buscando algo en concreto, o para quien tiene alguna duda que no ha quedado resuelta en los textos de la web.

Es bueno poner una frase corta que produzca cercanía a quién lo lee, justo antes o al lado del formulario de contacto.

Ejemplos:

https://saavedrafisioterapia.com/contacto/

https://www.carmenercilia.com/contacto/

https://www.maidertomasena.com/contacto/

 

Diseño de tu web

 

Si vas a crear un blog, te recomiendo usar el editor de WordPress para editar las entradas. Tienes más información AQUÍ.

Acceso a licencia de Elementor Pro por sólo 20€/año, en lugar de 49$

Dominio y alojamiento web

Aprovecha el descuento del 10% que tengo para ti

Compra tu alojamiento web con descuento >>

Si ya tienes este servicio contratado y quieres compartir el descuento con otra persona, puedes hacerlo sin problema. Para tu información, por cada compra realizada desde este enlace, yo recibo una pequeña comisión. Soy 100% transparente. Con este acuerdo que tengo con Raiola ganamos todos 😉

Cobro de servicios con Stripe

En el taller aprendimos a crear una cuenta de Stripe, un producto y un enlace a una página de pago para ese producto. En el siguiente enlace tienes más información de este nuevo servicio de Stripe con el que puedes crear enlaces de pago incluso sin tener página web.

https://stripe.com/es/payments/payment-links

 

Otra opción es usar un plugin gratuito de WordPress con el que puedes integrar Stripe con tu WordPress y crear los productos y los enlaces (y botones) de pago directamente en WordPress.

Además el plugin te proporciona envío de notificaciones por email (no genera facturas pero si puedes enviar un email con el detalle de la compra, que al cliente le serviría como recibo) y otras funcionalidades interesantes.

Para conocer mejor el plugin y cómo utilizarlo, tienes el siguiente vídeo.

 

Plugin Accept Stripe Payments.

  • 00:00 Introducción
  • 01:07 Instalar el plugin Stripe Payments en WordPress
  • 02:36 Qué nos ofrece este plugin
  • 04:50 Ajustes generales. Cómo conectar nuestra cuenta de Stripe con la web.
  • 06:58 Ajustes de correo electrónico
  • 10:02 Ajustes avanzados
  • 10:55 Activar reCAPTCHA de Google
  • 11:39 Añadir un nuevo producto
  • 18:30 Mostrar el botón de pago de nuestro producto/servicio en una página de tu web
  • 21:02 Cambiar el estilo del botón (con CSS. te dejo el código en el comentario fijado)
  • 23:15 Resultado final de nuestro botón de pago con Stripe
  • 26:53 Modificar la página genérica de gracias (o Checkout Result) que te crea el plugin por defecto
  • 27:47 Cómo usar una página de gracias específica para un producto concreto
  • 29:42 Ver los pedidos que nos han realizado

 

Es una opción interesante para cobro de servicios. Aunque también puede servir para vender producto físico, pero para ello es más recomendable usar Woocommerce, un famoso plugin diseñado para crear y gestionar tiendas online.

Cobro de servicios con Paypal

 

En este vídeo, te mostraré los usos de Paypal.com (cuenta de empresa) y Paypal.me

Y veremos cómo crear pagos a plazos y suscripciones, paso a paso y desde cero.

  • 00:00 Qué es Paypal
  • 00:46 Ideas de cómo puedes ofrecer Paypal a tus clientes
  • 01:51 Beneficios de usar Paypal
  • 03:00 Tarifas de Paypal
  • 03:34 Paypal Me. Perfecta para pagos puntuales.
  • 04:59 Herramientas de Paypal.com
  • 06:28 Cómo acceder a los botones de pago
  • 07:48 Creación de un botón de pago
  • 12:59 Cómo obtener el enlace de la página de pago para compartirlo con los clientes
  • 14:03 Creación de un botón para pago a plazos y otro de pagos recurrentes (se le cobra hasta que el cliente se dé de baja del servicio)

El aviso legal, la política de privacidad, las condiciones de contratación y la política de cookies deben constar separados, para mayor entendimiento y transparencia en las páginas de inicio y en todas las subpáginas. Ten en cuenta que estos textos se relacionan entre sí y es necesario introducir los enlaces correspondientes donde proceda y subrayados para mayor identificación.

Por lo tanto, crea una nueva página dentro de tu web, por cada una de ellas. Ejemplo:

IMPORTANTE: No te recomiendo nunca copiar los textos legales de otra web, sino que contrates el servicio correspondiente con un especialista o LegalBox, y los hagas adaptados a tu negocio. Yo también puedo ayudarte con este servicio si lo necesitas.

Para este taller te cedo un texto básico válido para el tipo de web que creamos en ella con venta de un servicio con cobro online por Stripe, un formulario de contacto sencillo y sin cookies de terceros.

Estos textos deben estar bien visibles en todas las páginas, por lo que vamos a poner enlaces a ellas en el footer (o pie de página) de la web, como te muestro en el ejemplo:

Cómo añadirlo con el tema Astra:

<a href="https://www.tuweb.com">[site_title]</a> [copyright] [current_year] All rights reserved <br><br>
<a target="_blank" href="https://www.tuweb.com/aviso-legal/"> Aviso Legal </a> · <a target="_blank" href="https://www.tuweb.com/politica-de-cookies/"> Política de Cookies </a> · <a target="_blank" href="https://www.tuweb.com/politica-de-privacidad/"> Política de Privacidad </a> · <a target="_blank" href="https://www.tuweb.com/condiciones-generales-de-contratacion/"> Condiciones de contratación </a>

Debemos tener la casilla de aceptación de la política en cualquier sitio donde pidamos información al usuario, ya sea su correo electrónico o cualquier dato de tipo personal. Habitualmente lo hacemos en:

  • Formularios de contacto
  • Comentarios de las entradas del blog
  • Formularios de suscripción (en este taller no lo vamos a ver)

Siempre se requiere la confirmación de lectura o el consentimiento, según el caso. En el Reglamento Europeo de Protección de Datos (RGPD), se dota de especial relevancia a la obligatoriedad de requerir el consentimiento expreso en muchos casos.

Requerimientos:

Como cada formulario persigue una finalidad diferente, es preciso informar de manera específica en cada uno de esos formularios sobre la finalidad, destinatarios, etc. La aplicación te permite obtener los diferentes textos legales para los diferentes tipos de formularios que tienes en la web.

Cuando un usuario facilita voluntariamente sus datos de carácter personal a través de Internet, debe ser informado y/u otorgar su consentimiento para el tratamiento de los mismos en los términos de los que ha sido convenientemente informado en el momento de la recogida.

Todo formulario debe contener:

  1. Una casilla de aceptación
  2. Un enlace hacia la política de privacidad.
  3. Una primera capa informativa con la coletilla legal del formulario según su tipología. No se puede poner un desplegable que se abra al hacer click. Este texto tiene que estar visible en todo momento.

Es indispensable recoger la conformidad del usuario con la política de privacidad antes de validar sus datos en cualquier formulario mediante una casilla de “acepto”, tal como se expone en el formulario siguiente:

El “Texto legal pie de formulario web” es importante que esté visible debajo del formulario para garantizar la información correcta a cada usuario.

Según el tipo de formulario (Venta, contacto, suscripción) deberás utilizar la cláusula informativa correspondiente que hemos redactado para caso.

Aceptación de la privacidad en el formulario de contacto

Con el plugin «Contact Form 7«

  • ve a la configuración del plugin, a editar el formulario
  • coloca el cursor del ratón debajo de <label> Tu mensaje …. </label>
  • añade un nuevo campo pinchando en «aceptación»
  • se te abrirá una ventana para generar una nueva etiqueta de formulario, del tipo aceptación.
  • ponle como nombre «politica-de-privacidad»
  • en condición, escribe «He leído y acepto la política de privacidad.» (poniendo el enlace a tu política de privacidad. Tienes el código a continuación.)
  • desmarca la opción «Hacer que esta casilla de verificación sea opcional», ya que este campo es obligatorio.
  • dale al botón «Insertar»
He leído y acepto la <a href="https://www.dominiodetuweb.com/politica-de-privacidad/" target="_blank">política de privacidad</a>.

Una vez tienes el formulario, copia el shortcode que tienes en la franja azul, justo debajo del nombre del formulario.

Ve a crear una nueva página, llamada «Contacto», y a edítala con Elementor (con el gratuito lo puedes hacer).

Añades un widget «Shortcode» para incrustar el formulario.

Añade el texto legal de debajo del formulario con el widget «Párrafo»

Adapta el siguiente texto a tu caso y tus datos (el texto tachado es el que tienes que sustituir por tus datos)

Responsable: Carmen Ercilia González Payano.
Finalidad: Gestionar la solicitud que realizas en este formulario de contacto.
Legitimación: Consentimiento del interesado.
Destinatarios: No se cederán a terceros salvo obligación legal.
Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, limitación, oposición y demás derechos legalmente establecidos a través del siguiente e-mail: hola@carmenercilia.com.
Información adicional: Puedes consultar la información adicional y detallada sobre protección de datos aquí.

Aceptación de la privacidad en los comentarios del blog

Te recomiendo usar el siguiente plugin:

WP Comment Policy Checkbox – Añade un casilla de verificación y un texto personalizado al formulario de comentarios de modo que el usuario pueda ser informado y dar consentimiento de la política de privacidad de la web. Y para que guarde este consentimiento en la base de datos.

Te dejo aquí el texto, pero debes sustituir mis datos (te los pongo tachados para que veas claramente cuales son) por los tuyos.

Responsable: Carmen Ercilia González Payano.
Finalidad: Moderar y responder comentarios de usuarios.
Legitimación: Consentimiento del interesado.
Destinatarios: No se cederán a terceros salvo obligación legal.
Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, limitación, oposición y demás derechos legalmente establecidos a través del siguiente e-mail: hola@carmenercilia.com.
Información adicional: Puedes consultar la información adicional y detallada sobre protección de datos aquí.

Uno de los puntos más importantes a la hora de aplicar la normativa es la necesidad de informar al usuario explícitamente sobre la utilización de cookies en nuestra página web, en especial en cuando se utilizan cookies de terceros (análiticas, publicitarias, de afiliados, etc.)

Hay dos tipos de cookies: las estrictamente necesarias para la navegación y las que no.

Las que no son estrictamente necesarias para la navegación y que suelen ser las estadísticas (Google Analytics) y otras de seguimiento (Pixel de Facebook), requieren el consentimiento del usuario. Es decir, que la web no puede descargar esta cookies hasta que el usuario acepta las mismas.

Las que son estrictamente necesarias, como las de autenticación u otras, no requieren el consentimiento y pueden/deben instalarse directamente, independientemente de que se haya informado previamente al usuario sobre su existencia.

¿Qué debe tener mi plugin de aviso de cookies para cumplir con la RGPD?

Me puse a buscar y probar todos los plugins habidos y por haber para consentimiento de políticas de privacidad y cookies, que deberían ofrecer lo siguiente:

  • Banner de aviso inicial claro y visible sin duda alguna sobre políticas de privacidad y cookies. La famosa primera capa de información.
  • El banner debe poderse descartar mediante aceptación o rechazo.
  • En el banner debe poderse enlazar a la información completa sobre privacidad y cookies fácilmente.
  • Debe tener una ventana de ajustes desde la que el usuario pueda fácilmente cambiar su decisión sobre aceptación de las políticas de privacidad y cookies.
  • Debe poderse forzar (o no) la aceptación de las cookies imprescindibles o de sesión.
  • Deben poderse aceptar o rechazar las cookies de terceros y adicionales separadamente.
  • Se debe poder especificar la caducidad de la aceptación (por ley 24 meses máximo).
  • Debe disponer de algún sistema para REALMENTE poder controlar y aceptar/rechazar las cookies.
  • Compatible con las herramientas de privacidad de WordPress.
  • Compatible con plugins multilenguaje.
  • Adaptable a todo tipo de dispositivos (responsive).
  • Mejor si es gratuito en las características principales.

Vista la lista, ¿qué encontré?

La cruda realidad

Tras muchos días de pruebas comprobé que la mayoría de plugins de cookies no ofrecen ni la mitad de los requisitos mínimos para ayudarnos a cumplir el RGPD. De hecho, la mayoría solo están pensados para leyes de cookies de países que no son de la UE.

O solo ofrecen un método de consentimiento, o no bloquean realmente las cookies hasta la aceptación, o simplemente solo son un banner que no sirve para nada más que informar, sin consentimiento real por parte del usuario.

La solución: GDPR COOKIE COMPLIANCE

 
  • Banner de primera capa de información personalizable en textos, aspecto y posición.
  • Totalmente editable (textos, aspecto, colores, tipografías, incluso tu propio logo).
  • Ajuste para definir caducidad del consentimiento.
  • Por defecto se pueden configurar la aceptación o no de cada tipo de cookie.
  • Ventanas separadas para cookies de sesión, de terceros y adicionales.
  • Enlace sencillo e integrado a las políticas de privacidad y cookies.
  • Pantalla de revisión de los consentimientos por parte del usuario fácilmente enlazable desde cualquier página.
  • Compatible con WPML, QTranslate, WP Multilang y Polylang.
  • Totalmente responsive.
  • Botones de aceptar/rechazar.
  • Control real de las cookies mediante cajas donde introducir los scripts que no se cargarán hasta la aceptación.

Así que, como ves, cumple con todo lo que buscaba para cumplir el RGPD.

A continuación te muestro cómo lo tengo yo configurado en mi web. (Los ajustes del banner los explico después de las cookies de terceros porque, depende de lo que indiques allí, pondremos un texto u otro).

Marca

Botón flotante

Ajuste generales

Política de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Aquí puedes leer nuestra Política de Privacidad y Política de Cookies. (ENLAZANDO A TUS PÁGINAS DE POLÍTICAS)

Cookies estrictamente necesarias

 

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Básicamente la web no funcionará bien si no las activas.

Estas cookies son:

– Comprobación de inicio de sesión. (si tus usuarios pueden loguearse, como en el caso de una escuela online o web de membresía)

– Cookies de seguridad imprescindibles.

– Saber si ya has aprobado/rechazado las cookies.

– Cookies de comentarios, si aceptaste que se te reconozca en cada visita y si quieres recibir avisos de comentarios nuevos. (si lo tienes así configurado).

Cookies de terceros:

En este taller no contemplamos el uso de cookies publicitarias ni analíticas.

Desactiva la pestaña, de cookies de terceros, como te muestro a continuación.

 

Cookies de terceros APAGADO

Práctico y, sobre todo, funciona, pues todo script que pongas ahí, en vez de a través de plugins, ajustes del tema o insertados, no se cargará hasta que el usuario no acepte la correspondiente pantalla de aceptación (cookies de terceros o adicionales).

Por supuesto, esto implica que no debes usar plugins para insertar este tipo de scripts que creen cookies. Vamos, si quieres cumplir con la legislación europea de protección de datos y cookies.

Ajuste del banner

En este taller no contemplamos el uso de cookies publicitarias ni analíticas.

Utilizamos cookies propias. Puedes ver mi política de Cookies para más información. Puedes aceptar todas las cookies pulsando el botón “Aceptar” o configurarlas o rechazar su uso pulsando el botón «Configurar».

NOTA: Para realizar esta lección, he recopilado información del blog https://ayudawp.com/ y https://lexgalbox.plus.

Para la adecuación legal de tu página web:

A continuación te enseño a instalar y configurar el plugin de seguridad que yo misma utilizo en mis webs y las de mis clientas: All In One WP Security

 

Esta formación incluye una sesión individual conmigo.