Hallo, beste lezers van de blogsite!

In dit artikel heb ik een selectie gemaakt van 10 HTML-landingspagina-sjablonen (in het gewone taalgebruik één pagina), die naar mijn mening succesvoller zijn en een hoog conversiepercentage hebben. Er was eens, toen ik begon met het maken van landingspagina's (4 jaar geleden), niet zo'n kunstenaar en daarom zocht ik naar sjablonen. Uiteraard waren er alleen consumptiegoederen, bouwpakketten en betaalde sjablonen in de buurt. Nu is deze kwestie natuurlijk eenvoudiger, er zijn veel verstandige sjablonen over verschillende onderwerpen, maar toch moet je kijken.

Ik breng 10 HTML-sjablonen van één pagina onder uw aandacht. Ik kan niet zeggen om welke reden de G Chrome-browser denkt dat de bestanden virussen bevatten of ongewenste software bevatten (ik heb dergelijke bestanden nooit gehad en heb ze ook niet), er staat geen markering in de Google-database dat de site onderworpen is aan sancties, de bestanden werden gecontroleerd door de betrouwbare en wijdverspreide virustotal-service. Dit moet ik nog uitzoeken. Als ik je niet heb overtuigd, controleer dan zelf de bestanden. Ik zal een screenshot van het eerste bestand bijvoegen, controleer de rest zelf.

Ik bewerk dit artikel op 29 juli 2016.

Ik heb het bovenstaande niet verwijderd, hoewel G Chrome mijn site en bestanden nu niet als een beveiligingsrisico beschouwt. Hoe ik dit deed en welke service ik gebruikte, zal ik in een van de volgende artikelen schrijven.

2. Nog een landingspagina “Videobewaking”. Prachtig ontwerp, animatie van pop-upformulieren, uitstekende galerij met pop-upbeschrijving, recensies;

3. Sjabloon “Installatie van deuren”. Eenvoudig en thematisch ontwerp, feedbackformulier, recensies;

4. Sjabloon “Internationaal vrachtvervoer”. Mooi design, feedbackformulieren, tijdaftelling met schuifregelaar, activiteitbeschrijving in pop-upvensters;

5. Sjabloon "Goederenvervoer". Uitstekend thematisch ontwerp, feedback- en bestelformulieren, animaties;

6. Sjabloon “Keuken op maat”. Thematisch ontwerp, feedbackformulieren, aftellen met schuifregelaar, beschrijvingen in pop-upvensters;

7. Nog een sjabloon voor ‘Aangepaste keukens’. Het ontwerp heeft minimalisme, feedbackformulieren, een galerij;

8. Sjabloon “Reparatie en inrichting van appartementen en kantoren.” Mooi en eenvoudig ontwerp, feedbackformulieren, recensies;

9. Sjabloon “Wimpers”. Goed ontwerp, feedbackformulieren, prijslijst, galerij;

Als je vragen hebt of hulp nodig hebt, schrijf dan in de reacties op het artikel, ik zal iedereen antwoorden, ik zal iedereen helpen.

Hallo. Sites van één pagina zijn nog steeds populair, en met goede reden. Ze hebben een aantal voordelen vergeleken met volwaardige sites met meerdere pagina's. Op een website van één pagina (ook wel landingspagina genoemd) concentreert iemand zich op één idee, één product, waardoor hij uw aanbod zonder afleiding kan bestuderen en eerder bereid is een verzoek achter te laten.

‘Oké’, zeg je, ‘ik heb besloten een landingspagina voor mezelf te maken, maar ik begrijp niets van programmeren.’ En dat is geen probleem. Nu zijn er veel tools om een ​​professionele website te maken zonder in de code te hoeven graven. Eén daarvan is het populaire CMS WordPress met de WPBackery- of ELementor-constructor.

In dit artikel heb ik coole WordPress-bestemmingspagina-sjablonen gegeven die geschikt zijn voor bedrijven, goederenverkopers, bureaus, freelancers en elk ander onderwerp. Dergelijke templates kunnen en moeten immers worden aangepast aan uzelf en uw aanbod.

Veel sjablonen gebruiken trendy toeters en bellen, zoals parallaxeffecten, plat ontwerp, foto's en video's op volledig scherm. Aanpassing voor mobiele apparaten is in elke sjabloon opgenomen.

Genoeg discussie, laten we eens kijken naar de selectie!

P.s. Als je meer in detail wilt weten wat een landingspagina is, dan heb ik deze vraag in detail besproken en 27 voorbeelden van landingspagina's gegeven.

Een selectie van 40 premium-sjablonen voor het maken van een landingspagina op het CMS WordPress1. Brug

Voor mij is dit een topsjabloon omdat het meer dan 376 demo's over verschillende onderwerpen bevat. Met dit sjabloon kun je totaal verschillende emoties overbrengen. Krachtig en intuïtief.

Dit ongelooflijke thema heeft een aanpasbare schuifregelaar, volledig aanpasbare headers, megamenu's, video-achtergronden, vaste of sticky header, verschillende headerlogo's, interactieve elementen, 7 verschillende portfolio-indelingen en nog veel meer, waardoor eindeloze mogelijkheden mogelijk zijn.

Maak een unieke presentatie van uw product of aanbieding. Er zijn visuele instructies in de tekst en ook video-instructies.

2. De7

Met een geavanceerd en uniek systeem van sjablonen kunt u niet alleen een landingspagina maken, maar deze ook zonder aanvullende instellingen in de hoofdprojectwebsite integreren. In de sjabloon vindt u veel kant-en-klare stijlen voor blokken waar veel vraag naar is op landingspagina's: teampresentatie, galerij, portfolio. Er zijn ook prachtige paginavoorlaadeffecten beschikbaar.

The7 staat trouwens nu op mijn blog.

3.BeTheme

Betheme is het grootste sjabloon qua functionaliteit en aantal vooraf ingestelde lay-outopties. Tegenwoordig zijn er meer dan 400 demo-bestemmingspagina's gebaseerd op dit thema. U kunt er een kiezen en deze aanpassen aan uw behoeften. Kant-en-klare landingspagina's op Betheme maken actief gebruik van:

• scrolleffecten - van parallax tot geanimeerde transformaties van ontwerpelementen
• achtergrondvideo's op volledig scherm
• "sociale" knoppen
• geanimeerde tellers
• online aanvraagformulieren
• portefeuillesecties
• rubriek "Onze medewerkers"

