PageDesign: Seiten-Layout

plentymarkets » CMS » Webdesign » Layout » PageDesign

 

Inhalt dieser Seite

Diese folgenden Kapitel beschreiben die Seitenansichten in plentymarkets, also den Seitenaufbau anhand der im Bereich PageDesign verfügbaren Templates. Sie erhalten einige Grundinformationen zur Verwendung der Templates sowie zur HTML-Struktur. Weitere Details werden in Anwendungsbeispielen ausführlicher behandelt.

Grundstrukturen im plentymarkets-CMS

Wir weisen darauf hin, dass Sie zur Bearbeitung der Templates im plentymarkets-CMS über gewisse Grundkenntnisse im Bereich HTML und CSS verfügen sollten. Darüber hinaus empfehlen wir Ihnen, die grundlegenden Erläuterungen des Kapitels Webdesign sorgfältig zu lesen. Beachten Sie besonders das Kapitel Grundlagen der Syntax, bevor Sie Anpassungen an Templates vornehmen. Die Handbuchseite Seitanaufbau gibt Ihnen einen Überblick zur Templatestruktur in plentymarkets.

Allgemeines zum Seiten-Layout

Die Templates des Bereichs CMS » Webdesign » Layout » PageDesign steuern den Seitenaufbau und die Gestaltung der verschiedenen Bereiche des Webshops. Unter Page-Design verstehen wir den Design-Rahmen Ihres Webshops, der alle Inhalte einschließt. Dargestellt werden alle Inhalte, wie Artikel, Kategorien, Bilder, Kategorieseiten (Typ: Content) oder der Bestellvorgang in jeweils eigenen Templates. Dazu sind in den Templates zur Darstellung der verschiedenen Bereiche jeweils Standard-Inhalte hinterlegt, die Sie jedoch nach Belieben ändern oder z.B. durch einen Dienstleister anpassen lassen können.

Sehr häufig erscheint das Layout in der folgenden Form: Der mittlere Bereich ist dynamisch, d.h. die Inhalte wechseln abhängig davon, welche Links bzw. Objekte angeklickt werden. Neben der Ansicht der Artikel erscheinen dort die Inhalte der Kategorieseiten, also die verschiedenen Informationsseiten, zum Beispiel AGB, Impressum oder Kontakt. Bereiche wie Artikelsuche oder Kategorien sind ebenfalls dynamische Inhalte, denn bei Klick auf einen Button erscheinen z.B. bei den Kategorien die verfügbaren Unterpunkte.

Die meisten der seitlich angeordneten Bereiche sind statische Inhalte, die weder ihre Form noch ihre Größe ändern und immer an derselben Stelle angezeigt werden. Sie dienen der Orientierung während des Einkaufs und ermöglichen es Besuchern, jederzeit zu jedem gewünschten Bereich des Webshops zu gelangen.

Seiten-Layout: Templates

Für die Gestaltung der Seiten-Designs sind die in den folgenden Unterkapiteln beschriebenen Templates verfügbar.

PageDesignContent

Dieses Seiten-Layout kommt bei der Darstellung von Kategorien und Artikeln zur Anwendung. Sie können pro Kategorie auch ein abweichendes Seiten-Layout wählen. Dies konfigurieren Sie in der jeweiligen Kategorie im Tab Einstellungen. Genauso ist es möglich, dieses Template auch für die Bereiche Checkout und MyAccount zu verwenden.

PageDesignCheckout

Das Template wird automatisch geladen, wenn der Bereich Kaufabwicklung aufgerufen wird. Wir empfehlen Ihnen, das Template so zu gestalten, dass der Hauptdarstellungsbereich sich über die gesamte Breite des Webshops erstreckt. So werden keine weiteren Elemente angezeigt, wie dies z.B. bei einem mehrspaltigen Aufbau im PageDesign der Fall ist. Dadurch wird die Aufmerksamkeit des Besuchers ganz auf diesen Bereich konzentriert. Dies ist in der Kaufabwicklung besonders wichtig, um Kaufabbrüche zu verhindern.

PageDesignMyAccount

Das Template wird automatisch geladen, wenn der Bereich Mein Konto aufgerufen wird. Wir empfehlen Ihnen, das Template so zu gestalten, dass sich der Hauptdarstellungsbereich über die gesamte Breite des Webshops erstreckt. So werden keine weiteren Elemente angezeigt, wie dies z.B. bei einem mehrspaltigen Aufbau im PageDesign der Fall ist. Dadurch wird die Aufmerksamkeit des Besuchers ganz auf diesen Bereich konzentriert.

PageDesignCustom

Dieses Seiten-Layout bietet drei Templates, die alternativ zur Darstellung von Kategorien und Artikeln verwendet werden kann. Die Templates können alternativ zum PageDesignContent in den Kategorieeinstellungen als Layout hinterlegt werden.

PageDesignBlog

Das Template wird automatisch geladen, wenn der Bereich Blog aufgerufen wird.

PageDesignForum

Das Template wird automatisch geladen, wenn der Bereich Forum aufgerufen wird.

PageDesignPrepareMainColumn

Gestaltung des Hauptteils der Seitenansicht.

HTML-Struktur

In jedem Seiten-Layout kann die HTML-Struktur im Tab mit der Endung HtmlStructure eingesehen und verändert werden.

Beachten Sie bitte, dass die Platzhalter des folgenden Beispiels nicht entfernt werden, da diese für die Funktion von plentymarkets relevant sind.

Das Template enthält den gesamten Inhalt der jeweiligen Seite und gibt der Seite die gewünschte Struktur. Sie finden den Code im Tab PageDesignContentHtmlStructure des Templates PageDesignContent. Der etwas vereinfachte Code sieht folgendermaßen aus:

PageDesignContentHtmlStructure

$HtmlStartTag
<head>
    <title>$HtmlMetaTitle</title>
    $HtmlHeadLinkCSSTags
    $HtmlHeadJavaScriptTags
    $HtmlHeadMetaTags
</head>
<body>
    $PageDesignContentMainFrame

    $HtmlBodyOverlays
</body>
</html> 

Die folgende Tabelle erläutert die Funktionen der Code-Elemente des Templates PageDesignContent:

Element Erläuterung
$HtmlStartTag Der Platzhalter enthält das öffnende HTML-Tag sowie ggf. die Angabe des DOCTYPE.
$HtmlMetaTitle Der Seitentitel wird durch diesen Platzhalter ausgegeben. Er wird in der Titelleiste bzw. als Tabtitel der meisten Browser angezeigt. Der Seitentitel ist sehr wichtig für Suchfunktionen und das Ranking in Suchmaschinen und sollte daher kurz und treffend gewählt werden.
$HtmlHeadLinkCSSTags Setzt die CSS-Festlegungen für den Kopfbereich um.
$HtmlHeadJavaScriptTags Umsetzung der JavaScript-Inhalte im Kopfbereich.
$HtmlHeadMetaTags Durch diesen Platzhalter werden Meta-Tags, z.B. Keywords, umgesetzt, die wichtig für die Indizierung der Seite durch Suchmaschinen sind.
$PageDesignContentMainFrame Dieser Platzhalter fügt den Inhalt des Templates PageDesignContentMainFrame ein. Dieses Template enthält wiederum den Platzhalter MainFrame, daher wird dieser nachfolgend ebenfalls erläutert.
$HtmlBodyOverlays Hier werden Overlays umgesetzt, z.B. eine spezielle Warenkorbansicht.

Tab. 1: Elemente des Tabs PageDesignContentHtmlStructure

Nach oben