Tips & Tricks

Her samler jeg små “how-to’s” og kodestumper, jeg selv bruger i Ark3D, Matterport popups, MPskin overlays, plantegnings-visning, Elementor-tricks og Google Ads justeringer. Siden er lavet som et opslagsværk, så du hurtigt kan kopiere noget, tilpasse 1–2 felter og være kørende.

Sådan bruger du siden

Hver guide består af en kort forklaring og en “Vis koden”-sektion. Koden kan kopieres med én knap, og stederne du typisk skal ændre er markeret tydeligt.

Tip: Indsæt koden i en HTML-widget i Elementor. Hvis du genbruger samme komponent flere steder, så hold navnene ens (fx “ark3d-…”) så du undgår konflikter med temaets styling.

Lav popup på din hjemmeside

Preview af 3D tour – klik for at åbne Matterport

Åbn 3D tour

Matterport-popup via klik-billede

Indsæt dit Matterport-link herunder, så får du en færdig kodeblok du kan kopiere og indsætte på en side.
Koden skla indsættes som en HTML blok på din side.

Generator

Matterport-link Thumbnail-billede (valgfrit) Popup ID (valgfrit)

Færdig kode

Tip: Brug kun én popup pr. side, medmindre du giver dem forskellige Popup ID’er.

<!-- =========================
     Ark3D: Klik-billede -> Popup -> Matterport (optimeret)
     ========================= -->

<!-- MATTERPORT_URL: __MP_URL__ -->
<!-- THUMB_URL: __THUMB_URL__ -->
<!-- POPUP_ID: __POPUP_ID__ -->

<!-- 1) KLIK-BILLEDE (trigger)
     VIGTIGT: href er #POPUP_ID så tema/Elementor ikke åbner nyt vindue -->
<a href="#__POPUP_ID__"
   class="ark3d-thumb"
   data-ark3d-open="__POPUP_ID__"
   aria-label="Åbn 3D tour (Matterport)">
  <img
    src="__THUMB_URL__"
    alt="Preview af 3D tour – klik for at åbne Matterport"
    loading="lazy"
    decoding="async">
  <span class="ark3d-thumb__badge">Åbn 3D tour</span>
</a>

<!-- 2) POPUP (modal) -->
<div class="ark3d-modal" id="__POPUP_ID__"
     role="dialog" aria-modal="true" aria-labelledby="__TITLE_ID__"
     aria-hidden="true">
  <div class="ark3d-modal__overlay" data-ark3d-close></div>

  <div class="ark3d-modal__panel" role="document" tabindex="-1">
    <button class="ark3d-modal__close" type="button" data-ark3d-close aria-label="Luk popup">×</button>

    <span class="asbuilt-badge">3D Tour</span>
    <h2 class="ark3d-modal__title" id="__TITLE_ID__">Interaktiv Matterport-visning</h2>

    <div class="ark3d-embed" style="margin-top:12px">
      <iframe
        src="__MP_URL__"
        title="Matterport 3D tour"
        allow="fullscreen; vr"
        allowfullscreen
        loading="lazy"
        referrerpolicy="strict-origin-when-cross-origin"></iframe>
    </div>

    <div class="ark3d-modal__actions" style="margin-top:12px">
      <a class="btn" href="__MP_URL__" target="_blank" rel="noopener">
        Åbn i nyt vindue
      </a>
      <button class="btn" type="button" data-ark3d-close>Luk</button>
    </div>

    <noscript><!-- fastpixel

      <p class="muted" style="margin-top:12px">
        JavaScript er slået fra. Åbn i stedet:
        <a href="__MP_URL__">Matterport-tour</a>
      </p>
    
// fastpixel --></noscript>
  </div>
</div>

