Santa Cruz Pro Design Info und Hilfe

Herzlichen Glückwunsch zur Installation des Pro Web 2 Layouts „Santa Cruz“.

Weitere Informationen finden Sie übrigens auch in der Hilfe des Layouts im "Design bearbeiten"-Dialog (Tastenkombination Umschalt+F12) per Klick auf das Hilfe-Symbol unten links.

Bildhöhen und -breiten

Wie auch bei den anderen KARO-Pro Web 2 Designs wird keine Höhe vorgegeben, allerdings ist es ratsam beim Gebrauch des Sliders, oder auch Galerie genannt, Bilder mit gleichen Dimensionen zu verwenden. Welche die optimale Breite der Bilder für die Galerie ist, ist kaum zu beantworten. Persönlich verwende ich bei Bildern die über die komplette Breite der Website gehen, gerne eien Breite von 1680 Pixel, da dies ein guter Kompromiss aus Qualität und Dateigröße ist.

Um eine optimale Darstellung aller Bilder, auf allen Ausgabengeräten zu gewährleisten, sollten die Bilder immer mindestes eine Breite von 992 Pixel besitzen. 992 Pixel wäre die maximale Breite des Smartphone Layouts, bzw. der „Breakpoint“ für die mobile Ansicht.

Registerkarte „Einstellungen“

  • Maximale Breite des Inhaltcontainers: mit dieser Option stellen Sie die Breite des Inhaltscontainers ein. Die Angabe erfolgt in Pixel. Dieser Cotainer begrenzt die Breite aller Absatzbereichen, ausgenommen sind natürlich die Panorama-Absätze
  • Maximale Breite des Menüs: Angabe der maximalen Breite des Menüs. Ist die Browserbreite geringer als 992 Pixel, wird das Menü automatisch ausgeblendet, und das Menü erhält eine Breite von 100%
  • Skalierung durch Benutzer auf Smartphone zulassen: Ist diese Option aktiviert, hat ein Besucher, der Ihre Site per Smartphone besucht, die Möglichkeit, die Ansicht zu skalieren.
  • Aufteilung „Inhalt“, „Links“ und „Rechts“: Sie haben die Wahl zwischen Gleich breite Spalten oder breiterer „Inhalt“ mit schmalen Marginalspalten „Links“ und „Rechts“
  • Navigationsstil „Allgemeine Seiten“: Seiten oder Ordner und Seiten
  • Überschriften zentrieren
  • Absatzbereiche durch leichten Schatten trennen: aktivieren Sie diese Option, wenn die Ansatzbereiche einen dünnen Schatten per CSS erhalten sollen
  • „Nach oben“-Stil: Sie können die „Nach oben“-Schaltfläche deaktivieren oder zwischen 17 verschiedenen SVG-Icons wählen
  • fast 40 verschiedenen Overlay-Bilder für die Bereiche Oben, „Links, Inhalt und Rechts“, Unten und Footer: in den Auswahllisten können Sie das Overlaybild deaktivieren, oder aus einen der kanpp 40 vorbereiteten und transparenten Hintergrundbildern wählen. Die Bilder legen sich über die Farbe des Hintergrundes, welche Sie im Farben-Register definieren können.
  • Animationsstil der Absätze: Scrollen Sie Ihre Seite können in Sichtfeld kommende Absätze per animate.css animiert werden. Auch hier stehen Ihnen mehr als 40 Möglichkteiten zur Verfügung. Eine schnelle Übersicht finden Sie unter https://daneden.github.io/animate.css/
  • Google Schriftart für die komplette Seite, für Überschriften und für das Menü: Das Design macht Ihnen die Integration von Google Scriftarten super einfacher. Unter https://fonts.google.com/ haben Sie die Wahl zwischen mehr als 840 Schriftarten. Sie müssen lediglich den Namen der Schriftart in die Iption eintragen. Als Beispiel könnten Sie Montserrat, Montaga oder auch Ubuntu eintragen.
  • BB-Code interpretieren: Setzen Sie hier ein Häkchen um in von Ihnen angelegten Absätzen BBCode interpretieren zu lassen. Eine Übersicht der möglichen Codes finden Sie unter BBCode-Anleitung