Nog enkele demo's:

Thema-updates worden automatisch uitgevoerd, updates van plug-ins worden met één druk op de knop uitgevoerd. De demosites gebruiken Revolution Slider. De sjabloon biedt 5 pagina-indelingsopties, 20 aangepaste kopteksten, een onbeperkt aantal stijlen voor Google Maps en veel stijlvolle pictogrammen.

Met de Muffin Builder-tool kunt u elk ontwerp maken zonder enige kennis van webontwikkeling. Indien gewenst kunt u css-regels en js-scripts toevoegen zonder de hoofdsjablooncode te beïnvloeden.

Selectie over het onderwerp:

Ronneby biedt hoge prestaties en een uitgebreid optiepaneel. De beste premium plug-ins voor het maken van WordPress-landingspagina's zijn aan de sjabloon toegevoegd. De sjabloonontwikkelaars besteden speciale aandacht aan gebruikersondersteuning: elke vraag wordt beantwoord met een snel antwoord waarin wordt beschreven hoe het probleem kan worden opgelost. Het thema is al gelokaliseerd voor twee talen, maar er zijn ook vertaalbestanden aan toegevoegd, zodat u meertalige ondersteuning voor sites kunt organiseren.

Nog een voorbeelddemo:

5. Jupiter

Flexibele en tegelijkertijd eenvoudig aan te passen sjabloon. Bevat 72 zogenaamde skins, over alle mogelijke onderwerpen. Handige administratie. paneel zal zelfs een beginner de paginabouwer en instellingen gemakkelijk kunnen begrijpen.

Er zijn handige tutorials van 240 pagina's en 20 video-tutorials over hoe u uw website geweldig kunt maken!)

De Jupiter-sjabloon is ook aangepast voor SEO. Google PageSpeed-tests laten goede resultaten zien, wat betekent dat zoekmachines uw site geweldig zullen vinden.

De sjabloon is schoon, netjes en maakt gebruik van hoogwaardige typografie. Door het gebruik van visuele effecten, zoals parallax, blijkt het thema levendig en is het erg prettig om naar zo’n site te kijken.

6.WoodMart

Een van de grootste WordPress-collecties. Sjablonen zijn geschreven door professionele webprogrammeurs en ontwerpen zijn getekend door gekwalificeerde experts op het gebied van visuele en UX-oplossingen. Dankzij dit kunt u elke sjabloon veilig installeren, elke sjabloon is klaar voor gebruik op een computer, mobiele telefoon of tablet. Premium plug-ins inbegrepen:

WP Backery

Slider-revolutie

Uitstekende aanpassing met WooCommerce (online winkel)

7.Brooklyn

Brooklyn heeft 16 demo-skins met verschillende thema's. De moderne stijl van de pagina's, de combinatie van afbeeldingen en lettertypen voegen elegantie toe aan elke site waarop dit thema is geïnstalleerd. Het portfolioblok is prachtig vormgegeven. De sjabloon is perfect voor bureaus en bedrijven. De sjablonen zijn gemaakt in donkere kleuren, wat vertrouwen geeft en vertrouwen wekt. De sjabloon is responsief en ziet er geweldig uit op alle apparaten.

Een soepel en eenvoudig sjabloon dat niemand onverschillig zal laten. Hoogwaardige typografie en interface-elementen zorgen ervoor dat deze sjabloon er prachtig uitziet. Genomineerd en winnaar van diverse bekende competities en ratings, zoals awwwards. Heeft meer dan 30+ skins met verschillende thema's om uit te kiezen

Niet alleen de website, maar ook de afbeeldingen zijn aangepast voor mobiele apparaten om er voor bezoekers handiger uit te zien.

9. H-code

De template is nieuw, maar heeft zichzelf al bewezen. Het heeft 8 thema's (meerdere pagina's, landing, zakelijk, portfolio, blog, e-commerce, stubs) met elk 3-12 skins. Naast zijn schoonheid en netheid heeft deze sjabloon simpelweg een arsenaal aan verschillende widgets en elementen. U kunt uw landingspagina mooi en functioneel maken. Een schuifregelaar nodig? Alsjeblieft. Portfolio, reviews, voordelen tonen? En dat is het ook.

10. Inheems

Native is een krachtig hulpmiddel om een ​​startup te promoten. WordPress-landingspagina-sjablonen op basis van het thema gebruiken verschillende parallax-effecten om tussen semantische blokken van de site te schakelen. Uitgebreide documentatie en video-tutorials helpen beginnende CMS-gebruikers snel de functionaliteit van het beheerpaneel te begrijpen. De plug-ins Visual Composer, Layer Slider en Slider Revolution zijn als gratis applicatie bij de sjabloon inbegrepen.

11. Opvallend

Salient is een veelzijdig thema met een responsief ontwerp dat vaak wordt gekozen door . Premium typografie en parallaxeffecten die verschijnen terwijl u door de pagina scrollt, helpen de indruk van de landingspagina te verbeteren. Optimalisatie van de framesnelheid zorgt voor vloeiende geanimeerde overgangen tussen blokken inhoud. De sjabloon maakt gebruik van adaptieve afbeeldingsformaten, waardoor pagina's snel worden geladen en verkeer wordt bespaard.

12. De edelsteen

TheGem is een modern thema voor creatieve projecten, SEO-geoptimaliseerd en aangevuld met een “responsieve” lay-out. Het lichte gewicht van de pagina's, de snelheid van het laden en de doordachte UX garanderen hoge prestaties van de sjabloon. Als u uw bedrijf wilt promoten met behulp van een landingspagina, is het de moeite waard om dit sjabloon te kopen, alleen al vanwege de SEO-vriendelijke code, die voor hoge posities in de Google-resultaten zorgt. De 11 beschikbare demoversies van landingspagina's houden rekening met de behoeften van diverse projecten.

Ontwerpelementen voor een website op TheGem worden aangepast met behulp van de Visual Composer-plug-in. De weergave van een grote hoeveelheid inhoud in landingsblokken (portfolio, recensies, services) wordt georganiseerd door middel van laden - automatisch of "per knop", evenals via een schuifregelaar voor het wisselen van tabbladen. De sjabloon biedt zes animatieopties voor het laden van sectiecomponenten die verschijnen wanneer u door de inhoud van de landingspagina bladert. De achtergrond van inhoudsblokken kunnen video's van Vimeo en YouTube zijn, of geëxtraheerd uit het bestandssysteem van de site met behulp van html5.

