Så här skapar du en full width page i WordPress (Beginner’s Guide)

Vill du skapa en full width page i WordPress så att du kan sträcka ut ditt content över hela vyn?

De flesta teman för WordPress har redan en built-in full width page template som du kan använda. Men om ditt theme inte har en sådan är det enkelt att add to den.

I den här artikeln kommer vi att visa you hur man enkelt skapar en full width page i WordPress och även skapa helt customize page layouts utan någon kod.

Här följer en snabb översikt över metoderna i den här guiden:

Metod 1. Använd ditt temas full width template

Om ditt theme redan kommer med en full width page template, är det bäst att helt enkelt använda den. Nästan all bra WordPress teman gör det.

Även de bästa gratis templates för WordPress kommer ofta med en full width template, så det finns en god chans att du redan har en.

Först måste du editera en page eller skapa en ny genom att gå till Pages ” Add New i din WordPress dashboard.

I den högra rutan ”Document” i content editor måste du förstora sectionen ”Page Attributes” genom att clicka på nedåtpilen bredvid den. Du bör då se en dropdown för ”Template”.

Om du har en full width template för ditt theme kommer den att listas här. Den bör heta något som gillar ”Full Width Template”:

De alternativ som du ser here kommer att skilja sig åt beroende på ditt theme. Oroa dig inte om ditt theme inte har en full width page template.

Du kan enkelt add to en sådan med hjälp av metoderna under.

Metod 2. Skapa full width page template med hjälp av ett plugin

Denna metod är den enklaste och fungerar med alla WordPress themes och page builders plugins.

Först måste du installera och aktivera pluginet Fullwidth Templates. Om du ej är säker på hur du gör det kan du kontrollera vår guide för nybörjare om hur du installerar ett plugin för WordPress.

Pluginet Fullwidth Templates kommer att lägga till tre nya alternativ till dina page templates:

Dessa alternativ är:

• FW No Sidebar: Remove the sidebar from your page, but leaves everything else intact.
• FW Fullbredd: Remove sidebar, Rubrik och comments, och layouten sträcker sig till full width.
• FW Fullwidth Ingen Header Footer: Tar bort allt som FW Fullwidth gör, plus header och footer.

Om du bara ska använda den built-in WordPress editor, ”FW No Sidebar” kommer sannolikt att vara det bästa valet.

Även om detta plugin låter dig skapa en full width page template, har du begränsade alternativ för customization.

Om du vill customize din full width template utan någon kod, måste du använda en page builder.

Metod 3: Designa en full width page i WordPress med hjälp av ett page builder tillägg

Om your theme inte har en full width template, så är detta det enklaste sättet att skapa och customize en full width template.

Det allow you att enkelt edit din full width page och skapa olika page layouts för din website med ett drag and drop interface.

För den här metoden behöver du ett plugin för page builders i WordPress. I denna tutorial kommer vi att använda Thrive Architect.

Det är ett av de bästa drag and drop page builder-tilläggen, och det tillåter dig att enkelt skapa page layouts utan att skriva någon kod.

Först installerar och aktiverar du pluginet Thrive Architect. För mer detaljer, se vår steg-för-steg guide om hur du installerar ett plugin för WordPress.

När du har aktiverat pluginet kan du antingen edit en befintlig page eller skapa en new page i WordPress.

Klicka sedan på knappen ”Launch Thrive Architect” högst upp på din vy.

Därefter kommer du att uppmanas att välja vilken typ av page du vill skapa. Du kan välja att skapa en vanlig sida eller en pre-built landing page.

Välj alternativet ”Pre-built Landing Page” genom att klicka på det.

Detta kommer att ta dig till Thrive Architects Landing Page Library. Härifrån kan du select en av de förgjorda templates som du kan använda som grund för din full width page.

Klicka bara på en template som du gillar för att välja den.

Om du valde en template från ”Smart Landing Page Sets” section, kan du nu välja bland ett antal fördesignade pages i den stilen.

För denna tutorial väljer vi templaten ”Sales Page” genom att clicka på den. Tryck sedan på knappen ”Tillämpa template” så kommer page buildern att hämta den.

När du är i Thrive Architect Editor kan du edit alla element, såsom images, bakgrundsbild, text och så vidare, som du vill ändra.

För att edit ett element på page behöver du bara clicka på det. I det här fallet klickade vi på bakgrunden till det här blocket på sidan. Detta ger upp alla alternativ för customomize i den vänstra menyn:

Här kan du toggle omkopplaren för att se till att your content täcker hela vyns bredd.

Från menyn till vänster kan du också customize typografi, fontstorlek, layout, bakgrund, kanter, skuggor och mycket mer.

Du kan också när som helst lägga till new element i din layout. Thrive Architect kommer med många grundläggande och avancerade block som du kan drag and drop till din page.

När du har slutfört edit klickar du på pilknappen (^) bredvid knappen ”Save Work” längst ner på vyn. Klicka sedan på alternativet ”Save and Return to Post Editor”.

You can then save your draft or publish it.

När den är publicerad kan du besöka din WordPress-blogg för att se din slutförda full width page.

Metod 4. Skapa helt Customize Full-Width Pages med SeedProd

Medan Thrive Architect är en snygg lösning, kanske du letar efter ett plugin som ger dig ännu mer kraftfulla alternativ för customize för dina website pages.

Om du vill skapa en helt custom landning page där du vill customize header, footer, och all areas of the page, då rekommenderar vi att du använder SeedProd.

Det är det bästa plugin-programmet för landing pages för WordPress, och det kommer med ett mycket användarvänligt drag and drop page builder-gränssnitt.

Först måste du installera och aktivera SeedProd plugin. Efter aktivering går du bara till SeedProd ” Pages för att lägga till en ny landing page.

Du kan välja från en av deras 300+ pre-built templates, som innehåller många full width alternativ. Eller så kan du skapa en custom full width landing page from scratch.

Det bästa med SeedProd är att det är extremt snabbt, och det kommer med built-in funktioner för konvertering för hantering av prenumeranter, integration av tjänster för e-postmarknadsföring, avancerade WooCommerce block, och mer.

Detaljerade instruktioner finns i vår guide om hur du skapar en landing page i WordPress.

Notis: Förutom landning page builder, erbjuder SeedProd också en komplett drag and drop Theme Builder. Detta innebär att du enkelt kan skapa ett customize full width WordPress theme utan att editera någon kod.

Gå helt enkelt till SeedProd ” Theme Builder för att skapa ett new WordPress theme. Återigen kan du välja mellan anpassningsbara templates eller så kan du designa varje del av ditt theme från scratch.

Genom att bara peka och clicka kan du editera varje del av ditt theme. Du kan t.ex. add new bakgrundsbild och ställa in position och section width till full width.

Med SeedProd Theme Builder kan du customize alla delar av din WordPress-webbplats, inklusive sidor, inlägg, archives, header, footer, sidofält, WooCommerce-sidor och mycket mer.

För steg-för-steg-instruktioner kan du följa vår tutorial om hur du enkelt skapar ett customizer WordPress theme.

Metod 5: Skapa full width WordPress Page Template manuellt

Den här metoden är en sista utväg om ingen av metoderna ovan fungerar för you. Det är obligatoriskt att du editerar dina WordPress theme-filer. Du behöver viss grundläggande förståelse för PHP, CSS och HTML.

Om du inte har gjort det tidigare kan du ta en titt på vår guide om hur du kopierar och klistrar in kod i WordPress.

Innan du går vidare rekommenderar vi att du skapar en backup av WordPress eller kl. en backup av ditt nuvarande theme. På så sätt kan du enkelt återställa din site om något går fel.

Öppna sedan en plain text editor som Notepad och klistra in följande kod i en tom fil:

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

Save denna fil som full-width.php på din dator. Du kan behöva ändra ”Save as type” till ”All Files” för att undvika att spara den som en .txt-fil:

Den här koden definierar helt enkelt namnet på en template-fil och ber WordPress att hämta header-mallen.

Därefter behöver du content-delen av koden. Anslut till din website med en FTP-klient (eller filhanteraren på ditt webbhotell WordPress i cPanel) och gå sedan till /wp-content/themes/your-theme-folder/.

Nu måste du leta reda på filen page.php. Detta är ditt temas standard template-fil för page.

Öppna filen och kopiera allt efter get_header() -raden och klistra in det i filen full-width.php på din dator.

I filen full-width.php hittar du och tar bort den här raden med kod:

<?php get_sidebar(); ?>

Denna rad hämtar sidebaren och displayed den i your theme. Om du borttar den kommer ditt theme att sluta visa sidebaren när du använder mallen full width.

Du kanske ser den här raden mer än en gång i ditt theme. Om ditt theme har flera sidebars (footer widgetar areas anropas också sidebars), då kommer du att se varje sidebar refereras en gång i koden. Bestäm vilka sidebars du vill behålla.

Om ditt theme inte visar sidebars på pages kanske du inte hittar den här koden i din fil.

Så här ser hela vår full-width.php-kod ut efter att vi har gjort ändringarna. Din kod kan se något annorlunda ut beroende på ditt theme.

<?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 -->

	<?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_footer(); ?>

Därefter uploadar du filen full-width.php till din theme folder med hjälp av din FTP-klient.

Du har nu utan problem skapat och uploadat en custom page template med full width till your theme. Nästa steg är att använda denna template för att skapa en full width page.

Head till din WordPress admin area och edit eller skapa en new page i WordPress block editor.

I rutan ”Document” till höger letar du efter ”Page Attributes” och klickar på nedåtpilen för att förstora den sectionen om det behövs. Du bör se en ”Template” dropdown där du kan välja din nya ”Full Width” template:

När du har valt templates publicerar eller uppdaterar du sidan.

When you view the page, you’ll see that the sidebars have disappeared, and your page appears as a single column. Den kanske inte har full width ännu, men du är nu redo att utforma den på ett annat sätt.

You will need to use the Inspect tool to find out the CSS classes used by your theme to define the content area.

Därefter kan du justera dess bredd till 100% med CSS. You can add CSS code by going to Appearance ” Customize and clicking ’Additional CSS’ at the bottom of the screen.

Vi använde följande CSS-kod på vår test site:

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

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

Så här såg det ut på vår demo site med temat Twenty Sixteen.

Om du vill använda den manuella metoden och vill göra ytterligare customize, kan du också använda CSS Hero tillägg som låter dig ändra CSS-stilar med en peka och klicka editor.

För de flesta användare rekommenderar vi dock att du använder ditt eget temas full width template eller använder ett plugin för att skapa en.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt skapar en full width page i WordPress. Du kanske också vill se vår guide om de bästa WordPress-tilläggen för att få din website att växa, och vår jämförelse av de bästa WordPress LMS-tilläggen för att skapa och sälja kurser.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.