Bienvenido a la publicación 5 de 5 en nuestra miniserie Cómo crear un sitio web de cartera simple y efectivo con Divi . En esta serie, cubriremos todo lo que necesita hacer para crear su propio sitio web de cartera desde cero. También repasaremos cómo usar nuestro sistema de prueba A/B Divi Leads para asegurarnos de que su sitio sea efectivo para atraer nuevos clientes.
En esta publicación, tomaremos el sitio web de cartera mínima que construimos durante los últimos cuatro días y configuraremos algunas pruebas para ayudar a maximizar su efectividad. Para ello, utilizaremos el sistema de pruebas A/B integrado de Divi , Divi Leads.
¡Empecemos!
Suscríbete a nuestro canal de Youtube
Crear una página de agradecimiento
Hay dos cosas que debemos hacer antes de saltar a las pruebas. El primero de ellos es crear una página de agradecimiento. Hace un tiempo, le mostré a la comunidad cómo rastrear la efectividad de un embudo de ventas completo usando el shortcode de seguimiento de objetivos fuera de la página de Divi Leads. También haremos algunas pruebas como esa en esta publicación y requieren una página de agradecimiento.
No importa cómo se vea tu página de agradecimiento, siempre y cuando transmita el mensaje y sea una página única.
Una vez que haya creado su propia página de agradecimiento, vaya a los módulos de su formulario de contacto en su página de información/contacto y abra la pestaña de configuración general.
Asegúrese de configurar el enlace para su nueva página de agradecimiento como el enlace de redireccionamiento al que se envía a las personas después de enviar un mensaje. Haga esto para ambas variantes de diseño de su página de contacto/acerca de.
Guardar todos nuestros diseños en la biblioteca Divi
Lo segundo que debe hacerse antes de comenzar a probar es guardar todos nuestros diseños y secciones en la Biblioteca Divi. Esto evitará que eliminemos accidentalmente un diseño que nos guste al finalizar una prueba dividida. También nos ayudará a simplificar nuestras páginas, manteniendo solo el contenido que queremos visible en la página.
Guardar el diseño completo de la página de inicio y sus secciones
Si siguió nuestras dos primeras publicaciones, «Cómo crear una página de inicio de cartera mínima con Divi» y «Uso de filtros, secciones destacadas y llamadas a la acción para expandir una página de inicio de cartera mínima», entonces tendrá un diseño de página de inicio «maestro» que parece como la imagen de abajo (cuando se ve en el backend).
Guardar el diseño «maestro» de página completa:
Haga clic en el botón «Guardar en la biblioteca» en la esquina superior izquierda de Divi Builder. Etiquete el diseño como «Diseño de página de inicio maestra de cartera mínima» y haga clic en el botón azul Guardar.
Guardar las secciones de la página de inicio:
Haga clic derecho en el azul de la sección superior y haga clic en «Guardar en la biblioteca».
Puede elegir crear una nueva categoría para todos los diseños/secciones mínimos de su portafolio. Si es así, utilice la categoría creada por el creador. Elegí usar los siguientes nombres para cada sección para ayudar a que se puedan buscar y reconocer.
- Minimal Portfolio Hero Sección 1 (en caso de que quieras hacer más y probarlos entre sí)
- Cartera mínima estándar
- Cartera mínima filtrable
- Minimal Portfolio Global Call to Action 1 (si aún no lo ha hecho, guárdelo como elemento global)
- Pie de página mínimo de cartera (si aún no lo ha hecho, guárdelo como elemento global)
Guardar la página Acerca de/Contacto
Si siguió mi publicación más reciente «Cómo crear una página Acerca de convincente para el sitio web de su cartera con Divi», entonces su página Acerca de/contacto debería verse así en el backend del creador.
Al igual que con la página de inicio anterior, guarde el diseño completo primero como «Página de contacto/acerca de la carpeta maestra de cartera mínima». Luego guarde cada sección individualmente. Usé los nombres a continuación.
- Cartera mínima Acerca de/Contacto Elementos apilados
- Portafolio mínimo Acerca de/Contacto Elementos de lado a lado
Con todo guardado, ¡ahora estamos listos para ejecutar algunas pruebas A/B!
Ejemplo de prueba dividida: cartera estándar frente a cartera filtrable
Supongamos que desea probar qué versión de su cartera tiene más probabilidades de hacer que las personas hagan clic en el botón de llamada a la acción en la parte inferior de la página. En el generador de backend de su página de inicio, comience eliminando la sección principal (debe guardarse en su biblioteca).
Luego, haga clic derecho en la sección de cartera estándar y haga clic en «prueba dividida». Te pedirá que selecciones tu objetivo. Elija el módulo de botón en la sección de llamada a la acción en la parte inferior de la página. Hará que ese elemento se vuelva azul.
Notarás que la sección de tu portafolio ahora es amarilla. También debe tener una flecha que apunta hacia abajo en la esquina superior izquierda del cuadro de sección y una etiqueta al lado que diga «Sección 1». Si hace clic en la flecha, lo llevará a la «Sección 2», que queremos editar.
Ahora, normalmente, esta sería la parte en la que puede hacer clic en la configuración de su sección, fila o módulo de la sección dos y realizar cambios. Pero ya hemos creado la versión alterada que queremos y está deshabilitada debajo de nuestra prueba dividida.
Todo lo que tenemos que hacer es hacer clic con el botón derecho y copiar la fila de la cartera filtrable y pegarla en la prueba dividida que se encuentra arriba.
Luego, podemos eliminar tanto la fila superior como la sección de cartera filtrable deshabilitada (que debe guardarse en su biblioteca). Resultando en una prueba dividida como la imagen de abajo.
Pero aún no hemos terminado. Hay una cosa más que podemos rastrear. Podemos usar el código abreviado de seguimiento de Divi Leads para ver cuántas personas envían una consulta de reserva después de hacer clic en el botón de llamada a la acción.
Para hacer eso, navegue hasta la parte superior de Divi Builder en su página de inicio y haga clic en el ícono del menú de hamburguesas para abrir la configuración de la página.
Desplácese hacia abajo hasta donde dice «Seguimiento de código corto» y cámbielo a «Sí». Luego copie el código abreviado allí y haga clic en Guardar para cerrar ese modal. Ahora vaya a su página de agradecimiento en el backend y agregue un módulo de texto llamado «seguimiento de código abreviado» y pegue el código abreviado en él.
Guarde todo, actualice ambas páginas y controle los resultados. Que, por cierto, se puede encontrar haciendo clic en el ícono del gráfico en la parte superior de la página de su constructor donde está ejecutando la prueba dividida (en este caso, su página de inicio/cartera).
Verá estadísticas basadas en clics, lecturas, rebotes, compromiso de objetivos y (cuando haya usado el código abreviado como lo hemos hecho nosotros) conversiones de código abreviado.
Cuando tenga suficientes datos para tomar su decisión, puede hacer clic en el botón azul «Finalizar prueba dividida y elegir ganador» en la parte inferior. Elegirá el diseño que desee y descartará el otro. ¡Pero no te preocupes! Como guardamos todo antes de comenzar, en realidad no perderá nada.
Algunas otras pruebas que quizás desee ejecutar
Debido a que necesitamos administrar la longitud de esta publicación, hay varias otras pruebas que me encantaría mostrarle cómo realizarlas, pero que no tenemos el tiempo ni el espacio para compartir. Sin embargo, estoy seguro de que, dado el ejemplo anterior y los recursos a continuación, puede probar con éxito cualquier elemento de su nuevo sitio de cartera mínima que desee.
Para ayudarlo a comenzar, aquí hay una lista de otras pruebas divididas que quizás desee ejecutar:
- Pruebe dos o más diseños de página de cartera entre sí para ver cuál da como resultado que más personas hagan clic en el módulo de llamada a la acción en la parte inferior de la página.
- Pruebe las variaciones de diseño de la sección principal entre sí.
- Pruebe las variaciones de diseño del módulo de llamado a la acción global entre sí.
- Pruebe la copia del módulo de llamada a la acción con diferentes versiones de la copia.
- Pruebe la copia de la sección principal con diferentes versiones de la copia.
- Pruebe el texto del campo del formulario de contacto con una versión diferente de la copia.
Más recursos de Divi Leads
Tenemos bastantes otras publicaciones aquí en nuestro blog sobre cómo usar la función Divi Leads. Si esto es interesante para usted, le recomiendo que los revise y aprenda todo lo que pueda sobre esta poderosa herramienta.
- 10 técnicas de optimización de la tasa de conversión que puede probar con Divi Leads – Divi Nation Short
- Cómo determinar la importancia estadística cuando se realizan pruebas A/B con Divi Leads
- Cómo realizar pruebas A/B fáciles con WordPress y Divi Leads
- Cómo construir una página de destino efectiva desde cero con Divi Leads
- Dominar el diseño de conversión con WordPress y Divi Leads
- Seguimiento de objetivos fuera de la página con Divi Leads Shortcode Tracking – Divi Nation Short
Conclusión de la serie: Cómo crear un sitio web de cartera simple y efectivo con Divi
Este post concluye nuestra miniserie. Espero que si ha podido seguirlo, se haya sentido capacitado para crear un sitio web de cartera para usted o sus clientes del que pueda estar orgulloso. Y, para el caso, ¡uno del que puede estar seguro está funcionando de manera efectiva!
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!