Vackra målsida mallar. Målsidesmallar

Hallå. Ensidiga sajter är fortfarande populära, och det av goda skäl. De har ett antal fördelar jämfört med fullfjädrade flersidiga sajter. På en ensidig webbplats (även känd som en målsida) koncentrerar en person sig på en idé, en produkt, som gör att han kan studera ditt erbjudande utan distraktion och är mer villig att lämna en förfrågan.

"Okej", säger du, "jag bestämde mig för att göra mig själv till en målsida, men jag förstår ingenting om programmering." Och det är inget problem. Nu finns det många verktyg för att skapa en professionell webbplats utan att gräva i koden. En av dessa är det populära CMS WordPress med WPBackery- eller ELementor-konstruktorn.

I den här artikeln har jag tillhandahållit coola WordPress-målsidesmallar som är lämpliga för företag, försäljning av varor, byråer, frilansare och alla andra ämnen. Sådana mallar kan och bör trots allt anpassas för att passa dig själv och ditt erbjudande.

Många mallar använder trendiga klockor och visselpipor, som parallaxeffekter, platt design, helskärmsfoton och videor. Anpassning för mobila enheter ingår i varje mall.

Nog med diskussion, låt oss titta på urvalet!

P.s. Om du vill veta mer i detalj vad en landningssida är, då diskuterade jag den här frågan i detalj och gav 27 exempel på landningssidor.

Alla mallar presenteras från den populära webbutiken ThemeForest. Du kan se andra samlingar.

Ett urval av 40 premiummallar för att skapa en målsida på CMS WordPress1. Bro

För mig är detta en toppmall eftersom den har 376+ demos om olika ämnen. Med denna mall kan du förmedla helt andra känslor. Kraftfull och intuitiv.

Detta otroliga tema har ett anpassningsbart reglage, helt anpassningsbara rubriker, megamenyer, videobakgrunder, fast eller klibbig rubrik, olika rubriklogotyper, interaktiva element, 7 olika portföljlayouter och mycket mer, vilket ger oändliga möjligheter.

Gör en unik presentation av din produkt eller ditt erbjudande. Det finns visuella instruktioner i texten och även videoinstruktioner.

2. Den 7

Ett avancerat och unikt mallsystem som gör att du inte bara kan skapa en målsida utan även utan ytterligare inställningar integrera det på huvudprojektets webbplats. I mallen kan du hitta många färdiga stilar för block som är efterfrågade på landningssidor - teampresentation, galleri, portfolio. Vackra sidförladdningseffekter är också tillgängliga.

Förresten, The7 finns nu på min blogg.

3.BeTheme

Betheme är den största mallen vad gäller funktionalitet och antal förinställda layoutalternativ. Idag finns det över 400+ demomålsidor baserade på detta tema, du kan välja vilken som helst och anpassa den efter dina behov. Färdiga målsidor på Betheme använder aktivt:

• rullningseffekter - från parallax till animerade transformationer av designelement
• bakgrundsvideor i helskärm
• "sociala" knappar
• animerade räknare
• ansökningsformulär online
• portföljsektioner
• avsnittet "Våra anställda"

Några fler demos:

Temauppdateringar utförs automatiskt, pluginuppdateringar utförs med en knapptryckning. Demosidorna använder Revolution Slider. Mallen erbjuder 5 alternativ för sidlayout, 20 anpassade rubriker, ett obegränsat antal stilar för Google maps och många snygga ikoner.

Muffin Builder-verktyget hjälper dig att skapa vilken design som helst utan kunskap om webbutveckling. Om så önskas kan du lägga till css-regler och js-skript utan att påverka huvudmallkoden.

Ronneby har hög prestanda och en utökad tillvalspanel. De bästa premium-pluginsna för att skapa WordPress-målsidor har lagts till i mallen. Mallutvecklarna ägnar särskild uppmärksamhet åt användarsupport - alla frågor besvaras med ett snabbt svar som beskriver hur man löser problemet. Temat är redan lokaliserat för två språk, men översättningsfiler är också bifogade, så att du kan organisera flerspråkigt stöd för webbplatser.

Ett annat exempel på demo:

5. Jupiter

Flexibel och samtidigt lätt att anpassa mall. Innehåller 72 så kallade skinn, på alla möjliga ämnen. Bekväm admin. panelen kommer även en nybörjare att tycka att det är lätt att förstå sidbyggaren och inställningarna.

Det finns praktiska tutorials med 240 sidor och 20 videotutorials om hur du gör din webbplats fantastisk!)

Jupiter-mallen är också anpassad för SEO. Google PageSpeed ​​​​tester visar bra resultat, vilket betyder att sökmotorer kommer att älska din webbplats.

Mallen är ren, snygg och använder högkvalitativ typografi. På grund av användningen av visuella effekter, som parallax, visar sig temat vara livligt och det är mycket trevligt att titta på en sådan webbplats.

6. WoodMart

En av de största WordPress-samlingarna. Mallar är skrivna av professionella webbprogrammerare, och design ritas av kvalificerade specialister inom visuella och UX-lösningar. Tack vare detta kan du säkert installera vilken mall som helst, var och en är redo att användas på din dator, mobiltelefon, läsplatta. Premium plugins ingår:

WPBackery

Slider Revolution

Utmärkt anpassning med WooCommerce (onlinebutik)

7. Brooklyn

Brooklyn har 16 demoskins på olika teman. Sidornas moderna stil, kombinationen av bilder och typsnitt ger elegans till alla webbplatser där detta tema är installerat. Portföljblocket är vackert designat. Mallen är perfekt för byråer och affärsföretag. Mallarna är gjorda i mörka färger, vilket ger förtroende och inger förtroende. Mallen är lyhörd och ser bra ut på alla enheter.

En smidig och enkel mall som inte lämnar någon oberörd. Typografi och gränssnittselement av hög kvalitet gör att den här mallen ser underbar ut. Nominerad och vinnare av olika välkända tävlingar och betyg, såsom awwwards. Har mer än 30+ skal med olika teman att välja mellan

Inte bara webbplatsen utan även bilderna är anpassade för mobila enheter för att se mer bekväma ut för besökarna.

9. H-kod

Mallen är ny, men har redan bevisat sig själv. Den har 8 teman (flersidor, landning, företag, portfölj, blogg, e-handel, stubbar) med 3-12 skal i varje. Förutom sin skönhet och snygghet har den här mallen helt enkelt en arsenal av olika widgets och element. Du kan göra din målsida vacker och funktionell. Behöver du en reglage? Snälla du. Visa portfölj, recensioner, fördelar? Och det är.

10. Infödd

