Modules

Parce ce que Divi fait pleins de choses

IMPORTANT: Les modules ont été ajoutés dans des Section régulière (Section > Regular); les Sections Fullwidth ont tendance à avoir beaucoup moins d’options. Vous trouverez des exemples de module Fullwidth et Specialty au bas du site. Une Sections Regular peut devenir fullwidth en appliquant les paramètres suivant:

Row > Settings

Design > Sizing:

  • Width / 100%
  • Max Width / 100%

Accordion (voir aussi Toggle)

Accordion

Avec une animation Slide > Right

Your friend is quite a mercenary. I wonder if he really cares about anything…or anyone. I care! So…what do you think of her, Han? I’m trying not to, kid! Good… Still, she’s got a lot of spirit. I don’t know, what do you think? Do you think a princess and a guy like me… No!

 

Accordion 2

Accordion 3

Accordion avec une longue image

Pour ajouter une image:
• Accordion Settings > Content
• Au lieu du texte, cliquer sur le bouton ADD MEDIA et ajouter votre image. Dans la fenêtre Medias, régler ATTACHMENT DISPLAY SETTINGS  à Fullsize. Sinon l’image sera petite par défaut.

Voilà! 🙂

.

 

Pssst… ça ressemble beaucoup au module Toggle, qui lui est fermé à moins d’un clic.

Bar Counter

  • Bar Counter 70% 70%

Blurb

Blurb

Survolez la photo avec votre souris!

Blurb

Blurb

Survolez la photo avec votre souris!

Button

Module bouton dans une Rangée (row) créé avec la police Elegant Font Icon
Le glyphe de la flèche vers le bas est: 3
Le lien https://dmulti.mtanguay.com/modules/#calltoaction est appliqué au bouton et le ID calltoaction a été appliqué à la section suivante.

3

Call to action

Call to action

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Circle Counter

%

Circle Counter

<Code>

Google map embedded

Youtube video embedded

IMPORTANT: Vimeo a des options d’intégration (Share > Embed > + Show options) qui permettent un autoplay et un vidéo en boucle.

L’audioplayer du browser

1. Téléverser le mp3 dans la section Medias du Dashboard.

2. Clic sur le preview du mp3 pour copier le URL du fichier dans le champ Copy Link.

3. Sur la page du site, utiliser le module <Code> et ajouter:

<audio controls autoplay>
<source src="https://mettre le url du fichier.mp3" type="audio/mpeg">
</audio>

* Pour que ça ne joue pas automatiquement, enlever autoplay.
** Pour ne pas voir les contrôles du Player, enlever le mot controls du code ci-haut. Le son jouera automatiquement en entrant sur la page.
*** Le look sera légèrement différent dépendant du browser.

Un son en hover

1. Téléverser le fichier du son (.mp3 pour Chrome et .ogg pour Safari et Firefox) et le fichier image (le bouton) dans la section Media du Dashboard.

2. Sur la page du site, utiliser le module <Code> et ajouter:

<img src="https://www.LIEN-VERS-TON-IMAGE.jpg" value="PLAY"onmouseover="play()">
<audio id="audio"src="https://www.LIEN-VERS-TON-SON.mp3" src="https://www.LIEN-VERS-TON-SON.ogg"
></audio>

 

Liens vers ton image/son: Dans Médias, clic sur le preview du fichier pour copier le URL de l’emplacement du fichier dans Copy Link.

3. Java script à mettre dans: Theme Options > Integration > section <body>

<script>
function play(){
var audio = document.getElementById("audio");
onmouseover =audio.play();
}
</script>

* Le id “audio” peut être utilisé seulement une fois. Pour plusieurs hovers, changer simplement le id en bleu pour chaque hover.

Un grand merci à Jean-Philippe Renaud pour ce code.

