*
logo
blockHeaderEditIcon
Layout-divider
blockHeaderEditIcon

Anleitungen zum Layout Divider

Informationen

Das Kopieren der Layouts kann in jede Worldsoft-CMS-Website erfolgen. Die genauen Schritte sind in den nächsten Punkten aufgelistet.

Die Layouts sind optimiert in der Struktur und in Bezug auf die Darstellungen auf verschiedenen Geräten (responsive). Sie können Farben sowie andere Einstellungen einfach abändern. Wir raten jedoch davon ab, die Position der Makros zu ändern. Dies könnte zu Komplikationen führen. Lassen Sie also bitte die Position der Makros unverändert.

Einfügen von HTML und CSS Code

HTML Code für die Layouts einfügen (Beispiel-Erklärung):
Anleitungen

CSS Code für die Layouts einfügen:
Anleitungen

WBS Shop (Modul)

Wichtig Die Layouts werden nur richtig dargestellt, wenn auch in der WBS Artikel mit den nötigen Informationen vorhanden sind.

Grundeinstellungen / Anzeige-Einstellungen

Die Breite und Höhe der Artikel-Bilder werden hier definiert. Die optimale Einstellung für dieses Layout ist:

Breite der Bilder: 500
Höhe der Bilder: 366

Layouts & Shop-Texte

Hier werden die Layouts erstellt und dem richtigen Punkt zugewiesen.

Um ein neues Layout zu erstellen, gehen Sie zum Punkt "Ein neues Layout hinzufügen". Dort wählen Sie den Layout-Typ aus und vergeben einen Namen. Danach können Sie dieses Layout mit dem Editor bearbeiten.

Hauptkatalog-Layout

Artikelanzeige-Einstellungen:
Aktivieren Sie die Artikelliste durch das Häkchen. Die weiteren Einstellungen sind Ihnen überlassen. Sie können die Einstellungen auch einfach vom Layout übernehmen, wie auf dem Screenshot dargestellt.

Haupt-Artikelübersicht-Layout

Der HTML Code für die Artikelübersicht:

Code wurde erfolgreich kopiert!

<div class="row produkt-container">
<div class="col-md-3 pos-img">
<div class="flaggen">
#WSSHOP_ARTICLE_FLAGS[[{"widget":"text"}]];Article Flags#
</div>
<div class="img-article">
#WSSHOP_ARTICLE_THUMBNAIL[[{"widget":"image"}]];Article Thumbnail#
</div>
<div class="btn-mehr">
#WSSHOP_BTN_MORE{{37}}[[{"widget":"link"}]];More...#
</div>
</div>
<div class="col-md-9 box-mehr">
<div class="col-md-7">
<div class="produkt-titel">
#WSSHOP_ARTICLE_TITLE[[{"widget":"text"}]];Article Title#
</div>
<div class="article-nr">
Art. Nr: #WSSHOP_ARTICLE_NUMBER[[{"widget":"text"}]];Article Nr#
</div>
<div class="article-stock">
#WSSHOP_ARTICLE_STOCK[[{"widget":"text"}]];Stock#
</div>
<div class="article-sdescription">
#WSSHOP_ARTICLE_SHORT_DESCRIPTION[[{"widget":"text"}]];Article Short Description#
</div>
</div>
<div class="col-md-5">
<div class="produkt-preis">
Regulärer Preis: #WSSHOP_ARTICLE_PRICE[[{"widget":"text"}]];Article Price#
</div>
<div class="produkt-preisdiscount">
#WSSHOP_ARTICLE_DISCOUNT_PRICE[[{"widget":"text"}]];Article Discount Price#
</div>
<div class="btns">
<span class="box-cart">
#WSSHOP_BTN_ADD_TO_CART[[{"widget":"button"}]];Add to Cart#
</span>
<span class="box-wishlist">
#WSSHOP_BTN_ADD_TO_WISHLIST[[{"widget":"button"}]];Wishlist#
</span>
</div>
</div>
</div>
</div>

Als letzten Schritt vergeben Sie für das Makro "More..." einen Platzhalter. Dazu machen Sie ein Doppelklick auf das Makro "More...". Bei der Label Optionen setzen Sie ein Häkchen und geben folgenden Text als Platzhalter ein: Detail Ansicht

- Speichern durch den Button OK.

Hauptartikel-Detail-Layout

Der HTML Code für die Artikel-Detail-Layout:

Code wurde erfolgreich kopiert!