13. Marketingprofessional

Marketing Pro is een sjabloon ontworpen met conversie, marketing en SEO in gedachten. Elk van de 9 demosites erop is gemaakt rekening houdend met de kenmerken van een specifieke marketingniche. Als bonus bij het adaptieve ontwerp van de landingspagina zijn er gestileerde sjablonen voor blokken voor de organisatie van evenementen.

Oshine is een van de best verkopende creatieve thema's. Met een prachtig ontwerp en krachtige functionaliteit kan deze sjabloon worden gebruikt om landingspagina's te maken voor creatieve projecten en bedrijven. Vijftig modules voor het aanpassen van het uiterlijk van de site, die elk zorgvuldig zijn ontworpen, helpen bij het verkrijgen van ideale resultaten. De optie “ongedaan maken/opnieuw uitvoeren” en de mogelijkheid om “sneltoetsen” aan bepaalde acties toe te wijzen, vereenvoudigen het installatieproces.

15. Jevelin

Jevelin is een sjabloon met een premium responsief ontwerp waarmee u eenvoudig landingspagina's en sites van één pagina op Wordpress kunt maken. Het thema zal helpen het project in korte tijd te lanceren. Dankzij een verscheidenheid aan aanpassingstools - 9 headeropties in verschillende lay-outs, 40 unieke elementen, die elk afzonderlijk kunnen worden gestyled, ingebouwde functionaliteit voor het organiseren van reposts op sociale netwerken, 6 stijloplossingen voor het ontwerpen van de portfoliosectie - is het aanpassen van skins sneller dan ooit.

16. Kalium

Kalium is een onderwerp waar vertegenwoordigers uit verschillende vakgebieden terechtkomen om een ​​website te krijgen om hun diensten te promoten. Bij het ontwerpen van websites op Kalium wordt bijzondere nadruk gelegd op typografie - hiervoor is een gespecialiseerde bibliotheek voor het beheer van lettertypen verantwoordelijk. De sjabloon kan 4000 lettertypen gebruiken: Google, Typekit, Font Squirrel, premium en aangepast (geüpload door de gebruiker).

17. Inkomend

Inbound is een sjabloon die het maken van sites van één pagina voor applicaties, e-books, videocursussen en soortgelijke producten kan vergemakkelijken. Ontwerpaanpassing wordt gedaan met behulp van de visuele landingspaginagenerator Landing Page Builder. Met de sjabloon kunt u ook een minisectie in landingspagina-indeling toewijzen aan elk gepromoveerd product binnen één site en deze kan worden gebruikt voor productcategoriesecties in WooCommerce.

18. Intact

Intact is een thema met meerdere opties dat is ontworpen om u te helpen uw online zakelijke problemen op te lossen. Het bevat zulke belangrijke componenten van een moderne landingspagina als: 'Tarievenplannen' en 'Bedrijfsmedewerkers'-blokken, een schuifregelaar met recensies, sets met thematische pictogrammen, abonnementsformulieren en een online consultant.

19. Komeet

Comet is een volledig responsieve pixel-perfecte sjabloon voor Visual Composer en . Gebruikers krijgen 5 skins voor landingspagina's aangeboden, die de volgende effecten implementeren: tekstschuifregelaar, parallax, achtergrondvideo - geïmporteerd van YouTube of ingebouwd in html5, geanimeerde zoomschuifregelaar. Nieuwe gebruikers zullen de thema-instellingen gemakkelijk begrijpen bij het maken van WordPress-landingspagina's - instructies en video-tutorials zijn online beschikbaar.

20. LeadEngine

Een universeel WordPress-thema dat alles heeft wat je nodig hebt om een ​​landingspagina te maken:

• 200 blokken om in willekeurige volgorde tot een sjabloon te “assembleren”;
• aanpassingsvermogen in elk stadium;
• 35 volledig ontworpen pagina's - u kunt eenvoudig tekst en foto's wijzigen;
• hoge downloadsnelheid - 94% sneller dan gemiddeld.

Ontwikkelingsontwerpen kunnen vóór aankoop worden geëvalueerd. Kleurenschema's en instellingen worden gewijzigd in de visuele editor. De auteurs beloven op elk moment ondersteuning.

De ontwikkelaar biedt een websitesjabloon over verschillende onderwerpen - van bouw tot veterinaire diensten. Eenvoudige en effectieve landingspagina's helpen potentiële klanten uw voordelen, arbeidsomstandigheden en andere noodzakelijke details over te brengen. Het ontwerp is responsief en ziet er goed uit op alle apparaten, van Retina-monitoren tot mobiele gadgets. Er zijn plug-ins voor portfolio, openingstijden, kalender en aangepaste pictogrammen.

22. Broedmachine

“Een ideaal thema voor een startup”, zeggen de auteurs over hun ontwikkeling. Het lichte, minimalistische ontwerp van 2019 is geschikt voor webwinkels, evenementenbureaus en vele andere soorten bedrijven voor visitekaartjes of doorontwikkeling naar een groter project. Inbegrepen:

• visueel ontwerper - details veranderen online;
• mobiel aanpassingsvermogen;
• WooCommerce is de beste plug-in voor online winkels;
• ondersteuning voor elke taal.

23. Phlox Pro

Een multi-template template met dertig demo's waarin je alleen de gewenste tekst kunt invoegen. Ze bieden ook meer dan 90 sjablonen voor sliders en effecten, en meer dan 130 opties voor individuele pagina's. Inbegrepen zijn 9 hoofdplug-ins die handig zullen zijn voor het promoten van een website voor visitekaartjes of een grotere bron. Dit alles met korting, momenteel beschikbaar voor $ 30. Een van de meest populaire sjablonen voor landingspagina's.

24. Porto

Nog een ontwerper met meerdere sjablonen voor bestemmingspagina's en visitekaartjes. Schone code met een eindeloos aantal opties voor het selecteren van kop- en voetteksten zonder dat u hoeft te leren programmeren. Veel ontwerpen waarvan elementen eenvoudig te vervangen zijn dankzij de grid plugin. Via geavanceerd zoeken kunt u eenvoudig van een website van één pagina een volwaardige winkel maken. Support staat altijd klaar om vragen te beantwoorden.

Misschien ben je geïnteresseerd:

25.XTRA

Goedkope en populaire multi-sjabloon voor landing, die verschilt:

professionele designer-blanco's - slechts 55 stuks;

snelle respons door optimalisatie;

maatwerk met behulp van slepen en neerzetten;

meer dan 200 blokken voor inhoud;

meer dan 1000 opties.

Professionele websites over elk onderwerp die u eenvoudig met één klik kunt installeren en gebruiken. Moderne ontwerpen die niet saai zijn en er fris en mooi uitzien.

26. Av

“Multi-template van een nieuwe generatie” is een gewaagde uitspraak, maar dit is precies wat de auteurs over hun product zeggen. Voor slechts € 35,- krijg je:

• 200 landingspagina's met een prachtig “Europees” design;
• WooCommerce en geavanceerde bestelformulieren;
• installatie in een minuut;
• instellingen voor portfolio, schuifregelaars.

De Elementor visuele editor-plug-in is echt bijgewerkt naar de nieuwste versie en is zeer gemakkelijk te gebruiken.

27. De ark

“De beste onder de 9500”, merken de ontwikkelaars op. De sjabloon richt zich op mensen die nog nooit hebben gecodeerd. Ontwerpaanpassing wordt uitgevoerd met behulp van de visuele ontwerperplug-in Elementor, waarmee u in een één-op-één-modus kunt werken, zonder installaties van derden te gebruiken en onmiddellijk de volledig werkende functionaliteit van een van de 300 sjablonen kunt gebruiken. Handig en snel op te zetten.

28.Amedeo

Prachtig design in een bijzondere kleurstelling. De nadruk ligt niet alleen op het elegante design, want hij wordt aangeboden om in een set te kopen:

WooCommerce-plug-in voor online winkel;

geavanceerde plug-in voor contactformulieren;

een selectie scrolleffecten in verschillende stijlen;

een selectie animaties.

Schone en duidelijke WordPress-sjabloon voor visitekaartjes en online winkelen. In de winkelmodus zijn er instellingen voor productkenmerken en zoek ernaar.

29. Bolge

Een selectie schattige landingspagina's in een moderne, elegante platte stijl. Door handmatig elementen te tekenen, kunt u opvallen en herinnerd worden door potentiële klanten. De prijs is inclusief basisplug-ins en widgets - van een visuele editor tot een parallax-effect voor het plaatsen van een achtergrond of portfolio. U kunt verschillende weergaven aanpassen in de desktop- en mobiele versies; aanpassingsvermogen is standaard ingeschakeld.

30. Makoto

Verschillende oplossingen voor ontwerpers, fotografen, kunstenaars. Dankzij handige voorinstellingen voor het plaatsen van een portfolio kunt u deze beschermen tegen kopiëren en laden terwijl de gebruiker deze bekijkt, wat laadtijd bespaart. Gemakkelijk video's downloaden. Er is een mogelijkheid om te bloggen. Elementen voor het plaatsen van infographics zijn voorbereid. De visuele ontwerper helpt u alle details eenvoudig te configureren.

32. Landschapsarchitectuur

De ontwikkelaars hebben een interessant “groen” ontwerp gemaakt voor landschapsdiensten, tuinhulp en eco-thema's. Het werkstuk kan echter voor andere doeleinden worden gebruikt. Mooie pictogrammen, schone Google-lettertypen, uitstekend reactievermogen en uiterlijk, ook op Retina-apparaten, impliceren het wijdverbreide gebruik van WordPress-thema's.

33. Crowdmerc

Gemaakt voor de nieuwste versie van WordPress. Het sjabloon wordt voortdurend bijgewerkt. Functionaliteit voor een online winkel wordt geboden via een handige plug-in voor geavanceerd zoeken en bestellen. Er zijn ook presets voor evenementen, kalenderdata en opnames. Gebruikte Elementor om nieuwe pagina's te maken. Ondersteunt eventuele extra plug-ins.

34. Geloofwaardigheid

Een creatief 'muzikaal' thema zal door bezoekers worden herinnerd vanwege het heldere ontwerp, en de site-eigenaar zal geïnteresseerd zijn in:

• ontwikkelingen voor landingspagina's en interne pagina's - onbeperkte mogelijkheid om de bron te ontwikkelen;
• installatie met één klik;
• WYSIWYG-installatie;
• de mogelijkheid om muziek, video en slider-effecten toe te voegen.

»Gratis landingspagina WordPress-sjablonen - TOP 30

Gratis WordPress-sjablonen voor landingspagina's - TOP 30

In dit artikel worden specifiek de beste landings-WordPress-sjablonen besproken die mogelijk geschikt voor u zijn. Ze bevatten allemaal een screenshot en een demoversie van het ontwerp, zodat u het thema kunt evalueren en direct kunt downloaden als u het leuk vindt.

Heel vaak worden landingssjablonen voor WordPress tegen betaling verspreid, maar voor jou heb ik ze verzameld beste en gratis in dit artikel om uw zoekopdracht gemakkelijker te maken.

Mogelijk bent u ook geïnteresseerd in Voor degenen die op zoek zijn naar hosting 1.

is een thema van één pagina waarmee u zonder veel moeite een website kunt maken. Aan de andere kant heeft het een professioneel getekend ontwerp, parallax scrollen, waardoor we dit thema “mooi” kunnen noemen. Deze sjabloon is geschikt voor startups en kleine bedrijven.

2.

is een multifunctioneel WordPress-thema. Het bevat een heldere interface, een klassiek parallax-effect en andere animaties die het bekijken van het thema nog leuker maken. Zerif Lite is een cross-browser thema dat ook qua code goed geschreven is.

3. Alhena Lite

Alhena Lite is een gratis zakelijk WordPress-thema dat volledig is geïntegreerd met de WooCommerce-plug-in, zodat u eenvoudig uw online winkel kunt opzetten.

4.

is een strak, eenvoudig zakelijk thema dat volledig responsief is en veel van de populaire functies bevat om het maken van websites eenvoudig te maken.

5. Palmas

Palmas is een modern thema gemaakt in lichte kleuren, dat geschikt is voor het runnen van een persoonlijke of modeblog. Deze sjabloon ondersteunt ook plug-ins zoals Yoast SEO, GravityForms, Pirate Forms, W3 Total Cache en vele anderen.

6. Brasserie

Brasserie is een eenvoudig WordPress-sjabloon dat perfect is voor een restaurant, café of culinaire site. Bevat animatie-effecten, evenals een grote hoeveelheid functionaliteit.

