Une façon simple et créative de voir le logo de l’entreprise dans Divi

Utilisez l’image comme fichier PNG pour garder l’arrière – plan transparent. Répétez ensuite le processus pour les logos restants. Vous pouvez conserver la couleur originale du logo ou la changer à la couleur que vous voulez en utilisant l’éditeur de photos. Si vous prévoyez ajouter un logo en utilisant Divi (c. – à – d. un module image ou une bibliothèque d’images), vous pouvez toujours ajuster les couleurs en utilisant l’effet de filtrage intégré de Divi. Abonnez – vous à notre canal YouTube # 1 et visualisez le logo de l’entreprise en utilisant le module Divi Gallery (sélection simple glisser – déposer). En utilisant la fonction glisser – déposer de Divi, vous pouvez faire glisser tous les logos de l’entreprise dans Divi Builder pour créer une bibliothèque d’images immédiatement et afficher votre logo dans la grille.
Pour ce faire, créez une nouvelle page et déployez Divi Builder pour la construire à l’avant. Sélectionnez l’option créer à partir de zéro. Lorsque Divi Builder démarre et s’exécute, ouvrez le dossier contenant toutes les images et sélectionnez – les. Ensuite, il suffit de les faire glisser dans la fenêtre du navigateur en utilisant Divi Builder. Divi ajoute automatiquement ces images au nouveau module de la galerie et ouvre les paramètres de la galerie pour lancer le processus de personnalisation. Puisque je suis en train d’ajouter 8 images de logo et que je ne veux afficher aucun titre, titre ou mise en page, je peux mettre à jour ce qui suit:
Nombre d’images: 8 afficher le titre et le titre: ne pas afficher la disposition: Non Par défaut, le module galerie ajoute une superposition lorsque vous passez le curseur sur l’icône de chaque image. Vous pouvez ajuster la couleur de l’icône zoom, la couleur de la superposition en vol stationnaire, ou les paramètres de superposition de l’icône en vol stationnaire. Pour rester propre et simple, vous pouvez supprimer les dérogations aux endroits suivants:
Vous pouvez déplacer la souris en définissant la couleur de l’icône zoom et la couleur du curseur à transparent. Ensuite, vous pouvez explorer toutes les options de conception pour créer un design unique pour votre bibliothèque d’images. Par exemple, vous pouvez ajouter une bordure avec des ombres minces.
Largeur de la bordure d’image: 1px couleur de la bordure d’image: # dddddd ombre de la bordure d’image: voir capture d’écran Voici l’apparence de la conception finale sur les navigateurs de différentes tailles. De plus, comme cette bibliothèque peut être ajoutée à n’importe quelle structure de colonne, vous pouvez facilement créer une disposition unique pour le logo de votre entreprise. Il s’agit d’un exemple de disposition à deux colonnes avec un module texte à gauche et un module bibliothèque d’images (avec logo) à droite. J’ai ajouté un gradient de fond juste pour vous montrer un look différent. # 2 afficher le logo de l’entreprise en utilisant la galerie intégrée WordPress (en utilisant n’importe quel module Divi) et vous pouvez également ajouter le logo de l’entreprise à votre site Web en utilisant le raccourci de la galerie d’images WordPress. C’est très facile à faire et idéal pour les logos, car dans la plupart des cas, vous n’avez pas besoin d’ajouter un style personnalisé à l’image. Le plus grand avantage de cette approche est que vous pouvez distribuer jusqu’à 9 colonnes pour votre logo afin de s’adapter à la fenêtre du navigateur, vous permettant ainsi de maintenir la structure des colonnes même sur votre appareil mobile.
Voici comment faire. Dans Divi Builder, créez une nouvelle section avec une structure de quart à trois quarts de colonne. Supposons que vous vouliez que le texte apparaisse à gauche du logo de l’entreprise dans une galerie de six colonnes. Ajoutez d’abord le formulaire de texte dans la colonne de gauche et mettez à jour ce qui suit: contenu: \
Paramètres CSS à notre page:. Gallery IMG {
Bordure: aucune! Important
} C’est le dernier dessin. Ici, la ligne ajoute un fond noir. Sur les appareils mobiles, les colonnes ne sont interrompues sur aucune taille d’écran. Il suffit de redimensionner l’image. Je l’admets. Il peut y avoir trop de huit colonnes sur le smartphone parce que l’image devient très petite. Intégrer la Bibliothèque logo dans n’importe quel module Divi parce qu’il s’agit d’une intégration de code court, vous pouvez ajouter cette bibliothèque à presque n’importe quel module Divi qui ouvre de nombreuses possibilités différentes. Par exemple, vous pouvez ajouter une image logo dans un commutateur, un accordéon ou même un module de carte. Voici un exemple d’ajout d’un raccourci WordPress Gallery logo à deux onglets différents. Pour cet exemple, j’ai sélectionné six logos pour chaque bibliothèque, chacun avec trois colonnes. Cela peut être utile pour les sites qui ont besoin d’un grand nombre de logos 3 utilisez Divi Builder pour créer une mise en page personnalisée pour le logo de votre entreprise si vous voulez être plus créatif avec la mise en page du logo de votre entreprise, vous pouvez utiliser Divi Builder pour concevoir tout ce que vous pouvez imaginer. L’élément Divi row supporte jusqu’à six colonnes de disposition de colonne, ce qui est suffisant pour la plupart des mises en page de logo d’entreprise. J’aime la disposition du logo en 6 et 4 colonnes, principalement en raison de la façon dont ils répondent sur l’appareil mobile. Dans la conception ci – dessous, je vais vous montrer quelques conseils sur la façon d’élever la disposition du logo de l’entreprise au niveau suivant. Commençons par créer une nouvelle section avec six colonnes de lignes. Avant de commencer à ajouter quoi que ce soit à une colonne, allez aux paramètres de ligne et mettez à jour ce qui suit: largeur personnalisée: 90% largeur de la gouttière: 1 hauteur de la colonne équilibrée: S imbot
Ajouter ce qui suit au contenu: Comme décrit dans Titre 2 caractères: Montserrat titre 2 poids de police: gras titre 2 alignement du texte: texte moyen couleur titre 2: # FFFFFF titre 2: taille du texte: 32px marge personnalisée: 0px en bas Enfin, ajoutez un formulaire image sous le formulaire texte qui contient un logo d’entreprise que vous souhaitez voir se démarquer des autres formulaires. Puis mettre à jour ce qui suit: alignement de l’image: centrer la marge personnalisée: – 75 px Vérifiez le résultat final. Créer une section sur votre site Web pour le logo de l’entreprise est en fait très simple. Une fois que l’image du logo a été correctement redimensionnée à l’aide de l’éditeur de photos, Divi peut traiter le reste. Les méthodes décrites dans ce tutoriel devraient fournir tout ce dont vous avez besoin pour créer une mise en page que vous pouvez compléter aussi facilement que possible. Avec la puissance de Divi, vous devriez aimer créer des mises en page uniques. J’ai hâte d’entendre vos commentaires. Bonjour!