Cum să creezi o pagină pe ecran complet în WordPress (Ghid pentru începători)

Doriți să creați o pagină pe lățime completă în WordPress, astfel încât să puteți extinde conținutul pe ecran?

Majoritatea temelor WordPress vin deja cu un șablon de pagină full-width încorporat pe care îl puteți utiliza. Cu toate acestea, dacă tema dvs. nu are unul, este ușor să îl adăugați.

În acest articol, vă vom arăta cum să creați cu ușurință o pagină pe lățime completă în WordPress și chiar să creați machete de pagină complet personalizate, fără niciun cod.

Iată o prezentare generală rapidă a metodelor din acest ghid:

• Metoda 1. Utilizați șablonul de lățime completă al temei dvs.
• Metoda 2. Crearea unui șablon de pagină pe lățime completă folosind un plugin
• Metoda 3: Proiectați o pagină pe lățime completă în WordPress folosind un plugin de constructor de pagini
• Metoda 4. Creați pagini complet personalizate pe lățime completă cu SeedProd
• Metoda 5: Creează manual un șablon de pagină WordPress pe lățime completă

Metoda 1. Utilizați șablonul pe lățime completă al temei dvs.

Dacă tema dvs. vine deja cu un șablon de pagină pe lățime completă, atunci cel mai bine este să îl folosiți. Aproape toate temele WordPress bune o fac.

Chiar și cele mai bune teme gratuite pentru WordPress vin adesea cu un șablon pe lățime completă, deci există o șansă bună să ai deja unul.

Mai întâi, trebuie să editați o pagină sau să creați una nouă accesând Pagini » Adaugă pagină nouă în tabloul de bord WordPress.

În panoul din dreapta „Document” al editorului de conținut, trebuie să extindeți secțiunea „Atribute pagină” făcând clic pe săgeata în jos de lângă ea. Ar trebui să vedeți apoi un meniu derulant „Șablon”.

Dacă aveți un șablon pe lățime completă pentru tema dvs., acesta va fi listat aici. Ar trebui să se numească ceva de genul „Șablon pe lățime completă”:

Opțiunile pe care le vedeți aici vor diferi în funcție de tema dvs. Nu vă faceți griji dacă tema dvs. nu are un șablon de pagină pe lățime completă.

Puteți adăuga cu ușurință unul folosind metodele de mai jos.

Metoda 2. Crearea unui șablon de pagină pe lățime completă folosind un plugin

Această metodă este cea mai ușoară și funcționează cu toate temele WordPress și pluginurile de page builder.

Mai întâi, trebuie să instalezi și să activezi pluginul Fullwidth Templates. Dacă nu ești sigur cum să faci asta, consultă ghidul nostru pentru începători despre cum să instalezi un plugin WordPress.

Pluginul Fullwidth Templates va adăuga trei opțiuni noi la șabloanele paginilor dvs.:

Aceste opțiuni sunt:

• FW Fără bară laterală: Elimină bara laterală de pe pagina dvs., dar lasă totul altceva intact.
• FW Lățime completă: Elimină bara laterală, titlul și comentariile și extinde layout-ul pe lățime completă.
• FW Lățime completă Fără antet: Elimină tot ceea ce face FW Lățime completă, plus antetul și subsolul.

Dacă veți folosi pur și simplu editorul încorporat WordPress, „FW No Sidebar” va fi probabil cea mai bună alegere.

Deși acest plugin îți permite să creezi un șablon de pagină pe lățime completă, ai opțiuni de personalizare limitate.

Dacă dorești să-ți personalizezi șablonul pe lățime completă fără niciun cod, atunci trebuie să folosești un constructor de pagini.

Metoda 3: Proiectați o pagină pe lățime completă în WordPress folosind un plugin de constructor de pagini

Dacă tema dvs. nu are un șablon pe lățime completă, aceasta este cea mai ușoară modalitate de a crea și personaliza un șablon pe lățime completă.

Permite editarea ușoară a paginii tale pe lățime completă și crearea de diferite layout-uri de pagină pentru site-ul tău cu o interfață drag and drop.

Pentru această metodă, veți avea nevoie de un plugin de creare pagini WordPress. În acest tutorial, vom folosi Thrive Architect.

Este unul dintre cele mai bune pluginuri de tip drag and drop pentru crearea de pagini și vă permite să creați cu ușurință machete de pagină fără a scrie cod.

Mai întâi, instalați și activați pluginul Thrive Architect. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După ce ați activat pluginul, fie editați o pagină existentă, fie creați una nouă în WordPress.

Apoi, faceți clic pe butonul „Lansare Thrive Architect” din partea de sus a ecranului.

