Vil du lage en side i full bredde på WordPress?

Mange av WordPress-temaer kommer allerede med en innebygd sidemal i full bredde som du kan bruke. Noen WordPress-temaer har imidlertid ikke denne funksjonen. i denne tutoriel, viser vi deg hvordan du enkelt oppretter en side med full bredde på WordPress.

Men før, hvis du aldri har installert WordPress Discover Hvordan installere en WordPress blogg 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din 

Så tilbake til hvorfor vi er her.

lag en side med full bredde i WordPress

Metode 1: Bruk en innebygd bredmal på WordPress-temaet ditt

Denne metoden anbefales hvis WordPress-temaet ditt allerede er utstyrt med en sidemal i full bredde. Hvis du ikke har en, sjekk ut følgende valg og få en.

Først må du redigere en side eller opprette en ny ved å gå til " Sider> Legg til En ny side.

Velg i vinduet for redigering av sider Full Bredde som mal under avmerkingsboksen sideattributter.

Valg av sidemal

Etter å ha valgt modell Full Breddemå du registrere siden din. Du kan fortsette å tilpasse siden for å legge til mer innhold eller klikke på forhåndsvisningsknappen for å se den i aksjon.

Side med full bredde

Hvis du ikke har et alternativ for full bredde - full bredde - på sidredigeringsskjermen, betyr det at WordPress-temaet ikke har det. 

Men ikke fortvil, vi viser deg hvordan du enkelt oppretter en side i full bredde uten å endre et WordPress-tema.

2-metode: Hvordan lage en sidemal med full bredde

Denne metoden krever at du redigerer filene til WordPress-temaet du bruker, og at du har en grunnleggende forståelse av PHP, CSS og HTML.

Forresten, inviterer vi deg også til å konsultere 8 beste WordPress-plugins for enkelt å lage dine oppsett 

Men før du går videre, må du opprette en WordPress-sikkerhetskopi eller i det minste en sikkerhetskopi av ditt nåværende WordPress-tema. Dette vil hjelpe deg med å enkelt gjenopprette nettstedet ditt hvis noe dårlig skjer. 

Først må du åpne en tekstredigerer som Notisblokk og lime inn følgende kode i en tom fil:

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

Nå må du lagre denne filen som " Full-width.php På datamaskinen din.

Denne koden angir ganske enkelt navnet på en filmal og instruerer WordPress om å trekke ut toppmal.

Da trenger du innholdsdelen av koden. Koble til nettstedet ditt ved hjelp av en FTP-klient (eller filbehandler i cPanel) gå til " / Wp-content / themes / din-tema-mappen / '.

Så må du finne filen som heter " page.php ". Dette er standard sidemalfil for temaet ditt.

Kopier alt etter funksjonen « get_header () Og lim den inn i en fil " Full-width.php Som du har opprettet på datamaskinen din.

Nå må du se på innholdet i filen "full-bredde.php" og slette denne kodelinjen:

<?php get_sidebar(); ?>

Denne linjen tar bare sidefeltet og viser det i WordPress-temaet ditt. Ved å fjerne dette, vil ikke temaet vise sidefeltet når du bruker malen Full Bredde.

Du kan se denne linjen vises mer enn en gang på WordPress-temaet ditt. Hvis WordPress-temaet ditt har flere sidefelt (widgetområder bunnteksten kalles også sidefelt)vil du se hvert sidefelt referert en gang i koden. Du må bestemme hvilke sidefelt du vil beholde.

Det ser ut til at nettstedet ditt laster sakte Hvorfor du trenger å begynne å optimalisere WordPress-bloggen din etter bilder

Hvis temaet ikke viser sidefelt på siden din, kan det hende du ikke finner denne koden i filen din.

Slik sørger vår full-bredde.php-kode for å gjøre endringene. Koden din kan se litt annerledes ut avhengig av temaet ditt.

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

Så må du laste ned filen Full-width.php »På WordPress-temamappen din ved hjelp av FTP-klient.

Du har opprettet og lastet opp en tilpasset sidemal i full bredde til temaet ditt. Det neste trinnet er å bruke denne malen til å lage en side med full bredde.

Gå til dashbordet og rediger eller opprett en ny side.

På sidedigeringsskjermen, finn avkrysningsruten for sideattributtene og klikk på rullegardinmenyen under "Mal" -alternativet.

Valg av modell i utgaven av wordpress-sider

Du vil kunne se modellen din. Velg det og lagre eller oppdater siden.

Nå kan du besøke nettstedet ditt, og du vil se at sidelinjene er borte, og siden din vises som en enkelt kolonneside. Det er kanskje ikke fullt ennå, men nå er du klar til å streame det annerledes.

Gjør nettstedet ditt populært ved å oppdage 7 WordPress plugins for å optimalisere SEO av bildene dine

Du må bruke inspiserverktøyet for å oppdage CSS-klassene temaet ditt bruker til å definere innholdsområdet.

Deretter kan du justere bredden til 100% ved hjelp av CSS. Vi brukte følgende CSS-kode:

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

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

Slik ser det ut tjue sytten.

Presentasjon av demo-tema wordpress

Det er alt for denne opplæringen, jeg håper det vil tillate deg å lage sider i full bredde.

Ovennevnte metoder er gratis for de som har råd og som raskt ønsker å lage layout i full bredde eller full bredde.

Oppdag også noen premium WordPress-plugins  

Du kan bruke andre WordPress plugins for å gi et moderne utseende og for å optimalisere håndteringen av bloggen eller nettsiden din.

Vi tilbyr deg her noen premium WordPress-plugins som vil hjelpe deg å gjøre det.

1. Divi Builder

Divi Builder er en høykvalitetsbygger av sider som jeg setter pris på Elegant Temaer. Selv om det vanligvis brukes som en del av Divi WordPress-temaet, er Divi Builder også et frittstående plugin som du kan bruke på andre WordPress-temaer.

Divi e1544278044306

Divi Builder lar deg redigere innholdet ditt ved hjelp av et visuelt grensesnitt på front-enden, samt et grensesnitt på back-end, selv om de fleste brukere foretrekker det første grensesnittet.

I utgangspunktet i stedet for sidelinjene er det alt i popup-vinduer og flytende knapper. Det gir deg tilgang til 316 forhåndsdesignede maler fordelt på 40 forskjellige presentasjonspakker, samt muligheten til å lagre dine egne design som maler.

Vi foreslår at du oppdager Hvordan lage en profesjonell blogg

Et av Divis trekk har alltid vært kontrollen over stilene han gir deg. På tre forskjellige faner kan du konfigurere forskjellige innstillinger, inkludert responsive kontroller, tilpassbar avstand og mer.

Du kan til og med legge til tilpasset CSS, da CSS-editoren inkluderer grunnleggende validering og automatisk fullføring. En av kritikkene til Divi Builder har alltid vært at den er avhengig av kortkoder. Noe som betyr at hvis du deaktiverer det en dag, vil det legge igjen en haug med kortkoder i innholdet. Selv om dette er litt deprimerende, er det mindre et problem nå som det finnes plugins som Shortcode Cleaner.

Last ned | dEMO | Webhotell

2. Themify Builder

Themify Builder er, ikke overraskende, tilbudet til Themify-teamet. Den integrerer den i flere av WordPress-temaene for å gi kundene enkle tilpasningsalternativer. Men du kan også kjøpe det som et frittstående plugin og bruke det med et WordPress-tema.

Themify builder animasjonsskjerm e1544277050530

I likhet med Divi Builder og WPBakery Page Builder, lar Themify Builder deg lage oppsett i front-end eller back-end. En annen god ting er at dette pluginet lar deg tilpasse dine responsive breakpoints (men bare på hele nettstedsnivået).

Oppdag Hvordan installere og konfigurere WooCommerce for opprette en nettbutikk og enkelt selge produktene dine på Internett 

En kul ting med Themify Builder er at den fortsatt lar deg bruke standard WordPress-editoren, mens andre sidebyggere tvinger deg til å bruke WordPress-grensesnittet. sidebygger for alt.

Last ned | dEMO | Webhotell

3. Elementor

Opprinnelig lansert i 2016, er Elementor WordPress-plugin en av de yngste sidebyggerne på denne listen. Til tross for sin sene start samlet Elementor raskt over 1 000 000 aktive installasjoner på WordPress.org, noe som gjør det til en av de mest populære WordPress-sidebyggerne.

Elementor pro e1544277036401

Det som gjør sitt rykte kjent er det flytende visuelle grensesnittet, dets forskjellige stilalternativer og andre kraftige funksjoner som fullstendig opprettelse av WordPress-temaer.

Grensesnittet er delt inn i to hoveddeler, med en tredje sone for visse parametere. Gratisversjonen av Elementor tilbyr 28 gratis widgets. Pro-versjonen bringer 30 andre widgeter, totalt 58-widgeter i Pro-versjonen. Gratisversjonen inneholder omtrent 40 gratis maler, mens Pro-versjonen gir hundrevis av ekstra maler.

 Last ned | dEMO | Webhotell

Andre anbefalte ressurser

Finn ut om andre anbefalte ressurser for å hjelpe deg med å bygge og administrere nettstedet ditt.

konklusjonen

Her er ! Det er det for denne opplæringen. Hvis du har et WordPress-tema som ikke tilbyr en full bredde-side som mal, håper vi at denne opplæringen har hjulpet deg med å løse den mangelen. Ikke nøl med å del med vennene dine på dine favoritt sosiale nettverk

Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting.

Hvis du har forslag eller kommentarer, kan du la dem ligge i seksjonen vår commentaires.

...