Hur man använder Avadas sidhuvud, sidfot och kolumnlayoutbyggare

Vår alldeles egna sidbyggare, Avada Builder, är nu tillgänglig i två gränssnitt: Avada Builder, som är vår back-end wireframe sidbyggare, och Avada Live, som är vår front-end Builder, som nyligen introducerades med Avada 6.0 .

Genom att använda vårt enkla system med behållare, kolumner och element, låter båda versionerna av Avada Builder dig enkelt designa vackra sidlayouter för din webbplats. Avada Builder är ett fantastiskt verktyg för både moderna webbdesigners och webbplatsägare, eftersom det ger dem fullständig kontroll över alla aspekter av sidinnehåll och layout. Båda versionerna av Avada Builder genererar också samma kod. De är helt utbytbara, vilket gör att du kan få det bästa av två världar med Avada Builder, som för närvarande är tillgänglig.

Sidan Layoutbyggare är där du hittar alla dina layouter och alla villkorliga layouter som du kanske vill bygga utöver den globala layouten som skapats som standard. Här finns också området där du tilldelar layoutsektioner till dina layouter och anger villkor för att dina villkorliga layouter ska träda i kraft.

Layoutbyggaren kan nås från Avadas instrumentpanel genom att välja Layouter > Layoutbyggare från rullgardinsmenyn. Ett av de enklaste sätten att beskriva layouter är att säga att de är behållare som innehåller de fyra layoutsektionerna på en sida - sidhuvudsektionen, sidrubrikfältssektionen, innehållssektionen och sidfotssektionen. Du kan lära dig mer om skillnaderna mellan layoutsektioner och layouter genom att läsa det här dokumentet: Understanding Layouts and Layoutsections (PDF). Fortsätt läsa för att lära dig mer om de saker du kan göra på den här sidan.

Två delar finns längst upp på Layout Builder-sidan. En teknik för att fylla layoutsektionerna i den globala layouten eller generera villkorliga layouter beskrivs i det första avsnittet (tips: du kan stänga detta med X), och på höger sida av skärmen finns ett område varifrån du kan skapa nya layouter direkt (se nedan). Skriv in ett namn för din nya layout och klicka sedan på Skapa ny layout för att slutföra processen. En tom layout skapas när denna metod används; inga layoutsektioner eller villkor anges.

När du bygger layouter importeras de automatiskt till sidan Layoutbyggare. Du kan byta namn på en layout genom att klicka på knappen Byt namn längst upp på sidan. Du kan också klicka på kuggikonen för att fastställa villkor för layouten, och du kan ta bort en layout genom att klicka på ikonen Bin överst på sidan. Du kan också se och tilldela kriterier genom att klicka längst ned i alla layouter, utom den globala layouten.

Inom varje layout kan du se de fyra layoutsektionerna som är tilldelade en viss layout, en för var och en av de fyra layouterna. I varje layoutsektion kommer du att se en +-ikon, som gör att du kan tilldela en layoutsektion till den sektionen av layouten när du flyttar musen över den. Du har möjlighet att tilldela en befintlig layoutsektion till denna sektion eller skapa en helt ny sektion från början.

Använder sektionslayout

Som en del av Avada Layouts kan du nu skapa helt anpassningsbara sidfötter för din webbplats och dra nytta av hela den kreativa förmågan hos Avada Builder för att åstadkomma detta.

En sidfotslayout är en layoutsektion som läggs till en layout. Till amp kräver en anpassad sidfot en sidfotslayoutsektion, som kan läggas till antingen den globala eller anpassade layouten. Vi ska titta på att konstruera en anpassad sidfotslayoutsektion i nästa avsnitt, men låt oss först titta på Introduktion av Avada-layouter.

I WordPress sidofältet eller Avada Dashboard väljer du Avada > Layouter. Avadas layouter och layoutsektioner skapas och hanteras här. Som visas nedan är den globala layouten till en början tom, utan associerade layoutsektioner.

Anpassa en layout

