Skip to main content

Gastbeitrag von Tobias Jakob.

Bei dieser Webseite handelt es sich letztlich um ein typisches Affiliate-Portal, umgesetzt mit dem affiliatetheme.io und einigen Plugins. Der Fokus hierbei war und ist es, die Benutzbarkeit und die Zielführung für den Besucher der Seite möglichst effizient zu gestalten (Natürlich sollte dies immer der Fall sein, jedoch habe auch ich in der Vergangenheit wenig durchdachte Nischenseiten erstellt).

 

In diesem Artikel findest Du:

  • allgemeine Prinzipien und Ansätze
  • strukturelle Aspekte
  • Gestaltungsaspekte (inklusive mancher CSS-Snippets)
  • eine Betrachtung von Desktop vs. Mobile
  • sowie eine Liste von verwendeten Plugins.

Achtung: Dieses Projekt und ich erheben nicht den Anspruch auf eine perfekte Umsetzung. Das Portal ist noch sehr neu und noch nicht in seinem Endzustand. Ich bin offen für Vorschläge und Anmerkungen. Danke 🙂

 

Grundlegende Prinzipien

Was bedeutet Kundennutzen?

Ziel einer jeden kundenbezogenen Webseite sollte es sein, für den Besucher einen gewissen Nutzen / Mehrwert zu schaffen. Doch was bedeutet das eigentlich? Das hängt immer vom jeweiligen Anwendungsfall und der Besucherintention ab. Im Rahmen eines Amazon-Affiliate-Portals kann Nutzen beispielsweise bedeuten, dem Besucher wichtige Informationen zu liefern oder ihm dabei zu helfen, ein Wunschprodukt möglichst effizient zu finden.

 

Zufriedene Besucher sorgen für einen zufriedenen Geldbeutel

Viele Affiliate-Seiten versuchen dem Besucher einfach schnell einen Cookie unterzujubeln und vergessen dabei, tatsächlichen Wert für diesen zu generieren. Es sollte sich aber vielmehr darauf konzentriert werden, ihn dort abzuholen, wo er Hilfe benötigt und ihn dann zu seinem gewünschten Outcome zu führen. Das sorgt nicht nur für mehr verkaufte Produkte, sondern ist auch in Hinsicht auf die Zukunft des gesamten SEO-Bereichs sinnvoll.

 

Content ist nicht immer Text

Ein weiterer Aspekt, den ich bei diesem Projekt versucht habe zu berücksichtigen, ist die Verwendung von unterschiedlichen Content-Arten. Content bedeutet nicht immer Text, auch wenn Text in den meisten Fällen unverzichtbar für ein gutes Ranking ist. Auch interaktive-Elemente, Bilder, Videos, Listen, Präsentationen (Slideshare, etc.) und Vieles mehr sind Arten von Content, die sich positiv auf ein Ranking auswirken können. Mit Hilfe des affiliatetheme.io ergeben sich viele Möglichkeiten zur Gestaltung von Affiliate-Seiten und bezüglich Content-Kreierung und –Management.

 

Der Aufbau des Portals

Der Aufbau durchzieht mehrere Ebenen, die mittels WordPress und dem ATIO automatisch und generisch vorhanden sind.

 

Webseiten-Header

Wie gewohnt, befindet sich ein Kopfbereich ganz oben auf der Seite. Dieser spielt vor allem für das Branding und den Wiedererkennungswert des Portals eine Rolle. Im Kopfbereich befindet sich zum einen das Logo, aber auch eine Topbar, die mit einem Schriftzug das Thema sowie Seriosität klarmachen soll. Beides lässt sich ganz einfach unter dem Menüpunkt „Optionen » Design“ im WordPress- Backend anpassen.

Neben dem Wiedererkennungswert wird hier auch direkt über das Suchfeld ein Einstiegspunkt für den Benutzer gegeben. Dieses findet man bei den meisten WordPress-Themes eingebettet in die Navigation. Diese Möglichkeit bietet auch das Affiliatetheme. Die Einbettung des Suchfeldes im Kopfbereich kann über den Menüpunkt „Optionen » Design » Header“ durchgeführt werden. Dazu wird der entsprechende html-Code des Suchformulars dort verwendet:

<form class="navbar-form navbar-right form-search " action="http://yourdomain.tld">
	<div class="input-group">
		<input type="text" class="form-control" name="s" id="name" placeholder="Suche nach">
		<span class="input-group-btn">
			<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
		</span>
	</div>
</form>

Neben dem Suchfeld wird hier außerdem ein Link zum Amazon-Warenkorb aufgeführt, wodurch der Benutzer einfach von diesem Portal aus seinen Warenkorb bei Amazon einsehen kann. Das affiliatetheme.io bietet auch einer Erweiterung an, mit der ein Warenkorb direkt auf der Webseite realisiert werden kann. Ich habe mich hier jedoch für die einfache und schlichte Variante des Links entschieden.

 

Navigation

Wie auch der Header, ist die Navigation der Webseite ein Element, das global über alle Unterseiten hinweg sichtbar ist. Das wichtige bei der Navigation ist, dass sie dem Besucher eine Übersicht über verschiedene Einstiegspunkte der Seite bietet und ihn durch das Portal leitet. Für das Getränkekühlschrank-Portal wird dafür außerdem die Option des Sticky-Menüs gewählt, die dafür sorgt, dass die Menü-Leiste stets oben am Fensterrand verfügbar ist. So wird eine flexible Navigation, unabhängig von der vertikalen Position auf der Seite ermöglicht.

Für das Menü wird zudem das Plugin „UberMenu“ verwendet. Dieses ermöglicht eine komfortable und vor allem benutzerdefinierte Erstellung von Menüs. So besteht die Navigation aus mehreren unterschiedlichen Elementen, die verschiedene Zwecke verfolgen.

 

Grid-Menü für Kategorien und Größen

Die Einträge für die Kategorien und die Größen werden dabei in Form eines Megamenüs realisiert, welches im Spalten-Layout die Menüpunkte mit Bildern darstellt. Ziel dessen ist nicht nur die allgemeine Optik, sondern auch die verbesserte Visualisierung des dahintersteckenden Inhalts für den Besucher, was für eine bessere Klickrate sorgt.

 

Flyout-Menü für Preisklassen, Ratgeber und Blog

Für die Menüpunkte Preisklasse, Ratgeber und Blog wird ein Flyout-Menü gewählt, sprich eine einfache Auflistung der Menüpunkte. Für den Ratgeber und den Blog werden dazu dynamisch Beiträge aufgeführt, die zur entsprechenden Kategorie gehören. Das bedeutet, dass ein neuer Beitrag hier direkt nach seiner Veröffentlichung automatisch im Menü auftaucht.

 

Alphabetisches Megamenü für Marken

Für die Navigation zu bestimmten Marken wird im Getränkekühlschrank-Portal ein Megamenü gewählt, dass diese alphabetisch sortiert aufführt. Dies ist manuell umgesetzt, indem nicht verlinkte Menü-Einträge als Alphabet-Einträge (A, B, C, …) dienen und diesen dann die Marken-Einträge entsprechend zugeordnet werden. Für das Styling bekommen Alphabet-Einträge eine extra Klasse, die dann mittels CSS angesprochen wird.

Damit ihr Menüeinträgen eine individuelle CSS-Klasse geben könnt, müsst ihr unter „Design » Menu“ eventuell oben rechts auf Anpassen klicken und dort die Anzeige zunächst aktivieren.
.alphabet-entry {
    background-color: rgba(237, 242, 247, 0.88);
    padding: 1px;
    padding-left: 10px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 20px;
    color: #4d4d4d;
}

 

Custom-Content für Bestseller

