Transparante headers zijn tegenwoordig populair en worden door een steeds groter aantal websites gebruikt. Dit soort headers zorgen ervoor dat uw pagina er professioneel uitziet en moedigen gebruikers aan om langer op de pagina te blijven.
Boven de vouw verwijst Beaver Builder Transparent Header naar het gebied op de webpagina dat de gebruikers op het eerste gezicht zien, dwz wat de gebruikers zien zonder over de pagina te scrollen.
Benieuwd naar Beaver Builder, maak je geen zorgen, ik heb je gedekt onze gedetailleerde Beaver Builder Review.
Ik zal deze vragen beantwoorden in de blog, kijk maar eens:
- Wat is een paginakop?
- Wat is de betekenis van een transparante koptekst?
- Wat doet het toevoegen van een transparante koptekst aan uw website?
- Wat zijn de functies van Beaver Builder?
- Hoe een transparante koptekst in te stellen met Beaver Builder?
- Wat zijn de stappen om de koptekst van uw webpagina transparant te maken?
- Welke belangrijke codetermen moet u kennen?
- Wat zijn de prijzen van Beaver Builder?
Inhoudsopgave
Wat is een paginakoptekst?
Een paginakop wordt het bovenste gedeelte van een webpagina op uw website genoemd. De kopteksten worden vaak verkeerd geïnterpreteerd met alleen de bovenste strook met het logo van uw bedrijf/website en een menubalk.
Maar dit is niet het geval, de paginakoptekst is de volledige inhoud die een gebruiker ziet wanneer hij op uw pagina terechtkomt, die inhoud boven de vouw wordt genoemd, zoals hierboven vermeld.
Er zijn verschillende functies die uw koptekst kan hebben, die u naar wens kunt toevoegen.
Deze zijn:
- Uw bedrijfs- of websitelogo
- Elk type call-to-action dat de gebruikers naar uw bestemmingspagina zou leiden
- Kop of een slogan die u en uw merk vertegenwoordigt
- Menubalk voor gebruiksvriendelijkheid
- Een zoekoptie om gemakkelijk door uw website te navigeren.
Wat betekent transparante koptekst?
Normale kopteksten hebben een strookachtige rechthoek bovenaan uw webpagina die uw koptekstinhoud en pagina-inhoud in sommige gevallen van elkaar scheidt.
Als u een transparante koptekst gebruikt, kunt u de inhoud van uw pagina samenvoegen met de koptekst en met de bovenste rechthoekige strook met uw websitelogo, call-to-action en menu.
Eigenschappen van Beaver Builder
Er worden verschillende functies meegeleverd Bever bouwer. Laten we enkele van de belangrijke functies bespreken.
1. Paginasjablonen
Paginasjabloon is een type thema dat u voor uw webpagina's kunt instellen. Met een beverbouwer kunt u voor elke webpagina een ander paginasjabloon hebben, of u kunt een gemeenschappelijk sjabloon hebben.
Het is aan jou. Deze sjablonen zijn creatief, uniek, gebruiksvriendelijk en vooral mobielvriendelijk.
2. Plaatsing van inhoud
U kunt afbeeldingen op de door u gewenste manier vergroten of verkleinen, verplaatsen en bijsnijden door er gewoon op te klikken. Zet uw call-to-action, aantrekkelijke symbolen en headers op het vereenvoudigde dashboard van het Beaver Builder-thema dat u selecteert.
U kunt uw pagina ook opsplitsen in segmenten om meer inhoud op uw pagina te plaatsen en er enigszins afgeslankt uit te zien, met als doel dat het een gedenkwaardige impact heeft op klanten.
3. Powerpack Beaver-bouwer
Dit is een add-on die u kunt integreren met een beaver-bouwer en een groot aantal integraties kunt krijgen om de prestaties van uw website te verbeteren en de webpagina's mooier te maken.
Moet u uw inhoud op de WordPress-interface schrijven? Maak je er geen zorgen over, met Beaver Builder kun je je inhoud samenstellen op de typische interface van WordPress en alles samen importeren op het beaver builder-thema dat je besluit te gebruiken voor je pagina.
Als u ervoor kiest om beaver builder niet langer te gebruiken, kunt u de door beaver builder gemaakte sjabloonpagina's naar uw gewone WordPress-pagina-interface exporteren zonder ook uw inhoud te verliezen.
Dit vind je misschien ook leuk:
Hoe een transparante koptekst in te stellen met Beaver Builder?
Er is slechts één tool nodig om een transparante header in te stellen op een van de webpagina's op uw website: The Beaver Themer. Laten we Beaver Themer in detail bespreken.
Bever Themer
Beaver Themer zal je helpen aantrekkelijk en geoptimaliseerd maken webpagina's met slechts één klik via het gebruiksvriendelijke dashboard.
Het biedt de functie waarmee u kop- en voetteksten kunt maken, de 404-foutpagina, en daarmee ook de pagina's die u hebt gearchiveerd. Hiermee kunt u ook de kop- en voettekst voor elke webpagina maken, zodat de gebruiker gemakkelijk door uw website kan navigeren.
Voordelen
- Verschillende thema's om uit te kiezen
U kunt het thema voor elke pagina op uw website bepalen en ze kunnen ook allemaal verschillend zijn.
Door gebruik te maken van deze thema's kunt u blog- en landingspagina's maken en de 404-foutpagina's aanpassen, zodat deze pagina's uw gebruikers kunnen helpen om op de juiste pagina naar de website te komen.
- Thema onderdelen
Deze onderdelen zijn een zeer uniek kenmerk en zijn zelden te vinden in andere thema-indelingstools.
Het helpt u bij het maken van gedeeltelijke lay-outs. Met behulp van deze onderdelen kunt u bijvoorbeeld een kop- of voettekst maken op al uw pagina's, ongeacht of de pagina is gemaakt met een Beaver-thema of niet. Is dat niet geweldig!
- Veldverbindingen
U kunt het Beaver-thema integreren met al uw bestaande pagina's en de inhoud beveiligen terwijl u dit proces uitvoert.
Bij andere tools voor de lay-out van thema's bestaat het gevaar dat u inhoud kwijtraakt wanneer u de tool aansluit op uw normaal gemaakte pagina of op een pagina die is gemaakt met een andere tool voor de lay-out van thema's.
- Postrasters
U kunt een thema kiezen dat uw blogs in rasters plaatst en u kunt elk raster naar wens bewerken. Het zal helpen uw pagina gemakkelijk te navigeren te maken en het een prachtige uitstraling te geven.
- Gemeenschappelijke inhoud
Wilt u dat een klein stukje dynamische inhoud algemeen is en op alle pagina's wordt weergegeven? Zo ja, dan is het beverthema uw oplossing. Met het beverthema krijgt u een geheel ander dashboard waarmee u inhoud kunt creëren die op elke pagina van uw website kan worden weergegeven.
U kunt kiezen of u de inhoud dynamisch, glijdend of gewoon statisch wilt houden. Houd er rekening mee dat lange inhoud niet zo gewoon is, omdat dit kan leiden tot dubbele inhoud op al uw pagina's.
U kunt de volgende vormen van inhoud maken: tekst, afbeeldingen, koppelingen en aangepaste velden. Eenmaal gemaakt, koppelt u ze aan alle pagina's waarop u wilt dat die inhoud wordt weergegeven.
Stappen om de koptekst van uw webpagina transparant te maken
Hier zijn enkele belangrijke stappen die u moet volgen:
Fase 1: Download Beaver en begin met het maken van een pagina voor uw site met behulp van Beaver Builder
Het eerste en belangrijkste dat moet worden gedaan, is de productie van de pagina door Beaver Builder.
In WordPress, na de introductie van de beverfabrikantmodule, in plaats van een pagina via WordPress te maken, opent u eenvoudigweg de pagina, voegt u een titel aan de pagina toe met behulp van WordPress en klikt u daarna op wijzigen met beverontwikkelaar en begint u met uw werk.
Stap 2: Inhoud toevoegen
Nadat u een basispagina-indeling hebt gemaakt, beslist u welke inhoud u bovenaan de pagina wilt toevoegen, dat wil zeggen boven de vouwinhoud. Dit kan een kop zijn gevolgd door een zin, een kop, een subkop of een call-to-action, of alleen een logo en een afbeelding.
Maak nu een rij met behulp van een beverbouwer en voeg uw geplande inhoud aan de rij toe. Voeg onder de rij de gewenste achtergrondafbeelding toe zodat de transparante kop erbovenop verschijnt.
Stap 3: Klassetoevoeging
Je moet naar de sleutelknop op de bovenste rij gaan om klassen toe te voegen. Voeg vervolgens een CSS-klasse toe door naar de optie Geavanceerd te gaan. Vergeet niet op de knop Opslaan te klikken.
Stap 4: De kop transparant maken
Dus nu zijn we van plan om de Top Banner-kolom onder de kop te verplaatsen. Bovenal moeten we de kop duidelijk maken.
We doen dit nu met als doel dat we kunnen zien waar de kop van de Top Banner-kolom sluit wanneer we CSS gebruiken om deze onder de sitekop te plaatsen.
Voeg uw CSS-bestand toe in style.css of sluit het rechtstreeks aan op de Beaver-builder.
Enkele belangrijke termen van de code die u moet kennen:
- Lichaam. fl-page-header-primair:
Het bovenstaande CSS-fragment is het fragment dat door een beverbouwer wordt gebruikt voor het coderen van de koptekst bovenaan de pagina op uw website.
We voegen de hoofdtekst van de pagina aan de voorkant toe om de specificiteit van de pagina te vergroten. Een andere reden om het bovenstaande codefragment te targeten, is om een duplicaat te maken van de primaire code die door de Beaver-bouwer voor de header wordt gebruikt en vervolgens de wijziging door te voeren.
Dit voorkomt dat uw header permanent wordt vernietigd voor het geval er iets misgaat met de code.
- Achtergrond: transparant:
Dit CSS-fragment wordt gebruikt om de achtergrond te verwijderen die standaard is ingesteld wanneer u een Beaver-builder gaat gebruiken. Als uw pagina niet via Beaver-builder is gemaakt, kunt u de header nog steeds transparant maken door het CSS-bestand te exporteren naar de geavanceerde optie die u heeft gekregen op de bovenste rij.
Maar de achtergrondkleur moet in alle gevallen worden verwijderd via het bovenstaande CSS-fragment.
- Positie: relatief en z-index:10:
Om ervoor te zorgen dat onze transparante header, dat wil zeggen de bovenste banner, uitgelijnd is met de bestaande vaste header en met de achtergrondheader, gebruikt u het genoemde CSS-fragment.
Stap 5: Uitlijning van de bovenste bannerrij
Er moet nog een CSS-code worden toegevoegd op dezelfde plaats waar u de bovenstaande CSS-fragmenten hebt toegevoegd.
Belangrijke CSS-termen die u in de code zou tegenkomen:
@mediascherm en (minimale breedte 660px): Het gebruik van deze code is gewoon het uitlijnen van de bovenste banner met de bestaande koptekst. De genoemde px-waarde, die in dit geval 660 is, is erg belangrijk. De waarde kan standaard met de code worden meegeleverd of u moet deze handmatig toevoegen.
De standaard of gemiddelde px-waarde die u moet instellen, kan in het bereik van 990-995px liggen, afhankelijk van uw systeemconfiguratie.
.top-banner .fl-row-content-wrap: Dit CSS-fragment helpt u de opvulling aan te passen aan uw vereisten.
marge-top:-100px: Met dit fragment kunt u de marge van de koptekst aan alle vier de zijden naar wens aanpassen.
Stap 6:
Pas de transparante koptekst aan en verfraai deze om uw logo en menu in te stellen op een manier die er goed uitziet en past bij de transparantie van de koptekst.
De koptekst globaal transparant maken
met Beaver Builder, heeft u de mogelijkheid om de gemaakte topbanner op te slaan en deze op andere webpagina's van uw website te gebruiken.
Frequente problemen bij het transparant maken van de koptekst
- De header is alleen zichtbaar op desktops, maar niet op mobiele telefoons en tablets.
Dit probleem is eenvoudig op te lossen. U hoeft alleen Uiterlijk> Aanpassen> Algemeen> Achtergrond te bezoeken en u moet de kleur zo instellen dat deze contrasteert met uw koptekst, zodat deze opvalt en leesbaar is.
- De bovenste balk van de koptekst is niet zichtbaar.
De problemen hier liggen bij de CSS-fragment van de code die u hebt gekopieerd en geplakt of die u zelf hebt geschreven, inclusief de hoofdtekst. fl-pagina-balk.
Prijzen van Beaver Builder
Voor het toevoegen van een transparante header heb je een beverthema nodig dat wordt geleverd bij de betaalde versie van het beverbuilderpakket.
U moet $ 149 betalen voor een jaar Beaver Builder service die Beaver-thema's bevat waarmee u eenvoudig transparante headers aan uw website kunt toevoegen.
Voors en tegens van Beaver Builder transparante koptekst
VOORDELEN
- Als je een visueel aantrekkelijke pagina wilt, dan is het Beaver-thema een must-have-thema
- U kunt de lay-out voor elk apparaat afzonderlijk wijzigen, dat wil zeggen mobiele telefoons, tablets en desktops. Je kunt het ook allemaal samen maken met een andere landingspagina of een normale pagina voor alle drie de apparaten.
NADELEN
- Het enige negatieve aan het Beaver-thema is dat de prijs voor betaalde abonnementen een beetje hoog is. Maar kijkend naar de functies die het biedt, is het zeker de moeite waard.
Beaver Builder klantrecensies
Quick Links:
- Beaver Builder-promotie- en couponcodes
- Beaver Builder versus Divi
- Beaver Builder versus Elementor
- Beaver Builder versus visuele componist
Veelgestelde vragen | Beaver Builder transparante koptekst
Waar kan ik de CSS-code verkrijgen?
U kunt contact opnemen met de klantenondersteuning van Beaver Builder, en zij zullen uw vraag snel beantwoorden en u de oplossing geven, of u kunt platforms zoals git hub gebruiken en de code rechtstreeks van die platforms kopiëren, aangezien deze gratis te gebruiken zijn.
Wat is de transparante header in WP?
In WordPress is bij een transparante header de achtergrondkleur op 0 ingesteld, waardoor deze doorzichtig is. Dit effect kan uw website een eigentijdse en minimalistische uitstraling geven, terwijl de inhoud toch door de header heen zichtbaar blijft.
Hoe kan ik het ontwerp van mijn transparante header aanpassen?
U kunt de stijlkeuzes in uw paginabuilder wijzigen om het uiterlijk van uw doorschijnende koptekst te personaliseren. In de headermodule-instellingen van Beaver Builder kunt u bijvoorbeeld het lettertype, de lettergrootte, de letterkleur en de tekstuitlijning wijzigen. U kunt ook extra headercomponenten of modules toevoegen, zoals een logo of een navigatiemenu, en de stilistische parameters ervan wijzigen. U kunt ook aangepaste CSS gebruiken om het uiterlijk van uw doorschijnende header verder te personaliseren.
Hoe aan de slag te gaan met de Beaver Builder?
Het inhoudsgedeelte van WordPress verschilt van de koptekst, voettekst en zijbalk. Met de Beaver Builder-plug-in kunnen lay-outs worden gemaakt op basis van het inhoudsgebied. Bovendien kunt u de Beaver Themer-plug-in gebruiken om lay-outs te bouwen op plaatsen buiten het inhoudsgebied.
Hoe schakel ik een transparante header in?
Navigeer naar Weergave > Aanpassen > Koptekst om de optie Transparante koptekst te activeren. De optie 'Toon transparante koptekst alleen op de startpagina' wordt beschikbaar nadat dit is gebeurd. Als u dit uitschakelt, wordt de koptekst op elke pagina doorschijnend.
Hoe maak ik een header transparant in Beaver Builder?
Om een header transparant te maken in Beaver Builder kunt u deze stappen volgen: Open de Beaver Builder Editor en klik op de headermodule die u wilt bewerken. Navigeer in de module-instellingen naar het tabblad Stijl. Klik onder het gedeelte Achtergrond op de kleurkiezer naast de optie Achtergrondkleur. Schuif in de kleurenkiezer de dekkingsbalk naar links totdat de dekking is ingesteld op 0. Hierdoor wordt de koptekst transparant. Sla de wijzigingen op en publiceer de pagina om de transparante koptekst te zien.
Hoe wijzig ik de koptekst in Beaver Builder?
Om de koptekst in Beaver Builder te wijzigen, kunt u deze stappen volgen: Open de Beaver Builder Editor en navigeer naar de pagina waar u de koptekst wilt wijzigen. Klik op de kopmodule die u wilt bewerken. In de module-instellingen kunt u wijzigingen aanbrengen in de lay-out, stijl en inhoud van de koptekst. Om nieuwe elementen of modules aan de header toe te voegen, kunt u de drag-and-drop-interface in Beaver Builder gebruiken. Nadat u de gewenste wijzigingen heeft aangebracht, slaat u de pagina op en publiceert u deze om de bijgewerkte koptekst te zien.
Conclusie: Bouw een aangepaste header met Beaver Builder 2024
Transparante kopteksten zijn een zeer belangrijke functie op een website als u wilt dat ze aantrekkelijk, stijlvol en modern zijn.
Het zorgt er zelfs voor dat uw call-to-action op de bovenste banner of content boven de vouw opvalt. Met een beverbuilder maak je eenvoudig een transparante header.
De bovenstaande stappen kunnen verwarrend zijn of moeilijk lijken, maar het enige dat u hoeft te doen is de code in een ruimte kopiëren en plakken en de wijzigingen bekijken en deze globaal maken als u dat wilt.