Det här avsnittet kan läggas till den globala layouten, eller en villkorlig layout, som endast visas på vissa anpassade inläggstyper eller enstaka sidor. Den globala layouten finns redan, men vi måste först utveckla en villkorlig layout.

Lägg till ett namn på sidan Layouter och klicka på Skapa ny layout, som visas nedan.

Skapa en sidfotslayoutsektion om du vill lägga till den i en befintlig layout eller den globala layouten.

På skärmen Layout Section Builder väljer du typen av layoutsektion, anger ett namn (i det här amp sidfot, eventuellt global sidfot) och klickar på Skapa ny layoutsektion, som visas nedan.

Följande bild visar hur man skapar en layoutsektion direkt från layouten. Din webbplatss layoutsektioner måste läggas till i en layout. Inledningsvis finns det helt enkelt en global layout. Så, för att skapa en global anpassad sidfot, lägg till den i denna layout. Avsnittet Anpassad sidfotslayout, lägg sedan till villkor i avsnittet Anpassad sidfotslayout för att få layouten att visas enligt kriterierna.

Inget fel med det, men det är viktigt att överväga situationen. Om layouten för närvarande är aktiv (dvs. har villkor eller är den globala layouten), kommer alla nya layoutsektioner att vara aktiva omedelbart och tomma. Det är mer meningsfullt att lägga till en anpassad sidfot till en global layout via sidan Layout Section Builder först och sedan lägga till den i den globala layouten.

Alternativt kan vi lägga till en sidfot, sidhuvud eller kolumnlayoutsektion till en villkorlig layout och sedan skapa den. Villkor används inte förrän villkor har lagts till. Som illustreras nedan kan vi ändra sektionen för sidfotslayout genom att hålla muspekaren över den och klicka på redigeringsikonen.

Redigering av anpassad layout

Standard WordPress Editor visas när du redigerar en ny layoutsektion; du kan använda Avada Builder eller Avada Live härifrån. Anpassade layoutsektioner skapas här. För ytterligare information, se Skapa layoutsektionsinnehåll, men kort sagt, du kan bygga vad som helst här.

Din anpassade sidfot kan innehålla allt du kan konstruera i Avada Builder. Du kan ha många kolumner, foton, etc.; Detta ger en enorm flexibilitet. Layoutsektionen är där sidfotsmaterialet kommer att visas. Materialet kommer från Byggaren, och din kreativitet är den enda begränsningen.

Se den ursprungliga sidfoten byggd för Taxi Demo nedan; Detta gjordes genom att ändra temaalternativen och sidfotswidgets.

Skrivbordsversionen av den här anpassade rubriken visas här, men för att korrekt förstå omfattningen av den här anpassade rubriken måste du besöka livewebbplatsen som du kan komma åt här.

Villkorlig layoutdesign

Inga villkor i en global layout. Att lägga till layoutsektioner till den kommer att användas på varje sida eftersom den är global. Om du bara behövde en anpassad sidfot på vissa sidor på din webbplats, som enstaka bloggartiklar, skulle du behöva använda en villkorlig layout.

En villkorlig layout kan bara innehålla befintliga layoutsektioner. Sedan, under Layoutens Välj sidfot-flik, bläddra till Befintlig, där du kan lägga till Layoutsektionen, som visas nedan.

Du måste ställa in villkoren för en villkorlig layout. Layouten är aktiv så snart villkoren är specificerade; Därför, om du gör detta innan du upprättar layoutsektionen, kommer sidorna som matchar villkoren att vara tomma.

För att lägga till ett villkor, välj Lägg till ett villkor från layoutens nedre meny. En dialogruta visas, som visas nedan. För mer information om villkorliga layouter, se Förstå villkorliga layouter, men för det här amp skulle vi välja Alla inlägg på fliken Inläggsvillkor, som visas nedan.

Lägger till kolumner från Avada Layout Builder

Kolumnelementet, liksom containerelementet, är en viktig strukturell komponent när man designar en Avada-webbplats.

