Wilt u een volledige pagina op WordPress maken?

Veel WordPress-thema's worden al geleverd met een ingebouwde paginasjabloon over de volledige breedte die u kunt gebruiken. Sommige WordPress-thema's hebben deze functie echter niet. in deze tutoriel, laten we u zien hoe u eenvoudig een volledige pagina op WordPress kunt maken.

Maar eerder, als je WordPress nog nooit hebt geïnstalleerd, ontdek je Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog 

Ga dan terug naar waarom we hier zijn.

maak een pagina over de volledige breedte in WordPress

Methode 1: een ingebouwde breedtesjabloon gebruiken op uw WordPress-thema

Deze methode wordt aanbevolen als uw WordPress-thema al is voorzien van een paginasjabloon over de volledige breedte. Als je er geen hebt, bekijk dan de volgende selectie en koop er een.

U moet eerst een pagina bewerken of een nieuwe maken door naar ' Pagina's> Toevoegen Een nieuwe pagina.

Selecteer in het paginabewerkingsvenster Volledige breedte als een sjabloon onder het selectievakje paginakenmerken.

Selectie van de paginasjabloon

Na het selecteren van het model Volledige breedteu moet uw pagina registreren. U kunt de pagina blijven aanpassen om meer inhoud toe te voegen of op de voorbeeldknop klikken om deze in actie te zien.

Pagina met volledige breedte

Als u geen sjabloonoptie Volledige breedte - volledige breedte - heeft op het bewerkingsscherm van uw pagina, betekent dit dat uw WordPress-thema deze niet heeft. 

Maar maakt u zich geen zorgen, we laten u zien hoe u eenvoudig een volledige pagina kunt maken zonder een WordPress-thema te wijzigen.

2-methode: een paginasjabloon met volledige breedte maken

Deze methode vereist dat u de bestanden van het WordPress-thema dat u gebruikt, bewerkt en een basiskennis heeft van PHP, CSS en HTML.

Trouwens, we nodigen je ook uit om de te raadplegen 8 beste WordPress-plug-ins om eenvoudig uw lay-outs te maken 

Maar voordat u verder gaat, moet u maak een WordPress-back-up of minimaal een back-up van uw huidige WordPress-thema. Dit zal u helpen uw website gemakkelijk te herstellen als er iets ergs gebeurt. 

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

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

Nu moet u dit bestand opslaan als " Full-width.php Op uw computer.

Deze code stelt eenvoudig de naam van een bestandssjabloon in en instrueert WordPress om de koptekstsjabloon te extraheren.

Vervolgens heb je het inhoudsgedeelte van de code nodig. Maak verbinding met uw website via een FTP-client (Of bestandsmanager in cPanel) ga dan naar " / Wp-content / themes / your-theme-map / .

Vervolgens moet u het bestand zoeken met de naam ' page.php ". Dit is het standaard paginasjabloonbestand voor uw thema.

Kopieer alles na de functie « get_header () En plak het in een bestand " Full-width.php Die u op uw computer hebt gemaakt.

Nu moet u de inhoud van het bestand "full-width.php" bekijken en deze coderegel verwijderen:

<?php get_sidebar(); ?>

Deze regel neemt gewoon de zijbalk en geeft deze weer in uw WordPress-thema. Door dit te verwijderen, zal uw thema de zijbalk niet tonen wanneer u de sjabloon gebruikt Volledige breedte.

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

Uw website lijkt langzaam te laden, ontdek Waarom u moet beginnen met het optimaliseren van uw WordPress-blog op basis van afbeeldingen

Als uw thema geen zijbalken op uw pagina weergeeft, vindt u deze code mogelijk niet in uw bestand.

Dit is hoe onze full-width.php-code zorgt voor de wijzigingen. Uw code kan er enigszins anders uitzien, afhankelijk van uw thema.

<?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(); ?>

Dan moet u het bestand downloaden Full-width.php »Op uw WordPress-themamap met de FTP-client.

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

Ga naar uw dashboard en bewerk of maak een nieuwe pagina.

Zoek op het pagina-bewerkingsscherm het selectievakje voor de paginakenmerken en klik op het vervolgkeuzemenu onder de optie "Sjabloon".

Selectie van het model in de editie van wordpress-pagina's

U zult uw model kunnen zien. Ga je gang, selecteer het en sla de pagina op of werk deze bij.

Nu kunt u uw website bezoeken, en u zult zien dat de zijbalken verdwenen zijn, en uw pagina verschijnt als een enkele kolompagina. Het is misschien nog niet vol, maar nu ben je klaar om het anders te streamen.

Maak uw website populair door de 7 WordPress-plug-ins om de SEO van uw afbeeldingen te optimaliseren

U moet de Inspect-tool gebruiken om de CSS-klassen te ontdekken die uw thema gebruikt om het inhoudsgebied te definiëren.

Vervolgens kun je de breedte aanpassen naar 100% met CSS. We hebben de volgende CSS-code gebruikt:

.page-template-full-width .content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.page-template-full-width .site {
margin:0px;
}

Zo ziet het eruit als Twenty Seventeen.

Presentatie van demo-thema wordpress

Dat is alles voor deze zelfstudie, ik hoop dat u hiermee pagina's over de volledige breedte kunt maken.

De bovenstaande methoden zijn gratis voor diegenen die het zich kunnen veroorloven en snel gemakkelijk lay-outs met volledige breedte of volledige breedte willen maken.

Ontdek ook enkele premium WordPress-plug-ins  

U kunt andere gebruiken WordPress plugins om een ​​moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.

We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.

1. Divi Builder

Divi Builder is een hoogwaardige bouwer van pagina's die zeer wordt gewaardeerd elegante thema's. Hoewel het over het algemeen wordt gebruikt als onderdeel van het Divi WordPress-thema, is Divi Builder ook een zelfstandige plug-in die u op andere WordPress-thema's kunt gebruiken.

Divi E1544278044306

Met Divi Builder kunt u uw inhoud bewerken met behulp van een visuele interface aan de voorkant en een interface aan de achterkant, hoewel de meeste gebruikers de voorkeur geven aan de eerste interface.

In feite is het in plaats van zijbalken allemaal in pop-ups en zwevende knoppen. Het geeft je toegang tot 316 vooraf ontworpen sjablonen verspreid over 40 verschillende presentatiepakketten, evenals de mogelijkheid om je eigen ontwerpen als sjablonen op te slaan.

Wij stellen u voor om te ontdekken Hoe maak je een professionele blog

Een van de eigenschappen van Divi is altijd de controle geweest over de stijlen die hij je geeft. Op drie verschillende tabbladen kunt u verschillende instellingen configureren, waaronder responsieve bedieningselementen, aanpasbare spatiëring en meer.

U kunt zelfs aangepaste CSS toevoegen, aangezien de CSS-editor basisvalidatie en automatische aanvulling bevat. Een van de punten van kritiek van Divi Builder is altijd geweest dat het vertrouwt op shortcodes. Wat betekent dat als je het op een dag uitschakelt, het een aantal shortcodes in je inhoud achterlaat. Hoewel dit een beetje deprimerend is, is het minder een probleem nu plug-ins zoals Shortcode Cleaner bestaan.

Downloaden | demonstratie | web hosting

2. Themify Builder

Themify Builder is, niet verrassend, het aanbod van het Themify-team. Het integreert het in verschillende van hun WordPress-thema's om klanten eenvoudige aanpassingsopties te bieden. Maar je kunt het ook kopen als een zelfstandige plug-in en gebruiken met elk WordPress-thema.

Themify Builder-animatiescherm E1544277050530

Net als Divi Builder en WPBakery Page Builder, kunt u met Themify Builder lay-outs maken in de front-end of de back-end. Een ander voordeel is dat je met deze plug-in je responsieve breekpunten kunt aanpassen (maar alleen op het niveau van de hele website).

Ontdek Hoe WooCommerce te installeren en configureren voor maak een online winkel en gemakkelijk uw producten op internet verkopen 

Een cool ding over Themify Builder is dat je nog steeds de standaard WordPress-editor kunt gebruiken, terwijl andere paginabuilders je dwingen de WordPress-interface te gebruiken. paginabuilder voor alles.

Downloaden | demonstratie | web hosting

3. Elementor

De Elementor WordPress-plug-in, oorspronkelijk gelanceerd in 2016, is een van de jongste paginabouwers op deze lijst. Ondanks zijn late start, genereerde Elementor snel meer dan 1 actieve installaties op WordPress.org, waardoor het een van de meest populaire WordPress-paginabouwers is.

Elementor Pro E1544277036401

Wat zijn reputatie maakt, is de vloeiende visuele interface, de verschillende stijlopties en andere krachtige functies zoals het volledig maken van WordPress-thema's.

De interface is verdeeld in twee hoofdonderdelen, met een derde zone voor bepaalde parameters. De gratis versie van Elementor biedt 28 gratis widgets. De Pro-versie brengt 30 andere widgets, in totaal 58-widgets in de Pro-versie. De gratis versie bevat ongeveer 40 gratis sjablonen, terwijl de Pro-versie honderden extra sjablonen bevat.

 Downloaden | demonstratie | web hosting

Andere aanbevolen bronnen

Lees meer over andere aanbevolen bronnen om u te helpen bij het bouwen en beheren van uw website.

Conclusie

Alstublieft ! Dat is het voor deze tutorial. Als je een WordPress-thema hebt dat geen pagina met volledige breedte als sjabloon biedt, hopen we dat deze tutorial je heeft geholpen om die tekortkoming op te lossen. Aarzel niet om deel met je vrienden op je favoriete sociale netwerken

U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie.

Als u suggesties of opmerkingen heeft, laat ze dan achter in onze rubriek commentaires.

...