Native är ett kraftfullt verktyg för att marknadsföra en start. WordPress-målsidesmallar baserade på temat använder olika parallaxeffekter för att flytta mellan semantiska block av webbplatsen. Utökad dokumentation och videohandledningar hjälper nybörjare CMS-användare att snabbt förstå administrationspanelens funktionalitet. Visual Composer, Layer Slider och Slider Revolution plugins ingår gratis applikation till mallen.

11. Framträdande

Salient är ett mångsidigt tema med en responsiv design som ofta väljs av . Premiumtypografi och parallaxeffekter som visas när du rullar på sidan hjälper till att förbättra intrycket av målsidan. Bildhastighetsoptimering säkerställer smidiga animerade övergångar mellan innehållsblock. Mallen använder adaptiva bildstorlekar, vilket hjälper sidor att laddas snabbt och sparar trafik.

12. TheGem

TheGem är ett modernt tema för kreativa projekt, SEO-optimerat och kompletterat med en "responsiv" layout. Sidornas lätta vikt, hastigheten på deras laddning och genomtänkta UX garanterar mallens höga prestanda. Om du behöver marknadsföra ditt företag med hjälp av en målsida är det värt att köpa den här mallen, om så bara på grund av dess SEO-vänliga kod, som säkerställer höga positioner i Googles resultat. De 11 tillgängliga demoversionerna av målsidorna tar hänsyn till olika projekts behov.

Designelement för en webbplats på TheGem anpassas med hjälp av Visual Composer-plugin. Visningen av en stor mängd innehåll i landningsblock (portfölj, recensioner, tjänster) organiseras genom laddning - automatiskt eller "med knapp", såväl som genom en skjutreglage för flikbyte. Mallen ger 6 animeringsalternativ för att ladda avsnittskomponenter som visas när du rullar innehållet på målsidan. Bakgrunden för innehållsblock kan vara videor från vimeo och youtube eller härledda från filsystem webbplats med html5.

13. Marketing Pro

Marketing Pro är en mall designad med konvertering, marknadsföring och SEO i åtanke. Var och en av de 9 demosidorna på den skapas med hänsyn till egenskaperna hos en specifik marknadsföringsnisch. Som en bonus till den adaptiva målsidedesignen finns det stiliserade mallar för evenemangsorganisationsblock.

Oshine är bland de mest sålda kreativa teman. Med en vacker design och kraftfull funktionalitet kan den här mallen användas för att skapa målsidor för kreativa projekt och företag. Femtio moduler för att anpassa webbplatsens utseende, som var och en har designats noggrant, hjälper till att få perfekta resultat. Alternativet "ångra/gör om" och möjligheten att tilldela "snabbtangenter" till vissa åtgärder förenklar installationsprocessen.

15. Jevelin

Jevelin är en mall med en premium responsiv design som gör det enkelt att skapa målsidor och ensidiga sajter på Wordpress. Temat kommer att hjälpa till att starta projektet på kort tid. Tack vare en mängd olika anpassningsverktyg - 9 header-alternativ i olika layouter, 40 unika element, som var och en kan utformas individuellt, inbyggd funktionalitet för att organisera reposts på sociala nätverk, 6 stillösningar för att designa portföljsektionen - anpassa skinn är snabbare än någonsin.

16. Kalium

Kalium är ett ämne som företrädare för olika yrkesområden vänder sig till för att få en webbplats för att marknadsföra sina tjänster. Särskild vikt vid webbdesign på Kalium läggs på typografi - ett specialiserat bibliotek för hantering av typsnitt är ansvarigt för det. Mallen kan använda 4000 typsnitt - Google, Typekit, Font Squirrel, premium och custom (laddas upp av användaren).

17. Inkommande

Inbound är en mall som kan underlätta skapandet av ensidiga webbplatser för applikationer, e-böcker, videokurser och liknande produkter. Designanpassning görs med hjälp av den visuella målsidesgeneratorn Landing Page Builder. Mallen låter dig också tilldela en minisektion i målsidesformat till varje marknadsförd produkt på en webbplats och kan användas för produktkategorisektioner i WooCommerce.

18. Intakt

Intact är ett flervalstema som är utformat för att hjälpa dig att lösa dina onlineaffärsproblem. Den innehåller så viktiga komponenter i en modern målsida som: block " Tariffplaner" och "Company Employees", ett reglage med recensioner, uppsättningar av tematiska ikoner, prenumerationsformulär, en onlinekonsult.

19. Komet

Comet är en helt responsiv pixel-perfekt mall för Visual Composer och . Användare erbjuds 5 skal för målsidor, som implementerar följande effekter: textreglage, parallax, bakgrundsvideo - importerad från youtube eller inbyggd i html5, animerad zoomreglage. Nya användare kommer lätt att förstå temainställningarna när skapa wordpress målsidor - instruktioner och videolektioner finns tillgängliga online.

20. LeadEngine

Ett universellt WordPress-tema som har allt du behöver för att skapa en målsida:

• 200 block att "montera" till en mall i valfri ordning;
• anpassningsförmåga i alla skeden;
• 35 helt designade sidor - du kan helt enkelt ändra text och foton;
• hög nedladdningshastighet - 94 % snabbare än genomsnittet.

Utvecklingsdesigner kan utvärderas innan köp. Färgscheman och inställningar ändras i den visuella redigeraren. Författarna lovar stöd när som helst.

Utvecklaren erbjuder en webbplatsmall i olika ämnen - från byggverksamhet till veterinärtjänster. Enkelt och effektiv landning sida hjälper dig att förmedla dina förmåner, arbetsvillkor och andra nödvändiga detaljer till potentiella kunder. Designen är responsiv och ser bra ut på alla enheter, från Retina-skärmar till mobila prylar. Det finns plugins för portfölj, öppettider, kalender, samt anpassade ikoner.

22. Inkubator

"Ett idealiskt tema för en startup", säger författarna om sin utveckling. Den lätta, minimalistiska designen från 2020 är lämplig för nätbutiker, eventbyråer och många andra typer av företag för visitkort eller vidareutveckling till ett större projekt. Ingår:

• visuell designer - detaljer ändras online;
• mobil anpassningsförmåga;
• WooCommerce är det bästa plugin för onlinebutiker;
• stöd för alla språk.

23. Phlox Pro

En mall för flera mallar med trettio demos där du bara kan ersätta den önskade texten. De erbjuder också mer än 90 mallar för reglage och effekter, och mer än 130 alternativ för enskilda sidor. Inkluderat är 9 huvudinsticksprogram som kommer att vara användbara för att marknadsföra en visitkortswebbplats eller en större resurs. Allt detta är rabatterat, för närvarande tillgängligt för $30. En av de mest populära mallarna för målsidor.

24. Porto

