Très bien, commençons donc à travailler avec des éléments approuvés
en reconstruisant notre en-tête.
Et je vais vous montrer comment les modèles
fonctionnent avec les éléments sont pro.
La première que je vais faire, c'est que je vais passer au
backend et allons
désactiver le générateur d' en-têtes et de pieds de page élémentaires.
Nous n'avons plus besoin de cela.
Je vais donc désactiver et jetons un coup d'œil à
l'en-tête inexistant que
nous n'avons plus et, bien sûr, pas de pied de page.
Maintenant, vous pouvez toujours voir
les mésaventures d'une pelle
et ensuite les textes corporatifs ici,
c'est le thème Hello
affichant ces aliments sont pour nous.
Très bien, revenons ici.
Et une fois que vous aurez installé et activé Elementor Pro,
vous verrez ici où vous avez
un modèle sur l'élémental LM,
vous verrez le générateur de thème.
Allez-y, cliquez ici.
Et à l'heure actuelle, vous pouvez voir
les différents types de modèles que nous pouvons créer.
On va construire l'en-tête.
Je vais donc cliquer sur plus pour ajouter l'en-tête.
L'avantage d'Elementor Pro
est que vous aurez accès à
une très grande variété de modèles que vous pouvez utiliser.
Vous pouvez les voir ici.
Différents styles pour l'en-tête.
Vous pouvez en voir quelques-uns, vous savez, vous aurez
le logo à gauche,
les icônes des réseaux sociaux à droite,
le menu principal ci-dessous.
Vous pouvez donc insérer rapidement n' importe lequel de ces modèles
qui correspondent parfaitement au type de design souhaité.
Mais je vais aller de l'avant et simplement
nous construire à partir de zéro parce que je
veux vous montrer comment cela
fonctionne avec l' élémental par élément.
Je vais donc fermer ça.
Nous allons simplement reconstruire comme avant.
Je vais venir ici maintenant,
créer nos deux colonnes. section.
L'un, il y en aura environ 30 %, l'autre environ 70 %.
Et maintenant, si je vais ici au backend élémentaire,
et maintenant vous pouvez voir que nous avons
le logo du site ici.
Je vais donc le faire glisser et le déposer à l'intérieur.
Une autre chose est que vous remarquerez peut-être
un changement avec l'élément élémental pro logo.
C'est le fait que vous avez réellement
accès aux hauteurs.
Logo sur le style avec
élément logo fourni par le
plug-in de création d'en-tête et de pied de page élémentaire.
Vous ne disposez pas de ces options,
vous pouvez donc contrôler la hauteur
du logo à partir d'ici.
Mais nous n'allons pas encore y toucher.
Je vais revenir au back-end,
choisir les éléments du menu de navigation ici,
le déposer ici.
Et bien sûr, le menu principal choisira.
Alignons les bons points importants.
On va mettre celui-ci sur mobile.
N'oubliez pas, passons au style de notre typographie.
Nous allons le faire en majuscules.
Revenons à la session principale
en tenant les deux colonnes.
Faisons en sorte qu'il soit pleine largeur.
Pour le logo, je vais juste
ajouter un fond noir.
Donc, au moins temporairement, nous pouvons voir le logo.
Ok, beaucoup trop gros.
Revenons ici.
Pour la largeur maximale, nous allons simplement choisir 75 %,
comme nous l'avons fait précédemment.
Savoir, étouffé pour utiliser la hauteur dans
ce cas, un changement de plus.
Alignons les éléments de menu à la verticale,
les alignons au milieu.
Et voilà.
Et bien sûr, la couleur aussi.
J'ai oublié ça.
Changeons la couleur. Ticks ClO2 primaire.
Et c'est ça.
Maintenant, jetez un coup d'œil à cela.
Ici, vous avez publié.
Lorsque vous cliquez sur Publier,
c'est ici que les éléments sont regroupés et je dirai, hé,
où souhaitez-vous afficher ce modèle particulier ?
Nous allons ajouter la condition,
pas l'antiacide, car
ce sera pour la page d'accueil.
Je vais venir ici maintenant et choisir singulier.
Et puis, pour les singlets, on dira
, d' accord, toutes les pages individuelles, non,
voulaient se diviser spécifiquement sur la première page.
Je vais donc choisir celui-là.
Et c'est que je vais aller
l'avant et je vais simplement économiser et fermer.
Et c'est tout.
Allons-y maintenant et rafraîchissons.
Et je vais vous montrer quelque chose de très, très intéressant.
Très bien, laissez-moi faire un rafraichissement dur.
Voici donc une ligne plus fine.
Vous pouvez voir que nous avons
les éléments du menu ici.
Oh, au fait, l' effet de survol qu'il peut voir,
le tiret apparent sur
l'élément de menu d'âge fourni par le pool élémentaire, le menu, l'
élément de menu par défaut.
Vous pouvez donc modifier cela sur l'effet de survol si vous voulez
ennuyer le manager ici
c'est que nous ne voyons plus le logo.
Nous pouvons voir les éléments du menu, mais nous ne voyons pas le logo.
Que se passe-t-il ici ?
C'est ici que j' aimerais vous présenter
le concept de l'indice Z.
Revenons ici maintenant.
Tout d'abord, nous déplaçons
la couleur d'arrière-plan de l'en-tête.
Nous n'en avons plus besoin.
Mais jetez un coup d'œil à cela.
Je vais passer à l'avancée.
Ici, vous avez ça.
Option mais très, très importante,
très puissante appelée index z.
Je vais donner à celle-ci la valeur de
deux mises à jour. Revenons ici.
Faisons un rafraîchissement très dur.
Et juste comme ça.
Vous pouvez maintenant voir apparaître le logo.
Planche.
Attendez une seconde.
Que s'est-il passé exactement ?
Voir cette valeur d'indice Z ici.
Chaque fois que vous avez un élément,
une section chevauchant une autre section,
vous pouvez indiquer à Elemental
quels éléments vous
souhaitez afficher en premier , ce qui ne le fera pas.
Vous voulez vous présenter devant l'autre ?
Dans ce cas, nous avons actuellement
l'image binaire qui chevauche notre en-tête.
Nous voulons que l'en-tête soit influencé afin de pouvoir
voir le logo et le menu principal.
En tant que tel, vous devrez attribuer
un index z plus élevé
à l'élément que vous souhaitez apparaître en face.
Depuis que nous avons donné à l'en-tête la valeur d'index Z de deux.
Permettez-moi d'aller à la section contenant notre banane.
Laissez-moi donc éditer avec élémental.
Passons à la section Navigateur ici, avancée.
Vous pouvez voir ici que nous n'avons aucune valeur pour
l'index Z pour la section contenant la bannière.
Mais si je suis venu ici maintenant
et que je lui donne une valeur de trois.
Maintenant, vous pouvez voir que nous ne voyons plus le logo,
nous ne voyons plus le menu principal.
En effet, la valeur de l'indice xin
de cette section contenant
la banane est maintenant supérieure à deux.
Mais si j'en donne un maintenant, vous pouvez voir que nous avons
le menu principal et le logo.
C'est exactement comme ça que fonctionne l'index Z.
Maintenant, une question que vous pourriez avoir, une
très bonne question est,
Alex, attendez une seconde.
Avant de donner la valeur de
cet indice de deux à l'en-tête.
Comment résoudre le menu principal ?
Mais nous n'avons pas vu le logo.
Je serai honnête à 100% avec vous.
Je ne sais pas exactement pourquoi c'est arrivé.
Je suppose qu' il y a peut-être du code
dans les éléments qui donne toujours
la priorité au menu principal pour toujours afficher.
Encore une fois, c'est peut-être quelque chose de très,
très simple qui me manque tout simplement.
Je ne suis pas tout à fait sûr du bord.
Excusez-moi pour cela, mais j' aimerais être honnête avec vous.
Mais prenez-le simplement pour ce que c'est.
Chaque fois que vous voulez introduire un type de situation
où un élément se chevauche l'
autre et que vous voulez que
éléments automatiques derrière le spectacle devant
lui donnent simplement une valeur d'index Z plus élevée.
Une chose que vous avez peut-être remarquée est
l'espace blanc soudain qui
n'apparaît pas tout en haut.
Et cela se produit parce qu'
élémentaire, par défaut, dans de nombreux cas,
nous ajouterons un motif de dix pixels autour des éléments.
Donc, une façon de contourner ce genre de problème,
c'est simplement modifier
la section qui a
l'espace blanc dans ce cas en ce moment, c'est mon en-tête.
Laissez-moi donc modifier l'en-tête élémentaire.
Je vais aller dans cette section elle-même.
Alors modifiez la section, puis
invitez ici où vous avez l'écart des colonnes.
Je vais dire pas d'écart,
pas d'écart.
Mettons-nous à jour essentiellement en disant pas d'écart.
Nous disons, Hé, nous ne voulons aucun modèle nulle part.
Maintenant, cela va être lu hors des espaces blancs.
Mais maintenant, notez que parce que nous avons dit Non, aucune lacune.
Désormais, la colonne contenant un logo n'a plus
de motif entre le logo et le haut de notre écran.
Il suffit donc d'aller dans la colonne contenant le logo.
Allez au motif avancé ici,
nous donnons juste dix pixels de rembourrage en haut.
Mises à jour qui résoudront le problème ou les incidences.
Voici donc quelques-uns des très petits
problèmes ennuyeux que vous pourriez rencontrer
lorsque vous utilisez élémental et comment les contourner.
Mais c'est presque fini.
Nous allons plutôt créer l'en-tête mobile
de notre en-tête pour la première page.
Et c'est exactement la même chose que nous avons fait auparavant.
Nous allons venir ici maintenant,
dupliquer la section entière.
Et sortons, revenons ici à
la section d'édition de l'en-tête mobile.
Nous allons passer au style classique de couleur noire.
Et alors, de quoi avons-nous besoin ? Que devons-nous faire d'autre ?
Nous devons passer au mode réactif.
Allez sur mobile.
Et maintenant, ici,
éditez la colonne, nous allons dire 50 %.
Faites la même chose pour la colonne qui contient le menu principal.
Et puis dites 50 %.
Nous pouvons modifier le menu ici,
aligné à droite.
Peut-être le rendre un peu plus gros.
Passons donc au style.
Venez ici sur le bouton à bascule.
La taille, la rend un peu plus grande.
Pour le logo également.
Aller au style, largeur maximale, 100 %.
Oui, nous devons aussi faire le show
hide ou les options, si avancées.
Allons au réactif.
Pour cette section et cette section contiennent le
logo et le menu de demande.
Nous allons passer ici à
Advanced, puis réactifs.
Je vais dire cacher sur le pont, Arrêter,
Cacher sur tablette, puis montrer sur mobile.
Passons maintenant à l' ancien en-tête d'origine,
modifions cette section.
Allez dans Avancé, accédez à Responsive.
Il suffit de se cacher sur mobile, et c'est tout.
Allons de l'avant et mettons à jour.
J'espère que je n'ai rien oublié
qui est revenu ici.
Rafraîchissez la page.
Voyons ce que nous avons.
Ok, si original ou j'ose.
Et c'est une vue oblique qui a l'air bien.
Et maintenant, ce sera la vue mobile.
Et David est donc exactement comment faire
exactement la même chose sur le produit Elementor que nous avons
fait avec l'en-tête et le pied de page Elementor sont plugin.
Une dernière chose avant de fermer cette vidéo,
passons au back-end.
Maintenant, sur les modèles.
Je suis désolé, sous le générateur de thèmes
plutôt que dans nos modèles sur un générateur de thèmes,
c'est là que vous verrez le nouvel en-tête que vous avez créé.
Vous pouvez cliquer à l'intérieur pour modifier.
Encore une fois.
Ensuite, si vous voulez changer de nom,
c'est très, très simple.
Vous descendez ici sur le bouton Paramètres
puis ici,
nous pouvons appeler celui-ci l'en-tête de la maison.
On peut appeler ça à la maison,
à la maison, à la maison.
Ensuite, nous pouvons donner à l' en-tête de commande le nom global.
Si vous souhaitez modifier les conditions de ce plan,
la tête ou peut-être souhaitez-vous utiliser
le même en-tête sur une autre page.
Ici, vous avez les options de sauvegarde, vous cliquez ici.
Vous aurez maintenant accès à l'écran.
Notre option de conditions.
C'est là que vous pouvez maintenant entrer,
maintenant peut-être passer à une autre page et ainsi de suite.
Et c'est essentiellement pour
créer l'en-tête de la page d'accueil,
fois sur le bureau et les versions mobiles
à l'aide d'Elementor Pro.
Merci d'avoir regardé.
Je vous verrai dans le prochain cours.