Midground1.1.0

Brukerveiledning – Midground

Midground er et WordPress-tema (Midground) og en visuell sidebygger (Midground Builder). Sammen lar de deg bygge sider, topptekster, bunntekster og maler ved å dra elementer rett inn på den ekte siden, gi lagene dybde, legge til bevegelse som styres av rullingen, og vise 3D-modeller – uten at innholdet ditt låses til verktøyet.

Grensesnittet finnes på engelsk og norsk (bokmål) og følger språket i WordPress-profilen din.

1. Kom i gang #

  1. Installer og aktiver temaet Midground (Utseende → Temaer → Legg til → Last opp) og utvidelsen Midground Builder (Utvidelser → Legg til → Last opp). WooCommerce er valgfritt.
  2. Første gang Midground Builder kjører, lager den en enkel topptekst og bunntekst for nettstedet ditt. Du kan endre dem med en gang, eller erstatte dem med en startside.
  3. Valgfritt: aktiver Midground Demo Content og åpne Midground → Startsider.
  4. Åpne en side og velg Rediger med Midground (i sidelisten, i adminlinjen eller i blokkredigeringen), eller lag en ny med Midground → Start → Ny side med Midground.

Første gang du åpner editoren, får du en omvisning på ett minutt. Du kan ta den igjen fra Hjelp-menyen (spørsmålstegnet øverst), der du også finner hurtigtastene og en lenke til denne veiledningen.

Omvisningen viser deg de ulike delene av editoren

Startsider #

Under Midground → Startsider finner du komplette nettsteder du kan starte fra. Hver av dem har med seg sider, topptekst, bunntekst, menyer, farger, skrifter og tekststørrelser:

StartsideForViser
Northlight StudioByråer og porteføljerTekst som stiger opp ord for ord, et rullende tekstbånd, kundelogoer, effekter ved peking, teamside
Ember & OakRestauranter og kafeerMeny i faner, åpningstider, bordbestilling, karusell med retter, gjesteomtaler, popup om private selskaper, kunngjøringslinje
Fieldhouse GoodsNettbutikker (krever WooCommerce)Kategorier, utvalgte produkter, nedtelling til salg, karusell med omtaler, hjelpeside, maler for produkter og butikk
Brightwater PlumbingLokale bedrifterTjenester, faste priser, nøkkeltall som teller opp, omtaler, dekningsområde, side for pristilbud
Tidewater ToursOpplevelser og aktiviteterTurer med booking i et vindu, nedtelling til sesongstart, sidelengs galleri, fremhevede omtaler
LoopwiseApper og programvareSkjermbilde som vipper mot pekeren, kundelogoer, funksjoner, prisplaner, omtaler, en popup i hjørnet
SkumringEt utstillingsvindu på norsk3D-modeller, parallakse og en festet fortelling, en liten butikk med variable produkter, journalinnlegg

Midground → Startsider

Under Hva som skal importeres velger du hvilke deler du vil ha: nettstedstittel, forside og menyer; topptekst, bunntekst og maler; farger, skrifter og tekststørrelser; og om Google-skriftene skal kopieres til nettstedet ditt (da leveres de fra din egen server – de besøkende kontakter aldri Google). Bildene er nøytrale plassholdere: bytt dem ut med dine egne bilder. Den alternative teksten forteller hva hvert bilde bør vise.

Importerer du på nytt, oppdateres de samme sidene i stedet for at det lages kopier, og ditt eget innhold endres aldri. Når du importerer en startside til, tar den nye toppteksten, bunnteksten og malene over, og de forrige blir gjort om til utkast. Fjern flytter sidene, innleggene, produktene og malene fra startsiden til papirkurven, sletter menyene dens og setter tilbake fargene og skriftene du hadde før. Bildene blir liggende i mediebiblioteket.

2. Editoren #