Zu guter Letzt wird das Bestseller-Submenü über einen Custom-Content-Eintrag umgesetzt. Dies ermöglicht die Einbettung einer kurzen Produktliste des Affiliatethemes mittels Produkt-Shortcode. Es handelt sich also um zwei Spalten, während die erste Text und einen Button enthält und die zweite den besagten Shortcode des Affiliatethemes. Es ist zu erwähnen, dass der Klick auf eines der Hauptmenüeinträge (z.B. „Marken“) zudem zu einer Seite führt, welche die ebenfalls aufführt.

 

Startseite

Die Startseite des Portals hat vor allem eine Funktion: Den Besucher zur passenden Kategorie weiterzuleiten. Kommt ein Besucher beispielsweise ausgehen von einer Google-Suche auf die Getränkekühlschrank-Startseite, so ist es hier wichtig, nicht direkt Produkte aufzuführen. Grund dafür ist, dass der Begriff „Getränkekühlschrank“ ein Oberbegriff für verschiedene Kategorien ist.

 

Teaser

Sucht als eine Person nach einem Getränkekühlschrank, so muss sie in die entsprechende Kategorie weitergeleitet werden und zwar am besten möglichst schnell und einfach. Zu diesem Zweck wird direkt eine Auswahl ausgewählter Kategorien aufgeführt (siehe folgendes Bild):

Hierzu wird die Teaser-Funktion des Affiliatethemes verwendet. Diese ermöglicht es, ober halb des eigentlichen Inhalts einer Seite einen Teaser einzufügen (Die Einstellung dazu findet ihr immer im Bearbeitungsmodus der jeweiligen Seite unter „Teaser“). Teaser können verwendet werden, um dort Slider zu realisieren. Im Fall des hier vorgestellten Portals wird jedoch kein Slider umgesetzt, sondern vielmehr nur ein Bild mit Inhalt präsentiert.

Im Vordergrund des Bildes ist dann via HTML, CSS und etwas JavaScript eine Auswahl an Kategorien als Kacheln aufgeführt, die bei einem Mouseover/Hover über eine der Kacheln alle anderen transparenter machen. Außerdem erscheint mit einer kleinen Slide-Animation ein weiteres Element, welche kurze Infos und ein Bild der Kategorie zeigt. Rechts daneben befindet sich ein kleiner Call-To-Action, der auffordert, direkt weiter zur gewünschten Kategorie zu finden. Ist diese nicht hier aufgeführt, so kann der Besucher über die letzte Kachel zu einer Übersicht über alle Kategorien gelangen.

Da dies ein relativ technischer Aspekt ist und definitiv nicht mehr unter „Einsteiger“ fällt (wie z.B. der o.g. CSS Code) geht hierfür auch ein Plugin wie Slider Revolution.

 

Newsletter-Anmeldung

Ein Stück weiter unterhalb des Teasers befindet sich (nachdem erneut weitere Kategorien vorgeschlagen werden) eine Sektion, in der der Besucher aufgefordert wird, sich für den Newsletter anzumelden. Hier wird ein Tripwire verwendet. Trägt der Besucher sich in die Liste ein, so erhält er nach der Bestätigung der Aktion einen Link, der ihm zu einer PDF-Datei führt. In diesem Dokument findet er fünf Punkte, die er vor der Entscheidung für einen Kühlschrank berücksichtigen oder sich zumindest dessen bewusst sein sollte. Die Technik hinter der ganzen Newsletter-Thematik ist in diesem Fall schlicht und einfach mit dem WordPress-Plugin „Mailpoet“ realisiert.

 

Carousels

In der nächsten Sektion der Startseite befinden sich dann zwei Carousels, die unterschiedliche Inhalte abbilden. Hierzu gibt es eine Reihe von Plugins, die eine solche Funktionalität hergeben. In diesem Fall wird das Plugin „Responsive Beiträge Carousel“ verwendet. Mit einem 3×3-Grid des Affiliatethemes können diese hier einfach nebeneinander angeordnet werden. Das linke Carousel zeigt verschiedene Rubriken (tatsächlich sind es Seiten, die Taxonomie-Einträge beinhalten). Das rechte Carousel zeigt Beiträge aus der „Ratgeber“-Kategorie. Dazwischen befindet sich ein Bild, über das der Besucher auch direkt zu einer Übersicht über Getränkekühlschränke direkt auf Amazon kommt.

 

