Slik bruker du Avadas topptekst-, bunntekst- og kolonnelayoutbygger

Vår egen sidebygger, Avada Builder, er nå tilgjengelig i to grensesnitt: Avada Builder, som er vår back-end wireframe-sidebygger, og Avada Live, som er vår frontend-bygger, som nylig ble introdusert med Avada 6.0 .

Ved å bruke vårt enkle system med containere, kolonner og elementer, lar begge versjonene av Avada Builder deg enkelt designe vakre sideoppsett for nettstedet ditt. Avada Builder er et fantastisk verktøy for moderne webdesignere og nettstedeiere, siden det gir dem full kontroll over alle aspekter av sideinnhold og layout. Begge versjonene av Avada Builder genererer også den samme koden. De er fullstendig utskiftbare, slik at du kan få det beste fra begge verdener med Avada Builder, som for øyeblikket er tilgjengelig.

Layout Builder-siden er der du finner alle dine layouter og eventuelle betingede layouter som du måtte ønske å bygge i tillegg til den globale layouten som er opprettet som standard. Her er også området der du tilordner layoutseksjoner til layoutene dine og spesifiserer betingelser for at de betingede layoutene dine skal tre i kraft.

Layout Builder kan nås fra Avada Dashboard ved å velge Layouts > Layout Builder fra rullegardinmenyen. En av de enkleste måtene å beskrive layouter på er å si at de er beholdere som inneholder de fire layoutdelene på en side – topptekstdelen, sidetittellinjedelen, innholdsdelen og bunntekstdelen. Du kan lære mer om forskjellene mellom layoutseksjoner og layouter ved å lese dette dokumentet: Forstå oppsett og layoutseksjoner (PDF). Fortsett å lese for å lære mer om tingene du kan gjøre på denne siden.

To deler er plassert helt øverst på Layout Builder-siden. En teknikk for å fylle ut layoutseksjonene i det globale oppsettet eller generere betingede oppsett er skissert i den første delen (hint: du kan lukke dette med X), og på høyre side av skjermen er et område du kan opprette nye layouter direkte (se nedenfor). Skriv inn et navn for din nye layout og klikk deretter på Opprett ny layout for å fullføre prosessen. Et tomt layout opprettes når denne metoden brukes; ingen layoutseksjoner eller betingelser er spesifisert.

Når du bygger layouter, importeres de automatisk til Layout Builder-siden. Du kan gi nytt navn til en layout ved å klikke på Gi nytt navn øverst på siden. Du kan også klikke på tannhjulikonet for å etablere betingelser for oppsettet, og du kan slette et oppsett ved å klikke på bin-ikonet øverst på siden. Du kan også se og tilordne kriterier ved å klikke på bunnen av alle layouter, unntatt den globale layouten.

Innenfor hver layout kan du se de fire layoutdelene som er tilordnet en bestemt layout, en for hver av de fire layoutene. I hver layoutseksjon vil du se et +-ikon, som lar deg tilordne en layoutseksjon til den delen av layouten når du beveger musen over den. Du har muligheten til å tilordne en eksisterende layoutseksjon til denne seksjonen eller opprette en helt ny seksjon fra bunnen av.

Bruker seksjonslayout

Som en del av Avada Layouts kan du nå lage fullt tilpassbare bunntekster for nettstedet ditt, og dra nytte av hele den kreative evnen til Avada Builder for å oppnå dette.

En Footer Layout er en Layout Seksjon lagt til en Layout. For amp krever en egendefinert bunntekst en bunntekstoppsettseksjon, som kan legges til enten den globale eller egendefinerte layouten. Vi skal se på å konstruere en egendefinert bunntekstlayoutseksjon i neste seksjon, men først, la oss se på Introduksjon av Avada-oppsett.

I WordPress-sidefeltet eller Avada-dashbordet velger du Avada > Layouts. Avadas layout- og layoutseksjoner opprettes og administreres her. Som vist nedenfor er den globale layouten i utgangspunktet tom, uten tilknyttede layoutseksjoner.

Tilpasse et oppsett

Denne delen kan legges til den globale layouten, eller en betinget layout, og vises kun på enkelte tilpassede innleggstyper eller enkeltsider. Den globale layouten er allerede til stede, men vi må først utvikle en betinget layout.

På Layouts-siden legger du til et navn og klikker Create New Layout, som vist nedenfor.

Opprett en Footer Layout-seksjon hvis du ønsker å legge den til en eksisterende Layout eller Global Layout.

På skjermbildet Layout Section Builder, velg typen Layout Section, skriv inn et navn (i dette amp bunntekst, muligens Global Footer) og klikk på Create New Layout Section, som vist nedenfor.

Følgende bilde viser hvordan du genererer en layoutseksjon direkte fra layouten. Nettstedets layoutseksjoner må legges til i en layout. I utgangspunktet er det ganske enkelt en global layout. Så for å lage en global tilpasset bunntekst, legg den til i denne layouten. Egendefinert bunntekstoppsettseksjon, og legg deretter til betingelser i den Egendefinerte bunntekstoppsettdelen for å få oppsettet til å vises i henhold til kriteriene.

Ikke noe galt med det, men det er viktig å vurdere situasjonen. Hvis layouten for øyeblikket er aktiv (dvs. har betingelser eller er den globale layouten), vil alle nye layoutseksjoner være aktive umiddelbart og tomme. Det er mer fornuftig å legge til en egendefinert bunntekst i en global layout via Layout Section Builder-siden først, og deretter legge den til i den globale layouten.

Alternativt kan vi legge til en bunntekst, topptekst eller kolonnelayoutseksjon til en betinget layout og deretter opprette den. Betingelser brukes ikke før betingelser er lagt til. Som illustrert nedenfor, kan vi endre bunntekstoppsettet ved å holde musepekeren over den og klikke på redigeringsikonet.

Redigering av tilpasset oppsett

Standard WordPress Editor vises når du redigerer en ny layoutseksjon; du kan bruke Avada Builder eller Avada Live herfra. Egendefinerte layoutseksjoner opprettes her. For mer informasjon, se Opprette innhold i layoutdelen, men kort sagt kan du bygge hva som helst her.

Din egendefinerte bunntekst kan inneholde alt du kan lage i Avada Builder. Du kan ha mange kolonner, bilder osv.; Dette gir enorm fleksibilitet. Layout-delen er der bunntekstmaterialet vises. Materialet kommer fra Byggeren, og din kreativitet er den eneste begrensningen.

Se den originale bunnteksten bygget for Taxi-demoen nedenfor; Dette ble gjort ved å endre temaalternativene og bunntekstwidgetene.

Desktop-versjonen av denne tilpassede overskriften vises her, men for å forstå omfanget av denne tilpassede overskriften, må du besøke live-siden, som du kan få tilgang til her.

Betinget layoutdesign

Ingen betingelser i en global layout. Å legge til layoutseksjoner til den vil bli brukt på hver side fordi den er global. Hvis du bare trengte en egendefinert bunntekst på enkelte sider på nettstedet ditt, for eksempel enkeltbloggartikler, må du bruke en betinget layout.

En betinget layout kan bare inneholde eksisterende layoutseksjoner. Deretter, under Layouts Velg bunntekst-fane, bla til Eksisterende, hvor du kan legge til Layout-delen, som vist nedenfor.

Du må angi betingelsene for enhver betinget layout. Layouten er aktiv så snart betingelsene er spesifisert; Derfor, hvis du gjør dette før du oppretter layoutdelen, vil sidene som samsvarer med betingelsene være tomme.

For å legge til en betingelse, velg Legg til en betingelse fra layoutens nederste meny. En dialogboks vises, som vist nedenfor. For mer informasjon om betingede oppsett, se Forstå betingede oppsett, men for dette amp velger vi Alle innlegg i kategorien Innleggsbetingelser, som vist nedenfor.

Legger til kolonner fra Avada Layout Builder

Kolonneelementet, i likhet med containerelementet, er en viktig strukturell komponent når du designer et Avada-nettsted.

