Transcription
1. Intro: E, bienvenue dans une autre
classe élémentaire géniale de moi, Ken Je suis concepteur Web et instructeur
WordPress,
et dans ce cours, je veux vous montrer comment créer une
section de tarification moderne avec Elementor Nous allons utiliser la version
gratuite d'Elementor. Maintenant, si vous débutez avec Elementor, ce projet est le moyen
idéal pour vous
familiariser avec les conteneurs
Flexbox. Les conteneurs Flexbox sont
le nouveau système de mise en page remplace les sections et les colonnes Nous passerons en revue
la mise en page étape par étape, en comprenant
la structure de
notre tarification en tant qu'ensemble
de conteneurs et d'
éléments, en passant notre tarification en tant qu'ensemble
de conteneurs et d' par l'ajout et le
style de l'ensemble du contenu. Et surtout, vous n'aurez pas besoin d' un Elementor Pro
ou de plugins payants, votre créativité
et des outils gratuits déjà intégrés à
Wordpress et à un Elementor À la fin de ce cours,
vous aurez non seulement une section sur les
prix
claire et vous aurez non seulement une présentable, mais vous comprendrez également comment fonctionnent les conteneurs
Flexbox et
comment fonctionnent les conteneurs
Flexbox et les utiliser pour
créer des mises en page flexibles et
modernes en Maintenant, dans la leçon suivante,
je veux vous montrer une démonstration de ce que nous
allons construire. Alors plongeons-nous directement dans le vif du sujet. À bientôt.
2. Démonstration du projet: C'est donc exactement ce que
nous allons construire. Si je survole l'un
des tableaux ici, vous verrez cette
jolie ombre portée, et si je survole les boutons, vous remarquerez qu'ils ont
cet effet animé C'est ce qu'on appelle le bobbing, et
nous verrons comment l'ajouter. La liste ici est séparée
par cette ligne en pointillés. En gros, c'est ce que
nous allons créer. Dans la leçon suivante,
préparons notre environnement.
Je te verrai bientôt.
3. Installer Astra et Elementor: Passons maintenant à
mon site Wordpress. Il s'agit d'une toute nouvelle
installation de Wordpress. Je suppose que vous avez
déjà installé WordPress. Donc, la première chose
que je veux faire est d'installer mon thème car chaque site
Wordpress
doit avoir un thème. Je vais donc passer aux thèmes d'apparence et le thème actif est 2025, mais je veux installer Astra, donc je vais dire ajouter un thème
et voici Astra Je vais dire installer et activer. Et nous y voilà. Alors maintenant,
Astra est notre thème actif Laisse-moi juste fermer ça. Nous ne voulons pas utiliser
leurs modèles, fermez ceci et cela. La prochaine chose que je veux
faire est d'installer Elementor car vous allez créer le tableau des prix
avec Elementor Passons donc aux plug-ins. Tout d'abord, il suffit de cliquer sur Extensions
installées pour voir
ce que nous avons ici. Nous avons ces deux outils fournis avec chaque
installation de WordPress. Je vais juste sélectionner tous ces plugins
et dire désactiver, appliquer. Sélectionnez-les tous,
supprimez-les , appliquez-les parce que je ne
veux en utiliser aucun. Très bien, alors
laissez-moi dire ajouter un plugin. Ici, je vais taper Elementor Et voici maintenant une installation d'
Elementor Nous y voilà. Alors maintenant,
je vais dire activer. Et maintenant, Elementor est
actif sur notre site Web. Maintenant, vous devrez peut-être passer
par un assistant de configuration. Parfois, si vous n'avez jamais
installé WordPress auparavant, vous devrez peut-être passer par un certain assistant de configuration
qui a été introduit, je crois, en 2023. Si vous vous êtes retrouvé
redirigé vers un assistant de configuration, passez par cet assistant de configuration et terminez la
configuration d'un Elementor
4. La section tarification - Partie 1: Maintenant que nous avons installé notre thème et notre plugin
Elementor, il est temps de créer
notre tableau de prix Je veux donc passer
directement aux pages. Et nous avons ces deux pages
par défaut ici. Désormais, un tableau de prix est généralement
placé sur une page de tarification. Ajoutons donc une page
appelée page de tarification. Je vais dire Ajouter une page. Et je vais lui donner
le nom, le prix. Et je dois dire que maintenant, souvenez-vous, nous avons installé
Elementor et Astra Nous avons donc ici quelques
paramètres qui sont maintenant rendus possibles parce que
Elementor et Astra sont Modèle E, nous voulons
utiliser Elementor en pleine largeur. Passons aux paramètres
Astra ici. Pour la disposition des conteneurs, j'adore opter pour la pleine largeur. Elles restent inchangées. Laissez-le comme valeur par défaut.
Pour la barre latérale, j'aime bien l'absence de barre latérale Et pour ces éléments, je souhaite désactiver
l'en-tête Astra,
Astra foo, et la bannière Astra le publier Ce sont les
paramètres de base que je définis toujours pour chaque page élémentaire que je suis
sur le point de modifier avec Elementor Alors éditez avec Elementor maintenant. Et nous y voilà. Maintenant, je
vais simplement ignorer cela car je ne veux pas me connecter à mon compte Elemental, car
ce n'est qu'un exemple Alors, saute. Nous avons maintenant une page blanche sur laquelle nous pouvons
ajouter tout ce que nous voulons. Je vais donc cliquer sur
Ajouter un nouveau conteneur, et je vais utiliser une Flexbox. Je vais opter pour ce conteneur à
sens unique. C'est ce contenant rose d'
un bord à l'autre. Je veux que nous
observions cela pendant un moment. Il s'agit donc de trois conteneurs. Nous allons créer
trois conteneurs, et chaque conteneur possède
un élément d'en-tête,
un élément d'éditeur de texte. Il s'agit d'un conteneur
avec trois conteneurs disposés côte à côte pour créer
ces trois bits de texte, le symbole du dollar, le
montant et le mois. Il s'agit de trois colonnes. Nous allons voir
comment procéder. Il s'agit d'un diviseur unique. Il s'agit d'une liste d'icônes, et cette liste d'icônes se trouve dans le même conteneur
que ce bouton, mais nous verrons comment
faire tout cela. Je veux juste que nous ayons une
carte mentale de ce que nous sommes en train de construire. Pour y revenir,
nous voulons commencer par créer ces trois conteneurs. Et comme vous pouvez le constater,
les trois conteneurs ne
touchent pas les
bords de l'écran. Ils occupent environ 80 % de la largeur entre cette
arête et cette arête. Ils occupent environ 80 %
de la largeur disponible. Nous voulons donc ajouter
un conteneur qui contiendra
les tables de prix, et ce conteneur
aura une largeur de 80 %. Laissez-moi vous montrer ce que je veux dire. Donc, pour y revenir, ajoutons un conteneur. Je vais ajouter un contenant
et le déposer dedans. Donc, ce contenant extérieur
rose devrait occuper 100 %, alors changez la largeur en
pourcentage et dites 100 %. Et maintenant, le contenant
que nous avons mis dedans, ce récipient noir,
pas le rose. Ce contenant grisâtre
devrait occuper 80%. Mais maintenant, il est aligné à
gauche du conteneur extérieur Je vais
donc sélectionner le conteneur
extérieur et aligner
les éléments au centre. Regardez ce qui arrive
lorsque je clique sur Aligner les éléments. Il est maintenant aligné au centre. Maintenant, ce que nous venons de créer est le conteneur contenant
ces trois colonnes. Créons maintenant
les trois colonnes. Ici, dans le récipient intérieur, je veux ajouter
un autre contenant. Et je vais faire le lien droit
et dupliquer ce conteneur, le conteneur intérieur, le
lien droit et le dupliquer à nouveau. Nous avons maintenant trois conteneurs
à l'intérieur de ce conteneur. Et ce contenant se trouve,
bien entendu, à l'intérieur de ce conteneur. Donc, une fois ce conteneur sélectionné, je vais aller dans la direction et passer de haut en bas,
car pour le moment,
comme vous pouvez le voir, sa direction est de haut en bas. En d'autres termes,
le contenu
du conteneur lui-même est
empilé de haut en bas C'est pourquoi ces trois-là
font un, deux, trois. Mais si nous passons
à l'horizontale, tout ce qui se trouve à
l'intérieur du conteneur est désormais organisé de gauche à droite
au lieu de haut en bas. Nous avons donc maintenant trois colonnes. vais le publier, je vais juste
y déposer du texte, encore
une fois,
y aller et me diriger là-bas. Sélectionnez celui-ci, sélectionnez ceci, deux, sélectionnez ces trois. Publiez-le,
prévisualisez les modifications. Au moins, nous
avons maintenant trois colonnes. Alors maintenant, allons-y
et créons-les. Alors maintenant, je vais sélectionner
cette première colonne ici, colonne numéro un,
et je vais
passer au style, à l'arrière-plan, choisir ce pinceau, sélectionner la couleur, et je vais choisir une jaunâtre, crémeuse ou blanchâtre Choisissez la couleur que vous
voulez, peut-être quelque part. Permettez-moi de
choisir afin de voir que nous avons des éléments de base
pour les petits projets personnels. Maintenant, en sélectionnant le texte, le titre que nous avons ajouté ici, je vais simplement le
remplacer par le texte de base. Sélectionnez à nouveau le conteneur
lui-même. Je vais passer à la bordure, je vais la rendre solide, et je vais lui donner une largeur de
bordure d'un. Disons publier pour l'
instant et jetons un coup d'œil à ce que nous avons en avant-première. C'est ce que nous avons.
Donnons-lui quelques coins arrondis. Donc, tant qu'il est toujours sélectionné, je veux passer
au rayon de bordure et lui donner un
rayon de bordure de 20. Maintenant, il a ces
coins arrondis, publiez et voilà. Maintenant, revenons ici, permettez-moi de dire « plus », et je vais ajouter, comme vous pouvez le voir, que nous
avons cette liste. Commençons donc par cette liste. Je vais taper ici
la liste des icônes. Je vais donc supprimer
cette liste d'icônes
dès que ce surlignage rose
apparaîtra. Allons-y. Je vais également ajouter un bouton. Ajoutez donc un bouton juste là dans la
case juste en dessous. Allons-y. Donc, tant qu'
elle est toujours sélectionnée, je peux accéder au centre de style
et de position, puis sélectionner cette liste également. Centre d'alignement du style. Je peux sélectionner ce centre d'alignement
de style de texte. Maintenant, souvenez-vous que nous
avons ce texte, et je dis qu'il s'
agit de trois colonnes. Donc, ce que nous voulons faire, c'est
sélectionner ce
doublon avec le bouton droit de la souris et je
veux le remplacer par 5$. Bien, li, dupliquer,
droit, fuite, dupliquer. Sélectionnons le premier
et changez-le en signe de 1$, sélectionnons le dernier et
changez-le en barre oblique par mois Maintenant, ce sont trois éléments. Ce dont nous avons besoin, laissez-moi
d'abord le publier, puis le prévisualiser.
C'est ce que nous avons. Je vais donc dire « plus » ici, puis ajouter un conteneur juste en
dessous du texte de base. Comme nous avons trois éléments, nous pouvons
les glisser-déposer dans le conteneur. Je vais aussi faire glisser le prix, déposer là-dedans,
puis le mois juste en
dessous du prix. Non, il n'est pas encore dans la boîte. Je veux m'assurer qu'il est
à l'intérieur de ce contenant. Alors laisse-moi faire glisser le mois Très bien, laisse-moi juste
le déposer au milieu, puis faire glisser vers le haut et le
mettre au milieu. Pourquoi suis-je incapable de bien faire ? Maintenant, je suis capable de
le pousser jusqu'au bout. Maintenant, ces trois éléments
sont à l'intérieur d'un conteneur. Donc, si je sélectionne le conteneur et que je change de direction ici, ils sont
maintenant disposés
horizontalement. Alors maintenant, alors que ce
conteneur est encore sélectionné, je vais justifier le contenu
auprès du centre de cette façon. Et maintenant, je peux choisir n'importe lequel d'entre eux individuellement
et les redimensionner. Donc, si je vais ici pour
styliser la typographie, je peux augmenter le montant des 5$ individuellement, juste comme ça Alors publiez ça. C'est ce que nous
5. La section tarification - Partie 2: Comme vous pouvez le constater, il n'y a pas d' espacement en bas ici et en haut ici Donc, en sélectionnant le conteneur
contenant tout ce qui se trouve ici, je vais passer à la section Avancé, et sans rompre ce lien, je vais dire que le
rembourrage sera de 30 C'est l'espacement entre le
bord et le contenu intérieur. Et si je dis 50. Oui, 50 c'est bien. Maintenant, ici, nous en avons
50 sur le côté, nous en avons 50 là-haut,
50. C'est bon. Maintenant, avec cela, la prochaine chose que je veux faire
est de sélectionner ce conteneur, et je veux aligner les éléments horizontalement en ligne droite. Il suffit de regarder ceci
lorsque je sélectionne aligner les éléments. Maintenant, tout est
arrangé correctement. Sélectionnez ceci, passez au style
typographie, poids 900 noir. Sélectionnez le mois, accédez
au style, à la typographie. En fait, je vais
réduire la taille 18,
sélectionner le symbole, le
symbole monétaire, le style de typographie Je pense que cette taille est correcte. Maintenant, je veux passer à la marge
avancée, à droite, et réduire la
marge de
droite pour la rapprocher du montant. Donc, le négatif 20 semble fonctionner. Je vais également sélectionner
le montant. Accédez à la marge avancée, réduisez la marge de droite
pour la pousser vers la droite Juste comme ça pour qu'
ils soient proches l'un de l'autre. Maintenant, tant que cette option est
toujours sélectionnée, je peux passer à la couleur du texte de style. Je peux lui donner le 209-20-9209. Sélectionnez ce texte. Style, couleur du texte, peut
lui donner ce 29, copiez à juste titre. Je vais
également sélectionner celui-ci, le style du symbole. Viens ici. Collez ce code. Maintenant, j'ai oublié d'
ajouter ce diviseur. Alors revenons ici. De plus, ajoutons un séparateur. Déposons-le juste là, juste comme ça à l'extérieur de
ce conteneur. Et ici, disons qu' il devrait occuper
80 % de la largeur, et
alignons-le au centre comme ça. Nous allons le remplacer par une ligne en
pointillés ou en pointillés. Je vais passer à la ligne pointillée. Je vais sélectionner cette liste d'
icônes, aller à l'icône. En fait,
revenons au contenu, listons l'élément numéro un, supprimons-le et
changeons ce nom que nous avons ici
jusqu'à cinq utilisateurs. Je crois que j'ai reçu ce texto. Je ne veux pas perdre mon
temps à taper. Je vais donc le
copier d'où je l'ai trouvé. Je l'ai trouvé, copiez-le. Je vais le coller ici. Élément de liste numéro deux,
supprimez l'icône. Je ne veux pas l'icône. Copiez-le, placez-le ici. Maintenant, je vais passer rapidement
à cette partie. Allez-y, ajoutez tous les éléments et supprimez l'
icône si vous n'en avez pas besoin. Je vais le supprimer. Donc, comme je l'ai dit, je vais
avancer rapidement sur cette partie, et je vous verrai dès que j'aurai terminé. Collez ça dedans. Copiez ceci, dupliquez-le,
collez-le dedans,
publiez. La prochaine chose que publiez. La prochaine chose je veux faire est de sélectionner pendant que
c'est encore sélectionné, je veux passer au style et je veux dire espace entre les deux. Je veux que nous espacions un peu le
montant, peut-être jusqu'à dix. Très bien, ensuite,
passons au bouton, et je vais aller
au contenu et dire, qu'avons-nous ici ? À l'heure actuelle. Ouais. Donc, en ce qui
concerne le contenu pendant que le bouton est sélectionné ,
passons maintenant à l'endroit où vous ajoutez le lien. Supposons donc que
ce soit le lien. Tu vas le
mettre juste là. Et si vous souhaitez
ouvrir dans un nouvel onglet, vous pouvez ouvrir le lien dans une nouvelle fenêtre. Cela l'ouvrira dans un
nouvel onglet, le réduira. Passons au style intérieur. Et tout d'abord, je veux casser ce
rembourrage parce que je veux lui donner un
meilleur rembourrage à gauche,
50, à droite, 50, en haut, disons 20 et en bas Maintenant, disons 15. 15.
Pour le rayon de la bouteille, disons dix. Oui, juste comme ça.
Publier. Et maintenant, vous remarquerez
ici que cet espacement est plus grand que cet espacement Réduisons l'espacement ici. Je vais sélectionner
ce conteneur. Je ne sais pas pourquoi je
n'arrive pas à le sélectionner. Très bien, laissez-moi sélectionner ce conteneur,
passer à Avancé, puis briser cette marge par défaut, puis réduire la marge inférieure, peut-être jusqu'à cet endroit. Comme vous pouvez le voir maintenant,
l'espace entre le cinq et le diviseur et l'espace entre ici
et ici sont presque les mêmes. Alors publiez ça. Et jetons un coup d'œil
à ce que nous avons jusqu'à présent. Je pense que maintenant nous
arrivons à quelque chose. La prochaine chose que nous voulons faire est d'
abord de changer cela. Je vais donc sélectionner cette base, revenir au style, à la typographie Je veux le remplacer
par 900 noir. Passons à la
police, à la couleur du texte. Modifions-le à 29 pour la
couleur de votre choix. 29, 29, 29 est la même
couleur que celle que nous avons utilisée pour cela. Et je souhaite sélectionner
ce conteneur pour réduire un peu cet
espacement Donc, espacement supérieur. Peut-être jusqu'à cet endroit aussi. Et je souhaite également réduire
ce rembourrage sur le côté. N'oubliez pas que nous avons sélectionné
ce contenant et que nous avons mis un rembourrage
de 50 sur tout le pourtour Maintenant, allons-y
et rompons ce lien. Et pour la gauche et la droite, passons à dix et dix. En haut et en bas, il y en a 50 chacun. Publiez ça. Et maintenant,
prévisualisons les modifications. Maintenant c'est beaucoup mieux. C'est bon. Alors maintenant, au moins
maintenant, nous arrivons à quelque chose. La prochaine chose que je veux que
nous fassions, c'est que ces deux éléments soient des espaces réservés
pour les colonnes Maintenant, ce que je veux faire, c'est cliquer dessus avec
le bouton droit
et le dupliquer, cliquer dessus avec
le bouton droit et le
dupliquer à nouveau. Nous pouvons maintenant les supprimer
car ils n'
étaient que des espaces réservés
pour deux autres colonnes Et comme nous l'avons
, je vais simplement ajouter les prix
de ces autres produits. Alors copiez-le, sélectionnez-le, allez ici et remplacez-le par cela. Et je vais passer rapidement
à cette partie. Et maintenant, le tout dernier
ici et là, c'est parti. J'ai donc fini d'ajouter les différentes fonctionnalités et
avantages de chaque plan. Je vais juste dire publier. Passons maintenant en
revue les modifications. Et maintenant, c'est ce que
nous avons en ce moment.
6. La section tarification - Partie 3: Je veux que nous le rendions un
peu plus présentable. Ajoutons un peu
d'espacement ici en haut pour qu'il soit
centralisé sur notre écran Je vais donc sélectionner le conteneur. stade avancé, je vais
casser la marge et lui donner une marge maximale de 50. Et je vais le publier. Prévisualisons le changement. Oui, je pense que c'est mieux. Et maintenant, en fait, alors que ce
conteneur est toujours sélectionné, je vais passer à la mise en page. Non, sélectionnons ce contenant
intérieur qui contient tout ce qu'il
contient.
C'était 80 %. Je veux que nous fassions en sorte
que 70 % le publient. Alors maintenant, il y a quelque chose que
je veux que vous remarquiez ici. Ici, tous nos
boutons sont en bas. C'est la référence que
nous avons examinée. Nos boutons sont
donc parfaitement alignés dans chaque case. Et ici même, dans
celui que nous avons créé, notre bouton s'élève pour
se rapprocher de la liste des icônes. Alors, comment les pousser
toutes vers le bas ? Retournons ici. Maintenant, souvenez-vous, nous avons ajouté ce conteneur ici et
ajouté ces trois éléments, et nous avons pu
les disposer dans le conteneur. Nous pouvons faire de même ici et
espacer ces deux éléments. Je vais donc dire «
plus », puis « conteneur ». Je vais le déposer
juste là. C'est bon. Et une fois qu'il est déposé juste là, je peux également
le faire glisser dans le conteneur et le bouton. Maintenant, ils sont tous les deux
à l'intérieur du conteneur. Je vais sélectionner le conteneur
lui-même, passer à Avancé. Et ici, nous avons la taille. Nous allons dire grandir. En d'autres termes,
occupez l'espace disponible. Si l'espace disponible
n'est pas utilisé, remplissez-le. Alors, cultivez, cela fera grandir
le contenant pour occuper
n'importe quel espace disponible. Maintenant qu'il a grandi, ne nous
reste plus qu'à revenir à la mise en
page et à justifier le contenu, c'est-à-dire
l'espace entre les deux. Cela va appuyer sur
le bouton vers le bas. N'oubliez pas que nous avions un rembourrage
sur ce contenant extérieur, un rembourrage
supérieur et inférieur de 50 C'est pourquoi cela
va jusqu'à cette partie. fois cela fait, je vais revenir ici, faire glisser un autre conteneur ici. Faites-les glisser dans
le conteneur. Et comme nous avions déjà des titres pour cela, je
vais le sélectionner, le
copier, sélectionner cet
autre conteneur, cliquer avec le bouton
droit de la souris, coller le style Quels que soient les styles que nous appliquerons à
cela, ils seront appliqués à cela, et je vais enfin faire de même. C'est un titre, un conteneur. Déposez-le là, faites-le glisser
là-dedans, faites-le glisser là-dedans. Bonne fuite, copie, bonne fuite, bonne fuite, style de
collage. Publiez ça. Et avant de le regarder, je vais sélectionner le bouton. Je vais aller chez
Button Normal. Donnons-lui une couleur bleue ou la couleur que vous voulez, la
couleur votre marque, peut-être le rouge. En fait, permettez-moi de
le sélectionner à nouveau. Donc, tant que c'est toujours sélectionné, je vais passer à Hover. Et sur Hover, la
couleur de fond doit être 29, 29, 29. Sur Hover, c'est cette couleur. Maintenant, alors qu'il est
toujours sous Hover, passons à Hover Animation, et je vais sélectionner Bob C'est celui que j'
aime bien. C'est Bob. Maintenant que le
bouton est mis à jour, je vais écrire Leak Copy. Bien, fuite, style de collage, droit, fuite, style de collage. Mais maintenant je n'aime pas cette couleur
rouge. C'est trop criant. Je vais l'inverser,
donc je vais le sélectionner. Ou, en fait, je
vais sélectionner ceci. Donc, normalement, je veux
copier cette couleur rouge, passer le curseur, la coller dedans Et quand c'est normal, ce sera le 29,
le 29, le 29. Sur Hover, c'est rouge. Ouais. Donc, copiez-collez le style. Publiez-le, prévisualisez les
modifications. Nous y voilà. Je pense donc que nous devrions réduire
la taille de ce diviseur Je vais
donc le sélectionner
et le faire peut-être 50 %, avec la bonne fuite, bonne fuite, le style de
collage, la bonne
fuite, le style de collage Publiez ça. Je ne sais pas s'
il reste quelque chose. Oui, je pense qu'il reste encore une
chose. Nous devons ajouter des
effets de survol afin que, lorsque quelqu'un passe le curseur de sa
souris dessus, il y ait une ombre Donc, en sélectionnant ce premier,
on passe à la mise en page. Passons maintenant au style, ombrage de
la bordure au survol. Je veux lui donner une ombre en forme de boîte. Juste comme ça. Maintenant, nous
pouvons changer cette obscurité. Je veux qu'il fasse moins sombre. Donc, si j'opte pour cette transparence, je peux réduire l'intensité de l'
ombre. Et maintenant que j'aime ce drop
shadow, right leak, copy, right leak, paste style, right leak, paste
style, publiez ça. Et maintenant,
prévisualisons les modifications. Nous y voilà. Alors maintenant,
si j'y repense, nous
y voilà. C'est bon. Enfin, permettez-moi de modifier
ces trois normes. Entreprise. Et je pense que je vais cliquer avec le bouton droit de la souris sur cette copie. Non, en fait, laissez-moi
cliquer dessus avec le bouton droit de la souris pour le dupliquer, puis je vais le faire glisser
juste en dessous de la base. Et je pense que c'est vrai pour les
petits projets personnels. Projets ou projets personnels. Et je vais passer au style,
à la typographie. Je vais augmenter l'
espacement entre les lettres mais réduire
la taille de la police Et je vais passer en haut de la marge
avancée, réduire jusqu'à
peut-être ce point, passer à la
marge avancée de base en bas. Jusqu'à cet endroit. Alors maintenant,
je vais sélectionner ceci, le bouton droit sur copier, cliquer avec le
bouton droit sur le texte ici,
coller, cliquer avec le bouton droit sur ce collage. Et pour cela, je pense qu'il est question
de jeunes projets de start-up. Projets de jeunes entreprises en démarrage. Et enfin, les projets au niveau de l'
entreprise. Publiez ça. Rien d'autre ?
Oui, c'est 19$ Et ça devrait coûter 49$ de publication. Et passons en revue les modifications. Maintenant, j'ai
réalisé une dernière chose que nous avions oubliée, mais jetons d'
abord un coup d'œil. J'aime vraiment ça. Mais une autre chose que
nous avons oublié d'ajouter ce
sont ces petites lignes ici. C'est donc juste pour
ajouter du piquant à ce que
nous avons déjà. Donc, en sélectionnant la liste des icônes, je vais aller dans le
diviseur et dire non, et comme vous pouvez le voir,
elles sont trop longues Donc, nous allons peut-être les
placer à cet endroit. Je vais changer cela en
pointillé ou disons en pointillés. Et oui, je vais juste
laisser ça comme ça, d'
accord, de fuite, de copie, de droite, de
fuite, de style de collage, d'accord, comme ce
style de collage, et publier. Allons y jeter un coup d'
œil. Et nous y voilà. Donc, en gros, je pense que c'
est un bon endroit pour terminer cela. C'était un exemple rapide expliquant comment
créer une liste de prix,
mais surtout
comment travailler avec des
conteneurs dans Elemental, comment travailler avec des
conteneurs dans Elemental car une fois que vous maîtrisez les
conteneurs dans Elementor, vous pouvez concevoir pratiquement
tout ce que vous pouvez imaginer Je pense donc que c'est le
bon endroit pour terminer cela. Si vous l'avez aimé, si
vous l'avez trouvé utile, n'oubliez pas de l'aimer. N'oubliez pas de me suivre pour d'autres tutoriels
à l'avenir. Alors, jusqu'à la prochaine fois,
restez créatifs. Paix.
7. Réflexions finales: venez de créer une section de tarification moderne et
épurée en utilisant uniquement la version gratuite
d'Elementor, et en cours de route, vous avez
également appris à travailler en toute confiance avec des conteneurs, des conteneurs
Flexbox Cette mise en page
peut sembler simple, mais les compétences
que vous
venez de mettre en pratique, à savoir travailler avec
des conteneurs imbriqués, gérer l'espacement, rembourrage,
les marges, les éléments de
style, sont à la base de tous les grands designs Elementor, et vous savez maintenant
comment faire Et maintenant c'est ton tour. J'adorerais voir ce que
tu as pu créer. Accédez à l'onglet Projets
et ressources situé juste dessous de ce lecteur vidéo
et téléchargez votre projet. suffit de prendre une capture d'écran de Il vous suffit de prendre une capture d'écran de
votre section de tarification
et de la télécharger ou partager un lien vers un site Web en ligne où nous pouvons
consulter votre section de tarification. Je passe en revue tous les projets, et j'adorerais voir ce que
vous avez pu
proposer. Et si vous aimez ce
cours, je vous serais
vraiment très reconnaissante si vous
pouviez laisser un bref commentaire. Cela m'aide non seulement comprendre l'impact de
mes cours, mais cela aide également les autres étudiants découvrir mes cours
sur Skillshare Alors prenez un moment pour laisser un bref commentaire et
dites-moi ce que vous avez
pensé du cours. Encore une fois,
merci de vous joindre à moi, et je vous verrai
au prochain cours. Paix.
Ken Mbesa, Web Designer | 3D Artist
