Recibe el boletín informativo, todos los lunes, y descarga nuestros ebooks exclusivos.

Construcción de un sitio web vCard utilizando un tema de bloques y la edición completa del sitio (FSE)

VCARD-CONSTRUCCION-1024x576 Construcción de un sitio web vCard utilizando un tema de bloques y la edición completa del sitio (FSE)

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:

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

vcard-1-1 Construcción de un sitio web vCard utilizando un tema de bloques y la edición completa del sitio (FSE)

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

vard-2 Construcción de un sitio web vCard utilizando un tema de bloques y la edición completa del sitio (FSE)

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

vcard-3 Construcción de un sitio web vCard utilizando un tema de bloques y la edición completa del sitio (FSE)

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

vcard-4 Construcción de un sitio web vCard utilizando un tema de bloques y la edición completa del sitio (FSE)

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

vcard-5 Construcción de un sitio web vCard utilizando un tema de bloques y la edición completa del sitio (FSE)

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:

vcar-final-1024x475 Construcción de un sitio web vCard utilizando un tema de bloques y la edición completa del sitio (FSE)

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 🙂

Comparte en Mastodon:

mastodon Construcción de un sitio web vCard utilizando un tema de bloques y la edición completa del sitio (FSE)

Y aún hay más…

Cómo se hace un sitio web

Una revisión a vista de pájaro de todo lo necesario para crear un sitio web de WordPress.

Recursos

La lista de recursos recomendada en Blogpocket.

Mi lista de plugins

La lista de plugins de WordPress recomendada en Blogpocket

UN-BLOG-DE-21-MAS-1-COVER-3D-1024x944 Construcción de un sitio web vCard utilizando un tema de bloques y la edición completa del sitio (FSE)

Suscríbete a la newsletter

En la newsletter «WP al día» recopilamos las ideas, trucos y noticias de actualidad acerca de WordPress, Gutenberg y la Edición completa del sitio. Recíbela todos los lunes a primera hora.

Suscríbete ahora y descarga, entre otros, nuestro último ebook «Un blog de 21 años (la historia jamás contada)!.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido