Sådan oprettes en fuld bredde side i WordPress

Ønsker du at oprette en fuld bredde side i WordPress? Mange WordPress-temaer kommer allerede med en indbygget sidebeskrivelse med fuld bredde, som du kan bruge. Men nogle temaer har ikke den funktion. I denne artikel vil vi vise dig, hvordan du nemt opretter en fuld bredde side i WordPress.

Oprettelse af en fuld bredde side i WordPress

Metode 1: Brug af en indbygget fuld bredde skabelon i dit WordPress Theme

Denne metode anbefales, hvis dit tema allerede kommer med en sideskabelon med fuld bredde.

Først skal du redigere en side eller oprette en ny ved at besøge Sider »Tilføj nyt .

På side redigeringsskærmen skal du vælge fuld bredde som din skabelon under metadata for sidetegn.

Valg af fuld bredde skabelon

Når du har valgt skabelonen i fuld bredde, skal du gemme din side. Du kan fortsætte med at redigere siden for at tilføje mere indhold eller klikke på preview-knappen for at se det i aktion.

Fuld bredde side ved hjælp af temaets fuld bredde skabelon

Hvis du ikke har fuld bredde skabelon valgmulighed på din side redigering skærm, betyder det, at dit tema ikke har en fuld skabelon for bredde.

Bare rolig, vi vil vise dig, hvordan du nemt kan oprette en side med fuld bredde uden at ændre dit WordPress-tema.

Metode 2: Opret fuldmagtsideskabelon manuelt

Denne metode kræver, at du redigerer WordPress-temaer og har en grundlæggende forståelse af PHP, CSS, og HTML. Hvis du ikke har gjort det før, så tag et kig på vores vejledning på hvordan man kopierer / indsætter kode i WordPress.

Før du går videre, bør du oprette en WordPress backup eller i det mindste en sikkerhedskopi af dit aktuelle tema. Dette vil hjælpe dig med nemt at genoprette dit websted, hvis noget går galt.

For det første skal du åbne en almindelig teksteditor som Notesblok og indsætte følgende kode i en tom fil:

<? Php / * Skabelon Navn: * fuld bredde / get_header (); ?>

Nu skal du gemme denne fil som Full-width.php På din computer.

Denne kode definerer blot navnet på en skabelonfil og beder WordPress hente header skabelon.

Derefter skal du bruge indholdsdelen af ​​koden. Opret forbindelse til dit websted ved hjælp af en FTP-klient (eller filhåndtering i cPanel) og derefter gå til / wp-indhold / temaer / din-tema-mappe /.

Nu skal du finde filen, der hedder page.php. Dette er dit temas standard side skabelon fil.

Kopier alt efter get_header () line og indsæt det i full-width.php-filen på din computer.

Nu skal du kigge på filen full-width.php og slette denne linje kode:

? <Php get_sidebar (); ?> 

Denne linje henter blot sidebar og viser det i dit tema. Hvis du sletter det, stoppes dit tema fra at vise sidebjælken, når du bruger skabelonen med fuld bredde.

Du kan se, at denne linje vises mere end én gang i dit tema. Hvis dit tema har flere sidebjælker (footer-widget-områder kaldes også sidebjælker), så vil du se hvert sidebjælke refereret en gang i koden. Du skal bestemme hvilke sidebjælker du vil beholde.

Hvis dit tema ikke viser sidebjælker på sider, kan du muligvis ikke finde denne kode i din fil.

Her er hvordan vores fuldbredde.php kode passer efter ændringerne. Din kode kan se lidt anderledes ud, afhængigt af dit tema.

<? Php / * Skabelon Navn: * fuld bredde / get_header (); ?> <Div id = "primær" class = "indhold-område"> <hånd id = "main" class = "site-hånd" role = "main"> <? Php // Start løkken. while (have_posts ()): the_post (); // Medtag sidens indhold skabelon. get_template_part ( 'skabelon-dele / indhold', 'side'); // Hvis kommentarer er åbne eller vi-have mindst én kommentar, lægge op skabelonen hvordan. hvis (comments_open () || get_comments_number ()) {comments_template (); } // Slut på sløjfen. EndWhile; ?> </ Main> <- .site hånd -> </ div> <- .content-området -> <Php get_footer ();!? ?>

Dernæst skal du uploade filen full-width.php til din temamappe ved hjælp af FTP-klienten.

Du har succesfuldt oprettet og uploadet en brugerdefineret skabelon med fuld bredde til dit tema. Det næste skridt er at bruge denne skabelon til at oprette en side med fuld bredde.

