261 | 207-4a1d t004

Überschrift nicht in der Überschrift

Wir fangen mit der Überschrift an. Warum? Weil wir die auch gestalten wollen. Und dort, wo sie ein eigenes Textfeld hat, schaut es triste aus mit der Gestaltung.

Wir tippen hier die Überschrift im Text.

Dann wird der Text begonnen: Jetzt bist Du dran. Wenn der Text fertig ist, markieren wir die Überschrift mit der Maus. Das sieht dann so aus, wie ich es bereits markiert habe.

Jetzt klicken wir auf "Formate" im Menü des Editors und wählen im Klappmenü "Überschrift". das sieht dann so aus:

Wir tippen hier die Überschrift im Text.

Vorteile sind hier neben der Möglichkeit der Gestaltung - innerhalt eines Textblocks - Überschriften zu verwenden. 

Text farbig zentriert auf Hintergrund gerahmt

Beispielsweise wollen wir der Überschrift ausstatten mit Farbschrift, Hintergrund, Rahmen und Schrift zentriert (in der Mitte). Dann sehen wir wie das wirkt als;

Farbschrift zentriert auf Hintergrund gerahmt.

Jetzt das ganze Geheimnis: 

Den folgenden, gerahmten Text kannst Du kopieren nach Deinen zu bearbeitenden Artikel.

  • Kopiere den gerahmten Text mit Strg C.
  • Klicke in einem Deiner Textbllöcke auf die Raute oben rechts im Editor.
  • Übertrage den Text mit Strg V (Paste).

Von dieser Basiskopie (Original) in Deinem Textblock kannst Du jederzeit den Kode kopieren und den Text durch Deinen ersetzen,

Nicht benötigte Instruktionen werden gelöscht und Farben und Attribute angepasst via Raute.

Quellcode Textfarbe Hintergrund Rahmen zum Kopieren

<div><p style="background: #ffe; border: 0.2em solid #c36; color: #c36; padding: 0.2em;
text-align: center;">------- Hier dazwischen Dein gesamter Text --------</p></div>

Tipp Vorgehensweise:

  1. Kopiere roten Quellcode oben mit Paste Strg C
  2. Lade in Deinen Textbaustein mit klick Quelleneditor <> mit Strg V Deinen Text
  3. Weiter bearbeiten mit Texteditor (<> verlassen)
  4. Deinen Text in Baustein einfügen
  5. Tausche beliebig Eigenschaften wie #RGB 0.2em aus.
  6. Unterdrücke nicht gewünschter Elemente mit Ändern: 
  7. Ausschalten Größe = 0em, Farbe = #fff weiß, #000 schwarz oder beliebig.
  8. Rahmen (Border) oder Abstand (Padding) 1em = eine Zeichenbreite
  1. Color = Farbe des Textes
  2. padding = Raum (Abstand) zwischen Schrift und Rahmen
  3. Text-align = Ausrichtung des Textes, center = mittig 
  4. <div> zu Beginn und </div> am Ende = Sperre für Werbetexte innert dieser Klammerung.

Diese fünf Instruktionen schenken uns eine wunderbare Freiheit des Gestalten und Strukturieren des Textes. 

Die Eigenschaften zu den Instruktionen sind variabel (nach Belieben):

  1. #RGB = Farbe Rot Grün Blau (siehe Artikel farbig gestalten in Pagewizz und Webseiten).
  2. n.n em = Breite für Rahmen, Abstand, etc.
  3. center = zentriert, weitere left, right, justify (Blocksatz).

Weitere Beispiele und Anregungen

Der folgende Textblock zeigt Dir sicher, wie wirksam die Instruktion style einsetzbar ist. Hier werden von mir bewusst auch kräftigere Farbtöne eingesetzt. Es ist das Angebot an meine Besucher, weitere meiner Berichte zu lesen. Beginnt die Textreise, dann verdoppelt sich die Besuchszahl. Das habe ich bereits in einem anderen Bericht vorgeschlagen.