Apoi, vi se va solicita să alegeți ce tip de pagină doriți să creați. Puteți alege să creați o pagină normală sau o pagină de destinație pre-construite.

Selectați opțiunea „Pagină de destinație preconstruită” făcând clic pe ea.

Acest lucru vă va duce la Biblioteca de pagini de destinație Thrive Architect. De aici, puteți selecta unul dintre șabloanele pre-făcute pentru a-l folosi ca bază pentru pagina dvs. pe lățime completă.

Pur și simplu faceți clic pe un șablon care vă place pentru a-l selecta.

Dacă ai ales un șablon din secțiunea „Seturi de pagini de destinație inteligente”, poți acum alege dintr-un număr de pagini pre-proiectate în acel stil.

Pentru acest tutorial, vom alege șablonul „Pagină de vânzări” făcând clic pe el. Apoi, apăsați butonul „Aplică șablon” și constructorul de pagini îl va încărca.

Odată ce sunteți în Editorul Thrive Architect, puteți edita oricare dintre elemente, cum ar fi imagini, fundal, text și așa mai departe, pe care doriți să le schimbați.

Pentru a edita un element de pe pagină, trebuie doar să faceți clic pe el. În acest caz, am făcut clic pe fundalul acestui bloc de pagină. Acest lucru afișează toate opțiunile de personalizare în meniul din stânga:

Aici, puteți comuta comutatorul pentru a vă asigura că conținutul dvs. acoperă întreaga lățime a ecranului.

Din meniul din stânga, puteți, de asemenea, personaliza tipografia, dimensiunea fontului, aspectul, stilul fundalului, marginile, umbrele și multe altele.

De asemenea, puteți adăuga noi elemente oricând în aspectul dvs. Thrive Architect vine cu multe blocuri de bază și avansate pe care le puteți trage și plasa în pagina dvs.

După ce ați terminat editarea, faceți clic pe butonul cu săgeată (^) de lângă butonul „Salvează lucrul” din partea de jos a ecranului. Apoi, faceți clic pe opțiunea „Salvează și revino la editorul postării”.

Puteți apoi să salvați schița sau să o publicați.

Odată publicat, puteți vizita blogul dvs. WordPress pentru a vedea pagina dvs. completă finalizată.

Metoda 4. Creați pagini complet personalizate pe lățime completă cu SeedProd

Deși Thrive Architect este o soluție elegantă, s-ar putea să căutați un plugin care vă oferă opțiuni de personalizare și mai puternice pentru paginile site-ului dvs.

Dacă doriți să creați o pagină de destinație complet personalizată, unde doriți să personalizați antetul, subsolul și toate zonele paginii, atunci vă recomandăm să utilizați SeedProd.

Este cel mai bun plugin pentru pagini de destinație pentru WordPress și vine cu o interfață de constructor de pagini drag and drop foarte ușor de utilizat.

Mai întâi, trebuie să instalezi și să activezi pluginul SeedProd. După activare, pur și simplu accesează SeedProd » Pagini pentru a adăuga o nouă pagină de destinație.

Puteți alege dintre cele peste 300 de șabloane pre-construite, care includ multe opțiuni pe lățime completă. Sau, puteți crea o pagină de destinație personalizată pe lățime completă de la zero.

Cel mai bun lucru la SeedProd este că este extrem de rapid și vine cu funcții de conversie încorporate pentru gestionarea abonaților, integrare cu servicii de email marketing, blocuri avansate WooCommerce și multe altele.

Pentru instrucțiuni detaliate, consultați ghidul nostru despre cum să creați o pagină de destinație în WordPress.

Pe lângă constructorul de pagini de destinație, SeedProd oferă și un constructor complet de teme drag and drop. Acest lucru înseamnă că poți crea cu ușurință o temă WordPress personalizată pe lățime completă fără a edita niciun cod.

Pur și simplu accesați SeedProd » Constructor temă pentru a crea o nouă temă WordPress. Din nou, puteți alege dintre șabloane de temă personalizabile sau puteți proiecta fiecare parte a temei dvs. de la zero.

Prin simpla indicare și clic, puteți edita fiecare parte a temei dvs. De exemplu, puteți adăuga o nouă imagine de fundal și puteți seta poziția și lățimea secțiunii la ecran complet.

Cu SeedProd Theme Builder, puteți personaliza fiecare parte a site-ului dvs. WordPress, inclusiv pagini, postări, arhive, antet, subsol, bare laterale, pagini WooCommerce și multe altele.

Pentru instrucțiuni pas cu pas, puteți urma tutorialul nostru despre cum să creați cu ușurință o temă WordPress personalizată.

Metoda 5: Creează manual un șablon de pagină WordPress pe lățime completă

