Diseño página web para compartir enlaces

Play

En el vídeo de hoy, vamos a diseñar una página web muy sencilla y la vez útil para compartir todos tus enlaces. Utilizar tu propio dominio y hosting para compartir enlaces te permite mantener a los visitantes en tu sitio y personalizar la apariencia según tus preferencias y necesidades.

Antes recuerda que puedes suscribirte gratis al blog.
Si te suscribes puedes proponer artículos y cursos. También te envío un email semanal con todas las novedades que publico en el blog.

Estamos en la décima clase del curso donde creamos un sitio web completo que es un portafolio, y en esta lección trabajamos la mejor opción para compartir todos los enlaces que quieres compartir con tu audiencia, como no puede ser de otra manera, lo harás desde tu propia web.

Aquí tienes el resumen de todo lo que hacemos en el video de la lección.

Primero, nos dirigimos a la página de enlaces que dejamos preparada en clases anteriores. Ocultamos el título de la página y añadimos un contenedor de una columna. Dentro de este contenedor, agregamos un encabezado con el título «So Takashi». Centramos el texto, lo configuramos como un H1 y ajustamos el tamaño de la fuente a 46 píxeles para vista de escritorio y tablet, y 40 píxeles para móvil. También aplicamos nuestro color de énfasis al texto.

Añadimos el patrón de botón personalizado que creamos en la clase anterior. Duplicamos este botón dos veces más para tener tres botones en total. Ajustamos los márgenes superiores e inferiores de cada botón para un espaciado adecuado. Cambiamos los textos de los botones a «Visitar mi web», «Colaboraciones» y «Visita mi tienda».

Para uniformar el tamaño de los botones, añadimos un poco de CSS. Abrimos el inspector de elementos de Google Chrome, copiamos la clase CSS del contenedor del botón y la pegamos en el editor de CSS de Spectra. Definimos un ancho de 300 píxeles para los botones en vista de escritorio y 270 píxeles en vista móvil.

Al final del artículo tienes el código CSS que usamos en la lección.

Añadimos otro contenedor de cuatro columnas para los iconos de redes sociales. Dentro de cada columna, insertamos un icono. Seleccionamos y personalizamos cada icono, cambiando el color a blanco con opacidad y definiendo el color de fondo también con opacidad. Enlazamos cada icono a su respectiva red social y configuramos los enlaces para que se abran en una nueva pestaña.

Seleccionamos el contenedor principal y ajustamos su altura mínima al 100% del viewport height (vh) para centrar el contenido verticalmente. Añadimos una imagen de fondo con una superposición de color y opacidad del 0.8.

Puedes añadir también un video si el contexto de tu web así lo necesita.

Para mejorar la visualización en dispositivos móviles, configuramos las propiedades Flex del contenedor para que los elementos se dispongan en horizontal en lugar de vertical. También ocultamos la cabecera y el pie de página utilizando las opciones de Astra, desactivando todos los elementos para que la página se vea limpia y centrada solo en los enlaces.

Aquí tienes el código que utilizo en el video:

/*Unificar tamaño botones*/
.wp-block-uagb-buttons-child{
	width:300px;
}

/*Tamaño botones en vista móvil*/
@media only screen and (max-width: 768px){
	.wp-block-uagb-buttons-child{
	width:270px;
}
}

Crear una página personalizada para compartir tus enlaces es una excelente manera de mantener a los visitantes en tu sitio web y de diseñar la apariencia según tus gustos. Este enfoque es mucho más flexible que usar una plataforma externa como Linktree, permitiéndote personalizar completamente el diseño y la funcionalidad.

Con este video finalizamos el curso gratuito en el cual has aprendido la mejor manera para presentar tus trabajos profesionales como creativo. Si tienes alguna duda, sugerencia o petición que quieras añadir a tu propia web, déjame un comentario a través de la página de contacto y miro de hacer un video encantado. ¡Ha sido un auténtico placer, nos vemos en otro video, curso, artículo o en cualquier rincón de este maravilloso mundo!