Register „Menü“

  • „Sie sind hier“-Navigation: Sie können die „Sie sind hier“-Navigation nicht nur deaktiveren, sondern können auch angeben ob diese zentriert werden soll
  • Verzögerung der Slideanimation zwischen jedem Menüpunkt
  • Darstellung der Suche (Suche nicht anzeigen, Suchfeld per Icon-Klick einblenden oder über den Socialicons)
  • immer Menü verstecken und Hamburger-Menü-Icon mit Text anzeigen: setzen Sie bei dieser Option ein Häkchen, wird das Menü zunächst versteckt, damit für den Inhalt mehr Raum vorhanden ist
  • Startseite in Navigation einschließen
  • Indexseite der oberen Ebene zusätzlich verlinken
  • zurück Symbol im Menü anzeigen
  • Brotkrumennavigation im Menü darstellen
  • Aktuelle Seite in Navigation hervorheben
  • Schrift im Menü fett darstellen
  • Abstand (oben und unten) der Menüpunkte in Pixel: bestimmen Sie den Abstand der einzelnen Menüpunkte nach oben und unten. Werte zwischen 0 und 20 Pixel sind möglich.Schriftgröße im Menü (in Pixel)
  • OnePage-Menü aktivieren
  • Dauer der OnePage-Scrollanimation in Millisekunden
  • Text zum Öffnen der OnePage-Navigation
  • Text zum Ausblenden der OnePage-Navigation
  • Verlinkungstext für „nach Oben“ im OnePage-Menü
  • Text hinter dem Menü-Symbol: platzieren Sie zusätzlich Text hinter dem Hamburger-Menü-Symbol
  • Text für die Startseite im Brotkrumenmenü

Register „Farben“

Unter diesem Register haben Sie die Möglichkeit, einzelnen Elementen des Santa Cruz Layouts eine neue Farbe zuzuweisen. Klicken Sie auf das entsprechende Farbfeld, um im anschließend geöffneten Dialog Farbwahl eine neue Farbe zu definieren. Sie können die folgenden Farben einstellen.

  • Hintergrund der Webseite
  • Hintergrund des Bereiches „Oben“
  • Hintergrund des Bereiches „Unten“
  • Hintergrund des Menüs
  • Menü: Schriftfarbe der Links, aktive Farbe (aktuelle Elemente / Maus darüber), Farbe verschiedenen Menüsymbole, Farbe des Hamburger-Icon, Farbe des Brotkrumen-Links, Farbe des Brotkrumen-Links beim Darüberfahren
  • Icons: Schriftfarbe und Schriftfarbe (Maus darüber)
  • One Page Navigation: Hintergrundfarbe, Schriftfarbe, Hintergrund des aktiven Elementes, Hintergrund eines Elementes bei Maus darüber
  • Allgemeine Navigation (Footer): Hintergrund, Schriftfarbe der Fußzeile, Schriftfarbe des Ordnernamens (Überschrift über Links), Links, Links (Maus darüber)
  • Nach oben“-Links
  • Galerie: Navigationspunkte in der Galerie-Slideshow und Farbe der Schrift (inklusive der Überschriften)
  • Text-Markierung (selection): Farbe der Schrift und Hintergrundfarbe des Markierungsbereiches
  • Cookie Hinweis: Hintergrundfarbe des Banners, Textfarbe des Banners, Hintergrundfarbe des Buttons, Textfarbe des Buttons
  • ... und natürlich den Ihnen bekannten Schrifteinstellungen per Schriftformate

