Hvis du har brukt Shopify, du kjenner til Dawn-temaet. Det er et av de gratis temaene som er tilgjengelige for nye gründere, og et svært tilpassbart alternativ for å designe en unik butikkfront.
Dawn-temaet kommer med en rekke moduler, som standard videoopplastingsblokk og et bildebanner.
Bildebanneret gjør at knapper og tekst kan tjene som forgrunn, mens bildet er bakgrunnen. Dessverre tillater ikke videomodulen denne typen forgrunn. Det finnes imidlertid måter å få det beste fra begge verdener, ved å lage et videobanner der videoen er en bakgrunn – og det er tekst i forgrunnen.
I denne veiledningen viser vi deg hvordan du bygger en Daggry-tema videobanner for å fange oppmerksomhet på hjemmesiden din!
Oversikt over Dawn-temaet
Dawn-temaet er gratis Shopify tema som er mye brukt av netthandelsforhandlere. Med et enkelt design og enkle innstillinger er det fortsatt et populært valg for å sette opp en visuelt tiltalende og elegant butikk.
Hva er en videobakgrunn/banner, og hvorfor bør du bruke en på nettstedet ditt?
Et videobanner er et område på en nettside som presenterer en video som en bakgrunn i full bredde, sammen med andre elementer i forgrunnen, som knapper og tekst.
En modul som et videobanner med Dawn-tema gir en rekke fordeler for å forbedre den generelle nettsideopplevelsen for besøkende. Her er noen viktige fordeler:
- Berikede visuelle elementer: Ved å inkludere fengslende videoer, blir nettstedet mer visuelt tiltalende, og fanger oppmerksomheten til besøkende.
- Dynamisk og engasjerende innhold: Videoer formidler effektivt innformation. De kan vise frem produktfunksjoner, demonstrere fremgangsmåter eller fortelle en fengslende merkevarehistorie, og holde besøkende engasjert.
- Forbedret brukerengasjement: Videoer har kraften til å skape et varig inntrykk på besøkende. Kombinasjonen av bilder, lyd og bevegelse fanger oppmerksomhet og oppmuntrer brukere til å utforske videre.
- Effektiv merkevarekommunikasjon: En videobakgrunn eller banner kan kommunisere merkevarens budskap til kundene. Det lar bedrifter fremheve sine unike verdiforslag, vise frem produkter eller tjenester og etablere en sterk merkevareidentitet.
Ved å utnytte kraften til video i nettstedets design, kan du gjøre nettstedet ditt mer spennende og øke konverteringene.
Trinn-for-trinn-veiledning for å legge til en videobakgrunn/banner til Dawn-temaet
Det er teknisk sett fire måter å legge til et Dawn-tema-videobanner (ikke alle ideelle):
- Konvertering av videoen til WebP-videoen/bildet format.
- justere Shopify kode for et vanlig bildebanner, slik at det støtter video.
- Konvertere videoen til en GIF format.
- Bare last opp en video til videoblokken Shopify, hopper over ideen om å ha forgrunnselementer (slik at det ikke blir et ekte banner).
Det er ikke så veldig vanskelig å modifisere Shopify kode for et standard bildebanner, men prosessen er unødvendig lang med tanke på at du har tilgang til en fil format som WebP. GIF-er reduserer videokvaliteten betraktelig, og alternativ 4 gir oss ikke et ekte videobanner.
Derfor anbefaler vi å konvertere hvilken som helst video format du har (.mp4, .mov, .wmv) til WebP format. WebP kombinerer fordelene med høyoppløselige JPEG-bilder, -videoer og GIF-er, ved at du kan produsere vakre bevegelige videoer uten masse, og uten å miste mye oppløsning. Og du kan laste opp WebP-videoer/bilder til en Shopify bildebanner.
Dette er hvordan:
Trinn 1: Ta videoen din og konverter den til WebP-filen Format
Det finnes forskjellige gratis "video til WebP"-konverterere på nettet. Prøv et søk på nettet, eller bruk en av omformerne vi har testet:
Last opp videoen til det gratis konverteringsverktøyet, og velg deretter å konvertere den til WebP format. Lagre den nye filen på datamaskinen din.
Trinn 2: Finn Dawn-temaet i Shopify
Gå til «Nettbutikk» > «Temaer».
Hvis du ikke allerede har det, installer Dawn-temaet. Annenwise, bør du finne Dawn-temaet utpekt som Shopify«Gjeldende tema». Klikk på "Tilpass"-knappen for å fortsette.
Trinn 3: Legg til og velg bildebannerblokken
"Image Banner"-blokken legges til som standard i Dawn-temaet. Så du bør kunne klikke på den modulen for å åpne innstillingene i venstre panel. Det er også mulig å klikke på selve bildebanneret, i den visuelle forhåndsvisningen til høyre. Bruk koblingen "Legg til blokk" hvis du trenger å sette inn "Bildebanner" fra bunnen av.
Trinn 4: Last opp WebP-videofilen
Klikk på "Velg bilde"-knappen under "Første bilde".
Dette laster et område for å laste opp bilder til butikkmediebiblioteket. Det er også mulig å lime inn videonettadresser, men vi bruker opplastingsfunksjonaliteten. Velg "Legg til bilder"-knappen, og velg WebP-filen du opprettet tidligere. Merk den nylig opplastede filen med et hakemerke, og klikk deretter på "Ferdig"-knappen.
Dette slipper WebP-videofilen inn i bildebanneret, slik at du også kan redigere innholdet i forgrunnen. Klikk "Lagre".
Gratulerer, du har lagt til et videobanner med Dawn-tema!
Trinn 5: Forhåndsvis videoen
Men vent, det er det wise for å forhåndsvise videoen på frontend for å sikre at den ser riktig ut, kjører jevnt og har riktig oppløsning.
Tilbake på dashbordets hovedskjerm, klikk på øyeeplet-ikonet for å "Se nettbutikken din." Det ligger ved siden av «Nettbutikk», under delen «Salgskanaler».
Suksess!
Tilpasse ditt Dawn-tema-videobanner: Gjør det unikt til ditt
Tilpasning sikrer at videoen din passer perfekt til merkevaren og butikkens estetikk. Så, la oss brette opp ermene og dykke inn, skal vi?
Du må alltid velge bildebanneret for å se innstillingene. Når du er der, kan du endre opasiteten på bildeoverlegget og endre bannerhøyden. Deretter kan du endre desktop innholdsposisjon, endre hvor overleggsteksten er plassert.
Flytting av innholdet og knappeposisjonene fungerer for å vise teksten og knappen over et område av videoen der de er mest synlige.
For ytterligere tilpasning har du tilgang til en "Custom CSS"-seksjon.
Og selvfølgelig er det mulig å velge innholdsteksten eller knappen for å endre hva de sier og hvordan de vises.
Tips for å optimalisere videofilen din for maksimal hastighet og kompatibilitet
Å ha en imponerende video spiller ingen rolle om den senker nettstedet ditt til en gjennomgang eller ikke vises riktig på enkelte enheter. Det er derfor å optimalisere videofilen for maksimal hastighet og kompatibilitet er en ikke-omsettelig oppgave. I denne delen vil vi dele noen nyttige tips for å sikre at videoinnholdet ditt er strømlinjeformet for effektiv lasting og universell avspilling.
- Bruk videofil formats (som WebP) som er bredt kompatible med de fleste nettlesere.
- Hold videofilstørrelsen så liten som mulig. WebP gjør en fantastisk jobb med å komprimere video uten å miste kvalitet.
- Still inn videoens sideforhold slik at den passer godt innenfor skjermstørrelsen.
- Velg en video med balansert farge og kontrast som gjenspeiler butikkens personlighet.
Feilsøking av vanlige problemer med å legge til en videobakgrunn/banner til Dawn-temaet
Noen ganger, uansett hvor forsiktig du har vært, kan det fortsatt dukke opp problemer når du legger til Dawn-tema-videobanner. Her er noen feilsøkingstips når du støter på problemer:
Inkompatibilitetsproblemer
Prøv å konvertere videoen til en kompatibel fil format som WebP eller bruk lenken til videoinnbygging.
Videostørrelsen er for stor
Trim videoen eller komprimer den for å redusere filstørrelsen samtidig som kvaliteten bevares.
Videoen spilles ikke av automatisk
Sjekk at du har aktivert "Autoplay"-alternativet i temainnstillingene.
Vår konklusjon om å legge til et Dawn-tema-videobanner
Ved å følge vår trinnvise veiledning og feilsøkingstips, bør du kunne legge til Dawn-temavideobanner til Shopify enkelt.
Hva er dine tanker? Gi oss beskjed i kommentarfeltet hvis du har lykkes med å legge til et Dawn-tema-videobanner!
Kommentar 0 Responses