1
00:00:00,000 --> 00:00:03,350
Maintenant que nous avons créé les
 en-têtes et les pieds de page,

2
00:00:03,345 --> 00:00:06,275
il est maintenant temps pour nous de
 créer notre page d'accueil. 

3
00:00:06,270 --> 00:00:07,740
Et la toute première
 section que nous allons

4
00:00:07,740 --> 00:00:10,890
construire
 sera
 la bannière que vous pouvez voir

5
00:00:10,890 --> 00:00:13,110
ici, nous avons
 l'image de fond

6
00:00:13,110 --> 00:00:15,680
avec les arbres tropicaux,

7
00:00:15,675 --> 00:00:17,405
palmiers et la plage. 

8
00:00:17,400 --> 00:00:19,170
Et puis, bien sûr, les textes,

9
00:00:19,165 --> 00:00:21,415
nous voyageons avec l'
aventure, puis

10
00:00:21,410 --> 00:00:24,770
le bouton qui indique notre
 livre, votre voyage maintenant. 

11
00:00:24,770 --> 00:00:27,320
De plus, bien sûr, vous
 auriez remarqué que

12
00:00:27,320 --> 00:00:31,220
l'arrière-plan
 se fond essentiellement dans l'en-tête. 

13
00:00:31,220 --> 00:00:32,450
Comment faisons-nous cela ? 

14
00:00:32,450 --> 00:00:33,920
Eh bien, nous allons aller de l'avant

15
00:00:33,920 --> 00:00:36,040
et modifier la page d'accueil. 

16
00:00:36,035 --> 00:00:38,855
Je vais dire Edit
 avec Elementor. 

17
00:00:38,855 --> 00:00:40,135
Juste ici. 

18
00:00:40,130 --> 00:00:43,010
Vous remarquerez que nous avons
 essentiellement deux colonnes,

19
00:00:43,010 --> 00:00:44,360
une en haut, celle qui
 contient l'

20
00:00:44,360 --> 00:00:46,240
endroit où on voyage
 signifie aventure. 

21
00:00:46,235 --> 00:00:47,695
Ensuite, nous aurons
 une autre colonne

22
00:00:47,690 --> 00:00:49,490
contenant le
 carnet de boutons, votre voyage. 

23
00:00:49,490 --> 00:00:53,440
Maintenant, ce que je
 vais simplement faire ici, c'est ça. 

24
00:00:53,435 --> 00:00:56,965
Nous avons un
 texte de titre ici,

25
00:00:56,960 --> 00:00:58,700
mais au cas où vous
 ne verrez rien,

26
00:00:58,700 --> 00:01:01,460
faites
 simplement glisser
 l'élément de titre

27
00:01:01,460 --> 00:01:04,160
et déposez-le dans
 votre boîte ici. 

28
00:01:04,160 --> 00:01:06,560
Et je vais simplement dire

29
00:01:06,560 --> 00:01:15,740
où nous sommes voyage
 et aventure. 

30
00:01:15,740 --> 00:01:19,010
C'est le principal
 slogan du site Web All. 

31
00:01:19,010 --> 00:01:21,770
Et je vais faire
 ça contre un seul. 

32
00:01:21,770 --> 00:01:23,780
Mais nous allons
 apporter quelques modifications à

33
00:01:23,780 --> 00:01:27,110
la topographie elle-même. 

34
00:01:27,110 --> 00:01:29,350
Passons donc au style. 

35
00:01:29,345 --> 00:01:31,985
Et pour la typographie ici,

36
00:01:31,985 --> 00:01:37,505
je vais changer la
 transformation en majuscules. 

37
00:01:37,505 --> 00:01:39,265
Et nous allons aussi
 faire le poids

38
00:01:39,260 --> 00:01:42,730
900 juste pour le rendre
 très, très épais. 

39
00:01:42,725 --> 00:01:47,435
Et ensuite, le style le
 rendra italique également. 

40
00:01:47,435 --> 00:01:49,775
C'est ça pour
 le texte pour l'instant. 

41
00:01:49,775 --> 00:01:51,295
Nous allons maintenant ajouter
 l'

42
00:01:51,290 --> 00:01:54,290
image d'arrière-plan
 pour cette section. 

43
00:01:54,290 --> 00:01:57,070
Je vais donc cliquer sur le bouton Modifier
 la section ici. 

44
00:01:57,065 --> 00:01:59,645
La largeur du contenu, nous
 allons conserver cette boîte,

45
00:01:59,645 --> 00:02:04,925
mais ensuite la largeur ici
 nous ferons 1240 pixels. 

46
00:02:05,920 --> 00:02:09,400
Et notre liste de contrôle
 préconise la hauteur,

47
00:02:09,395 --> 00:02:13,355
nous allons la régler à
 une hauteur minimale de

48
00:02:13,355 --> 00:02:15,985
mille pixels parce que
 nous voulions vraiment

49
00:02:15,980 --> 00:02:18,980
montrer autant de cette image d'
arrière-plan que possible. 

50
00:02:18,980 --> 00:02:21,860
Laissez-moi en faire mille. 

51
00:02:21,860 --> 00:02:24,230
Et maintenant, nous allons passer au

52
00:02:24,230 --> 00:02:27,280
style, type d'arrière-plan classique. 

53
00:02:27,275 --> 00:02:29,435
Et je vais
 choisir l'image. 

54
00:02:29,435 --> 00:02:32,095
Et ce
 sera le cas, je m'excuse. 

55
00:02:32,090 --> 00:02:35,170
En fait, il y en a deux
 distincts ici pour l'instant. 

56
00:02:35,165 --> 00:02:37,715
Je vais supprimer la femme
 qui va utiliser,

57
00:02:37,715 --> 00:02:39,625
nous allons utiliser
 la version Big Out. 

58
00:02:39,620 --> 00:02:42,080
Celui-ci ne mesure que 859
 pixels de hauteur,

59
00:02:42,080 --> 00:02:44,330
mais celui-ci fait 1274. 

60
00:02:44,330 --> 00:02:46,160
Nous allons donc
 utiliser celui-ci. 

61
00:02:46,160 --> 00:02:47,870
Je vais donc insérer ça. 

62
00:02:47,870 --> 00:02:49,610
Et voilà. 

63
00:02:49,610 --> 00:02:51,500
Maintenant, permettez-moi de vous montrer
 quelques astuces concernant

64
00:02:51,500 --> 00:02:54,730
positionnement de votre image d'
arrière-plan. 

65
00:02:54,725 --> 00:02:56,425
Vous avez différents types de

66
00:02:56,420 --> 00:02:58,460
positions au centre, au centre,

67
00:02:58,460 --> 00:03:02,420
au centre à gauche, au centre, à
 droite, etc. 

68
00:03:02,420 --> 00:03:04,690
C'est donc
 à vous de choisir

69
00:03:04,685 --> 00:03:09,635
les angles de position idéaux
 pour votre image d'arrière-plan. 

70
00:03:09,635 --> 00:03:13,475
Le mien ici que j'ai choisi
 va être en bas au centre. 

71
00:03:13,475 --> 00:03:16,285
Ici, vous pouvez
 voir les palmiers,

72
00:03:16,280 --> 00:03:18,200
la plage aussi. 

73
00:03:18,200 --> 00:03:20,440
Il est donc familier, c'est
 la meilleure position. 

74
00:03:20,435 --> 00:03:22,045
Et puis pour la taille,

75
00:03:22,040 --> 00:03:23,510
vous avez plusieurs options

76
00:03:23,510 --> 00:03:25,400
ici, je vais aller avec du cava. 

77
00:03:25,400 --> 00:03:28,100
La différence entre
 Kovach et Contain est

78
00:03:28,100 --> 00:03:31,730
l'affichage contenable de
 l'image entière. 

79
00:03:31,730 --> 00:03:34,070
contenu n'est pas toujours
 la meilleure option

80
00:03:34,070 --> 00:03:37,130
car lorsque vous affichez
 l'image entière,

81
00:03:37,130 --> 00:03:40,810
si l'image n'est pas assez grande
 pour l'ensemble de l'écran,

82
00:03:40,805 --> 00:03:42,265
elle commencera à effectuer des études répétées. 

83
00:03:42,260 --> 00:03:44,150
Vous pouvez voir en
 arrière-plan ici que

84
00:03:44,150 --> 00:03:46,280
l'image se
 répète à nouveau. 

85
00:03:46,280 --> 00:03:48,400
Mais avec COVID,
 vous dites essentiellement

86
00:03:48,395 --> 00:03:49,765
: Hé,

87
00:03:49,760 --> 00:03:51,800
essayez de vous assurer que l'image

88
00:03:51,800 --> 00:03:53,820
couvrira tout l'écran. 

89
00:03:53,820 --> 00:03:56,770
C'est pourquoi j'ai choisi
 sont couverts ici,

90
00:03:56,765 --> 00:03:59,375
mais je vais aussi
 ajouter

91
00:03:59,375 --> 00:04:03,475
une superposition d'arrière-plan. 
Alors, vérifiez encore ça. 

92
00:04:03,470 --> 00:04:05,090
Je vais revenir en

93
00:04:05,090 --> 00:04:07,580
superposition. Je vais
 cliquer là-dedans. 

94
00:04:07,580 --> 00:04:09,110
Je veux, je
 vais aller
 au

95
00:04:09,110 --> 00:04:10,840
type d'arrière-plan comme d'habitude,

96
00:04:10,835 --> 00:04:13,885
on va choisir
 une superposition noire. 

97
00:04:13,880 --> 00:04:15,680
Et puis l'opacité ici,

98
00:04:15,680 --> 00:04:19,790
je suis allé
 avec le 0.23. 

99
00:04:19,785 --> 00:04:22,245
Bien sûr, vous pouvez modifier cela

100
00:04:22,240 --> 00:04:24,340
si vous ne
 souhaitez pas utiliser Zope et 23. 

101
00:04:24,340 --> 00:04:26,920
Mais maintenant, nous allons
 revenir aux textes réels. 

102
00:04:26,920 --> 00:04:28,060
Revenons ici. 

103
00:04:28,060 --> 00:04:29,620
Et bien sûr, la couleur du texte,

104
00:04:29,620 --> 00:04:32,520
nous allons rendre
 celui-ci blanc. 

105
00:04:32,515 --> 00:04:35,275
Et c'est là, d'accord. 

106
00:04:35,275 --> 00:04:39,885
Nous allons également
 modifier la taille. 

107
00:04:39,880 --> 00:04:45,920
Je vais donc aller jusqu'
à 120 pixels. 

108
00:04:46,170 --> 00:04:49,600
Et encore une fois, c'est
 tout à fait subjectif. 

109
00:04:49,600 --> 00:04:51,390
Vous pouvez rendre le vôtre un
 peu plus grand,

110
00:04:51,385 --> 00:04:52,645
un peu plus petit. 

111
00:04:52,645 --> 00:04:56,245
Mais nous allons également
 modifier l'alignement. 

112
00:04:56,245 --> 00:04:58,005
Allons au contenu. 
Nous allons l'

113
00:04:58,000 --> 00:04:59,430
aligner sur le centre. 

114
00:04:59,425 --> 00:05:01,825
Et le voilà, nous
 voyageons à terme. 

115
00:05:01,829 --> 00:05:03,679
Et ce que nous
 allons faire maintenant,

116
00:05:03,680 --> 00:05:05,630
d'ajouter notre bouton. 

117
00:05:05,630 --> 00:05:07,640
Je vais faire glisser le
 bouton ici,

118
00:05:07,640 --> 00:05:10,580
Element et je vais le sauter
 juste en dessous du titre. 

119
00:05:10,580 --> 00:05:13,390
Bien sûr, ici,
 nous allons dire :

120
00:05:13,385 --> 00:05:20,315
réservez votre voyage. Maintenant. 

121
00:05:22,210 --> 00:05:24,440
Bien sûr, c'est
 ici que vous ajouteriez

122
00:05:24,440 --> 00:05:26,150
le lien vers une page ou

123
00:05:26,150 --> 00:05:29,360
un site Web XNOR comme
 Golden ou Booking.com. 

124
00:05:29,360 --> 00:05:30,860
Si j'ai eu sept ans, fais-le
 et on pourrait juste dire

125
00:05:30,860 --> 00:05:33,490
livre kin dot com. 

126
00:05:33,485 --> 00:05:36,565
Faisons simplement ça. Nous pouvons .com
 juste pour le plaisir. 

127
00:05:36,560 --> 00:05:39,250
Et bien sûr, nous allons
 l'aligner sur le centre. 

128
00:05:39,245 --> 00:05:41,915
La taille ici sera moyenne. 

129
00:05:41,914 --> 00:05:44,364
Ajoutons également une icône. 

130
00:05:44,360 --> 00:05:46,840
Je vais donc choisir
 la bibliothèque d'icônes ici. 

131
00:05:46,835 --> 00:05:50,975
Cherchons un avion. 

132
00:05:51,310 --> 00:05:55,160
Je vais choisir
 beaucoup, mon insert ours. 

133
00:05:55,160 --> 00:05:56,570
Vous avez la possibilité de modifier

134
00:05:56,570 --> 00:05:59,800
la position de l'icône
 après ou avant le texte. 

135
00:05:59,795 --> 00:06:01,925
Nous voulons continuer à le faire avant. 

136
00:06:01,925 --> 00:06:04,675
Ensuite, l'espacement des icônes. 

137
00:06:04,670 --> 00:06:06,500
Vous pouvez également ajouter un
 certain espacement entre