En annan design av flera mallar för målsidor och visitkort. Ren kod med ett oändligt antal alternativ för att välja sidhuvuden och sidfötter utan att behöva lära sig programmering. Många mönster, vars element är lätta att byta ut tack vare rutnätsplugin. Det är lätt att förvandla från en ensidig webbplats till en fullfjädrad butik genom avancerad sökning. Supporten är alltid redo att svara på frågor.

25. Ekko

Billig och populär multi-mall för landning, som skiljer sig:

professionella designämnen;

snabb respons på grund av optimering;

inställningsmetod dra och släpp släppa;

mer än 200 block för innehåll.

Professionella webbplatser om vilket ämne som helst som du enkelt kan installera med ett klick och använda. Modern design, som inte är "tråkiga" och ser fräscha och vackra ut.

26. Ave

"En ny generation multi-mall" är ett djärvt uttalande, men det är precis vad författarna säger om sin produkt. För bara $35 kan du få:

• 200 målsidor med en vacker "europeisk" design;
• WooCommerce och avancerade beställningsformulär;
• installation på en minut;
• inställningar för portfölj, reglage.

Elementors visuella editor-plugin har verkligen uppdaterats till senaste versionen och mycket lätt att använda.

27. Arken

"Bäst bland 9500", noterar utvecklarna. Mallen fokuserar på personer som aldrig har gjort kodning. Designanpassning utförs med hjälp av den visuella designerplugin Elementor, som låter dig arbeta i ett-till-en-läge, utan att använda tredjepartsinstallationer och omedelbart använda den fullt fungerande funktionaliteten hos en av de 300 mallarna. Bekväm och snabb att sätta upp.

28. Amedeo

Vacker design i en ovanlig färgskala. Tyngdpunkten ligger inte bara på snygg design, eftersom det erbjuds att köpas som ett set:

WooCommerce-plugin för onlinebutik;

plugin för avancerade kontaktformulär;

ett urval av rullningseffekter i olika stilar;

ett urval av animationer.

Ren och tydlig WordPress-mall för visitkort och onlineshopping. I butiksläget finns inställningar för produktegenskaper och sök efter dem.

29. Bolge

Ett urval av söta målsidor i modern, elegant platt stil. Genom att rita element manuellt kan du sticka ut och bli ihågkommen av potentiella kunder. I priset ingår grundläggande plugins och widgets - från en visuell redigerare till en parallaxeffekt för att placera en bakgrund eller portfölj. Du kan anpassa olika vyer på skrivbordet och mobilversion, anpassningsförmåga ges som standard.

30. Makoto

Flera lösningar för designers, fotografer, konstnärer. Användbara förinställningar för att lägga upp en portfölj gör att du kan skydda den från kopiering och ladda den när användaren ser den, vilket sparar laddningstid. Lätt att ladda ner video. Det finns ett alternativ för att blogga. Element för att placera infografik har förberetts. Den visuella designern hjälper dig att enkelt konfigurera alla detaljer.

32. Landskapsarkitektur

Utvecklarna har gjort en intressant "grön" design för landskapstjänster, trädgårdshjälp och eko-teman. Arbetsstycket kan dock användas för andra ändamål. Vackra ikoner, rena Google-typsnitt, utmärkt lyhördhet och utseende, inklusive på Retina-enheter, innebär en utbredd användning av WordPress-teman.

33. Crowdmerc

Gjord under senaste versionen WordPress. Mallen uppdateras ständigt. Funktionalitet för en onlinebutik tillhandahålls genom ett bekvämt plugin för avancerad sökning och beställning. Det finns också förinställningar för händelser, kalenderdatum och inspelning. Använde Elementor för att skapa nya sidor. Stöder alla ytterligare plugins.

34. Trovärdighet

Ett kreativt "musikaliskt" tema kommer att komma ihåg av besökarna för sin ljusa design, och webbplatsägaren kommer att vara intresserad av:

• utveckling av målsidan och interna sidor- Obegränsade möjligheter till resursutveckling;
• installation med ett klick;
• WYSIWYG-inställning;
• möjligheten att lägga till musik, video, skjutreglageeffekter.

36. Utbildning

Education är en förbättrad version av det gamla eLearning-temat med en mer avancerad UX och är avsedd för pedagogiska onlineresurser: onlinekurser och webbplatser för utbildningsinstitutioner. Mallen har en attraktiv design och ger omfattande funktionalitet som är nödvändig för utbildningsprocessen.

37. En

Det ena är ett kreativt tema för att skapa målsidor med tonvikt på produktreklam. Mallens frontend är gjord på html5 och med den kan bootstrap 3, MailChimp och Contact Form 7. Utvecklarna av UX-tema studerade många liknande projekt, som ett resultat av vilka användare fick färdiga mallar WordPress-målsidor, som innehåller alla verktyg som är viktiga för affärsprojekt.

38. Totalt

Total är en mall som passar många projekt. När du skapar sidor använder den: dra-och-släpp-metoden, obegränsade färgscheman, anpassning i realtid, lättanvända premiumreglage. Bland demosidorna för temat finns målsidesmallar för 11 olika projekt.

39. Stockholm

Stockholm är en av de 30 mest sålda WordPress-mallarna sedan starten. När du arbetar med temat kan du ställa in ett färgschema för hela webbplatsen eller dess individuella element, använda något av 600 Google-teckensnitt och kombinera alternativ och block från olika demosidor. Användare som behöver en färdig lösning för ett affärsprojekt kan ladda ner mallar för målsidor och omedelbart installera dem från webbplatsbyggaren.

Ett annat demoalternativ:

40. Massiv dynamik

Mer än 70+ widgets med vilka dina målsidor blir unika och moderna. Google-typsnitt, infografik, anpassning till SEO, ren kod, skapande av bekväma portföljer - det är bara en del av fördelarna med denna mall. Landningar, i bokstavlig mening, kan sättas samman bokstavligen som en mosaik, helt enkelt genom att dra och släppa. På beskrivningssidan kan du se visuella exempel.

När du tittar på demosidor vill du använda dem alla.

» Gratis WordPress-mallar för målsida - TOP 30

Gratis målsida WordPress mallar - TOP 30

Specifikt kommer denna artikel att överväga bästa landningen WordPress mallar, som kan passa dig. De kommer alla att innehålla en skärmdump och en demoversion av designen så att du kan utvärdera temat och omedelbart ladda ner det om du gillar det.

Väldigt ofta delas målsidesmallar för WordPress ut mot en avgift, men för er har jag samlat bäst och gratis i den här artikeln för att göra din sökning enklare.

Du kanske också är intresserad av För dig som letar efter värd 1.