Această metodă este o ultimă soluție dacă niciuna dintre metodele de mai sus nu funcționează pentru dvs. Aceasta necesită editarea fișierelor temei dvs. WordPress. Veți avea nevoie de o înțelegere de bază a PHP, CSS și HTML.

Dacă nu ați mai făcut acest lucru înainte, consultați ghidul nostru despre cum să copiați / lipiți cod în WordPress.

Înainte de a continua, vă recomandăm să creați o copie de rezervă WordPress sau cel puțin o copie de rezervă a temei dvs. actuale. Acest lucru vă va ajuta să restaurați cu ușurință site-ul dvs. dacă ceva nu merge bine.

Apoi, deschide un editor de text simplu, cum ar fi Notepad, și lipește următorul cod într-un fișier gol:

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

Salvați acest fișier ca full-width.php pe computerul dvs. Este posibil să fie necesar să schimbați 'Salvare ca tip' la 'Toate fișierele' pentru a evita salvarea ca fișier .txt:

Acest cod definește pur și simplu numele unui fișier șablon și solicită WordPress să preia șablonul de antet.

Apoi, veți avea nevoie de partea de conținut a codului. Conectați-vă la site-ul dvs. web folosind un client FTP (sau managerul de fișiere al găzduirii dvs. WordPress în cPanel) și apoi mergeți la /wp-content/themes/your-theme-folder/.

Acum trebuie să localizați fișierul page.php. Acesta este fișierul șablonului de pagină implicit al temei dvs.

Deschideți acel fișier și copiați tot ce este după linia get_header() și lipiți-l în fișierul full-width.php de pe computer.

În fișierul full-width.php, găsiți și ștergeți următoarea linie de cod:

<?php get_sidebar(); ?>

Această linie preia bara laterală și o afișează în tema dvs. Ștergerea acesteia va împiedica tema dvs. să afișeze bara laterală atunci când utilizați șablonul pe lățime completă.

Este posibil să vedeți această linie de mai multe ori în tema dvs. Dacă tema dvs. are mai multe bare laterale (zonele widget pentru subsol sunt numite și bare laterale), atunci veți vedea fiecare bară laterală referențiată o dată în cod. Decideți ce bare laterale doriți să păstrați.

Dacă tema dvs. nu afișează bare laterale pe pagini, este posibil să nu găsiți acest cod în fișierul dvs.

Iată cum arată întregul nostru cod full-width.php după efectuarea modificărilor. Codul dvs. ar putea arăta ușor diferit, în funcție de tema dvs.

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

Apoi, încărcați fișierul full-width.php în folderul temei dvs. folosind clientul FTP.

Acum ați creat și încărcat cu succes un șablon personalizat pentru pagină pe lățime completă în tema dvs. Următorul pas este să utilizați acest șablon pentru a crea o pagină pe lățime completă.

Accesați zona de administrare WordPress și editați sau creați o pagină nouă în editorul de blocuri WordPress.

În panoul „Document” din dreapta, căutați „Atribute pagină” și faceți clic pe săgeata în jos pentru a extinde secțiunea, dacă este necesar. Ar trebui să vedeți un meniu derulant „Șablon” unde puteți selecta noul șablon „Lățime completă”:

După selectarea acelui șablon, publică sau actualizează pagina.

Când vizualizați pagina, veți vedea că barele laterale au dispărut, iar pagina dvs. apare ca o singură coloană. S-ar putea să nu fie încă pe toată lățimea, dar acum sunteți gata să o stilizați diferit.

Va trebui să folosiți instrumentul Inspect pentru a afla clasele CSS utilizate de tema dvs. pentru a defini zona de conținut.

După aceea, puteți ajusta lățimea la 100% folosind CSS. Puteți adăuga cod CSS accesând Aspect » Personalizare și făcând clic pe „CSS suplimentar” în partea de jos a ecranului.

Am folosit următorul cod CSS pe site-ul nostru de test:

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

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

Iată cum arăta pe site-ul nostru demo folosind tema Twenty Sixteen.

Dacă dorești să folosești metoda manuală și vrei să faci personalizări suplimentare, atunci poți folosi și pluginul CSS Hero, care îți permite să modifici stilurile CSS cu un editor point-and-click.

Pentru majoritatea utilizatorilor, însă, recomandăm utilizarea șablonului pe lățime completă al temei dvs. sau utilizarea unui plugin pentru a crea unul.

Sperăm că acest articol v-a ajutat să învățați cum să creați cu ușurință o pagină cu lățime completă în WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cele mai bune plugin-uri WordPress pentru a vă dezvolta site-ul web și comparația noastră a celor mai bune plugin-uri WordPress LMS pentru a crea și vinde cursuri.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.