¿Por qué crear tu página de links con Divi?

Como comenté en un post anterior en el que te explicaba Qué es una página de enlaces, utilizar plataformas de terceros para crear este tipo de páginas puede presentar más inconvenientes que ventajas. Por ello recomiendo crear esta página dentro de tu propia web, ya sea con plugins o manualmente.

Diseñar una página de enlaces no resulta una tarea complicada si tienes dominio del editor visual que utilices en tu web. En este caso, voy a explicarte cómo crearlo en WordPress con Divi. Verás que es muy sencillo y que los resultados son buenísimos a nivel visual y de uso.

¿Qué debe contener tu página de enlaces?

Aunque esto va por gustos, habitualmente una página de enlaces debe contener lo siguiente y en este orden:

  1. Imagen. El logotipo de tu negocio, o una fotografía si se trata de una marca personal.
  2. Título. El nombre de tu marca, aquel por el que te identifica tu público objetivo.
  3. Extracto. Un resumen de cuáles son tus servicios, qué ofreces a tu comunidad o qué encontrarán en los enlaces.
  4. Enlaces. Una serie de botones con enlaces que dirigen a diferentes páginas, dependiendo de tus objetivo de negocio.
  5. Redes sociales. También puedes destacar las redes sociales en las que tienes presencia. Aunque podrían mostrarse como enlaces, a mí me gusta diferenciarlas, con los iconos correspondientes de cada red social.

Pasos para crear una página de enlaces con Divi

1. Crea una página en blanco

Desde el menú de administración de WordPress, selecciona Páginas > Añadir nueva, y comienza asignándole un nombre para identificarla después. Yo la he llamado Links. Piensa que esta página no va a colgar del menú de tu web, así que solo podrás guiarte por el nombre para identificarla en el listado de páginas desde el panel de administración.

En los atributos de página, elige Blank Page. Así crearás una página en blanco, prescindiendo de elementos que tengas configurado en otras plantillas, como el encabezado o el pie de página, ya que no son necesarios para la página de enlaces y pueden estorbar.

Ahora selecciona Usar Divi Builder para diseñar la página desde el editor visual.

Dentro de Divi, indica que deseas construir la página desde cero y elige la fila de una columna para el diseño.

En la parte inferior puedes cambiar la vista según el dispositivo. Yo recomiendo cambiarlo a vista teléfono, sobre todo si quieres utilizar la página de enlaces para incluirla en tus perfiles de redes sociales.

2. Crea la sección de imagen

Añade una fila con un módulo de imagen y ajusta el módulo a tu gusto con los siguientes de los ajustes del módulo:

  • Contenido > Imagen. Inserta la imagen deseada.
  • Diseño > Alineación. Ubica la imagen en el centro para dar sensación de equilibrio.
  • Diseño > Tamaño. Elige el tamaño que consideres adecuado. En mi caso he seleccionado un 20%.
  • Diseño > Borde > Rectángulo redondeado. Aquí puedes dar a la imagen una forma redondeada si te gusta el efecto. Suele quedar bien para fotografías de persona cuando se trata de una marca personal. Para ello, debes modificar los px de las cuatro esquinas.

Es importante comprobar que la imagen se vea igual en todos los dispositivos (puede ocurrir que se vea redonda en teléfono y ovalada en escritorio, por ejemplo). Recuerda que estás diseñando la página desde la vista teléfono, pero es importante considerar a los usuarios que acceden desde escritorio y tablet. Puedes cambiar la visualización buscando el icono del dispositivo en el panel, y ajustar el diseño según el dispositivo.

3. Crea la sección de título

Y realiza las modificaciones necesarias de diseño:

En el panel Texto, elige la tipografía que desees y el formato (claro, semi bold, negrita…). Personaliza también el color y tamaño de la fuente. Y te recomiendo, como en todos los elementos de esta página, darle una alineación centrada.

Si necesitas crear más líneas de texto, como un subtítulo o un extracto, puedes duplicar el módulo de texto y modificarlo a tu antojo. Como ves, yo tengo dos módulos de texto:

4. Crea la sección de enlaces

Añade otra sección con un módulo de tipo texto. Aquí será donde incluirás los botones con enlaces.

Ajustes de la sección

