Publier un article avec Visual Composer
Objectif : Utiliser Visual Composer pour poster des articles avec le Thème Bridge à travers 3 exemples : Vidéo, Galerie, Image seule.

1er Exemple : Créer un article Visual Composer avec une Vidéo YouTube
Dans ton tableau de Bord, clique dans la rubrique Articles => Ajouter

Ajoute un Titre :)


1er Exemple : Créer un article Visual Composer avec une Vidéo YouTube
Clique sur le bouton bleu
En cliquant sur ÉDITEUR ADMIN tu ouvres VISUAL COMPOSER


1er Exemple : Créer un article Visual Composer avec une Vidéo YouTube
Quand tu as cliqué, le bouton change d'état et devient
VISUAL COMPOSER s'est ouvert !
clique sur le bouton Ajouter Un Élément






1er Exemple : Créer un article Visual Composer avec une Vidéo YouTube
Une fenêtre s'ouvre avec pleins de petit boutons colorés
Clique sur le 2ème bouton qui est Rangée


1er Exemple : Créer un article Visual Composer avec une Vidéo YouTube
Une rangée pricipale a été créée, c'est là ou tu vas rédiger ton article... Clique sur la petite croix grise au milieu pour créer un bloc de texte pour écrire.




1er Exemple : Créer un article Visual Composer avec une Vidéo YouTube


À nouveau une fenêtre s'ouvre avec pleins de petit boutons colorés
Clique sur le 3ème bouton qui est Bloc de texte
Tu vas pouvoir rédiger dès que tu as créé ton bloc de texte
1er Exemple : Créer un article Visual Composer avec une Vidéo YouTube
Le Bloc de texte s'ouvre directement
Tu vas pouvoir rédiger à l'intérieur du bloc dès maintenant ou cliquer sur le bouton Sauvegarder les modifications pour y revenir plus tard


1er Exemple : Créer un article Visual Composer avec une Vidéo YouTube
Si tu as sauvegardé le bloc et que tu souhaites revenir dessus plus tard pour rédiger ou faire une modification, fais glisser ton curseur sur la zone de texte et un petit rectangle vert apparaît , , clique sur le petit stylo pour ouvrir le bloc!





À NOTER
1er Exemple : Créer un article Visual Composer avec une Vidéo YouTube
le mode Visuel peut se comparer à Word (=traitement de texte)
le mode Texte est la page HTML
Dans cette screenshot, on va voir comment on met le chapeau d'un article en Titre 2 soit <h2>...</h2> en mode Texte
Dans cette screenshot, on va voir comment on met le chapeau d'un article en <h2>...</h2> soit Titre 2 en mode Visuel


1er Exemple : Créer un article Visual Composer avec une Vidéo YouTube
Tu viens de rédiger ton article... place à l'ajout de la vidéo
En ayant installé VISUAL COMPOSER
Tu vas pouvoir intégrer FACILEMENT une vidéo YouTube

Dans le bloc à droite, dans Format, coche Video
1er Exemple : Créer un article Visual Composer avec une Vidéo YouTube
Un bloc relatif au Format Vidéo va s'ouvrir en haut de ta zone de texte

Tu vas devoir mettre l'ID de la video YouTube dans la rubrique Video ID
l'ID YouTube est le morceau de code après le / de l'URL https://www.youtube.com/watch?v=G7m-5loW0dc
1er Exemple : Créer un article Visual Composer avec une Vidéo YouTube
Pour récupérer l'ID sur YouTube
connecte-toi à YouTube et cherche la vidéo que tu souhaites partager

Copie uniquement le code soit dans l'URL, soit en cliquant sur partager
1er Exemple : Créer un article Visual Composer avec une Vidéo YouTube
Colle l'ID récupéré dans la partie Video ID

La vidéo est connectée à ton article
1er Exemple : Créer un article Visual Composer avec une Vidéo YouTube
Ajoute un Extrait d'article
C'est obligatoire avec le thème Bridge !

1er Exemple : Créer un article Visual Composer avec une Vidéo YouTube
Ajoute la Right Sidebar de ton article
C'est aussi obligatoire avec le thème Bridge !
Scroll Down pour atterrir sur cette partie :
Qode Sidebar

1er Exemple : Créer un article Visual Composer avec une Vidéo YouTube
Quand tu as fini cette action
Clique sur le bouton gris Enregistrer le brouillon ou sur le bouton bleu Publier pour mettre en ligne ton article



1er Exemple : Créer un article Visual Composer avec une Vidéo YouTube
À présent dans ta barre de Menu TOUT EN HAUT,
Clique sur Voir l'article

1er Exemple : Créer un article Visual Composer avec une Vidéo YouTube
Tu peux à présent voir la vidéo apparaître à la une dans ton article

Si tu as cliqué sur Publier tu la verras sur ton blog...

2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
Dans Articles, clique sur Ajouter, saisis un Titre et crée ton premier bloc avec VISUAL COMPOSER et ajouter un extrait (si tu te souviens plus de tout ça reviens sur le 1er exemple)

2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
Tu viens de paramétrer le Format Galerie.
Crée MAINTENANT la Galerie d'images
Ajoute une nouvelle Rangée en cliquant sur le


2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
Sélectionne Rangée


2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
Une fois que tu as créé ta Rangée. Clique sur


et sélectionne Galerie d'images


2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
Une fois que tu as créé ta Rangée. Clique sur


et sélectionne bloc de texte


2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
Le bloc de texte s'ouvre
Efface le texte par défaut
puis clique sur le bouton gris Ajouter un Média




2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
Tu vas atterrir dans ta bibliothèque d'images
Clique sur le lien Créer une Galerie

2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
Tu vas atterrir dans ta bibliothèque d'images pour récupérer le nombre d'images que tu souhaites
Clique SIMPLEMENT sur les images que tu souhaites ajouter. Valide en cliquant sur le bouton bleu en bas à droite Créer une nouvelle galerie
Bon à savoir : Tu peux visualiser ta sélection en bas à gauche





2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
Tu peux aussi télécharger une ou des images à partir de ton bureau en cliquant en haut à gauche sur Envoyer des fichiers


Clique sur le bouton Gris Choisir des fichiers

Glisse et dépose directement depuis ton bureau





2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
L'image se télécharge automatiquement dans ta bibliothèque

Maintenant tu le sais que tu peux le faire !
2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)

Donc une fois que tu as validé en cliquant
sur Créer une nouvelle Galerie
Tu arrives sur Modifier la Galerie

- Tu peux supprimer une image
- Inverser l'ordre ou drag & drop une image
- Réglages de la galerie (que nous allons détailler)


2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
Dans la zone Réglages de la Galerie, tu peux :


Choisir le nombre de colonnes.
Si tu as 4 images choisis 4,
Si tu as 6 images choisis 6...






Ordre aléatoire : à cocher ou pas
Taille à choisir : Miniature, Moyenne, Grande, Taille Originale
Dès que tout est OK valide en cliquant sur

2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
Tes images ont été ajoutées dans le bloc Texte

Valide en cliquant sur le bouton bleu

2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
Ta Galerie d'images est là est se présente sous forme
de shortcodes [gallery ids="xxx,xxx,xxx,xxx"]
(x=numéro des identifiants d'image)

2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
Par souci d'organisation
fais un glisser/déposer au dessus du bloc de texte

Pour le faire maintiens appuyer la multicroix

2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
Quand c'est fait le bloc de ta galerie d'image se trouve au-dessus

Maintenant c'est OK,
place à la routine du thème Bridge
2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
Quand c'est fait je t'invite à bien checker si tu as
mis un extrait qui est OBLIGATOIRE sur le Thème Bridge

2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
Scroll Down pour atterrir sur cette partie :
Qode Sidebar
Ajoute la Right Sidebar de ton article
C'est aussi obligatoire avec le thème Bridge !

2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
Clique sur le bouton gris Enregistrer le brouillon ou sur le bouton bleu Publier pour mettre en ligne ton article
Quand tu as fini cette action



2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
À présent dans ta barre de Menu TOUT EN HAUT,
Clique sur Voir l'article

2ème Exemple : Créer un article Visual Composer avec une Galerie d'image (=slider d'image)
Tu peux à présent voir ta galerie d'images apparaître à la une dans ton article

Si tu as cliqué sur Publier tu la verras sur ton blog...

3ème Exemple : Créer un article Visual Composer Image à la une
Dans Articles, clique sur Ajouter, saisis un Titre et crée ton premier bloc avec VISUAL COMPOSER et ajouter un extrait (si tu te souviens plus de tout ça reviens sur le 1er exemple)
Checke les 2 précédents exemples
pour t'aider
3ème Exemple : Créer un article Visual Composer Image à la une
Dans le bloc Format laisse la case
Par Défaut cochée

3ème Exemple : Créer un article Visual Composer Image à la une
Scroll Down pour aller sur le bloc
Image à la une (juste en dessous d'étiquettes)









Arrivé sur une Image à la Une, clique sur le lien bleu Mettre une image à la Une
Sélectionne ton image, valide en cliquant sur le bouton bleu
Ton image apparaît dans ton bloc Image à la Une


3ème Exemple : Créer un article Visual Composer Image à la une
Ensuite ajoute un Extrait,
va chercher ta Right SideBar,
Enfin clique sur Enregistrer le Brouillon
ou
Publier
Check les 2 exemples précédents si tu as
un doute sur cette manipulation
Publier un article avec Visual Composer
By BlueWebOcean
Publier un article avec Visual Composer
Comprendre comment jouer avec les fonctions de Visual Composer pour publier son article
- 150