ACTION CULTURELLE

Ceci est un contenu de démonstration, cliquez sur le bouton  (Nouvelle page) pour l'effacer.

Sommaire

• Structurez votre page avec des grilles (responsive design)
• Ajoutez un diaporama
• Créez un trombinoscope
• Ajoutez une vidéo
• Affichez un PDF directement dans la page (iFrame)
• Affichez une vidéo Youtube directement dans la page (iFrame)
• Intégrez un formulaire en ligne (iFrame)
• Autres astuces

1 - Structurez votre page avec des grilles (responsive design)

Créez une grille en cliquant sur

Les grilles vous permettent de diviser votre page en plusieurs colonnes de taille différente et/ou plusieurs lignes en suivant des modèles précis. Elles permettent de structurer la page plus facilement.

Les grilles ont l'avantage de s'adapter parfaitement sur toutes les tailles d'écran (ordinateurs, tablettes, mobiles), en adaptant la taille de chaque bloc en fonction de la largeur de l'écran (responsive).

Chaque bloc peut contenir tout type de contenu (liens, boutons, images, etc.) Par exemple, vous pouvez ajouter une image légendée comme présentée ci-dessous :

Pour modifier le modèle ou le nombre de lignes de la grille, double-cliquez dans la zone, entre deux blocs.

Dans cet exemple, nous avons créé une grille composée de 3 colonnes de tailles différentes (1 centrale et 2 excentrées) sur une seule ligne, créant ainsi 3 blocs verticaux.

Au sein du bloc central, une autre grille a été créée afin d'y mettre nos images.

Chaque bloc qui constitue la grille est indépendant, et vous permet de structurer votre page horizontalement et verticalement.

2 - Ajoutez un diaporama

Vous pouvez ajouter un diaporama, en cliquant sur le bouton 'Diaporama'. Ajoutez des images et des vidéos, puis personnalisez l'affichage dans l'onglet 'Réglages'.

 
3 - Créez un trombinoscope

Voici un exemple de trombinoscope que vous pouvez créer en utilisant le système de "Grilles" 

Lorem IPSUM 
maire@mairie.com
0660504030

Lorem IPSUM 
maire@mairie.com
0660504030

 Lorem IPSUM 
maire@mairie.com
0660504030

Lorem IPSUM 
Conseillère municipale
maire@mairie.com
0660504030 

Lorem IPSUM 
Conseillère municipale
maire@mairie.com
0660504030

Lorem IPSUM 
maire@mairie.com
0660504030

Lorem IPSUM 
Conseillère
maire@mairie.com
0660504030

Lorem IPSUM 
Conseillère
maire@mairie.com
0660504030

4 - Ajoutez une vidéo

 Pour afficher une vidéo directement dans la page (comme ci-dessus), procédez comme suit :

1. Cliquez sur le bouton 'Vidéo'.
2. Si votre fichier vidéo n'est pas encore sur le serveur :
   • Allez dans l'onglet "Téléverser une vidéo"
   • Cliquez sur le bouton "Choisir un fichier"
   • Sélectionnez le fichier vidéo situé sur votre ordinateur (.mp4, .avi, ...)
   • Enfin, cliquez sur "Envoyer sur le serveur" pour envoyer le fichier sur le serveur.
3. Si votre fichier vidéo est déjà sur le serveur :
   • Cliquez sur le bouton "Parcourir le serveur"
   • Sélectionnez le fichier vidéo à ajouter puis cliquez sur "Sélectionner"
4. Réglez les différents paramètres (lecture automatique, affichage des boutons de contrôles, largeur ...)
5. Cliquez sur "OK" pour valider.
6. Prévisualisez le contenu que vous venez d'ajouter en cliquant sur le bouton de prévisualisation 

5 - Affichez un PDF directement dans la page (iFrame)

Pour afficher un fichier PDF directement dans la page (comme ci-dessus), procédez comme suit :

1. Cliquez sur le bouton 'Cadre de contenu incorporé' (icône en forme de globe).
2. Si votre fichier PDF n'est pas encore sur le serveur :
   • Allez dans l'onglet "Téléverser"
   • Cliquez sur le bouton "Choisir un fichier"
   • Sélectionnez le fichier PDF situé sur votre ordinateur
   • Enfin, cliquez sur "Envoyer sur le serveur"
3. Si votre PDF est déjà sur le serveur :
   • Cliquez sur le bouton "Parcourir le serveur"
   • Sélectionnez le fichier PDF à ajouter puis cliquez sur "Sélectionner"
4. Réglez la hauteur et la largeur du cadre (facultatif)
5. Cliquez sur "OK" pour valider.
6. Prévisualisez le contenu que vous venez d'ajouter en cliquant sur le bouton de prévisualisation 

6 - Affichez une vidéo Youtube directement dans la page (iFrame)

Pour incorporer une vidéo YouTube dans une iFrame (comme ci-dessus), cliquez sur le bouton 'Cadre de contenu incorporé' (icône en forme de globe) puis renseignez l’URL d'intégration.
Pour récupérer l’URL d'intégration d'une vidéo YouTube, il convient de suivre ces étapes :

1. Allez sur la page de la vidéo, dans notre exemple : https://youtu.be/hb9XI8T4Mjo
2. Cliquez sur 'Partager', une fenêtre popup s'ouvre.
3. Sélectionnez l'option 'Intégrer'
4. Dans la zone de droite, récupérez l’URL présente dans le code source. L’URL commence généralement par 'https://www.youtube.com/embed/..... '
5. Et voilà, vous avez récupéré l’URL de la vidéo que vous pouvez insérer dans votre iFrame.

Une fois la vidéo configurée, cliquez sur le bouton de prévisualisation  pour voir la vidéo s'afficher.

7 - Intégrez un formulaire en ligne (iFrame)

Pour intégrer un formulaire en ligne (ex: Google Form) dans une iFrame (comme ci-dessus), cliquez sur le bouton 'Cadre de contenu incorporé' (icône en forme de globe) puis renseignez l’URL du formulaire dans le champ intitulé "URL du contenu à afficher dans le cadre".
Une fois le formulaire intégré, cliquez sur le bouton de prévisualisation  pour le voir s'afficher dans la page.

8 - Autres astuces

• Vous pouvez prévisualiser la page en cliquant sur le bouton 
• Pour créer un bouton, cliquez sur l’icône :  
• Pour créer un lien cliquable, cliquez sur l’icône : 
• Pour déclarer une ancre sur la page, cliquez sur le bouton 'Ancre' (petit drapeau). Vous pourrez ensuite faire pointer des liens vers cette ancre.
• Vous pouvez glisser-déposer un fichier (pdf, excel, ...), celui-ci se transformera automatiquement en lien.  Double-cliquez dessus pour le modifier.
• Pour plus de confort, vous pouvez afficher cet éditeur en plein écran en cliquant sur l’icône : 
• Pour modifier un élément, double-cliquez dessus.
• La touche Entrée crée un nouveau paragraphe, alors que Maj + Entrée crée un saut de ligne. 
• Vous pouvez ajouter des 'émoticônes' pour rendre votre page plus jolie 😎

Nous espérons que tout se passera bien, si ce n'est pas le cas, n'hésitez pas à nous contacter.
Bonne journée sur IntraMuros.