Ein individuelles Blog-Layout erstellen mit dem kostenlosen Theme Atahualpa: Anleitung

Header Area

Style & edit HEADER AREA

Unter die­sem Punkt wird der Hea­der­be­reich des Ata­hu­al­pa-The­mes gestal­tet. Dazu gehö­ren nicht nur die groß­for­ma­ti­gen Bil­der, son­dern auch das Logo, die Sei­ten- und Kate­go­ri­en­na­vi­ga­ti­on, der Blog­ti­tel, das Such­feld usw.

Standardheader von Atahualpa

Hea­der­be­reich des Atahualpa-Themes

Da ich nur eine Hea­der­gra­fik (kein Logo) mit ein­ge­füg­tem Schrift­zug ver­wen­de, sehen mei­ne Ein­stel­lun­gen fol­gen­der­ma­ßen aus:

Configure Header Area
%logo %bar2 %pages %cats %image

Den Log­obe­reich las­se ich in der Kopf­ge­stal­tung drin, obwohl ich kein Logo­bild ver­wen­de, denn im Log­obe­reich befin­det sich das Such­feld, und das habe ich über mei­ner Hea­der­gra­fik stehen.


WERBUNG

Real Coo­kie Ban­ner 20 Pro­zent günstiger

Bist du auf der Suche nach einem ein­fach zu bedie­nen­den Coo­kie-Ban­ner-Plugin? Und über DSGVO- und ePri­va­cy Richt­li­nie kon­for­me Ein­wil­li­gungs­mög­lich­kei­ten soll­te es auch verfügen?

Dann ist Real Coo­kie Ban­ner genau das rich­ti­ge Plugin. Ich set­ze es eben­falls auf mei­nem Blog hier ein und fin­de die Fea­tures mehr als gelungen.

Die Sin­gle-Lizenz kos­tet 49 Euro pro Jahr. Gib beim Plugin-Kauf den Code „GELDONLINEBLOG“ ein und du erhältst Real Coo­kie Ban­ner für nur 39,20 Euro.

Real Coo­kie Ban­ner kaufen*


Logo Area: Styling
background: #446193;

Show Logo Image: Feld leer lassen

Show Blog­tit­le: No

Show Search Box: Yes

Text in Hea­der Search Box: Such­be­griff ein­ge­ben und Ein­ga­be­tas­te drücken …

Horizontal Bar 1: Styling
height: 5px;
background: #5c77a8;
Horizontal Bar 2: Styling
height: 5px;
background: #466294;

Mit die­sen Bars kannst du Lini­en sowie Rah­men unter­schied­li­cher Brei­te und Far­be in den Hea­der­be­reich ein­fü­gen und dabei auch mehr­mals einbinden.

Header Image

Hier stellst du ver­schie­de­ne Optio­nen für dei­ne Hea­der­gra­fik oder ‑gra­fi­ken ein. Wenn du meh­re­re Hea­der­gra­fi­ken ein­setzt, kannst du die­se mit­hil­fe von Java­Script (ers­tes Feld, Wert höher als 0 set­zen) rotie­ren oder mit einem Abblend-Effekt (FadeIn/​FadeOut) anzei­gen las­sen (Wert höher 0 setzen).

Wich­tig ist auch noch, die Höhe der Hea­der­gra­fi­ken unter Hea­der Image: Height zu set­zen. Wer an den Rän­dern der Hea­der die­se hel­le­re Schicht (Opa­ci­ty) nicht möch­te, setzt bei die­sen Fel­dern den Wert auf 0.

Atahualpa Einstellunen Header

RSS Settings

Falls du das RSS-Sym­bol und das Sym­bol für den Kom­men­tar­feed ganz oben rechts im Hea­der­be­reich haben willst, brauchst du hier nichts Wesent­li­ches zu ändern.

Willst du eines der Sym­bo­le oder bei­de ent­fer­nen, stellst du bei Show Post Feed Icon und/​oder bei Show Com­ment Feed Icon den Wert auf No.

Das glei­che betrifft das Feedbur­ner E‑Mail Icon.

MENU 1 (Page Menu)

Unter die­sem Punkt kannst du das MENU 1 gestal­ten. Dort wer­den nor­ma­ler­wei­se sta­ti­sche Sei­ten ein­ge­baut, aber man kann natür­lich auch Kate­go­rien­sei­ten vom Blog ein­fü­gen (sie­he Auf­bau unter Design — Menüs).

