Avada Builder: Skjulte Elementer og Kolonner

Avada Builder tilbyder et utroligt fleksibelt designsystem, der giver brugerne mulighed for at skabe komplekse og dynamiske websider. En af de mere avancerede, men alligevel utroligt nyttige funktioner, er systemet for element-synlighed, især når det kombineres med 'sticky' containere. Dette system giver dig præcis kontrol over, hvornår bestemte elementer eller kolonner skal være synlige for brugeren, hvilket åbner op for en verden af kreative muligheder, især i header-designs og andre interaktive sektioner. Lad os dykke ned i, hvordan dette system fungerer, og hvordan du kan udnytte det til at forbedre dine websites.

Element Sticky Visibility Option: Kontrol over Synlighed

Forestil dig en situation, hvor du ønsker, at visse elementer kun skal dukke op, når en bruger scroller ned ad siden, og en bestemt sektion bliver 'sticky' (klæbrig). Dette er præcis, hvad 'Element Sticky Visibility Option' giver dig mulighed for. Denne option findes inden for specifikke elementer og er en afhængig indstilling, der kun bliver tilgængelig, hvis den overordnede Container er sat til at være 'Sticky'.

Med denne funktion kan du vælge mellem to synlighedsindstillinger for et element:

• Normal: Elementet er synligt under normale omstændigheder, dvs. når containeren ikke er i sticky-tilstand.
• Sticky: Elementet er kun synligt, når den overordnede container er i sticky-tilstand.

Som standard er begge indstillinger valgt, hvilket betyder, at elementet altid vil være synligt. Men hvis du fravælger 'Normal', vil elementet kun blive vist, når den overordnede container aktiveres som sticky. Dette er en kraftfuld måde at styre brugeroplevelsen på.

Praktiske Anvendelser af Sticky Visibility

Mulighederne er mange, især når det kommer til at designe Headers. Forestil dig et header-design, hvor et logo og en navigationsmenu kun vises, når brugeren scroller ned og headeren bliver sticky. Dette skaber en ren og minimalistisk start på siden, som derefter udvider sig med vigtige navigationselementer, når det er mest relevant.

Et konkret eksempel kan ses i Avada's 'New Header 5' præfabrikerede layout. Her finder man typisk to containere, hvor den anden er sat til sticky. De ydre kolonner i denne sticky container kan have deres 'Element Visibility' sat til kun 'Sticky'. I det normale layout er disse kolonner, og dermed elementerne indeni, usynlige. Men når den sticky container aktiveres under scrolling, dukker logoet og menuen pludselig op, hvilket giver en elegant og funktionel brugeroplevelse.

Hvilke Elementer Understøtter Sticky Visibility?

I øjeblikket understøtter følgende elementer 'Element Sticky Visibility Option':

• Kolonner (Columns)
• Nydannede Kolonner (Nested Columns)
• Alert
• Breadcrumbs
• Button
• Icon
• Image
• Menu
• Search
• Separator
• Sharing Box
• Social Links
• Title
• Text Block

Forståelse af Kolonneelementer i Avada 7

Kolonner er fundamentale byggesten i ethvert Avada-layout. En kolonne kan kun placeres inden i en Container, og dens dimensioner baseres altid på den overordnede containers bredde. Typisk vil dette være den 'Site Width', du har defineret for dit website.

Kolonnestørrelser og Opdeling

Avada Builder tilbyder en række foruddefinerede kolonnestørrelser, der gør det nemt at opdele en container visuelt. Disse størrelser er baseret på brøker af containerens bredde:

Disse procentsatser er baseret på containerens fulde bredde, minus eventuel 'Column Spacing', du har indstillet.

Tilpassede Bredder og Responsivitet

Udover de foruddefinerede størrelser giver Avada Builder dig mulighed for at indstille tilpassede bredder for dine kolonner. Dette giver ultimativ frihed i designprocessen. Endnu bedre er muligheden for at definere forskellige bredder for kolonnerne baseret på skærmstørrelsen (large, medium, small). Disse indstillinger findes under 'Columns > Design > Width'.

Ved at aktivere 'Use Custom Width' kan du angive bredden ved hjælp af enhver gyldig CSS-enhed, såsom procentdele (standard), pixels (px), eller andre enheder. Dette sikrer, at dine layouts ser perfekte ud på tværs af alle enheder.

Flex Grow & Flex Shrink: Dynamisk Rumfordeling

