Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


C’est l’un des sujets les plus demandés que je reçois et aujourd’hui, voici comment créer un fichier personnalisé Deux Entête.

Ce tutoriel vous montrera comment ajouter une disposition de section au-dessus de l’en-tête principal de Divi. Dans cette section, vous pouvez placer n’importe quel module Divi qui vous offre des possibilités de conception infinies.

J’ai créé un en-tête de démonstration personnalisé. C’est l’en-tête que nous allons créer dans ce tutoriel. Cependant, une fois que vous maîtrisez ces compétences, vous pouvez créer à peu près n’importe quel type d’en-tête.

Mettre à jour: Ce tutoriel a été mis à jour pour Divi 4.0+ qui inclut le générateur de thèmes. Si vous utilisez toujours une ancienne version de Divi, vous pouvez toujours créer un en-tête personnalisé. Faites défiler jusqu’à la section Créer un en-tête Divi personnalisé Pre 4.0

Créez un en-tête Divi personnalisé à l’aide du générateur de thèmes

Étape 1: Téléchargez et importez la mise en page de l’en-tête

Vous pouvez télécharger les fichiers Ici.

Après le téléchargement, décompressez le dossier. À l’intérieur, vous trouverez le fichier JSON que vous pouvez importer dans la bibliothèque Divi.

Allez dans Divi> Divi Library et cliquez sur la fonction d’import / export.

Ensuite, allez dans l’onglet Importer et téléchargez le fichier JSON personnalisé Divi Header.json

Étape 2: créer un en-tête Divi global

Allez dans Divi> Theme Builder et cliquez sur « Ajouter un en-tête global ».

Ajouter l'en-tête Divi global

Sélectionnez « Créer un en-tête global ».

Cliquez sur l’icône plus dans la section (bleue) et passez à l’onglet «Ajouter à partir de la bibliothèque».

Cliquez ensuite sur l’en-tête personnalisé.

Ajouter la mise en page d'en-tête au modèle d'en-tête global Divi

Cliquez sur Enregistrer (en bas à droite). Pour sortir de cet écran, cliquez sur la croix (en haut à gauche).

Important: Cliquez sur Enregistrer les modifications.

Étape 3 Personnalisez l’en-tête et le menu

Vous avez maintenant créé un en-tête personnalisé avec un menu. Cela signifie que les options d’en-tête et de navigation dans Divi> Theme Customizer ont disparu.

Vous pouvez maintenant effectuer toutes vos personnalisations sous Divi> Générateur de thèmes> En-tête global.

Dans la démo, j’ai utilisé un peu de CSS pour donner plus d’espace aux éléments de menu. Si c’est ce que vous voulez, vous pouvez placer cet extrait sous Divi> Options de conception> CSS

.et_pb_menu .et-menu>li {
    padding-left: 25px;
    padding-right: 25px;
}

Félicitations, vous avez créé un en-tête Divi personnalisé. Si vous avez des questions, veuillez laisser une réponse dans les commentaires ci-dessous.

Avant la version 4.0, créez un en-tête Divi personnalisé

Si vous utilisez une ancienne version de Divi antérieure à 4.0, vous pouvez suivre cette partie du tutoriel pour créer un en-tête personnalisé.

Important: Si vous faites cela sur un site Web existant, assurez-vous de faire une sauvegarde avant de continuer.

Étape 1: créer la section d’en-tête personnalisée

Allez dans Divi> Divi Library

Cliquez sur « Ajouter nouveau ». Vous allez maintenant avoir ce popup

La bibliothèque Divi s'affiche

Dans le champ Nom de la mise en page, vous pouvez donner à votre en-tête personnalisé le nom de votre choix.

Définissez le type de mise en page sur: Mise en page

Lorsque vous avez les options de démarrage, sélectionnez « Construire à partir de zéro ».

Lorsque vous reviendrez dans le générateur, vous devrez vérifier l’URL dans votre navigateur.

Numéro d'identification d'en-tête personnalisé

Notez le numéro après le message =

Dans mon cas, il s’agit du numéro 6, mais ce sera un numéro différent pour vous. Cela peut également être un nombre 2,3,4 ou à plusieurs chiffres.

Vous pouvez simplement remplir cette section rapidement à titre d’exemple. Nous l’améliorerons ultérieurement.

À l’heure actuelle, j’ai créé une structure à 4 colonnes dans chaque colonne d’un module de texte avec le mot test.

Remplissez la section

Nous allons donner à cette section un identifiant CSS. Ouvrez la section (barre bleue) et allez dans l’onglet avancé> CSS ID & Classes dans le champ CSS ID. Entrez cet identifiant En-tête supérieur

Ajouter un identifiant CSS

N’oubliez pas de publier / mettre à jour votre section.

Étape 2: création du crochet

Dans cette étape, nous allons créer un hook pour notre zone d’en-tête Divi personnalisée que nous venons de créer. Nous allons mettre ce hook dans notre fichier enfant Themes functions.php. Si vous n’avez pas de sous-thème, vous devez d’abord en créer un. Voici un guide étape par étape sur la façon dont vous pouvez Créer un thème pour enfants Divi.

Une fois votre sujet enfant téléchargé et activé, allez dans Affichage> Éditeur de sujets

Accédez à votre fichier functions.php (à droite).

Ajoutez le code PHP suivant au fichier enfant functions.php:

function custom_header ( $main_header ) {
        $custom_header .= do_shortcode('
'); return $custom_header . $main_header; } add_filter( 'et_html_main_header', 'custom_header' );
Remplacer le numéro d'identification

Remplacez le numéro d’identification par le vôtre.

Cliquez sur Enregistrer et accédez au frontal. Vous devriez maintenant voir votre section d’en-tête personnalisée au-dessus de l’en-tête principal de Divi.

Premier aperçu de l'en-tête

Si vous ne voyez pas cette section, retournez dans Divi> Divi Library> votre section créée et cliquez à nouveau sur Mettre à jour. Si vous avez des plugins de mise en cache, vous devez effacer ces caches + les vôtres Vider le cache du navigateur.

Nous avons maintenant placé une section d’en-tête personnalisée sur les principaux en-têtes de Divi. Dans l’étape suivante, nous allons faire de cet en-tête un en-tête plus agréable.

Étape 3: création de l’en-tête Divi personnalisé

Nous allons maintenant remplir notre nouvel en-tête. Allez dans Divi> Divi Library et ouvrez votre en-tête personnalisé.

Dans la première colonne, je placerai le module de suivi des médias sociaux. Dans la deuxième colonne, j’ai placé un module de présentation. J’ai placé un module de bouton dans la troisième colonne et un module de texte dans la dernière colonne.

Remplir l'en-tête personnalisé

J’ai supprimé le rembourrage supérieur et inférieur de la section et réduit le rembourrage supérieur et inférieur de la ligne à 9 pixels au-dessus et 7 pixels en dessous.

Pour changer la couleur d’arrière-plan, allez dans Divi> Personnalisateur de thème> En-tête et navigation> Barre de menus secondaire> Couleur d’arrière-plan

J’ai aussi un tutoriel Comment ajouter des symboles à votre menu Divi

Rendez-le mobile
Dans le front-end, cet en-tête personnalisé présente des problèmes d’alignement sur les appareils mobiles. Il y a maintenant beaucoup de contenu au-dessus du menu aussi et pour les téléphones, ce n’est parfois pas ce que vous voulez.

Vue mobile

Vous pouvez résoudre ce problème en éditant chaque module avec les options mobiles (malheureusement, il n’y a pas d’options mobiles), en utilisant le code CSS ou en dupliquant cette ligne et en la masquant pour le bureau et en utilisant une structure à colonne unique pour les tablettes et les appareils mobiles. La dernière méthode est ce que je vais faire.

En-tête personnalisé pour la visibilité

J’ai fait ça:

J’ai dupliqué la ligne de 4 colonnes.

J’ai ensuite modifié les options de visibilité de la rangée supérieure en vérifiant les options du téléphone et de la tablette sous Paramètres de ligne> onglet Avancé> Visibilité

Pour la rangée du bas, j’ai effectué ces paramètres en vérifiant simplement le bureau. La ligne supérieure n’est désormais visible que sur le bureau et la ligne inférieure uniquement pour les tablettes et les téléphones portables.

J’ai ensuite changé la structure de colonne de la rangée du bas en une seule colonne et supprimé le module Social Media + blurb. Si vous le souhaitez toujours, vous pouvez modifier l’orientation dans les paramètres. Je les ai supprimés afin que moins de contenu n’apparaisse au-dessus de la barre de menus. J’ai joué un peu avec les bords pour que tout soit un peu plus serré.

Voici l’essentiel sur mobile:

Nouveau téléphone portable d'en-tête

Étape 4: le CSS

Le seul CSS dont nous avons besoin pour notre en-tête Divi personnalisé est de le cacher au constructeur visuel. L’en-tête semble volumineux et volumineux avec le générateur visuel activé. Il vaut donc mieux le cacher simplement. Placez cet extrait de code cSS dans votre fichier de thème enfant CSS ou dans Divi> Options du thème> CSS

.et-fb #top-header {
	display: none !important;
}

Et c’est tout, vous pouvez maintenant créer un en-tête Divi personnalisé. Vous pouvez suivre mes autres tutoriels sur la conception d’en-tête. Si vous voulez le même menu que dans la démo, vous pouvez suivre le tutoriel comment styliser le menu divi.

Quelques exemples d’en-tête

Une fois que vous maîtrisez ces compétences, vous pouvez créer de très jolis designs d’en-tête. Découvrez quelques en-têtes Divi personnalisés que j’ai créés.

cette

En-tête Maveros

Cet en-tête est davantage personnalisé que l’en-tête de ce didacticiel. J’ai utilisé CSS pour aligner le logo à gauche de l’en-tête supérieur et de la barre de menus.

Webly Pro

Dans cette conception d’en-tête, j’ai utilisé CSS pour masquer l’en-tête Divi d’origine et créé une section supérieure avec un module de menu pleine largeur sous cette section. Le logo est uniquement créé avec un module d’image.

En-tête Webly Pro

Easyfix

En-tête Easyfix

Cet en-tête est fondamentalement le même concept que Webly Pro, mais j’ai utilisé du CSS supplémentaire pour les différentes couleurs d’arrière-plan dégradées.

J’espère que vous avez apprécié ce tutoriel. Si vous souhaitez plus de tutoriels, découvrez tous les miens Tutoriels Divi Ici.

Tu pourrais l’aimer aussi…



Source link

Recent Posts