Réponse rapide
Pour un tableau, ouvrez-le dans le constructeur, allez dans Settings (onglet), dépliez Styles, saisissez votre CSS dans Extra Styles et cliquez sur Apply styles, puis sur Save. Pour tous les tableaux de votre site, allez dans WP Table Builder > Settings > Table Styles, ajoutez le CSS dans Custom CSS et cliquez sur Save. Les deux sont gratuits et prennent en charge les media queries.
Le CSS personnalisé vous permet de modifier des détails pour lesquels le constructeur n’a pas de réglage, comme une graisse de police particulière, une ombre ou un rendu différent sur les très petits écrans.
Prérequis #
| Élément | Détails |
|---|---|
| Offre | Gratuit et Pro |
| Compétences | Notions de CSS |
| Version de l’extension | WP Table Builder 2.1.0 ou plus récent (aperçu du CSS dans le constructeur) |
Ajouter du CSS à un tableau #
- Ouvrez le tableau dans le constructeur et cliquez sur Settings .
- Saisissez
stylesdans Search settings, ou faites défiler jusqu’à Styles, et dépliez-la. - Écrivez votre CSS dans Extra Styles.
- Cliquez sur Apply styles pour le prévisualiser dans le constructeur.
- Cliquez sur Save.
Ajouter du CSS à tous les tableaux #
- Allez dans WP Table Builder > Settings.
- Ouvrez Table Styles (onglet). La remarque indique que les styles s’appliquent à tous les tableaux.
- Ajoutez votre CSS dans Custom CSS et cliquez sur Save.
Sélecteurs utiles #
| Sélecteur | Cible |
|---|---|
.wptb-cell | Toutes les cellules du tableau |
.wptb-image-element-target | Images des éléments Image |
Utilisez l’outil Inspecter de votre navigateur sur la page publiée pour trouver les noms de classes exacts dont vous avez besoin.
Exemple #
.wptb-cell { font-weight: 500; }
@media (max-width: 600px) { .wptb-cell { font-size: 14px; } }
Conseils #
- Essayez d’abord les réglages intégrés. Ils sont plus faciles à modifier ensuite et fonctionnent avec les mises en page responsive.
- Gardez le CSS propre à un tableau dans Extra Styles pour qu’il suive le tableau quand vous l’exportez en XML.
Questions fréquentes #
Où ajouter du CSS personnalisé pour WP Table Builder ?
Utilisez Extra Styles dans l’onglet Settings du tableau pour un seul tableau, ou WP Table Builder > Settings > Table Styles pour tous les tableaux.
Le CSS personnalisé prend-il en charge les media queries ?
Oui. Les media queries fonctionnent dans Extra Styles comme dans Table Styles.
Le CSS personnalisé est-il une fonctionnalité Pro ?
Non. Les deux options de CSS personnalisé sont gratuites.
