Sådan bruger du Avadas sidehoved, sidefod og kolonnelayoutbygger

Vores helt egen sidebygger, Avada Builder, er nu tilgængelig i to grænseflader: Avada Builder, som er vores back-end wireframe sidebygger, og Avada Live, som er vores frontend Builder, som først for nylig blev introduceret med Avada 6.0 .

Ved at bruge vores enkle system af containere, kolonner og elementer giver begge versioner af Avada Builder dig mulighed for nemt at designe smukke sidelayouts til dit websted. Avada Builder er et fantastisk værktøj for moderne webdesignere og webstedsejere, da det giver dem fuld kontrol over alle aspekter af sideindhold og layout. Begge versioner af Avada Builder genererer også den samme kode. De er fuldstændigt udskiftelige, så du kan få det bedste fra begge verdener med Avada Builder, som er tilgængelig i øjeblikket.

Layout Builder-siden er, hvor du finder alle dine layouts og eventuelle betingede layouts, som du måtte ønske at bygge ud over det globale layout, der er oprettet som standard. Her er også det område, hvor du tildeler layoutsektioner til dine layouts og angiver betingelser for, at dine betingede layouts træder i kraft.

Layout Builder kan tilgås fra Avada Dashboard ved at vælge Layouts > Layout Builder i rullemenuen. En af de mest ligefremme måder at beskrive layouts på er at sige, at de er containere, der rummer de fire layoutsektioner på en side – sidehovedsektionen, sidetitellinjeafsnittet, indholdssektionen og sidefodssektionen. Du kan lære mere om forskellene mellem Layoutsektioner og Layouts ved at læse dette dokument: Forstå Layouts og Layoutsektioner (PDF). Fortsæt med at læse for at lære mere om de ting, du kan gøre på denne side.

To dele er placeret helt øverst på Layout Builder-siden. En teknik til at udfylde layoutsektionerne i det globale layout eller generere betingede layouts er skitseret i det første afsnit (tip: du kan lukke dette med X), og på højre side af skærmen er et område, hvorfra du kan direkte oprette nye layouts (se nedenfor). Indtast et navn til dit nye layout, og klik derefter på Opret nyt layout for at fuldføre processen. Et tomt layout oprettes, når denne metode bruges; ingen layoutsektioner eller betingelser er angivet.

Når du bygger layout, importeres de automatisk til siden Layout Builder. Du kan omdøbe et layout ved at klikke på knappen Omdøb øverst på siden. Du kan også klikke på tandhjulsikonet for at etablere betingelser for layoutet, og du kan slette et layout ved at klikke på bin-ikonet øverst på siden. Du kan også se og tildele kriterier ved at klikke i bunden af ​​alle layout, undtagen det globale layout.

Inden for hvert layout kan du se de fire layoutsektioner, der er tildelt et bestemt layout, en for hvert af de fire layouts. I hver layoutsektion vil du se et +-ikon, som giver dig mulighed for at tildele en layoutsektion til den sektion af layoutet, når du flytter musen hen over den. Du har mulighed for at tildele en eksisterende layoutsektion til denne sektion eller oprette en helt ny sektion fra bunden.

Brug af sektionslayout

Som en del af Avada Layouts kan du nu oprette fuldt tilpasselige sidefødder til dit websted, og drage fordel af hele Avada Builders kreative evne til at opnå dette.

Et sidefodslayout er en layoutsektion, der føjes til et layout. For amp kræver en brugerdefineret sidefod en sidefodslayoutsektion, som kan føjes til enten det globale eller brugerdefinerede layout. Vi vil se på at konstruere en tilpasset sidefodslayoutsektion i næste afsnit, men lad os først se på Introduktion af Avada-layouts.

I WordPress-sidebjælken eller Avada Dashboard skal du vælge Avada > Layouts. Avadas Layouts og Layoutsektioner oprettes og administreres her. Som vist nedenfor er det globale layout til at begynde med tomt uden tilknyttede layoutsektioner.

Tilpasning af et layout

Denne sektion kan føjes til det globale layout eller et betinget layout, der kun vises på bestemte brugerdefinerede indlægstyper eller enkelte sider. Det globale layout er allerede til stede, men vi skal først udvikle et betinget layout.

