Door naar hoofdmenu

Hoe u een dynamische sitetitel en slogan toevoegt aan een wereldwijde Divi-koptekst

Divi: het gemakkelijkste te gebruiken WordPress-thema

Divi: Het beste WordPress-thema aller tijden!

Meer 701.000-downloads, Divi is het populairste WordPress-thema ter wereld. Het is compleet, gemakkelijk te gebruiken en wordt geleverd met meer dan 62-vrije sjablonen. [Aanbevolen]

Weten hoe u een dynamische sitetitel en een slogan aan een Divi-koptekst kunt toevoegen, is handig bij het maken van Divi-websites. En er zijn een paar goede redenen om dat te doen. Enerzijds hebben niet alle sites een logo. Een sitetitel is een goede vervanging van een logo. Een andere reden is om uw merk een boost te geven door essentiële informatie op uw site op te nemen waar iedereen het kan zien.

In deze zelfstudie laten we u zien hoe u een dynamische sitetitel en slogan toevoegt aan een algemene Divi-header. Deze oplossing haalt de sitetitel en slogan dynamisch uit de WordPress-backend. Bovendien heb je alle krachtige ontwerpopties van Divi om de titel en slogan naar wens aan te passen!

Mogelijk resultaat

Hier is een voorbeeld van het ontwerp dat we in deze tutorial zullen bouwen.

Dynamische sjabloon voor globale koptekst van sitetitel 6

Let op de sitetitel en slogan bovenaan in het midden van de koptekst die dynamisch wordt weergegeven.

Voorbeeld van wijziging van Divi-titel

Gratis download

Word lid van de Divi Newlsetter en we e-mailen je een exemplaar van het Ultimate Divi Landing Page Layout Pack, samen met tal van andere gratis en geweldige Divi-bronnen, tips en trucs. Volg het en je bent in een mum van tijd een Divi-meester. Als u al geabonneerd bent, voert u hieronder uw e-mailadres in en klikt u op downloaden om toegang te krijgen tot het lay-outpakket.DOWNLOAD

Om de sjabloon te importeren, gaat u naar Divi> Themagenerator.

Klik op het portabiliteitspictogram rechtsboven op de pagina.

Selecteer in het pop-upvenster portabiliteit het tabblad Importeren en kies het downloadbestand van uw computer.

Klik vervolgens op de importknop.

Kies een divisjabloon

Na voltooiing is de algemene koptekstsjabloon beschikbaar in Divi Theme Builder.

Wijzig de globale divi-koptekst

In wat volgt gaan we verder met het ontwerp.

De titel van de site en de slogan op WordPress

Elke WordPress-site heeft een sitetitel en een slogan. De sitetitel is in feite de naam van de site en de slogan is een korte zin die meestal uitlegt wat het is.

Het is niet ongebruikelijk om de sitetitel toe te voegen bij het installeren van WordPress en deze te vergeten.

Creëer eenvoudig uw website met Elementor

Met Elementor kunt u eenvoudig elk website-ontwerp maken met een professionele uitstraling. Stop met betalen duur voor wat je zelf kunt doen. [Gratis]

Divi-titel aanpassen

En sommige mensen realiseren zich niet eens dat de slogan bestaat, laat staan ​​de tijd nemen om deze bij te werken. Bovendien, wanneer u het Divi-thema gebruikt, zijn de sitetitel en de slogan niet standaard zichtbaar op uw site, dus u kunt ze gemakkelijk negeren. De sitetitel en slogan zijn echter essentiële onderdelen van de website en worden herkend door zoekmachines.

U kunt de sitetitel en slogan in WordPress op elk moment vinden en bijwerken door naar het WordPress-dashboard te gaan en naar Instellingen> Algemeen te navigeren.

Of u kunt een andere route nemen met behulp van de thema-aanpasser om de sitetitel bij te werken onder de algemene instellingen.

Pas de WordPress-identiteit aan

Nu we weten waar de sitetitel en slogan op de WordPress-backend staan, gaan we kijken hoe we ze aan een Divi-header kunnen toevoegen!

Hoe u een dynamische sitetitel en slogan toevoegt aan een algemene koptekst in Divi

Het vooraf ontworpen algemene koptekstsjabloon importeren

Voor deze zelfstudie gaan we ons concentreren op het toevoegen van de dynamische sitetitel en slogan aan een bestaande koptekst in plaats van een volledig nieuwe koptekst te maken. Het bespaart u tijd en verbetert de duidelijkheid. Dus om dit koptekstontwerp te starten, gaan we een vooraf gedefinieerde globale koptekstsjabloon importeren vanuit ons vierde thema generatorpakket .

Als je eenmaal hebt het pakket van gedownload creatie van thema , pak het bestand uit en zoek het standaard JSON-bestand van de websitesjabloon.

Ga dan naar Divi> Theme Builder.

Klik rechtsboven op het portabiliteitspictogram. Kies in het pop-upvenster portabiliteit het standaard JSON-bestand van de websitesjabloon en klik op de knop Importeren.

Divi-model importeren

Zodra de sjabloon is toegevoegd aan de themabouwer, verwijdert u de voettekstsjabloon en klikt u op om de algemene koptekst te bewerken.

Sjabloon verwijderen uit voettekst

Een dynamische sitetitel en slogan toevoegen aan de koptekst

In de editor voor sjabloonlay-out ziet u de vooraf gemaakte koptekst al ontworpen. We kunnen meteen beginnen met het maken van onze aanpassingen.

Ben je op zoek naar de beste WordPress-thema's en -plug-ins?

Download de beste plug-ins en WordPress-thema's op Envato en maak eenvoudig uw website. Al meer dan 49.720.000-downloads. [EXCLUSIEF]

Logo verplaatsen

Sleep om te beginnen de afbeeldingsmodule die het logo (dynamisch) weergeeft van de middelste kolom van de bovenste rij naar de linkerkolom van de bovenste rij.

Voeg een call-to-action-module toe om de sitetitel en slogan weer te geven

Voeg vervolgens een nieuwe Call to Action-module toe aan de middelste kolom van de bovenste rij (waar het logo stond).

Pas de oproep tot actie aan

We zullen de Call to Action-module gebruiken om de sitetitel en slogan weer te geven.

Maar voordat u inhoud gaat toevoegen, selecteert u eerst NEE om de achtergrondkleur te gebruiken.

Configureer call-to-action-acties

Voeg een dynamische sitetitel toe

Plaats onder inhoudinstellingen de muisaanwijzer op het titelinvoervak ​​en klik op het pictogram "Dynamische inhoud gebruiken". Selecteer vervolgens "Sitetitel" in de lijst.

Voeg een dynamische siteslogan toe

Beweeg vervolgens de muis over het hoofdgedeelte en selecteer het pictogram "Dynamische inhoud gebruiken". Selecteer vervolgens "Site Tagline" in de lijst.

Voeg een slogan van een divisite toe

Voeg een dynamische homepage-link toe

Het is normaal dat de sitetitel bij het klikken naar de startpagina verwijst, vooral als u het logo vervangt. Om de hele cursus om te leiden naar de startpagina, voegt u de startpaginalink als dynamische inhoud toe aan de URL van de cursuslink.

Voeg een link naar de homepage toe

Ontwerp van de tekst van de titel en de slogan van de site

Nu worden de sitetitel en slogan dynamisch op de koptekst weergegeven. Het enige wat we nu moeten doen, is wat styling toevoegen. Onthoud dat we de titeltekst moeten aanpassen om de sitetitel te ontwerpen en de hoofdtekst om de slogan te ontwerpen.

Ga naar het tabblad Ontwerpen en werk het volgende bij:

  • Titellettertype: Heebo
  • Titel Lettertype Gewicht: vet
  • Titel lettertype: TT
  • Titeltekstgrootte: 32 px (desktop), 24 px (tablet en telefoon)
  • Titelletterafstand: 0.3em
  • Lichaamslettertype: Roboto
  • Body Font Style: cursief
  • Tekst hoofdtekst:
  • Hoofdtekstgrootte: 13px
  • Tussenruimte hoofdletter: 0.1em
  • Body Line Hoogte: 1em
Pas het lettertype van de divi-titel aan

Om te helpen bij het centreren, verwijdert u de standaardvulling onder de hoofdtekst door de volgende aangepaste CSS toe te voegen aan de promotiebeschrijving:

opvulling-onderkant: 0px
Voeg aangepaste divi css-code toe

Aanvullende ontwerpaanpassingen

Voor dit laatste deel van de zelfstudie gaan we enkele aanvullende ontwerpaanpassingen aan de koptekst aanbrengen om ervoor te zorgen dat de items verticaal gecentreerd blijven in elke kolom en om de knop een uniek ontwerp te geven. We zullen ook een kronkelende regel voor en na toevoegen aan de slogan (alleen voor kicks).

De kolommen / inhoud verticaal centreren

Op dit moment is de bovenste rij de "Kolomhoogten gelijkmaken" actief die de eigenschap flex gebruikt. We kunnen hiervan profiteren door een klein CSS-fragment toe te voegen om ervoor te zorgen dat alle kolommen verticaal gecentreerd blijven binnen de rij. Open hiervoor de instellingen voor de bovenste rij en voeg de volgende CSS toe aan het hoofdelement:

uitlijnen-items: center;

De kolom bijwerken met de knop

Open vervolgens de instellingen voor kolom 3 in de bovenste rij en verwijder de achtergrondkleur en opvulling.

Maak eenvoudig uw online winkel

Download gratis WooCommerce, de beste e-commerce plug-ins om uw fysieke en digitale producten te verkopen op WordPress. [Aanbevolen]

Pas de divi-contactknop aan

De knopachtergrond bijwerken

Open vervolgens de knopmodule-instelling en werk de achtergrond als volgt bij met een nieuw achtergrondverloop:

  • Achtergrond met kleurovergang Linkerkleur: #ffffff
  • Verloopkleur juiste achtergrond: # 1dbf73
  • Verlooprichting: 135deg
  • Startpositie: 10%
  • Eindpositie: 0%
Pas de achtergrond van de divi-knop aan

Voor en na tekens toevoegen aan de slogan

Elk item met dynamische inhoud kan worden gewijzigd door op het tandwielpictogram te klikken. Om voor en na tekens aan de slogan toe te voegen, opent u de instellingen van de call-to-action-module die de slogan bevat en klikt u op het pictogram Bewerken op de dynamische inhoud van de siteslogan. Voeg vervolgens de tekens toe aan de voor en na invoer.

Geef de divi-slogan weer

Eindresultaat

Open een willekeurige pagina op uw site om het resultaat te zien. U zou de dynamische sitetitel en slogan prachtig moeten zien!

Eindresultaat divi

Final gedachten

Het is erg fijn dat u een algemene koptekst kunt aanpassen met een dynamische sitetitel en slogan. Dit lijkt iets dat voor veel sites nuttig zal zijn. Ik hou ook van het idee om de sitetitel en slogan naast het logo op te nemen voor een nog sterkere weergave van het merk.

Bron: Elegant thema

Dit artikel bevat opmerkingen 0

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Deze site gebruikt Akismet om ongewenst te verminderen. Meer informatie over hoe uw opmerkingen worden gebruikt.

Terug naar boven
0 aandelen
aandeel
gekwetter
Enregistrer