Tener una página de aterrizaje de tipo «tarjeta virtual» (vCard) es muy útil a nivel de marca personal. Existen muchas aplicaciones con las que puedes crear un sitio web de ese estilo. Pero, aquí, te vamos a contar cómo hacerlo con WordPress y Gutenberg (Edición completa del sitio).
Pero no es necesario que tengas la Edición completa del sitio (FSE) activa. Si tienes WordPress 5.9 (o superior) pero sin un tema de bloques, también puedes implementar un sitio web tipo vCard siguiendo las instrucciones que damos en este artículo. La diferencia será la manera de preparar la construcción, tal como se puede ver en las siguientes entradas:
- Preparando la construcción de un sitio web vCard en un tema clásico de WordPress
- Preparando la construcción de un sitio web vCard en un tema de bloques de WordPress
Si necesitas aclaraciones sobre las diferencias entre un tema clásico y un tema de bloques, acude a nuestro FAQ.
Sarah Gooding publicó un vídeo explicando cómo construir un sitio web vCard con el tema Eksell. Eksell es un tema clásico con una plantilla predefinida en blanco. En este artículo, se explica cómo hacerlo en el tema de bloques Twenty Twenty Two.
1. Archivos que utilizaremos
Utilizaremos dos archivos multimedia en concreto pero tú puedes usar los tuyos.
2. Insertar un bloque de fondo (contenedor) con un bloque de columnas dentro
Para preparar la construcción de nuestra página de aterrizaje vCard, en el tema de bloques Twenty Twenty Two, entraremos en el editor del sitio y accederemos a la plantilla «Página de inicio». Esta plantilla está prevista en el tema Twenty Twenty Two y es la que se muestra como la página de inicio del sitio. Si no está en la lista de plantillas, añádela mediante la opción correspondiente.
En el GIF observarás la inserción inicial de un bloque de fondo, que se configura provisionalmente con el color blanco y una altura de 750px. Lo que se pretende es ocupar toda la altura de la pantalla por lo que a lo mejor tienes que modificar posteriormente dicha altura ampliándola. Luego se añade un bloque de columnas, saltando la opción de formatos predefinidos y eligiendo 4 en el número de columnas. En el paso 2 configuraremos el tamaño del ancho de las columnas.
Aunque la opacidad del bloque de fondo se ha puesto al 50%, esto puedes modificarlo más adelante cuando se inserte el vídeo.
Es muy importante que en la configuración del bloque de columnas elijas «apilar en móviles» para que la página se vea bien en los dispositivos móviles.
2. Configuración del tamaño de las columnas
En el GIF vemos la inserción del bloque de columnas, dentro del bloque de fondo. Para facilitar la comprensión de la estructura, vemos cómo se emplea la vista de lista.
Las columnas de los extremos se configuran con un ancho del 25%.
3. Añadir la imagen en la segunda columna empezando por la izquierda
Para añadir la imagen utilizaremos la opción de URL aunque tú puedes hacerlo subiendo tu propia imagen. La configuraremos como redondeada y con una dimensión del 25%.
4. Añadir el contenido de la tercera columna empezando por la izquierda
Observa el GIF y verás cómo se inserta primero un bloque de párrafo para escribir el nombre, después la descripción en otro bloque de párrafo y, finalmente, el bloque de «Iconos sociales». Para configurar la tipografía del nombre se fija una altura de línea de 0, para que no quede mucha separación entre el nombre y la descripción. Para el tamaño de fuente del nombre se pone 30px. Luego se seleccionan las distintas redes sociales, dentro del bloque de Iconos. Todo esto se ajustará al final, una vez que insertemos el vídeo.
5. Inserción de la imagen de fondo
Para subir el vídeo, hemos empleado la opción de elegirlo desde la biblioteca de medios, por lo que se supone que la hemos subido previamente. Tú puede subir tu propio vídeo.
En la configuración, el GIF muestra que modificamos el color al negro para mejorar el contraste. Será necesario, en ese caso, cambiar el color del texto tanto en el nombre como en la descripción.
6. Ajustes finales
Ahora puedes realizar todos los ajustes que desees con el fin de mejorar el diseño. Por ejemplo, el color de los textos para optimizar el contraste y añadir un bloque espaciador antes del nombre para bajar un poco el contenido y centrarlo verticalmente respecto a la imagen. También, puedes centrar el nombre, la descripción y los iconos sociales.
Este es el resultado final:
7. Código completo
Para facilitarte la exploración de este tipo de ejercicios, copia las siguientes instrucciones al portapapeles, pon el editor de tu WordPress en modo código, pega el contenido del portapapeles y regresa al modo visual.
<!-- wp:cover {"url":"http://pruebas-fse/wp-content/uploads/2022/03/VIDEO-TRAILER-2.mp4","id":469,"dimRatio":50,"overlayColor":"foreground","backgroundType":"video","minHeight":750,"isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:750px"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="http://pruebas-fse/wp-content/uploads/2022/03/VIDEO-TRAILER-2.mp4" data-object-fit="cover"></video><div class="wp-block-cover__inner-container"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"25%"} -->
<div class="wp-block-column" style="flex-basis:25%"></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"width":270,"height":270,"sizeSlug":"large","className":"is-style-rounded"} -->
<figure class="wp-block-image size-large is-resized is-style-rounded"><img src="https://antoniocambronero.com/wp-content/uploads/2022/03/ANTONIO-CAMBRONERO-POST-IG.png" alt="" width="270" height="270"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:spacer {"height":"40px"} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":"0","fontSize":"30px"}},"textColor":"background"} -->
<p class="has-text-align-center has-background-color has-text-color" style="font-size:30px;line-height:0">Antonio Cambronero</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"center","textColor":"background"} -->
<p class="has-text-align-center has-background-color has-text-color">Informático, blogger y profesor</p>
<!-- /wp:paragraph -->
<!-- wp:social-links {"align":"center"} -->
<ul class="wp-block-social-links aligncenter"><!-- wp:social-link {"url":"adfaf","service":"wordpress"} /-->
<!-- wp:social-link {"url":"adfafaf","service":"twitter"} /-->
<!-- wp:social-link {"url":"adsaf","service":"facebook"} /-->
<!-- wp:social-link {"url":"afdafaaf","service":"youtube"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"25%"} -->
<div class="wp-block-column" style="flex-basis:25%"></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->Conclusiones
Hemos creado una página de aterrizaje de estilo vCard desde cero, empleando un tema de bloques (Twenty Twenty Two) y la edición completa del sitio. Para ello, solamente hemos utilizado bloques nativos:
- Bloque de fondo, con un vídeo.
- Bloque de columnas, con 4 columnas, las de los extremos con ancho 25%
- Bloque de imagen.
- Bloques de párrafo y de Iconos sociales
- Bloque espaciador
Espero tus comentarios, gracias 🙂
Deja una respuesta