7. XT Corporate Lite

XT Corporate lite is een eenvoudig en minimalistisch thema dat geschikt is voor een klein product of dienst.

8.

is een aangenaam thema uitgevoerd in lichte kleuren. Bevat verschillende animaties en visueel verbluffende overgangen en parallax-effect. Daarnaast ondersteunt Freesia Empire plug-ins zoals Breadcrumb NavXT, WP-PageNavi, Contact Form 7, Jetpack van WordPress.com, Polylang, Newsletter, bbPress en WooCommerce.

9.

is een onderwerp dat geschikt is voor de presentatie van kleine of middelgrote bedrijven. Het bevat een groot aantal functies en add-ons voor een volledig beheer van de landingsstructuur.

10.

is een veelzijdig thema met veel functionaliteit. Het is adaptief, alle elementen zijn geanimeerd met een parallax-effect. Eén pagina is eenvoudig aan te passen en stelt u in staat wijzigingen in realtime te bekijken. Het huidige landingsthema ondersteunt ook een groot aantal standaard WordPress-plug-ins.

11. Fotografie

FotoGraphy is een landingspagina die geschikt is voor fotografen of ontwerpers. Eenvoud en de aanwezigheid van een groot aantal functies maken het nog schaalbaarder en aanpasbaarder.

12. Integraal thema

Integraal Thema is een parallaxthema van één pagina dat geschikt is voor creatieven, bedrijfseigenaren of agenten. Het kost u slechts een paar minuten om het in te stellen.

13. Vierkant

Square is een minimalistisch thema dat voor elk type website kan worden gebruikt. Het is het meest geschikt voor kleine en middelgrote bedrijven. Square is geconfigureerd voor veel populaire WordPress-plug-ins en is ook SEO-geoptimaliseerd.

14. Verlevendigen

Enliven is een thema van hoge kwaliteit. Ik zou het premium noemen, omdat het kwaliteit en schoonheid in één fles combineert. Het ondersteunt ook veel populaire plug-ins en is eenvoudig aan te passen.

15. Latte

Latte is een sjabloon voor fotografen. Het heeft alles zodat u uw portfolio adequaat kunt laten zien en over uzelf kunt vertellen. De installatie vindt plaats met een paar klikken.

16. De maandag

De maandag is een elegant thema dat geschikt is voor een bedrijf of freelancer. Het wordt geleverd met een groot aantal functies en add-ons en add-ons.

17. Zakenwereld

Business World is een sjabloon die gerelateerd is aan zakelijke onderwerpen. Het combineert stijl en kwaliteit. De zakenwereld kan ook worden aangepast voor een persoonlijke, zakelijke of fotograafwebsite. Dankzij de mogelijkheden kunt u er bijna alles van maken wat u maar wilt.

18.

- Dit is een prettig thema, gemaakt in lichte kleuren. Het is perfect voor kleine en middelgrote bedrijven, maar ook voor een persoonlijke website. Je kunt er alles in aanpassen wat je maar wilt. Er zijn veel functies en toevoegingen die deze sjabloon nog beter en aantrekkelijker maken.

19. Eén toon

Onetone is een sjabloon van één pagina voor WordPress die geschikt is om ‘ik’ op internet te presenteren (laat uw portfolio zien en/of praat over uzelf).

20. Sta op

Arise is een minimalistische WordPress-sjabloon van één pagina die geschikt is voor een klein product of een klein bedrijf. Er zit niets overbodigs in, alleen het allerbelangrijkste.

21. Woot

Woot is een minimalistische sjabloon gemaakt in donkere kleuren voor het runnen van een online winkel. Het werkt met WooCommerce en vele andere populaire plug-ins.

22. Westen

West is een eenvoudig thema dat geschikt is voor een bureau-, kleine onderneming of portfoliowebsite. Het bevat een groot aantal functies, instellingen en rangschikking van elementen.

23. Anaglyph Lite

Anaglyph Lite is een eenvoudige en elegante sjabloon die geschikt is voor bloggen en online winkels. Het is al geconfigureerd met WooCommerce en andere populaire plug-ins.

24.

Gegroet, mijn beste lezers. Vandaag zullen we het hebben over technische aspecten waarmee we de verkoopconversie van onze goederen of diensten kunnen vergroten. Een van de belangrijke punten is een goed ontworpen landingspagina met producten. De zogenaamde landingspagina, waarvan we het later zullen bespreken en kant-en-klare paginacodes krijgen.

Wat is een landingspagina? Dit is de pagina waar mensen meestal op terechtkomen nadat ze op een advertentie hebben geklikt. Gemaakt voor één aanbieding: product, dienst of abonnement. Een effectieve landingspagina is de hoeksteen van succesvolle online marketing. Het product is misschien wel het beste op de markt, de advertenties zijn geperfectioneerd, maar zonder een goede landingspagina leveren inspanningen geen 100% resultaat op. Het vertelt bezoekers wat er wordt aangeboden en waarom ze het zouden willen hebben. Een gevoel van urgentie draagt ​​bij aan snelle besluitvorming en de transitie van de gebruiker naar de categorie cliënt.

Hoe maak je een landingspagina? Het is verkeerd om te geloven dat het antwoord ligt in het vermogen om te zetten. Een goede landingspagina is het resultaat van gecoördineerd werk aan doelen, tekst, ontwerp en code. Landingspagina's, waarvan voorbeelden hieronder staan, zullen beginners helpen de basisprincipes van het werken met lay-out te leren, maar zullen conversieteksten en begrip van de doelgroep niet vervangen. U kunt ze ook maken met behulp van verschillende ontwerpers van bestemmingspagina's.

Voordat u een landingspagina maakt, moet u zich dus het volgende afvragen:

• Wat zal een persoon doen nadat hij op de landingspagina is beland? Zal hij iets kopen? Vul jij het formulier in? Abonneren op de nieuwsbrief? Voordat u uw conversiepercentage bijhoudt, moet u duidelijke doelen stellen.
• Wie zijn mijn concurrenten? In werkelijkheid zijn dit drie vragen: wie, hoe succesvol zijn ze en hoe kunnen hun prestaties worden toegepast? Imitatie is de meest oprechte vorm van vleierij. Als uw concurrenten iets doen dat werkt, repliceer het dan op uw site.
• Wie is mijn publiek? Hoe beter u uw niche en doelgroep begrijpt, hoe groter de kans dat uw inspanningen vruchten afwerpen.