OmrådeHva som er der
Venstre stolpeLegg til (elementer), Lag (treet med alt på siden), Bibliotek (ferdige seksjoner, sideoppsett og komponentene dine), Side (sideinnstillinger, søkemotorer, revisjoner, opprinnelig innhold), Nettsted (topptekst, bunntekst og maler) og Design (farger, skrifter og mer for hele nettstedet)
MidtenLerretet: den ekte siden med tema, topptekst og bunntekst
HøyreInnstillinger for det valgte elementet: Innhold, Stil, Bevegelse, Avansert
ToppenMeny, tittel, skjermstørrelse (datamaskin, nettbrett, mobil), angre/gjør om, forhåndsvisning av bevegelse, Hjelp, lagringsstatus, forhåndsvisning, Lagre utkast og Publiser / Oppdater

Editoren: paneler til venstre, siden i midten og innstillinger for den valgte overskriften til høyre

Legge til elementer: dra et element fra Legg til inn på lerretet (en linje viser hvor det havner), eller klikk på det – da legges det til etter elementet som er valgt. Innhold du slipper rett på siden, får automatisk en seksjon rundt seg. Bibliotek har hele seksjoner (toppseksjoner, fordeler, priser, spørsmål og svar, kontakt, topptekster, bunntekster …) som du kan tilpasse.

Velge: klikk på et element på lerretet eller i Lag. Stien øverst i innstillingene («Seksjon › Beholder › Overskrift») tar deg til de overordnede elementene. Den lille verktøylinjen over det valgte elementet flytter det opp eller ned, velger det overordnede elementet, dupliserer det og sletter det.

Størrelse og avstand ved å dra: et valgt element har håndtak langs kantene. Dra i høyre kant for å endre bredden (den fester seg til halvdeler, tredjedeler og firedeler; hold inne Shift for å velge fritt), i nederste kant for å endre høyden der det gir mening, og i de fargede feltene for å endre den indre avstanden (padding) og avstanden over og under (margin). Hold inne Alt for å endre begge sider samtidig. Dobbeltklikk på et håndtak for å tilbakestille det. Når du drar, endres verdien for skjermstørrelsen du ser på.

Skrive tekst: dobbeltklikk på tekst på lerretet (på mobil: dobbelttrykk) for å skrive rett på siden. Da dukker det opp en verktøylinje med avsnitt og overskriftsnivåer, fet, kursiv, understreking, gjennomstreking, lister, sitat, lenke, justering og farger fra designet ditt. Den samme editoren, med HTML-visning, finner du under Innhold. Når du gjør et avsnitt i et tekstelement om til en overskrift, lager Midground et eget Overskrift-element av det, slik at det kan formgis og flyttes for seg selv.

Lag: hele treet. Dra i radene for å flytte elementer, også inn i og ut av beholdere. Dobbeltklikk (eller F2) for å gi nytt navn. Øyet skjuler et element (det blir værende i dokumentet), og hengelåsen hindrer at det flyttes eller slettes. En grønn prikk viser at et element har egne innstillinger på enkelte skjermstørrelser.

Tastatur: Ctrl+Z / Ctrl+Shift+Z angrer og gjør om, Ctrl+S lagrer, Ctrl+D dupliserer, Ctrl+C / Ctrl+X / Ctrl+V kopierer, klipper ut og limer inn, Delete sletter, og Esc velger det overordnede elementet. I Lag flytter Alt+↑/↓ elementet, Alt+→ legger det inn i elementet over, og Alt+← tar det ut igjen. 1, 2 og 3 bytter mellom datamaskin, nettbrett og mobil. Trykk ? for å se hele listen.

Mobil og nettbrett: på smale skjermer ligger verktøyene i en linje nederst (Legg til, Lag, Innstillinger, Side). Alt fungerer uten å dra: bruk pilene i verktøylinjen til elementet eller Elementhandlinger (…) i innstillingene.

3. Stil, skjermstørrelser og nettstedets design #

Stil har størrelse, oppsett, avstand, typografi, bakgrunn, kantlinje og hjørneradius, plassering, utseende og hover. Tallfelt har en glidebryter, et tall og en enhet (px, rem, %, vh …); du kan også skrive clamp() eller velge en av designverdiene dine. Felt du ikke har fylt ut, viser den gjeldende verdien i grått, så du ser hva du endrer fra.

