---
lang: fr
image: https://i.imgur.com/ZslkP8V.png
---

# Ttwigi + Divi

Dans ce tutoriel, nous allons intégrer un bouton [Ttwigi](www.ttwigi.com) sur un site wordpress utilisant le visual builder/thème Divi

 **X** 

[TOC]

## Ajouter le bouton ttwigi

Après avoir crée votre bouton ttwigi sur ttwigi.com et installé notre plugin wordpress ( instructions [ici](https://ttwigi.com/en/plugins)),

rendez-vous sur la page où vous souhaitez installer le bouton et **ajoutez un élément divi "code"**

éditez ensuite les paramètre de cet élément et dans contenu/code copiez-coller votre shortcode.
Vous le trouverez en page de page, sur la page de gestion de votre bouton ttwigi.


## Changer son style visuel

Nous alons modifier le css (style) de l'élément *code custom* crée précédement.

1 - Allez dans les **paramètres de l'élément**


2 - Dans **"avancé/personnaliser css/élément principal"**, copiez-collez le code suivant :

		background-color: #33cb98;
    font-weight: 500;
		font-size : 20px;
		text-align : center;
		border-radius: 5px;
		width : 400px;
		height : 30px;
		margin : auto;
		cursor: pointer;
		vertical-align: middle;
		padding: 5px 5px;
		transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;

3 - Dans **"avancé/personnaliser css/après"**, copiez-collez le code suivant :

        background-color: #2cae82;

:::info
pour changer la couleur du texte du bouton, ou celle du bouton lors d'un survol à la souris (hover) il faut modifier le css de la page, suivez les instructions ci-dessous
:::

## Changer la couleur du texte et l'animation de survol

1 - Ouvrez les paramètres de la page divi

si vous utilisez le Visual Builder, cliquez sur l’icone de roue dentée en pied de page :

si vous utilisez le Builder classique, cliquez sur l’icone de hamburger à droite de la barre supérieure du builder :


2 - Naviguez jusqu'a Avancé/Personnaliser CSS


3 - Ajoutez le code suivant

a#btnPay {color:#FFFF;}
.et_pb_code_0:hover{background-color:#2cae82;}

:::danger
Si le changement de couleur au survol du bouton ne fonctionne pas il s'agit certainement du terme **.et_pb_code_0** à remplacer par celui que vous trouverez en suivant la procédure suivante :

**1-** Retournez dans les **paramètres de l'élément code** qui contient votre bouton ttwigi et allez dans "avancé/personnaliser css/élément principal"

**2-** En survollant le terme **"element princial"** un menu s'affiche, cliquez sur l'icone d'aide **"?"**


**3-** Copiez alors le nom de la classe ciblée et remplacez **".et_pb_code_0"** par celui-ci dans les parmètres de la page

:::

---

**MERCI**
d'utiliser Ttwigi !