Quix
Quix er et plugin i Joomla, en såkaldt page builder. Det er her alt det “sjove” sker. For at komme ind i Quix går du til Quix > Library.
Herfra kan du enten oprette et nyt Layout eller gå ind i et eksisterende. Hvis du opretter et nyt layout ser det ud som nedenfor:
I feltet title skal du navngive dit layout. Det der står i feltet bliver kun vist backend og det kan være en ide at tænke over, hvordan du/I vil navngive jeres sider i Quix. Det kan fx være ved at navngive alle sider der hører til et specifikt menupunkt med samme begyndelse og slutte af med navnet på den specifikke side.
Fx:
- Uddannelser_Bygningskonstruktør
- Om KEA_Organisation
Er det landing pages (sider der ikke er synlige i menuen, men har en kort url, så den er nem at bruge i fx annoncer, foldere eller lignende), kan det være en god ide at angive, at det hører til en landingsside, fx ved at skrive LP eller Landing pages_ foran det siden "hedder".
Herefter klikker du på Add New Section, og så er du klar til at bygge siden op.
Kobling til artikel
Hvis du skal oprette en ny side, kan det være en ide at oprette og navngive layoutet først, lukke det og herefter indsætte Quix-id'et på den artikel, det skal være tilknyttet – se hvordan i afsnittet Articles på Fanen Common. På den måde kan du følge med i, hvad der sker, når du redigerer siden.
Se nedenfor hvor du finder Quix-id'et:
Hvis din side er koblet til et menupunkt, kan du finde den frontend via den direkte url. Hvis den ikke er koblet, kan du søge efter titlen på artiklen på din sides søgeside.
De forskellige preview-funktioner i Quix og Joomla fungerer ikke særlig godt, så det er bedre at kunne følge med live.
Opbygning af siden
Dit layout i Quix (og dermed udseendet på siden frontend) kan bestå af en til flere sektioner med et varierende antal layout-muligheder og flere forskellige element-typer.
Vi har som udgangspunkt tre anbefalede typer opbygning af sider.
- Standard
- Forside (bruges ofte også til landingssider)
- Opdateret uddannelse
-
Standard layout
Standardlayoutet har overskrifter på sidens indhold stående til venstre og indholdet stående til højre. Mange elementer i Quix er inddelt på denne måde som standard.
Du kan få et indtryk af standardlayoutet på fx:
- https://kea.dk/for-virksomheder/få-en-praktikant
- https://kea.dk/uddannelser/ansøgning-optagelse
- https://kea.dk/om-kea/kvalitet
Standardlayoutet kan også brydes med farvede sektioner, hvor indholdet er i fuld bredde eller lignende. De farvede sektioner kan også være bygget op som resten af indholdet (overskrift venstre, indhold højre), hvor farven blot bruges til at bryde en måske ellers lang side.
Her kan du se et par eksempler på standardlayout, der er brudt af farvede sektioner og forskellige typer indhold:
Kendetegnende ved standardlayoutet er, at det primære indhold har opbygningen med overskrifter til venstre og indhold til højre.
Standardlayout backend
Hvis du ønsker standard layout på siden, skal du vælge en enkelt kolonne, når du har trykket på Add Columns.
-
Forside / Landingsside
Forsidelayoutet (som også kan bruges til landingssider) er bygget op forskellige antal kolonner i de enkelte rækker. Layoutet vil oftest afhænge af præcis, hvad det er for en type indhold, der skal være på den pågældende side.
Forsider vil ofte bestå af bokse, knapper der linker videre, videoer og kasser med kortere indhold, mens landingssider kan bestå af elementer med mere tekst.
Eksempler på forsider:
Eksempler på landingssider:
Forsidelayout backend
Backend kan du bruge stort set alle de forskellige rækketyper. De mest brugte er de rækker, der deler siden ind i 2 lige store kolonner, 2 kolonner med den største kolonne til enten højre eller venstre, 3 eller 4 lige store kolonner.
-
Opdateret uddannelse
Opdateret uddannelseslayout bruges lige nu primært på uddannelserne på kea.dk og mit.kea.dk.
Layoutet er kendetegnet ved, at det udnytter bredden på siden i højere grad og der er flere bokse til særlig information end i standardlayoutet.
Du kan få et indtryk af det opdaterede uddannelseslayout på:
- https://kea.dk/uddannelser/top-up/softwareudvikling
- https://kea.dk/uddannelser/professionsbachelor/økonomi-it
- https://mit.kea.dk/studieliv/studenterpolitik
- https://mit.kea.dk/studiehåndbog/b
Opdateret uddannelseslayout backend
Det opdaterede uddannelseslayout bruger primært de to rækker vist nedenfor. Ofte vil den længere tekst stå i den bredeste kolonne og så bliver den smalle kolonne brugt til fx bokse og lignende.
Udover de to rækkelayouter, som vist ovenfor, bliver der også brugt kolonner, der fylder hele bredden og kolonner hvor siden er delt i to lige store halve.
Oversigt over de forskellige elementer i Quix
Når du har indsat dine Columns i dit layout, kan du ved at klikke på Add Element i det ønskede felt vælge, hvilket element du vil have indsat. Du kan nemt flytte på dine elementer efterfølgende ved hjælp af drag'n'drop.
Du må kun vælge de elementer, der hedder noget med KEA foran.
Nedenfor kan du se, hvad de forskellige elementer kan og deres basale indstillinger.
Elementerne KEA Jobs, KEA Phonebook og KEA Unemployed er elementer udviklet til helt specifikke situationer, som ikke skal bruges andre steder. Derfor vil de ikke blive beskrevet her.
KEA Accordion
Accordion kan bruges, hvis du har meget indhold, men du helst ikke vil have det til at fylde en masse på siden. Accordions er gode til fx lister med meget indhold i de enkelte punkter, FAQ's, praktisk indhold etc.
I de to eksempler kan du se forskellen på om Heading er til venstre for indholdet eller Heading er fjernet, så indholdet fylder hele bredden på kolonnen. Dette sættes på fanebladet Styles.
Det er også på fanebladet Styles, du kan indsætte en farvet baggrund på modulet. Du kan se mere om, hvordan dette gøres under afsnittet Farvede bokse.
Eksempler / KEA Accordion
Her ser du en accordion uden heading
Dette er subheading (H3)
-
Her er første punkt (H4)
Og her har du brødteksten.
Husk at mellemrubrikker i accordions skal være h5
og så kan teksten fortsætte...
-
Her er andet punkt (H4)
Lorem ipsum dolor sit amet timeam deleniti mnesarchum ex sed alii hinc dolores ad cum. -
Og tredje punkt (H4)
Lorem ipsum dolor sit amet timeam deleniti mnesarchum ex sed alii hinc dolores ad cum.
Her ser du en accordion med heading til venstre.
"Heading to the left" bruges primært i standardlayoutet og er designet til at blive sat ind i en fuld bredde kolonne, derfor ser det lidt klemt ud her. Du kan se et eksempel på, hvordan det fungerer "rigtigt" på kea.dk/uddannelser/faq
Dette er heading (H2)
Dette er subheading (H3)
-
Her er første punkt (H4)
Og her har du brødteksten.
Husk at mellemrubrikker i accordions skal være h5
og så kan teksten fortsætte...
-
Her er andet punkt (H4)
Lorem ipsum dolor sit amet timeam deleniti mnesarchum ex sed alii hinc dolores ad cum. -
Og tredje punkt (H4)
Lorem ipsum dolor sit amet timeam deleniti mnesarchum ex sed alii hinc dolores ad cum.
KEA CTA
CTA'en er en foruddefineret "knap", hvor du blot skal udfylde tekst og link.
Som standard er CTA'en KEArød med mørkeblå font. På fanebladet Styles kan du ændre dette i felterne Alt Background Color og Text Color.
Husk at sikre at kontrasten på baggrundsfarve og tekstfarve lever op til tilgængelighedskrav. Læs mere under Farver og Tilgængelighed.
Indsæt CTA'en i fuld bredde kolonne
CTA'en er kodet, så den fungerer bedst, hvis den bliver indsat i en kolonne, der fylder hele bredden. I billedet nedenfor kan du fx se, hvordan kolonnerne ser ud backend på dette afsnit om CTA:
KEA Cover Image
Cover Images er billeder der fylder den fulde bredde på siden. Billedet har en parallax-effekt, hvilket betyder, at billedet bevæger sig når man scroller ned over siden. Cover images kan fx bruges til at bryde indholdet på en side.
Cover image skal ligesom KEA CTA indsættes i en kolonne der fylder hele bredden.
Vi anbefaler at Cover Images er 2200x1400, og at det vigtigste i billedet er placeret ca. i den midterste tredjedel (fra bund til top):
Cover images på forsider
Cover Image kan også bruges på fx forsider eller landingssider, hvor du ikke har indsat et billede i den tilknyttede Article og ikke har skrevet en tekst på Articlen. Layout på Article skal desuden være sat til Frontpage (se under Articles > Fanen Options).
I disse tilfælde skal Cover image indsættes som det første element i dit Quix-layout, og du kan evt. indsætte tekst, CTA-knap og link på billedet. Dette fungerer bedst på forsider.
KEA Cover Slider
Cover slideren er lavet til brug for forsider og landingssider, og viser billeder i skærmens fulde bredde med mulighed for at "bladre" igennem dem.
Cover slideren skal være placeret som det øverste i dit Quix-layout, og på din Article må der ikke være indsat Full Article Image eller tekst. Layout på Article skal desuden være sat til Frontpage (se under Articles > Fanen Options).
Ligesom på Cover Image kan du indsætte tekst, CTA-knap og link på de enkelte billeder i din slider. Sætter du link og tekst ind på et billede, bør du også have link og tekst på de øvrige billeder.
Hvis du vil have din cover slider til at starte med et forskelligt billede fra gang til gang, skal du sætte Randomize first til 2 (eller højere).
Du kan ændre på hvor hurtigt billederne skifter under Autoplay Speed.
Hvis du bruger Cover Slideren øverst på en forside, anbefaler vi 3-5 fem billeder i din slider.
Alle de billeder, du bruger, skal uploades i det samme format. Vi anbefaler 2200x1400 som til Cover Image.
Eksempel / Cover Slider
KEA Employee Info
KEA Employee Info hiver information fra brugerne på siden. Elementet viser kontaktinfo på en enkelt person.
På kea.dk kan elementet hive fra hele vores telefonbog, men på de øvrige sites skal du oprette den person, der skal vises, først. Du kan se, hvordan du opretter personer under Avanceret Web.
Under Styles kan du vælge om overskriften skal være til venstre eller ovenover indholdet. Du kan også sætte en baggrundsfarve på elementet, se hvilke indstillinger du skal indsætte i afsnittet om farvede baggrunde.
Eksempler / Employee Info
Her ser du en Employee Info med heading ovenover.
Her er overskriften
Her er subheading
Her ser du en Employee Info med heading til venstre.
"Heading to the left" bruges primært i standardlayoutet og er designet til at blive sat ind i en fuld bredde kolonne, derfor ser det lidt klemt ud her.
Her er overskriften
Her er subheading
KEA Employee List
Med elementet Employee List kan du lave en liste med flere personer.
Du kan selv udvælge, hvem du vil have vist ved at vælge Manually ud for Select Users.
Hvis du vælger By Department i stedet, bliver alle de brugere, der er tilknyttet den valgte afdeling, vist i griddet/listen. Du sætter afdeling på den enkelte bruger. By Department giver dig mulighed for at redigere i en liste udelukkende ved at tilføje eller fjerne brugere til afdelingen på den enkelte bruger.
Under Styles kan du vælge, om overskriften skal være øverst eller til venstre for indholdet i elementet.
Det er også på fanebladet Styles, du kan indsætte en farvet baggrund på modulet. Du kan se mere om, hvordan dette gøres under afsnittet Farvede bokse.
Grid eller liste
Listen kan enten være sat op som et grid eller som en liste. Alt afhængig af hvad du vælger, har du forskellige valgmuligheder for hvad du vil have vist. Du vælger Grid eller Liste i feltet Layout.
-
Grid
Griddet kan vise telefonnummer og mail på de valgte personer. Derudover vises navn og titel samt billede.
Griddet kan have fra 1-4 ved siden af hinanden, og du skal vælge hvor mange der skal være ved siden af hinanden på de forskellige skærmstørrelser. Vi anbefaler max 2 på Columns (XS) og max 3 på Columns (SM). (MD) og (LG) kan sagtens have 4 ved siden af hinanden.
Den samlede bredde bestemmes af, hvor bred den kolonne, du indsætter Employee List i, er, så hvis du som her sætter griddet ind i en kolonne, der fylder halvdelen af bredden, vil 4 ved siden af hinanden være for meget.
-
Liste
Listen kan vise mere information om de enkelte personer.
På en liste vises altid billede, navn og titel, derudover kan du vælge om følgende skal vises:
- Telefon
- Beskrivelse
- SoMe profiler (Twitter og LinkedIn)
Det hele er noget der hives fra brugeren, så hvis du fx vil have vist en beskrivelse samt have et link til personens Twitter-profil, skal det tastes ind på brugeren. Læs mere om, hvordan du redigerer og opretter brugere under afsnittet Brugere under Avanceret Web.
På kea.dk kan elementet hive fra hele vores telefonbog, men på de øvrige sites skal du oprette den/de person(er), der skal vises, først. Du kan se, hvordan du opretter personer under Avanceret Web.
Eksempler / Employee List
Her ser du et grid i en Employee List med heading ovenover.
Heading above // Grid
Subheading i Employee List
Her ser du en Liste i en Employee Info med heading til venstre.
"Heading to the left" bruges primært i standardlayoutet og er designet til at blive sat ind i en fuld bredde kolonne, derfor ser det lidt klemt ud her. Du kan se et eksempel på en liste med Heading til left på kea.dk/find-en-ekspert.
Heading Left // Liste
Subheading i Employee List
Du kan kontakte KEA Optag på hverdage mellem kl. 10 og 12.
OBS: Synnes uddannelser varetages midlertidigt af de andre studie- og karrierevejledere.
KEA Fact List
Fact List lister en række facts med kort uddybning.
På fanebladet Styles er det vigtigt, at du får justeret på Padding Top og Padding Bottom, så de er sat til Small. Husk også at sætte en Margin top og Margin Bottom på.
Det er også på Styles, du justerer, hvor mange facts der skal vises ved siden af hinanden på de forskellige skærmstørrelser. Husk altid at tjekke, hvordan det ser ud på hjemmesiden.
Fact List har pr. default KEAblå som baggrund og hvid skriftfarve. Du kan ændre dette, hvis du vil, under Styles. Husk at sikre dig kontrasten lever op til tilgængelighedskrav (læs mere under Farver og Tilgængelighed).
Eksempler / Fact List
Her ser du en Fact List med standard baggrund.
Dette er en Fact List
Her ser du en Fact List med #ededed som baggrund og #233249 som fontfarve.
Dette er en Fact List
KEA Image
Image-modulet kan bruges til at sætte billeder ind på din side. Størrelsen på billedet afhænger af bredden på den kolonne, elementet sættes ind i.
Du kan indsætte en Heading og en Caption (billedtekst) til dit billede.
Du har også mulighed for at indsætte en alt-tekst. Hvis det billede, du har indsat, har betydning for forståelsen af indholdet på siden, skal du udfylde alt-teksten med en beskrivelse af billedet.
Du kan placere Heading over billedet eller til venstre for billedet på fanebladet Styles.
Du har også mulighed for at sætte en baggrundsfarve på elementet. Hvis du sætter en baggrundsfarve på billedet, skal du sætte Padding som vist på billedet til højre.
Eksempler / Image
Her ser du et Image element med overskriften til venstre for billedet.
Ofte bruges Image elementet uden overskrift.
KEA Image // heading left
Her ser du et Image element med overskriften ovenover billedet og en KEArød som baggrundsfarve.
Ofte bruges Image elementet uden overskrift.
KEA Image // heading above // background: KEArød
KEA Image Slider
Image Slideren er et element, der kan vise flere billeder, ligesom Cover Slideren. Størrelsen på Image Slideren er til gengæld afhængig af bredden på den kolonne elementet er sat ind i.
Det er en god ide at sørge for, at de billeder, man vil bruge i Image Slider, uploades i det samme format.
På Image Slider kan du ændre på formatet af dine billeder ved at hive i slideren ved Image Height.
Derudover anbefaler vi, at indstillingerne står som vist på billedet til højre.
Hvis du vil have din slider til at skifte automatisk, skal du sætte Autoplay til "Yes", hvorefter du kan indstille hvor hurtigt der skal skiftes. Hvis du sætter Autoplay på, så kan du overveje at fjerne Arrows og Dots i indstillingerne nederst.
Billeder ved siden af hinanden
Du kan også vælge at få vist flere billeder ved siden af hinanden (som på det nederste eksempel til højre), i så fald skal du sætte indstillingerne som vist nedenfor (antallet af slides kan være op til 4 på de forskellige skærmstørrelser):
Eksempler / Image Slider
Her ser du en Image Slider med overskriften til venstre for billedet.
Ofte bruges Image Slider uden overskrift.
Her ser du en Image Slider med overskriften ovenover billedet.
Ofte bruges Image Slider uden overskrift.
Her ser du en Image Slider med overskriften ovenover billedet og flere billeder ved siden af hinanden.
Ofte bruges Image Slider uden overskrift.
KEA Joomla Module
Joomla Module er et element, der kan vise det samme indhold flere steder på din hjemmeside. Det kan fx være et nyhedsfeed, formularer, tekstbokse, events eller lignende.
I nogle tilfælde kan det være en fordel kun at have et sted information skal redigeres, særligt hvis det er information, der skal være på flere sider.
Fx har vi på kea.dk information om, hvornår der er studiestart på alle vores uddannelser. Den information har vi lagt ind i et Joomla Module, så vi kun skal redigere i den information ét sted i stedet for på alle uddannelsessiderne.
Ligesom på mange af de andre moduler kan du sætte en baggrundsfarve på (se indstillingerne på billedet til højre) og du kan vælge om headline skal være ovenover eller til venstre for indholdet.
Selve indholdet i elementet afhænger af hvilken type Module du har oprettet i Joomla.
Modules
For at bruge Joomla Module-elementet så skal du først have oprettet et Module i Joomla. Du kan se mere om hvilke muligheder og hvordan du gør det under afsnittet Modules.
Eksempler / Joomla Module
Her ser du et Joomla Module med overskriften til venstre for indholdet.
Joomla Module // Heading left
Studiestart på uddannelsen
Der er studiestart på uddannelsen d. 26. august 2024 og d. 27. januar 2025.
Her ser du et Joomla Module med overskriften ovenover indholdet og en farvet baggrund.
Joomla Module // Heading above
Studiestart på uddannelsen
Der er studiestart på uddannelsen d. 26. august 2024 og d. 27. januar 2025.
Her ser du et Joomla Module med overskriften ovenover indholdet. Her er indholdet et nyhedsfeed, der viser de seneste to nyheder tagget med El-installatør.
Læs mere om de forskellige indholdstyper i afsnittet Modules.
Joomla Module // nyheder
KEA Presentation Box
Presentation Boxes kan bruges til at lave knapper og elementer, der kan linke til andre sider.
Der findes to typer Presentation Boxes:
- Med Billede
- Uden Billede
Du kan læse mere om de to typer i Accordion'en til højre.
Begge typer Presentation Boxes har nogle af de samme indstillinger.
Du kan indstille hvor høje de skal være (Image Height) og hvordan de skal være placeret i forhold til hinanden, hvis du har flere boxes i det samme element. 1/2 betyder fx, at du får to boxes ved siden af hinanden. Er der flere end to boxes i samme element, vil de komme to og to nedefter.
Se indstillingerne for de to typer Presentation Boxes
-
Presentation Box - No image
Hvis din Presentation Box ikke har billede på, ligner den en "knap". Du skal vælge en baggrundsfarve, fontfarve (husk at tænke på kontrasten - læs mere under Farver og Tilgængelighed) samt størrelsen på fonten.
Fontstørrelsen er en dropdown med flere muligheder. Vi anbefaler, at du bruger pixelstørrelserne i stedet for H2-H5, når du angiver fontstørrelse.
Derudover skal du selvfølgelig indsætte et link.
-
Presentation Box - Image
Hvis du vil have et billede på din Presentation Box, skal du angive:
- Heading
- Størrelsen på din font (Heading Size). Vi anbefaler, at du bruger pixelstørrelserne i dropdown'en fremfor H2-H5.
- Content = en kort tekst der fx beskriver, hvor der linkes til på Presentation Boxen.
- Link
- Image
Du kan se indstillingerne i billedet nedenfor.
Eksempler / Presentation Box
Her ser du et Presentation Box element med to links i uden billede.
Her ser du et Presentation Box element med billeder.
Her ser du et Presentation Box element med flere boxes placeret ved siden af hinanden.
KEA Text
Det meste af teksten på denne side er skrevet i elementet KEA Text.
Du kan se to eksempler nedenfor og på billederne til højre kan du se, hvordan elementet ser ud backend.
Hvis du vil have en "boks" rundt om dit element/give dit element en baggrundsfarve, skal du bruge indstillingerne som vist på billedet til højre. Husk at vælge "Adapt to container - no heading" på fanebladet Styles.
Generelt anbefaler vi, at du bruger "Adapt to container - no heading" på fanebladet Styles, og skriver overskriften ind i tekstfeltet og vælger Heading 2 til overskriften.
Eksempler / Text
Her ser du et KEA Text element med overskriften ovenover og en farvet baggrund.
Her skriver du overskriften, hvis den skal være over
Og her kommer al din brødtekst.
Her ser du et KEA Text element med overskriften til venstre for teksten.
"Heading to the left" bruges primært i vores oprindelige standardlayout og er designet til at blive sat ind i en fuld bredde kolonne, derfor ser det lidt klemt ud her. Du kan se et eksempel på Text med Heading til left på kea.dk/projektsamarbejde.
Vi bruger i stigende grad "Adapt to container - no heading" til KEAs hjemmesider. Du kan se et eksempel på en side, hvor overskrifterne er skrevet ind over teksten på kea.dk/kvalitet-på-kea
Overskrift til venstre
Og her kommer al din brødtekst. Lorem ipsum og så videre.
KEA Text with Facts
Text with Facts er et almindeligt Text-element, hvor du kan tilføje information til venstre (under overskriften).
Text with Facts er designet til sider, der bruger standardlayout med overskrift til venstre og tekst/indhold til højre.
Der er altså ikke en styling-mulighed, der fjerner overskriften til venstre/indsætter overskriften over indholdet.
Du kan vælge ikke at skrive noget i Heading-feltet, og fx indsætte en overskrift i et almindeligt Text element lige ovenover, hvis du ikke ønsker at bruge standardlayoutet, men skal bruge elementet på en forside/landingsside. Vær dog opmærksom på, at facts'ne stadig står til venstre for brødteksten.
Eksempler / Text With Facts
Her ser du et KEA Text with Fact element.
Text with Fact er designet til at blive indsat i en fuld bredde kolonne, så det ser lidt klemt ud her.
Dette er en heading
Her skriver du din brødtekst...
Lorem ipsum dolor sit amet timeam deleniti mnesarchum ex sed alii hinc dolores ad cum.
Her ser du et KEA Text with Fact element, hvor der ikke er sat noget ind i Heading.
Text with Fact er designet til at blive indsat i en fuld bredde kolonne, så det ser lidt klemt ud her.
Her skriver du din brødtekst...
Lorem ipsum dolor sit amet timeam deleniti mnesarchum ex sed alii hinc dolores ad cum.
KEA Video
KEA Video giver dig mulighed for at indsætte YouTube-videoer direkte på siden uden brug af embed-kode.
KEA Video kan få en farvet baggrund på fanebladet Styles. Du kan se indstillingerne på billedet til højre.
Undlad at embedde YouTube-videoer
Selvom du ved hvordan det gøres, så må du ikke embedde direkte fra YouTube, men skal bruge Video elementet, hvis du ønsker at sætte en YouTube-video ind på siden. Elementet er kodet, så det overholder cookies og GDPR. Ved at embedde direkte kan vi ikke være sikre på, at al lovgivning på området overholdes.
Eksempler / Video
Her ser du et KEA Video element, hvor Heading og Lead Text er udfyldt og videoen har en farvet baggrund.
Dette er en Lead text
Her ser du et KEA Video element, hvor der kun er sat videoens ID ind.