• Accueil
  • Info
  • Publicité
  • Privacy & Policy
  • Nous Contacter
No Result
View All Result
Technique de pointe
  • Actualité
  • Technologies
  • Jeu vidéo
  • Mobile
  • Astuces
  • HTML5 / CSS
  • Java Script
  • PHP
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Nous Contacter
MYCAMER
  • Actualité
  • Mobile
  • Jeu vidéo
    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Quelle est la durée idéale d’un jeu vidéo ?  –

    Quelle est la durée idéale d’un jeu vidéo ? –

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    10 tropes de jeux vidéo qui n’ont aucun sens

    10 tropes de jeux vidéo qui n’ont aucun sens

    Dead Space Remake – Dans le vide (Chapitre 7)

    Dead Space Remake – Dans le vide (Chapitre 7)

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    10 boss de jeux vidéo les plus hilarants involontairement

    10 boss de jeux vidéo les plus hilarants involontairement

  • Developpement web
    • All
    • Java Script
    • Language HTML5
    Arrêtez d’appeler les langages de programmation HTML et CSS |  de Christophe Lam |  L’Albatros FOSS |  février 2023

    Arrêtez d’appeler les langages de programmation HTML et CSS | de Christophe Lam | L’Albatros FOSS | février 2023

    Vous voulez devenir UI/UX Designer ?  Consulter la liste des stages

    Vous voulez devenir UI/UX Designer ? Consulter la liste des stages

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière |  Nouvelles de Bombay

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière | Nouvelles de Bombay

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

    Analysis of dog breed diversity using a composite selection index

    Nouvelles FE |  Avez-vous les compétences que rechercheront les employeurs en 2023?

    Nouvelles FE | Avez-vous les compétences que rechercheront les employeurs en 2023?

  • Astuces
    4 villes en plein essor en 2023 à considérer pour une vie abordable

    4 villes en plein essor en 2023 à considérer pour une vie abordable

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    6 Best WordPress SEO Plugins for 2023

    6 Best WordPress SEO Plugins for 2023

    Amorcer un document Quarto {ojs} avec un bloc-notes observable

    WordPress Password Protection – A Complete Guide

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Microsoft dévoile le nouveau plugin IndexNow pour les sites WordPress

    Comment créer un site Web WordPress

  • Nous contacter
No Result
View All Result
MYCAMER
No Result
View All Result
Home Astuces

Comment créer des cartes de coupon avec des blocs WordPress – WP Tavern

Caleb by Caleb
mai 7, 2022
in Astuces
0
0
Comment créer des cartes de coupon avec des blocs WordPress – WP Tavern
332
SHARES
2k
VIEWS
Share on FacebookShare on TwitterRedditLinkedinWhatsappTelegram


L’année dernière, j’ai conçu plusieurs modèles pour présenter des codes de réduction sur un site. Ils faisaient partie d’un projet thématique plus vaste que je n’ai jamais terminé. Cependant, je me suis beaucoup amusé à jouer avec les variations. N’aimant pas qu’ils se fanent sur le disque dur de mon ordinateur portable, j’ai pensé que je les partagerais avec le public de Tavern.

La carte de coupon de base ressemble à ceci :

Code promo sur le thème de Noël avec un arbre et un ornement sur la photo.  Ci-dessous, une liste de la vente et un code.

Quand je l’ai conçu et les autres, j’avais Noël en tête (si ce n’était pas évident d’après la capture d’écran). Bien sûr, je pense toujours aux vacances, en commençant généralement mes achats au moins en juillet de chaque année.

Outre l’image, j’ai intentionnellement laissé la plupart du générique de conception afin qu’il s’applique facilement à d’autres vacances et événements.

Ce tutoriel dans le Construire avec des blocs vous guidera à travers chaque étape de la création de cartes de coupon personnalisées à partir de l’éditeur. Je partagerai également quelques idées de variations à la fin.

Étape 1 : Ajouter un bloc de groupe