Animate embedded

  • Télécharger le plugin WP Edge Animate OAM Renderer pour pouvoir téléverser un fichier .oam dans WordPress.
  • Installer le fichier .zip seulement (et non le fichier décompressé) dans Dashboard / Plugin / Add New / Upload plugin.
  • Activer le plugin.
  • Dans Media, téléverser un fichier .oam
  • Clic sur le fichier téléversé et copier le code du champ Embed OAM 
    Exemple de code: 
  • Dans Divi, créer un module <code> et coller le code dans le champ Contenu
    L’animation s’adaptera à la taille du module

SoundCloud embedded

Changement d’image au survol
Instructions

Contact Form

11 + 5 =

Countdown Timer

Noël

Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

J’ai changé les étiquettes en français en collant un code javascript dans Theme Options > Integration > Add code to the < head > of your blog.
Suivez ces instructions pour faire la même chose!

Divider

Email Optin

Image

Les 4 images doivent avoir exactement la même taille.
On peut aussi seulement placer des images en background dans Row (mais elles n’apparaîtront pas sur mobile s’il n’y pas de module dans chaque colonne.

Section Settings  > Content > Background Image > Parallax CSS    +    Section Settings  > Design > Spacing > Padding top et bottom 10%

<<< Pour le hover avec l’icône, il faut mettre un lien pour avoir l’option Overlay dans Design.

L’image a été sauvegardé au format carré avant d’être importée. >>>

<<< Image avec ombre: Design > Box Shadow

Hover flou à clair dans Design > Filters >>>

<<< Hover avec une transformation d’échelle dans Design > Transform > Scale. La transition a été ralenti dans Advanced > Transition > Transition Duration

Hover d’une image avec une autre image

Les 2 images doivent avoir la même taille
  • L’image de base a été ajoutée dans Row Settings > Content > Column 1 Background (Column 1 Background Image SizeActual Size et Image Position à Top Center).
  • L’image en hover a été ajoutée dans un module Image dans la Column 1 et dans Module Image Settings > Design > Filters,  l’opacité a été réduite à 0% par défaut et à 100% en hover. L’image de base et le module doivent être alignées de la même façon. L’image a été alignée au centre (Design > Alignement).
  • La vitesse et effet de transitions peuvent être modifiés dans Module Image Settings > Advanced > Transitions

<<< Hover avec une teinte:

1. L’image a été placée en background de ROW Settings / Content / Column 1 Background

2. La couleur est placé dans le Module Settings / Background color. L’opacité est à 0% par défaut et 50% en hover.

Login

Number Counter

%

Number Counter

Person

Person

Person

Position

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Portfolio

Fait à partir de Dashboard > Projects > Add new

L’image est ajoutée dans Featured Image pour chaque Project.

Pricing Table

Slider

Slider

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Slider 2

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Tab

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Testimonial

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name Goes Here

Text

text text text text text text text text text text text text text text text

padding

sizing 50% (bureau seulement)

background

Module text
+
Background image

Ce texte est centré verticalement grâce à un CSS ajouté dans:

Row Settings > Custom CSS >
Column 1 Main Element

display: flex;
flex-direction: column;
justify-content: center; 


Autres Settings:

1. Row Settings > Design > Custom Gutter Width: 1
2. Text Module Setting > Design >
• Heading Text > Heading Text Alignement Center
• Spacing > Padding Left et Right: 5%

Row 2 colonnes

Colomn 1 Background / + Add Background Color

Colomn 2 Background / + Add Background Image

Sizing:

  • Use Custom Gutter Width / YES // Gutter Width: 1
  • Equalize Column Height / YES
  • Width: 100%
  • Max Width: 100%
  • Padding top: 0        Padding  bottom: 0

Visibility: desktop

Module Text dans la Colonne 1

Sizing: padding de chaque côté (crée un espace autour).

Border > Border style: Right      Border width: 9px

Row 2 colonnes – tablet

Background / + Add Background image (cover)

Colomn 1 Background / + Add Background Color

Sizing:

  • Use Custom Gutter Width / YES // Gutter Width: 1
  • Equalize Column Height / YES
  • Width: 100%
  • Max Width: 100%
  • Padding top: 0        Padding  bottom: 0

Visibility: tablet

Module Text dans Column 1

Sizing:

  • margin: -100px à droite (pour créer + de largeur)
  • padding de chaque côté (crée un espace autour).

Row 2 colonnes – phone

Colomn 1 Background / + Add Background Color

Sizing:

  • Use Custom Gutter Width / YES // Gutter Width: 1
  • Equalize Column Height / NO
  • Width: 100%
  • Max Width: 100%
  • Padding top: 0        Padding  bottom: 0

Visibility: phone

Module Text dans Column 1

Sizing: padding de chaque côté (crée un espace autour).

Module Image dans Column 2

Image > Add Image

Row 2 colonnes

Background / + Add Background Image

  • Use Parallax Effet / YES

Sizing:

  • Use Custom Gutter Width / YES // Gutter Width: 1
  • Equalize Column Height / YES
  • Width: 100%
  • Max Width: 100

Spacing (reset sauf):

  • Column 1 Custom Padding:  Left: 30px   Right: 80px

Module Text dans la Colonne 1

Spacing: padding de chaque côté (espace autour).

Border > Border style: Right      Border width: 9px

Box Shadow

Animation > Slide right

Clic ici mon ami

Text hover sur une image

 

1. Row Settings

Background Column 1

  • Add Background Image

2. Module Text Setting

Background Color

  • Default: rien – Hover: bleu avec  transparence

Heading Text

  • Default: Heading text transparent – Hover: opaque

open close open close open close

Row: make this row fullwidth / custom gutter width 1

Module Text: Shadow + Animation / Loop

Ajouter un scroll

On peut ajouter un scroll à un module de texte en 2 étapes:

  1. Advanced settings > Visibility > Vertical Overflow > Sélectionner Scroll

  2. Réduire en hauteur le module texte afin de pouvoir obtenir la fonction de scroll dans l’onglet Design > Sizing > Max Height puis mettre la hauteur de votre choix. La lecture doit demeurer agréable malgré le scroll donc ne pas mettre une hauteur trop petite.

 

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Cette image a été ajoutée grâce au bouton ADD MEDIA au-dessus de cette boîte texte dans l’onglet Content. Dans la fenêtre Media choisir la bonne taille dans la section Attachment Display Setting (mettre Fullsize pour la taille originale).

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Faire 2 colonnes

Le titre et sous titre sont dans un module Text séparé.

Dans ce module text, un CSS a été ajouté dans Advanced > Custom CSS > Main element > column-count: 2;

Faire des colonnes peut résulter en une mauvaise expérience web pour votre utilisateur. Le texte à lire ne devrait pas être trop long afin de ne pas avoir à défiler à nouveau dans le haut du site pour lire la 2e colonne.

You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here.

Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here.

Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

 

Toggle

Toggle

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Toggle avec une image à l'intérieur

L’icône est transparent pour le cacher.

Pour ajouter une image:
• Toggle Settings > Content
• Au lieu du texte, cliquer sur le bouton ADD MEDIA et ajouter votre image. Dans la fenêtre Medias, régler ATTACHMENT DISPLAY SETTINGS  à Fullsize. Sinon l’image sera petite par défaut.

Voilà! 🙂

.

 

Cliquez ici pour plus d'info

Voici plus d’info! Il s’agit d’un module image et d’un module toggle en dessous. L’icône est transparent pour le cacher. 

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Video

Video Slider

Section Settings > Design > Divider

(Ne fonctionne pas sur Row ni Module)

SECTION FULLWIDTH

Fullwidth Menu

Pour fixer le menu, c’est par ici

Fullwidth Header

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Click Here

Fullwidth Image

Fullwidth Image

Background image en parallax CSS

SECTION SPECIALITY