Si quieres diferenciar la sección de enlaces del resto de la página, dale un color de fondo diferente en los ajustes de sección:

  • Contenido > Fondo. Puedes utilizar un color plano, degradado, etc. Aprovecha para incluir un color característico de tu marca.

Ajustes del módulo de texto

Lo que voy a explicarte ahora es el paso a paso ideal para personalizar el primer botón, antes de crear el resto. Hazlo así para ahorrar tiempo: Cuando tengas el primer botón diseñado a tu gusto (con los estilos de borde, sombreado, etc), solo deberás duplicarlo para modificar únicamente el contenido.

Selecciona el módulo de texto y haz un recorrido por los siguientes paneles:

  • Contenido > Texto. Introduce el primer botón de enlace (ej: Servicios, Portfolio…). Personalmente, me gusta acompañar el texto de un emoji que ayude a identificar a la página a la que dirige (es tan sencillo como copiar y pegar el emoji en el texto).
  • Contenido > Enlace. Inserta el enlace al que dirige cada uno de los botones.
  • Contenido > Fondo. Elige el color de fondo que desees para los botones de enlace. Yo he elegido el blanco. Más adelante podrás modificar el color de fondo del módulo, de modo que el blanco contraste sobre el color que hay detrás.
  • Diseño > Texto. Modifica el aspecto visual del texto (tipografía, color, alineación…).
  • Diseño > Separación > Relleno. Indica cuánto espacio en blanco quieres entre el texto y el límite del botón en el que se encuentra. Yo he elegido 15px en todos (superior, base, izquierda y derecha).
  • Diseño > Borde > Rectángulo redondeado. Puedes darle a los botones una forma redondeada. 5px para todos está bien.
  • Diseño > Sombra de la caja. Elige el sombreado que más te guste. Yo prefiero la sombra inferior centrada.

Una vez tengas el primer botón listo, solo queda duplicar el módulo de texto y personalizar el resto de botones (modificando el texto y el emoji).

5. Crea la sección de redes sociales

Añade otra sección debajo con un módulo del tipo Seguir en medios sociales, y realiza las modificaciones necesarias en los siguientes paneles:

  • Contenido > Red. Selecciona la red social que deseas mostrar.
  • Contenido > Enlace. Inserta el enlace a tu perfil.
  • Contenido > Fondo. Elige un fondo blanco para retirar el color característico de cada red social.
  • Diseño > Alineación. Elige una alineación centrada (como todos los elementos de la página).
  • Diseño > Icono > Color de icono. Inserta un color de tu propia marca.
  • Diseño > Icono > Tamaño de fuente de icono. Modifica el tamaño a tu gusto. Valora si el tamaño será suficiente para los usuarios de teléfono. Lo ideal para mí son unos 25px.

Trata de aplicar los mismos ajustes para todas las redes sociales. Puedes realizar estos cambios sobre una red social y después duplicarla para cambiar únicamente la red social.

Si quieres reducir el espacio entre esta sección y la anterior, puedes hacerlo en Ajustes de sección > Diseño > Separación > Relleno. Yo utilizo 0px en superior y en base.

Recomendaciones finales

¡Ya tienes lista tu página de enlaces! Pero todavía puedes realizar unas últimas modificaciones.

Tip 1: Modifica las separaciones

Divi tiende a incluir demasiado margen entre algunos elementos. Si quieres que no haya tanto espacio entre una sección y otra, debes modificar las separaciones desde los Ajustes de sección > Diseño > Separación. Yo utilizo 0px para el relleno superior y de base.

Tip 2: Configura las medidas según el dispositivo

El editor de Divi permite controlar la configuración específica para cada dispositivo, ayudando a realizar un diseño responsive apto para todo tipo de pantallas. Probablemente tengas que realizar algunos ajustes por separado según el dispositivo (por ejemplo, aumentar el tamaño de la imagen en la vista teléfono y reducirla en la vista escritorio).

Tip 3: Desindexa la página de enlaces

Una página de enlaces puede ser considerada por Google como una página de poca calidad o contenido pobre (thin content). Por ello, conviene desindexarla de los motores de búsqueda.

Esto puedes realizarlo de forma sencilla con plugins como Yoast SEO: