Bienvenue de retour.
Continuons à créer la page d'accueil.
Et comme vous pouvez le constater, je suis revenu à
l'image d' arrière-plan traditionnelle.
Mais comme je l'ai dit, si vous voulez
utiliser la vidéo, c'est très bien.
La prochaine section que nous allons construire sera
la section deux colonnes qui aura
quelques textes à gauche, une image à droite.
Et la troisième section ici est très similaire.
C'est juste les colonnes inversées.
Dans la troisième section, nous avons l'image à gauche
, puis le texte à droite.
Alors, comment allons-nous y parvenir exactement ?
C'est très, très simple.
Nous allons aller sur une page d'accueil.
Nous allons éditer.
Et vous pouvez voir maintenant qu'il s'agit essentiellement de
deux colonnes, 5050.
Nous allons donc très facilement venir ici,
créer une nouvelle section avec deux colonnes, 5050.
Je vais modifier la section,
assurer qu'elle est pleine largeur.
Et ensuite, les colonnes GAAP ne diront pas d'écart.
Très bien, donc dans la première section ici,
il va y avoir des textes.
Laissez-moi dessiner l' éditeur de texte ici.
Lambda copie le texte fictif de Lorem Ipsum
que j'ai ici.
Laissez-moi simplement aller de l'avant et coller ça.
Et puis nous avons aussi l'en-tête.
Laissez-moi laisser tomber ça par oser. C'est un H2.
Ici.
Je n'ai pas vraiment créé
d'en-tête, de vrai titre.
Laissez-moi juste taper.
Nous aimerions voyager.
Juste quelque chose. C'est ça.
Ensuite, pour la deuxième colonne ici,
nous allons ajouter l'image,
et je vais ajouter cette image que j'ai prise à Istanbul.
Il s'agissait d'un groupe de nos étudiants.
Je me promenais et j'ai dit : Hé,
voudriez-vous que je prenne une photo de cette idée ?
J'ai donc pris la photo.
Assurez-vous donc de définir cette image pour qu'elle soit trompeuse.
Encore une fois, nous voulons que l'image occupe
toute la largeur et la hauteur de sa colonne.
Mais nous devons également ajouter le bouton En savoir plus.
Ce que je vais faire, bien sûr,
c'est de revenir ici,
faire glisser le bouton, de le déposer ici.
Et puis je vais dire que j'apprends, apprends plus.
Ensuite, ce lien peut accéder à la page À propos.
Donc je vais simplement dire la barre oblique avant.
Et c'est là.
Je vais m' aligner sur le centre.
Apportons quelques changements.
Typographie de style.
Je vais dire transformer en majuscules.
La déclaration sur le non dans quelle intégration.
Puis la couleur du texte.
Je vais passer au noir.
Maintenant, le bouton lui-même va aller avec
une couleur de fond de blanc.
La saisie d'arrière-plan ici va être de couleur blanche.
Mais ensuite, nous allons définir une bordure de
solide pour que nous puissions réellement voir le bouton.
Et si vous le vouliez, vous pouvez
également ajouter des vidéos de bordure.
Mais je ne vais pas le faire.
Une dernière chose à faire serait
d'aligner notre contenu au milieu.
Je vais donc cliquer sur le bouton Modifier la colonne, commentaires,
Alignement vertical, se fixe au milieu.
Et puis une autre chose que nous
faisons pour avoir un peu d' espace à gauche
et à droite est contre le texte n'est pas
exactement à droite du bord de la colonne,
donc nous devons ajouter un peu d'espacement.
Je vais donc y retourner.
Ce que nous allons faire, c'est très, très simplement,
que nous allons passer à l'avance
pour la même colonne. Juste ici.
Nous allons dissocier les valeurs du modèle.
Et puis je vais donner 50 pixels
50 pixels sur la gauche.
Et c'est là.
Nous avons construit notre deuxième section très facilement,
puisque la troisième section est très similaire dans la conception,
ce que nous pouvons faire est simplement de cliquer avec le bouton droit de la souris sur
la protéine de section d'édition, puis de dupliquer.
Et maintenant, ce que je vais simplement faire
c'est que je vais faire glisser cette première colonne ici,
la faire glisser jusqu' ici, changer les colonnes.
Et maintenant très simplement,
allons-y et modifions cette image.
Je vais choisir celui que j'ai pris en Argentine.
Le support s'adapte en L, couleur grasse.
Et puis, bien sûr, pour les textes ici,
ai-je ajouté quelque chose qui a voyagé aux
meilleurs endroits comme en-tête, d'accord,
alors permettez-moi de changer cet en-tête ici et
de dire voyager aux meilleurs endroits.
Vous y allez. Très bien, allons-y maintenant les mises à jour.
Disons à quoi ressemble la page.
Allez, allons-y.
Ne supportez pas avec moi. Malheureusement, ce sont là
les risques professionnels d' un instructeur, d'un enseignant.
Parfois, votre incident commence
à gâcher et finalement il est mis à jour.
D'accord, merci. Maintenant, voyons la page.
Défilons vers le bas et voilà.
Ok, encore une chose.
En prime,
nous pourrions ajouter quelques animations
pour que les images puissent aimer,
vous savez, cette diapositive de gauche et de droite.
Ce que nous pouvons faire, c'est simplement revenir
en arrière et vérifier cette allégorie pour la première image,
celle avec les étudiants ici,
je vais modifier l'image.
Accédez à Advanced Briquet,
vous avez des effets de mouvement.
Je vais dire animation d'entrée.
Glissons-nous de la lumière.
Ok, si légèrement à partir de la droite,
donc en tranchant par la droite.
Et puis pour cette image était simplement faire
glisser l'opposé à partir de la gauche.
Effets de mouvement.
Ralenti, informe ou aimé.
D'accord, c'était plutôt bizarre.
Je ne sais pas exactement ce qu'ils ont fait.
Laissez-moi refaire ça.
OK.
Pour une raison quelconque, la fenêtre d'image
passe à la deuxième colonne.
Je ne sais pas pourquoi c'est arrivé,
mais d'accord, je vais juste aller de l'avant et mettre à jour.
On y va.
Voyons la page. Défilons vers le bas.
Il fait glisser de gauche,
induit en erreur et délice, et c'est là.
Et c' est ainsi que notre page d'accueil
commence à entrer en vigueur.
Joignez-vous à moi dans la prochaine vidéo où nous allons maintenant
jeter un coup d'œil à la façon dont nous allons
construire la prochaine section,
qui serait la conception unique du voyage.