Suivant
Précédent

1- Pour créer facilement des pages web personnalisées, vous devez choisir l’éditeur du « back-office », c’est-à-dire que vous modifiez le site depuis votre tableau de bord WordPress.

2- Peu importe le choix de votre mise en page, la présentation des éléments est similaire sur toutes ces dernières. Vous pouvez ajouter un nouvel élément en cliquant sur « + » tout en haut sur la meta box « Visual Editor», ou ajouter un modèle en cliquant sur l’icône « modèle ».

Sur chaque ligne, vous pouvez (de gauche à droite) :

a. Déplacer la ligne
b. Gérer les colonnes de la ligne
c. Ajouter une nouvelle colonne

3- D’autres options sont disponibles à droite de la boite. Ces options vous permettent (de gauche à droite) de :

a. réduire la ligne
b. modifier une rangée
c. dupliquer une rangée
d. supprimer une rangée

4- Au milieu de chaque colonne, vous pouvez ajouter un élément avant, modifier une colonne ou la supprimer.

Comment gérer les colonnes

Sur l’onglet de gestion des colonnes, vous pouvez choisir le nombre de colonnes que vous souhaitez ajouter à la ligne. Pour comprendre les différents modèles de colonnes, sachez que chaque fraction correspond à la largeur qu’occupera la colonne. Autant un modèle possède des fractions, autant de fois la page possèdera des colonnes.

11 différents modèles de colonnes sont disponibles, mais vous pouvez en créer autant que vous le souhaitez en cliquant sur le lien « personnalisé » situé juste en dessous de la liste de colonnes.

Par exemple, pour afficher une section de la page avec 2 colonnes aux largeurs égales, vous devez choisir (ou ajouter) « 1/2 + 1/2 ».

Les colonnes seront affichées sur votre blog et leurs largeurs seront réparties proportionnellement aux dimensions du thème. Une colonne peut contenir autant d’éléments que possible, vous n’avez donc aucune limite imposée à ce niveau.

5- Les différents éléments peuvent être déplacés vers n’importe quelles colonnes.

6- En survolant chaque élément, vous pourrez accéder à ses options notamment le bouton qui permet de :

a. déplacer l’élément
b. modifier l’élément
c. dupliquer l’élément

7- Vous avez la possibilité de personnaliser chaque colonne avec les éléments proposés par « Visual Composer ». Pour ajouter un élément, cliquez sur bouton « + » sur une colonne spécifique ou sur le bouton « + » du menu principal du plugin.

8- Lorsqu’une colonne est vide (ne contiens aucun contenu), elle possède un bouton « + » à l’intérieur. Pour ajouter une vidéo par exemple, cliquez sur ce bouton et choisissez l’élément vidéo.

9- En cliquant dessus, une nouvelle fenêtre apparaîtra. Sur cette fenêtre, vous devez fournir le titre, le lien vers la vidéo et une classe additionnelle (qui n’est pas obligatoire). Lorsque vous avez terminé de renseigner les différentes informations sur votre vidéo, n’oubliez pas d’enregistrer vos modifications.

10- Votre vidéo sera disponible sur l’éditeur du back-office. Enregistrez une fois de plus vos modifications. Vous pouvez à présent la consulter en cliquant simplement sur « aperçu ».

11- Le processus d’ajout d’un élément est le même pour tous les autres, à quelques exceptions près. Les informations à remplir pourront varier en fonction des éléments.

En sélectionnant l’élément texte par exemple, vous retrouverez un éditeur visuel classique (celui disponible lors de la rédaction des articles ou des pages), mais également une option qui vous permet d’ajouter une animation durant l’affichage de l’élément. Ce dernier pourra donc apparaître en fondu d’une position à une autre, selon vos réglages.

12- Le plus intéressant avec ce plugin, est que vous pourrez créer des sidebars si votre thème n’en propose pas par exemple. Pour ce faire, cliquez sur le bouton d’ajout (« + »), et choisissez l’élément « WP Commentaires récent », « Facebook like » et enfin « Wp Catégories ».

Maintenant créez ce modèle de colonne personnalisée « 1/3 + 2/3 » ou un tout autre et ajoutez l’élément sidebar sur la colonne de gauche ou sur celle de droite. Peu importe, car tout dépend de la largeur que vous souhaitez donner à votre barre latérale créée sous cette extension de mise en page qu’en Visual Composer.

13- Vous remarquerez une nouvelle colonne vide sur la droite, ajoute un nouvel élément de votre choix (je vous recommande d’ajouter un simple texte). Maintenant, sauvegardez la page et accédez à l’aperçu pour voir le résultat de cet exercice.


Les codes HTML principaux (à mettre seulement en utilisant l’onglet Texte)

Gras : <strong> </stong>
Saut de ligne : <br>
Liste non-numéroté (encadre la balise <li>) : <ul> </ul>
Paragraphe : <p> </p>
Espace insécable : &nbsp;

Pas de commentaires

Laisser un commentaire

Votre adresse courriel ne sera pas publié. Le champs "Site web" est optionnel

MESSAGEMESSAGE
Nom et prénomNom et prénom
CourrielCourriel
Site webSite web