På siden Layout skal du tilføje et navn og klikke på Opret nyt layout, som vist nedenfor.

Opret en sidefodslayoutsektion, hvis du ønsker at tilføje den til et eksisterende layout eller det globale layout.

På skærmbilledet Layout Section Builder skal du vælge typen af ​​Layout Sektion, indtaste et navn (i dette amp , Footer, muligvis Global Footer) og klikke på Create New Layout Section, som vist nedenfor.

Følgende billede viser, hvordan man genererer en layoutsektion direkte fra layoutet. Dit websteds layoutsektioner skal føjes til et layout. I første omgang er der blot et globalt layout. Så for at oprette en global tilpasset sidefod skal du tilføje den til dette layout. Tilpasset sidefodslayoutsektion, og tilføj derefter betingelser til sektionen Custom footerlayout for at få layoutet til at blive vist i overensstemmelse med kriterierne.

Der er ikke noget galt med det, men det er vigtigt at overveje situationen. Hvis layoutet i øjeblikket er aktivt (dvs. har betingelser eller er det globale layout), vil alle nye layoutsektioner være aktive med det samme og tomme. Det giver mere mening først at tilføje en brugerdefineret sidefod til et globalt layout via siden Layout Section Builder og derefter tilføje det til det globale layout.

Alternativt kan vi tilføje en sidefod, sidehoved eller kolonnelayoutafsnit til et betinget layout og derefter oprette det. Betingelser bruges ikke før betingelser er tilføjet. Som illustreret nedenfor kan vi ændre sidefodslayoutsektionen ved at holde musen over den og klikke på redigeringsikonet.

Redigering af brugerdefineret layout

Standard WordPress Editor vises, når du redigerer en ny layoutsektion; du kan bruge Avada Builder eller Avada Live herfra. Brugerdefinerede layoutsektioner oprettes her. For yderligere information, se Oprettelse af layoutsektionsindhold, men kort sagt, du kan bygge hvad som helst her.

Din tilpassede sidefod kan indeholde alt, hvad du kan konstruere i Avada Builder. Du kan have adskillige kolonner, fotos osv.; Dette giver en enorm fleksibilitet. Layout-sektionen er, hvor sidefodsmaterialet vises. Materialet kommer fra Byggeren, og din kreativitet er den eneste begrænsning.

Se den originale sidefod bygget til Taxi-demoen nedenfor; Dette blev lavet ved at ændre temaindstillingerne og sidefod-widgets.

Desktop-versionen af ​​denne Custom Header vises her, men for at forstå omfanget af denne Custom Header korrekt, skal du besøge livesiden, som du kan få adgang til her.

Betinget layoutdesign

Ingen betingelser i et globalt layout. Tilføjelse af layoutsektioner vil blive brugt på hver side, fordi den er global. Hvis du kun havde brug for en tilpasset sidefod på nogle sider på dit websted, f.eks. enkelte blogartikler, skal du bruge et betinget layout.

Et betinget layout kan kun indeholde eksisterende layoutsektioner. Derefter, under fanen Layouts Vælg sidefod, skal du rulle til Eksisterende, hvor du kan tilføje Layoutsektionen, som vist nedenfor.

Du skal angive betingelserne for ethvert betinget layout. Layoutet er aktivt, så snart betingelserne er specificeret; Derfor, hvis du gør dette, før du etablerer Layout-sektionen, vil de sider, der matcher betingelserne, være tomme.

For at tilføje en betingelse skal du vælge Tilføj en betingelse fra layoutets bundmenu. En dialogboks vises, som vist nedenfor. For mere information om betingede layout, se Forståelse af betingede layouts, men for dette amp ville vi vælge Alle indlæg på fanen Indlægsbetingelser, som vist nedenfor.

Tilføjelse af kolonner fra Avada Layout Builder

Kolonneelementet er ligesom containerelementet en væsentlig strukturel komponent, når man designer et Avada-websted.

