<blockquote>: Zitate und Entre-Filets hübsch gestalten

8. März 2021 | HTML, WordPress

Geschätzte Lesezeit für diesen Beitrag: ca. 4 Minuten.

Der HTML-Tag <blockquote> ist eine nicht sehr häufig genutzte, aber sehr gute Möglichkeit, um Texte zu gestalten. Kernaussagen, Zitate oder «Entre-Filets» werden damit hervorgehoben und dienen der Auflockerung des Textflusses. Die meisten Themes liefern jedoch von Haus aus leider eher schwach gestaltete Blockquotes. Mit wenig CSS lassen sie sich aber einfach aufhübschen.

Blockquotes sind eine hübsche Sache; jedoch muss der Darstellung – je nach Theme, das Sie einsetzen – noch ein wenig auf die Sprünge geholfen werden. In der Tat verkaufen die meisten Themes die Blockquotes unter ihrem Wert: meist sind sie nicht sonderlich ansprechend ausgearbeitet. Aber die Sache ist einfach zu lösen.

Einen Abschnitt als <blockquote> zu markieren, geht ganz einfach. Sie haben im Text-Editor – zum Beispiel von WordPress – folgendes Icon (oder ein ähnliches) in der Menüleiste:

Wenn Sie einen Textabschnitt markieren und dann dieses Icon anklicken, wird dieser Abschnitt besonders dargestellt. In unserem Fall etwa so:

«Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.»

Dahinter verbergen sich bloss ein paar Zeilen CSS-Code, welche beim Aufruf des HTML-Tags <blockquote> aktiv werden.

Den CSS-Code fügen Sie in das CSS-Stylesheet Ihrer Website ein – Sie erreichen es unter Design/Customizer/Zusätzliches CSS:

blockquote {
border-top: solid 3px #293280;
border-bottom: solid 3px #293280;
font-family: 'Montserrat';
border-left: 0px;
float: left;
padding: 30px;
max-width: 50%;
min-width: 350px;
margin-right: 50px;
color:#293280 !important; 
font-weight: 400 !important;
line-height:1.7 !important;
font-size:25px !important;
text-align: center;
}

Den Code können Sie natürlich gut Ihren Bedürfnissen entsprechend anpassen.

<blockquotes> für unterschiedliche Anzeigen optimieren

Ich habe noch ein wenig weiter an den <blockquotes> gearbeitet. Angaben zu den Rändern, zur Breite und zur textumfliessenden Darstellung habe ich – je nach Bildschirmbreite – angepasst und in Media-Queries verschoben. Das hat folgenden Code ergeben:

blockquote {
border-top: solid 3px #293280;
border-bottom: solid 3px #293280;
font-family: 'Montserrat';
border-left: 0px;
padding: 30px;
color:#293280 !important; 
font-weight: 400 !important;
line-height:1.7 !important;
font-size:25px !important;
text-align: center;
}

@media only screen and ( min-width: 768px ) { 
  blockquote {margin-left: 30px;
  margin-right: 50px;
  float: left; 
  max-width: 50%;
  min-width: 350px;}
}

@media only screen and ( max-width: 767px ) { 
  blockquote {width: 100%;}
}

Auf den Zeilen 1-12 sind jetzt nur noch Angaben vermerkt, welche bei der Darstellung von Blockquotes in jedem Fall gelten sollen. Die «Spezialfälle» folgen dann auf den Zeilen 14-24.

Der <blockquote> – wie oben dargestellt – passt sich nun automatisch der Bildschirmgrösse an; der Wechsel der Darstellung ist bei einer Anzeigebreite von 768px festgelegt.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.









Vielen Dank.

Pin It on Pinterest

Share This