Éditeur de publication WordPress avec un bloc de groupe de couleur grise dans l'éditeur de publication.
Ajout d’un bloc Groupe avec arrière-plan et bordure personnalisés.

Comme avec la plupart des modèles, vous devez commencer avec un bloc de type conteneur. Pour la carte de coupon, commencez par insérer un groupe. Vous êtes libre de personnaliser cela comme vous le souhaitez. Cependant, pour utiliser la même disposition dans le didacticiel, vous devez au moins définir le rembourrage du bloc sur 0px et l’option d’espacement des blocs pour 0px. Ceux-ci doivent être mis à zéro pour que le reste de la conception fonctionne.

J’ai ajusté mon bloc Groupe pour avoir une couleur de fond gris clair. Ensuite, j’ai ajouté un 4px bordure en pointillés et un 8px rayon de bordure. Chacun de ces outils de conception est disponible dans l’inspecteur de blocs du panneau de la barre latérale. Amusez-vous un peu avec les couleurs et autres paramètres jusqu’à ce que vous trouviez quelque chose que vous aimez.

Étape 2 : Ajouter une image

Éditeur de publication WordPress avec une image hébergée à l'intérieur d'un bloc Groupe avec une bordure et un arrière-plan gris.
Insertion d’un bloc Image dans le Groupe.

Cette étape est simple. Insérez un bloc Image à l’intérieur du groupe de l’étape 1. Aucun réglage particulier n’est requis.

Bien sûr, vous devez le lier à quelque chose via le bouton insérer un lien dans la barre d’outils. Vous vendez probablement un produit et vous voulez que les gens cliquent dessus.

Étape 3 : Ajouter un groupe de contenu

Éditeur de publication WordPress avec un bloc de groupe qui abrite une image et un autre bloc de groupe.
Ajout d’un bloc Groupe imbriqué.

Cela devrait être une autre étape simple. Sous le bloc Image de l’étape 2, ajoutez un nouveau groupe. Cela abritera le “contenu” que vous ajouterez à l’étape 4.

Le paramètre le plus crucial pour ce bloc consiste à ajouter un rembourrage via les outils de conception de bloc dans le panneau de la barre latérale. j’ai opté pour 2rem pour correspondre à mon thème. N’oubliez pas que vous avez mis à zéro le rembourrage dans le groupe externe à l’étape 1. Maintenant, vous devez en ajouter pour empêcher le contenu de buter contre le côté du conteneur.

Étape 4 : Ajouter du contenu

Éditeur de publication WordPress avec un bloc de groupe contenant une image, un titre et un paragraphe.
Ajout de l’argumentaire de vente.

Avec le bloc Groupe en place à partir de l’étape 3, vous disposez d’une nouvelle zone de forme libre pour présenter votre argumentaire de vente aux clients potentiels. Cela peut être aussi simple qu’un titre suivi d’un paragraphe ou quelque chose de beaucoup plus complexe. Il est probablement préférable de le garder court et précis.

Étape 5 : Ligne de code de coupon

Éditeur de publication WordPress avec un bloc de groupe qui abrite une image, un deuxième groupe avec du contenu et un nouveau bloc de ligne.
Insertion d’un bloc de ligne pour la section code promo.

Pour mettre en surbrillance le code de coupon, ajoutez un nouveau bloc Ligne sous le bloc Groupe ajouté à l’étape 3. Cela vous permet d’ajouter une section pour le code et la date d’expiration à l’étape suivante.

Sélectionnez l’option “espace entre les éléments” pour le contrôle de justification. Ce paramètre éloigne chaque bloc imbriqué de l’autre.

Ensuite, sélectionnez une couleur d’arrière-plan personnalisée. Cela devrait automatiquement donner un rembourrage au bloc Row. Si vous refusez de définir une couleur, vous devez définir manuellement le rembourrage pour qu’il corresponde au bloc Groupe au-dessus.

Étape 6 : ajouter le code et l’expiration

