Buttons
Die primäre Schaltfläche wird für den wichtigsten CTA auf einer Seite verwendet. Implementierung durch Suche nach "Button" in den Gutenberg-Blöcken und Auswahl von Button (nicht Buttons - das ist ein anderer Block)
Die sekundäre Schaltfläche ist kleiner als die primäre Schaltfläche. Wird verwendet, wenn eine leisere CTA gewünscht ist (z. B. Newsletter-Anmeldung im Footer). Implementieren Sie, indem Sie den Button Gutenberg-Block wie oben beschrieben hinzufügen und dann "btn-secondary" in das Feld Zusätzliche CSS-Klassen einfügen.
Die Alt-Schaltfläche sieht aus wie ein Textlink mit einem :after-Pfeilelement. Wird verwendet, wenn eine leisere CTA gewünscht ist. Implementieren Sie, indem Sie den Button Gutenberg-Block wie oben beschrieben hinzufügen und dann "btn-alt" in das Feld Zusätzliche CSS-Klassen einfügen.
Dropdowns
Die Dropdowns werden fast ausschließlich vom Entwicklungsteam implementiert.
Sie können eigenständig oder als Teil einer größeren internen Navigationsstruktur verwendet werden (wir verwenden die .wp-block-buttons
Syntax dafür, die auch die Schaltfläche zentriert). Live-Beispiel.
Einfache Eingabe + Schaltfläche (Inline-Formular)
Wird ausschließlich vom Entwicklerteam umgesetzt. Kann Teil eines Projekts sein .wp-block-buttons
Block zu zentrieren und zusätzlich zu stylen. Live-Beispiel.
Info-Boxen - 3 Sorten
Standard
Alle Infoboxen werden nach rechts verschoben. Implementieren Sie, indem Sie "Infobox" aus den Gutenberg-Blöcken auswählen.
Mit Bild
WBC Versandadresse
BA - WBC 2020 587 S. Taylor Avenue
Louisville, CO 80027
Hinzufügen von "with-image" zum Feld Zusätzliche CSS-Klassen
Mit kleinerem Text
Wenn Sie viel Inhalt in einem Infokasten unterbringen müssen, möchten Sie vielleicht, dass der Text eine kleinere Schriftgröße hat. Implementieren Sie diese Variante, indem Sie "with-smaller-text" zum Feld Zusätzliche CSS-Klassen hinzufügen.
Akkordeon
Implementieren Sie, indem Sie Accordion aus den Gutenberg-Blöcken auswählen.