är ett ensidigt tema som hjälper dig att skapa en webbplats utan större ansträngning. Å andra sidan har den en professionellt ritad design, parallaxrullning, vilket gör att vi kan kalla detta tema "vackert". Den här mallen är lämplig för nystartade företag och småföretag.

2.

är ett multifunktionellt WordPress-tema. Den innehåller ett levande gränssnitt, klassisk parallaxeffekt och andra animationer som gör det ännu roligare att titta på temat. Zerif Lite är ett tema för flera webbläsare som också är välskrivet vad gäller kod.

3. Alhena Lite

Alhena Lite är ett gratis WordPress-tema för företag som är helt integrerat med WooCommerce-plugin så att du enkelt kan konfigurera din onlinebutik.

4.

är ett rent, enkelt affärstema som är fullt responsivt och innehåller många av de populära funktionerna som gör det enkelt att skapa webbplatser.

5. Palmas

Palmas är ett modernt tema gjort i ljusa färger, som passar för att driva en personlig blogg eller modeblogg. Den här mallen stöder även plugins som Yoast SEO, GravityForms, Pirate Forms, W3 Total Cache och många andra.

6. Brasserie

Brasserie är en enkel WordPress-mall som är perfekt för en restaurang, café eller kulinarisk webbplats. Innehåller animationseffekter, såväl som en stor mängd funktionalitet.

7. XT Corporate lite

XT Corporate lite är ett enkelt och minimalistiskt tema som passar för en liten produkt eller tjänst.

8.

är ett trevligt tema gjort i ljusa färger. Innehåller olika animationer och visuellt fantastiska övergångar och parallaxeffekt. Dessutom stöder Freesia Empire plugins som Breadcrumb NavXT, WP-PageNavi, Contact Form 7, Jetpack av WordPress.com, Polylang, Newsletter, bbPress och WooCommerce.

9.

är ett ämne som lämpar sig för presentation av små eller medelstora företag. Det inkluderar stor mängd funktioner och tillägg för fullständig hantering av landningsstrukturen.

10.

är ett mångsidigt tema med mycket funktionalitet. Den är adaptiv, alla element är animerade med en parallaxeffekt. En sida är lätt att anpassa och låter dig se ändringar i realtid. Det nuvarande landningstemat stöder också ett stort antal grundläggande WordPress-plugins.

11. Fotografi

FotoGraphy är en landningssida som är lämplig för fotografer eller designers. Enkelhet och närvaron av ett stort antal funktioner gör den ännu mer skalbar och anpassningsbar.

12. Integralt tema

Integral Theme är ett ensidigt parallax-tema lämpligt för kreativa, företagsägare eller agenter. Det tar bara ett par minuter att ställa in det.

13. Fyrkant

Square är ett minimalistiskt tema som kan användas för alla typer av webbplatser. Det är bäst lämpat för små och medelstora företag. Square är konfigurerat för många populära WordPress-plugins och är också SEO-optimerat.

14. Uppliva

Enliven är ett högkvalitativt tema. Jag skulle kalla det premium, eftersom det kombinerar kvalitet och skönhet i en flaska. Den stöder också många populära plugins och är lätt att anpassa.

15. Latte

Latte är en mall för fotografer. Den har allt så att du på ett adekvat sätt kan visa din portfölj, samt berätta om dig själv. Inställningen sker med ett par klick.

16. Måndagen

Måndagen är ett elegant tema som passar ett företag eller frilansare. Den kommer med ett stort antal funktioner och extrafunktioner och tillägg.

17. Affärsvärlden

Business World är en mall som är relaterad till affärsämnen. Den kombinerar stil och kvalitet. Affärsvärlden kan också anpassas för en personlig, företags- eller fotografs webbplats. Dess kapacitet gör att du kan göra nästan vad du vill av den.

18.

– Det här är ett trevligt tema, som är gjort i ljusa färger. Den är perfekt för små och medelstora företag, såväl som för en personlig webbplats. Du kan anpassa vad du vill i den. Det finns många funktioner och tillägg som gör den här mallen ännu bättre och mer attraktiv.

19.Onetone

Onetone är en ensidig mall för WordPress som är lämplig för att presentera "jag" på Internet (visa din portfolio och/eller prata om dig själv).

20. Stå upp

Arise är en minimalistisk WordPress-mall på en sida som passar för en liten produkt eller ett litet företag. Det finns inget överflödigt i det, bara allt som är viktigast.

21. Woot

Woot är en minimalistisk mall gjord i mörka färger för att driva en webbutik. Det fungerar med WooCommerce och många andra populära plugins.

22. Väster

West är ett enkelt tema som passar för en byrå, ett litet företag eller en portföljwebbplats. Den innehåller ett stort antal funktioner, inställningar och arrangemang av element.

23. Anaglyph Lite

Anaglyph Lite är en enkel och elegant mall som passar för bloggande och nätbutiker. Det är redan konfigurerat med WooCommerce och andra populära plugins.

24.

är ett snyggt tema gjort i mörka färger kombinerat med färgade inslag, som passar för att presentera ditt företag, portfolio eller produkt. Efter att ha följt länken, klicka på "Ladda ner nu" i BeOnePage Lite-blocket och du kommer att ladda ner gratis version det här ämnet.

25.

är en mall på en sida som ingår i kategorin: fitness, yoga, pilates, hälsoklubb och många andra. etc. Stilen är gjord i mörka färger, cross-browser, adaptiv och fungerar på alla enheter.

26. Agle Lite

Aglee Lite är en enkel företagsmall designad i ljusgrå och blå toner. Detta tema är perfekt för en nystartad eller ett litet företag.

27.

är ett kraftfullt och funktionellt affärstema. Den har en bekväm redigerare som låter dig se ändringar i realtid. Wimpie Lite är kompatibel med flera webbläsare, responsiv och lätt att ladda sidor.

28.

- Det är multifunktionellt WordPress tema, som är gjord i ljusa färger och passar för en företagswebbplats, personlig portfolio eller blogg.

Färdiga målsidesmallar behövs för att snabbt lansera en ny produkt, marknadsföra den med hjälp av en LP-sida eller mobilapplikation, eller motivera användare att registrera sig/prenumerera på ett nyhetsbrev. För en "målsida" är bekvämlighet och användarvänlighet med rätt layout extremt viktigt. Moderna säljande landningssidesmallar är utvecklade med tanke på möjligheten att skapa en responsiv webbplats med höga konverteringsfrekvenser.

Demo | Crossway – mall för landningssida för start

Ultramodernt HTML5-tema baserat på Bootstrap 3.1.1. Levereras med 4 layouter: enkel/fler-pager, alternativ för navigeringsfält. En lätt parallax-rullningseffekt är integrerad i målsidestemat, anpassat för mobil och organisk trafik (SEO).

