¡Tu licencia Divi con un -20% de DescuentoOferta aquí

Cómo hacer una página de links (bio link) como linktree para redes sociales con Divi

May 23, 2020 | Plugins y complementos para Divi, Tutoriales para Divi

Desde hace tiempo estamos experimentando continuas novedades en las redes sociales, una de ellas y de las primeras que tuvieron la gran mayoría de estas, fue la posibilidad de introducir un link a tu página web.

Bien, aquí hemos experimentado multitud de cambios, URLs largas sin mucha información, URLs amigables, enlaces cortos o servicios para acortar nuestro link… pero quizás todos ellos nos dirigen a un único destino, nuestra URL. Además, en la gran mayoría de ocasiones y con varias redes sociales, el problema se agrava, ya que cada vez que tenemos que publicar una nueva URL, debemos ir cambiando red social a red social.

Otro problema, es dirigir a nuestro usuario a una sola web, acotando las posibilidades de este a únicamente un destino, que, en muchas ocasiones, termina siendo nuestra Home…

Uno de los últimos cambios que nos llaman la atención, son los listados de links en una landing page a la que apuntamos todas nuestras redes sociales. Esta técnica, consiste en insertar en todas nuestras redes sociales un link a una landing page en la que tenemos un árbol de links a los que canalizar a nuestros usuarios (Tenemos servicios como LinkTree o SocialGest que en ofrecen este servicio en el caso de Linktree con un Free plan muy restringido o suscripción, o SocialGest de suscripción).

Desde Prunaestudio, implementamos hace unas semanas nuestra propia página de links (bio link) para redes sociales con Divi.

Y… ¡Os vamos a compartir la plantilla Json para que podáis tener vuestro propio árbol de links, totalmente editable y personalizable de forma gratuita!

¡Vamos!

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Avance

Antes de comenzar a importar la plantilla de la página de links (bio link) para redes sociales dentro del generador de temas, echemos un vistazo al resultado. 

1. Importar el fichero de plantilla descargado JSON

Lo primero que tenemos que hacer es descargar el fichero Json y descomprimir el Zip descargado, tras esto, crearemos una nueva página y entraremos en la edición de esta con el constructor visual Divi.

Una vez entremos y nos pregunte si queremos crear desde cero, seleccionaremos esta opción para empezar a editar nuestra página. Seguidamente y ya en la edición de la página desde el constructor visual, haremos clic sobre el botón inferior de Importar diseño Divi Builder.

Esto nos abrirá un PopUp en el que tendremos que seleccionar el fichero que hemos descomprimido desde la pestaña «Importar», e importar diseño con las opciones de la imagen inferior:

2. Cambiar imagen del perfil y nombre

Bien, ya tenemos importado nuestro layout de links para bio en redes sociales! Lo siguiente que haremos será cambiar la imagen, insertando la que nosotros queramos, así como el nombre de usuario. 

3. Añadir links y editar sus nombres

Para poder insertar todos los enlaces que necesitemos, os vamos a explicar como clonar uno existente y personalizarlo (Nombre, color y enlace).

Lo primero que haremos para clonar un botón/link, será sobre cualquiera de ellos; presionar sobre el icono de clonar elemento:

Tras clonar el elemento, lo abriremos desde el icono de editar ese elemento (icono engranaje gris). En la pestaña «Contenido», editaremos el campo Botón, que será el nombre que se mostrará con este y el Enlace al que enviará al usuario que lo cliquee.

Ahora, editaremos el color de fondo desde la pestaña «Diseño» de ese mismo popup con la opción del Botón; Botón Background

4. Botón de Telegram e iconos de RRSS

Desde Prunaestudio, creemos que un canal muy ágil para comunicar además de redes sociales como Instagram o Facebook, es Telegram. Por esto, os incluimos un primer botón en el cual podéis insertar el link tipo «t.me/mi-canal» para que vuestros usuarios puedan suscribirse directamente a vuestro canal público de Telegram.

 Para configurarlo, únicamente tendréis que pegar vuestro link público de vuestro canal en el enlace de este botón: 

 

Una vez configurado el botón de Telegram, tendremos que desplazarnos al final de la página para editar los iconos de Redes sociales.

Este elemento de redes sociales es el propio del constructor visual de Divi, en nuestro caso, optamos por insertar tres redes sociales, las cuales desde el botón engranaje de cada una de ellas, tendremos que copiar el link a nuestro perfil.

Aquí, os mostramos donde insertarlo:

5. Estilos personalizados para enlaces a Entradas

Os habréis fijado que debajo del texto Últimas entradas no vemos ningún link, esto sucede porque todavía no le hemos dado el color al fondo de estas «pastillas» (Recordar que tendréis que tener entradas en vuestro blog para que se muestren).

Para hacerlo tenemos que introducir el siguiente código CSS en la configuración de la página, entrando a esta configuración desde el engranaje inferior:

.et_pb_post {

margin:10px 0px  !important;

padding:10px 10px!important;

background-color:rgb(109,109,109) !important;

border-radius: 3px;

Pegaremos el código en el input CSS personalizado de la pestaña «Avanzado».

Para personalizarlo a vuestro antojo, desde el círculo de color que nos aparecerá para la opción Background-color, editaremos el color de fondo de las pastillas de Entradas.

Nota importante:

Si nuestra página de links tiene la cabecera y pie de nuestro sitio y no queremos mostrarla, tendremos que ir a la edición de esta página desde WordPress y marcar los atributos de página con el tipo de plantilla Blank Page.

6. Ordenar enlaces y pegar link en nuestras RRSS

Finalmente tendréis que ordenar los distintos botones que habéis introducido de mayor a menor importancia, siempre intentando apoyaros en una estrategia de marketing bien definida.

Como ejemplo, os comparto una captura de como queda en nuestro perfil de Instagram el link a la nueva página de links (bio link) para redes sociales con Divi que hemos creado.

En nuestro caso, ese mismo link lo hemos introducido en todas nuestras redes sociales y con cambiar nuestra página de Divi, actualizamos todas las opciones a las que nuestros usuarios pueden acceder!

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This