<style>
  .ark3d-thumb{
    display:block;
    position:relative;
    border-radius:16px;
    overflow:hidden;
    border:1px solid #e5e7eb;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    max-width:1100px;
    cursor:pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    text-decoration:none;
    color:inherit;
  }
  .ark3d-thumb img{ width:100%; height:auto; display:block; }
  .ark3d-thumb:hover{
    transform: translateY(-2px);
    box-shadow:0 14px 34px rgba(0,0,0,.10);
  }
  .ark3d-thumb:focus-visible{
    outline:3px solid rgba(0,87,163,.35);
    outline-offset:3px;
  }
  .ark3d-thumb__badge{
    position:absolute; left:14px; bottom:14px;
    background:#0057A3;
    color:#fff;
    padding:10px 14px;
    border-radius:999px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size:11pt;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
    user-select:none;
  }

  .ark3d-modal{ position:fixed; inset:0; display:none; z-index:9999; }
  .ark3d-modal.is-open{ display:block; }

  .ark3d-modal__overlay{
    position:absolute; inset:0;
    background:rgba(11,18,32,.55);
    backdrop-filter:saturate(110%) blur(2px);
  }

  .ark3d-modal__panel{
    position:relative;
    width:min(1100px, calc(100% - 28px));
    margin:min(6vh, 70px) auto 0 auto;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    padding:18px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size:11pt;
    color:#0b1220;
    outline:none;
  }

  .ark3d-modal__title{ margin:12px 0 0 0; font-size:22px; line-height:1.2; }

  .ark3d-modal__close{
    position:absolute; top:10px; right:10px;
    width:38px; height:38px;
    border-radius:12px;
    border:1px solid #e5e7eb;
    background:#fff;
    color:#0057A3;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    font-size:20px;
    line-height:1;
  }

  .ark3d-modal__actions{ display:flex; gap:10px; flex-wrap:wrap; }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid #e5e7eb;
    background:#fff;
    color:#0b1220;
    text-decoration:none;
    cursor:pointer;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size:11pt;
  }

  .ark3d-embed{
    position:relative;
    width:100%;
    padding-top:56.25%;
    border-radius:12px;
    overflow:hidden;
    border:1px solid #e5e7eb;
    background:#000;
  }
  .ark3d-embed iframe{
    position:absolute; inset:0;
    width:100%; height:100%;
    border:0;
  }

  @media (prefers-reduced-motion: reduce){
    .ark3d-thumb, .ark3d-modal__close{ transition:none; }
  }
</style>

<script>
  (function(){
    let lastFocus = null;

    function getOpenModal(){
      return document.querySelector('.ark3d-modal.is-open');
    }

    function openModal(id, opener){
      const modal = document.getElementById(id);
      if(!modal) return;

      lastFocus = opener || document.activeElement;

      modal.classList.add('is-open');
      modal.setAttribute('aria-hidden', 'false');
      document.documentElement.style.overflow = 'hidden';

      const panel = modal.querySelector('.ark3d-modal__panel');
      const closeBtn = modal.querySelector('.ark3d-modal__close');
      (closeBtn || panel).focus();
    }

    function closeModal(modal){
      if(!modal) return;

      modal.classList.remove('is-open');
      modal.setAttribute('aria-hidden', 'true');
      document.documentElement.style.overflow = '';

      if(lastFocus && typeof lastFocus.focus === 'function') lastFocus.focus();
      lastFocus = null;
    }

    document.addEventListener('click', (e)=>{
      const opener = e.target.closest('[data-ark3d-open]');
      if(opener){
        e.preventDefault();
        openModal(opener.getAttribute('data-ark3d-open'), opener);
        return;
      }

      const closeTarget = e.target.closest('[data-ark3d-close]');
      if(closeTarget){
        closeModal(closeTarget.closest('.ark3d-modal'));
      }
    });

    document.addEventListener('keydown', (e)=>{
      const modal = getOpenModal();
      if(!modal) return;

      if(e.key === 'Escape'){
        e.preventDefault();
        closeModal(modal);
      }
    });
  })();
