Pro Plan: Integration in Ihre Website
Startseite Bist du ein Künstler? Pro Plan: Dokumentation

Pro Plan: Integration in Ihre Website

Dokumentation

Integration einer Prodi Art-Galerie

Fügen Sie Ihre Prodi Art-Galerie ganz einfach in Ihre Website ein.

  • Kunden können direkt auf Ihrer Website einkaufen.
  • Das Erscheinungsbild einer Galerie ist anpassbar und lässt sich am besten in eine Website integrieren.
    Beispiel für das Einfügen in eine Wordpress-Site: https://alissart.com/en/boutique

Die Integration erfolgt einfach durch das Einfügen von HTML/Javascript-Code, der von Prodi Art zur Verfügung gestellt wird, in Ihre Website.

Testen Sie die Integration in Ihre Website

Ohne dass Sie ein Konto bei Prodi Art einrichten müssen, testen Sie die Einfügung in Ihre Website mit einer Demo-Galerie.

Erstellen Sie eine Testseite und fügen Sie in diese Seite den folgenden HTML/Javascript-Code ein :

Schritt-für-Schritt-Integration in eine Wordpress-Site

Für dieses Beispiel wurde die Version 5 von Wordpress mit seinem Standardthema verwendet: https://demo-wp5.prodiart.com/en/

1. Eine neue Seite erstellen

2. Wählen Sie einen benutzerdefinierten HTML-Block aus

Klicken Sie auf das und suchen Sie nach "html", um einen "benutzerdefinierten HTML"-Block auszuwählen.

3. Kopieren/Einfügen des Prodi-Art-Codes

Fügen Sie in diesen HTML-Block den oben angegebenen Code ein. Speichern Sie dann diese Seite. Sie dürfen keinen Titel angeben, um die Galerie oben auf der Seite anzuzeigen.

4. Erweitern der Galerie über die gesamte Breite mit einem plugin

Standardmäßig erstreckt sich eine mit Wordpress erstellte neue Seite nicht über die gesamte Breite des Bildschirms: https://demo-wp5.prodiart.com/en/test-no-fullwidth/

Sie müssen die Seitenanzeige erweitern. Dies kann durch Einfügen von CSS in Wordpres oder durch Verwendung eines Wordpress-Plugins wie z.B. "Fullwidth Templates for Any Theme & Page Builder" erfolgen.

4.1 Schritte zur Installation und Aktivierung des Plugins "Fullwidth Templates for Any Theme & Page Builder":
1. Klicken Sie auf Neues Plugin hinzufügen

2. Suchen und installieren Sie das Plugin 'Fullwidth Templates for Any Theme & Page Builder'.

3. Aktivieren Sie das Plugin 'Fullwidth Templates for Any Theme & Page Builder'
4.2 Verwendung des Plugins auf der Galerie-Seite:

Um dieses Plugin auf der Galerieseite zu verwenden, müssen Sie die FW Fullwidth-Vorlage aktivieren:


1. Bearbeiten der Galerieseite

2. Aktivieren Sie die Vorlage 'FW Fullwidth'

Die Galerie nimmt nun die gesamte Breite des Bildschirms ein: https://demo-wp5.prodiart.com/en/test-fullwidth/.

Wenn dieses Plugin aktiviert ist, erscheint der Titel nicht mehr, Sie können z.B. einen Block oberhalb des Galerieblocks hinzufügen, um einen Titel anzuzeigen.

5. Galerie nicht sichtbar

Indem Sie den HTML-Code der Galerie direkt in Ihre Seite einfügen, kann ein Wordpress-Thema wie Hitchcock Ihre Galerie hinter einem anderen Element positionieren. In diesem Fall befindet sie sich hinter dem Header-Bild, und Sie können sehen, dass das untere Ende der Galerie :

In diesem speziellen Fall müssen Sie den Galerie-Code zwischen diesen 2 HTML-Zeilen einfügen:


Eröffnung der Abteilung 'content section-inner' div

Schließung dieser div

Die Galerie ist jetzt sichtbar und nimmt dank des "Fullwidth Templates for Any Theme & Page Builder"-Plugins die gesamte Breite des Bildschirms ein:

6. Galerie in einem Block in der Mitte des Bildschirms

Bei Breitbildschirmen können Sie die Galerie in einem Block in der Mitte des Bildschirms platzieren und so den Hintergrund der Website oder ihre Farbe anzeigen lassen.


Galerie im Block

Dieses Layout muss mit CSS-Code erstellt werden und kann von dem von Ihnen verwendeten Wordpress-Thema abhängen. Um CSS-Code in Ihre Wordpress-Site einzufügen, können Sie die Erweiterung Simple CSS verwenden, die Sie installieren und aktivieren müssen. Sobald diese Erweiterung installiert ist, ist sie über das Wordpress-Menü Design -> Simple CSS verfügbar.

Bevor Sie das CSS erstellen, müssen Sie die Id Ihrer Galerieseite kennen. Diese Id wird in der URL angezeigt, in der die Seite bearbeitet wird:


Bearbeiten der Galerieseite

Suchen Sie die Id dieser Seite, nach `post=`. Hier 5

Die Galerie muss sich innerhalb eines Blocks vom Typ XYZ befinden, der eine Klasse wie "section-gallery" enthält, um sie z.B. zu identifizieren:

Mit dieser Id kann CSS-Code für diese Seite mit der Erweiterung Simple CSS hinzugefügt werden.


Öffnen des div vor dem Galerie-Code

Schließung der div

Hinzufügen von CSS-Code mit Simple CSS

In diesem Beispiel ist die Id der Seite 61 und der CSS-Code, der zur Anzeige der Galerie in einem Block verwendet wird, ist:

Ergebnis mit dem Standarddesign von Wordpress:

Brauchst du Hilfe?