Howto supprimer l'espace entre wordpress thème divi sections

De le rendre plus utile pour les débutants.

Sans utiliser de code que vous pouvez essayer si juste de mettre une ligne à l'intérieur de la même section est assez pour vous.

Pas si nous pouvions faire ce que poostchi a fait, nous pouvons changer le css de la section.
Maintenant, si vous allez à votre site web et cliquez-droit sur une section et sélectionnez inspecter l'élément (en supposant que votre navigateur est google chrome), vous verrez votre section codé comme ceci.

<div class="et_pb_section et_section_regular" style="background-color:#2388e0;">
  <div class="et_pb_row">
    <div class="et_pb_column et_pb_column_4_4">
      <div class="et_pb_text et_pb_bg_layout_dark et_pb_text_align_left">
        This is row 1 section 1
      </div> <!-- .et_pb_text --><div class="et_pb_text et_pb_bg_layout_light et_pb_text_align_left">
        this is row 2 of section 1
      </div> <!-- .et_pb_text -->
    </div> <!-- .et_pb_column -->
  </div> <!-- .et_pb_row -->

</div>

Ici, nous voyons qu'ils sont à l'aide de la classe et_pb_section

cliquant sur le nom de la classe sera de montrer à la classe css code qui a la 50 pixels valeur de remplissage:

.et_pb_section {
  padding: 50px 0;
  position: relative;
}

Donc, tout ce que nous avons à faire est de remplacer la valeur de remplissage il y a 0 qui est ce que pootschi a fait.

.et_pb_section{
    padding-top: 0px !important;
}

la !important raconte css pour remplacer par cela.

Mais en faisant cela, TOUTES vos sections DIVI défini rembourrage valeur sera écrasée.

Alors que faire si vous ne voulez réduire un écart de seulement une section spécifique?

Divi a inclus le css ID d'une CLASSE css pour permettre une meilleure personnalisation sur leurs sections d'un des modules. Vous pouvez le trouver en cliquant sur le bouton modifier de notre section.

Méthode de CLASSE

Donner votre section d'un nom de CLASSE CSS: reduce_top_padding_here

alors vous pouvez le faire.

.reduce_top_padding_here {
    padding-top: 0px !important
}

Maintenant, où allons-nous mettre ce code css?

Divi a permis facile css modifier en allant dans l'

Apparence > Divi les Options du Thème > Paramètres Généraux >

faites défiler vers le bas pour trouver "css Personnalisé" (coller le code ici.)

Explication:

Ici, vous avez créé votre propre feuille de style css de la classe. Si SEULEMENT le section ou module que vous donner le nom de cette classe d', hériteront de cette css affichage instruction de donner le top padding 0 pixels. Au lieu d'écrire DIVI principal .et_pb_section classe.

Notez le point devant le nom de la classe moyen en css, qui est un nom de classe.

Donc en résumé pour éditer une section spécifique

1 - Donnez votre article une CLASSE CSS

2 - ensuite, de définir que la classe CSS de la valeur dans les options de thème divi > "css personnalisé"

Je voudrais étendre sur ce que Vassili a partagé, dans le but de fournir une réponse plus complète (en particulier concernant l'exclusion de la totalité de la largeur des sections).

Je soupçonne Alex Seidler réponse a manqué le point. Je soupçonne que l'interlocuteur veut supprimer ce rembourrage à l'échelle du site. Faire que via la Divi builder, comme il l'a affirmé, va être très fastidieux et va en fait faire beaucoup plus (Divi généré) supplémentaire CSS pour le site, y compris tous les !important balises (à ce propos, voir la dernière note à la fin de cette réponse).

Comme Vassili et la personne qui a posé la question l'a souligné, le code suivant va remplacer le rembourrage sur tous les articles.

.et_pb_section{
    padding-top: 50px !important;
}

Remarque, que 54px haut et le bas est actuellement la valeur par défaut sur les écrans de plus de 1350px. 4% est la valeur par défaut sur les écrans 981p et moins. Je dis "actuellement" parce que je me souviens, il l'habitude d'être 50px. Il pourrait être encore 50%. Quel que soit le cas, de réduire ce en fonction de vos besoins. L'interlocuteur veut que tous espacement supprimé, dans ce cas fixé à padding-top: 0 !important.

À l'exclusion complète de la largeur des sections

Le changement susmentionné peut avoir des effets indésirables si vous utilisez toute la largeur complète sections. Si cela se produit, vous pouvez exclure ces sections, avec les éléments suivants:

:not(.et_pb_fullwidth_section).et_pb_section { 
   padding-top: 50px !important; 
   padding-bottom: 50px !important;
}

Rappelez-vous, cela aura un impact sur toutes les lignes, dans toutes les sections.

Des Sections spécifiques uniquement

Si vous voulez seulement de remplacer le rembourrage sur des sections spécifiques, l'utilisation de la suggestion faite par Vasili dans sa réponse.

Réduction de la Ligne de remplissage

Tous ceux qui veulent réduire la valeur par défaut de la section verticale de rembourrage peut aussi se trouver à vouloir réduire la Ligne de remplissage vertical.

Pour cela, il faut ajouter cette CSS de votre thème enfant les styles.fichier css:

.et_pb_row { padding-top: 30px !important; }

30px est la valeur par défaut. Réduire pour répondre à vos besoins.

Des Lignes spécifiques uniquement

Pour réduire des lignes spécifiques uniquement, vous pouvez soit le faire ligne par ligne dans les Divi Builder "Design" de l'onglet de la ligne(s) en question, ou vous pouvez donner les lignes d'une classe unique (dans l'onglet "Avancé" de la rangée de paramètres), puis appliquer les paramètres à cette classe dans votre thème enfant les styles.fichier css. C'est le même processus que la modification des sections spécifiques. Par exemple, donner les lignes de la classe de ligne-réduit-top-padding " et ensuite il les styles.fichier css:

.row-reduced-top-padding { padding-top: 10px !important; }

L'avantage de cette méthode est qu'il est beaucoup plus rapide pour régler les paramètres par la suite, surtout si vous avez appliqué ce à quelques lignes.

Éviter !important, pas possible

Comme pour le commentaire de Alex Seidler sur la façon d'éviter à l'aide de la !important tag: Tandis qu'il est vrai que c'est mieux pour éviter cela, dans cette situation, il est inévitable. La dernière fois que j'ai vérifié, même Divi lui-même utilise le !important étiquette lorsque vous apportez des modifications à la marge et le remplissage des sections et des lignes via la Divi Builder. C'est parce qu'il est aussi avoir préséance sur le site de l'échelle de valeurs par défaut, qui ont déjà été déclarés par Divi.