Atahualpa Einstellungen Menu

Da du im Wor­d­Press-Dash­board unter Design — Menüs dei­ne Menü­leis­ten indi­vi­du­ell gestal­ten kannst, ist die­ser Punkt bei Ata­hu­al­pa haupt­säch­lich für das Lay­out des Menüs wichtig.

Sei­ten aus­schlie­ßen (Exclu­de Pages …) für die Navi­ga­ti­on brauchst du hier­über nicht mehr.

Ich habe fol­gen­de Ein­stel­lun­gen vor­ge­nom­men (sie­he Bild):

Atahualpa Einstellungen Menü

Genau­so habe ich auch das MENU 2 (Cate­go­ry Menu) gestaltet.

Center Column

Style & edit CENTER COLUMN

Hier geht es um den Inhalts­be­reich, also den Bereich, wo die Blog­bei­trä­ge ange­zeigt wer­den. Du kannst hier den Stan­dard­wert so las­sen, aber auch den Inhalts­be­reich in Hin­ter­grund­far­be dei­ner Gestal­tungs­idee anpas­sen, sodass noch ein back­ground-Wert ein­ge­fügt wer­den muss.

Ich habe in dem Feld Cen­ter Column Style fol­gen­de CSS:

padding: 5px 20px 10px 20px;
background: #ffffff;
border-right: dashed 1px #ddd;

Previous/​Next Navigation

Du kannst mit dem Ata­hu­al­pa-The­me ober­halb und/​oder unter­halb eines Blog­bei­trags eine Navi­ga­ti­on für die Ansteue­rung des vor­he­ri­gen oder nächs­ten Bei­trags ein­fü­gen (sie­he Bild unten). Dies geht über den Punkt Previous/​Next Navigation.

Atahualpa Next Navigation

Ich habe die­se nütz­li­che Navi­ga­ti­on unter dem Bei­trag unter­halb des Kom­men­tar­felds eingefügt.

Mei­ne Ein­stel­lun­gen sind die folgenden:

Atahualpa Nextnavigation

Atahualpa Nextnavigation

Atahualpa Nextnavigation

Die Plat­zie­rung der Navi­ga­ti­on lässt sich über die Loca­ti­on-Fel­der bestim­men. Bot­tom ist unten, Top oben.

Sidebar und Widgets

Style & configure SIDEBARS

Du kannst mit dem The­me bis zu vier Side­bars ein­fü­gen, eine lin­ke, eine lin­ke inne­re, eine rech­te und eine rech­te inne­re. Vier Side­bars auf ein­mal machen aller­dings nicht so viel Sinn.

Aber mit den vier Optio­nen kannst du ver­schie­de­ne Side­bars erstel­len und sie ver­schie­de­nen Sei­ten oder Blog­ka­te­go­rien über deren ID zuweisen.

Du kannst über das Set­zen von Häk­chen fest­le­gen, auf wel­chen Sei­ten die jewei­li­ge Side­bar ange­zeigt wird und über die jewei­li­gen Fel­der Don’t dis­play … Berei­che aus­schlie­ßen, indem du in die Fel­der die jewei­li­gen IDs der Sei­ten oder Kate­go­rien einträgst.

Wei­ter auf der Sei­te hast du die Mög­lich­keit, die Brei­te der Side­bars fest­zu­le­gen (in Pixel) und ganz unten kannst du die Side­bars mit CSS-Ein­stel­lun­gen gestal­ten (Rah­men bestim­men, Hin­ter­grund­far­be fest­le­gen, Abstand ein­stel­len, Schrift­art fest­le­gen usw.)

Ich habe in mei­nem The­me nur eine rech­te Side­bar fest­ge­legt und die Ein­stel­lun­gen für die­se sehen so aus:

Ich habe der Side­bar eine Brei­te von 325 Pixel gege­ben und sie bis auf zwei Sei­ten für alle Blog­be­rei­che eingeblendet.

Gestal­te­risch habe ich nicht viel vor­ge­nom­men, außer dass ich den Bereich mit einer gestri­chel­ten Linie abgren­ze, einen wei­ßen Hin­ter­grund ver­ge­be und bestimm­te Abstän­de zu Rand und Inhalt über Pad­ding festlege:

border-left: dashed 1px #CCCCCC;
background: #ffffff;
padding: 10px 20px 10px 10px;
Atahualpa Sidebar
Atahualpa Sidebar

Style WIDGETS

Über die­sen Bereich wer­den die Wid­ge­ts-Con­tai­ner, die in die Side­bar gezo­gen wer­den, gestal­tet. In mei­nem Blog hat jedes Wid­get eine blaue Über­schrift in Kapi­täl­chen mit einen dün­nen Unterstrich.

Wid­get Container:

margin: 0 0 15px 0;

Wid­get Title:

text-align: left;
color: #7990B0;
font-family: arial, serif;
font-size: 16px;
padding-bottom: 5px;
padding-left: 4px;
background:#ffffff;
border-bottom: solid 1px #eeeeee;
text-transform: uppercase;

Wid­get Con­tent Box:

padding: 10px 5px 5px 0;

Wid­get Item List:

Atahualpa Widgetlist

Add Dynamic Widget Areas

Die­ser Bereich des Defi­nie­rens neu­er Wid­ge­t­be­rei­che im The­me (außer­halb der Side­bars) ist etwas kom­plex und soll­te von Ein­stei­gern ver­nach­läs­sigt werden.

Post und Pages

Edit POST/​PAGE INFO ITEMS

Unter die­sem Punkt kannst du dei­nen Blog­bei­trä­gen in bestimm­ten Berei­chen (sie­he Gra­fik: blau ein­ge­zeich­net) Gra­fi­ken und Infor­ma­tio­nen mitgeben.

Atahualpa Postitem-Bereiche

So las­sen sich Icons ein­bin­den, wie eine Sprech­bla­se für Kom­men­ta­re, ein Ord­ner­sym­bol für Kate­go­rien, ein Kalen­der für das Datum usw.

Die Icons und die Varia­blen für den ent­spre­chen­den Text fin­dest du auch unter Post & Pages aufgeführt.

Ich habe auf Geld-online-Blog in der Byline ein Datum-Icon mit Datums­an­ga­be (Ver­öf­fent­li­chungs­da­tum des Bei­trags) und eine Sprech­bla­se für Kom­men­ta­re eingefügt.

Im Foo­ter fin­den sich ein Icon für Kom­men­ta­re und eins für Tags (sie­he Bild unten).

Atahualpa Beispiel Postitem

Für sta­ti­sche Sei­ten habe ich kei­ne Byline und kei­nen Foo­ter erstellt. Das geht aber auch, wer dies möchte.

Style POSTS & PAGES

Hier­über las­sen sich die ein­zel­nen Sei­ten- und Blog­be­rei­che mit­tels CSS gestalten.

All­zu vie­le gestal­te­ri­sche Mit­tel set­ze ich auf mei­nem Blog nicht ein, nur die Über­schrift­far­be und ‑schrift­art.

Hier die Einstellungen:

POST CONTAINER

margin: 0 0 30px 0;

HEADLINE BOX: Text

padding: 10px  0 0 0;

HEADLINE BOX: Links

color:#AE2B3D;

HEADLINE BOX: Links: Hover

color: #B12A3A;

FOOTER BOX: Links

color: #333;

FOOTER BOX: Links: Hover

color: #333;

Configure EXCERPTS

Unter die­sem Punkt kon­fi­gu­rierst du die Dar­stel­lung des Blog­ar­ti­kels auf ver­schie­de­nen Übersichtsseiten.

Nor­ma­ler­wei­se wird ein Blog­ar­ti­kel auf einer Über­sichts­sei­te wie der Start­sei­te nur ange­ris­sen ange­zeigt, also ein kur­zer Text­ab­schnitt und dazu meist ein Weiterlesen-Link.

Die­sen Anriss oder Exzerpt kannst du indi­vi­du­ell anpas­sen. Willst du immer eine iden­ti­sche „Text­men­ge“ als Anriss, dann soll­test du auf der Sei­te über­all bei Posts or Excerp­ts on … den Wert Only Excerp­ts einstellen.

Die Län­ge des Exzerp­ts ist bei Ata­hu­al­pa auf 55 Zei­chen ein­ge­stellt. Die­sen Wert kannst du natür­lich verändern.