Skjermstørrelser: velg datamaskin, nettbrett eller mobil øverst før du endrer en verdi. Endringer på nettbrett og mobil gjelder bare der og på mindre skjermer. En grønn prikk markerer verdier som er forskjellige på en skjermstørrelse – ved siden av feltet (klikk på den for å gå til den skjermstørrelsen eller tilbakestille verdien), på knappene for skjermstørrelse når det valgte elementet har egne verdier der, og i Lag. Under Avansert kan du skjule et element på enkelte skjermstørrelser.

Datamaskinvisningen viser alltid siden i full datamaskinbredde (skalert ned når vinduet er smalt), så du ser nøyaktig det besøkende på en datamaskin ser.

Design (venstre stolpe) inneholder designverdiene for hele nettstedet:

Endringene vises med en gang på lerretet; Lagre designverdier tar dem i bruk på alle sider og maler og i temaet.

Design-panelet

4. Elementene #

GruppeElementer
OppsettSeksjon, Beholder, Rutenett, Kolonner, Stabel, Mellomrom
GrunnleggendeOverskrift, Tekst, Bilde, Galleri, Video, Ikon, Knapp, Skillelinje
BlokkerToppseksjon, Kort, Banner, Sitat, Prisliste, Handlingsoppfordring, Fordel, Ikonboks, Ikonbokser, Karusell, Nedtelling, Logobånd, Omtaler
Navigasjon og samhandlingPopup, Kart, Språkvelger, Kunngjøringslinje, Faner, Trekkspill, Meny, Brødsmuler, Søk
Innlegg og dynamiske dataInnleggsliste, Innleggstittel, Innleggsinnhold, Fremhevet bilde, Innleggsinfo, Kommentarer, Arkivtopp
Butikk (WooCommerce)Produkter, Produktinfo, Pris, Kjøpsknapper, Produktbilder, Faner for produktdetaljer, Handlekurvlenke
Dybde, bevegelse og 3DDybdegruppe, Lag, Parallakseseksjon, Rullebevegelse, Festet scene, Horisontal sekvens, 3D-modell, Glidende tekstbånd
VerktøySkjema, Booking, Komponent, Beholdt innhold, Egendefinert HTML, Kortkode

Høydepunkter:

5. Bevegelse #

Marker et element, åpne fanen Bevegelse og velg en effekt. Effektene er gruppert:

For hver effekt velger du når den skal kjøre, styrke (0–200 %) og hvor i rullingen den skal starte og slutte. Diagrammet viser rulleområdet – dra i det for å forhåndsvise. Per enhet demper effekten på nettbrett og mobil (85 % og 60 % som standard; 0 % slår den av). Med Nøkkelbilder (avansert) kan du lage dine egne. Kombiner med en annen effekt legger til en effekt til; bevegelser og rotasjoner legges sammen, skala og gjennomsiktighet ganges.

Besøkende som har bedt om redusert bevegelse på enheten sin, får en rolig side der alt vises i ro. Du kan forhåndsvise dette i editoren fra bevegelsesmenyen øverst, og du kan sette bevegelsen på pause mens du redigerer.

6. Dybde, parallakse og festede scener #

7. 3D-modeller #

Legg til 3D-modell og velg en .glb-fil fra mediebiblioteket (opplastinger kontrolleres, så bare gyldige, selvstendige glTF 2.0-filer slipper gjennom). Still inn kameraet, lyset (studio, mykt dagslys, skumring, natt eller flatt), bakgrunnen, om besøkende kan snu modellen, og hvordan den dreier og beveger seg med rullingen. Ta plakatbilde fra lerretet lagrer et stillbilde av det du ser akkurat nå.

Plakatbildet og beskrivelsen er viktige: de vises mens modellen lastes inn, på enheter uten WebGL og hvis modellen ikke kan lastes. Modeller lastes inn når de nærmer seg skjermen, og tegnes bare på nytt når noe endrer seg. På mobil kan du velge en lettere gjengivelse eller bare plakatbildet. Hold filene små (under 2 MB; Draco- eller meshopt-komprimering lastes raskest). Modeller fra andre nettsteder må tillates av en administrator under Midground → Innstillinger.

