Czy chcesz utworzyć stronę o pełnej szerokości w WordPressie, aby twoja treść mogła rozciągać się na cały ekran?
Większość motywów WordPress ma już wbudowany szablon strony o pełnej szerokości, z którego można korzystać. Jeśli jednak twój motyw nie ma takiego szablonu, możesz go łatwo dodać.
W tym artykule pokażemy, jak łatwo stworzyć stronę o pełnej szerokości w WordPressie, a nawet stworzyć w pełni własny układ strony bez żadnego kodu.
Oto krótki przegląd metod opisanych w tym przewodniku:
- Method 1. Use Your Theme’s Full Width Template
- Method 2. Create Full Width Page Template Using a Plugin
- Method 3: Design a Full Width Page in WordPress Using a Page Builder Plugin
- Method 4. Create Completely Custom Full-Width Pages with SeedProd
- Method 5: Create Full Width WordPress Page Template Manually
Metoda 1. Użyj pełnowymiarowego szablonu twojego motywu
Jeśli twój motyw jest już wyposażony w szablon strony o pełnej szerokości, najlepiej po prostu z niego skorzystać. Prawie wszystkie dobre motywy WordPress to robią.
Nawet najlepsze darmowe motywy WordPress są często dostarczane z szablonem o pełnej szerokości, więc istnieje duża szansa, że już go masz.
Najpierw musisz edytować stronę lub utworzyć nową, przechodząc do Pages ” Add New w twoim kokpicie WordPress.
W prawym panelu „Dokument” edytora treści należy rozwinąć sekcję „Atrybuty strony”, klikając strzałkę w dół obok niej. Następnie powinno pojawić się menu rozwijane „Szablon”.
Jeśli masz szablon pełnej szerokości dla twojego motywu, będzie on wymieniony tutaj. Jego nazwa powinna brzmieć „Full Width Template”:
Opcje widoczne tutaj będą się różnić w zależności od twojego motywu. Nie martw się, jeśli twój motyw nie ma szablonu strony o pełnej szerokości.
Możesz go łatwo dodać, korzystając z poniższych metod.
Metoda 2. Tworzenie szablonu strony o pełnej szerokości za pomocą wtyczki
Ta metoda jest najłatwiejsza i działa ze wszystkimi motywami WordPress i wtyczkami do tworzenia stron.
Najpierw należy zainstalować i włączyć wtyczkę Fullwidth Templates. Jeśli nie wiesz, jak to zrobić, zapoznaj się z naszym przewodnikiem dla początkujących dotyczącym instalacji wtyczki WordPress.
Wtyczka Fullwidth Templates utworzy trzy nowe opcje do twoich szablonów stron:
Opcje te są następujące:
- FW No Sidebar: Usuwa panel boczny z twojej strony, ale pozostawia wszystko inne nienaruszone.
- FW Fullwidth: Usuwa panel boczny, tytuł i komentarze oraz rozciąga układ do pełnej szerokości.
- FW Fullwidth No Header Footer: Usuwa wszystko, co robi FW Fullwidth, plus nagłówek i stopkę.
Jeśli zamierzasz po prostu korzystać z wbudowanego edytora WordPress, „FW No Sidebar” będzie prawdopodobnie najlepszym wyborem.
Wtyczka pozwala na stworzenie szablonu strony o pełnej szerokości, ale ma ograniczone opcje konfiguratora.
Jeśli chcesz dostosować własny szablon o pełnej szerokości bez żadnego kodu, musisz użyć kreatora stron.
Metoda 3: Zaprojektowanie pełnowymiarowej strony w WordPressie przy użyciu wtyczki Page Builder
Jeśli twój motyw nie ma szablonu o pełnej szerokości, jest to najprostszy sposób na utworzenie i dostosowanie szablonu o pełnej szerokości.
Umożliwia łatwą edycję strony o pełnej szerokości i tworzenie różnych układów strony dla twojej witryny internetowej za pomocą interfejsu „przeciągnij i upuść”.
Do tej metody potrzebna będzie wtyczka WordPress do tworzenia stron. W tym poradniku będziemy używać Thrive Architect.
Jest to jedna z najlepszych wtyczek do tworzenia stron typu „przeciągnij i upuść”, która umożliwia łatwe tworzenie układów stron bez pisania jakiegokolwiek kodu.
Najpierw zainstaluj i włącz wtyczkę Thrive Architect. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku na temat instalacji wtyczki WordPress.
Po włączaniu wtyczki, edytuj istniejącą stronę lub utwórz nową w WordPress.
Następnie kliknij przycisk „Launch Thrive Architect” u góry twojego ekranu.
Następnie zostaniesz poproszony o wybranie rodzaju strony, którą chcesz utworzyć. Możesz utworzyć zwykłą stronę lub gotową stronę docelową.
Wybierz opcję „Pre-built Landing Page” klikając na nią.
Spowoduje to przejście do biblioteki stron docelowych Thrive Architect. Z tego miejsca możesz wybrać jeden z gotowych szablonów, który posłuży jako podstawa dla twojej strony o pełnej szerokości.
Wystarczy kliknąć wybrany szablon, aby go wybrać.
Jeśli wybrałeś szablon z sekcji „Zestawy inteligentnych stron docelowych”, możesz teraz wybierać spośród wielu wstępnie zaprojektowanych stron w tym stylu.
W tym poradniku wybierzemy szablon „Strona sprzedaży”, klikając na niego. Następnie naciśnij przycisk „Zastosuj szablon”, a kreator stron będzie go wczytywał.
Gdy już znajdziesz się w edytorze Thrive Architect, możesz edytować dowolne elementy, takie jak obrazki, tło, tekst itd, które chcesz zmienić.
Aby edytować element na stronie, wystarczy na niego kliknąć. W tym przypadku kliknęliśmy na tło tego bloku strony. Spowoduje to wyświetlenie wszystkich opcji konfiguratora w menu po lewej stronie:
Tutaj możesz przełączyć przełącznik, aby upewnić się, że twoja treść obejmuje całą szerokość ekranu.
Z menu po lewej stronie można również dostosować typografię, wielkość liter, układ, styl tła, obramowania, cienie i wiele więcej.
Możesz również utwórz nowe elementy w dowolnym momencie do twojego układu. Thrive Architect zawiera wiele podstawowych i zaawansowanych bloków, które można przeciągać i upuszczać na twoją stronę.
Po zakończeniu edycji kliknij przycisk strzałki (^) obok przycisku „Zapisz pracę” u dołu ekranu. Następnie kliknij opcję „Zapisz i wróć do edytora wpisów”.
Następnie możesz zapisać twoją wersję roboczą lub ją opublikować.
Po opublikowaniu możesz przejść na Twój blog WordPress, aby zobaczyć gotową stronę o pełnej szerokości.
Metoda 4. Tworzenie całkowicie własnych stron o pełnej szerokości za pomocą SeedProd
Choć Thrive Architect to zgrabne rozwiązanie, być może szukasz wtyczki, która zapewni ci jeszcze bardziej zaawansowane opcje konfiguratora dla twoich witryn internetowych.
Jeśli chcesz stworzyć całkowicie konfigurator strony docelowej, w którym chcesz dostosować nagłówek, stopkę i wszystkie obszary strony, zalecamy skorzystanie z SeedProd.
Jest to najlepsza wtyczka do tworzenia stron docelowych dla WordPressa, wyposażona w bardzo łatwy w użyciu interfejs kreatora stron typu „przeciągnij i upuść”.
Najpierw należy zainstalować i włączyć wtyczkę SeedProd. Po włączaniu wystarczy przejść do SeedProd ” Pages, aby utworzyć nową stronę docelową.
Możesz wybrać jeden z ponad 300 gotowych szablonów, które zawierają wiele opcji pełnej szerokości. Możesz też stworzyć od podstaw własną stronę docelową o pełnej szerokości.
Najlepsze w SeedProd jest to, że jest niezwykle szybki i ma wbudowane funkcje konwersji do zarządzania subskrybentami, integrację usług e-mail marketingu, zaawansowane bloki WooCommerce i wiele więcej.
Aby uzyskać szczegółowe instrukcje, zapoznaj się z naszym przewodnikiem na temat tworzenia strony docelowej w WordPressie.
Oprócz kreatora stron docelowych, SeedProd oferuje również kompletny kreator motywów typu „przeciągnij i upuść”. Oznacza to, że możesz łatwo stworzyć własny motyw WordPress o pełnej szerokości bez edytowania jakiegokolwiek kodu.
Wystarczy przejść do SeedProd ” Theme Builder, aby utworzyć nowy motyw WordPress. Ponownie, możesz wybierać spośród konfigurowalnych szablonów motywów lub zaprojektować każdą część twojego motywu od podstaw.
Po prostu wskazując i klikając, możesz edytować każdą część twojego motywu. Możesz na przykład utworzyć nowy obrazek tła i ustawić pozycję oraz szerokość sekcji na pełny ekran.
Dzięki kreatorowi motywów SeedProd możesz dostosować każdą część swojej witryny internetowej WordPress, w tym strony, wpisy, archiwa, nagłówek, stopkę, panele boczne, strony WooCommerce i wiele innych.
Aby uzyskać instrukcje krok po kroku, możesz skorzystać z naszego poradnika, jak łatwo stworzyć własny motyw WordPress.
Metoda 5: Ręczne utworzenie szablonu strony WordPress o pełnej szerokości
Ta metoda jest ostatecznością, jeśli żadna z powyższych metod nie działa. Wymaga ona edycji plików twojego motywu WordPress. Potrzebna będzie podstawowa znajomość PHP, CSS i HTML.
Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym przewodnikiem na temat kopiowania / wklejania kodu w WordPress.
Zanim przejdziesz dalej, zalecamy utworzenie kopii zapasowej WordPressa lub przynajmniej kopii zapasowej twojego obecnego, aktualnego motywu. Pomoże to łatwo przywrócić twoją witrynę, jeśli coś pójdzie nie tak.
Następnie otwórz zwykły edytor tekstu, taki jak Notatnik i wklej poniższy kod do pustego pliku:
<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>
Zapisz ten plik jako full-width. php na twoim komputerze. Może być konieczna zmiana „Zapisz jako rodzaj” na „Wszystkie pliki”, aby uniknąć zapisania go jako pliku .txt:
Ten kod po prostu definiuje nazwę pliku szablonu i prosi WordPress o pobranie szablonu nagłówka.
Następnie potrzebna będzie część kodu dotycząca treści. Połącz się ze swoją witryną internetową za pomocą klienta FTP (lub menedżera plików hostingu WordPress w cPanel), a następnie przejdź do /wp-content/themes/your-theme-folder/.
Teraz musisz zlokalizować plik page.php. Jest to domyślny plik szablonu strony twojego motywu.
Otwórz ten plik i skopiuj wszystko po linii get_header() i wklej do pliku full-width.php na twoim komputerze.
W pliku full-width. php znajdź i usuń tę linię kodu:
<?php get_sidebar(); ?>
Ta linia pobiera panel boczny i wyświetla go w twoim motywie. Usunięcie go spowoduje, że twój motyw nie będzie wyświetlał panelu bocznego podczas korzystania z szablonu o pełnej szerokości.
Możesz zobaczyć tę linię więcej niż raz w twoim motywie. Jeśli twój motyw ma wiele pasków bocznych (obszary widżetów w stopce są również nazywane paskami bocznymi), wówczas każdy pasek boczny będzie przywoływany raz w kodzie. Zdecyduj, które panele boczne chcesz zachować.
Jeśli twój motyw nie wyświetla paneli bocznych na stronach, możesz nie znaleźć tego kodu w swoim pliku.
Oto jak wygląda cały nasz kod full-width.php po wprowadzeniu zmian. Twój kod może wyglądać nieco inaczej w zależności od Twojego motywu.
<?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(); ?>
Następnie prześlij plik full-width. php do katalogu twojego motywu za pomocą klienta FTP.
Pomyślnie utworzyłeś i przesłałeś własny szablon strony o pełnej szerokości do twojego motywu. Następnym krokiem jest użycie tego szablonu do utworzenia strony o pełnej szerokości.
Przejdź do obszaru administracyjnego WordPress i edytuj lub utwórz nową stronę w edytorze bloków WordPress.
W panelu „Dokumentacja” po prawej stronie znajdź „Atrybuty strony” i kliknij strzałkę w dół, aby rozwinąć tę sekcję, jeśli to konieczne. Powinieneś zobaczyć listę rozwijaną „Szablon”, z której możesz wybrać twój nowy szablon „Pełna szerokość”:
Po wybraniu szablonu opublikuj lub zaktualizuj stronę.
Gdy zobaczysz stronę, zobaczysz, że panele boczne zniknęły, a twoja strona pojawia się jako pojedyncza kolumna. Być może nie ma jeszcze pełnej szerokości, ale jesteś teraz gotowy, aby nadać jej inny styl.
Będziesz musiał użyć narzędzia Inspect, aby znaleźć klasy CSS używane przez twój motyw do zdefiniowania obszaru treści.
Następnie możesz dostosować jego szerokość do 100% za pomocą CSS. Kod CSS można dodać, przechodząc do Wygląd ” Dostosuj i klikając „Dodatkowy CSS” u dołu ekranu.
W naszej witrynie testowej użyliśmy następującego kodu CSS:
.page-template-full-width .content-area {
width: 100%;
margin: 0px;
border: 0px;
padding: 0px;
}
.page-template-full-width .site {
margin:0px;
}
Oto jak to wyglądało na naszej witrynie demonstracyjnej przy użyciu motywu Twenty Sixteen.
Jeśli chcesz skorzystać z metody ręcznej i chcesz dokonać dalszych dostosowań, możesz również użyć wtyczki CSS Hero, która pozwala modyfikować style CSS za pomocą edytora typu „wskaż i kliknij”.
Dla większości użytkowników zalecamy jednak użycie szablonu pełnej szerokości twojego motywu lub użycie wtyczki do jego utworzenia.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak łatwo utworzyć stronę o pełnej szerokości w WordPress. Warto również zapoznać się z naszym przewodnikiem po najlepszych wtyczkach WordPress do rozwoju twojej witryny internetowej oraz naszym porównaniem najlepszych wtyczek WordPress LMS do tworzenia i sprzedaży kursów.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Susie says
I have installed and activated the plug in but it still does not allow me to choose a template on the page attributes section. Please help
WPBeginner Support says
If the option is not available with your specific theme you would want to reach out to the plugin’s support and they can look into adding the ability for that theme!
Administrator
Jake Brodie says
Many, many, many thanks for the advice but also for the expert way you structured and presented it. I used Method 2 to add a fullwidth page option to my _s starter Theme after spending a week trying to find a way to remove Post headings on my static pages.
WPBeginner Support says
You’re welcome, glad our article could be helpful
Administrator
Charles Cooper says
Used your method 2 with 'Primer’ theme. Worked a treat and hopefully, I’m learning.
Appreciate the time and effort you have given to provide these solutions – thank you.
WPBeginner Support says
You’re welcome, glad our article was helpful
Administrator
Muhammad Awais says
Thank you very much
WPBeginner Support says
You’re welcome
Administrator
Matthew Gordon says
I too don’t have „Template” in the Page Attributes section. I have followed method 2 to create a full width template but the „Template” field still doesn’t appear.
WPBeginner Support says
You may want to try swapping themes to see if this could be due to your current theme
Administrator
Carol Ragsdale says
Hello – I am using Twenty-Sixteen 2019… there does not appear to be the function for full page width in Page Attributes.. all it has is Parent and Order. Can you help me find where I can change the page width for this theme? Thanks for any help.
-Carol Ragsdale
WPBeginner Support says
If there is no built-in full width template then you would want to use either of the other two methods in this article to set up a full width page
Administrator
Bob says
THIS is what worked, I only did this and got rid of the -template-full-width junk and it worked on 2016theme:
.page-template-full-width .content-area {
width: 100%;
margin: 0px;
border: 0px;
padding: 0px;
}
.page-template-full-width .site {
margin:0px;
}
WPBeginner Support says
While this can work, your sidebar could either be getting pushed to the side of your content or set beneath your content if you don’t add a new page template.
Administrator
Masoom says
How can I increase only the width of the top banner in WPBakery Page Builder? It is possible?
Dush says
Thanks. 1st one worked but now in WP is appearing as
Pages » Add New page.
Now go to down 'LAYOUT’ > Custom (select radio button) > One Column – Wide (1st option by default it take sidebar option)
Note: Page attribute is now separate widget as appearing on my system. Thanks.
Lance Watkins says
Why are your blogs so narrow in width?
I view them on a desktop PC’s wide-screen, where their width is less than half the screen’s width. Most other websites I view have full-width text stories.
Does your narrow format somehow help with SEO or something?
Laura says
Thank you, I was looking at how to do this and it was very simple even a two-year-old could figure that out. I have a disability when it comes to reading and not seeing pictures like you had put up there.. that was very very handy for folks like myself.
Thank you
Laura.
WPBeginner Support says
Hi Laura,
Thank you for kind words and feedback. It means a lot and we really appreciate it.
Administrator
Fer says
Thank you very very much!!!
saju says
How to create a full width template for category page with widget support
Bikram says
I have created a full-width template by removing the sidebar like you said. But it doesn’t work on custom-post-type.
The CSS works for pages but when the template is applied to CPT, the post get back to default page size, without a sidebar.
What should I do, now?
Alex says
This simply not work for twenty fourteen
Amit says
thanks guys its realy work
Zi says
I tried the manual way but when testing I get an error 500? Any possibility as to why? I followed instructions to the T…
Laura says
Try the second one that’s the one I did. It was simple and I got no 500 errors on it.
Andrew Wilkerson says
Thanks for this. Although I don’t need to change my theme at the moment I found it interesting to see how it all works. I think mine is full width then I’m using Genesis columns?
and the /half-first tags or whatever. Still learning all this. Love reading wpbeginner and your videos!
Also good to see how beaver builder does it.