Maintenant que nous avons créé les en-têtes et les pieds de page,
il est maintenant temps pour nous de créer notre page d'accueil.
Et la toute première section que nous allons
construire sera la bannière que vous pouvez voir
ici, nous avons l'image de fond
avec les arbres tropicaux,
palmiers et la plage.
Et puis, bien sûr, les textes,
nous voyageons avec l' aventure, puis
le bouton qui indique notre livre, votre voyage maintenant.
De plus, bien sûr, vous auriez remarqué que
l'arrière-plan se fond essentiellement dans l'en-tête.
Comment faisons-nous cela ?
Eh bien, nous allons aller de l'avant
et modifier la page d'accueil.
Je vais dire Edit avec Elementor.
Juste ici.
Vous remarquerez que nous avons essentiellement deux colonnes,
une en haut, celle qui contient l'
endroit où on voyage signifie aventure.
Ensuite, nous aurons une autre colonne
contenant le carnet de boutons, votre voyage.
Maintenant, ce que je vais simplement faire ici, c'est ça.
Nous avons un texte de titre ici,
mais au cas où vous ne verrez rien,
faites simplement glisser l'élément de titre
et déposez-le dans votre boîte ici.
Et je vais simplement dire
où nous sommes voyage et aventure.
C'est le principal slogan du site Web All.
Et je vais faire ça contre un seul.
Mais nous allons apporter quelques modifications à
la topographie elle-même.
Passons donc au style.
Et pour la typographie ici,
je vais changer la transformation en majuscules.
Et nous allons aussi faire le poids
900 juste pour le rendre très, très épais.
Et ensuite, le style le rendra italique également.
C'est ça pour le texte pour l'instant.
Nous allons maintenant ajouter l'
image d'arrière-plan pour cette section.
Je vais donc cliquer sur le bouton Modifier la section ici.
La largeur du contenu, nous allons conserver cette boîte,
mais ensuite la largeur ici nous ferons 1240 pixels.
Et notre liste de contrôle préconise la hauteur,
nous allons la régler à une hauteur minimale de
mille pixels parce que nous voulions vraiment
montrer autant de cette image d' arrière-plan que possible.
Laissez-moi en faire mille.
Et maintenant, nous allons passer au
style, type d'arrière-plan classique.
Et je vais choisir l'image.
Et ce sera le cas, je m'excuse.
En fait, il y en a deux distincts ici pour l'instant.
Je vais supprimer la femme qui va utiliser,
nous allons utiliser la version Big Out.
Celui-ci ne mesure que 859 pixels de hauteur,
mais celui-ci fait 1274.
Nous allons donc utiliser celui-ci.
Je vais donc insérer ça.
Et voilà.
Maintenant, permettez-moi de vous montrer quelques astuces concernant
positionnement de votre image d' arrière-plan.
Vous avez différents types de
positions au centre, au centre,
au centre à gauche, au centre, à droite, etc.
C'est donc à vous de choisir
les angles de position idéaux pour votre image d'arrière-plan.
Le mien ici que j'ai choisi va être en bas au centre.
Ici, vous pouvez voir les palmiers,
la plage aussi.
Il est donc familier, c'est la meilleure position.
Et puis pour la taille,
vous avez plusieurs options
ici, je vais aller avec du cava.
La différence entre Kovach et Contain est
l'affichage contenable de l'image entière.
contenu n'est pas toujours la meilleure option
car lorsque vous affichez l'image entière,
si l'image n'est pas assez grande pour l'ensemble de l'écran,
elle commencera à effectuer des études répétées.
Vous pouvez voir en arrière-plan ici que
l'image se répète à nouveau.
Mais avec COVID, vous dites essentiellement
: Hé,
essayez de vous assurer que l'image
couvrira tout l'écran.
C'est pourquoi j'ai choisi sont couverts ici,
mais je vais aussi ajouter
une superposition d'arrière-plan. Alors, vérifiez encore ça.
Je vais revenir en
superposition. Je vais cliquer là-dedans.
Je veux, je vais aller au
type d'arrière-plan comme d'habitude,
on va choisir une superposition noire.
Et puis l'opacité ici,
je suis allé avec le 0.23.
Bien sûr, vous pouvez modifier cela
si vous ne souhaitez pas utiliser Zope et 23.
Mais maintenant, nous allons revenir aux textes réels.
Revenons ici.
Et bien sûr, la couleur du texte,
nous allons rendre celui-ci blanc.
Et c'est là, d'accord.
Nous allons également modifier la taille.
Je vais donc aller jusqu' à 120 pixels.
Et encore une fois, c'est tout à fait subjectif.
Vous pouvez rendre le vôtre un peu plus grand,
un peu plus petit.
Mais nous allons également modifier l'alignement.
Allons au contenu. Nous allons l'
aligner sur le centre.
Et le voilà, nous voyageons à terme.
Et ce que nous allons faire maintenant,
d'ajouter notre bouton.
Je vais faire glisser le bouton ici,
Element et je vais le sauter juste en dessous du titre.
Bien sûr, ici, nous allons dire :
réservez votre voyage. Maintenant.
Bien sûr, c'est ici que vous ajouteriez
le lien vers une page ou
un site Web XNOR comme Golden ou Booking.com.
Si j'ai eu sept ans, fais-le et on pourrait juste dire
livre kin dot com.
Faisons simplement ça. Nous pouvons .com juste pour le plaisir.
Et bien sûr, nous allons l'aligner sur le centre.
La taille ici sera moyenne.
Ajoutons également une icône.
Je vais donc choisir la bibliothèque d'icônes ici.
Cherchons un avion.
Je vais choisir beaucoup, mon insert ours.
Vous avez la possibilité de modifier
la position de l'icône après ou avant le texte.
Nous voulons continuer à le faire avant.
Ensuite, l'espacement des icônes.
Vous pouvez également ajouter un certain espacement entre
l'icône et l'image.
Je vais donc utiliser des aides
juste pour lui donner un peu d'espacement.
Maintenant, nous allons passer au style.
C'est ici que nous allons apporter des changements majeurs.
Le premier que nous allons faire
ici serait la topographie,
le poids des textes.
Il va y en avoir 600 , puis se transformer en majuscules.
Maintenant, comme il s'agit d'un lien,
vous remarquerez qu' il y a l'idée soulignante,
mais nous ne voulons pas celle-ci.
Je vais donc aller à Style, j'y vais,
je vais aller à la déclaration et ensuite n'en choisir aucune.
Nous ne voulons aucun texte dans
aucun des textes sous-jacents.
Très bien, la typographie, la couleur, le texte, la couleur ici.
On va y aller avec le blanc.
Très bien ?
Ensuite, pour le bouton lui-même ici,
vous aurez le type d' arrière-plan
et cliquons là-dedans.
Et nous allons aller avec
couleur classique ici serait orange.
Maintenant, nous allons fixer une frontière aussi solide.
Ensuite, ce que nous allons
faire pour la bordure, c'est que nous allons également changer
la couleur de la bordure par la couleur orange.
Ensuite, nous ajouterons un rayon de bordure
juste pour rendre les cercles,
les bords juste un peu circulaires.
On va y aller avec dix,
je suis désolé, on va y aller avec 12 pixels juste ici.
Et c'est tout.
Je vais aller de l'avant et faire des mises à jour.
Et voyons à quoi ça ressemble.
Passons au tableau de bord.
Cliquons ici, accédons à la page d'accueil,
et voilà.
Donc, en voyageant dans son éventuel éventuel,
nous avons bien sûr le bouton
ici qui ferait un lien vers notre booking.com.
Mais alors, comment y parvenir ?
où vous avez l' arrière-plan se fondant essentiellement
dans la tête de l'Allemagne.
Très prochaine vidéo où je vais vous montrer comment faire.