Schaltfläche „Mehr lesen“ auf Ihrem Blog anpassen
Zuletzt aktualisiert am: Oktober 19, 2020
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.
Bitte beachten: Das Bearbeiten der Schaltfläche „Mehr lesen“ erfordert ein grundlegendes Verständnis von HTML. Treten Sie im Design-Forum mit HubSpot-Designern in Kontakt, um Unterstützung bei der Arbeit an benutzerdefinierten Designs zu erhalten.
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 neuenread-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“.
Verwandte Artikel
-
Videos zu Ihren HubSpot-Inhalten hinzufügen
Sie können HubSpot Video zu Ihren Inhalten auf Ihren Seiten, in Ihren Blog-Beiträgen und in Ihren...
Wissensdatenbank -
Traffic aus Ihren Website-Analytics ausschließen
Nachdem Sie Ihre Domain mit der HubSpot-Software verknüpft oder den HubSpot-Tracking-Code auf Ihrer externen...
Wissensdatenbank -
Google Analytics-code zu Ihren Seiten oder Ihrem blog in der HubSpot-Software hinzufügen
Sie können Ihre HubSpot-Website und -Blog-Inhalte in Google Analytics integrieren, indem Sie Ihre Google...
Wissensdatenbank