De kop- en voetteksten van een website zijn essentiële elementen. In de meeste gevallen biedt de koptekst navigatielinks die het navigeren naar verschillende delen van een website vereenvoudigen. Aan de andere kant, de voettekst bevat essentiële informatie die bezoekers van de website kan vereisen, zoals een bedrijfsadres of contactgegevens, om een paar ex noemen amp les.
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 gebruik. Als u uw thema's echter wilt aanpassen, moet u de code wijzigen; Dit is wanneer Page Builder- plugin ins van pas komen. U kunt ze gebruiken om webpagina-componenten te maken en te wijzigen zonder enige code te kennen.
Deze tutorial leert ons hoe we een kop- en voettekst van een website kunnen maken. Elementor Pro zal worden gebruikt (aangezien de basisversie van Elementor niet de functies bevat die het belangrijkst zijn voor het maken van deze componenten). Dus download Elementor Pro en zorg ervoor dat het is ingeschakeld.
- Waarom zou je Elementor kiezen als je paginabuilder?
- Met Elementor kunt u de hoofdlay-out van uw aangepaste kop- en voettekst kiezen.
- Wat is een header en wat doet het?
- Wat is een voettekst precies?
- Hoe maak je een koptekst?
- Een kopsjabloon ontwikkelen
- Wijzigingen aanbrengen in het kopmenu
- Header publicatie
- Een voettekst maken
- Een voettekstsjabloon ontwikkelen
- Voettekstwijzigingen
- Afgewerkt product
- Onderzoek uw kop- en voettekstsecties op reactievermogen.
- Dingen tot een goed einde brengen
Waarom zou je Elementor kiezen als je paginabuilder?
Elementor is de meest geavanceerde paginabuilder, waarmee gebruikers premium-elementen kunnen gebruiken om prachtige ontwerpen en lay-outs te maken. Het is zeer nuttig voor beginners die geen voorkennis hebben van coderen. Met de editor voor slepen en neerzetten 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 hoeven wisselen.
Een ander overtuigend argument voor het gebruik van Elementor is dat het meeste werk zonder kosten kan worden voltooid. Hun gratis editie is meer dan in staat om voldoende mogelijkheden voor sitebewerking te bieden. We bespreken echter zowel de gratis als de betaalde versie, zodat u de versie kunt kiezen die het beste bij u past.
De volgende zijn enkele van de belangrijke aspecten van Elementor die het de moeite waard maken:
- Drag-and-drop-functionaliteit wordt ondersteund.
- Het heeft een groot aantal sjablonen.
- Er zijn in totaal meer dan 90 widgets.
- Er is geen codering vereist voor responsieve ondersteuning.
- Opties voor opnieuw uitvoeren en ongedaan maken zijn beschikbaar.
- Automatisch opslaan is beschikbaar.
Met Elementor kunt u de hoofdlay-out van uw aangepaste kop- en voettekst kiezen.
Het zou helpen als u de algemene indeling van uw gewenste kop- en voettekstsecties zou bepalen voordat u een unieke koptekst ontwikkelt. Als u naar de vooraf gemaakte lay-out van de koptekst kijkt, kunt u veel keuzes maken.
Je kunt kiezen uit verschillende kopsecties; de meest voorkomende en modern ogende koptekst heeft een sitelogo in de meest linkse hoek, een navigatiebalk in het midden en een zoekbalkgedeelte aan de rechterkant.
De mogelijkheden zijn eindeloos en u kunt elke gewenste lay-out samenstellen.
Ik koos de nr. 7 vooraf gemaakte kopsjabloon; Dit is de meest gebruikelijke en eenvoudige manier om een header op een WordPress-website te gebruiken. Kopieer en plak de naam van de koptekstsjabloon in Sjablonen > Koptekst > zoeksjabloon > plak de gekopieerde koptekstnaam .
Wanneer je de gewenste header-sjabloon hebt gevonden, selecteer je "Bewerken met Elementor" en je wordt naar de Elementor Pro-headerbouwer-sectie geleid.
Laat dit feest beginnen.
Wat is een header en wat doet het?
Het bovenste gedeelte van uw webpagina wordt een 'websitekoptekst' genoemd. De koptekst is meestal hetzelfde voor uw hele website. Sommige websites gebruiken echter verschillende koppen voor verschillende delen van de site.
Uw koptekstontwerp geeft uw gebruikers hun eerste indruk van uw website, of ze nu op uw startpagina, over pagina of andere individuele inhoud zijn aangekomen. En als het goed ontworpen is, zal het de aandacht van de gebruiker trekken en hen 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, site zoeken, een winkelwagentje (voor verkoopsites), call-to-action (CTA)-knoppen en andere functies die de gebruikerservaring verbeteren en de conversieratio's verhogen, zijn allemaal te vinden in kopteksten.
Wat is een voettekst precies?
Een voettekst is een gedeelte van een webpagina dat onder aan de pagina wordt weergegeven. Ze worden meestal constant weergegeven op de hele website, op alle pagina's en berichten, vergelijkbaar met kopteksten.
Voetteksten worden vaak over het hoofd gezien, wat een verspilling van potentieel is, aangezien ze op elke pagina van de site verschijnen. Ze zijn even cruciaal voor de koppen.
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.
Hoe maak je een koptekst?
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.
Een kopsjabloon ontwikkelen
Beweeg in het WordPress-beheerpaneel de muisaanwijzer over Sjablonen en klik op Nieuw toevoegen om onze koptekst te maken.
Er verschijnt een modaal venster zodra u bent gerouteerd. Selecteer Koptekst in het vervolgkeuzemenu, noem de koptekst 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 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 om het in de koptekst te plaatsen. Kies een logo door op Site-identiteit te klikken.
Zodra je een logo hebt gekozen, klik je 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.
Wijzigingen aanbrengen in het kopmenu
Het volgende dat we moeten doen, is het menu wijzigen. Als u een menu heeft gegenereerd, zal de sjabloon dit automatisch opnemen:
Dit is onze menustructuur, die u kunt zien in de kopsjabloon:
Als u meer dan één menu heeft, kunt u de inhoud indien nodig bijwerken.
U kunt de eigenschappen ervan bewerken, net als elke andere widget.
Als we meer items moeten toevoegen, kunnen we meer secties aan onze Header toevoegen:
Laten we beginnen met het toevoegen van een koptekst en enkele pictogrammen voor sociale media:
Daarna kunt u alle gewenste wijzigingen aanbrengen. Dit is hoe onze bewerking is geworden:
Header publicatie
U kunt de koptekst nu publiceren als u klaar bent met het wijzigen ervan. We gebruiken de koptekst op onze hele site in het amp hieronder, dus we selecteren die keuze nadat we Voorwaarde toevoegen hebben geselecteerd:
En hier is een amp van een pagina van onze live site:
Een voettekst maken
Een voettekstsjabloon ontwikkelen
Het proces van het maken van een voettekst is vrij gelijkaardig aan dat van het maken van een koptekst. Om er een te maken, maakt u als volgt een nieuwe voettekstsjabloon:
Kies vervolgens 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:
Voettekstwijzigingen
U ziet de koptekst zodra u begint met bewerken (als u de voorwaarde instelt dat deze op alle pagina's wordt weergegeven).
Wijzig de voettekst indien nodig; Zo ziet onze revisie eruit:
Publiceer de voettekst nadat deze is voltooid:
Afgewerkt product
Zo ziet het eindresultaat eruit. Zowel de koptekst als de voettekst worden nu gebruikt op onze website:
Onderzoek uw kop- en voettekstsecties op reactievermogen.
Dit is de belangrijkste fase en u moet ervoor zorgen dat uw kop- en voettekstsecties responsief zijn. Omdat een menu over de volledige breedte meestal niet geschikt is voor de mobiele weergave, moet u weten hoe uw ontwerp op het mobiele scherm zal verschijnen. De responsieve schakelaars onder aan het Elementor-zijbalkgedeelte kunnen de mobiele en tabbladversies wijzigen.
U kunt de responsiviteit van uw kop- en voettekst op verschillende manieren testen. Voor ex amp le, kunt u tools zoals Browserstack, crossbrowser Testing, en Google Resizer gebruiken om ervoor te zorgen dat uw webpagina's zijn zo reageren als mogelijk te maken. Je kunt het ook handmatig doen door met verschillende apparaten te experimenteren.
Dingen tot een goed einde brengen
Ik hoop dat deze gids u heeft geholpen bij het snel ontwikkelen van uw unieke kop- en voettekstsecties met Elementor Pro. WordPress heeft veel functies, maar er zijn slechts een paar wijzigingen in de kop- en voettekstsecties mogelijk, die uiteindelijk zijn opgelost met de Elementor Pro-paginabuilder. Met een veel betere controle over uw site-elementen, kunt u nu beter de visie van uw site 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.
