Du hast dir ein Design Template ausgesucht, möchtest es aber gerne noch deinen individuellen Wünschen anpassen? Dann ist das deine Anleitung. Wichtig zu wissen ist nur, dass du falls du dein Design Template nochmal ändern möchtest, du auch alle Änderungen nochmals vornehmen musst, deswegen ist zuerst wichtig, dass du dir dein Template vorerst endgültig auswählst, installierst und auf den Haken klickst, bevor wir weitermachen.
- Um in den Profi Modus zu wechseln, musst du auf das Bearbeitungs-Symbol klicken und dann auf "Zum Profi Modus". Für alle Design-Anpassungen gilt: Immer auf den Speichern-Button (4. von links) klicken, und dann erst den Shop aufrufen, um sich Änderungen anzusehen.
Logo vergrößern/verkleinern
Gehe in den "logo.css" Modus, Zeile 7 (max-width:) und ändere dort das 100% zu 200 px etc. je nachdem wie groß du dein Logo haben möchtest.
Logo anders positionieren
Um dein Logo höher oder tiefer zu setzen gehst du im "logo.css" Modus in Zeile 8 (padding-top:) und änderst dort das 30 px zu 10 px, wenn du es zum Beispiel weiter oben haben möchtest, je höher die Zahl, desto weiter unten fängt deine Seite mit Logo an.
Hintergrund- und Schriftfarbe ändern
Um die Hintergrundfarbe deines Shops zu ändern gehst du (im Wundery Design) in den "design.css" in Zeile 441 ($header-background:) und füge dort #deinfarbcode; ein, um die Hintergrundfarbe deines Headers (also der Farbe hinter deinem Logo) zu ändern. HTML Farbcodes findest du zum Beispiel hier. In Zeile 442 ($header-slogan-color:) kannst du ebenfalls einen Farbcode einfügen, um die Schriftfarbe deines Slogans zu ändern, in Zeile 448 ($navigation-background:) die Hintergrundfarbe hinter deinem Menü und in Zeile 470 ($content-background:) und 471 ($content-header-title-color:) und 472 ($content-header-description-color:) die Farbe deiner Seite sonst, bzw. deiner Startseiten-Überschrift/ Startseitentexts. Speichern nicht vergessen und gleich checken, wie sich die neuen Farben in deinem Shop machen.
Schriftart ändern
Um eine andere Schriftart einzustellen musst du nur zwei Änderungen vornehmen. Zunächst suchst du dir eine Google Schriftart aus unter https://fonts.google.com/. Wenn du dir zwei Schriftarten ausgesucht hast, für 1. Text und 2. Überschriften kannst du diese dann unter "design.css" in Zeile 422 und 423 anstelle der voreingestellten Schriftarten Lato und Lora einfügen. Das speicherst du, musst dies aber auch noch in der master.html in Zeile 35 und 36 ändern. Suche in den beiden Zeilen jeweils die alten Schriftarten (Lato und Lora) und ändere auch hier den Namen zu deinen neu ausgesuchten Schriftarten.
Startseitentext über Produkten platzieren
Um den Startseitentext nicht unter den promoteten Produkten erst anzeigen zu lassen, kannst du ganz einfach den Code aus Zeile 270 (master.html)
<div class=“homedescription”>
{{ store.homepage_category.long_description }}
</div>
ausschneiden und in Zeile 257, sozusagen über den products promoted, einfügen. Wenn du dich damit sicher fühlst, kannst du das Gelernte natürlich auch verwenden, um jegliche andere Bausteine umzuplatzieren.
Tipp: Solltest du einmal aus Versehen einen Teil des Codes löschen oder Ähnliches, kannst du dir einfach ein anderes Design installieren, das "kaputte Design" löschen und das gewünschte Template neu installieren. Dann musst du aber alle Änderungen nochmals vornehmen. Wenn du das vermeiden willst kannst du natürlich auch immer wieder ein Backup deines aktuellen Designs sichern, indem du den gesamten master.html-Code herauskopierst in ein Dokument, aus dem du es später wieder reinkopieren kannst.
Slideshow verkleinern
Um die Slideshow nicht über die ganze Seite angezeigt zu bekommen, kannst du ganz einfach in den "carousel.css" Modus gehen, den bestehenden Code löschen und den folgenden Code einfügen:
.carousel {
max-width: 1200px;
margin:0 auto;
img {
width: 100%;
} .left, .height {
min-height:180px; }
}.items {
&.mg-bottom-nav {
margin-bottom: 0px;
}
}
Bei den Pixelangaben kannst du selbst ausprobieren, mit welchen Abmessungen deine Slideshow am besten aussieht, der oben genannte Code ist nur eine Möglichkeit, wie genau ihr den Slider verkleinern könnt.
Wenn du weitere Fragen zu Design-Anpassungen hast, sind wir gerne für dich da per Mail oder per Klick auf unser blaues Online-Support-Tool in der rechten unteren Ecke. Bei besonderen Wünschen, können wir dir auch immer einen entsprechenden Experten zur Seite stellen, der gegen Entschädigung deine Design-Anpassungen vornimmt.