Gå over til WordPress admin-området og rediger eller opret en ny side.

På siden redigeringsskærm skal du kigge efter meta-boks for sidetegn og klikke på rullemenuen under 'Skabelon'.

Vælg din skabelon med fuld bredde

Du vil kunne se din fulde bredde skabelon der. Gå videre og vælg det og gem / opdater siden.

Nu kan du besøge dit websted, og du vil se, at sidebjælker er forsvundet, og din side vises som en enkelt kolonne. Det er måske ikke fuld bredde endnu, men du er nu klar til at style det anderledes.

Du skal bruge brug inspektionsværktøj for at finde ud af de CSS klasser, der bruges af dit tema til at definere indholdsområdet.

Derefter kan du justere det er bredde til 100% ved hjælp af CSS. Vi brugte følgende CSS-kode på vores testsite:

.side-template-fuld bredde-område .content {bredde: 100%; margin: 0px; kant: 0px; padding: 0px; } .side-template-fuld bredde .site {margin: 0px; }

Sådan ser det på vores demo site ved hjælp af Twenty Sixteen tema.

Forhåndsvisning i fuld bredde

Metode 3: Opret en fuld bredde side ved hjælp af Page Builder plugin

Denne metode er nemmere og anbefales til alle brugere. Det giver dig mulighed for nemt at redigere din side med fuld bredde og oprette forskellige sidelayouter til dit websted.

For denne metode skal du have en WordPress-side builder plugin. Af hensyn til denne tutorial vil vi bruge Beaver Builder. Det er en af ​​de bedste drag og slip sidebygger plugins, og det giver dig mulighed for Opret let side layout uden at skrive nogen kode.

Første ting du skal gøre er at installere og aktivere Beaver Builder plugin. For flere detaljer, se vores trinvise vejledning om Sådan installeres et WordPress-plugin.

Ved aktivering skal du redigere en eksisterende side eller oprette en ny.

På siden redigeringsskærm, under sektionen sideattributter skal du vælge den fuldstendige skabelon, der leveres af dit WordPress-tema.

Vælg fuldbredt skabelon

Hvis dit tema ikke har en fuld bredde skabelon, kan du oprette en ved at følge instruktionerne nævnt i den anden metode.

Når du har valgt din sideskabelon, skal du klikke på knappen Gem udkast for at gemme din side.

Nu er du klar til at bruge sidenbygger plugin til at oprette dit layout. Du starter med at klikke på fanen for sidebygger over sideditoren.

Start sidebygger

Dette vil starte sidebygger-grænsefladen, hvor du vil kunne se et live preview af din side med opsætningsmuligheder for sider.

Beaver Builder interface

Du kan starte med at klikke på Skabelon knappen øverst. Beaver Builder kommer med flere brugsklare og professionelt designede skabeloner, som du kan bruge som udgangspunkt.

Vælg en skabelon

Du kan bare klikke på en skabelon for at vælge den, og sidebyggeren vil indlæse den for dig, herunder layout, billeder og indhold. Du kan også klikke på den tomme skabelon for at starte uden en klargjort skabelon og oprette dit eget layout.

Beaver Builder layout er bygget med rækker og moduler. Hver række kan have flere kolonner, og inden for hver række kan du tilføje indholdsmoduler og widgets.

For at redigere en række eller et modul i layoutet skal du bare pege og klikke på det.

Peg og klik for at redigere et element

Beaver Builder åbner detaljerne i en popup, hvor du kan redigere indstillingerne. Du kan ændre farver, skrifttyper, tilføje baggrundsfoto, ændre tekst osv.

Redigering af et emne i Beaver Builder

Du kan til enhver tid tilføje moduler og widgets til dit layout. Beaver Builder kommer med mange grundlæggende og avancerede indholdsmoduler, som du bare kan trække og slippe ind på din side.

Tilføj moduler i dit sidelayout

Når du er færdig med at redigere, kan du klikke på knappen 'Udført' øverst. Dette viser dig en popup, hvor du skal klikke på knappen Gem eller offentliggøre.

Gem eller offentliggør din side

Du kan nu besøge din side for at se den i aktion.

Vi håber, at denne artikel hjalp dig med at lære, hvordan du nemt opretter en fuld bredde side i WordPress.

Stillingen Sådan oprettes en fuld bredde side i WordPress dukkede først på WPBeginner.

Giv en kommentar

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.