Filter

Hat der Besucher bis zu diesem Punkt auf der Startseite nach wie vor nicht das gefunden, wonach er sucht, so bekommt er nun die Möglichkeit, gezielt seinen Anforderungen entsprechend das gesamte Sortiment zu durchsuchen. Dies wird über den Affiliatetheme-Filter realisiert, der hierzu sehr komfortabel ist. (Hier im Blog gibt’s übrigens eine sehr gute Beschreibung zur Anwendung)

Warum wurde der Filter nicht oben auf der Seite platziert?

Es ist sehr wichtig, den Benutzer direkt beim Aufruf der Seite anzusprechen, indem er SIEHT, was er sucht. Durch die einfache Weiterleitung ist eine Navigation zu einer bereits zutreffenderen Kategorie ohne weiteres möglich, wodurch der Besucher dann bereits relevanteren Inhalt zu Gesicht bekommt. Außerdem kann die Auswahl verschiedener Eigenschaften, wie z.B. einer Marke und einer Energieeffizienzklasse, zu einer leeren Ergebnismenge führen, was zwar vermieden werden kann, in diesem Fall jedoch möglich ist.

 

Taxonomie-Seiten

Die Taxonomie-Seiten haben in der Regel immer den gleichen Aufbau. Auch hier wird wieder versucht, eine für den Besucher logische und hilfreiche Struktur umzusetzen. Das Affiliatetheme bietet auch hierzu einige gute Hilfsmittel. Jede Seite hat zu Beginn etwas Text oder ein paar Stichpunkte. Sinn der Sache sind zum einen SEO-technischer Natur, aber auch um dem Besucher durch relevante Keywords zu bestätigen, dass er sich hier auf der richtigen Seite befindet. Außerdem wird auf dieser Ebene auf eine Sidebar verwendet, die beispielsweise einen Filter und interessante Beiträge aufführt.

 

Vergleich ausgewählter Produkte

Mittels einer horizontal orientierten Tabelle (x-Tabelle) des Affiliatethemes wird eine schöne Lösung für die Visualisierung der wahrscheinlich interessantesten Produkte der jeweiligen Taxonomie geschaffen. Dies ist vor allem bei Taxonomien ein großer Vorteil, die weitere Unterscheidungen in andere Taxonomien haben. Hier ist z.B. ein Bierkühlschrank auch ein Flaschenkühlschrank. Mit einer Auswahl von bestimmten Produkten können auf einem Blick verschiedene Arten von Flaschenkühlschränken abgebildet werden.

Eine kleine Anmerkung zur Tabelle: Das Standardverhalten der Tabelle bei kleineren Auflösungen oder Fenstergrößen in der Desktop-Version ist die Verwendung einer horizontalen Scrollbar. Ich bin kein besonders großer Fan hiervon. Daher habe ich mich dazu entschieden je nach Auflösung eine unterschiedliche Anzahl an Produkten anzuzeigen. Das untenstehende Snippet zeigt die einfache Umsetzung via CSS. Beträgt die Breite des Fensters weniger als 1200px, so wird die sechste Spalte ausgeblendet. Beträgt die Breite weniger als 992px, so wird zusätzlich die fünfte Spalte ausgeblendet. Die Pixelwerte können einfach mittels der Developer Tools des Browsers ermittelt werden.

@media (max-width: 1199px) {
    .table-product-x td:nth-child(6){display: none;}
}
@media (max-width: 991px) {
    .table-product-x td:nth-child(5){display: none;}
}

 

Das Taxonomie-Sortiment

Unterhalb Tabelle befinden sich dann alle Produkte der Taxonomie. Dies wird automatisch vom Affiliatetheme realisiert. Hierzu wurde die Grid-Ansicht als Standard gewählt, da diese mehr Produkte auf einen Blick anzeigt als beispielsweise die Listenansicht.

 

Informationen & Ähnliche Kategorien