138
00:06:06,500 --> 00:06:08,930
l'icône et l'image. 

139
00:06:08,930 --> 00:06:11,000
Je vais donc utiliser des aides

140
00:06:11,000 --> 00:06:13,970
juste pour lui donner un
 peu d'espacement. 

141
00:06:13,970 --> 00:06:16,820
Maintenant, nous allons
 passer au style. 

142
00:06:16,820 --> 00:06:20,370
C'est ici que nous allons
 apporter des changements majeurs. 

143
00:06:20,374 --> 00:06:21,864
Le premier que
 nous allons faire

144
00:06:21,860 --> 00:06:23,840
ici serait la topographie,

145
00:06:23,840 --> 00:06:25,640
le poids des textes. 

146
00:06:25,640 --> 00:06:31,780
Il va y en avoir 600
, puis se transformer en majuscules. 

147
00:06:31,775 --> 00:06:33,175
Maintenant, comme il s'agit d'un lien,

148
00:06:33,170 --> 00:06:36,140
vous remarquerez qu'
il y a l'idée
 soulignante,

149
00:06:36,140 --> 00:06:37,280
mais nous ne voulons pas celle-ci. 

150
00:06:37,280 --> 00:06:39,080
Je vais donc aller à
 Style, j'y vais,

151
00:06:39,080 --> 00:06:42,350
je vais aller à la déclaration
 et ensuite n'en choisir aucune. 

152
00:06:42,350 --> 00:06:44,720
Nous ne voulons aucun
 texte dans

153
00:06:44,720 --> 00:06:47,200
aucun des
 textes sous-jacents. 

154
00:06:47,195 --> 00:06:51,115
Très bien, la typographie, la couleur,
 le texte, la couleur ici. 

155
00:06:51,110 --> 00:06:53,720
On va y aller avec le blanc. 

156
00:06:53,720 --> 00:06:54,920
Très bien ? 

157
00:06:54,920 --> 00:06:58,010
Ensuite, pour le bouton
 lui-même ici,

158
00:06:58,010 --> 00:06:59,420
vous aurez le type d'
arrière-plan

159
00:06:59,420 --> 00:07:00,880
et cliquons là-dedans. 

160
00:07:00,875 --> 00:07:02,365
Et nous allons aller avec

161
00:07:02,360 --> 00:07:05,800
couleur
 classique ici
 serait orange. 

162
00:07:05,795 --> 00:07:10,745
Maintenant, nous allons fixer une
 frontière aussi solide. 

163
00:07:10,745 --> 00:07:12,725
Ensuite, ce que nous allons

164
00:07:12,725 --> 00:07:13,885
faire pour la bordure, c'est que
 nous allons également changer

165
00:07:13,880 --> 00:07:17,350
la couleur de la bordure par la couleur
 orange. 

166
00:07:17,345 --> 00:07:20,225
Ensuite, nous ajouterons
 un rayon de bordure

167
00:07:20,225 --> 00:07:22,855
juste pour rendre les cercles,

168
00:07:22,850 --> 00:07:25,010
les bords juste un
 peu circulaires. 

169
00:07:25,010 --> 00:07:27,590
On va y aller avec dix,

170
00:07:27,590 --> 00:07:30,800
je suis désolé, on va y aller
 avec 12 pixels juste ici. 

171
00:07:30,800 --> 00:07:33,050
Et c'est tout. 

172
00:07:33,050 --> 00:07:35,990
Je vais aller de l'avant
 et faire des mises à jour. 

173
00:07:35,990 --> 00:07:39,050
Et voyons à quoi
 ça ressemble. 

174
00:07:39,050 --> 00:07:42,250
Passons au tableau de bord. 

175
00:07:42,245 --> 00:07:46,655
Cliquons ici,
 accédons à la page d'accueil,

176
00:07:46,655 --> 00:07:48,865
et voilà. 

177
00:07:48,860 --> 00:07:50,750
Donc, en voyageant dans
 son éventuel éventuel,

178
00:07:50,750 --> 00:07:52,760
nous avons bien sûr le bouton

179
00:07:52,760 --> 00:07:56,930
ici qui ferait
 un lien vers notre booking.com. 

180
00:07:56,930 --> 00:07:59,710
Mais alors, comment y parvenir ? 

181
00:07:59,705 --> 00:08:02,935
où vous avez l'
arrière-plan
 se fondant essentiellement

182
00:08:02,930 --> 00:08:06,650
dans la
 tête de l'Allemagne. 

183
00:08:06,650 --> 00:08:10,260
Très prochaine vidéo où je vais vous
 montrer comment faire.