Demo | DotSquare

Html målsida mall för webb och mobilapplikationer, som syftar till att enkelt generera potentiella kunder. Innehar snabb laddning och giltig html, css-kod. Överst på den ensidiga sidan finns ett dubblettkontaktformulär med .

Demo | Primo responsiv målsidamall

Ensidig HTML5-landningsmall med CSS3-effekter. Den har en ram med tre kolumner, skapad på Bootstrap 3. Lämplig för försäljning av iOS/Android-applikationer. Mallen innehåller 2 layouter (med och utan Parallax), Ajax bildar kontakter, PrettyPhoto ljuslåda och 5 färgscheman. Lätt att anpassa: ändra hex-koderna och relaterade element kommer att färgas i en ny färg. PSD ingår.

Demo | Hype – Appens målsida

Modern, Retina-färdig mobilappmall erbjuder 8 färgalternativ, bildalternativ/.

Demo | Gotte Multipurpose Landing Page

Multipurpose målsidesmall i platt stil kommer med 3 indexalternativ, 6 färgscheman. Mall skapad på twitter bootstrap3, ingår PHP-skript kontaktformulär och nedladdningar.

Demo | Förtal – Responsiv Bootstrap HTML5-målsida

Förtal är ett idealiskt alternativ för startups och företag, lämpligt för proffs eller ett enskilt projekt. Responsiv design med Bootstrap och HTML5/CSS3 inkluderar adaptiv reglage, flikreglage, nyhetsprenumerationsformulär, etc.

Demo | Appster – Ultimate Clean App Landing Page Mall

Cloud – en lättanvänd appmålsida

Elegant, ren och minimalistisk HTML5 / CSS3 målsidesmall med utmärkt funktionalitet. Mallen är designad för Coming Soon-sidan (lanseras snart), perfekt för att skapa en applikationssida och en presentationssida.

Demo | OnEvent – ​​landningssida för specialevenemang

Adaptiv landningsmall för specialerbjudanden. evenemang. Har avsnitt för , kommersiell video, evenemangsschema, gästlista.

Målsidans tema är helt utslitet. Även om uppsvinget för landningssidor har dämpats lite, är landningssidor fortfarande efterfrågade. De lanseras av alla och alla, även om detta helt klart är ett förlorande drag för deras affärsnischer. Vissa människor gör det bara för att spela, och andra gör det för att tjäna pengar. Men det är inte så viktigt vilka mål du strävar efter, det viktiga är att alla kommer att behöva sidutveckling. Vissa kommer att beställa från proffs, medan andra, av en eller annan anledning, kommer att börja skapa sin egen landningssida själva. Det är just för de senare som denna samling är tillägnad.

Människor som bestämmer sig för att själva skapa en webbplats kan börja utveckla från grunden, eller så kan de använda färdiga sådana, eftersom de inte kräver speciella kunskaper i utveckling. Tillräckligt grundläggande kunskap HTML och CSS, de som de lär ut i skolan. Här uppstår frågan igen. Ska jag använda betald eller gratis? Naturligtvis kommer den betalda att vara av mycket högre kvalitet och kommer förmodligen att visa högre konverteringar. Den gratis blir mindre vacker, mindre genomarbetad när det gäller marknadsföring, layout och design.

Detta urval består av gratis sådana i ren HTML för Landningsskapande Sida. Urvalet bestod till en början av 40 positioner, men när jag vaknade på morgonen och tittade på dessa mallar med nya ögon bestämde jag mig för att ta bort de flesta, eftersom det ärligt talat var skräp, och det finns redan en hel del skräp på internet. Endast de mest värdiga mallarna finns kvar som du åtminstone kan bygga något på. Urvalet inkluderar målsidesmallar för en mängd olika ämnen, men av någon anledning dominerar LP-skivor för mobilapplikationer. De visade sig vara av högsta kvalitet.

Tidigare har vi redan gjort val från gratis mallar för målsida. De var skräddarsydda för ett specifikt tema. Den här gången bestämde jag mig för att göra ett samlingsämne som inte tillhör någon riktning.

Andra samlingar av gratis HTML-målsidesmallar:

Förresten. Om du av någon anledning vill dra dessa mallar till Wordpress-motorn, då gjorde jag en gång i detta ämne ett urval av plugins för att skapa en målsida på Wordpress. Du kan prova att använda dem. Detta kan spara mycket tid. Även om jag personligen inte ser någon mening med att göra detta, eftersom ren HTML räcker för en enkel LP.

Så. Vi uppmärksammar dig på 20 gratis HTML-målsidamallar.

Appi - Mall med bakgrundsvideoEn annan målsidamall för en mobilapplikation med en bakgrundsvideo i helskärmsläge. Till skillnad från mallen med en videobakgrund, som kommer att ges nedan, är denna av mycket högre kvalitet, även om den är skräddarsydd för ett specifikt tema.

BukkuGratis HTML-mall för att skapa en målsida för att sälja böcker. Tillverkad i platt stil i gröna toner. Det finns en del underhållande animation.
Utvecklaren tillhandahåller även källor i PSD-format för gratis nedladdning.

Målsida för att sälja kaffe HTML Målsida mall för att sälja kaffe. Designen och genomförandet av layouten är mycket intressant. Det finns animering av element när du rullar på sidan. Allt är gjort i mjuka färger. Perfekt för organisationer som levererar kaffe. Den här mallen kan dock enkelt göras om så att den passar ditt tema genom att byta ut bilderna.

Landing Zero - Landing med bakgrundsvideo Gratis HTML-mall med en bakgrundsvideo med ett universellt tema. Lämplig för att skapa en portfölj för en frilansare av vilken specialisering som helst, oavsett om det är en fotograf eller en designer.
Alls, gratis mall Det är svårt att hitta sådana med bakgrundsvideo. Så låt oss ladda ner.
Videon på den första skärmen kan ersättas med din egen, och om det inte finns någon kan du ladda ner den från ett gratis videolager. Jag tillhandahöll en lista över videoaktier med juridiska videor tidigare.

Engagera Ännu en universell responsiv en-pager på Bootstrap. Sidan lämpar sig för en enkel produktpresentation. Strukturen påminner om en presentationssida för Apple-produkter.

Målsida för ett kafé eller restaurang En gratis mall för målsida som är bekant för den vanliga RuNet-användaren med ett fångstformulär på den första skärmen. Designad för att skapa en målsida för en bar, restaurang, kafé eller något annat kulinariskt tema. Med hjälp av ansökningsformuläret kan du boka bord för en viss tid.

