Marketing Hub | Fragen, Tipps & bewährte Methoden

vrneuman
HubSpot Employee
HubSpot Employee

Schaltfläche „Mehr lesen“ auf Ihrem Blog anpassen

Es kann hilfreich sein, die Darstellung Ihrer Schaltfläche „Mehr lesen“ auf der Blog-Listing-Seite anzupassen, wenn Sie möchten, dass diese Schaltfläche besonders auffällt. Erfahren Sie, wie Sie das Design  der Schaltfläche anpassen oder den Text „Mehr lesen“ bearbeiten .

 

Erscheinungsbild der Schaltfläche „Mehr lesen“ anpassen

Um das Erscheinungsbild Ihrer Schaltfläche „Mehr lesen“ anzupassen, erstellen Sie eine CSS-Klasse, die die Stile für die „Mehr lesen“-Schaltfläche enthalten soll. Fügen Sie diese Klasse und alle benutzerdefinierten Stile in Ihrem Stylesheet hinzu. Hier sind einige Beispielstile:

 

.read-more-btn{
background: blue;
border-radius: 10px;
color: white;
}

 

So fügen Sie Ihrer Schaltfläche „Mehr lesen“ eine benutzerdefinierte Klasse hinzu:

  • Navigieren Sie zurück zu Ihrer Blog-Vorlage.
  • Klicken Sie auf das Blog-Inhaltsmodul, um es im Inspektor auszuwählen, und klicken Sie dann unter dem Abschnitt Beitragsvorlagen auf „Listing-Vorlage bearbeiten“, um auf den HTML für Listing-Seiten zuzugreifen.
  • Suchen Sie den folgenden Code im Listing-Vorlagen-HTML:

 

<a class="more-link" href="{{content.absolute_url}}">Mehr lesen</ a

 

  • Ersetzen Sie die more-link-Klasse mit Ihrer neuen read-more-btn-Klasse. Der Code sollte nun wie folgt aussehen:

 

<a class="read-more-btn" href="{{content.absolute_url}}">Mehr lesen</a>

 

  • Klicken Sie auf „Änderungen veröffentlichen“.

 

Text für die Schaltfläche „Mehr lesen“ bearbeiten

Auf Ihrer Blog-Listing-Seite sehen Sie eine Vorschau der einzelnen Blog-Beiträge mit einem „Mehr lesen“-Link, über den der vollständige Blog-Beitrag geöffnet wird. Um den Text von „Mehr lesen“ in eine andere Sprache oder einen anderen Satz zu ändern, müssen Sie Ihre Blog-Vorlage bearbeiten.

    • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
    • Klicken Sie im Finder auf den Namen der Blog-Vorlage.
    • Wenn Sie ein der Vorlage sind, klicken Sie auf das Blog-Inhaltsmodul. Klicken Sie im Inspektor unter der Registerkarte „Bearbeiten“ auf „Listing-Vorlage bearbeiten“.

 

  • Suchen Sie nach dem folgenden Code, der sich ungefähr in Zeile 55 befindet: 
     <a class="more-link" href="{{ content.absolute_url }}">Mehr lesen</a>
  • Bearbeiten Sie „Mehr lesen“, um diesen Text in jeder Beitragsvorschau auf Ihrer Blog-Listing-Seite anzupassen.
  • Klicken Sie auf „Änderungen veröffentlichen“.
0 Réponses

0 Réponses

Aucune réponse publiée pour l'instant

Personne n'a encore répondu à ce post. Revenez plus tard pour voir si une solution a été proposée, ou soumettez votre propre réponse pour aider d'autres utilisateurs.

Répondre à ce post

Si vous avez besoin d'aide pour publier une réponse, consultez la politique d'utilisation de la communauté.