</script>

Direkte links i Matterport

I en Matterport-visning kan du hurtigt hente et delbart link direkte til den position, du står i.

Sådan gør du

Åbn din Matterport-tour i browseren
Klik én gang inde i visningen, så den er “aktiv”
Tryk på tasten U på dit tastatur
Der kommer nu et link frem, som du kan kopiere

Hvad linket bruges til

Linket er perfekt, hvis du vil sende nogen direkte til et bestemt sted i touren, fx “gå hertil og kig op i loftet” eller “se skaden i hjørnet”. Når modtageren åbner linket, starter touren typisk tæt på samme placering/retning som du havde valgt.

Tip

Hvis du vil bruge det professionelt i en mail eller på en hjemmeside, så giv linket en beskrivende tekst, fx: “Åbn touren direkte ved indgangen” eller “Se teknikrummet herfra”.

Åbn 3D tour

Guide: Dokumentér fejl og forhold under renovering med Matterport

Brug denne guide til at dokumentere fejl og forhold, så du kan sende en klar og klikbar liste til udlejer, entreprenør eller håndværker – især når der er tale om fugt, sætningsskader eller større problemer, hvor placering og sammenhæng er afgørende. Tour-link: Åbn Matterport-tour

1) Formål og hvad du får ud af det

Matterport gør dokumentation stærk, fordi du kan vise både placering, sammenhæng og detalje – og dele et link direkte til det punkt, hvor fejlen ses.

Resultatet er en fejlliste med: Fejlkode (F1, F2…), rum, kort beskrivelse, link til præcis position og evt. snapshot.

2) Før du går i gang (hurtig opsætning)

Brug en fast rute: Entré → stue → køkken → bad → værelser → altan/depot.

Lav en simpel fejlliste: F1, F2, F3… med rum + link + kort tekst.

Tip: Start altid ved hoveddøren, så touren er nem at forstå for andre.

3) Sådan dokumenterer du én fejl (trin-for-trin)

Trin 1 – Find fejlen: Stil dig, så både kontekst og fejl kan ses.

Trin 2 – Lav “kom-hertil” link: Klik i visningen → tryk U → kopiér linket.

Trin 3 – Tag snapshot: Tag et skærmbillede og navngiv det med fejlkoden (fx “F3_bad_revne.png”).

Trin 4 – Skriv kort og neutralt: Hvad ses + hvor + omfang (ikke hvorfor).

4) Skabelon du kan kopiere (til hver fejl)

Fejl-skabelon

Fejlkode: F__
Rum: __
Placering: __
Hvad ses: __
Omfang: __
Link (U-link): __
Snapshot (valgfrit): __

5) Tips der gør dokumentationen ekstra stærk

Lav både overblik og detalje: Gem 2 links pr. fejl (1 bredt, 1 tæt på).

Undgå modlys: Flyt dig lidt, så vinduer ikke “vasker” detaljen ud.

Hold samme vinkel: Det gør det lettere at sammenligne.

Brug korte beskrivelser: 1–2 linjer er nok, hvis linket er godt.

6) Tjekliste: typiske fejl i en lejlighed

Vægge: revner, skjolder, malingafskalning, ujævnheder.

Gulve: ridser, buler, fuger, niveauforskelle.

Loft: samlinger, revner, pletter, fugtspor.

Vinduer/døre: skævheder, ridser, lister, lukker dårligt.

Køkken: bordplade, låger, hængsler, fuge ved vask, skader ved hårde hvidevarer.

Bad: fliser, fuger, silikone, misfarvning, fugtspor.

Installationer: stikkontakter, radiatorer, rørgennemføringer, ventilation.

7) Klar mailtekst du kan sende (med links)

Mail-skabelon

Emne: Dokumentation af fejl og mangler – [adresse] – Matterport-links

Hej [navn]
Her er en liste over fejl og mangler dokumenteret i Matterport. Hver fejl har et link, som åbner touren ved punktet, samt evt. snapshot.