OleoseMycket hög kvalitet, adaptiv, gratis, men återigen för en mobilapplikation. Landing Page implementeras på Bootstrap-ramverket. Den har tre färgalternativ: ljusblå, ljusgrön och lila. Den är dock inte så strikt anpassad till sitt tema, så den kan enkelt göras om för att passa dina behov.

Take - gratis webbplats på en sida Och återigen ytterligare en gratis HTML-mall på en sida för en mobilapplikation. Dess design är dock mycket intressant och ovanlig. Jag skulle till och med säga unik. De flesta besökare på vakthuset är inte utvecklare av mobilapplikationer, så du måste göra om allt för att passa ditt tema.

Foodee Gratis HTML5-mall på en sida för att skapa en landningssida för ett café, restaurang eller någon form av matställe. Mall med helskärmsbakgrundsbild och parallaxeffekter.
Det finns sådana block som: meny, kommande evenemang, kundrecensioner och en standarduppsättning av block där du kan placera fördelar, etc.

WHITE Jag skulle betrakta den här mallen som ett slags html-ramverk för att skapa en ensidig webbplats. Den är inte skräddarsydd för något ämne, så allt ligger i dina händer. Det finns stöd för helskärmsbakgrundsvideo. Dessutom har den en standarduppsättning block, typiska för en ensidig webbplats.

Cyprass Template är lämplig för att skapa en landningssida för alla digitala företag: webbstudio, team av frilansare eller liknande. Den har alla nödvändiga resurser för detta: en portfölj med ett filter efter arbete, olika cirkeldiagram, flikar, skjutreglage... Dessutom stöder den bakgrundsvideo på den första skärmen.

Hälsningar, mina kära läsare. Idag kommer vi att prata om tekniska aspekter med vilka vi kan öka försäljningskonverteringen av våra varor eller tjänster. En av viktiga punkterär väl genomtänkt landningssida med varor. Den så kallade landningssidan, vars skapande vi kommer att prata om senare och få färdiga sidkoder.

Vad är en målsida? Det här är sidan som folk brukar landa på efter att ha klickat på en annons. Skapad för ett erbjudande: produkt, tjänst eller prenumeration. En effektiv målsida är hörnstenen i framgångsrik marknadsföring på nätet. Produkten kan vara den bästa på marknaden, annonserna är fulländade, men utan en bra målsida ger ansträngningar inte 100 % resultat. Den berättar för besökarna vad som erbjuds och varför de ska vilja ha det. En känsla av brådska bidrar till snabbt beslutsfattande och användarens övergång till kategorin klient.

Hur skapar man en målsida? Det är fel att tro att svaret ligger i förmågan att typsätta. En bra landningssida är resultatet av ett samordnat arbete med mål, text, design och kod. Målsidor, varav exempel kommer nedan, hjälper nybörjare att lära sig grunderna i att arbeta med layout, men ersätter inte konverteringstexter och förståelse för målgruppen. Du kan också skapa dem med hjälp av olika målsidedesigners.

Därför innan du skapar landningssida, fråga dig själv:

• Vad kommer en person att göra efter att ha landat på målsidan? Kommer han köpa något? Kommer du att fylla i formuläret? Prenumerera på nyhetsbrevet? Sätt upp tydliga mål innan du spårar din omvandlingsfrekvens.
• Vilka är mina konkurrenter? I verkligheten är dessa tre frågor: vem, hur framgångsrika är de och hur kan deras prestationer tillämpas? Imitation är den uppriktigaste formen av smicker. Om dina konkurrenter gör något som fungerar, replikera det på din webbplats.
• Vem är min publik? Ju bättre du förstår din nisch och målgrupp, desto större är chansen att dina ansträngningar ger resultat.

Du måste erbjuda all nödvändig information, men inte så mycket att du överväldigar och driver bort din potentiella kund.

Exempel på att skapa en landningssida + kodning för dummies

Innan vi börjar, låt oss ta en snabb titt på HTML och CSS. Att förstå hur de fungerar hjälper dig att skapa en landning.

HTML är ett webbläsarmarkeringsspråk för webbplatsvisualisering. Skrivet med taggar inom vinkelparenteser som definierar innehållet.

Taggen öppnas () och stängs () runt fyllningen:

innehåll

För finjustering läggs attribut till efter namnet:

innehåll

CSS - definierar hur HTML-element ska ordnas. Består av väljare, egenskaper och värden:

#selector (egenskap: värde;)

Väljaren matchar namnet på en specifik tagg i html. Att ändra värden och lägga till egenskaper justerar dess utseende. Du kan skapa sidor som ser olika ut genom att använda olika CSS-stilar på samma HTML.

5 första steg

För snabb layout kommer vi att använda en mall med minimal design baserad på bootstrap. Detta är ett system med egna väljare, som används över hela världen för att snabba upp layouten.

Det ser blygsamt ut.

Av denna fisk skapas en webbplats för varje smak i flera steg.

Katalogstruktur i mappen:

• index.html: Detta är huvudfilen som vi kommer att redigera.
• /tillgångar: hjälpfiler finns här:
• /css: Katalogen innehåller bootstrap och ikonstilar. Filen vi kommer att redigera är main.css.
• /img: mapp för webbplatsbilder.
• /fonts: ikonteckensnitt.
• /js: bootstrap javascript-filer.

Steg 1: Använda en rubrik

Rubriken och underrubrikerna är nyckelplatser som hjälper till att förmedla värdet av erbjudandet på ett tydligt sätt.

Låt oss ändra titeln och namnet på webbplatsen. Här behöver du inte ha några sättningsfärdigheter - du skriver din egen text på de gulmarkerade platserna på skärmen.

Steg 2. Brevity är omvandlingens syster. Lägger till förmåner och priser

Du behöver 4 sektioner:

• fördelar;
• priser;
• recensioner;
• uppmaning till handling.

Låt oss skapa ett avsnitt av huvudinnehållet "main", där vi kommer att infoga de nödvändiga avsnitten:

…..
…..
…..
…..

Fyll med fyllning istället för prickar.

För förmånsdelen behöver du denna kod:

Fördelar
Snabb

Pålitlig

Sed diam nonummy

Lönsam

Elit, sed diam nonummy

Tekniskt

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Pålitlig

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Lönsam

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Tekniskt

Lorem ipsum dolor sit amet, consectetuer adipiscing

Pålitlig

Lorem ipsum dolor sit amet, consectetuer adipiscing

Lönsam

Lorem ipsum dolor sit amet, consectetuer adipiscing

Innehåll för tydlighet:

Det ser fortfarande slarvigt ut, men det finns ingen anledning till panik, låt oss fortsätta.

Vi skriver ner priser. Innehållet ändras på samma sätt som i det första steget. allmän beskrivning med klass "tariffer" och tre tariffer.