8. Bakgrunnsvideo og samtykke #

Seksjoner, toppseksjoner, beholdere og andre bokser kan ha en bakgrunnsvideo (Stil → Bakgrunn): en videofil fra mediebiblioteket, en lenke til en MP4- eller WebM-fil, eller en YouTube- eller Vimeo-adresse. Legg til et plakatbilde: det vises mens videoen lastes inn, for besøkende som foretrekker redusert bevegelse, og der videoen ikke spilles av. Under På mobil velger du mellom videoen, plakatbildet eller ingenting – plakatbildet sparer data og batteri. Overleggsfargen og dekkevnen dens legges oppå videoen.

Videoer fra YouTube og Vimeo (og Google Maps) setter informasjonskapsler, så de lastes bare inn etter at den besøkende har sagt ja. Under Midground → Innstillinger → Videoer fra YouTube og Vimeo velger du:

Videoer fra ditt eget mediebibliotek krever ikke samtykke.

9. Kart, omtaler, skjemaer og booking #

Kart: skriv inn en adresse og velg riktig sted. OpenStreetMap trenger ingen nøkkel. Google Maps bruker din egen nøkkel for Maps Embed API (se avsnitt 22). Begge lastes inn etter at den besøkende har sagt ja, med en lenke for å åpne kartet hos tjenesten i stedet.

Omtaler fra Google eller Trustpilot: legg inn nøkkelen din under Midground → Innstillinger, og velg deretter kilde i Omtaler-elementet og fyll inn Place ID eller Business Unit ID for bedriften din. Serveren din henter omtalene og tar vare på en kopi en stund, så de besøkende kontakter aldri tjenesten. Google gir inntil fem omtaler.

Skjema: viser et skjema laget med Gravity Forms, Contact Form 7, WPForms, Fluent Forms eller Ninja Forms, formgitt etter designet ditt (Gi skjemaet samme stil som nettstedet kan slås av hvis du vil beholde skjemautvidelsens eget utseende). Skjemautvidelsen tar seg fortsatt av innsendinger, e-post og spambeskyttelse.

Booking: en knapp som åpner bookingsiden din i et vindu på nettstedet ditt (eller i en ny fane), eller bookingsiden vist rett på siden – for eksempel Calendly, SimplyBook.me, Timely, Bókun eller FareHarbor. Du kan også vise bookingskjemaet fra en bookingutvidelse for WordPress: Amelia, Bookly, Simply Schedule Appointments, BookingPress eller LatePoint. Bookingsider fra andre tjenester lastes også først inn etter at den besøkende har sagt ja, når samtykke kreves.

10. Popuper og kunngjøringslinjen #

