Comment En – têtes globaux personnalisés en Divi

La création de formulaires d’accès en ligne pour les titres peut grandement améliorer l’expérience utilisateur. Ils sont parfaits pour leurs sites Web et leurs boutiques en ligne, car ils permettent aux utilisateurs d’y accéder facilement à tout moment ou sur n’importe quelle page du site. Dans ce tutoriel, nous vous montrerons comment concevoir un formulaire de connexion en ligne pour un utilisateur personnalisé de titre Divi Theme Builder. Pour ce faire, nous créerons un en – tête global réactif simple, puis nous utiliserons le module d’accès Divi pour concevoir un module d’accès en ligne compact dans le coin supérieur droit de l’en – tête. Build a besoin de quelques CSS personnalisés, mais une fois que tout est prêt, il est facile de personnaliser le formulaire de connexion en ligne afin que vous puissiez facilement correspondre à n’importe quel design de titre en utilisant les options de conception intégrées de Divi.
Allons – y! Voici un titre personnalisé pour le formulaire de connexion en ligne que nous allons créer dans ce tutoriel. Il s’agit d’un module d’accès en ligne sur l’écran de la tablette et du téléphone. Il s’agit du message de déconnexion et du lien affichés lorsque l’utilisateur se connecte. Téléchargement gratuit mise en page du titre du formulaire de connexion en ligne pour connaître la mise en page de ce tutoriel, vous devez d’abord le télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas désabonner ou recevoir un courriel supplémentaire.
Télécharger le fichier Abonnez – vous à la newsletter Divi et nous vous enverrons par e – mail une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres incroyables
Ga maintenant que cette section est prête, nous pouvons ajouter la première ligne. Ajouter des lignes aux colonnes de la section. Ajoutez le module image avec l’image logo dans la ligne à la colonne et ajoutez le module image. C’est là que nous ajouterons un logo au titre. Mettre à jour l’image et les marges du module image mettre à jour les paramètres de l’image comme suit: Image: [ajouter un logo (64px est d’environ 64px)] Marge: 20 pixels à droite Mise à jour des paramètres de ligne avant de continuer, ouvrez les paramètres de ligne et mettez à jour ce qui suit:
Utiliser une largeur de marge personnalisée: s largeur de marge: 1 largeur: 25% alignement de ligne: remplissage à gauche: 0px haut, 0px bas Ajouter un module de connexion en ligne à la deuxième ligne ajouter une ligne maintenant que la première ligne est prête, vous remarquerez dans l’éditeur que la première ligne représente 25% de la Section de gauche. Ce sera essentiellement la ligne spécifiée pour notre drapeau de titre. Nous devons créer une ligne de section pour le module de connexion en ligne et le menu à droite. Ajouter une deuxième ligne avec une structure de colonne à la section. Ajouter un formulaire d’accès en ligne à une colonne, ajouter un formulaire d’accès. Supprime le contenu par défaut dans les paramètres de connexion et supprime le titre virtuel et le contenu du corps. Ajouter des classes personnalisées et des formulaires de connexion CSS avant de concevoir un formulaire de connexion en ligne, nous ajoutons d’abord des classes personnalisées CSS et CSS au formulaire de connexion. Cela nous permettra d’obtenir l’architecture de base en ligne du module avant d’utiliser les options intégrées de Divi pour la conception finale du module. Dans l’onglet avancé, ajoutez la classe CSS suivante: classe CSS: en – tête formulaire de connexion Ajoutez les CSS personnalisés suivants à la boîte de description de connexion CSS:
En bas de la marge: 0px! Informations importantes, puis ajouter les CSS personnels suivants