Sélectionner une page


Ce billet est une adaptation en espagnol de l’article publié sur le blog elegantthemes 5 façons amusantes de styliser le module de présentation de Divi. Dans tous les cas, je vais essayer de respecter l’essence de l’article original en changeant simplement les concepts pour le rendre plus compréhensible dans notre langue. Les images sont également échangées contre des captures d’écran de la version Divi en espagnol.

Dites également que pour suivre ce tutoriel, vous devez avoir le thème Divi elegantthemes installé sur votre WordPress.

4 façons de personnaliser le module d’affichage

Dans cet article, nous allons examiner l’une des fonctionnalités les plus populaires de Divi, le module d’affichage. Bien qu’il ressemble à un simple module, il dispose de plusieurs options de configuration d’icônes et d’images, ainsi que de nombreuses fonctionnalités personnalisables qui peuvent donner vie à votre site Web. En règle générale, le module d’annonce est utilisé pour des sections telles que les services, les avantages, les coordonnées, etc. Mais Divi nous offre tellement d’icônes et d’options à configurer que les possibilités sont infinies.

Le module standard

Par défaut, ce module publicitaire ajoute un titre aligné à gauche et aucune icône. Cependant, avec quelques changements de configuration et quelques CSS, nous allons donner à ce module un nouveau look.

Par défaut, l’apparence du module d’annonces est affichée au-dessus de ces lignes. Comme vous pouvez le voir, c’est assez strict.

Dans tous ces exemples, nous modifierons les paramètres dans trois domaines principaux:

Paramètres d'affichage du module

1. Axé sur la publicité

Exemple de paramètres d'affichage du module 1

Exemple 1

Dans ce premier exemple, nous utiliserons une icône (ordinateur portable) pour notre titre (conception Web). Nous alignons le module au milieu et lui donnons une couleur de fond claire. Nous pouvons faire tout cela grâce à la configuration du module sans avoir besoin de CSS. Vous trouverez ci-dessous les paramètres que vous devez modifier. Les options non mentionnées les laissent inchangées:

Configuration générale:

  • Utilisez le symbole: OUI
  • Couleur de l’icône: #ffffff
  • Symbole de cercle: OUI
  • Couleur du cercle: # 0c8dff
  • Afficher la bordure du cercle: OUI
  • Couleur de la bordure du cercle: #ffffff
  • Position de l’image ou du symbole: au-dessus
  • Animation d’image ou de symbole: aucune animation
  • Couleur du texte: clair
  • Orientation du texte: milieu

Paramètres de mise en page avancés:

  • Police: Oswald (gras, majuscules)
  • Taille de la police de l’en-tête: 35px
  • Couleur d’arrière-plan: # 61009e
  • Remplissage personnalisé: 20px, 20px, 20px, 20px

Le résultat doit correspondre à l’image « Exemple 1 ». Quoi qu’il en soit, nous avons réalisé une vidéo pour vous permettre de revoir les étapes:

2. Cercle ombré

Exemple de paramètres d'affichage du module 2

Exemple 2

Dans l’exercice 2, nous créerons un design circulaire qui ajoutera une touche unique à vos modules publicitaires. Bien que peu nombreux, cela nécessite des modifications de configuration du module et du CSS. Alors, commençons.

Configuration générale:

  • Utilisez le symbole: OUI
  • Couleur de l’icône: #ffffff
  • Position de l’image ou du symbole: au-dessus
  • Animation d’image ou de symbole: aucune animation
  • Couleur du texte: clair
  • Orientation du texte: milieu

Paramètres de mise en page avancés:

  • Utilisez la taille de police du symbole: OUI
  • Taille de la police de l’icône: 90
  • En-tête: Géorgie (gras)
  • Taille de la police de l’en-tête: 24 px
  • Couleur d’arrière-plan: # ea7900
  • Remplissage personnalisé: 20px, 20px, 20px, 20px

CSS personnalisé:

Élément principal

border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%;

Ce code crée le cercle même s’il n’a pas encore la forme souhaitée.

width: 300px; height: 300px;

De cette façon, nous ajustons la largeur et la hauteur afin que la forme du cercle s’adapte.

border: 3px solid white;

En utilisant le code que vous voyez sur ces lignes, nous générerons la bordure blanche qui apparaîtra lorsque nous définirons l’ombre. Bien entendu, vous pouvez modifier les valeurs d’une ligne d’épaisseur différente.

box-shadow: 0px 0px 25px rgba(23, 23, 23, 0.17);
-moz-box-shadow: 0px 0px 25px rgba(23, 23, 23, 0.17);
-webkit-box-shadow: 0px 0px 25px rgba(23, 23, 23, 0.17);

Et enfin, ajoutons une ombre douce au cercle. Bien sûr, vous pouvez modifier les valeurs si vous souhaitez modifier l’apparence de l’ombre. Par exemple, essayez de changer les valeurs de 0,17 à 5 pour une ombre plus intense.

appuie sur le bouton sauver et fermer et vous l’aurez déjà.

Vous trouverez ci-dessous tout le code que vous pouvez copier et coller dans un CSS personnalisé.

border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
width: 300px;
height: 300px;
border: 3px solid white;
box-shadow: 0px 0px 25px rgba(23, 23, 23, 0.17);
-moz-box-shadow: 0px 0px 25px rgba(23, 23, 23, 0.17);
-webkit-box-shadow: 0px 0px 25px rgba(23, 23, 23, 0.17);

Et maintenant la vidéo pour que vous puissiez revoir toutes les étapes:

3. Un module de chaque côté avec une icône à gauche

Exemple d'affichage du module 3

Exemple 3

Pour cette mise en page, nous allons créer deux annonces similaires à l’aide du module d’annonces avec une palette de couleurs neutres. Ensuite, nous mettrons en évidence les icônes et le titre. Enfin, ajoutons une ombre et une bordure avec du CSS. Dans les deux cas, vous devez d’abord créer une ligne avec 2 colonnes.

Configuration générale:

  • Utilisez le symbole: OUI
  • Couleur de l’icône: #ffffff
  • Symbole de cercle: OUI
  • Couleur du cercle: # 5e8393
  • Afficher la bordure du cercle: OUI
  • Couleur de la bordure du cercle: #ffffff
  • Position de l’image ou du symbole: gauche
  • Animation d’image ou de symbole: aucune animation
  • Couleur du texte: foncé
  • Alignement du texte: gauche

Paramètres de mise en page avancés:

  • Utilisez la taille de police du symbole: OUI
  • Taille de la police de l’icône: 30px
  • Source d’en-tête: Amer
  • Taille de la police de l’en-tête: 24 px
  • Couleur de police de l’en-tête: # 5e8393
  • Couleur d’arrière-plan: #ffffff
  • Rembourrage personnalisé: 25px, 25px, 25px, 25px

À l’heure actuelle, nous avons les éléments suivants:

Exemple de paramètres d'annonce de module3_phase1

CSS personnalisé:

Elemento principal
box-shadow: 0px 1px 18px rgba(23, 23, 23, 0.17);
-moz-box-shadow: 0px 1px 18px rgba(23, 23, 23, 0.17);
-webkit-box-shadow: 0px 1px 18px rgba(23, 23, 23, 0.17);

Cela créera une ombre douce sur la boîte:

module-ad-settings-example3_phase2-shadow

outline: solid 1px #5e8393;
outline-offset: -10px;

Et avec ce code, nous ajoutons un cadre qui fait face à 10 pixels vers l’intérieur comme vous le voyez dans l’image ci-dessous ces lignes

Maintenant, dupliquez le module que vous venez de créer et modifiez le symbole et le texte.

appuie sur le bouton sauver et fermer et vous l’aurez déjà.

Vous trouverez ci-dessous tout le code que vous pouvez copier et coller dans un CSS personnalisé.

