Hur man skapar en sida med full bredd i WordPress

Vill du skapa en WordPress-webbplats i full bredd? Många WordPress-teman kommer redan med en inbyggd sidmall i full bredd som du kan använda. Vissa teman har dock inte den egenskapen. I den här artikeln kommer vi att visa dig hur du enkelt skapar en sida med full bredd i WordPress.

metod 1: använd en mall med full bredd inbyggd i ditt WordPress-tema

Den här metoden rekommenderas om ditt tema redan kommer med en sidmall med full bredd.

Först måste du redigera en sida eller skapa en ny genom att gå till Sida »Lägg till ny Sida.

På sidredigeringsskärmen väljer du full bredd som din mall i metarutan för sidattribut.

När du har valt en mall i full bredd bör du spara din sida. Du kan fortsätta att redigera sidan för att lägga till mer innehåll eller klicka på förhandsgranskningsknappen för att se den i aktion.

Om du inte har ett mallalternativ för full bredd på din sidredigeringsskärm betyder det att ditt tema inte har en sidmall i full bredd.

Oroa dig inte, vi kommer att visa dig hur du enkelt skapar en sida i full bredd utan att ändra ditt WordPress-tema.

metod 2: Skapa en sidmall i full bredd själv

Denna metod kräver att du redigerar WordPress-temafiler och har en grundläggande förståelse för PHP, CSS och HTML. Om du inte har gjort detta tidigare, kolla in vår guide om hur du kopierar/klistrar in kod i WordPress.

Innan du fortsätter måste du skapa en WordPress-säkerhetskopia eller åtminstone en säkerhetskopia av ditt nuvarande tema. Detta gör det enkelt att återställa din webbplats om något går fel.

Först måste du öppna en enkel textredigerare som Anteckningar och klistra in följande kod i en tom fil:

Nu måste du spara den här filen som full-width.php på din dator.

Denna kod identifierar helt enkelt namnet på mallfilen och säger åt WordPress att söka efter huvudmallen.

Därefter behöver du en bit kod. Anslut till din webbplats med en FTP-klient (eller filhanterare i cPanel) och gå sedan till /wp-content/themes/your-theme-folder/.

Nu måste du hitta filen med namnet page.php. Detta är standardfilen för sidmall för ditt tema.

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

Nu måste du titta på filen full-width.php och ta bort denna kodrad:

Den här raden letar helt enkelt efter sidofältet och visar det i ditt tema. När det tas bort kommer temat inte att visas i sidofältet när du använder mallen med full bredd.

Du kan se den här raden visas mer än en gång i ditt tema. Om ditt tema har flera sidofält (sidfotswidgetområdet kallas också barras ), kommer du att se varje sidofält hänvisade till en gång i koden. Du måste bestämma vilken sidobarras du vill behålla

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

Så här ser vår full-width.php-kod ut efter att ha gjort ändringen. Din kod kan se något annorlunda ut beroende på ditt tema.

Därefter måste du ladda upp filen full-width.php till din temamapp med hjälp av en FTP-klient.

Du har skapat och laddat en anpassad sidmall i full bredd för ditt tema. Nästa steg är att använda den här mallen för att skapa en sida med full bredd.

Gå till WordPress-administratörsområdet och redigera eller skapa en ny sida.

På sidredigeringsskärmen letar du upp metarutan för sidattribut och klickar på alternativet “Mall” i rullgardinsmenyn.

Du bör kunna se din mall för full bredd där. Gå vidare och välj den och spara/uppdatera sidan.

Du kan nu besöka deras hemsida och du kommer att se att Walkway barras är borta och din sida visas som en kolumn. Den kanske inte är i full bredd än, men nu är du redo att styla en till.

Du måste använda Inspect-verktyget för att utforska CSS-klasserna som används av ditt tema för att definiera innehållsområdet.

Sedan kan du justera dess bredd till 100 % med CSS. Vi använder följande CSS-kod på vår testwebbplats:

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

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

Så här ser det ut på vår demosida med Twenty Sixteen-temat.

metod 3: Skapa en sida i full bredd med insticksprogrammet Page Builder

Denna metod är enklare och rekommenderas för alla användare. Det låter dig enkelt redigera din sida med full bredd och skapa olika sidlayouter för din webbplats.

För den här metoden behöver du ett WordPress-sidbyggarplugin. För den här handledningen kommer vi att använda Beaver Builder. Det är en av de bästa dra och släpp sidbyggarpluginerna och låter dig enkelt skapa sidlayouter utan att skriva någon kod.

Det första du ska göra är att installera och aktivera Beaver Builder-plugin. För mer information, se vår steg-för-steg-guide om hur du installerar ett WordPress-plugin.

Vid aktivering måste du redigera en befintlig sida eller skapa en ny.

På sidredigeringsskärmen, i avsnittet Sidegenskaper, måste du välja mallen i full bredd som ditt WordPress-tema tillhandahåller.

Om ditt tema inte har en mall i full bredd kan du skapa en genom att följa instruktionerna som nämns i den andra metoden.

När du har valt din sidmall måste du klicka på knappen Spara utkast för att arkivera din sida.

Du är nu redo att använda sidbyggarens plugin för att skapa din design. Du börjar med att klicka på sidbyggarfliken i sidredigeraren.

Detta öppnar sidbyggargränssnittet där du kan se en liveförhandsvisning av din sida med sidbyggaralternativ.

Du kan komma igång genom att klicka på knappen Mall högst upp. Beaver Builder kommer med ett antal professionellt designade, färdiga mallar som du kan använda som utgångspunkt.

Du kan helt enkelt klicka på en mall för att välja den och sidbyggaren laddar den åt dig, inklusive layouter, bilder och innehåll. Du kan också klicka på en tom mall för att komma igång utan mallförberedelser och skapa din egen design.

Beaver Builder-layouter skapas med rader och moduler. Varje rad kan ha flera kolumner och i varje rad kan du lägga till innehållsmoduler och widgets.

För att redigera en rad eller en modul i layouten, peka och klicka på den.

Beaver Builder kommer att öppna objektdetaljerna i en popup där du kan redigera dess inställningar. Du kan ändra färg, teckensnitt, lägga till bakgrundsbild, ändra text, etc

Du kan lägga till moduler och widgets när som helst till din design. Beaver Builder kommer med många grundläggande och avancerade innehållsmoduler som du kan dra och släppa på din sida.

När du är klar med redigeringen kan du klicka på “Klar”-knappen längst upp. Detta kommer att få upp en popup där du måste klicka på knappen Spara eller publicera.

Du kan nu besöka deras sida för att se den i aktion.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt skapar en WordPress-webbplats i full bredd. Du kan också kolla in vår guide om hur du lägger till en helskärmsbakgrundsbild i WordPress.

Om du gillade den här artikeln, prenumerera på vår YouTube-kanal för WordPress-videohandledning. Du hittar oss även på Twitter och Facebook.