U moet alle noodzakelijke informatie aanbieden, maar niet zozeer dat u uw potentiële klant overweldigt en wegjaagt.

Voorbeelden van het maken van een landingspagina + coderen voor dummies

Voordat we beginnen, laten we eerst even kijken naar HTML en CSS. Als u begrijpt hoe ze werken, kunt u een landing maken.

HTML is een browser-opmaaktaal voor websitevisualisatie. Geschreven met tags tussen punthaken die de inhoud definiëren.

De tag opent () en sluit () rond de vulling:

inhoud

Voor verfijning worden attributen toegevoegd achter de naam:

inhoud

CSS - definieert hoe HTML-elementen moeten worden gerangschikt. Bestaat uit selectors, eigenschappen en waarden:

#selector (eigenschap: waarde;)

De selector komt overeen met de naam van een specifieke tag in HTML. Door waarden te wijzigen en eigenschappen toe te voegen, wordt het uiterlijk aangepast. U kunt pagina's maken die er verschillend uitzien door verschillende CSS-stijlen op dezelfde HTML toe te passen.

5 eerste stappen

Voor een snelle lay-out gebruiken we een sjabloon met een minimaal ontwerp op basis van bootstrap. Dit is een systeem met eigen selectors, dat over de hele wereld wordt gebruikt om de lay-out te versnellen.

Het ziet er bescheiden uit.

Van deze vis wordt in verschillende fasen een website voor elke smaak gemaakt.

Directorystructuur in de map:

• index.html: Dit is het hoofdbestand dat we gaan bewerken.
• /assets: hulpbestanden bevinden zich hier:
• /css: De map bevat bootstrap- en pictogramstijlen. Het bestand dat we gaan bewerken is main.css.
• /img: map voor siteafbeeldingen.
• /fonts: pictogramlettertypen.
• /js: bootstrap javascript-bestanden.

Stap 1: Een koptekst gebruiken

De kop en subkoppen zijn belangrijke plaatsen die helpen de waarde van het aanbod op een duidelijke manier over te brengen.

Laten we de titel en naam van de site wijzigen. Hier heb je geen typevaardigheden nodig: je schrijft je eigen tekst op de geel gemarkeerde plaatsen op het scherm.

Stap 2. Beknoptheid is de zuster van bekering. Voordelen en tarieven toevoegen

Je hebt 4 secties nodig:

• voordelen;
• tarieven;
• beoordelingen;
• oproep tot actie.

Laten we een sectie van de hoofdinhoud “main” maken, waarin we de nodige secties zullen invoegen:

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

Vul met vulling in plaats van stippen.

Voor het voordelengedeelte heeft u deze code nodig:

Voordelen
Snel

Betrouwbaar

Sed diam nonummy

Winstgevend

Elit, sed diam nonummy

Technisch gezien

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

Betrouwbaar

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

Winstgevend

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

Technisch gezien

Lorem ipsum dolor sit amet, consectetuer adipiscing

Betrouwbaar

Lorem ipsum dolor sit amet, consectetuer adipiscing

Winstgevend

Lorem ipsum dolor sit amet, consectetuer adipiscing

Inhoud voor de duidelijkheid:

Het ziet er nog steeds slordig uit, maar er is geen reden tot paniek, laten we doorgaan.

Wij schrijven prijzen op. De inhoud verandert op dezelfde manier als in de eerste stap. Algemene beschrijving met de klasse “tarieven” en drie tarieven.

Tariefplannen

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Als u een minimum aan inspanning heeft, is de inspanning die u moet doen om de lobortus te voorkomen niet van toepassing op de gebruikelijke gevolgen.

Tarief nr. 1
$10

per maand/per persoon

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Volgorde
Tarief nr. 2
$20

per maand/per persoon

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Volgorde
Tarief nr. 3
$30

per maand/per persoon

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Volgorde

Het ziet er zo uit.

Hoewel we niet geïnteresseerd zijn in het uiterlijk van de toekomstige landingspagina, zullen we hieronder voorbeelden van veranderende stijlen bekijken.

Stap 3: Vertrouw op signalen en oproep tot actie

Het gebruik van gerichte signalen geeft bezoekers aan dat het merk betrouwbaar is. Signalen kunnen vele vormen aannemen, maar de klassieke vorm is feedback van klanten.

Klantrecensies

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut arbeid en 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."
“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."

Laten we een call-to-action instellen.

Voordeel als u vandaag bestelt

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Als u een minimum aan inspanning heeft, is de inspanning die u moet doen om de lobortus te voorkomen niet van toepassing op de gebruikelijke gevolgen:

Bestel nu!

Recensies helpen potentiële klanten om het product te kopen. Voor de duidelijkheid hebben we avatars nodig, dus we schrijven ze onmiddellijk op hun plaats - onder elk citaat.

Klantnaam.

Stap 4: Grid- en mobielvriendelijke integratie

Om het raster te implementeren hebben we Bootstrap-containers nodig. Het is belangrijk om het totale aantal geldige kolomsegmenten te onthouden: 12. De klasse bepaalt de breedte van de inhoudsweergave. Het goede aan dit kant-en-klare raster is dat de containers zijn ontworpen met het oog op reactievermogen en onmiddellijk bruikbaar zijn op mobiele apparaten. Gedetailleerde beschrijving op de officiële website. Het raster ziet er als volgt uit.

De inhoud van “main” wordt in een container verpakt. Om dit te doen, staat bovenaan het volgende:

… .

Als u wilt dat het blok over de gehele breedte van het scherm past, wordt de container erin geplaatst. Hier zal het een jumbotron zijn en een oproep tot actie.

Alle elementen die op elkaar moeten worden geplaatst, omwikkelen we met lijnscheidingstekens.

We kunnen nu de breedte van de kolommen aanpassen, waarbij we ons concentreren op het bootstrapraster. Na het inpakken bleef de vulling niet meer aan de randen van het scherm plakken en verschenen er nette inkepingen.

We stellen prijzen op rij vast met behulp van de kolomklasse col-lg-4. Binnen rijlijnen is het niet langer nodig om afzonderlijke div's te schrijven om ze in te pakken; ze kunnen worden gecombineerd met bestaande div's, gescheiden door een spatie.