box-shadow: 0px 1px 18px rgba(23, 23, 23, 0.17);
-moz-box-shadow: 0px 1px 18px rgba(23, 23, 23, 0.17);
-webkit-box-shadow: 0px 1px 18px rgba(23, 23, 23, 0.17);
outline: solid 1px #5e8393;
outline-offset: -10px;

Et comme toujours, la vidéo au cas où vous auriez manqué l’une des étapes:

4. Style de treillis

Module-Annonce-Paramètres-Exemple4-Finale

Exemple 4

Ensuite, nous ferons un exercice légèrement plus avancé, mais l’apparence finale sera propre et élégante. Nous créerons une conception de style grille qui donnera à vos modules publicitaires un aspect moderne et professionnel. Le plus gros changement que nous allons apporter ici est d’ajouter une bordure aux modules pour créer l’apparence de la grille. Il est conseillé de compléter un module puis de dupliquer et de modifier le titre, l’icône, etc. pour éviter de répéter les étapes.

Puisque nous utilisons 4 modules publicitaires dans cette mise en page, les modules seront renommés ad1, ad2, ad3 et ad4. Nous avons commencé.

Par conséquent, la structure de notre section sera de 2 colonnes. Alors créons le premier module: Insérer le module> Annonce.

Nous ajustons d’abord les paramètres du premier module.

Configuration générale:

  • Utilisez le symbole: OUI
  • Couleur de l’icône: #ffffff
  • Symbole de cercle: OUI
  • Couleur du cercle: # 035a9e
  • Position de l’image ou du symbole: au-dessus
  • Animation d’image ou de symbole: aucune animation
  • Couleur du texte: foncé
  • Orientation du texte: milieu

Paramètres de mise en page avancés:

  • Utilisez la taille de police du symbole: OUI
  • Taille de la police de l’icône: 40px
  • En-tête: Lato (gras, majuscules)
  • Taille de la police de l’en-tête: 26 px
  • Couleur de police de l’en-tête: # 035a9e
  • Code source: lumière Lato; 16 px; Couleur # 035a9e.
  • Couleur d’arrière-plan: #ffffff
  • Remplissage personnalisé: 20px, 20px, 20px, 20px

CSS personnalisé:

Módulo anuncio 1. Elemento principal.
border-right: 1px solid #e6e6e6;

De cette façon, nous ajoutons une ligne grise à droite de ce module. C’est ainsi que notre module prend forme.

nous pressons Sauver et fermer pour enregistrer le module. Ensuite, nous dupliquons le module.

Módulo anuncio 2. Elemento principal.

Nous supprimons ce code:

Módulo anuncio 1. Elemento principal.
border-right: 1px solid #e6e6e6;

nous pressons Sauver et fermer. Ensuite, nous dupliquerons à nouveau le module pour créer le troisième.

Módulo anuncio 3. Elemento principal.
border-right: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;

Cela signifie que nous ajoutons une ligne grise en haut et à droite de ce module.

Sauver et fermer. Ensuite, nous dupliquons à nouveau le module pour créer la pièce.

Módulo anuncio 4. Elemento principal.
Módulo anuncio 3. Elemento principal.
border-top: 1px solid #e6e6e6;

Dans ce cas, nous avons ajouté une ligne grise en haut de ce quatrième module.

nous pressons Sauver et fermer.

En l’absence de la dernière touche, pour l’instant nous avons ce qui suit:

module-ad-settings-example4_previous

Nous devons aligner les lignes correctement, nous ouvrons donc les paramètres de ligne.

ajustes-modulo-row

Et nous marquons Gouttière large à usage personnalisé. le Espacement des colonnes nous le mettons en 1.

form-ajustes-row

Il existe des tonnes de façons de créer les lignes. Attention cependant à ne pas les chevaucher. Sinon, vous aurez une ligne très épaisse car les bords gauche et droit se chevauchent.

Et voila! Bien que cela puisse sembler compliqué, c’est en fait très simple. Juste quelques lignes de CSS pour créer les lignes de la grille et nous l’avons.

Êtes-vous perdu à une étape? Regardez la vidéo pour voir l’exercice complet.



Source link

Recent Posts