Télécharger un design d’attention sociale unique avec 5 palettes pour Divi
Les sites Web et les médias sociaux vont souvent de pair. Les réseaux sociaux sont utilisés pour stimuler le trafic sur le site, mais l’inverse est vrai, surtout si vous voulez augmenter la participation aux réseaux sociaux. C’est pourquoi la plupart des sites Web contiennent des liens vers leurs réseaux sociaux sur différentes pages. Vous pouvez ajouter des icônes de façon classique ou essayer une approche plus unique. Nous avons créé un design d’attention sociale étonnant et créatif que vous pouvez télécharger et utiliser sur n’importe quel site Web créé avec Divi. De plus, nous vous proposons 5 palettes de couleurs différentes qui sont parfaites pour ce design.
Allons – y! Examinons d’abord les différentes variantes de ce design et l’affichage sur différents écrans de taille.
Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Couleur
Structure des colonnes nous pouvons maintenant ajouter de nouvelles lignes en utilisant la structure des colonnes suivante: Le seul module dont nous avons besoin dans cette ligne est le module texte. Ajouter un titre et un paragraphe dans la zone de contenu. Paramètres du texte, puis allez aux paramètres du texte et faites quelques modifications. Taille du texte: 16px hauteur de la ligne de texte: 2emtext direction: Central text color: CLEAR Les paramètres de texte H1 \/ H2 modifient également les paramètres de titre que vous sélectionnez. Police de l’en – tête: Rubik style de police de l’en – tête: taille du texte de l’en – tête en majuscules: 100 Px (bureau), 42 Px (tablette), 32 Px (téléphone mobile) hauteur de l’arc: 1,2em Diminuer la largeur du module plus tard. Largeur: 71% alignement du module: Centre Ajouter la section # 2 directement en dessous de la section précédente, puis ajouter une nouvelle section générale. Il n’est pas nécessaire de modifier les paramètres de la section. Ajouter une ligne de structure de colonne ajouter une ligne en utilisant la structure de colonne suivante: Ensuite, définissez la largeur de ligne dans les paramètres de taille. Largeur totale de la ligne: Oui Ajouter le module image à la colonne 2 charger le modèle solide il est temps de commencer à ajouter le module! Tout d’abord, ajoutez un module image dans la deuxième colonne. Téléchargez un modèle qui correspond à la palette sélectionnée. Vous pouvez trouver tous les types de modèles solides en allant dans le dossier téléchargé > modèles solides. Le redimensionnement modifie également la taille du module image. Largeur: 82% (bureau), 100% (tablette et téléphone) Alignement du module: milieu Espacement pour superposer le module image et la section précédente, ajoutez une marge négative au module image. Marge supérieure: – 300 pixels Ajouter le module Blurb à la colonne 3 AGG
I. nous modifierons chaque copie pour créer les résultats souhaités. Supprimer la marge supérieure négative de la réplique pour maintenir un bon aperçu, nous commencerons par supprimer la marge personnalisée négative de chaque réplique. Module Blurb paramètres uniques module Blurb # 2 modifier la réplication ouvrir le deuxième module Blurb dans la troisième colonne et modifier le contenu. Sélectionnez l’icône et sélectionnez une autre icône. Les paramètres de l’icône changent la couleur de l’icône pour correspondre au réseau social qu’elle représente. Couleur de l’icône: # 3b5988 Les paramètres du texte du titre utilisent également la même couleur que la couleur du texte du titre. Couleur du texte du titre: # 3b5998 Espacement pour créer une autre superposition de l’autre côté du téléphone, changez la valeur d’espacement. Marge gauche: – 170% (bureau), 0% (tablette et téléphone) Marge droite: 170% (bureau), 0% (tablette et téléphone) Bordure modifier les paramètres de bordure plus tard. Coin supérieur droit: 20px coin inférieur droit: 20 Px largeur du bord gauche: 5px couleur du bord gauche: # 3b5998 L’animation glisse ce module Blurb de l’autre côté avec un petit retard. Direction de l’animation: délai d’animation à droite: 100 MS Module Blurb # 3 modifier la copie le troisième module Blurb nécessite également une copie supplémentaire. Sélectionnez l’icône sélectionnez l’icône suivante. Les paramètres de l’icône changent la couleur de l’icône pour correspondre au réseau social qu’elle représente. Couleur de l’icône: # 1da1f2 Les paramètres du texte du titre utilisent la même couleur que la couleur du texte du titre. Couleur du texte du titre: # 1da1f2 L’espacement modifie également les paramètres d’espacement. Marge gauche: – 80% (bureau), 0% (tablette et téléphone) Marge droite: 80% (bureau), 0% (tablette et téléphone) Les bordures peuvent également changer la couleur des bordures dans les paramètres de bordure. Couleur de la bordure droite: # 1da1f2 Enfin, ajoutez un petit retard à l’animation