Willst du die Exzerpt-Län­ge von Bei­trag zu Bei­trag indi­vi­du­ell gestal­ten, soll­test du beim Ver­fas­sen des Arti­kels den More- (oder Weiterlesen-)Link mit­hil­fe des Text-Edi­tors einfügen.

Dann soll­test du unter Con­fi­gu­re EXCERPTS bei Posts or Excerp­ts on … den Wert auf Full Posts setzen.

Atahualpa Excerpts

Post THUMBNAILS

Jedem Blog­ar­ti­kel kannst du im Anriss ein Vor­schau­bild hin­zu­fü­gen. Die Ein­stel­lun­gen dazu fin­dest du unter Post THUMBNAILS.

Unter Width und Height kannst du die Stan­dard­wer­te von 150 Pixel ent­we­der hoch- oder run­ter set­zen. Aller­dings fin­de ich, soll­te man nicht höher als bis 250 Pixel gehen, sonst wird das Bild zu groß.

Unter Crop Post Thumb­nails kannst du ent­we­der Yes oder No ein­stel­len. Bei Yes wird das Vor­schau­bild immer auf die ange­ge­be­ne Grö­ße unter Width und Height zurechtgeschnitten.

Setzt du bei­spiels­wei­se ein Vor­schau­bild mit der Ori­gi­nal­grö­ße von 600×400 Pixel ein, wird das Bild in ein Grö­ßen­for­mat von 150×150 Pixel ver­klei­nert und dadurch wer­den auch Bild­be­rei­che weg­ge­schnit­ten (außer das Bild ist in Ori­gi­nal­grö­ße auch qua­dra­tisch, also bei­spiels­wei­se 400×400 Pixel).

Setzt du das Crop-Feld auf den Wert No, wird das Bild in ein Grö­ßen­for­mat von 150×100 Pixel (bei der oben genann­ten Ori­gi­nal­grö­ße von 600×400 Pixel) verkleinert.

Mit Crop = Yes bekommst du Vor­schau­bil­der mit immer der glei­chen Grö­ße, mit No nicht.

Vor­schau­bil­der fügst du bei der Blog­ar­ti­kel­er­stel­lung auf der rech­ten Sei­te unter Bei­trags­bild mit einem Klick auf Bei­trags­bild fest­le­gen ein.

Unter Post Thumb­nail CSS kannst du schließ­lich auch die Gestal­tung des Vor­schau­bil­des anpas­sen. Stan­dard­mä­ßig ist es links aus­ge­rich­tet (float: left). Du kannst es auch rechts aus­rich­ten, wenn du „left“ zu „right“ änderst.

Hin­weis: Vor­schau­bil­der wer­den auf Über­sichts­sei­ten nur ange­zeigt, wenn du unter Con­fi­gu­re EXCERPTS den Wert auf Only Excerp­ts ste­hen haben.

„Read More“ Tag

Hast du dich für die indi­vi­du­el­le Exzerpt-Vari­an­te mit dem More-But­ton ent­schie­den, kannst du die­sen Link unter die­sem Punkt anpassen.

Stan­dard­mä­ßig fügt Ata­hu­al­pa Con­ti­nue rea­ding %post-tit­le% als Wei­ter­le­sen-Link ein (also Con­ti­nue rea­ding plus Blogtitel).

Ich ver­wen­de die deut­sche Vari­an­te Zum voll­stän­di­gen Arti­kel „%post-tit­le%“.


WERBUNG

Real Coo­kie Ban­ner 20 Pro­zent günstiger

Bist du auf der Suche nach einem ein­fach zu bedie­nen­den Coo­kie-Ban­ner-Plugin? Und über DSGVO- und ePri­va­cy Richt­li­nie kon­for­me Ein­wil­li­gungs­mög­lich­kei­ten soll­te es auch verfügen?

Dann ist Real Coo­kie Ban­ner genau das rich­ti­ge Plugin. Ich set­ze es eben­falls auf mei­nem Blog hier ein und fin­de die Fea­tures mehr als gelungen.

Die Sin­gle-Lizenz kos­tet 49 Euro pro Jahr. Gib beim Plugin-Kauf den Code „GELDONLINEBLOG“ ein und du erhältst Real Coo­kie Ban­ner für nur 39,20 Euro.

Real Coo­kie Ban­ner kaufen*



Schreibe einen Kommentar

WordPress Cookie Hinweis von Real Cookie Banner