Naar analogie hebben we kolommen ingesteld voor de sectie beoordelingen en voordelen. Als u een element naar de zijkant moet verplaatsen, gebruikt u de offsetkolomklasse col-lg-offset-2. Het getal aan het einde bepaalt bij hoeveel basiskolommen de verschuiving zal plaatsvinden.

Stap 5. Lettertypen en pictogrammen

We implementeren koplettertypen van Google Font. Indien geselecteerd, opent u het importtabblad en kopieert u de gegevens ervan naar het main.css-bestand. We voegen ook titelkiezers toe aan het bestand waarvoor het nieuwe lettertype wordt gebruikt.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* lettertype voor koppen importeren */
.navbar-merk,
h1,
h2,
h3,
h4,
h5,
h6 (
lettertypefamilie: "Roboto Condensed", schreefloos; /* Googlefont-uitvoer */
}

Voor de duidelijkheid worden de voordelen beschreven door een klasse met de voor zichzelf sprekende naam text-center en FontAwesome-pictogrammen uit de bootstrap-set.

Op dit punt is de voorbereiding volledig voltooid.

Landingspagina: voorbeelden van codes met aanbieding, parallax en teller

We gebruiken de drie populairste typen: met een zin, een formulier en met een aftelteller. Naarmate de lay-out vordert, wordt het sjabloon aangevuld met effecten.

Voorbeeld 1: met een zin

Laten we de achtergrond van het hoofdgedeelte en de opvulling zo instellen dat het eerste scherm bedekt is.

Jumbotron (
achtergrond: #f5f5f5 url(../img/fon.jpg) midden bovenaan niet-herhaling;
maximale breedte: 100%;
opvulling bovenaan: 250px;
opvulling-bodem: 200px;
tekst uitlijnen: centreren;
}

Laten we de jumbotron-headergrootte wijzigen van h2 in h1. Vervolgens schrijven we stijlen voor de elementen die moeten worden gewijzigd.

Laten we beginnen met de pictogrammen.

Voordelen ik(
kleur: #cac4c4;
}

Na het hekje wordt een kleur gespecificeerd. U kunt uw eigen optie kiezen met behulp van html-kleurentabellen of een afbeeldingseditor.

Inspringing voor sectiekoppen

sectie h2 (
opvulling bovenaan: 30px;
marge-onder: 25px;
}

We zijn de schijn van tarieven aan het opruimen. Voor het gemak creëren we onze eigen klassen voor de elementen die we specifiek willen benadrukken.

Tarief nr. 1
$10

per maand/per persoon

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Volgorde

En veel CSS. Voor welke plaatsen de secties verantwoordelijk zijn, staat vermeld in de opmerkingen - /* tussen schuine strepen met een asterisk */

/* =========Tarievenstijlen======== */
/* algemeen beeld van het tarief */
.pricing_item(
achtergrond: #f2f2f2;
positie: relatief;
weergave: -webkit-flex;
weergave: flex;

flex-richting: kolom;

items uitlijnen: uitrekken;
tekst uitlijnen: centreren;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
vulling: 2em 3em;
marge: 1em;
kleur: #262b38;
cursor: standaard;
overloop: verborgen;

}
/* verander achtergrond wanneer erop wordt geklikt */
.pricing_item: hover (
kleur: #444;
achtergrond: #daebef;
}
/* individuele prijskaartjeachtergrond in elk tarief */
.pricing_item:eerste kind .price (
achtergrond: #9ba9b5;
}
.pricing_item:n-kind(2).prijs (
achtergrond: #1f6098;
}
/* op brede schermen is de middelste tariefkolom ingesprongen en gemarkeerd */
@mediascherm en (min.breedte: 66.250em) (
.pricing_item(
marge: 1,5em 0;
}
.uitgelicht(
z-index: 10;
marge: 0;
lettergrootte: 1.15em;
}
}
/* titel */
.pricing_item h3 (
lettergrootte: 2em;
marge: 0,5em 0 0;
kleur: #1d211f;
}
/* prijskaartje achtergrond */
.prijs (
lettergrootte: 2em;
lettertypegewicht: vet;
kleur: #fff;
positie: relatief;
z-index: 100;
lijnhoogte: 95px;
breedte: 100px;
hoogte: 100px;
marge: 1,15em auto 1em;
randradius: 50%;
achtergrond: #77a5cc;
-webkit-overgang: kleur 0,3s, achtergrond 0,3s;
overgang: kleur 0,3s, achtergrond 0,3s;
}
/* munteenheid */
.munteenheid(
lettergrootte: 0,5em;
verticaal uitlijnen: super;
}
/* verduidelijking van het voorstel */
.zin(
lettertypegewicht: vet;
marge: 0 0 1em 0;
opvulling: 0 0 0,5em;
kleur: #2a6496;
}
/* lijst */
.pricing_item ul (
lettergrootte: 0,95em;
marge: 0;
vulling: 1,5em 0,5em 2,5em;
tekst uitlijnen: links;
}
/* lijstitems */
.pricing_item li (
opvulling: 0,15em 0;
}
/* knop voor tariefbestelling */
.pricing_item-knop (
lettertypegewicht: vet;
marge-top: auto;
vulling: 1em 2em;
kleur: #fff;
randradius: 5px;
achtergrond: #428bca;
-webkit-overgang: achtergrondkleur 0,3s;
overgang: achtergrondkleur 0,3s;
}
/* kleur veranderen wanneer knop wordt ingedrukt */
.pricing_item-knop: zweven,
.pricing_item-knop:focus (
achtergrondkleur: #285e8e;
}
/* tariefachtergrond*/
.bg-2 (
achtergrond: #dddddd;
}

Resultaat

Klantrecensies. Laten we ze eens netjes bekijken en hun locatie aangeven.

/* =========Getuigenisstijlen======== */
getuigenissen (
opvulling: 4em 0;
tekst uitlijnen: centreren;
}
.getuigenissen .avatar img (
randradius: 50%;
zweven: links;
weergave: inline;
marge-rechts: 1em;
breedte: 65px;
hoogte: 65px;
marge-onder: 30px;
}
.getuigenissen .avatar p (
tekst uitlijnen: links;
vulling bovenkant: 1em;
kleur: #5d5d5d;
lettertypegewicht: 900;
}

Het enige dat overblijft is het verfraaien van de laatste call-to-action en de voettekst.