Tariffplaner

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Taxa nr 1
$10

per månad/per person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Beställa
Tariff nr 2
$20

per månad/per person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Beställa
Taxa nr 3
$30

per månad/per person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Beställa

Ser ut så.

För närvarande är vi inte intresserade av utseendet på den framtida målsidan - vi kommer att titta på exempel på att ändra stilar nedan.

Steg 3: Trust Signals och Call to Action

Att använda riktade signaler indikerar för besökarna att varumärket är pålitligt. Signaler kan ta många former, men den klassiska är kundfeedback.

Recensioner

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud övning ullamco laboris nisi ut aliquip ex ea commodo:

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."

Låt oss göra en uppmaning till handling.

Fördel när du beställer idag

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:

Beställ nu!

Recensioner hjälper potentiella kunder att välja att köpa produkten. För tydlighetens skull behöver vi avatarer, så vi lägger dem omedelbart på plats - under varje citat.

Kundnamn.

Steg 4: Grid- och mobilvänlig integration

För att implementera rutnätet behöver vi Bootstrap-behållare. Det är viktigt att komma ihåg det totala antalet giltiga kolumnsegment - 12. Klassen bestämmer bredden på innehållsvisningen. Fördelen med detta färdiga galler är att behållarna är designade med anpassningsförmåga i åtanke och är direkt användbara för Mobil enheter. Detaljerad beskrivning på den officiella webbplatsen. Rutnätet ser ut så här.

Innehållet i "main" kommer att slås in i en behållare. För att göra detta skrivs följande högst upp:

… .

Om du behöver blocket för att passa hela skärmens bredd, så sätts behållaren inuti. Här blir det en jumbotron och en uppmaning till handling.

Vi kommer att slå in alla element som kräver placering ovanpå varandra med linjeavskiljare.

Vi kan nu justera bredden på kolumnerna, med fokus på bootstrap-rutnätet. Efter lindningen slutade fyllningen att fastna på skärmens kanter och snygga indrag uppstod.

Vi sätter priser i rad med kolumnklassen col-lg-4. Inuti radrader är det inte längre nödvändigt att skriva separata div:er för lindning, de kan kombineras med befintliga avgränsade med ett mellanslag.

I analogi ställer vi upp kolumner för avsnittet recensioner och förmåner. Om du behöver flytta ett element åt sidan, använd offset-kolumnklassen col-lg-offset-2. Siffran i slutet avgör hur många baskolumner skiftet kommer att ske med.

Steg 5. Teckensnitt och ikoner

Vi implementerar Google Font-rubriker. När valt, öppna importfliken och kopiera data från den till main.css-filen. Vi lägger också till titelväljare till filen som det nya typsnittet används för.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* importtypsnitt för rubriker */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 (
font-family: "Roboto Condensed", sans-serif; /* Googlefont-utdata */
}

För tydlighetens skull beskrivs fördelarna av en klass med det självförklarande namnet text-center och FontAwesome-ikoner från bootstrap-setet.

Vid denna tidpunkt är förberedelsen helt klar.

Landningssida: exempel på koder med erbjudande, parallax och räknare

Vi använder de tre mest populära typerna: med en mening, en form och med en nedräkningsräknare. Allt eftersom layouten fortskrider kommer mallen att kompletteras med effekter.

Exempel 1: med en mening

Låt oss ställa in bakgrunden för huvuddelen och stoppningen så att den första skärmen täcks.

Jumbotron (
bakgrund: #f5f5f5 url(../img/fon.jpg) övre mitten ingen upprepad;
max-bredd: 100 %;
padding-top: 250px;
padding-bottom: 200px;
text-align: center;
}

Låt oss ändra storleken på jumbotronhuvudet från h2 till h1. Därefter skriver vi stilar för de element som behöver ändras.

Låt oss börja med ikonerna.

Fördelar i(
färg: #cac4c4;
}

Efter hash-tecknet anges en färg. Du kan välja ditt eget alternativ med hjälp av html-färgtabeller eller en bildredigerare.

Indrag för avsnittsrubriker

avsnitt h2 (
padding-top: 30px;
margin-bottom: 25px;
}

Vi gör i ordning tullarnas utseende. För enkelhetens skull skapar vi våra egna klasser för de element som vi specifikt vill lyfta fram.

Taxa nr 1
$10

per månad/per person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Beställa

Och mycket CSS. Vilka platser sektionerna ansvarar för anges i kommentarerna - /* mellan snedstreck med en asterisk */

/* =========Tariffer stilar======== */
/* allmän form taxa */
.pricing_item(
bakgrund: #f2f2f2;
position: relativ;
display: -webkit-flex;
display: flex;

flex-riktning: kolumn;

align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
stoppning: 2em 3em;
marginal: 1 em;
färg: #262b38;
markör: standard;
overflow: gömd;

}
/* ändra bakgrund när du klickar på */
.pricing_item:hover (
färg: #444;
bakgrund: #daebef;
}
/* individuell prislappsbakgrund i varje taxa */
.pricing_item:first-child .price (
bakgrund: #9ba9b5;
}
.pricing_item:nth-child(2).price (
bakgrund: #1f6098;
}
/* på breda skärmar är den mellersta tariffkolumnen indragen och markerad */
@mediaskärm och (min-bredd: 66.250em) (
.pricing_item(
marginal: 1,5 em 0;
}
.featured(
z-index: 10;
marginal: 0;
teckenstorlek: 1,15 em;
}
}
/* titel */
.pricing_item h3 (
teckenstorlek: 2em;
marginal: 0,5em 0 0;
färg: #1d211f;
}
/* prislappsbakgrund */
.pris(
teckenstorlek: 2em;
font-weight: fet;
färg: #fff;
position: relativ;
z-index: 100;
linjehöjd: 95px;
bredd: 100px;
höjd: 100px;
marginal: 1.15em auto 1em;
gränsradie: 50%;
bakgrund: #77a5cc;
-webkit-transition: färg 0,3s, bakgrund 0,3s;
övergång: färg 0,3s, bakgrund 0,3s;
}
/* valuta */
.valuta(
teckenstorlek: 0,5 em;
vertikal-align: super;
}
/* förtydligande av förslaget */
.mening (
font-weight: fet;
marginal: 0 0 1em 0;
stoppning: 0 0 0,5em;
färg: #2a6496;
}
/* lista */
.pricing_item ul (
teckenstorlek: 0,95 em;
marginal: 0;
stoppning: 1,5em 0,5em 2,5em;
text-align: vänster;
}
/* listobjekt */
.pricing_item li (
stoppning: 0,15em 0;
}
/* prisbeställningsknapp */
.pricing_item-knapp(
font-weight: fet;
margin-top: auto;
stoppning: 1em 2em;
färg: #fff;
border-radie: 5px;
bakgrund: #428bca;
-webkit-transition: bakgrundsfärg 0.3s;
övergång: bakgrundsfärg 0,3s;
}
/* ändra färg när knappen trycks ned */
.pricing_item button:hover,
.pricing_item button:focus (
bakgrundsfärg: #285e8e;
}
/* taxebakgrund*/
.bg-2 (
bakgrund: #dddddd;
}