In der darauffolgenden Sektion werden dann einige Informationen bereitgestellt. Diese sollen zum einen den Besucher abholen, der bis dahin nicht fündig geworden ist. Eine derartige (wenn auch oberflächlichere) Beratung sorgt dann auch für Vertrauen beim Kunden. Dieser Informative Abschnitt beginnt mit einem Inhaltsverzeichnis. Ein Solches lässt sich einfach entweder händisch, mittels Links zu den Überschriften, umsetzen oder über Plugins wie TOC+. Im Fall hier, wird zweitere Variante verwendet. Die Verwendung eines Inhaltsverzeichnisses ist nicht nur praktisch für den Besucher, es hat auch bezüglich der Seitenoptimierung für Suchmaschinen Vorteile.

Denn durch eine gute strukturierte „Table of Content“ kann der SERP-Eintrag um die darunter stehenden Links erweitert werden, wie hier am Beispiel von Wikipedia:

Im Rahmen der Zusammenfassung der Information wird dann auch eine kleine Präsentation via Slideshare verwendet. Dies ist etwas experimentell für mich, aber auch im allgemeinen keine schlechte Lösung, um die grundlegenden Aspekte noch einmal auf den Punkt zu bringen. Slideshare bietet dazu übrigens eigene Shortcodes an. Am Ende der Taxonomie-Seite werden dann drei ähnliche Kategorien angegeben, die für den Suchenden relevant sein könnten. Um beim bereits erwähnten Beispiel zu bleiben, kann hier jemand, der einen Bierkühlschrank sucht zur entsprechenden Taxonomie weitergeleitet werden.

 

Produkt-Seiten

Die nächst-tiefliegende Ebene der Seitenhierarchie sind die Produkt-Seiten. Hier gibt es eher weniger Ausgefallenes neben der Standardfunktionalitat die das Theme bereits mitbringt.

Es ist ein Carousel für die Produktbilder zu sehen, sowie die Eigenschaften des Produktes. Daneben befindet sich dann ein Button, der zum Partnershop führt. Unterhalb dessen befinden sich dann noch ggf. eigene Bewertungen und Kommentare, sowie eine Beschreibung etc. Auch auf dieser Seitenebene befindet sich wieder eine Sidebar mit Filter, die es dem Besucher ermöglichen soll, wenn erwünscht von dort aus weiterzusuchen. Darüber hinaus wird auf diesen Seiten die „Floating Bar“-Erweiterung verwendet, die auf der Webseite des affiliatethemes heruntergeladen werden kann. Diese zeigt ein horizontales Feld am unteren Bildschirmrand, wenn ein gewisses Stück auf der Seite nach unten gescrollt wird. Innerhalb des Feldes findet der Besucher dann eine schnelle Möglichkeit zum Partnershop zu navigieren.

 

Desktop vs. Mobile

Zum Ende hin sollen hier noch ein paar Aspekte bezüglich Desktop- und mobiler Ansicht betrachtet werden. Es ist unglaublich wichtig, dass die Webseite sowohl auf mobilen Endgeräten also auch auf Desktop-Betriebssystemen einwandfrei funktioniert. Das Affiliatetheme ist zu 100% responsible, was bedeutet, dass die Theme-Komponenten, und der gesamte Webseiten-Rahmen sowohl in der Desktop-Ansicht, als auch in der mobilen Ansicht sauber umgesetzt werden. Die Breite von Elementen passt sich dabei der aktuell verwendeten Umgebung an und Zeilenumbrüche und Umbrüche von Elementen werden sehr gut realisiert. Ein einfaches Beispiel ist hier nebenstehend zu sehen. Die Startseite, die an vielen Stellen mit Grids des Themes aufgebaut ist, bricht diese in der mobilen Version automatisch um.

Der Fakt, dass das Theme responsible ist, ist erst schon einmal super. Darüber hinaus sollte man sich allerdings auch Gedanken darübermachen, ob tatsächlich der gesamte Inhalt der Desktop-Version auch in der mobilen Ansicht sichtbar sein sollte. Hier ein paar Beispiele anhand des Getränkekühlschrank-Portals.

 