Det er relativt enkelt å legge til kolonner med Avada Layout builder.

  • Klikk på ' + Beholder '-knappen for å legge til en beholder på siden. Når du setter inn en beholder, blir du bedt om å velge en kolonne- eller kolonnelayout. Du kan opprette en tom beholder, men normalt legger du til kolonner på dette trinnet.
  • For å legge til nye kolonner i en eksisterende beholder, hold musepekeren over beholderen og klikk på ' + Kolonne '-knappen. For å legge til en ny kolonne, klikk her.
  • I øvre venstre hjørne av en kolonne klikker du på ikonet "Endre størrelse på kolonne". Den vil ha samme størrelse som kolonnen din nå. For eksempel amp en 1/4-kolonne vises som '1/4 ' under alternativet Endre størrelse på kolonne.
  • Dra og slipp kolonner for å omorganisere dem. Du kan også dra og slippe kolonner i beholdere.

En kolonne kan bare plasseres inne i et beholderelement med samme bredde; Dette er vanligvis sidebredden du angir for nettstedet. Derfor, hvis du setter sidebredden til 1200px, vil en 1/2-kolonne være 600px bred. Forhåndsinnstilte kolonnestørrelser vises nedenfor når de legges til en side.

I Avada kan du angi kolonnebredder (og mer) separat på store, mellomstore og små oppsett. Hvordan angi visningsrekkefølgen og størrelsen på kolonner i responsive oppsett forklarer hvordan du bruker denne utmerkede nye funksjonen med kolonner.

Egendefinerte bredder er under Kolonner > Design > Bredde . Som vist nedenfor, ved å bruke et prosenttall kan du spesifisere en egendefinert bredde. Dermed er posisjonering ubegrenset

Auto er et nytt breddealternativ. I stedet for en fast bredde, vil kolonnen ta opp plassen til det mest betydningsfulle elementet inne i den. Så det fungerer bare i noen tilfeller. Du kan endre den overordnede kolonnen til Auto, og kolonnen vil endre størrelsen til elementets bredde.

Avada legger også til responsive alternativsett for containere og kolonner. I bakenden av Builder kan du se de responsive ikonene på alle kolonner, som vist på bildet nedenfor. Front-End Builder viser de responsive ikonene på alternativene.

Bare de nye Flex-beholderne viser responsive alternativsett. Kolonner i eldre beholdere er ikke tilgjengelige.

Konklusjon

Takket være Avada Layouts er muligheten til å lage en egendefinert bunntekst, topptekst og legge til kolonner nå en realitet og et nesten ubegrenset alternativ. Ikke bare kan du bruke kraften til Avada Builder til å konstruere praktisk talt hvilken som helst bunntekst eller topptekst du kan tenke deg, men du kan også utnytte kraften til betingede oppsett for å vise eller skjule dem på hvilken som helst side, kategori, tilpasset innleggstype eller hvilken som helst kombinasjon av kriterier du kan tenke deg å bruke Avada Builder.

Når det kommer til WordPress-oppsett, er Avada Layouts en game-changer i bokstavelig forstand. Det faktum at det gir mulighet for slik designfrihet og distribusjonsfleksibilitet betyr at prosessen med å lage Footers aldri vil bli den samme.

Hanson F.

Siste innlegg

Slik bruker du topptekst og bunntekst med Elementor

Et nettsteds topp- og bunntekst er viktige elementer. I de fleste tilfeller gir toppteksten navigasjon...

6. januar 2022

WordPress-temasammenligning: Astra vs OceanWP

To av de mest populære WordPress-temaene på markedet er Astra og OceanWP. Profesjonell…

2. januar 2022

WordPress nyhetstema sammenligning: Avis vs. Astra

Å lage et utmerket nyhetsnettsted krever ikke at du blir webdesigner. Vi…

25. oktober 2021

Lag en nyhetsrelatert nettside med avis-tema

Avis-temaet er et av de viktigste WordPress-temaene designet av tagDiv, en...

18. oktober 2021

Hvordan bygge en e-handel med Avada WooCommerce-bygger

Når det gjelder å sette opp en nettbutikk, er WooCommerce go-to- plugin . Den…

4. oktober 2021

Hvordan bruke klebrig overskrift og rulleeffekter med Elementor

En overskrift er vanligvis det første en person ser når de besøker nettstedet ditt,...

21. september 2021