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
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
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
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
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
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
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:
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:
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