Registerkarte „Galerie“

  • Automatischer Motivwechsel der Galerie: Sie können hier angeben, nach wieviel Sekunden der Galerie-Slideshow automatisch zum nächsten Bild wechseln soll.
  • Wenn im Ordner keine Galerie definiert wurde, übergeordneten Ordner, dann Eyecatcher verwenden Video stummschalten: Haben Sie in den Eigenschaften des Ordners der Seite keine Galerie für den Eyecatcher definiert, soll zunächst auf Bilder im übergeordneten Order zugegriffen werden. Liegen auch hier keine Bilder vor, wird automatisch der vom Design oder über die Layoutoptionen festgelegte Eyecatcher verwendet.
  • „Links-Rechts-Navigation“-Stil: passend zu den „Nach oben“-Stil können Sie hier die Links-rechts-Navihation deaktivieren oder zwischen 17 SVG-Icons wählen
  • Überblendeffekt für den Bildwechsler: Wählen Sie zwischen den verschiedenen Effekten: Nach links gleiten, Nach rechts gleiten, Nach oben gleiten, Nach unten gleiten, Überblenden, Vergrößern, Verkleinern
  • Punkt-Navigationsstil des Sliders
  • Position der Punkt-Navigation: Sie haben die Auswahl zwischen den Folgenden Positionen: Punkt-Navigation nicht anzeigen, Unten Links, Unten Rechts, Unten zentriert, Oben Links, Oben Rechts
  • Position des Galerietextes: Sie haben die Auswahl zwischen den Folgenden Positionen: Unten Links, Unten Rechts, Unten zentriert, Oben Links, Oben Rechts

Register „Cookie“

In dieser Registerkarte können Sie den Cookie-Hinweis für Ihre Seite konfigurieren. Es wird das Script der Seite https://cookieconsent.insites.com/ in Version 3.0.3 verwendet. Mehr Informationen zu der Hinweispflicht für Cookies finden Sie unter anderem unter Hinweispflicht für Cookies

  • Layout des Cookie-Plugins: Plugin deaktivieren, Block, klassisch, randlos, Wire
  • Position des Cookie-Plugins: Banner unten, Banner oben, Unten links, Unten rechts
  • Hinweistext: Ein typischer Hinweistext in Deutschland wäre: „Wir verwenden Cookies. Durch die Nutzung unserer Website stimmen Sie dem Einsatz zu.“
  • Text des Akzeptieren Links: Geben Sie hier den Text für die „Akzeptieren“-Schaltfläche an
  • Link zur Hinweisseite (Pflichtfeld) „Mehr erfahren“ Button Text: Geben Sie hier die komplette Adresse zur Ihrer Hinweis- bzw. Datenschutzseite inklusive http:// oder https:// an

Register „Logo“

Klicken Sie auf die Schaltfläche Auswählen, um das Logo über den Dialog „Bild auswählen” zu definieren. Alternativ genügt ein Doppelklick auf den Vorschaubereich, um den Auswahldialog zu öffnen.
Wollen Sie das Logo in der integrierten Bildbearbeitung nachbearbeiten, drücken Sie die Schaltfläche Bearbeiten. Die anschließend angezeigte Bildbearbeitung stellt Ihnen vielfältige Anpassungsmöglichkeiten zur Verfügung.

Um das Logo aus der Vorschau und dem Design zu entfernen, drücken Sie die Schaltfläche Löschen (das rote X).

Im unteren Bereich des Registers stehen Ihnen folgende weitere Konfigurationsmöglichkeiten zur Verfügung:

  • Titel: Definieren Sie in diesem Feld einen Titel für die Grafik.
  • Verknüpfung: Wenn benötigt, legen Sie hier ein Linkziel fest, das automatisch angezeigt werden soll, wenn ein Besucher auf das Logo klickt. Standardmäßig ist keine Verknüpfung vorgegeben. Klicken Sie auf die Schaltfläche Verknüpfung auswählen rechts innerhalb des Eintragsfeldes. Im nun geöffneten Dialog Hyperlink können Sie die gewünschte Verknüpfung definieren. Das gewählte Linkziel wird anschließend im Eintragsfeld angezeigt. Um einen gewählten Link zu löschen, klicken Sie auf den Button Verknüpfung entfernen. Der Link wird ohne Sicherheitsabfrage gelöscht. Empfehlenswert ist auf die Startseite zu verlinken, dies ist zu üblich, weshalb die meisten Besucher auch erwarten mit einem Klick zurück zur Startseite geleitet zu werden.

KARO Webdesign & Entwicklung (siquando-designs.de) verwendet Cookies, um die Dienste ständig zu verbessern und bestimmte Features zu ermöglichen. Indem Sie hier fortfahren, stimmen Sie dieser Verwendung zu. Mehr erfahren