Att lägga till kolumner är relativt enkelt med Avada Layout Builder.

  • Klicka på knappen ' + Behållare ' för att lägga till en behållare på sidan. När du infogar en behållare blir du ombedd att välja en kolumn- eller kolumnlayout. Du kan skapa en tom behållare, men normalt lägger du till kolumner i detta steg.
  • För att lägga till nya kolumner i en befintlig behållare, håll muspekaren över behållaren och klicka på knappen ' + Kolumn '. För att lägga till en ny kolumn, klicka här.
  • I det övre vänstra hörnet av en kolumn klickar du på ikonen "Ändra storlek på kolumn". Den kommer att ha samma storlek som din kolumn nu. Till exempel amp en 1/4 kolumn att visas som '1/4 ' under alternativet Ändra storlek på kolumn.
  • Dra och släpp kolumner för att ordna om dem. Du kan också dra och släppa kolumner i behållare.

En kolumn kan endast placeras inuti ett containerelement med samma bredd; Detta är vanligtvis webbplatsbredden du anger för webbplatsen. Således, om du ställer in webbplatsens bredd till 1200px, blir en 1/2 kolumn 600px bred. Förinställda kolumnstorlekar visas nedan när de läggs till på en sida.

I Avada kan du ställa in kolumnbredder (och mer) separat på stora, medelstora och små layouter. Hur man ställer in visningsordningen och storleken på kolumner i responsiva layouter förklarar hur man använder denna utmärkta nya funktion med kolumner.

Anpassade bredder finns under Kolumner > Design > Bredd . Som visas nedan kan du ange en anpassad bredd genom att använda ett procenttal. Positioneringen är således obegränsad

Auto är ett nytt breddalternativ. Istället för en fast bredd kommer kolumnen att ta upp utrymmet för det viktigaste elementet inuti den. Så det fungerar bara i vissa fall. Du kan ändra den överordnade kolumnen till Auto, och kolumnen kommer att ändra storlek till elementets bredd.

Avada lägger också till responsiva alternativuppsättningar för behållare och kolumner. I baksidan av Builder kan du se de responsiva ikonerna på alla kolumner, som ses i bilden nedan. Front-End Builder visar de responsiva ikonerna på alternativen.

Endast de nya Flex-behållarna visar responsiva alternativuppsättningar. Kolumner i äldre behållare är inte tillgängliga.

Slutsats

Tack vare Avada Layouts är möjligheten att skapa en anpassad sidfot, sidhuvud och lägga till kolumner nu en realitet och ett nästan obegränsat alternativ. Du kan inte bara använda kraften i Avada Builder för att konstruera praktiskt taget vilken sidfot eller sidhuvud du kan tänka dig, utan du kan också utnyttja kraften i villkorliga layouter för att visa eller dölja dem på vilken sida, kategori, anpassad inläggstyp eller vilken kombination av kriterier du kan tänka dig med Avada Builder.

När det kommer till WordPress-layouter är Avada Layouts en spelväxlare i bokstavlig mening. Det faktum att det tillåter sådan designfrihet och distributionsflexibilitet betyder att processen att skapa sidfot aldrig kommer att bli densamma.

Hanson F.

Nya Inlägg

Hur man använder sidhuvuden och sidfötter med Elementor

En webbplats sidhuvuden och sidfötter är viktiga element. I de flesta fall ger rubriken navigering...

6 januari 2022

WordPress-temajämförelse: Astra vs OceanWP

Två av de mest populära WordPress-temanen på marknaden är Astra och OceanWP. Professionell…

2 januari 2022

Jämförelse av WordPress-nyhetstema: Tidning vs. Astra

Att skapa en utmärkt nyhetswebbplats kräver inte att du blir webbdesigner. Vi…

25 oktober 2021

Skapa en nyhetsrelaterad webbplats med tidningstema

The Newspaper-temat är ett av de viktigaste WordPress-teman som designats av tagDiv, en...

18 oktober 2021

Hur man bygger en e-handel med Avada WooCommerce Builder

När det gäller att skapa en onlinebutik är WooCommerce det bästa plugin . Den…

4 oktober 2021

Hur man använder sticky header och rullningseffekter med Elementor

En rubrik är i allmänhet det första en person ser när de besöker din webbplats,...

21 september 2021