Om du har använt Shopify, du känner till Dawn-temat. Det är ett av de gratis teman som är tillgängliga för nya entreprenörer och ett mycket anpassningsbart alternativ för att designa ett unikt skyltfönster.
Dawn-temat kommer med många moduler, som dess vanliga videouppladdningsblock och en bildbanner.
Bildbannern tillåter knappar och text att fungera som förgrund, medan bilden är bakgrunden. Tyvärr tillåter inte videomodulen denna typ av förgrund. Det finns dock sätt att få det bästa av två världar, skapa en videobanner där videon är en bakgrund – och det finns text i förgrunden.
I den här guiden visar vi dig hur du bygger en Gryningstema videobanner för att fånga uppmärksamheten på din hemsida!
Översikt över temat Dawn
Dawn-temat är gratis Shopify tema som används i stor utsträckning av e-handelshandlare. Med en enkel design och enkla inställningar förblir det ett populärt val för att skapa en visuellt tilltalande och elegant butik.
Vad är en videobakgrund/banner och varför ska du använda en på din webbplats?
En videobanner är ett område på en webbsida som presenterar en video som en bakgrund i full bredd, tillsammans med andra element i förgrunden, som knappar och text.
En modul som en videobanner med Dawn-tema erbjuder många fördelar för att förbättra den övergripande webbplatsupplevelsen för besökarna. Här är några viktiga fördelar:
- Berikade visuella element: Genom att inkludera fängslande videor blir webbplatsen mer visuellt tilltalande och fångar besökarnas uppmärksamhet.
- Dynamiskt och engagerande innehåll: Videor förmedlar effektivt informatJon. De kan visa upp produktfunktioner, visa hur man gör eller berätta en fängslande varumärkeshistoria och hålla besökarna engagerade.
- Förbättrat användarengagemang: Videor har kraften att skapa ett bestående intryck på besökarna. Kombinationen av bilder, ljud och rörelse fångar uppmärksamhet och uppmuntrar användare att utforska vidare.
- Effektiv varumärkeskommunikation: En videobakgrund eller banner kan kommunicera varumärkets budskap till kunderna. Det tillåter företag att lyfta fram sina unika värdeerbjudanden, visa upp produkter eller tjänster och etablera en stark varumärkesidentitet.
Genom att utnyttja videons kraft i din webbdesign kan du göra din webbplats mer spännande och öka konverteringarna.
Steg-för-steg-guide för att lägga till en videobakgrund/banner till Dawn-temat
Det finns tekniskt sett fyra sätt att lägga till en videobanner med Dawn-tema (inte alla idealiska):
- Konvertera videon till WebP-videon/bilden format.
- Justera Shopify kod för en vanlig bildbanner, så att den stöder video.
- Konvertera videon till en GIF format.
- Ladda helt enkelt upp en video till videoblocket Shopify, hoppar över tanken på att ha förgrundselement (så att det inte skulle vara en riktig banner).
Det är inte särskilt svårt att modifiera Shopify kod för en standardbildbanner, men processen är onödigt lång med tanke på att du har tillgång till en fil format som WebP. GIF-filer minskar videokvaliteten avsevärt, och alternativ 4 ger oss inte en riktig videobanner.
Därför rekommenderar vi att du konverterar vilken video som helst format du har (.mp4, .mov, .wmv) till WebP format. WebP kombinerar fördelarna med högupplösta JPEG-bilder, videor och GIF:er, genom att du kan producera vackra rörliga videor utan massa och utan att förlora mycket upplösning. Och du kan ladda upp WebP-videor/bilder till en Shopify bild banner.
Gör så här:
Steg 1: Ta din video och konvertera den till WebP-filen Format
Det finns olika gratis "video till WebP" omvandlare online. Prova en sökning online eller använd någon av omvandlarna vi har testat:
Ladda upp din video till det kostnadsfria konverteringsverktyget och välj sedan att konvertera den till WebP format. Spara den nya filen på din dator.
Steg 2: Hitta Dawn-temat i Shopify
Gå till "Onlinebutik" > "Teman".
Om du inte redan har det, installera Dawn-temat. Övrigwise, bör du hitta Dawn-temat betecknat som Shopifys "Aktuellt tema." Klicka på knappen "Anpassa" för att fortsätta.
Steg 3: Lägg till och välj bildbannerblocket
Blocket "Image Banner" läggs till som standard i Dawn-temat. Så du bör kunna klicka på den modulen för att öppna dess inställningar i den vänstra panelen. Det är också möjligt att klicka på själva bildbannern, i den visuella förhandsvisningen till höger. Använd länken "Lägg till block" om du behöver infoga "Bildbannern" från början.
Steg 4: Ladda upp WebP-videofilen
Klicka på knappen "Välj bild" under avsnittet "Första bilden".
Detta laddar ett område för att ladda upp bilder till ditt butiksmediabibliotek. Det är också möjligt att klistra in videowebbadresser, men vi använder uppladdningsfunktionen. Välj knappen "Lägg till bilder" och välj WebP-filen du skapade tidigare. Markera den nyligen uppladdade filen med en bock och klicka sedan på knappen "Klar".
Detta släpper WebP-videofilen i bildbannern, så att du kan redigera allt innehåll i förgrunden också. Klicka på "Spara".
Grattis, du har framgångsrikt lagt till en videobanner med Dawn-tema!
Steg 5: Förhandsgranska videon
Men vänta, det är det wise för att förhandsgranska videon på fronten för att säkerställa att den ser rätt ut, fungerar smidigt och har rätt upplösning.
Tillbaka på instrumentpanelens huvudskärm, klicka på ögonglobsikonen för att "Visa din onlinebutik". Det finns bredvid "Onlinebutik" under avsnittet "Försäljningskanaler".
Framgång!
Anpassa din Dawn-tema-videobanner: Gör den unik till din
Anpassning säkerställer att din video passar perfekt med ditt varumärke och butiksestetik. Så, låt oss kavla upp ärmarna och dyka in, eller hur?
Du måste alltid välja bildbannern för att se dess inställningar. Väl där kan du ändra bildöverläggets opacitet och ändra bannerhöjden. Sedan kan du ändra desktop innehållsposition, vilket ändrar var överläggstexten finns.
Att flytta innehållet och knapppositionerna fungerar för att visa texten och knappen ovanför en del av videon där de är mest synliga.
För ytterligare anpassning har du tillgång till avsnittet "Anpassad CSS".
Och naturligtvis är det möjligt att välja innehållstext eller knapp för att ändra vad de säger och hur de visas.
Tips för att optimera din videofil för maximal hastighet och kompatibilitet
Att ha en imponerande video spelar ingen roll om den saktar ner din webbplats till en genomsökning eller inte visas korrekt på vissa enheter. Det är därför det är en icke förhandlingsbar uppgift att optimera din videofil för maximal hastighet och kompatibilitet. I det här avsnittet kommer vi att dela med oss av några praktiska tips för att säkerställa att ditt videoinnehåll är strömlinjeformat för effektiv laddning och universell uppspelning.
- Använd videofil formats (som WebP) som är allmänt kompatibla med de flesta webbläsare.
- Håll videofilens storlek så liten som möjligt. WebP gör ett fantastiskt jobb med att komprimera video utan att förlora kvalitet.
- Ställ in videons bildförhållande så att det passar bra inom skärmstorleken.
- Satsa på en video med balanserad färg och kontrast som speglar butikens personlighet.
Felsökning av vanliga problem med att lägga till en videobakgrund/banner till Dawn-temat
Ibland, oavsett hur försiktig du har varit, kan problem fortfarande dyka upp när du lägger till Dawn-tema videobanner. Här är några felsökningstips när du stöter på problem:
Inkompatibilitetsproblem
Försök att konvertera videon till en kompatibel fil format som WebP eller använd länken för inbäddning av video.
Videostorleken är för stor
Trimma videon eller komprimera den för att minska filstorleken samtidigt som kvaliteten bevaras.
Videon spelas inte upp automatiskt
Kontrollera att du har aktiverat alternativet "Autoplay" i temainställningarna.
Vår slutsats om att lägga till en videobanner med Dawn-tema
Genom att följa vår steg-för-steg-guide och felsökningstips bör du kunna lägga till Dawn-tema videobanner till Shopify lätt.
Vad är dina tankar? Låt oss veta i kommentarerna om du har lyckats lägga till en videobanner med Dawn-tema!
Kommentarer 0 Responses