Skip to main content

Unser Responsive Content Shortcode bietet dir die Möglichkeit, Inhalte teilweise nur für bestimmte Endgeräte anzuzeigen. So können etwas Beschreibungstexte auf dem Smartphone zusammengefasst ausgegeben werden, um die Seite nicht zu lang erscheinen zu lassen.

Responsive Content ist gerade in aller Munde und je nach Projekt sollte man diesen Punkt definitiv nicht vernachlässigen. Gerade im Modebereich ist die Zahl der Mobilen User mittlerweile über dem der Desktop-Anwender und wenn du dann einen 2.000 Wörter Artikel zum Thema „rote Damen Pumps“ auf deiner Seite hast, wird es einen Benutzer sehr schnell vergraulen. Daher haben wir uns etwas einfallen lassen: Zwei Shortcodes zum Anzeigen und Verstecken von Inhalten je nach Browserauflösung.

hidden-Shortcode

Code

[hidden screen="xs"]Dieser Text wird nur bei einem Smartphone nicht angezeigt![/hidden]
[hidden screen="lg"]Dieser Text wird nur bei einem großen Desktop nicht angezeigt![/hidden]

Attribute

Für alle verfügbaren Klassen schaue bitte unter http://holdirbootstrap.de/css/#responsive-utilities

NameInhaltBedeutung
screenxsWird auf allen Geräten ausgeblendet, die via Prefix definiert sind. (xs, sm, md, lg)
displayblock, inline, inline-blocksiehe: hier

visible-Shortcode

Code

[visible screen="xs"]Dieser Text wird nur bei einem Smartphone angezeigt![/visible]
[visible screen="lg"]Dieser Text wird nur bei einem großen Desktop angezeigt![/visible]

Attribute

Für alle verfügbaren Klassen schaue bitte unter http://holdirbootstrap.de/css/#responsive-utilities

NameInhaltBedeutung
screenxsWird auf allen Geräten angezeigt, die via Prefix definiert sind. (xs, sm, md, lg)

War dieser Artikel hilfreich?

1 Star2 Stars3 Stars4 Stars5 Stars
4,00 / 5

Keine Kommentare vorhanden


Du hast eine Frage oder eine Meinung zum Artikel? Teile sie mit uns!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*
*

Choose your currency:

Close
Converted prices are for reference only - all orders are charged in € Euro (€) EUR.
  • USDUS Dollar ($)
  • EUREuro (€)
  • GBPPfund Sterling (£)
  • AUDAustralische Dollar ($)
  • BRLBrasilianischer Real (R$)
  • CADKanadischer Dollar ($)
  • CZKTschechische Krone
  • DKKDänische Krone
  • HKDHongkong Dollar ($)
  • HUFUngarischer Forint
  • ILSIsraelischer Schekel (₪)
  • JPYJapanischer Yen (¥)
  • MYRMalaysischer Ringgits
  • MXNMexikanischer Peso ($)
  • NZDNeuseeland Dollar ($)
  • NOKNorwegische Krone
  • PHPPhilipinischer Pesos
  • PLNPolnischer Zloty
  • SGDSingapur Dollar ($)
  • SEKSchwedische Krone
  • CHFSchweizer Franken
  • TWDTaiwan New Dollar
  • THBThai Baht (฿)
  • INRIndische Rupie (₹)
  • TRYTürkische Lira (₺)
  • RUBRussischer Rubel