Under kolonnens breddeindstillinger finder du også 'Flex Grow' og 'Flex Shrink' mulighederne. Disse er især nyttige, når summen af dine kolonnestørrelser ikke præcist når op på 100% af containeren, eller når du har brug for finjustering af, hvordan kolonnerne reagerer på ændringer i tilgængelig plads.

Flex Grow

Flex Grow bestemmer, om en kolonne kan udvide sig for at optage yderligere plads i sin container. Som standard er denne værdi 0 (tom), hvilket betyder, at kolonnen ikke vokser. Ved at sætte en værdi på 1 eller højere, fortæller du kolonnen, at den skal vokse og optage den tilgængelige plads. Forestil dig tre kolonner på 1/4 bredde (samlet 75%). Hvis alle tre får en 'Flex Grow' værdi på 1, vil de resterende 25% blive fordelt ligeligt mellem dem (hver får ca. 8.33% ekstra). Hvis den midterste kolonne får en værdi på 2, og de yderste på 1, vil den midterste optage dobbelt så meget af den resterende plads.

Flex Shrink

Flex Shrink fungerer kun, hvis containerens 'Content Wrap' er sat til 'No Wrap'. Normalt vil kolonner automatisk gå til en ny linje, hvis de ikke passer. Men med 'No Wrap' tvinges alle kolonner til at blive på samme linje, hvilket kan føre til overflow, hvis elementerne ikke kan reduceres i bredden. 'Flex Shrink' lader dig bestemme, hvilke kolonner der skal kunne skrumpe mest. Standardværdien er 1. En værdi på 0 betyder, at kolonnen absolut ikke må skrumpe – f.eks. en kolonne med en fast pixelbredde vil altid bevare denne bredde.

Auto Width: Dynamisk Kolonnebredde baseret på Indhold

En ny og spændende breddeindstilling er 'Auto Width'. Når denne er valgt, vil kolonnen automatisk tilpasse sig bredden af det største element indeni, som har en defineret bredde. Dette er perfekt, når du har et element som et ikon eller et billede med en fastsat bredde, og du ønsker, at kolonnen skal matche dette element. Hvis du f.eks. har et ikon med en bredde på 50px, og sætter dets forældrekolonne til 'Auto Width', vil kolonnen automatisk blive 50px bred.

Eksempler på Auto Width

Forestil dig en kolonne med et stort billede. Hvis billedet er 800px bredt, og kolonnen er sat til 'Auto Width', vil kolonnen automatisk blive 800px bred. Hvis du derefter tilføjer et andet element i samme kolonne, som er 900px bredt, vil kolonnen automatisk udvide sig til 900px. Dette giver en meget dynamisk måde at håndtere elementbredder på, især i responsivt design.

Konklusion

Avada Builders system for element-synlighed og avancerede kolonneindstillinger som 'Flex Grow', 'Flex Shrink' og 'Auto Width' giver webdesignere hidtil usete muligheder for at skabe unikke, dynamiske og responsive brugeroplevelser. Ved at forstå og udnytte disse funktioner kan du tage dine Avada-baserede websites til det næste niveau, sikre at dine designs ikke kun ser godt ud, men også fungerer optimalt på tværs af alle enheder og under forskellige interaktionsscenarier.

Ofte Stillede Spørgsmål (FAQ)

Q: Hvornår skal jeg bruge 'Element Sticky Visibility Option'?
A: Brug denne option, når du ønsker, at et element kun skal være synligt, når den overordnede container bliver 'sticky' (f.eks. i en sticky header, hvor visse elementer kun vises ved scrolling).

Q: Kan jeg sætte en kolonne til kun at være synlig i sticky-tilstand?
A: Ja, hvis kolonnen er placeret inden i en sticky container, kan du sætte kolonnens 'Element Visibility' til kun 'Sticky'.

Q: Hvad er forskellen på 'Flex Grow' og 'Flex Shrink'?
A: 'Flex Grow' lader kolonner udvide sig for at optage ledig plads, mens 'Flex Shrink' lader kolonner blive mindre for at undgå overflow, når de er tvunget til at blive på samme linje ('No Wrap').

Q: Hvornår er 'Auto Width' for kolonner nyttig?
A: 'Auto Width' er nyttig, når du vil have en kolonne til automatisk at tilpasse sig bredden af det største element indeni, som har en fastsat bredde (f.eks. et billede eller ikon).

Hvis du vil læse andre artikler, der ligner Avada Builder: Skjulte Elementer og Kolonner, kan du besøge kategorien Teknologi.