Det er relativt nemt at tilføje kolonner med Avada Layout Builder.

  • Klik på knappen ' + Container ' for at tilføje en container til siden. Når du indsætter en container, bliver du bedt om at vælge et kolonne- eller kolonnelayout. Du kan oprette en tom container, men normalt tilføjer du kolonner på dette trin.
  • For at tilføje nye kolonner til en eksisterende container skal du holde markøren over containeren og klikke på knappen ' + Kolonne '. For at tilføje en ny kolonne, klik her.
  • I øverste venstre hjørne af en kolonne skal du klikke på ikonet 'Ændre størrelse på kolonne'. Den vil nu have samme størrelse som din kolonne. For eksempel amp en 1/4-kolonne blive vist som '1/4 ' under indstillingen Resize Column.
  • Træk og slip kolonner for at omarrangere dem. Du kan også trække og slippe kolonner i containere.

En søjle kan kun placeres inde i et beholderelement med samme bredde; Dette er normalt den webstedsbredde, du angiver for webstedet. Således, hvis du indstiller webstedsbredden til 1200px, vil en 1/2 kolonne være 600px bred. Forudindstillede kolonnestørrelser vises nedenfor, når de føjes til en side.

I Avada kan du indstille kolonnebredder (og mere) separat på store, mellemstore og små layouts. Sådan indstiller du visningsrækkefølgen og størrelsen på kolonner i responsive layouts forklarer, hvordan du bruger denne fremragende nye funktion med kolonner.

Brugerdefinerede bredder er under Kolonner > Design > Bredde . Som vist nedenfor giver brug af et procenttal dig mulighed for at angive en brugerdefineret bredde. Positioneringen er således ubegrænset

Auto er en ny breddemulighed. I stedet for en fast bredde vil søjlen optage pladsen af ​​det mest betydningsfulde element inde i den. Så det virker kun i nogle tilfælde. Du kan ændre den overordnede kolonne til Auto, og kolonnen vil ændre størrelsen til elementets bredde.

Avada tilføjer også responsive indstillingssæt til containere og kolonner. I bagenden af ​​Builder kan du se de responsive ikoner på alle kolonner, som det ses på billedet nedenfor. Front-End Builder viser de responsive ikoner på mulighederne.

Kun de nye Flex-containere viser responsive valgmuligheder. Kolonner i ældre containere er ikke tilgængelige.

Konklusion

Takket være Avada Layouts er muligheden for at oprette en brugerdefineret sidefod, sidehoved og tilføje kolonner nu en realitet og en næsten ubegrænset mulighed. Ikke alene kan du udnytte kraften i Avada Builder til at konstruere praktisk talt enhver sidefod eller sidehoved, du kan forestille dig, men du kan også udnytte kraften i betingede layouts til at vise eller skjule dem på enhver side, kategori, tilpasset indlægstype eller enhver kombination af kriterier, du kan tænke på ved hjælp af Avada Builder.

Når det kommer til WordPress-layouts, er Avada Layouts en game-changer i bogstaveligste forstand. Det faktum, at det giver mulighed for en sådan designfrihed og implementeringsfleksibilitet, betyder, at processen med at oprette sidefødder aldrig bliver den samme.

Hansen F.

Seneste indlæg

Sådan bruger du sidehoveder og sidefødder med Elementor

Et websteds sidehoveder og sidefødder er væsentlige elementer. I de fleste tilfælde giver overskriften navigation...

6. januar 2022

WordPress-temasammenligning: Astra vs OceanWP

To af de mest populære WordPress-temaer på markedet er Astra og OceanWP. Professionel…

2. januar 2022

WordPress nyhedstema sammenligning: Avis vs. Astra

Oprettelse af et fremragende nyhedswebsted kræver ikke, at du bliver webdesigner. Vi…

25. oktober 2021

Opret en nyhedsrelateret hjemmeside med Newspaper Theme

Avis-temaet er et af de mest betydningsfulde WordPress-temaer designet af tagDiv, en...

18. oktober 2021

Sådan bygger du en e-handel med Avada WooCommerce builder

Når det kommer til at oprette en online butik, er WooCommerce det perfekte plugin . Det…

4. oktober 2021

Sådan bruger du sticky header og rulleeffekter med Elementor

En header er generelt det første, en person ser, når de besøger dit websted,...

21. september 2021