<div class="row">
<div class="col-md-6">
<div class="main-img">
#WSSHOP_ARTICLE_IMAGE[[{"widget":"image"}]];Article Image#
</div>
</div>
<div class="col-md-3 box-detail-inf">
<div class="detail-titel">
#WSSHOP_ARTICLE_TITLE[[{"widget":"text"}]];Article Title#
</div>
<div class="detail-nr">
Art. Nr.: #WSSHOP_ARTICLE_NUMBER[[{"widget":"text"}]];Article Nr#
</div>
<div class="detail-extrainfo">
#WSSHOP_ARTICLE_EXTRA_INFO[[{"widget":"text"}]];Article Extra Info#
</div>
<div class="detail-optionen">
#WSSHOP_ARTICLE_OPTIONS_SELECTOR[[{"widget":"select"}]];Article Option Selector#
</div>
<div class="article-stock">
#WSSHOP_ARTICLE_STOCK[[{"widget":"text"}]];Stock#
</div>
</div>
<div class="col-md-3 detail-posb">
<div class="detail-preis">
#WSSHOP_ARTICLE_PRICE[[{"widget":"text"}]];Article Price# #WSSHOP_ARTICLE_DISCOUNT_PRICE[[{"widget":"text"}]];Article Discount Price# #WSSHOP_ARTICLE_DISCOUNT_PERCENTAGE[[{"widget":"text"}]];Article Discount Percentage#
</div>
<div class="detail-btn">
#WSSHOP_BTN_ADD_TO_CART[[{"widget":"button"}]];Add to Cart#
</div>
<div class="detail-btn">
#WSSHOP_BTN_ADD_TO_WISHLIST[[{"widget":"button"}]];Wishlist#
</div>
<div class="pos-social">

</div>
</div>
</div>
<div class="row pos-des">
<div class="detail-langb">
#WSSHOP_BESTSELLER[[{"widget":"list"}]];Bestseller#
</div>
</div>
<div class="row pos-des">
<div class="detail-langb">
#WSSHOP_ARTICLE_LONG_DESCRIPTION[[{"widget":"text"}]];Article Long Description#
</div>
</div>
<div class="row pos-des">
<div class="detail-langb">
#WSSHOP_SIMILAR_ARTICLES[[{"widget":"list"}]];Similar Articles#
</div>
</div>

Haupt-Kategorienansichts-Layout

Der HTML Code für Haupt-Kategorienansichts-Layout:

Code wurde erfolgreich kopiert!

<div class="box-kategorien">
#WSSHOP_CATEGORY_IMAGE[[{"widget":"image"}]];Category Image#</div>
<div class="text-pos">
<div class="kate-name">
<p style="text-align:center;">
#WSSHOP_CATEGORY_NAME[[{"widget":"text"}]];Category Name#</p>
</div>
<div class="kate-desc">
<p style="text-align:center;">
#WSSHOP_CATEGORY_DESCRIPTION[[{"widget":"text"}]];Category Description#</p>
</div>
</div>

Haupt-"Auch gekauft"-Layout

Der HTML Code für Auch gekauft Layout:

Code wurde erfolgreich kopiert!

<div class="flaggen-more">
#WSSHOP_ARTICLE_FLAGS[[{"widget":"text"}]];Article Flags#
</div>
<div class="img-more">
#WSSHOP_ARTICLE_THUMBNAIL[[{"widget":"image"}]];Article Thumbnail#
</div>
<p style="text-align:center;">
<span class="produkt-titel">
#WSSHOP_ARTICLE_TITLE[[{"widget":"text"}]];Article Title#
</span>
</p>
<p style="text-align:center;">
<span class="produkt-preis">
#WSSHOP_ARTICLE_PRICE[[{"widget":"text"}]];Article Price# #WSSHOP_ARTICLE_DISCOUNT_PRICE[[{"widget":"text"}]];Article Discount Price#
</span>
</p>

Haupt-Bestseller-Layout

Der HTML Code für Haupt-Bestseller-Layout:

Code wurde erfolgreich kopiert!

<div class="flaggen-more">
#WSSHOP_ARTICLE_FLAGS[[{"widget":"text"}]];Article Flags#
</div>
<div class="img-more">
#WSSHOP_ARTICLE_THUMBNAIL[[{"widget":"image"}]];Article Thumbnail#
</div>
<p style="text-align:center;">
<span class="produkt-titel">
#WSSHOP_ARTICLE_TITLE[[{"widget":"text"}]];Article Title#
</span>
</p>
<p style="text-align:center;">
<span class="produkt-preis">
#WSSHOP_ARTICLE_PRICE[[{"widget":"text"}]];Article Price# #WSSHOP_ARTICLE_DISCOUNT_PRICE[[{"widget":"text"}]];Article Discount Price#
</span>
</p>

Layout für "Ähnliche Artikel"

Der HTML Code für ähnliche Artikel:

Code wurde erfolgreich kopiert!

<div class="flaggen-more">
#WSSHOP_ARTICLE_FLAGS[[{"widget":"text"}]];Article Flags#
</div>
<div class="img-more">
#WSSHOP_ARTICLE_THUMBNAIL[[{"widget":"image"}]];Article Thumbnail#
</div>
<p style="text-align:center;">
<span class="produkt-titel">
#WSSHOP_ARTICLE_TITLE[[{"widget":"text"}]];Article Title#
</span>
</p>
<p style="text-align:center;">
<span class="produkt-preis">
#WSSHOP_ARTICLE_PRICE[[{"widget":"text"}]];Article Price# #WSSHOP_ARTICLE_DISCOUNT_PRICE[[{"widget":"text"}]];Article Discount Price#
</span>
</p>

Buttons

WBS Shop / Konfiguration / Grundeinstellungen / Buttons
Für die richtige Darstellung der Buttons sollte das Häkchen bei "Buttons personalisieren" gesetzt sein.

Footer
blockHeaderEditIcon

Copyright by Worldsoft AG 2016 / All rights reserved
Benutzername:
User-Login
Ihr E-Mail