Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Du willst einen WordPress Button einfügen – Denn… was ist eine Website ohne Buttons? Zu meinen WordPress Anfangszeiten wusste ich auch nicht, wie ich einen WordPress Button erstellen, geschweigenden einfügen kann und welches Plugin dafür am besten geeignet ist… Damit Du diese Probleme nicht hast, gibt es jetzt hier diesen kurzen Artikel, in dem Dir alles Rund um WordPress Buttons erklärt wird…
Hinweis: Dieser Artikel ist vor allem dann für Dich geeignet, wenn Du ein kostenloses WordPress Theme verwendest, das (wie die meisten kostenfreien Themes) keine Button Funktion hat oder Du deine Buttons enorm individuell anpassen willst. Aber auch wenn Du ein ausführliches Tutorial zum Button Plugin MaxButtons suchst, welches wir in diesem Artikel verwenden werden…
Also? Worauf wartest Du noch? Legen wir los…
Was Dich in diesem kurzen MaxButtons Plugin Tutorial erwartet…
- Wie Du das Nr.1 Button Plugin – MaxButtons – installieren kannst!
- Wie Du mit MaxButtons ganz einfach einen WordPress Button erstellen kannst!
- Wie Du mit 2 Klicks Deinen WordPress Button einfügen kannst!
1.0 Das beste WordPress Button Plugin überhaupt?
Wie Du bereits herausgelesen hast, werden wir unsere WordPress Buttons mit dem sensationellen Plugin „MaxButtons“ erstellen. Hierbei handelt es sich um eines der beliebtesten WordPress Button Plugins überhaupt (wenn nicht gar um das Beliebteste). Menschen, deren WordPress Theme keine Button Funktion enthält, kann ich dieses Plugin deshalb mit gutem Gewissen weiterempfehlen.
Um einen Button erstellen zu können, müssen wir natürlich als erstes MaxButtons installieren. Dafür gehst Du einfach in dein WordPress Backend, klickst dort auf Plugins, dann auf den Unterpunkt „Installieren“ und suchst in der Suchleiste nach „MaxButtons“.
Du klickst auf Installieren und danach aktivierst Du das Plugin. Bravo – Schritt Nummer 1 kannst Du jetzt auf Deiner To-Do Liste abhaken.
Kommen wir zum 2 Step, indem wir beide gemeinsam einen Button erstellen…
2.0 Wie Du mit MaxButtons ganz einfach einen WordPress Button erstellen kannst!
Dein erster WordPress Button ist nur noch wenige Sekunden von Dir entfernt. Nach der Aktivierung des MaxButtons Plugin, findest Du links an der Seitenleiste in WordPress, den Menüpunkt „MaxButtons“. Diesen wählst Du jetzt aus und klickst auf den Untermenüpunkt „Neu hinzufügen“.
Du landest jetzt auf einer Seite, die ungefähr aussieht wie folgt…
Dort kannst Du jetzt deinen Button konfigurieren. Die wichtigsten Einstellungen, die Du unbedingt kennen musst, werden wir uns nun gemeinsam anschauen…
2.1 MaxButtons Einstellungen – Grundsätzliches
Bevor Du gleich die wichtigsten MaxButtons Einstellungen kennen lernst, will ich dich auf die Preview-Box rechts oben im Eck aufmerksam machen (Die Du immer dann vorfindest, wenn Du im Button Editor gelandet bist). Dort siehst Du immer eine Vorschau des Buttons, den Du gerade erstellst. Der obere Button in der Preview Box zeigt dir, wie der Button normalerweise aussieht. Der unter Button, wie der Button im Hover-Modus aussieht, also wenn jemand mit der Maus herüber fährt.
Fangen wir an mit den grundsätzlichen Button Einstellungen…
Beim Punkt „Button Name“ kannst Du deinem Button einen kurzen Namen geben, an dem Du ihn wiedererkennen kannst!
Unterhalb ist ein Feld, in das Du eine URL eintragen kannst, auf die der Button verlinken soll. Dort siehst Du auch zwei Checkboxen. Einmal die Box „In neuem Fenster öffnen“. Wenn Du sie auswählst, wird der Link in einem neuen Tab geöffnet, sobald jemand auf deinen Button klickt. Setzt Du einen Haken in die Checkbox „Verwenden von Rel=“nofollow““, dann setzt Du den Button Link auf Nofollow (Wichtig für die Suchmaschinenoptimierung).
Beim Punkt „Textfeld“, kannst Du den Text festlegen, der auf deinem Button angezeigt wird.
Darunter siehst den Punkt „Schriftart“, wo Du die Schriftart, Schriftgröße, die Formatierung sowie die Ausrichtung des Button-Textes festlegen kannst.
Als nächstes hast Du die Möglichkeit den Innenabstand zu ändern. Das heißt: Wie weit soll der Button-Text vom oberen, rechten, unteren oder linken Button Rand entfernt sein? Hier musst Du im Normalfall nichts ändern.
Die Textfarbe passt Du im nächsten Schritt an und danach die Button Breite sowie die Höhe des Buttons. Beides sollte selbsterklärend sein. Hinweis: Wie Du die Button-Größe für Mobilgeräte anpassen kannst, erfährst Du weiter unten im Text 😉
2.2 MaxButtons Einstellungen – Rahmen
Wir machen weiter mit den Rahmen Einstellungen deines Buttons. Du wirst gleich sehen, dass Du damit deinen Button wirklich cool designen kannst…
Bei „Radius eingeben“, kannst Du die Ecken deines Buttons abrunden. Ist das „Vorhängeschloss“ (siehe oberes Bild) aktiviert, hat jede Ecke den gleichen Radius. Deaktivierst Du das Schloss, hast Du die Möglichkeit, dass Du jeder Ecke einen anderen Radius geben kannst. Um das Schloss zu deaktivieren, klicke es einfach an – So das das Schloss geöffnet ist.
Sehen wir uns jetzt den Rahmenstil an. Hier kannst Du den Rand des Buttons z.B. gestrichelt oder gepunktet machen.
Bei „Breite“ & „Border Color/Maus-Hover“, ist es Dir möglich zum einen die Breite des Button Rands festlegen und zum anderen die Farbe des Button Rands anpassen!
Sogar einen Schatten kannst Du deinem Button geben. Denn bei „Schattenabstand Links“ und „Schatten Oben“ kannst Du einstellen, wie weit der Schatten von deinem Button entfernt sein soll.
Vielleicht fragst Du dich, was es mit den folgende Punkten „Shadow Blur“ und „Shadow Spread“ auf sich hat? Dort kannst Du anpassen, ob der Schatten etwas verwischt sein soll oder nicht. Umso höher die Zahl ist, die Du einträgst, desto verschwommener ist der Schatten. Einfach mal ausprobieren 😉
Der nächste Abschnitt der Button-Einstellungen ist besonders spannend…
2.3 MaxButtons Einstellungen – Background
Die folgenden Einstellungen, verstehen viele Einsteiger nicht, wenn sie diese zum ersten mal sehen. Deshalb hier eine kurze simple Erklärung…
Aktivierst Du den Schalter, bei „Use Gradients“ kannst Du einen Farb-Übergang bei deinem WordPress Button einfügen. Das heißt: Die obere Hälfte deines Buttons ist zum Beispiel Orange und wird nach unten hin Gelb. Dafür müsstest Du dann bei „Background Color“ im ersten Farbfeld Orange auswählen und in das zweite Farbfeld Gelb eintragen. Diesen Farb-Übergang kannst Du natürlich auch für die Hover-Variante deines Buttons festlegen. Probiere es am besten einfach jetzt mal aus – Dadurch lernst Du am schnellsten!
Bei „Normal Opacity“ und bei „Hover Opacity“ hast Du die Möglichkeit, die Deckkraft der oberen und unteren Button Farbe zu verändern.
Und bei „Gradient Stop“ kannst Du festlegen, wann der Farbübergang im Button stattfinden soll. Wenn Du also willst, dass der Farbübergang ungefähr in der Mitte des Buttons stattfindet, dann lass im Feld „45“ stehen. Willst Du das der -Farbübergang erst im unteren zweiten Drittel des Buttons stattfindet, dann stelle einen Wert von etwa „60“ ein.
2.4 MaxButtons Einstellungen – Text Shadow
Mit der Funktion „Schattenabstand Links“, die Du beim Überpunkt Text Shadow findest, kannst Du deinem Button-Text einen Schatten geben. Mit der Funktion „Shadow Blur“ kannst Du diesen Text-schatten verwischen lassen. Auch die Text-Schatten Farbe kannst Du hier anpassen – Einmal für den Text-Schatten des normalen Buttons und einmal für den Text-Schatten des Hover Buttons.
2.5 MaxButtons Einstellungen – Container
Wirklich interessant ist der Abschnitte Container. Wenn Du den Schalter „Einen Container erzeugen“ aktivierst, kann das einen tollen Effekt haben…
Denn wenn Du nachher den Button auf deiner Website einfügst, kannst Du dank dem Punkt „Margin“ festlegen, dass der Button immer einen gewissen Abstand zum anderen Seiteninhalt. Fügst Du etwa den Wert „30“ in das erste Margin-Feld ein, hat der Button immer einen Abstand von 30 Pixeln, zum Inhalt über ihm. Im spannendenVideo am Anfang dieser Seite, findest Du etwa bei Minute 09:35 eine weitere kurze und hilfreiche Erklärung.
2.6 MaxButtons Eintsellungen – Responsive Einstellungen
Wir haben ein Problem. Unser Button ist noch nicht responsiv – Das heißt, er wird auf dem Handy genauso groß angezeigt, wie auf dem Desktop. Was unter Umständen wirklich unschön aussehen kann. Doch auch dafür hat das MaxButtons Plugin eine Lösung…
Wenn Du einen Haken bei „Auto Responsive (experimental)“ setzt, passt sich Dein Button automatisch für das Handy an. Jedoch: Momentan funktioniert das noch nicht immer ideal. Deshalb bietet MaxButtons noch eine weitere Funktion an…
Und zwar findest Du den Punkt „Neue Abfrage“ direkt unter „Auto Responsive (experimental)“. Dort kannst Du eine bestimmte Art von Gerät auswählen (z.B. kleines Mobilgerät oder Tablet Ipad Querformat) und für das jeweilige Gerät die Button Größe individuell anpassen.
Super! Nachdem Du das getan hast, können wir direkt weiter machen…
Denn… Jetzt fragst Du Dich sicher noch, wie wir Deinen Button auf Deiner Website einfügen…
3.0 Wie Du mit 2 Klicks Deinen WordPress Button einfügen kannst!
Nachdem Du deine Button nach Deinen Vorstellungen beliebig angepasst hast, klickst Du ganz einfach auf einen der blauen „Speichern“ Buttons, den Du einmal ganz oben und einmal ganz unten auf der Seite findest.
Jetzt findest Du ganz oben auf der Seite eine gelbe Box, in der du einen sogenannten Shortcode findest! Dieser sieht etwa so aus:
[maxButton id=“2″]
Diesen Shortcode kopierst Du nun ganz einfach, mit Strg+C (oder Ctrl+C für Mac).
Im nächsten Schritt suchst Du dir eine Seite, ein Widget oder einen Beitrag auf deiner Website aus, auf der Du jetzt den Shortcode einfügst (Mit Strg+V | Ctrl+V).
Dort wo der Shortcode jetzt steht, wird für den Besucher deiner Website nun der entsprechende Button angezeigt.
Perfekt!