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.
Let op de sitetitel en slogan bovenaan in het midden van de koptekst die dynamisch wordt weergegeven.
Gratis download
Word lid van de Divi Newlsetter en we sturen je een kopie van het Divi Ultimate Landing Page Layout Pack, plus nog veel meer ressources, gratis en geweldige Divi-tips en -trucs. Volg het en je bent binnen de kortste keren een Divi Master. 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.
Na voltooiing is de algemene koptekstsjabloon beschikbaar in Divi Theme Builder.
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.
En sommige mensen realiseren zich niet eens dat de slogan bestaat, laat staan dat ze de tijd nemen om deze bij te werken. Bovendien, bij gebruik van de Divi-thema, zijn de sitetitel en slogan niet standaard zichtbaar op uw site, dus u kunt ze gemakkelijk over het hoofd zien. De sitetitel en slogan zijn echter essentiële elementen 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.
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 JSON-bestand van website-sjabloon Standaard.
Ga dan naar Divi> Theme Builder.
Klik op het draagbaarheidspictogram in de rechterbovenhoek. Kies in het pop-upportabiliteitsvenster het JSON-bestand uit website-sjabloon standaard en klik op de knop Importeren.
Zodra de sjabloon is toegevoegd aan de themabouwer, verwijdert u de voettekstsjabloon en klikt u op om de algemene koptekst te bewerken.
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.
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).
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.
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 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.
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
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
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.
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%
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.
Eindresultaat
Open een willekeurige pagina op uw site om het resultaat te zien. U zou de dynamische sitetitel en slogan prachtig moeten zien!
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