F1 – [rum] – [kort tekst] – Link: [indsæt] – Snapshot: [filnavn]
F2 – …
F3 – …

Vh
[dit navn]

Svævende plantegning (skrå 3D-effekt)

Denne opskrift viser et billede (fx plantegning/snittegning) som et “kort”, der svæver let og er vinklet en smule i 3D. Effekten er ren HTML + CSS (ingen plugins) og kan indsættes i en hvilken som helst HTML-blok.

1) Hvad gør løsningen?

– Et centreret kort med 3D-tilt (perspective + rotate).

– Blød glød rundt om kortet (gradient + blur).

– Langsom “svæve”-animation op/ned (kan slås fra ved reduced motion).

– Billedet vises altid helt (ingen beskæring) via object-fit: contain.

2) Sådan bruger du den

1) Indsæt koden i en HTML-blok dér hvor billedet skal vises.

2) Skift billedlink og alt-tekst (markeret i koden).

3) Gem og test på både desktop og mobil.

3) Det du typisk skal ændre

I koden er felterne du typisk ændrer markeret sådan: SKIFT HER

– IMG_URL: link til dit billede
– ALT_TEXT: kort beskrivelse (godt for tilgængelighed/SEO)

4) Justeringer (valgfrit)

Mindre/mere 3D-tilt: ændr rotateX/rotateY/rotateZ i .ark3d-floatcard.

Hurtigere/langsommere svæv: ændr 6.5s i animation.

Mere/mindre glød: ændr blur/opacity i .ark3d-floatcard::before.

Maks højde: justér max-height på .ark3d-floatimg (fx 60vh / 80vh).

5) Kode (fold ud) + kopiér

<!-- Ark3D – “svævende / skrå” billedeeffekt – viser HELE billedet -->
<!-- SKIFT HER: IMG_URL og ALT_TEXT -->

<div class="ark3d-floatwrap">
  <figure class="ark3d-floatcard" aria-label="Svævende billede">
    <img
      class="ark3d-floatimg"
      src="IMG_URL"
      alt="ALT_TEXT"
      loading="lazy"
      decoding="async"
    />
  </figure>
</div>

<style>
  .ark3d-floatwrap{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 11px;
    line-height: 1.3;
    display:flex;
    justify-content:center;
    padding: 18px 0;
  }

  .ark3d-floatcard{
    margin:0;
    width:min(1140px, 100%);
    border-radius: 18px;
    position: relative;
    transform-style: preserve-3d;
    transform: perspective(1100px) rotateX(7deg) rotateY(-12deg) rotateZ(-1.2deg);
    animation: ark3d-float 6.5s ease-in-out infinite;
    overflow: visible;
    background: transparent;
  }

  .ark3d-floatcard::before{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius: 22px;
    background: conic-gradient(from 180deg,
      rgba(0,87,163,.0),
      rgba(0,87,163,.65),
      rgba(42,157,143,.65),
      rgba(0,87,163,.65),
      rgba(0,87,163,.0)
    );
    filter: blur(12px);
    opacity: .75;
    z-index: 0;
  }

  .ark3d-floatcard::after{
    content:"";
    position:absolute;
    inset: 0;
    border-radius: 18px;
    background: radial-gradient(1200px 240px at 20% 0%,
      rgba(255,255,255,.35),
      rgba(255,255,255,0) 55%
    );
    mix-blend-mode: screen;
    z-index: 2;
    pointer-events: none;
  }

  .ark3d-floatimg{
    position: relative;
    z-index: 1;
    display:block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 18px;
    background:#fff;
    transform: translateZ(18px);
    box-shadow:
      0 22px 55px rgba(0,0,0,.22),
      0 2px 0 rgba(255,255,255,.15) inset;
  }

  .ark3d-floatcard:hover{
    transform: perspective(1100px) rotateX(5deg) rotateY(-16deg) rotateZ(-1deg) translateY(-2px);
  }

  @keyframes ark3d-float{
    0%,100%{ transform: perspective(1100px) rotateX(7deg) rotateY(-12deg) rotateZ(-1.2deg) translateY(0); }
    50%{    transform: perspective(1100px) rotateX(8.5deg) rotateY(-9deg)  rotateZ(-1.6deg) translateY(-10px); }
  }

  @media (max-width: 680px){
    .ark3d-floatcard{
      transform: perspective(900px) rotateX(6deg) rotateY(-8deg) rotateZ(-1deg);
    }
    .ark3d-floatimg{ max-height: 62vh; }
  }

  @media (prefers-reduced-motion: reduce){
    .ark3d-floatcard{ animation: none; }
  }
