MODX Revolution – Content Block

Qu’est-ce que Content blocks ?

Content Blocks est un éditeur de contenu.
Il permet entre autre de créer plusieurs colonnes, plusieurs types d’entrée (Champs texte, Images, Titre…)  pour tout type de contenu.
Mais son atout principal est qu’il permet un contrôle total sur le balisage.

Content blocks est une extension créé par l’entreprise ModMore.
Cette société propose beaucoup d’extension de qualité et je vous invite à jeter un coup d’œil.
Pour accéder au site de ModMore je vous invite à cliquer ici.

1 – ModMore.

Pour commencer et pour pouvoir utiliser l’extension Content Blocks, il va falloir commencer par ce créer un compte sur le site de ModMore.
Pour cela cliquez ici.

Une fois sur la page d’accueil, cliquez sur « Login » si vous possédez déja un compte sinon cliquez sur « Sign in » pour vous en créer un.

Ensuite rendez-vous sur la page de vente de Content Block en cliquant sur « Extras->Content Blocks »
Maintenant vous avez le choix d’acheter l’extension ou d’essayer la version gratuite.

Si vous choisissez d’essayer la version gratuite, il faut savoir que vous ne pouvez l’utiliser que sur des sites de développement ayant une  URL comme « LocalHost » ou « project.dev » etc…
Une liste complète est fournit afin de savoir si votre domaine est éligible à la version gratuite.

Ensuite cliquez sur « API Keys » afin d’obtenir une API et pouvoir définir modmore comme fournisseur sur MODX.
Lorsque que vous avez votre API, rendez vous sur votre site web sous MODX, dans la partie « Extensions->Gestionnaires d’extension ».

Maintenant que nous sommes dans le gestionnaires d’extensions, nous on cliquer sur l’onglet « Fournisseurs » puis sur « Ajouter un fournisseur ».

Une fois que vous avez saisis vos données d’API, on peu voir que nous avons un nouveau fournisseur d’enregistrer.

1 – Content Blocks.

Maintenant que nous avons ajouter ModMore nous allons pouvoir installer Content Blocks.
Pour cela dans le gestionnaire d’extension, nous allons cliquer sur la petite flèche à droite de « Télécharger des extensions » puis sélectionner le fournisseur « ModMore » que vous venez d’ajouter.

Dans la partie « Les plus populaires » on voit l’extension « Content Blocks ».
On clique dessus et on télécharge l’extension.
Une fois télécharger, on retourne dans le gestionnaires de tâches.

Ici on voit que Content Blocks n’a pas encore été installer.
On installe donc Content Blocks.

Une fois installé, on peut voir que dans la partie « Extension », une nouvelle sous catégorie du nom de « Content Blocks » est apparut.

C’est grâce à elle que nous allons pouvoir gérer nos champs et nos agencement.

2 – Les agencements.

Les agencements sont comme des conteneurs, c’est grâce à eux que nous allons pouvoir créer plusieurs colonnes que ca soit au niveau « Front End  » qu’au niveau « Back End ».

Dans l’exemple qui va suivre, nous allons voir comment créer un agencement de 1 colonne, une autre de 2 colonnes et une dernière de 3 colonnes.

Afin de me faciliter un peu la tâche je vais utiliser la bibliothèque « Bootstrap ».
Je vais donc commencer par télécharger cette bibliothèque, ensuite je vais l’uploader sur mon serveur puis lier ma bibliothèque avec ma page.

Pour lier la bootstrap avec ma page, je me rend dans l’onglet « Élément » puis dans modèle et je sélectionne le modèle qui est appliqué à ma page.

Bon revenons en à nos agencement.
Pour cela nous allons aller dans « Extensions -> Content Blocks ».
Pour créer un nouvel agencement on clique sur l’onglet « Agencement » puis sur « Ajouter un agencement ».

Nous allons commencer par nommer cet agencement, dans mon cas il se nomme « Full width ».

Ensuite nous allons cliquer sur l’onglet « Colonnes ».
Là nous allons ajouter une nouvelle colonne qui aura pour référence « Full » et pour largeur 100%.

Une fois que notre colonne est créé, on se rend dans l’onglet « Modèle ».
Cet onglet est celui qui nous intéresse le plus car c’est ici que nous allons gérer le balisage.
Ici nous allons créer une nouvelle div ayant pour classe « container-fluid ».
Cette classe appartenant à bootstrap a pour particularité de prendre toute la place qu’il a à disposition.
A l’intérieur, on écrit notre référence.
La référence est en lien avec avec notre Back end car lorsque nous seront sur notre page et que nous ajouteront cet agencement, un conteneur sera créé.
Ce conteneur représentera notre colonne et tout ce que nous saisiront à l’intérieur ( texte, images…) sera placé par l’intermédiaire de la référence dans notre div.

Une fois ceci fait, on clique sur « Enregistrer et fermer » puis on se rend sur notre page.
Une fois sur notre page, on va cliquer sur « ajouter un agencement » puis on sélectionne l’agencement que nous venons de créer.
Une fois ajouter, on clique cette fois ci sur « ajouter du contenu » et on sélectionne un champ.
Pour ma part un champ texte dans lequel j’ai saisis la chaine « Hello world… ».

Maintenant si l’on ce rend sur le front end de notre page, on peut apercevoir notre chaine.
(J’ai rajouter un « background-color: red;  » à la division que nous avons créé dans notre agencement pour plus de visibilité.)

Si maintenant on veut créer un agencement de 3 colonnes, on repette les actions précédentes, « Extensions -> Content Blocks -> Agencement -> Créer un nouvel agencement ».
On donne un nom à notre agencement.

Dans colonnes on créer 3 colonnes.

Et dans modèle, toujours avec l’aide de bootstrap, on créer nos 3 colonnes.

Une fois enregistrer, on retourne sur notre page et on ajoute de nouveau notre agencement ainsi que du contenu à l’intérieur des 3 colonnes.

Et en front end ça donne :

J’espère que cela vous aura aidé, je vous invite à aller voir mes autres projets en cliquant ici.

Répondre

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s