Plan Pro : Intégration dans votre site web

Documentation

Intégration d'une galerie Prodi Art

Insérer facilement dans votre site web votre galerie Prodi Art.

  • Les clients peuvent acheter directement depuis votre site.
  • L'apparence d'une galerie est personnalisable et s'intègre au mieux dans un site web.
    Exemple d'insertion dans un site Wordpress : https://alissart.com/fr/boutique
  • Sans engagement ni condition de résiliation.
  • L'activation du 1er mois est gratuit.

L'intégration se fait simplement en ajoutant dans votre site du code HTML/Javascript fourni par Prodi Art.

Testez l'intégration dans votre site web

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 :

Intégration pas à pas dans un site Wordpress

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/

1. Créez une nouvelle page

2. Sélectionnez un bloc HTML personnalisé

Cliquez sur le et cherchez "html" pour sélectionner un bloc "HTML personnalisé".

3. Copiez/collé le code de Prodi Art

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.

4. Étendre la galerie sur toute la largeur avec une extension

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".

4.1 Étapes d'installation et d'activation de l'extension "Fullwidth Templates for Any Theme & Page Builder":
1. Cliquez sur Ajouter une nouvelle extension

2. Recherchez et installez l'extension 'Fullwidth Templates for Any Theme & Page Builder'.

3. Activez l'extension 'Fullwidth Templates for Any Theme & Page Builder'
4.2 Utilisation de l'extension dans la page de la galerie :

Pour utiliser cette extension dans la page de la galerie, il faut activer le Template FW Fullwidth :


1. Editez la page de la galerie

2. Activez 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.

5. Galerie non visible

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 :


Ouverture de la div 'content section-inner'

Fermeture de cette div

La galerie est maintenant visible et prend toute la largeur de l'écran grâce à l'extension "Fullwidth Templates for Any Theme & Page Builder" :

6. Galerie dans un bloc au milieu de l'écran

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.


Galerie dans un bloc

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 :


Editer la page de la galerie

Repérer l'Id de cette page, après `post=`. Ici 5

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.


Ouverture de la div avant la code de la galerie

Fermeture de la div

Ajout de code CSS avec 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 :