Flexible Teaser-Visualisierung nach Auflösung

Manche Dinge, die auf dem Desktop-PC sehr gut wirken, sind auf dem Smartphone gar nicht umsetzbar. Beispielsweise ist der zuvor beschriebene Teaser auf der Startseite des Getränkekühlschrank-Portals ein solcher Fall. Er hat einen besonders guten Effekt auf dem Desktop-PC, denn er ist mit praktischen, optisch ansprechenden und animierten Elementen versehen und verfügt dazu über die zusätzliche Visualisierung eines Call-to-Action. Eine solche Darstellung bietet sich jedoch nicht für alle Auflösungen an. Daher gibt es hier vier verschiedene Varianten des Teasers, die je nach Auflösung „geschaltet“ werden.

 

Großer Desktop (>=1780px)

In dieser Variante wird die volle Visualisierung angezeigt. Zu Beginn sind die Kategorie-Kacheln sowie der Pfeil mit Schriftzug sichtbar. Beim Hovern über die Kacheln erscheint die zugehörige Infobox und der Pfeil mit Schriftzug bewegt sich mit nach rechts.

Desktop Variante (1280px < Breite < 1780px)

Diese Variante zeigt zu Beginn ebenfalls die gleichen Elemente, wie die erste Variante. Jedoch verschwindet der Pfeil mit Schriftzug endgültig, sobald mit der Maus über eine Kachel gefahren wird.

Desktop Variante (1065px < Breite < 1280px)

In dieser Variante ist von vornherein der Call-to-Action (Pfeil mit Schriftzug) ausgeblendet. Ein Hover über die Kacheln führt jedoch nach wie vor zur Anzeige von Infoboxen.

Desktop Variante (Breite < 1065px) + Mobile Variante

Diese Variante zeigt ausschließlich die Kategorie-Kacheln an. Es werden alle anderen Elemente des Teaser generell ausgeblendet, sodass im Fokus des Fensters die Kacheln stehen und der Besucher der Seite direkt weiter zur entsprechenden Kategorie geführt wird.

 

Es gibt ein paar weitere Punkte, an denen Unterscheidungen gemacht wurden. Letztlich gilt es hier evtl. noch weitere Optimierungen durchzuführen, um die mobile Ansicht effizienter zu gestalten. Ein Großteil aller Besucher kommt heutzutage über Smartphones auf unsere Webseiten. Daher ist es von großer Wichtigkeit, Ihnen dabei entgegenzukommen.

Ein kurzer Hinweis zum „Ubermenu“ Plugin in der mobilen Ansicht:

Ubermenu bietet zwar Möglichkeiten eines mobilen Menüs, jedoch habe ich mich hier dazu entschieden, das Standardmenü des Affiliatethemes zu verwenden, sobald die Seite von einem mobilen Endgerät aufgerufen wird. Dieses erfüllt seinen Zweck auf schlichte Art und Weise mit Bravour. Hierbei ist es möglich in den Einstellungen das Ubermenu in der mobilen Ansicht auszuschalten. Aber Achtung: Menüeinträge, wie beispielsweise „Custom Content“ oder „Columns“ befinden sich nach wie vor in der Menüstruktur. Ich empfehle daher das Plugin „If-Menu“, welches verschiedenste Möglichkeiten von Fallunterscheidungen zur Anzeige von Menüeinträgen anbietet.

 

Zentrale Plugins auf Getränkekühlschrank24

  • AffiliateTheme – Amazon Schnittstelle
  • AffiliateTheme – Floating Bar für Produkte
  • UberMenu 3
  • Shortcodes Ultimate
  • SiteOrigin Widgets Bundle
  • Table of Contents Plus
  • Yoast SEO
  • Advanced Code Editor
  • Simple CSS
  • Broken Link Checker
  • If Menu
  • Responsive Beiträge Carousel
  • MailPoet-Newsletter
  • WP Rocket
  • Wordfence Security
  • IP Geo Block
  • WPS Hide Login

 

