5.4 C
Madrid
viernes, febrero 23, 2024
spot_img

Cómo crear tarjetas de regalo con bloques de WordPress

El año pasado diseñé varios patrones para mostrar códigos de cupones en un sitio web. Eran parte de un proyecto temático más grande que nunca terminé. Sin embargo, me divertí mucho jugando con variaciones. Como no me gustaba que se desperdiciaran en el disco duro de mi computadora portátil, pensé en compartirlos con la gente de Tavern.

La tarjeta de cupón básica se ve así:

Cuando diseñé esto y los demás, tenía en mente la Navidad (si eso no quedó claro en la captura de pantalla). Por supuesto, siempre pienso en las vacaciones y empiezo a comprar en julio a más tardar todos los años.

Aparte de la imagen, mantuve intencionalmente la mayor parte del diseño genérico para que pudiera aplicarse fácilmente a otras festividades y eventos.

Este tutorial de la serie Building with Blocks lo guiará paso a paso a través de la creación de tarjetas de cupones personalizadas desde el editor. También compartiré algunas ideas para variaciones al final.

Paso 1: agregar un bloque de grupo

Editor de publicaciones de WordPress con un bloque de grupo gris en el editor de publicaciones.Agregar un bloque de grupo con fondo y borde personalizados.

Como con la mayoría de los patrones, debe comenzar con un bloque similar a un contenedor. Para la tarjeta de regalo, comience insertando un grupo. Puedes personalizar esto como quieras. Sin embargo, para usar el mismo diseño en el tutorial, al menos debe configurar el relleno del bloque en 0px y la opción de espaciado de bloque en 0px. Estos deben establecerse en cero para que el resto del diseño funcione.

Personalicé mi bloque de grupo para que tuviera un color de fondo gris claro. Luego agregué un borde discontinuo de 4px y un radio de borde de 8px. Cada una de estas herramientas de diseño está disponible en el Inspector de bloques en la barra lateral. Diviértete un poco con los colores y otras configuraciones hasta que encuentres algo que te guste.

Paso 2: Agrega una imagen

Editor de publicaciones de WordPress con una imagen dentro de un bloque de grupo con un borde y un fondo grises.Inserta un bloque de imagen en el grupo.

Este paso es sencillo. Agregue un bloque de imagen al grupo del paso 1. No se requieren configuraciones especiales.

Por supuesto, debe vincularlo a algo usando el botón Insertar vínculo en la barra de herramientas. Probablemente vendes un producto y quieres que la gente haga clic en él.

Paso 3: agregue un grupo de contenido

Editor de publicaciones de WordPress con un bloque de grupo que contiene una imagen y otro bloque de grupo.Adición de un bloque de grupo anidado.

Este debería ser otro paso fácil. Agregue un nuevo grupo debajo del bloque de imagen del paso 2. Esto albergará el «Contenido» que agregará en el paso 4.

La configuración principal de este bloque es agregar relleno a través de las herramientas de diseño de bloques en la barra lateral. Coincidiendo con mi tema, elegí 2rem. Recuerde que en el paso 1 estableció el relleno en cero en el grupo exterior. Ahora necesita agregar algo para evitar que el contenido golpee contra el costado del contenedor.

Paso 4: Agregar contenido

Editor de publicaciones de WordPress con un bloque de grupo que contiene una imagen, un título y un párrafo.Agregar el argumento de venta.

Con el bloque de grupo del paso 3, tiene una nueva área de forma libre para presentar su argumento de venta a clientes potenciales. Esto puede ser tan simple como un título seguido de un párrafo, o algo mucho más complejo. Probablemente sea mejor que sea breve y dulce.

Paso 5: línea de código de cupón

Editor de publicaciones de WordPress con un bloque de grupo que contiene una imagen, un segundo grupo que contiene contenido y un nuevo bloque de línea.Inserte un bloque de líneas para la sección del código de cupón.

Para resaltar el código de cupón, agregue un nuevo bloque de fila debajo del bloque de grupo agregado en el paso 3. Esto le permite agregar una sección para el código y la fecha de vencimiento en el siguiente paso.

Seleccione la opción Espacios entre elementos para el control de alineación. Esta configuración aleja cada bloque anidado del otro.

Luego elija un color de fondo personalizado. Esto debería llenar automáticamente el bloque Fila. Si se niega a establecer un color, debe configurar manualmente el relleno para que coincida con el bloque de grupo anterior.

Paso 6: Agregar código y flujo

Editor de publicaciones de WordPress con un bloque de grupo que contiene una imagen, un segundo grupo con contenido y una fila con un código de cupón.Código de cupón personalizado y fecha de caducidad.

El paso final es agregar dos bloques de Párrafo al contenedor Fila. El primero debería decir algo como «Cupón: XMAS2022» y el segundo debería decir «Caduca: 31 de diciembre».

Por supuesto que es su tarjeta, así que diviértase personalizándola.

variaciones

Lo maravilloso del editor de bloques de WordPress es que hay muchas formas en que los usuarios pueden cambiar la salida de un conjunto de bloques como el de arriba. Algo tan simple como cambiar los colores puede darle un aspecto completamente diferente. Y al reorganizar uno o dos bloques, puede crear algo completamente propio.

Una de las formas más fáciles de personalizar el código de cupón anterior es insertar algunos emoji como se muestra en la captura de pantalla a continuación:

Editor de publicaciones de WordPress con un bloque de grupo que contiene una imagen, un segundo grupo con contenido y una fila con un código de cupón.  Se mezclan emojis con temas navideños.Variaciones de emojis.

ESTÁ BIEN. Me divertí un poco con eso. En serio, hay muchas maneras de jugar con la fórmula y crear algo nuevo.

Me tomó solo unos momentos fusionar los pasos 2 y 4 (omitiendo el paso 3) de antes para crear lo siguiente:

Editor de publicaciones de WordPress con un bloque de grupo que contiene un bloque de medios y texto con un argumento de venta.  Debajo hay un bloque de líneas con un código de cupón y una fecha de vencimiento.Variación de medios y texto.

Eso es un bloque de medios y texto en la mezcla. Les dejo el reto de recrear esta variación sin un tutorial completo. Si te quedas atascado, echa un vistazo a mi tutorial anterior que trata en profundidad Medios y texto.

Categoría: Construyendo con bloques

Artículos relacionados

Dejar respuesta

Please enter your comment!
Please enter your name here

- Anuncio -spot_img

Últimos artículos

3,913SeguidoresSeguir
0suscriptoresSuscribirte