Wie kann ich den Button “Weiterlesen” gestalterisch anpassen?

Den “Weiterlesen” Button findest du u.a. im Frontend auf deinem Blog-Übersicht und sieht standardmäßig so aus: 

Wir zeigen dir in dieser Anleitung, wie du das Standard-Design dieses Buttons gestalterisch anpassen kannst. 

Login Spreadmind Webseite

Bitte logge dich zuerst auf deiner Spreadmind Webseite ein. Der nachfolgende Absatz “Anleitung Login in Spreadmind Webseite” lässt sich durch einen Klick aufklappen und hilft dir bei diesem ersten Schritt.

Anleitung Login in Spreadmind Webseite

Rufe zuerst den Login-Bereich zu deiner Spreadmind Webseite auf, indem du ein /wp-admin hinter deinen Domainnamen setzt.

Logge dich dann mit deinen Spreadmind Benutzerdaten auf deiner Webseite ein. Nach dem Login wirst du automatisch ins Backend zum Dashboard (= Startseite des Backends) weitergeleitet:

Einführung

Dieser Standard-Button kann nur über einen individuellen CSS-Code angepasst werden. Aber keine Sorge – auch wenn du dich nicht mit CSS-Code auskennen solltest, führen wir dich hier Schritt für Schritt durch die Anpassung durch, versprochen.  

CSS-Code hinzufügen 

Bitte gehe im Backend zu “Design” > “Theme Optionen” und auf der Seite ganz nach unten zu “Benutzerdefiniertes Design”.  

Bitte kopiere nun den folgenden CSS-Code und füge ihn im Backend deiner Seite unter “Benutzerdefiniertes Design” ein:  

.spreadmind-read-more { 
    background-color: #f2f2f2; 
    border: 1px solid #cccccc; 
    border-radius: 3px; 
    color: #515151; 
}
.spreadmind-read-more:hover { 
    background-color: #dddddd; 
}

Nachfolgend werden wir den CSS-Code und dessen Eigenschaften sowie gestalterischen Auswirkungen ganz genau erklären.

background-color

Hier legst du die Hintergrundfarbe des Buttons über einen HEX-Code fest. Standardmäßig ist die Hintergrundfarbe auf #f2f2f2 gesetzt. Das ist ein helles grau

Besuche am besten diese Seite hier, um über den Farbwähler einen eigenen HEX-Code zu bekommen: https://html-color-codes.info/webfarben_hexcodes/

Für einen orangenen Button-Hintergrund ändern wir in diesem Beispiel den HEX-Code auf #ffbb00 ab:

border

Hier definieren wir die Rahmenlinie des Buttons. Derzeit ist diese eine 1px dicke, durchgezogene Linie mit einem etwas dunklerem Grau-Farbton als der Button-Hintergrund. 

Auch hier kannst du einen eigenen HEX-Code für die Rahmenfarbe abgeben. In unserem Beispiel verstärken wir die Rahmenlinie auf 2px und verwenden einen etwas dunkleren Orange-Farbton: 

border-radius

Dies beschreibt den Eckenradius des Buttons. Hier kannst du gerne einen eingenen Wert eintragen. Wir empfehlen Werte zwischen 3 und 15 px.  

color

Über diese Eigenschaft bestimmen wir die Schriftfarbe des Buttons. Auch hier kannst du einen eigenen HEX-Code angeben. 

Da in unserem Beispiel der Button einen orangenen Hintergrund hat, färben wir die Schrift weiß ein: 

Button Hintergrundfarbe bei MouseOver

Sobald du mit der Maus über den Button fährst, ändert sich die Hintergrundfarbe des Buttons. Diesen Zustand nennt man “hover” oder auch “MouseOver”. Wir haben  auch hier die Möglichkeit, die Hintergrundfarbe über einen HEX-Code anzupassen, z. B. auf ein dunkel-orange:

Anpassungen speichern

Hast du den Button nach deinen Vorstellungen angepasst, dann klicke bitte auf den Button “Änderungen speichern”, damit die Anpassungen auch im Frontend zu sehen sind:

Tausche dich mit der Spreadmind-Community aus!

0 Kommentare

Einen Kommentar abschicken