het lijkt erop dat u're using IE11…

als dit de eerste keer is dat u hoort over de term “breadcrumb” gebruikt in webdesign, laat me u tonen hoe het eruit ziet:

Ik ben er vrij zeker van dat u het op de websites hebt aangetroffen je bent op bezoek geweest. Nu, let ‘ s toevoegen op uw website.Voeg de breadcrumb element, gewoon zoeken naar “breadcrumb” op de elementen venster en sleep de Breadcrumb-element toe aan het deelvenster inhoud.

u kunt zoiets als dit zien:

nu is de tekst die u ziet in de builder of in Cornerstone niet de eigenlijke tekst die op de front-end van uw site zal verschijnen. Dat is slechts een plaatshouder. Op de front-end, zie je de hiërarchie van de webpagina ‘ s te beginnen met de link naar het huis aan de linkerkant-het grootste deel, dan het verplaatsen van een kind verder aan de rechterkant.

in dit geval is de structuur: Home > over ons > over ons > bedrijfsprofiel.

onder de setup field group, zult u de volgende velden zien:

Home Label Type

u kunt kiezen of u een platte tekst (bijvoorbeeld Home) voor de homepage link wilt gebruiken of in plaats daarvan een pictogram wilt gebruiken.

Home Label

Als u tekst hebt geselecteerd op het Home Label Type veld hierboven, kunt u de tekst veranderen van” Home ” naar iets anders (bijvoorbeeld Blog, Nieuws).

Als u pictogram kiest, krijgt u de optie om het te gebruiken pictogram te kiezen.

breedte & Max breedte

u kunt de standaardbreedte van het Broodkruimelelement instellen. U kunt ook de maximale breedte zo instellen dat het niet verder kan gaan dan die breedte.

rechtvaardiging & richting

Hiermee kunt u de Flex CSS-eigenschappen van het Breadcrumb-element instellen. Als u niet bekend bent met Flexbox, is er een handige introductie hier.

Achtergrond

U kunt een achtergrondkleur aan het element toevoegen.

u kunt de lettertypen, marges, paddings, box-shadows, randen en randradius van het paneermeelelement instellen. Je ziet deze eigenschappen op het bedieningspaneel:

merk op dat deze eigenschappen, wanneer ze geconfigureerd zijn, voor het gehele breadcrumb element zijn en niet voor individuele links binnen het genoemde element. Dat betekent, als je de Paddings, het zal gelden voor het hele element.

Later zullen we bespreken hoe individuele links in de breadcrumb geconfigureerd kunnen worden.

In breadcrumbs zijn “delimiters” de scheidingstekens van elke link.

het standaard scheidingsteken is een pijl, maar we kunnen dat veranderen en zelfs helemaal verwijderen. De instellingen zijn te vinden in de begrenzer Setup veldgroep.

laten we nu de individuele instellingen bespreken.

inschakelen

standaard zijn scheidingstekens ingeschakeld, maar u kunt het uitschakelen, waardoor elk scheidingsteken wordt verwijderd.

scheidingsteken type

net als in het Thuislabeltype onder de Setup veldgroep die eerder werd besproken, kunt u kiezen of u tekst of pictogram wilt gebruiken voor het scheidingsteken Type. Als we “tekst” zeggen, betekent het niet noodzakelijkerwijs woorden, hoewel woorden zijn toegestaan. Wat in het algemeen wordt gebruikt zijn ASCII-codes. Het standaard scheidingsteken, → is een ASCII-code die de pijl genereert.

Als u pictogram als scheidingsteken kiest, wordt u het pictogramselectieveld getoond om pictogrammen te kiezen die u wilt gebruiken.

LTR & RTL-scheidingsteken

LTR betekent” van links naar rechts “terwijl RTL”van rechts naar links” betekent. Dit betekent eigenlijk de richting in hoe we brieven lezen. Bijvoorbeeld, u leest dit artikel van links naar rechts, dus dit is LTR. Talen als Arabisch en Hebreeuws lezen hun karakters en woorden van rechts naar links.

sommige websites ondersteunen meerdere talen waar zowel LTR als RTL worden ondersteund. Met deze instelling is uw breadcrumb-scheidingsteken klaar door u niet alleen het LTR-scheidingsteken in te stellen, maar ook wat u moet gebruiken als RTL is ingeschakeld.

spatiëring

de waarde die u hier plaatst zal worden ingesteld als de afstand aan zowel de linker-als de rechterzijde van het scheidingsteken. Dus als je 10px als de waarde, elk scheidingsteken zal een ruimte van 10px aan de linkerkant en een andere 10px aan de rechterkant.

koppelingen instellingen zijn vrijwel hetzelfde als de Setup en Design instellingen gecombineerd. Het belangrijkste verschil is dat Links instellingen zijn specifiek voor de individuele links, terwijl de eerste twee worden toegepast op het broodkruimel element zelf.

met de Instellingen voor koppelingen kunt u ook de tekstkleur en de achtergrondkleur instellen van alle koppelingen binnen de kruimel waar de muis over zweeft op een koppeling.

aanpassen

de sectie aanpassen bestaat uit besturingselementen om het element aan te passen als u HTML, CSS en Javascript gebruikt.

• ID aan – gebruik deze optie om een HTML-ID in te stellen voor het element. De ID moet uniek zijn op de pagina.
• Klasse-Gebruik deze optie om een HTML-klasse in te stellen voor het element. U kunt de klasse gebruiken voor uw aangepaste CSS-code.
• Element CSS-Gebruik deze optie om een betere controle over het element te hebben om toegang te krijgen tot de binnenste tags van het element met $el als de CSS selectie. Klik hier voor meer informatie.
• verbergen tijdens breekpunt-Gebruik deze optie om het element op verschillende apparaatgroottes te verbergen. Klik hier voor meer informatie.
• aangepaste attributen-Gebruik deze optie om aangepaste attributen toe te voegen aan de wrapper HTML-tag van het element. Zoals data-info=123. U kunt de optie gebruiken om aangepaste informatie te injecteren in het element dat u wilt gebruiken op uw aanpassingscode.

Demo

om een live demo van het paneermeel Element te zien, Klik hier.

samenvatting

In slechts een paar minuten hebt u geleerd hoe u breadcrumbs kunt toevoegen en instellen aan Cornerstone / Content Builder. Je hebt geleerd hoe je het broodkruimelelement en de individuele links moet ontwerpen. Tot slot heb je ook geleerd hoe je het scheidingsteken naar wens kunt configureren.