vypadá To jako're pomocí IE11…

Pokud je to vaše poprvé slyšel o termín „drobečková navigace“, používané v web design, dovolte mi, abych vám ukázat, jak to vypadá:

Strouhankou Příklad

jsem si jistý, že jste se setkali v webové stránky, které jste navštívili. Nyní pojďme přidat jeden na svých webových stránkách.Přidat strouhanka prvku, stačí hledat „strouhanka“ na prvky panelu a přetáhněte Strouhanka prvku obsahu podokně.

Strouhanka Prvku

Budete mít možnost vidět něco jako toto:

Strouhankou Náhled

text, který vidíte v stavitel, nebo v Kamenem není skutečný text, který se zobrazí na front-end webu. To je jen zástupný symbol. Na front-end, uvidíte hierarchii webových stránek počínaje odkazem na domov na levé straně-většina, pak pohybující se jedno dítě dále na pravé straně.

V tomto případě, protože stránky vytváříme je Profil Společnosti, které v tomto příkladu je dítě stránce O Nás, struktura je: > O Nás > Profil Společnosti.

Podle Nastavení pole skupiny, uvidíte následující pole:

Strouhankou Nastavení

Domácí Typ Popisku

můžete vybrat, zda použít prostý text (např. Domů) na domovské stránce odkaz, nebo použít ikonu místo.

Strouhankou Domů Štítek TextStrouhankou Domů Icon Label

Domácí Label

Pokud jste vybrali možnost Text na Domovské Label Typ pole výše, můžete změnit text z přísloví „Doma“ na něco jiného (např. Blog, Zpravodajství).

Pokud zvolíte ikonu, budete mít možnost vybrat ikonu, kterou chcete použít.

Strouhankou Ikonu

Šířka & Max. Šířka

můžete nastavit výchozí šířku Strouhanka prvku. Můžete také nastavit jeho maximální šířku tak, aby nemohla překročit tuto šířku.

Odůvodnění & Směrem

To vám umožní změnit nastavení Flex CSS vlastnosti z Strouhanka prvku. Pokud nejste obeznámeni s Flexboxem, je zde užitečný úvod.

pozadí

k prvku můžete přidat barvu pozadí.

Breadcrumbs Background

můžete nastavit písma, okraje, výplně, stínové stíny, ohraničení a poloměr ohraničení prvku breadcrumb. Tyto vlastnosti uvidíte na ovládacím panelu:

Strouhankou Design Nastavení

všimněte si, že tyto vlastnosti se zmínil, když nakonfigurován, jsou pro celý strouhanka prvku, a ne pro jednotlivé odkazy uvnitř řekl prvek. To znamená, že pokud nastavíte výplně, bude se vztahovat na celý prvek.

Strouhankou Desing Nastavení Výplně

Později budeme diskutovat o tom, jak nastavit jednotlivé vazby uvnitř struktury.

ve strouhance jsou „oddělovače“ oddělovače každého odkazu.

Strouhankou Delimeter Separátor

výchozí oddělovač je šipka, ale můžeme to změnit, a dokonce odstranit úplně. Nastavení najdete ve skupině polí nastavení Delimetru.

Breadcrumbs Delimeter Setup

Nyní pojďme diskutovat o jednotlivých nastaveních.

povolit

ve výchozím nastavení jsou oddělovače zapnuty, ale můžete je vypnout, čímž odstraníte jakýkoli oddělovač.

Typ oddělovače

stejně jako v domovském štítku Typ pod skupinou Nastavení pole diskutované dříve, můžete zvolit, zda chcete použít text nebo ikonu pro typ oddělovače. Když říkáme „Text“, nemusí to nutně znamenat slova, i když slova jsou povolena. Obecně se používají kódy ASCII. Výchozí oddělovač, → je ASCII kód, který generuje šipku.

Pokud zvolíte ikonu jako typ oddělovače, zobrazí se pole pro výběr ikon pro výběr ikon, které chcete použít.

LTR & RTL Oddělovač

LTR znamená „zleva Doprava“, zatímco RTL znamená „zprava Doleva“. Ty v podstatě znamenají směr v tom, jak čteme písmena. Například, čtete tento článek od zleva doprava, tím pádem, toto je LTR. Jazyky jako arabština a hebrejština čtou své postavy a slova začínající zprava doleva.

některé webové stránky podporují více jazyků, kde jsou podporovány jak LTR, tak RTL. Toto nastavení dostane vaše strouhanka oddělovač připraven tím, že umožňuje nastavit nejen LTR oddělovač, ale také to, co použít, když je povoleno RTL.

mezery

hodnota, kterou zde vložíte, bude nastavena jako vzdálenost na levé i pravé straně oddělovače. Pokud tedy nastavíte hodnotu 10px jako hodnotu, každý oddělovač bude mít mezeru 10px vlevo a dalších 10px vpravo.

nastavení odkazů je prakticky stejné jako nastavení Nastavení a návrhu dohromady. Hlavní rozdíl spočívá v tom, že nastavení odkazů je specifické pro jednotlivé odkazy, zatímco první dva jsou aplikovány na samotný prvek strouhanky.

nastavení odkazů umožňuje také nastavit barvu textu a barvu pozadí všech odkazů uvnitř strouhanky myš se vznáší na odkaz.

Strouhankou Odkaz Nastavení

Přizpůsobit

přizpůsobit oddíl se skládá z ovládacích prvků přizpůsobit prvek, pokud jste do HTML, CSS, a Javascript.

Breadcrumbs Customize

  • ID-pomocí této volby Nastavte HTML ID prvku. ID by mělo být na stránce jedinečné.
  • Class-pomocí této volby nastavte třídu HTML pro prvek. Třídu můžete použít pro svůj vlastní kód CSS.
  • Prvek CSS – tuto možnost Použijte, chcete mít lepší kontrolu nad prvkem pro přístup k vnitřní tagy elementu pomocí $el CSS výběr. Kliknutím sem zobrazíte podrobnější informace.
  • skrýt během bodu přerušení-pomocí této možnosti skryjte prvek na různých velikostech zařízení. Klikněte zde pro více informací.
  • vlastní atributy-použijte tuto volbu pro přidání vlastních atributů do HTML tagu prvku. Například data-info=123. Tuto možnost můžete použít k vložení vlastních informací do prvku, který chcete použít v kódu přizpůsobení.

vlastní atributy

Demo

Chcete-li zobrazit živé demo prvku Breadcrumbs, klikněte zde.

Shrnutí

Během pouhých několika minut, jste se naučili, jak přidat a nastavit strouhankou, aby Kámen / Content Builder. Naučili jste se, jak navrhnout prvek strouhanky i jeho jednotlivé odkazy. Nakonec jste se také naučili, jak nakonfigurovat oddělovač podle vašich představ.

vidíte něco nepřesného? Dejte nám vědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.