Fazit

Das Portal Getränkekühlschrank24 ist mit Sicherheit kein perfekt umgesetztes Affiliate-Portal. Trotzdem wurde und wird bei der Umsetzung versucht, sich tiefer in den Besucher hineinzuversetzen, um seine Intentionen zu ermitteln und seinen Bedarf zu decken. Das Affiliatetheme bietet einige Möglichkeiten, eine sehr gute Webseite umzusetzen und bringt dazu bereits von Haus aus einigem mit. Mit Hilfe von ein paar weiteren Plugins lässt sich dies dann noch erweitern.

Die Verwendung von eigenem HTML, CSS und Javascript ermöglicht relativ einfach und schnell bereits kleine benutzerdefinierte Ideen zu realisieren. Insgesamt geht es wie immer darum, die zur Verfügung stehenden Ressourcen und Komponenten sinnvoll einzusetzen und diese mit Bedacht zu erweitern und zu modifizieren. Es macht Sinn, nicht immer nach dem gleichen Schema vorzugehen, sondern ein bisschen mehr Out-of-the-Box-Denken zu entwickeln, auch für Nischenseiten.

Getränkekühlschrank24 ist ein Portal, dass hier nicht wirklich als Vorbild dienen soll, vielmehr möchte ich in diesem Artikel zeigen, welche Ansätze und Techniken bedacht werden können, um sein eigenes Nischenportal zu kreieren. Ich hoffe, der/die Ein oder Andere kann hiervon etwas mitnehmen.

Schaut euch die Seite ruhig noch einmal an auf https://getraenkekuehlschrank24.com.

Ich  bedanke mich fürs Lesen und für die Veröffentlichung durch das Affiliatetheme-Team!

Anm. d. R.: Sofern dir der Artikel von Tobias gefallen hat und du selbst auch mal deine Seite bzw. dein Konzept etwas näher vorstellen möchtest, schreib uns einfach mal eine E-Mail. Wir (und vor allem unsere user) sind immer sehr daran interessiert anderen Betreibern mal „über die Schulter“ zu schauen! 🙂

Tobias Jakob Über den Autor

Mein Name ist Tobias Jakob. Ich arbeite als Business Service and Analytics Engineer für ein großes Software-Unternehmen und bin nebenberuflich im Bereich Online-Marketing tätig. Ich stelle hier mein neues Affiliate-Portal Getraenkekuehlschrank24.com vor. Dabei zeige ich, wie ich bestimmte Marketing- und Usability-bezogene Ideen und Ziele umgesetzt habe. Vielleicht kann die/der ein oder andere hier etwas mitnehmen. Danke an das Affiliatetheme-Team für diese Möglichkeit.


Ähnliche Beiträge


Kommentare

Chris 13. Oktober 2017 um 18:38

Wow die Seite ist echt top! Genauso wie ich mir ne richtig gute Seite vorstelle…musst echt was auf dem Kasten haben, leider kann ich viele Dinge die ich im Kopf hab durch meine noch bescheidenen Fähigkeiten nicht so wirklich umsetzten…
Aber wie gesagt tolle Arbeit!

Antworten

André 16. Oktober 2017 um 9:56

Hey Chris. Wenn du etwas umsetzten willst und es hängt, frag doch einfach mal bei uns im Forum. Bis zu einem gewissen Aufwandsgrad helfen wir dir da gerne kostenfrei weiter. Wenn es größere Sachen sind, kannst du aber natürlich auch jederzeit unseren Service in Anspruch nehmen.

Antworten

Tobias Jakob 23. Januar 2018 um 15:45

Hi Chris,
Vielen Dank für das Feedback 🙂

Antworten

Matthias 22. Januar 2018 um 15:32

