Insérer facilement dans votre site web votre galerie Prodi Art.
L'intégration se fait simplement en ajoutant dans votre site du code HTML/Javascript fourni par Prodi Art.
Sans avoir à créer de compte sur Prodi Art, testez l'insertion dans votre site avec une galerie de démo.
Créez une page test et insérez dans cette page le code HTML/Javascript ci-dessous :
Pour cet exemple, la version 5 de Wordpress a été utilisée avec son thème par défaut : https://demo-wp.prodiart.com/fr/
Cliquez sur le et cherchez "html" pour sélectionner un bloc "HTML personnalisé".
Insérez dans ce bloc HTML le code fourni ci-dessus. Puis enregistrez cette page. Vous pouvez laisser le titre vide et ainsi afficher la galerie en haut de la page.
Par défaut une nouvelle page créée avec Wordpress ne s'étendra pas sur toute la largeur de l'écran : https://demo-wp.prodiart.com/fr/test-no-fullwidth/
Il faut étendre l'affichage de la page. Cela peut se faire en insérant du CSS dans Wordpres ou en utilisant une extension Wordpress comme "Fullwidth Templates for Any Theme & Page Builder".
Pour utiliser cette extension dans la page de la galerie, il faut activer le Template FW Fullwidth :
La galerie prend maintenant toute la largeur de l'écran : https://demo-wp.prodiart.com/fr/test-fullwidth/.
Avec cette extension activée, le titre n’apparaît plus, vous pouvez par exemple ajouter un bloc au dessus du bloc de la galerie pour afficher un titre.
En ajoutant directement le code HTML de la galerie dans votre page, un thème Wordpress comme Hitchcock peut positionner votre galerie derrière un autre élément. Ici elle se retrouve derrière l'image d'en-tête, et l'on aperçoit que le bas de galerie :
Dans ce cas particulier, vous devez ajouter le code de la galerie entre ces 2 lignes HTML :
La galerie est maintenant visible et prend toute la largeur de l'écran grâce à l'extension "Fullwidth Templates for Any Theme & Page Builder" :
Pour les écrans larges, vous pouvez mettre la galerie dans un bloc situé au milieu de l'écran et ainsi afficher l'arrière plan du site ou sa couleur.
Cette mise en page doit se faire avec du code CSS et peut dépendre du thème Wordpress que vous utilisez. Pour insérer du code CSS dans votre site Wordpress, vous pouvez utiliser l'extension Simple CSS que vous devez installer et activer. Une fois installée, cette extension sera disponible depuis le menu Wordpress Apparence -> Simple CSS.
Avant de créer le CSS, vous devez connaître l'Id de la page de votre galerie. Cet Id sera affiché dans l'URL d'édition de la page :
La galerie doit se trouver à l'intérieur d'un bloc de type <div>.../div>
comprenant une classe comme "section-gallery" permettant de l'identifier, exemple:
Avec cet Id, du code CSS pour cette page peut être ajouté avec l'extension Simple CSS.
Dans cet exemple, l'Id de la page est 61 et le code CSS utilisé pour afficher la galerie dans un bloc est :
Résultat avec le thème par défaut de Wordpress :