En Popup kan inneholde hva som helst og åpnes fra en lenke (til popupens adresse, som vises på lerretet, for eksempel #private-dining), etter noen sekunder, når den besøkende har rullet et stykke ned på siden, eller når den besøkende er på vei til å forlate siden (på datamaskin). Den kan ligge midt på skjermen, i et hjørne eller nederst, og du velger hvor ofte en besøkende skal få se den igjen. Popuper er ekte dialogvinduer: de kan lukkes med Esc, holder tastaturet inne i dialogen og gir fokuset tilbake når de lukkes.

Kunngjøringslinje er en smal linje med en kort melding, et valgfritt ikon og en lenke – vanligvis øverst i toppteksten. Besøkende kan lukke den; du velger hvor mange dager den skal holde seg lukket.

11. Komponenter #

Marker et element og velg Lagre som komponent (Ctrl+Shift+S eller Elementhandlinger). Sett inn komponenten hvor som helst fra Bibliotek → Komponenter. Når du endrer komponenten, endres alle kopiene. I én enkelt kopi kan du endre tekster og innstillinger lokalt og tilbakestille dem igjen. Koble fra kopien gjør en kopi om til vanlige elementer som ikke lenger følger komponenten.

12. Topptekst, bunntekst og maler #

Toppteksten og bunnteksten er også maler. Du kommer til dem på tre måter:

I topptekstens innstillinger holder Fest øverst ved rulling den synlig. På en side med et stort bilde eller en film øverst slår du på Topptekst over første seksjon (gjennomsiktig topptekst) i sidens innstillinger: toppteksten ligger da gjennomsiktig over den første seksjonen, med lys tekst, og får tilbake sin egen bakgrunn så snart besøkende ruller.

Midground → Maler har også maler for enkeltinnlegg, sider, arkiver og bloggen, søkeresultater, «fant ikke siden», produkter og butikken. En mal redigeres som en side og forhåndsvises med ekte innhold (Mal → Forhåndsvis med). Elementene under Innlegg og dynamiske data, og dynamiske felt i tekster og lenker, fyller inn innholdet.

Hvor den vises: legg til regler («Vis på» og «Unntatt»): hele nettstedet, forsiden, alle innlegg, ett innlegg, innlegg i en kategori, arkiver og så videre. Den mest spesifikke regelen vinner (ett innlegg slår alle innlegg, som igjen slår hele nettstedet). Når to maler er like spesifikke, avgjør Prioritet; ellers brukes den som sist ble endret, og begge viser en advarsel. En mal tas i bruk når den er publisert.

13. Søkemotorer (SEO) #

Side → Søk og deling har tittelen og beskrivelsen som vises i søkeresultater, et bilde til deling i sosiale medier, Skjul denne siden for søkemotorer og en forhåndsvisning av hvordan treffet kan se ut. Midground fyller inn fornuftige standardverdier fra siden (den første overskriften og det første avsnittet). Når Yoast SEO, Rank Math eller SEOPress er aktiv, trer fanen til side og viser til den utvidelsen i stedet – disse utvidelsene leser Midground-innholdet på siden i analysen sin.

Spørsmål og svar (et Trekkspill med Marker som FAQ for søkemotorer) blir også beskrevet for søkemotorene.

14. Nettsteder på flere språk #

Med WPML eller Polylang får hver oversettelse av en side sitt eget Midground-dokument. En ny oversettelse starter som en kopi av det opprinnelige oppsettet; åpne den og velg Rediger med Midground for å oversette tekstene. Senere endringer på ett språk overskriver ikke de andre. Maler og komponenter kan oversettes på samme måte, og fargenavn sendes til strengoversettelsen i WPML. Elementet Språkvelger viser språkene som navn eller koder, på linje eller som en nedtrekksliste.

15. Kundemodus #

For byråer: under Midground → Innstillinger → Kundemodus velger du hvilke roller (for eksempel Redaktør) som bare kan endre innhold. Brukere med disse rollene kan endre tekster, bilder, lenker og lister i Midground, men ikke oppsett, stiler, bevegelse eller sideinnstillinger, og låste elementer forblir låst. Administratorer har alltid full tilgang.

16. Eksport og import #

Midground → Verktøy eksporterer sider, maler og komponenter – eventuelt sammen med designverdiene for nettstedet – til en fil, og importerer en slik fil på et annet nettsted. Bilder kan lenkes til det opprinnelige nettstedet eller kopieres inn i mediebiblioteket på det nye nettstedet. Komponenter blir med og kobles riktig; maler kommer inn som utkast, så ingenting endres før du er klar. En enkelt side kan også eksporteres fra editoren (Midground-meny → Eksporter til en fil).

17. KI-assistenten #

KI-assistenten er av som standard. En administrator kan slå den på under Midground → Innstillinger → KI-assistent, velge tjeneste (OpenAI, Anthropic eller Google Gemini) og legge inn sin egen API-nøkkel for den. Bruken faktureres til den kontoen; Midground har ingen egne nøkler.

Når assistenten er på, får tekstfeltene en liten knapp med et gnistrende ikon: Forbedre, Kortere, Vennligere, Mer formell, Rett stavefeil og grammatikk, Oversett til et annet språk, eller Skriv nytt ut fra en kort beskrivelse. For bilder kan du velge Beskriv bildet for å få forslag til alternativ tekst. Du ser alltid forslaget først og velger Bruk denne eller Prøv igjen. Bare teksten i det feltet (eller det bildet) sendes, og bare når du ber om det.

18. WooCommerce #

Når WooCommerce er aktiv, får du butikkelementene og maler for produkter og butikken. De bruker ekte produktdata, også for variable produkter (prisen følger den valgte varianten). Uten WooCommerce vises ingenting av dette for de besøkende, og sidene fungerer som før.

Midground holder skriptene og stilene til WooCommerce borte fra sider som ikke har butikkinnhold, slik at de lastes raskere (Midground → Innstillinger → WooCommerce, på som standard). Butikken, handlekurven, kassen, kontosiden og alle sider med et butikkelement beholder alt.

19. Lagring, revisjoner og sikkerhetsnettet #

20. Sider som allerede har innhold #

Når en side har innhold fra blokkredigeringen eller den klassiske redigeringen, kan du velge Konverter til redigerbare elementer, Behold det som én blokk eller Start med tom side. Konverteringen viser en rapport over hva som blir redigerbart (overskrifter, tekst, bilder, lister, sitater, knapper, kolonner, grupper, coverblokker, video …) og hva som beholdes nøyaktig som det var (ukjente blokker, kortkoder, innebygd innhold) i et Beholdt innhold-element. Du ser resultatet før noe blir lagret. Det opprinnelige innholdet tas vare på første gang du lagrer, og kan gjenopprettes nøyaktig med Side → Opprinnelig innhold → Gjenopprett opprinnelig innhold.

Hvis en Midground-side senere endres i en annen editor, merker Midground det neste gang du åpner den, og lar deg importere endringene.

21. Hvis utvidelsen eller temaet slås av #

22. Innstillinger, API-nøkler og lisens #

Midground → Innstillinger har innholdstypene du kan bygge med Midground, største tillatte opplasting av 3D-modeller og hvilke verter som er tillatt for eksterne modeller, innlasting av WooCommerce-skript, kundemodus, samtykke for videoer fra andre tjenester, KI-assistenten og hva som skjer når utvidelsen slettes.

Dine egne API-nøkler: funksjoner som bruker en tjeneste fra et annet selskap, trenger en nøkkel fra din egen konto hos den tjenesten – Midground har ingen egne nøkler og sender ingenting noe sted med mindre du bruker en slik funksjon:

NøkkelBrukes av
Google Maps (Maps Embed API)Kart-elementet med Google Maps. Nøkkelen er synlig på siden, som med alle Google-kart – begrens den til domenet ditt og til Maps Embed API.
Google-omtaler (Places API)Omtaler-elementet med Google. Brukes bare av serveren din.
TrustpilotOmtaler-elementet med Trustpilot. Krever et Trustpilot-abonnement med API-tilgang.
OpenAI, Anthropic, Google GeminiKI-assistenten. Bruken faktureres til kontoen din.

Nøklene lagres på serveren din og vises aldri i sin helhet igjen; editoren får bare vite om en nøkkel er lagt inn.

Lisens: skriv inn lisensnøkkelen din og velg Aktiver for å få oppdateringer. Midground fortsetter å virke hvis lisensen utløper; det er bare oppdateringene som stopper til du fornyer. Fjern fra dette nettstedet frigjør nøkkelen til et annet nettsted.

23. Tilgjengelighet: gode vaner #

Midground lager semantisk HTML og synlig tastaturfokus, og tar hensyn til redusert bevegelse. Du hjelper til ved å bruke overskriftsnivåene i riktig rekkefølge, gi bilder alternativ tekst (eller merke dem som dekorative), beskrive 3D-modeller, sørge for god nok kontrast (bruk Lenkefarge for lenker på mørk bakgrunn) og aldri legge viktig informasjon bare i en animasjon, en video eller en 3D-visning.