Éditeur de publication WordPress avec un bloc de groupe qui abrite une image, un deuxième groupe avec du contenu et une ligne avec un code de coupon.
Code de coupon personnalisé et date d’expiration.

La dernière étape consiste à ajouter deux blocs Paragraphe dans le conteneur Ligne. Le premier devrait lire quelque chose comme “Coupon : XMAS2022” et le second devrait être “Expire : 31 décembre”.

Bien sûr, c’est votre carte, alors amusez-vous à la personnaliser.

Variantes

La chose merveilleuse à propos de l’éditeur de blocs WordPress est qu’il existe de nombreuses façons pour les utilisateurs de modifier la sortie d’un ensemble de blocs comme ci-dessus. Quelque chose d’aussi simple que de changer les couleurs peut vous donner un look complètement différent. Et, en réorganisant un bloc ou deux, vous pouvez créer quelque chose qui vous est propre.

L’un des moyens les plus simples de personnaliser le code de coupon ci-dessus consiste à ajouter quelques emoji, comme indiqué dans la capture d’écran suivante :

Éditeur de publication WordPress avec un bloc de groupe qui abrite une image, un deuxième groupe avec du contenu et une ligne avec un code de coupon.  Des emoji sur le thème de Noël sont mélangés.
Variante d’émojis.

D’ACCORD. Je m’amusais un peu avec ça. Plus sérieusement, il existe de nombreuses façons de modifier la formule et de créer quelque chose de nouveau.

Il ne m’a fallu que quelques instants pour fusionner les étapes 2 et 4 (en sautant l’étape 3) précédentes pour créer ce qui suit :

Éditeur de publication WordPress avec un bloc Groupe qui abrite un bloc Média et texte avec un argumentaire de vente.  Ci-dessous, se trouve un bloc Row avec un code de coupon et une date d'expiration.
Variation des médias et du texte.

C’est un bloc Media & Text dans le mix. Je vous laisse le défi de recréer cette variation sans une procédure pas à pas complète. Si vous êtes bloqué, consultez mon tutoriel précédentqui couvre largement les médias et le texte.

Catégorie: Construire avec des blocs

— to wptavern.com

Get real time update about this post categories directly on your device, subscribe now.

Unsubscribe
Caleb

Caleb

Stay Connected

  • 87k Followers
  • 172k Subscribers

Articles populaires

  • 10 problèmes courants de l’iPhone 13 et comment les résoudre

    10 problèmes courants de l’iPhone 13 et comment les résoudre

    5603 shares
    Share 2241 Tweet 1401
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    1702 shares
    Share 681 Tweet 426
  • GOLDEN FARM BIZ: earn unlimited money online

    347 shares
    Share 139 Tweet 87
  • Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

    513 shares
    Share 205 Tweet 128
  • Comment réparer le décalage d’Instagram sur iPhone et Android

    711 shares
    Share 284 Tweet 178

Follow Our Page

Follow Us

    Go to the Customizer > JNews : Social, Like & View > Instagram Feed Setting, to connect your Instagram account.
Facebook Twitter Youtube Vimeo Instagram

Informer et distraire les internautes en toute indépendance avec un grand souci de la qualité et de contenu.

Category

  • Actualité
  • Article Sponsorisé
  • Astuces
  • Developpement web
  • Featured
  • Java Script
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies
  • Uncategorized

Recent News

Les spin-offs de la NASA présentent les technologies développées par Stennis de la NASA – Picayune Item

Les spin-offs de la NASA présentent les technologies développées par Stennis de la NASA – Picayune Item

février 5, 2023
La panne généralisée d’eftpos devrait maintenant être terminée

La panne généralisée d’eftpos devrait maintenant être terminée

février 5, 2023

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

No Result
View All Result
  • Actualité
  • Mobile
  • Jeu vidéo
  • Developpement web
  • Astuces
  • Nous contacter

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

Welcome Back!

Sign In with Facebook
Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
fr French
ar Arabiczh-CN Chinese (Simplified)en Englishfr Frenchde Germanit Italianru Russianes Spanish

Add New Playlist

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.