</style>

<!-- Ark3D – “svævende / skrå” billedeeffekt – viser HELE billedet -->
<!-- SKIFT HER: IMG_URL og ALT_TEXT -->

<div class="ark3d-floatwrap">
  <figure class="ark3d-floatcard" aria-label="Svævende billede">
    <img
      class="ark3d-floatimg"
      src="IMG_URL"
      alt="ALT_TEXT"
      loading="lazy"
      decoding="async"
    />
  </figure>
</div>

<style>
  .ark3d-floatwrap{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 11px;
    line-height: 1.3;
    display:flex;
    justify-content:center;
    padding: 18px 0;
  }

  .ark3d-floatcard{
    margin:0;
    width:min(1140px, 100%);
    border-radius: 18px;
    position: relative;
    transform-style: preserve-3d;
    transform: perspective(1100px) rotateX(7deg) rotateY(-12deg) rotateZ(-1.2deg);
    animation: ark3d-float 6.5s ease-in-out infinite;
    overflow: visible;
    background: transparent;
  }

  .ark3d-floatcard::before{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius: 22px;
    background: conic-gradient(from 180deg,
      rgba(0,87,163,.0),
      rgba(0,87,163,.65),
      rgba(42,157,143,.65),
      rgba(0,87,163,.65),
      rgba(0,87,163,.0)
    );
    filter: blur(12px);
    opacity: .75;
    z-index: 0;
  }

  .ark3d-floatcard::after{
    content:"";
    position:absolute;
    inset: 0;
    border-radius: 18px;
    background: radial-gradient(1200px 240px at 20% 0%,
      rgba(255,255,255,.35),
      rgba(255,255,255,0) 55%
    );
    mix-blend-mode: screen;
    z-index: 2;
    pointer-events: none;
  }

  .ark3d-floatimg{
    position: relative;
    z-index: 1;
    display:block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 18px;
    background:#fff;
    transform: translateZ(18px);
    box-shadow:
      0 22px 55px rgba(0,0,0,.22),
      0 2px 0 rgba(255,255,255,.15) inset;
  }

  .ark3d-floatcard:hover{
    transform: perspective(1100px) rotateX(5deg) rotateY(-16deg) rotateZ(-1deg) translateY(-2px);
  }

  @keyframes ark3d-float{
    0%,100%{ transform: perspective(1100px) rotateX(7deg) rotateY(-12deg) rotateZ(-1.2deg) translateY(0); }
    50%{    transform: perspective(1100px) rotateX(8.5deg) rotateY(-9deg)  rotateZ(-1.6deg) translateY(-10px); }
  }

  @media (max-width: 680px){
    .ark3d-floatcard{
      transform: perspective(900px) rotateX(6deg) rotateY(-8deg) rotateZ(-1deg);
    }
    .ark3d-floatimg{ max-height: 62vh; }
  }

  @media (prefers-reduced-motion: reduce){
    .ark3d-floatcard{ animation: none; }
  }
</style>

Husk: Udskift IMG_URL og ALT_TEXT før du bruger koden.

Sidst opdateret: –