De kop- en voetteksten van een website zijn essentiële elementen. In de meeste gevallen biedt de kop navigatielinks die het navigeren naar verschillende delen van een website vereenvoudigen. Aan de andere kant bevat de voettekst essentiële informatie die websitebezoekers nodig kunnen hebben, zoals een bedrijfsadres of contactgegevens, om maar een paar amp te noemen.
Kop- en voetteksten worden geleverd door het huidige thema van een gebruiker op WordPress. Deze zijn meestal goed ontworpen en geschikt voor het merendeel van hun toepassingen. Als u uw thema's echter wilt aanpassen, moet u de code wijzigen; Dit is wanneer de Page Builder- plugin van pas komen. U kunt ze gebruiken om webpaginacomponenten te maken en te wijzigen zonder enige code te kennen.
In deze tutorial leren we hoe we een kop- en voettekst voor een website kunnen maken. Er zal gebruik worden gemaakt van Elementor Pro (aangezien de basisversie van Elementor niet de functies bevat die het belangrijkst zijn voor het maken van deze componenten). Download dus Elementor Pro en zorg ervoor dat het is ingeschakeld.
Elementor is de meest geavanceerde paginabuilder, waarmee gebruikers premiumelementen kunnen gebruiken om prachtige ontwerpen en lay-outs te creëren. Het is zeer nuttig voor beginners die geen voorkennis van coderen hebben. Met de drag-and-drop-editor in Elementor kunnen gebruikers widgets en items verplaatsen.
Elementor is een visuele paginabuilder waarmee gebruikers kunnen zien hoe hun pagina's eruitzien zonder van modus te wisselen.
Een ander overtuigend argument om Elementor te gebruiken is dat het meeste werk kosteloos kan worden uitgevoerd. Hun gratis editie biedt meer dan voldoende mogelijkheden voor het bewerken van sites. We bespreken echter zowel de gratis als de betaalde versie, zodat u de versie kunt kiezen die het beste bij uw behoeften past.
Hieronder volgen enkele belangrijke aspecten van Elementor die het de moeite waard maken:
Het zou helpen als u de algemene indeling van de gewenste kop- en voettekstsecties bepaalt voordat u een unieke koptekst ontwikkelt. Als u naar de vooraf gemaakte lay-out van de koptekstsectie kijkt, kunt u veel keuzes maken.
U kunt kiezen uit verschillende headersecties; De meest voorkomende en modern ogende header heeft een sitelogo in de meest linkse hoek, een navigatiebalk in het midden en een zoekbalkgedeelte aan de rechterkant.
Er zijn eindeloze mogelijkheden en u kunt elke gewenste indeling maken.
Ik heb gekozen voor het vooraf gemaakte koptekstsjabloon nr. 7; Dit is de meest gebruikelijke en eenvoudige benadering voor het gebruik van een header op een WordPress-website. Kopieer en plak de naam van de koptekstsjabloon in Sjablonen > Koptekst > zoeksjabloon > plak de gekopieerde koptekstnaam .
Wanneer je de gewenste headersjabloon hebt gevonden, selecteer je 'Bewerken met Elementor'. Je wordt dan naar de Elementor Pro header builder-sectie geleid.
Laten we dit feest beginnen.
Het bovenste gedeelte van uw webpagina wordt een ‘websitekoptekst’ genoemd. De header is meestal hetzelfde op uw hele website. Sommige websites gebruiken echter verschillende headers voor verschillende delen van de site.
Uw headerontwerp geeft uw gebruikers hun eerste indruk van uw website, of ze nu op uw startpagina, over de pagina of andere individuele inhoud zijn aangekomen. En als het goed is ontworpen, zal het de aandacht van de gebruiker trekken en hem verleiden om te blijven scrollen en lezen.
De header kan ook helpen bij het promoten van de merkidentiteit van uw bedrijf.
Ik gebruik functies zoals het bedrijfslogo, het lettertype, de kleuren en de algemene merktaal.
Sitenavigatie, zoeken op de site, een winkelwagentje (voor verkoopsites), call-to-action (CTA)-knoppen en andere functies die de gebruikerservaring verbeteren en de conversiepercentages verhogen, zijn allemaal te vinden in headers.
Een voettekst is een gedeelte van een webpagina dat onderaan de pagina wordt weergegeven. Ze worden meestal constant weergegeven op de hele website, op alle pagina’s en berichten, vergelijkbaar met headers.
Voetteksten worden vaak over het hoofd gezien, wat een verspilling van potentieel is, aangezien ze op elke pagina van de site verschijnen. Ze zijn net zo cruciaal voor de headers.
Uw voettekstontwerp kan nuttige en essentiële informatie weergeven, zoals nieuwsbriefregistratie, copyrightinformatie, gebruiksvoorwaarden en privacy, een sitemap, contactgegevens, kaarten, websitenavigatie en nog veel meer, afhankelijk van de instellingen die u kiest.
In deze sectie gaan we een aangepaste koptekst maken. Maak je geen zorgen als dat intimiderend lijkt; we beginnen niet vanaf nul. In plaats daarvan gebruiken we de sjablonen van Elementór Pro, ontworpen door het ontwerpteam van Elementor.
Beweeg in het WordPress-beheerderspaneel over Sjablonen en klik op Nieuw toevoegen om onze koptekst samen te stellen.
Er verschijnt een modaal venster zodra u bent doorgestuurd. Selecteer Koptekst in het vervolgkeuzemenu, geef de koptekst een naam en klik op ' Sjabloon maken ':
Hiermee wordt de Elementor-editor gestart. Daarna krijgt u een lijst met sjablonen waaruit u kunt kiezen. Kies er dus een uit die je aanspreekt:
Het zou bovenaan het Elementor-bewerkingsgedeelte moeten verschijnen zodra je een sjabloon hebt gekozen:
Een logo maken: De eerste stap is het maken van een logo. Stel het logo in de Live Editor van de site in, zodat het in de header wordt geplaatst. Kies een logo door op Site-identiteit te klikken.
Zodra u een logo heeft gekozen, klikt u op Publiceren .
Het logo van uw site zou nu in de koptekst moeten staan als u de Elementor-interface vernieuwt:
Daarna kunt u alle gewenste wijzigingen aanbrengen.
Het volgende dat we moeten doen is het menu veranderen. Als u een menu heeft gegenereerd, zal de sjabloon dit automatisch opnemen:
Dit is onze menustructuur, die u kunt zien in de koptekstsjabloon:
Als u meer dan één menu heeft, kunt u de inhoud indien nodig bijwerken.
U kunt de eigenschappen ervan net als elke andere widget bewerken.
Als we meer items moeten toevoegen, kunnen we meer secties aan onze kop toevoegen:
Laten we beginnen met het toevoegen van een header en enkele social media-iconen:
Daarna kunt u alle gewenste wijzigingen aanbrengen. Zo is onze bewerking geworden:
U kunt de koptekst nu publiceren zodra u klaar bent met het wijzigen ervan. We gebruiken de koptekst op onze hele site in het amp , dus we selecteren die keuze nadat we Voorwaarde toevoegen hebben geselecteerd:
En hier is een amp van een pagina van onze live site:
Het proces van het maken van een voettekst is redelijk vergelijkbaar met dat van het maken van een koptekst. Om er een te maken, maakt u een nieuwe voettekstsjabloon, zoals deze:
Kies dan voor een sjabloon. Voetteksten zijn er in verschillende soorten en maten. Sommige bevatten bedrijfsinformatie, terwijl andere contactformulieren hebben. Selecteer een sjabloon die geschikt is voor uw vereisten.
Het sjabloon dat we voor onze website hebben gekozen, is als volgt:
U ziet de koptekst zodra u begint met bewerken (als u als voorwaarde stelt dat deze op alle pagina's verschijnt).
Wijzig de voettekst indien nodig; Zo ziet onze revisie eruit:
Publiceer de voettekst nadat deze is voltooid:
Hier ziet u hoe het eindresultaat eruit ziet. Zowel de koptekst als de voettekst worden nu gebruikt op onze website:
Dit is de belangrijkste fase en u moet ervoor zorgen dat uw kop- en voettekstsecties responsief zijn. Omdat een menu op volledige breedte meestal niet past bij de mobiele weergave, moet u weten hoe uw ontwerp op het mobiele scherm zal verschijnen. Met de responsieve schakelaars onder aan het Elementor-zijbalkgedeelte kunnen de mobiele en tabbladversies worden gewijzigd.
U kunt de responsiviteit van uw kop- en voettekst op verschillende manieren testen. U kunt amp tools als Browserstack, CrossBrowser Testing en Google Resizer gebruiken om ervoor te zorgen dat uw webpagina's zo responsief mogelijk zijn. Je kunt het ook handmatig doen door met verschillende apparaten te experimenteren.
Ik hoop dat deze handleiding je heeft geholpen bij het snel ontwikkelen van je unieke kop- en voettekstsecties met Elementor Pro. WordPress heeft veel functies, maar er zijn slechts een paar wijzigingen mogelijk in de kop- en voettekstsecties, die uiteindelijk zijn opgelost met de Elementor Pro-paginabuilder. Met een veel betere controle over uw site-elementen kunt u de visie van uw site nu beter demonstreren. Bovendien is de functionaliteit van Elementor verbeterd door het gebruik van gratis add-ons, waardoor gebruikers hun websites kunnen aanpassen met meer geavanceerde mogelijkheden.
Twee van de meest populaire WordPress-thema’s op de markt zijn Astra en OceanWP. Professioneel…
Voor het maken van een uitstekende nieuwswebsite hoeft u geen webdesigner te worden. Wij…
Het krantenthema is een van de belangrijkste WordPress-thema's ontworpen door tagDiv, een…
Als het gaat om het opzetten van een online winkel, is WooCommerce de go-to plugin . Het…
Een header is over het algemeen het eerste dat iemand ziet wanneer hij of zij uw website bezoekt,…
Onze eigen paginabuilder, de Avada Builder, is nu beschikbaar in twee interfaces: Avada…