Der Trick mit der rechten Maustaste oder Strg U

Mit dem Anzeigen des Seitenquelltextes und Suchen eines Textes zeigt sich Dir der Quellcode. Beispielsweise die Suche (Fn3) nach "Dauer ab Stunden" verraten die Farbcodes der für mich angenehmen Hintergründe. Dem Besucher signalisieren sie die Dauer der Tour von grün bis violett. Damit schenken Farben dem Leser eine weitere, bildliche Information.

Diese Instruktionen werden Dir gezeigt. Allerdings nicht aufbereitet. Gesunder Menschenverstand hilft hier weiter:

  1. Einfach den kompletten Seitenquelltext nach Libre Office oder Editierprogramm kopieren (paste),
  2. jetzt bis Suchbegriff alles löschen,
  3. dann nach "6,6" alles löschen.
  4. Das Ergebnis sieht so aus (Rahmenbreite 0em, background:#eed, padding:2.0em)
  5. Hier interessieren nur die Farben #RGB (Rot Grün Blau):

<table> <tr style="background: #37a; color: #123;">
<td style="width: 9.7%;">
<div style="text-align: center; margin: 4px 0px 4px 4px; background: #9dc;"><strong><a href="/39418/"> 1</a></strong></div></td>
<td style="width: 9.7%;">
<div style="text-align: center; margin: 4px 0px 4px 1px; background: #9ea;"><strong><a href="/2811/"> 1</a></strong></div></td>
<td style="width: 9.7%;">
<div style="text-align: center; margin: 4px 0px 4px 1px; background: #bfa;"><strong><a href="/2705/"> 1,8</a></strong></div></td>
<td style="width: 9.7%;">
<div style="text-align: center; margin: 4px 0px 4px 1px; background: #dfa;"><strong><a href="/2863/"> 2,6</a></strong></div>
</td>
<td style="width: 9.7%;">
<div style="text-align: center; margin: 4px 0px 4px 1px; background: #fe6;"><strong><a href="/7018/"> 3</a></strong></div></td>
<td style="width: 9.7%;">
<div style="text-align: center; margin: 4px 0px 4px 1px; background: #fd6;"><strong><a href="/37571/"> 3,7</a></strong></div></td>
<td style="width: 9.7%;">
<div style="text-align: center; margin: 4px 0px 4px 1px; background: #fc9;"><strong><a href="/26841/"> 4,4</a></strong></div></td>
<td style="width: 9.7%;">
<div style="text-align: center; margin: 4px 0px 4px 1px; background: #fa9;"><strong><a href="/30619/"> 5,1</a></strong></div></td>
<td style="width: 9.7%;">
<div style="text-align: center; margin: 4px 0px 4px 1px; background: #fcf;"><strong><a href="/34563/"> 5,6</a></strong></div></td>
<td style="width: 9.7%;">
<div style="text-align: center; margin: 4px 0px 4px 1px; background: #ccf;"><strong><a href="/36333/"> 6,6</a></strong></div></td>
</tr> </table>

Wandern Allgäu und Vorarlberg 

Finde Touren über Tour-Arten mit Kurzinfo oder direkt über die Dauer ab-Stunden
Touren in Sonthofen Hindelang Oberstdorf
Dauer ab Stunden: Sunden errechnet aus: km/4 plus hm/400
#Wandertouren #Oberstdorf #Sonthofen #Hindelang #primapage #bildband
 Wanderziele finden in den Regionen Bayern, Tirol, Berner Oberland und Savoyen
Berwang roter stein ehrwald reutte zugspitze Schafreuther Karwendel bayern tirol Achensee pertisau tirol Bonderspitz Blick Öschinensee Adelboden Berner Oberland Mont Blanc Blick Aufstieg zum Mont Joly Savoyen
#JohannSchubert #primapage #allgäu (207-4a1d a207.1 t50) #wandern #touren #alpen
primapage, vor 25 Tagen
7 Kommentare Melde Dich an, um einen Kommentar zu schreiben.


Laden ...
Fehler!