/* Actie */
.actie(
achtergrond: #476177;
min-hoogte: 180px;
breedte: 100%;
opvulling: 4em 0;
tekst uitlijnen: centreren;
}
.actie h2 (
kleur: #fff;
lettertypegewicht: 300;

}
.actie p(
kleur: #fff;
tekstschaduw: 0 1px 2px rgba(0, 0, 0, .2);
lettergrootte: 1,2em;
}
.actie .container (
marge-top: 3em;
}
/* Voettekst */
voettekst (
achtergrond: #333333;
opvulling: 1em 0;
tekst uitlijnen: rechts;
}
voettekst p(
kleur: #fff;
lijnhoogte: 1;
teksttransformatie: hoofdletters;
lettergrootte: 0,7em;
marge-top: 0,5em;
}

Aan de voettekstknop is de ingebouwde bootstrapklasse btn-default toegewezen.

Het sjabloon tot leven brengen. We introduceren soepel scrollen en knoppen voor secties, evenals tekstanimatie op het eerste scherm.

Om de overgangen te laten werken, zullen we enkele sectieklassen vervangen door id - voor voordelen en tarieven. En we zullen links naar de id aan de knoppen toevoegen. Screenshot - wat aan wat is bevestigd, gemarkeerd met een gele markering.

We stellen inspringingen in voor knoppen - jbutton. Scrollen wanneer ingedrukt werkt, maar zeer abrupt.

Vloeiende overgangen worden gemaakt met behulp van javascript of jquery. Deze laatste is standaard verbonden met Bootstrap-sjablonen.

Het scrollen gaat nu soepel.

Animatie aan tekst toevoegen met Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Dit is een kant-en-klare open source-code en kan op elke website worden gebruikt. Plaats het bestand van Github in de css-map en geef het pad op.

We selecteren de effecten hier: https://daneden.github.io/animate.css/. We hebben fadeInDown geselecteerd. Het staat als volgt in de code geschreven:

Wanneer de pagina nu wordt geladen of vernieuwd, wordt de tekst geanimeerd. Klaar.

Voorbeeld 2: met vorm en parallaxeffect

Hoe meer formuliervelden een bezoeker te zien krijgt, hoe kleiner de kans dat hij deze invult. Vraag alleen om de minimaal noodzakelijke informatie.

Het is naar analogie samengesteld. We zullen achtergronden en kleuren veranderen. En natuurlijk voegen we een vorm toe.

Laten we beginnen met parallax.

Laten we de achtergrond van de jumbotron veranderen in transparant:

achtergrond: transparant;

In head zullen we het script invoegen:

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

De eerste lijn in het lichaam is een container voor parallax:

En in CSS is het gedrag:

Bgparallax (
achtergrond: url(/../img/fon.jpg) herhalen;
positie: vast;
breedte: 100%;
hoogte: 300%;
bovenaan:0;
links:0;
z-index: -1;
}

Parallax is klaar. Maar als u wijzigingen in de code en een nieuwe achtergrond aanbrengt, moet u het kleurenschema opnieuw toewijzen.

Het menu donker maken:

Navigatiebalk-standaard (
achtergrondkleur: #333;
randkleur: #444;
kleur: donkergrijs;
randradius: 0;
}

Navbar-standaard .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
kleur: donkergrijs;
achtergrondkleur: rgba(0, 0, 0, 0,5);
}

We vervangen de zin in jumbotron door een nieuwe - met de formuliercode:

Landingspagina verandert bezoekers in klanten
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.

  
  

En wij schrijven het uiterlijk voor

/* formulier */
.headform-lijst(
lijststijltype: geen;
lijnhoogte: 26px;
lettertypegewicht: 400;
opvulling: 0px;
marge-onder: 40px;
}
.hoofdvorm(
overloop: verborgen;
positie: relatief;
achtergrondkleur: rgba(0,0,0,.4);
opvulling: 35px 40px;
grensradius: 8px;
}
invoer, knop, selecteren, tekstgebied (
breedte: 100%;
marge-onder: 10px;
}
.headform-lijst li .fa (
positie: absoluut;
bovenaan: 0px;
links: 0px;
breedte: 42px;
lettergrootte: 24px;
tekst uitlijnen: centreren;
}
.headform-lijst li (
positie: relatief;
min-hoogte: 38px;
opvulling links: 62px;
marge-onder: 20px;
}
.jumbotron p (
kleur: #fff;
lettergrootte: 16px;
lettertype: cursief;
}

Ook de tekst van de jumbotron kwam hier terecht, omdat deze om veranderingen vroeg.

Wij veranderen de tarieven.

/* algemeen beeld van het tarief */
.pricing_item(
achtergrondkleur: rgba(0,0,0,.4); /* regel gewijzigd */
randradius: 4px; /* regel gewijzigd */
positie: relatief;
weergave: -webkit-flex;
weergave: flex;
-webkit-flex-richting: kolom;
flex-richting: kolom;
-webkit-align-items: stretch;
items uitlijnen: uitrekken;
tekst uitlijnen: centreren;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
vulling: 2em 3em;
marge: 1em;
kleur: #f2f2f2; /* regel gewijzigd */
cursor: standaard;
overloop: verborgen;
vakschaduw: 0 0 15px rgba(0, 0, 0, 0,05);
}
/* verander achtergrond wanneer erop wordt geklikt */
.pricing_item: hover (
kleur: #444;
achtergrond: #ddd; /* regel gewijzigd */
}

Nu zien ze er zo uit: een transparante achtergrond en afgeronde hoeken.

Het sjabloon is klaar.

Voorbeeld 3: met aftelteller

We veranderen de vulling van de jumbotron opnieuw en kleuren de sjabloon opnieuw in zodat deze overeenkomt met de nieuwe achtergrond, vergelijkbaar met de vorige sjabloon. Verbind het tegenscript:

HTML





De tijd wacht niet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Als u een minimum aan inspanning heeft, is de inspanning die u moet doen om de lobortus te voorkomen niet van toepassing op de gebruikelijke gevolgen. Dit is een zeer pijnlijke ervaring in het vulputaire velit esse die daaruit voortvloeit, waardoor een feugiat nulla facilisis kan worden veroorzaakt door eros en accumsan en een groot aantal dignissim die een blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

• 
  

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

  
  


• 
  

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

  
  

var myCountdown1 = nieuwe aftelling((
tijd: 86400 * 3, // 86400 seconden = 1 dag
breedte: 300
, hoogte: 60
, bereik Hallo: "dag"
, stijl: "omdraaien" //