Resultat

Recensioner. Låt oss ge dem ett snyggt utseende och ange deras plats.

/* =========Rekommendationsstilar======== */
vittnesmål (
stoppning: 4em 0;
text-align: center;
}
.testimonials .avatar img (
gränsradie: 50%;
flyta till vänster;
display: inline;
marginal-höger: 1em;
bredd: 65px;
höjd: 65px;
margin-bottom: 30px;
}
.testimonials .avatar p (
text-align: vänster;
padding-top: 1em;
färg: #5d5d5d;
teckensnittsvikt: 900;
}

Allt som återstår är att dekorera den sista uppmaningen och sidfoten.

/* Åtgärd */
.handling(
bakgrund: #476177;
min-höjd: 180px;
bredd: 100%;
stoppning: 4em 0;
text-align: center;
}
.action h2 (
färg: #fff;
teckensnittsvikt: 300;

}
.action p(
färg: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
teckenstorlek: 1,2 em;
}
.action .container (
marginal-top: 3em;
}
/* Sidfot */
sidfot(
bakgrund: #333333;
stoppning: 1em 0;
text-align: höger;
}
sidfot p(
färg: #fff;
linjehöjd: 1;
text-transform: versaler;
teckenstorlek: 0,7em;
marginal-top: 0,5em;
}

Sidfotsknappen tilldelas den inbyggda bootstrap-klassen btn-default.

Väcker mallen till liv. Vi kommer att introducera smidig rullning och knappar för sektioner, samt textanimering på den första skärmen.

För övergångarna till arbete kommer vi att ersätta några av sektionsklasserna med id - för förmåner och taxor. Och vi kommer att lägga till länkar till id:t till knapparna. Skärmdump - vad är fäst vid vad, markerat med en gul markör.

Vi sätter indrag för knappar - jbutton. Scrollning när den trycks fungerar, men väldigt abrupt.

Smidiga övergångar skapas med javascript eller jquery. Den senare är ansluten till Bootstrap-mallar som standard.

Scrollningen är nu smidig.

Lägga till animering i text med Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Detta är en färdig öppen källkod, den kan användas på vilken webbplats som helst. Placera filen från Github i css-mappen och ange sökvägen.

Vi väljer effekterna här: https://daneden.github.io/animate.css/. Vi har valt fadeInDown. Det är skrivet i koden så här:

Nu när sidan är laddad eller uppdaterad kommer texten att animeras. Redo.

Exempel 2: med form och parallaxeffekt

Ju fler formulärfält en besökare presenteras för, desto mindre sannolikt är det att han fyller i dem. Be om endast den minsta nödvändiga informationen.

Den är sammansatt i analogi. Vi kommer att ändra bakgrunder och färger. Och naturligtvis lägger vi till en form.

Låt oss börja med parallax.

Låt oss ändra bakgrunden på jumbotronen till transparent:

bakgrund: transparent;

Inuti huvudet kommer vi att infoga skriptet:

$(window).scroll(function(e)(
parallax();
});
funktion parallax())(
var scrolled = $(window).scrollTop();
$(".bgparallax").css("top",-(rullad*0.2)+"px");
}

Den första raden i kroppen är en behållare för parallax:

Och i CSS är dess beteende:

Bgparallax (
bakgrund: url(/../img/fon.jpg) upprepa;
position: fast;
bredd: 100%;
höjd: 300%;
topp:0;
vänster:0;
z-index: -1;
}

Parallax är redo. Men att göra ändringar i koden och en ny bakgrund kräver omtilldelning av färgschemat.

Göra menyn mörk:

Navbar-standard (
bakgrundsfärg: #333;
kantfärg: #444;
färg: mörkgrå;
gräns-radie: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
färg: mörkgrå;
bakgrundsfärg: rgba(0, 0, 0, 0,5);
}

Vi ersätter meningen i jumbotron med en ny - med formulärkoden:

Målsidan förvandlar besökare till kunder
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.

• 
  
  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

Och vi föreskriver utseendet

/* form */
.headform-list (
list-stil-typ: ingen;
linjehöjd: 26px;
teckensnittsvikt: 400;
stoppning: 0px;
margin-bottom: 40px;
}
.huvudform(
overflow: gömd;
position: relativ;
bakgrundsfärg: rgba(0,0,0,.4);
stoppning: 35px 40px;
border-radie: 8px;
}
inmatning, knapp, välj, textområde (
bredd: 100%;
margin-bottom: 10px;
}
.headform-list li .fa (
position: absolut;
topp: 0px;
vänster: 0px;
bredd: 42px;
teckenstorlek: 24px;
text-align: center;
}
.headform-list li(
position: relativ;
min-höjd: 38px;
stoppning-vänster: 62px;
margin-bottom: 20px;
}
.jumbotron p (
färg: #fff;
teckenstorlek: 16px;
teckensnitt: kursiv;
}

Även jumbotronens text hamnade här, eftersom den krävde förändringar.

Vi ändrar taxorna.

/* allmän syn på tariffen */
.pricing_item(
bakgrundsfärg: rgba(0,0,0,.4); /* rad ändrad */
border-radie: 4px; /* rad ändrad */
position: relativ;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: kolumn;
flex-riktning: kolumn;
-webkit-align-items: stretch;
align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
stoppning: 2em 3em;
marginal: 1 em;
färg: #f2f2f2; /* rad ändrad */
markör: standard;
overflow: gömd;
box-shadow: 0 0 15px rgba(0, 0, 0, 0,05);
}
/* ändra bakgrund när du klickar på */
.pricing_item:hover (
färg: #444;
bakgrund: #ddd; /* rad ändrad */
}

Nu ser de ut så här - en genomskinlig bakgrund och rundade hörn.

Mallen är klar.

Exempel 3: med nedräkningsräknare

Vi ändrar fyllningen av jumbotronen igen och färgar om mallen för att matcha den nya bakgrunden, liknande den tidigare mallen. Anslut räknarskriptet:

HTML





Tiden väntar inte
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit teface feugasi duis dolore.

• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

var myCountdown1 = new Countdown((
tid: 86400 * 3, // 86400 sekunder = 1 dag
bredd: 300
, höjd: 60
, rangeHi: "dag"
, stil: "vänd" //