Hallo Tobias.
Erstmal Glückwunsch dein Portal ist wirklich sehr schön geworden. Auch die Texte sind sehr bunt, strukturiert und leicht leserlich.
Als WordPress Anfänger hätte ich ein paar Fragen zum Design, ich wusste nicht ob ich hier oder auf deiner Seite kommentieren soll.
– Wie kann man die Überschriften so schön gestalten? (zb. der blaue Banner im hinter der Überschrift)
– Wie kann ich die Trennlinie zwischen den Textabschnitten optisch verändern? (Wie bei dir die strichlierte blaue Linie)

Danke an dich und das affiliatetheme-team für die veröffentlichung deines Artikels. Ich konnte viel mitnehmen und hab neue Inspiration bekommen.
Liebe Grüße,
Matthias Lattner

Antworten

Tobias Jakob 23. Januar 2018 um 15:56

Hi Matthias,
Danke für das Feedback.
Wenn Du Wert auf derartige optische Aspekte legst, würde ich dir raten, dich etwas mit CSS auseinanderzusetzen.
Im Web findest du verschiedenste Tutorials und Dokumentationen. Ein allgemeines Verständnis für CSS zu haben, kann nicht schaden.

Zu deinen Fragen:
– Einen blauen Hintergrund für die Überschriften bekommst du erstmal einfach indem Du diesen via CSS setzt:
h2 { background-color: DeineLieblingsfarbe }
Wenn du die linke und rechte Kante derartig (bannerähnlich) haben möchtest, musst du mit den HTML-Pseudoelementen "before" und "after" arbeiten. Wie gesagt kann ich dir da empfehlen, allgemein CSS zu lernen.

– Die gestrichtelten Linien gehören zu einem "Alert", den du über das Affiliatetheme einfach als Shortcode einfügen kannst. Du verwendest also
[alert style="info"] Dein Text [/alert]
und passt dessen Aussehen wiederum via CSS an. Eine derartige gestrichelte Umrandung erhältst du beispielsweise über
.alert-info {
border-top: 2px dashed #5395CF;
border-bottom: 2px dashed #5395CF;
}

Ich hoffe das hilft. 🙂

Antworten

Frank 18. März 2018 um 12:50

Hallo zusammen, auf die Gefahr hin das ich als Anfänger ausgelacht werde, frage ich trotzdem:

Wie hast Du auf der Startseite die Kategorien unterhalb des Teasers ausgegeben mit den Bildern, da die Bilder und Beschreibungen die gleichen sind wie im Menu, nur grösser, vermute ich du hast ein weiteres Menü angelegt und
gibst das per shortcode dann aus? Oder geht das anders? wenn ich im Hauptmenü auf Geschränkekühlschrank Kategorien klicke kommt die Hauptkategorien Seite, ist das wieder ein neues Menü?
Wenn ja hast du dir wirklich sehr viel Arbeit gemacht,

Antworten

Tobias Jakob 17. Mai 2018 um 11:24

Hi Frank,

Bei den Kategorien handelt es sich um Taxonomie-Einträge. Diese kannst du in den Affiliatetheme-Optionen und dann unter "Produkte" anlegen.
Hast dies getan, dann kannst du die Einträge per Shortcode ausgeben.

Ich habe beispielsweise eine Taxonomie "art" (Kategorien), welche als Einträge "Flaschenkühlschrank" usw. enthält.
So kann ich beispielsweise mittels [taxonomy_images taxonomy="art" orderby="count" order="desc"] alle Einträge der Taxonomie in Form eines Grids ausgeben lassen. So habe ich es auch auf der Seite https://getraenkekuehlschrank24.com/getraenkekuehlschrank-kategorien/ gemacht.

Auf der Startseite habe ich ebenfalls diesen Shortcode verwendet, allerdings übergebe ich hier über den "include"-Parameter, bestimmte IDs, sodass nur diese ausgewählten ausgegeben werden: [taxonomy_images taxonomy="art" include="1,2,4,6,7"]

Am besten du ließt dich hier noch etwas ein:
https://affiliatetheme.io/doc/produkte-taxonomien/
https://affiliatetheme.io/doc/funktionen/shortcodes/

Und probierst dann ein bisschen mit den Shortcodes herum.

Viele Grüße
Tobias

Antworten

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