Hoe maak je een volledige breedte pagina in WordPress - DeLaatbusiness
Chatbots marketing

Hoe maak je een volledige breedte pagina in WordPress

6 min


110
Dummy image 6 gratis internet marketing ebooks, klik hier voor download

Wilt u een pagina met volledige breedte maken in WordPress? Veel WordPress-thema’s hebben al een paginasjabloon met de volledige breedte die u kunt gebruiken.

 Sommige thema’s hebben die functie echter niet. In dit artikel laten we u zien hoe u eenvoudig een pagina met volledige breedte kunt maken in WordPress.

Methode 1: Een ingebouwde sjabloon voor volledige breedte gebruiken in uw WordPress-thema

Deze methode wordt aanbevolen als uw thema al wordt geleverd met een paginasjabloon op de volledige breedte.

Eerst moet je een pagina bewerken of een nieuwe maken door naar Pagina’s »Nieuwe pagina toevoegen te gaan.

Selecteer op het scherm voor het bewerken van de pagina de volledige breedte als de metabox van uw sjabloon onder pagina-eigenschappen.

Selecteren van de sjabloon voor de volledige breedte

Nadat u de sjabloon voor de volledige breedte hebt geselecteerd, moet u uw pagina opslaan. U kunt doorgaan met het bewerken van de pagina om meer inhoud toe te voegen of op de voorbeeldknop klikken om deze in actie te zien.

Pagina met volledige breedte met de volledige-breedtetemplate van het thema

Als u de sjabloonoptie voor de volledige breedte niet heeft op het bewerkingsscherm van uw pagina, betekent dit dat uw thema geen paginasjabloon op volledige breedte heeft.

Maakt u zich geen zorgen, we laten u zien hoe u gemakkelijk een volledige pagina kunt maken zonder uw WordPress-thema te veranderen.

Methode 2: Handmatig paginasjabloon met volledige breedte maken

Voor deze methode moet je WordPress-themabestanden bewerken en basiskennis hebben van PHP , CSS en HTML. Als je dit nog niet eerder hebt gedaan, bekijk dan onze handleiding over het kopiëren en plakken van code in WordPress .

Voordat u verder gaat, moet u een WordPress-back-up maken of op zijn minst een back-up van uw huidige thema. Dit zal u helpen uw site gemakkelijk te herstellen als er iets misgaat.

Eerst moet je een gewone teksteditor openen zoals Kladblok en de volgende code in een leeg bestand plakken:

1
2
3
4
5
6
<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

Nu moet je dit bestand opslaan als full-width.phpop je computer.

Deze code definieert eenvoudig de naam van een sjabloonbestand en vraagt ​​WordPress om een ​​koptekstsjabloon op te halen.

Vervolgens hebt u het inhoudsgedeelte van de code nodig. Maak verbinding met uw website met behulp van een FTP-client (of bestandsbeheer in cPanel) en ga vervolgens naar / wp-content / themes / your-theme-folder /.

Nu moet je het bestand met de naam page.php zoeken. Dit is het standaardpaginasjabloonbestand van uw thema.

Kopieer alles na de get_header()regel en plak het in full-width.php bestand op uw computer.

Nu moet je naar het volledige-width.php-bestand kijken en deze regel code verwijderen:

1
<?php get_sidebar(); ?>

Deze regel haalt eenvoudigweg de zijbalk op en geeft deze in uw thema weer. Als u dit verwijdert, stopt uw ​​thema de zijbalk bij gebruik van de sjabloon met volledige breedte.

Mogelijk ziet u deze regel meer dan eens in uw thema verschijnen. Als uw thema meerdere zijbalken heeft (wider-widgetgebieden worden ook zijbalken genoemd), dan ziet u elke zijbalk waarnaar in de code wordt verwezen. U moet beslissen welke zijbalken u wilt behouden.

Als uw thema geen zijbalken op pagina’s weergeeft, is deze code mogelijk niet in uw bestand te vinden.

Hier ziet u hoe onze volledige-width.php-code zorgt voor het aanbrengen van de wijzigingen. Uw code kan er enigszins anders uitzien, afhankelijk van uw thema.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <?php
        // Start the loop.
        while ( have_posts() ) : the_post();
            // Include the page content template.
            get_template_part( 'template-parts/content', 'page' );
            // If comments are open or we have at least one comment, load up the comment template.
            if ( comments_open() || get_comments_number() ) {
                comments_template();
            }
            // End of the loop.
        endwhile;
        ?>
    </main><!-- .site-main -->
</div><!-- .content-area -->
<?php get_footer(); ?>

Vervolgens moet u het volledige-width.php-bestand uploaden naar uw themamap met behulp van de FTP-client.

U hebt met succes een aangepaste paginasjabloon met de volledige breedte voor uw thema gemaakt en geüpload. De volgende stap is om deze sjabloon te gebruiken om een ​​pagina op volledige breedte te maken.

Ga naar het WordPress-beheergebied en bewerk of maak een nieuwe pagina.

Zoek op het paginabewerkingsscherm naar de metatabellen voor paginakenmerken en klik op het vervolgkeuzemenu onder de optie ‘Sjabloon’.

Selecteer uw sjabloon op volledige breedte

U kunt uw sjabloon over de volledige breedte daar bekijken. Ga je gang en selecteer het en sla / update de pagina.

Nu kunt u uw website bezoeken en ziet u dat zijbalken zijn verdwenen en dat uw pagina als één kolom wordt weergegeven. Het is misschien nog niet de volledige breedte, maar je bent nu klaar om het anders te stijlen.

U moet de Inspect-tool gebruiken om te achterhalen welke CSS-klassen door uw thema worden gebruikt om het inhoudsgebied te definiëren.

Daarna kunt u de breedte aanpassen tot 100% met behulp van CSS. We gebruikten de volgende CSS-code op onze testsite:

1
2
3
4
5
6
7
8
9
10
.page-template-full-width .content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}
.page-template-full-width .site {
margin:0px;
}

Dit is hoe het eruitzag op onze demo-site met het Twenty Sixteen-thema.

Pagina bekijken in volledige breedte

Methode 3: Maak een pagina met volledige breedte met behulp van de plug-in Page Builder

Deze methode is eenvoudiger en wordt aanbevolen voor alle gebruikers. Hiermee kunt u eenvoudig uw pagina over de breedtegraad bewerken en verschillende paginalay-outs voor uw website maken.

Voor deze methode heeft u een invoegtoepassing voor het maken van pagina’s met WordPress nodig . In het belang van deze tutorial zullen we Beaver Builder gebruiken . Het is een van de beste invoegtoepassingen voor het slepen en neerzetten van pagina’s en u kunt eenvoudig paginalay-outs maken zonder een code te schrijven.

Het eerste wat u hoeft te doen is de Beaver Builder- plug-in installeren en activeren . Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie .

Na activering moet u een bestaande pagina bewerken of een nieuwe maken.

Op het paginabewerkingsscherm, onder het gedeelte met paginakenmerken, moet je de sjabloon voor de volledige breedte selecteren die door je WordPress-thema wordt geboden.

Selecteer sjabloon met volledige breedte

Als uw thema geen sjabloon voor de volledige breedte heeft, kunt u er een maken door de instructies te volgen die worden vermeld in de tweede methode.

Na het selecteren van uw paginasjabloon moet u op de knop Opslaan opslaan klikken om uw pagina op te slaan.

Nu bent u klaar om de invoegtoepassing voor paginabouwers te gebruiken om uw lay-out te maken. U begint door op het tabblad Paginabuilder boven de pagina-editor te klikken.

Start page builder

Hiermee start u de interface voor het maken van pagina’s, waar u een live voorbeeld van uw pagina kunt zien met opties voor het maken van pagina’s.

Beaver Builder interface

U kunt beginnen door bovenaan op de knop Sjablonen te klikken. Beaver Builder wordt geleverd met verschillende kant-en-klare en professioneel ontworpen sjablonen die u als uitgangspunt kunt gebruiken.

Selecteer een sjabloon

U kunt gewoon op een sjabloon klikken om het te selecteren en de paginabuilder zal het voor u laden, inclusief de lay-out, afbeeldingen en inhoud. U kunt ook op de lege sjabloon klikken om zonder kant-en-klare sjabloon te starten en uw eigen lay-out te maken.

Beaver Builder-lay-outs zijn opgebouwd met rijen en modules. Elke rij kan meerdere kolommen bevatten en binnen elke rij kunt u inhoudsmodules en widgets toevoegen.

Om een ​​rij of module in de lay-out te bewerken, hoeft u alleen maar te wijzen en erop te klikken.

Klik en klik om een ​​item te bewerken

Beaverbouwer opent de itemdetails in een pop-up waar je de instellingen kunt bewerken. U kunt kleuren, lettertypen wijzigen, achtergrondfoto’s toevoegen, tekst wijzigen, enz.

Een item bewerken in Beaver Builder

U kunt op elk gewenst moment modules en widgets aan uw lay-out toevoegen. Beaver Builder wordt geleverd met veel standaard- en geavanceerde inhoudsmodules die u eenvoudig naar uw pagina kunt slepen en neerzetten.

Voeg modules toe aan uw paginalay-out

Als u klaar bent met bewerken, kunt u bovenaan op de knop ‘Gereed’ klikken. Dit toont u een pop-up waarin u op de knop Opslaan of Publiceren moet klikken.

Sla uw pagina op of publiceer hem

U kunt nu uw pagina bezoeken om deze in actie te zien.

We hopen dat dit artikel je heeft geholpen om eenvoudig een pagina met volledige breedte te maken in WordPress.


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *