Hur man skapar en sida i full bredd i WordPress (nybörjarguide)

Vill du skapa en sida med full bredd i WordPress, så att du kan sträcka ut ditt innehåll över hela skärmen?

De flesta WordPress-teman levereras redan med en inbyggd mall för helsidesvy som du kan använda. Men om ditt tema inte har en, är det lätt att lägga till en.

I den här artikeln visar vi dig hur du enkelt skapar en helsidesvy i WordPress och till och med skapar helt anpassade sidlayouter utan någon kod.

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

• Metod 1. Använd ditt temas helsidesmall
• Metod 2. Skapa en sidmall med full bredd med hjälp av ett plugin
• Metod 3: Designa en sida med full bredd i WordPress med hjälp av ett plugin för sidbyggare
• Metod 4. Skapa helt anpassade helsidesvyer med SeedProd
• Metod 5: Skapa en helsides WordPress-mall manuellt

Metod 1. Använd ditt temas mall för hel bredd

Om ditt tema redan levereras med en sidmall i full bredd, är det bäst att helt enkelt använda den. Nästan alla bra WordPress-teman gör det.

Även de bästa gratis WordPress-teman kommer ofta med en helsidesmall, så det är en god chans att du redan har en.

Först måste du redigera en sida eller skapa en ny genom att gå till Sidor » Lägg till ny i din WordPress-instrumentpanel.

I den högra rutan för ‘Dokument’ i innehållsredigeraren, behöver du expandera sektionen ‘Sidattribut’ genom att klicka på nedåtpilen bredvid den. Du bör sedan se en rullgardinsmeny för ‘Mall’.

Om du har en mall för full bredd för ditt tema, kommer den att listas här. Den bör kallas något i stil med 'Mall för full bredd':

De alternativ du ser här kommer att skilja sig beroende på ditt tema. Oroa dig inte om ditt tema inte har en sidmall för full bredd.

Du kan enkelt lägga till en med hjälp av metoderna nedan.

Metod 2. Skapa en sidmall med full bredd med hjälp av ett plugin

Den här metoden är enklast och fungerar med alla WordPress-teman och sidbyggarplugins.

Först måste du installera och aktivera pluginet Fullwidth Templates. Om du är osäker på hur du gör det, kolla in vår nybörjarguide för att installera ett WordPress-plugin.

Pluginet Fullwidth Templates lägger till tre nya alternativ till dina sidmallar:

Dessa alternativ är:

• FW No Sidebar: Tar bort sidofältet från din sida, men lämnar allt annat intakt.
• FW Helbredd: Tar bort sidofältet, titeln och kommentarerna, och sträcker ut layouten till helbredd.
• FW Helbredd Utan Header Footer: Tar bort allt som FW Helbredd gör, plus header och footer.

Om du bara ska använda den inbyggda WordPress-redigeraren, kommer "FW No Sidebar" troligen att vara det bästa valet.

Även om detta plugin låter dig skapa en sidmall i full bredd, har du begränsade anpassningsmöjligheter.

Om du vill anpassa din helsidesmall utan någon kod, då behöver du använda en sidbyggare.

Metod 3: Designa en sida med full bredd i WordPress med hjälp av ett plugin för sidbyggare

Om ditt tema inte har en mall för full bredd, är detta det enklaste sättet att skapa och anpassa en mall för full bredd.

Det låter dig enkelt redigera din helsidesvy och skapa olika sidlayouter för din webbplats med ett dra-och-släpp-gränssnitt.

För den här metoden behöver du ett sidbyggarplugin för WordPress. I den här handledningen kommer vi att använda Thrive Architect.

Det är ett av de bästa dra-och-släpp-sidbyggarpluginsen, och det låter dig enkelt skapa sidlayouter utan att skriva någon kod.

Installera och aktivera först pluginet Thrive Architect. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

När du har aktiverat pluginet, redigera en befintlig sida eller skapa en ny i WordPress.

Klicka sedan på knappen 'Starta Thrive Architect' högst upp på skärmen.

Därefter uppmanas du att välja vilken typ av sida du vill skapa. Du kan välja att skapa en vanlig sida eller en förbyggd landningssida.

Välj alternativet 'Förbyggd landningssida' genom att klicka på det.

Detta tar dig till Thrive Architects landningssidobibliotek. Härifrån kan du välja en av de förgjorda mallarna att använda som bas för din helsidesvy.

Klicka helt enkelt på en mall som du gillar för att välja den.

Om du valde en mall från sektionen 'Smart Landing Page Sets', kan du nu välja bland ett antal fördesignade sidor i den stilen.

För den här handledningen väljer vi mallen 'Försäljningssida' genom att klicka på den. Tryck sedan på knappen 'Använd mall' så laddar sidbyggaren den.

När du är i Thrive Architect Editor kan du redigera alla element, som bilder, bakgrund, text och så vidare, som du vill ändra.

För att redigera ett element på sidan behöver du bara klicka på det. I det här fallet klickade vi på bakgrunden på det här sidblocket. Detta visar alla anpassningsalternativ i menyn till vänster:

Här kan du växla omkopplaren för att säkerställa att ditt innehåll täcker hela skärmbredden.

Från menyn till vänster kan du också anpassa typografin, teckenstorlek, layout, bakgrundsstil, ramar, skuggor och mycket mer.

Du kan också lägga till nya element när som helst i din layout. Thrive Architect levereras med många grundläggande och avancerade block som du kan dra och släppa in på din sida.

När du är klar med redigeringen, klicka på pilen (^) bredvid knappen ‘Spara arbete’ längst ner på skärmen. Klicka sedan på alternativet ‘Spara och återgå till inläggsredigeraren’.

Du kan sedan spara ditt utkast eller publicera det.

När den är publicerad kan du besöka din WordPress-blogg för att se din färdiga sida i full bredd.

Metod 4. Skapa helt anpassade helsidesvyer med SeedProd

Medan Thrive Architect är en bra lösning, kanske du letar efter ett plugin som ger dig ännu kraftfullare anpassningsalternativ för dina webbplatssidor.

Om du vill skapa en helt anpassad landningssida där du vill anpassa sidhuvudet, sidfoten och alla delar av sidan, rekommenderar vi att du använder SeedProd.

Det är bästa landningssidplugin för WordPress, och det kommer med ett mycket lättanvänt dra-och-släpp-gränssnitt för sidbyggare.

Först måste du installera och aktivera pluginet SeedProd. Efter aktivering går du helt enkelt till SeedProd » Sidor för att lägga till en ny landningssida.

Du kan välja bland deras 300+ förbyggda mallar, som inkluderar många alternativ för hel bredd. Eller så kan du skapa en anpassad landningssida med hel bredd från grunden.

Det bästa med SeedProd är att det är extremt snabbt, och det kommer med inbyggda konverteringsfunktioner för prenumerationshantering, integration med e-postmarknadsföringstjänster, avancerade WooCommerce-block och mer.

För detaljerade instruktioner, se vår guide om hur man skapar en landningssida i WordPress.

Förutom landningssidbyggaren erbjuder SeedProd även en komplett dra-och-släpp temabyggare. Det innebär att du enkelt kan skapa ett anpassat WordPress-tema i full bredd utan att redigera någon kod.

Gå helt enkelt till SeedProd » Temabyggare för att skapa ett nytt WordPress-tema. Återigen kan du välja mellan anpassningsbara temamallar eller så kan du designa varje del av ditt tema från grunden.

Genom att bara peka och klicka kan du redigera varje del av ditt tema. Du kan till exempel lägga till en ny bakgrundsbild och ställa in position och sektionsbredd till helskärm.

Med SeedProd Theme Builder kan du anpassa varje del av din WordPress-webbplats, inklusive sidor, inlägg, arkiv, sidhuvud, sidfot, sidofält, WooCommerce-sidor och mer.

För steg-för-steg-instruktioner kan du följa vår handledning om hur man enkelt skapar ett anpassat WordPress-tema.

Metod 5: Skapa en helsides WordPress-mall manuellt

Denna metod är en sista utväg om ingen av ovanstående metoder fungerar för dig. Den kräver att du redigerar dina WordPress-temafiler. Du behöver viss grundläggande förståelse för PHP, CSS och HTML.

Om du inte har gjort detta tidigare, ta en titt på vår guide om hur man kopierar / klistrar in kod i WordPress.

Innan du fortsätter rekommenderar vi att du skapar en WordPress-säkerhetskopia eller åtminstone en säkerhetskopia av ditt nuvarande tema. Detta hjälper dig att enkelt återställa din webbplats om något går fel.

Öppna sedan en enkel textredigerare som Anteckningar och klistra in följande kod i en tom fil:

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

Spara den här filen som full-width.php på din dator. Du kan behöva ändra 'Spara som typ' till 'Alla filer' för att undvika att spara den som en .txt-fil:

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

Därefter behöver du innehållsdelen av koden. Anslut till din webbplats med en FTP-klient (eller din WordPress-värd filhanterare i cPanel) och gå sedan till /wp-content/themes/din-tema-mapp/.

Nu behöver du lokalisera filen page.php. Detta är din temas standardmallfil för sidor.

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

I filen full-width.php, hitta och ta bort denna kodrad:

<?php get_sidebar(); ?>

Den här raden hämtar sidofältet och visar det i ditt tema. Om du tar bort det kommer ditt tema inte att visa sidofältet när du använder mallen för full bredd.

Du kan se den här raden mer än en gång i ditt tema. Om ditt tema har flera sidofält (sidofältsområden i sidfoten kallas också sidofält), kommer du att se varje sidofält refereras en gång i koden. Bestäm vilka sidofält du vill behålla.

Om ditt tema inte visar sidofält på sidor, kanske du inte hittar den här koden i din fil.

Här är hur hela vår full-width.php-kod ser ut efter att ändringarna har gjorts. Din kod kan se lite annorlunda ut beroende på ditt tema.

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

Ladda sedan upp filen full-width.php till din temamapp med din FTP-klient.

Du har nu framgångsrikt skapat och laddat upp en anpassad heltäckande sidmall till ditt tema. Nästa steg är att använda den här mallen för att skapa en heltäckande sida.

Gå till ditt WordPress-adminområde och redigera eller skapa en ny sida i WordPress blockredigerare.

I rutan 'Dokument' till höger, leta efter 'Sidattribut' och klicka på nedåtpilen för att expandera den sektionen om det behövs. Du bör se en rullgardinsmeny 'Mall' där du kan välja din nya 'Helbredd'-mall:

Efter att ha valt den mallen, publicera eller uppdatera sidan.

När du visar sidan ser du att sidofälten har försvunnit och din sida visas som en enda kolumn. Den kanske inte är fullbredd än, men du är nu redo att styla den annorlunda.

Du behöver använda Inspektera-verktyget för att ta reda på vilka CSS-klasser som ditt tema använder för att definiera innehållsområdet.

Därefter kan du justera dess bredd till 100 % med CSS. Du kan lägga till CSS-kod genom att gå till Utseende » Anpassa och klicka på 'Ytterligare CSS' längst ner på sidan.

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

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

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

Här är hur det såg ut på vår demosida med temat Twenty Sixteen.

Om du vill använda den manuella metoden och vill göra ytterligare anpassningar, då kan du också använda pluginet CSS Hero som låter dig ändra CSS-stilar med en pek-och-klicka-redigerare.

För de flesta användare rekommenderar vi dock att du använder ditt eget temas heltäckande mall 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 helsidesbredd i WordPress. Du kanske också vill se vår guide om de bästa WordPress-pluginsen för att växa din webbplats, och vår jämförelse av de bästa WordPress LMS-pluginsen för att skapa & sälja kurser.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.