Es sieht so aus, als ob Sie'IE11 verwenden…

Wenn Sie zum ersten Mal von dem Begriff „Breadcrumb“ hören, der im Webdesign verwendet wird, lassen Sie mich Ihnen zeigen, wie er aussieht:

Ich bin mir ziemlich sicher, dass Sie ihn auf den von Ihnen besuchten Websites gefunden haben. Fügen wir nun einen zu Ihrem hinzu website.To fügen Sie das Breadcrumb-Element hinzu, suchen Sie einfach im Elementbedienfeld nach „Breadcrumb“ und ziehen Sie das Breadcrumb-Element in den Inhaltsbereich.

Sie können Folgendes sehen:

Der Text, den Sie im Builder oder in Cornerstone sehen, ist nicht der tatsächliche Text, der im Frontend Ihrer Site angezeigt wird. Das ist nur ein Platzhalter. Im Frontend sehen Sie die Hierarchie der Webseiten, beginnend mit dem Link zur Startseite ganz links und dann ein untergeordnetes Element weiter rechts.

In diesem Fall lautet die Struktur: Home > Über uns > Unternehmensprofil, da die Seite, die wir erstellen, das Unternehmensprofil ist, das in diesem Beispiel ein untergeordnetes Element der Seite Über uns ist.

Unter der Feldgruppe Setup sehen Sie die folgenden Felder:

Home Label Type

Sie können wählen, ob Sie einen einfachen Text (z. B. Home) für den Homepage-Link oder stattdessen ein Symbol verwenden möchten.

Home Label

Wenn Sie oben im Feld Home Label Type Text ausgewählt haben, können Sie den Text von „Home“ in etwas anderes ändern (z. B. Blog, Nachrichten).

Wenn Sie Icon gewählt haben, haben Sie die Möglichkeit, das zu verwendende Icon auszuwählen.

Width & Max Width

Sie können die Standardbreite des Breadcrumb-Elements festlegen. Sie können die maximale Breite auch so einstellen, dass sie diese Breite nicht überschreiten kann.

Justification & Direction

Hiermit können Sie die Flex-CSS-Eigenschaften des Breadcrumb-Elements ändern. Wenn Sie mit Flexbox nicht vertraut sind, finden Sie hier eine hilfreiche Einführung.

Hintergrund

Sie können dem Element eine Hintergrundfarbe hinzufügen.

Sie können die Schriftarten, Ränder, Füllungen, Schatten, Ränder und den Randradius des Breadcrumb-Elements festlegen. Sie sehen genau diese Eigenschaften im Bedienfeld:

Beachten Sie, dass diese genannten Eigenschaften, wenn sie konfiguriert sind, für das gesamte Breadcrumb-Element und nicht für einzelne Links innerhalb dieses Elements gelten. Das heißt, wenn Sie die Polster festlegen, gilt dies für das gesamte Element.

Später werden wir besprechen, wie man einzelne Links innerhalb des Breadcrumbs konfiguriert.

In Breadcrumbs sind „Trennzeichen“ die Trennzeichen jedes Links.

Das Standardtrennzeichen ist ein Pfeil, aber wir können das ändern und sogar ganz entfernen. Die Einstellungen finden Sie in der Feldgruppe Delimeter Setup.

Lassen Sie uns nun die einzelnen Einstellungen besprechen.

Enable

Standardmäßig sind Trennzeichen aktiviert, aber Sie können es deaktivieren, wodurch jedes Trennzeichen entfernt wird.

Delimiter Type

Genau wie in der Home-Label-Typ unter der Setup-Feldgruppe zuvor diskutiert, können Sie wählen, ob Text oder Symbol für den Delimiter-Typ zu verwenden. Wenn wir „Text“ sagen, bedeutet das nicht unbedingt Wörter, obwohl Wörter erlaubt sind. Was im Allgemeinen verwendet wird, sind ASCII-Codes. Das Standardtrennzeichen → ist ein ASCII-Code, der den Pfeil generiert.

Wenn Sie Icon als Trennzeichentyp auswählen, wird Ihnen das Symbolauswahlfeld angezeigt, in dem Sie die Symbole auswählen können, die Sie verwenden möchten.

LTR & RTL-Trennzeichen

LTR bedeutet „Von links nach rechts“, während RTL „Von rechts nach links“ bedeutet. Diese bedeuten im Grunde die Richtung, in der wir Buchstaben lesen. Zum Beispiel lesen Sie diesen Artikel von links nach rechts, also ist dies LTR. Sprachen wie Arabisch und Hebräisch lesen ihre Zeichen und Wörter von rechts nach links.

Einige Websites unterstützen mehrere Sprachen, wobei sowohl LTR als auch RTL unterstützt werden. Diese Einstellung bereitet Ihr Breadcrumb-Trennzeichen vor, indem Sie nicht nur das LTR-Trennzeichen festlegen können, sondern auch, was verwendet werden soll, wenn RTL aktiviert ist.

Spacing

Der Wert, den Sie hier eingeben, wird als Abstand auf der linken und rechten Seite des Begrenzers festgelegt. Wenn Sie also 10px als Wert festlegen, hat jedes Trennzeichen links einen Abstand von 10px und rechts einen Abstand von 10px.

Links-Einstellungen sind praktisch die gleichen wie die Setup- und Design-Einstellungen kombiniert. Der Hauptunterschied besteht darin, dass die Einstellungen für Links spezifisch für die einzelnen Links sind, während die ersten beiden auf das Breadcrumb-Element selbst angewendet werden.

Mit dem Links-Setup können Sie auch die Textfarbe und Hintergrundfarbe aller Links innerhalb des Breadcrumbs festlegen, über die sich die Maus auf einem Link befindet.

Anpassen

Der Abschnitt Anpassen enthält Steuerelemente zum Anpassen des Elements, wenn Sie HTML, CSS und Javascript mögen.

• ID – Verwenden Sie diese Option, um eine HTML-ID für das Element festzulegen. Die ID sollte auf der Seite eindeutig sein.
• Class – Verwenden Sie diese Option, um eine HTML-Klasse für das Element festzulegen. Sie können die Klasse für Ihren benutzerdefinierten CSS-Code verwenden.
• Element CSS – Verwenden Sie diese Option, um eine bessere Kontrolle über das Element zu haben, um auf die inneren Tags des Elements zuzugreifen, indem Sie $el als CSS-Auswahl verwenden. Klicken Sie hier für weitere Informationen.
• Hide During Breakpoint – Verwenden Sie diese Option, um das Element auf verschiedenen Gerätegrößen auszublenden. Klicken Sie hier für weitere Informationen.
• Benutzerdefinierte Attribute – Verwenden Sie diese Option, um dem Wrapper-HTML-Tag des Elements benutzerdefinierte Attribute hinzuzufügen. Wie data-info=123. Sie können die Option verwenden, um benutzerdefinierte Informationen in das Element einzufügen, das für Ihren Anpassungscode verwendet werden soll.

Demo

Um eine Live-Demo des Breadcrumbs-Elements zu sehen, klicken Sie hier.

Zusammenfassung

In nur wenigen Minuten haben Sie gelernt, wie Sie Breadcrumbs zu Cornerstone / Content Builder hinzufügen und einrichten. Sie haben gelernt, wie Sie das Breadcrumb-Element sowie seine einzelnen Links entwerfen. Schließlich haben Sie auch gelernt, wie Sie das Trennzeichen nach Ihren Wünschen konfigurieren.