Esimerkkejä laskeutumisesta. Estä yhteystiedoilla. Ainutlaatuinen myyntiehdotus
Aloitussivun suunnittelun kehittäminen periaatteella ”Haluan hänen kaltaisensa” jäi vuoteen 2014, jolloin myyntisivun tehokkuus paljastettiin maksimaalisesti ja yritykset ymmärsivät, että aloitussivun avulla he eivät voi vain myydä tuotetta/palvelua nopeasti, mutta myös paljastaa itsensä luovilla näkökulmilla. Nykyaikaiset aloitussivut eivät ole vain myyntirakenne, vaan myös loistava tilaisuus saa aikaan WOW-ilmiön vierailijassa, ihaile sivun ideaa ja sen toteutusta.
Jos et halua vaivautua, voit ladata prototyypin " täydellinen aloitussivu sivu" ja luo sääntöihin perustuva sivu, kirjoita otsikko, tarjous, edut ja edut, aseta luottamuslohko ja painike toimintaan ja mene nukkumaan ajatuksella, että työ on tehty täydellisyyteen. Mutta jos haluat ylittää odotukset kohdeyleisö, ja ollaan rehellisiä, ja myös odotuksesi, käytä sitten parhaimpana pitämiämme aloitussivuesimerkkejä.
Mielestämme kaikki 9 Internetistä kerättyä esimerkkiä olivat siistejä. Yksinkertaisuus, aloitussivuperiaatteen mukainen, mukavuus ja aloitussivulle ominaisten perusvaatimusten huomioon ottaminen tekevät esimerkistä aloitussivujen myymisestä erittäin konversioita.
Esimerkki myyntipaikasta nro 1Ensimmäisellä laskeutumisella, jota tarkastelemme, on uskomattoman houkutteleva ja tyylikäs muotoilu kuitenkin huonosti harkittu markkinointikomponentti ja copywriting. Ensimmäisellä näytöllä näemme kirkkaan bannerin ilman ainutlaatuista myyntiehdotusta, painopiste on kirkkaassa valokuvassa. Kun vierailet yksisivuisella sivustolla, on aluksi epäselvää, onko se omistettu yhdelle asialle ainutlaatuinen tuote tai koko sarja, joka hämmentää asiakasta alkuvaiheessa.
Jokaisella ihmisellä on tietty tavoite, miksi hän tarvitsee tuotteen tai palvelun. Tässä lohkossa tarkastelemme kuivia valintakriteerejä, mutta emme lopullista tarvetta. Samaan aikaan "alkaen ja kohteeseen" -ilmaisimet voivat hämmentää asiakasta. Tässä tapauksessa on parempi keskittyä suurimmat ominaisuudet. Tuotteen kuvaaminen tyylillä "lyhyys on lahjakkuuden sisar" herättää tietyn kysymyksen osaamisesta.
Lohkon olemuksena tulisi olla neuvojen saaminen ammattilaiselta, joka tietää tuotteesta kaiken ja on valmis antamaan asianmukaisia neuvoja tuotteesta riippuen asiakkaan käyttöolosuhteista.
On vaikea kuvitella, kuinka yksinkertaisin laskeutumislohko voidaan tehdä niin monimutkaiseksi ja käsittämättömäksi. Lisäksi tekstit on kirjoitettava asiakasta osoittavaan tyyliin. Ei "jätä pyyntö", vaan "jätä pyyntö".
Tyylikäs aloitussivun rakenne, yrityssuunnittelu ja markkinoijan hämmästyttävä työ tekivät tästä aloitussivusta suosikkimme. On selvää, että asiakas otti vastuullisen lähestymistavan videoiden ja valokuvien valintaan kehitysstudioon. Ensimmäisellä näytöllä näemme ainutlaatuisen myyntiehdotuksen, useita tarpeita ja kriteerejä on täytetty. Tehokkain ja kaunis elementti- tämä on taustan sijaan video, joka paljastaa harjoittelun olemuksen ja kuntosalin varusteet.
Kiinnostus herättää kriteerit.
Ammattitaitoiset ja kirkkaat valokuvat ja videomateriaalit lisäävät entisestään kiinnostusta palvelua kohtaan.
"Painaamme" vierailijaa useilla eduilla ja katamme tarpeet, herätämme "halua".
AIDA-rakenteen looginen viimeinen osa on "toiminta"-lohko.
Ainutlaatuinen kuva, tyylikäs lisäosa USP:llä, navigointivalikko, ensimmäisen lohkon kirkas muotoilu ja kutsun tyylinen otsikko yleisessä yhdistelmässä saavat sinut haluamaan ilmoittautua kokeiluharjoitteluun. Myös painike, jossa on toimintakehotus, edistää tätä. Navigointinuoli puuttuu, minkä pitäisi osoittaa, että siellä on myös a uusi tieto. Seuraava lohko on edut kriteerien muodossa. Tehty ikonien muodossa, joissa on lyhyt kuvaus.
Erinomainen ratkaisu oli sijoittaa lohko, jossa oli toimintakehotus alennustarjouksella ja aikarajalla. Valokuvat herättävät vierailijassa luottamusta, motivoivat ja ovat myös epätavallinen ja tyylikäs lisä suunnitteluun.
Erinomainen lohko motivaatiolla ensimmäiselle oppitunnille. Suuri miinus on eri kansallisuuden luonne.
Esimerkki aloitussivusta osoittaa suunnittelun tyylin ja tiiviyden, mutta samalla motivoi lukijan päätoimintoon häiritsevien yksityiskohtien ja minimaalisten värien puuttumisen vuoksi.
Aloitussivun esimerkki #4
Verkkostudiomme kehittämä hyvä aloitussivu, josta voi tulla roolimalli ja inspiraatio muille kehittäjille ja asiakkaille. Yksisivuinen verkkosivusto paljastaa kohdeyleisön (tapauksessamme suuret rinnat omaavat naiset) ongelman ja ratkaisee sen välittömästi laadukkaalla tarjouksella.
Jokainen lohko on tarkka osuma kohdekuluttajan tuskaan. Heti sen takana on oikea ja pätevä ratkaisu asiakkaiden kokemuksiin heidän epämukavuuden perusteella.
Bonus sekä vierailijalle että aloitussivulle liidien luomisen kannalta on joukko etuja ja etuja, joita on täydennetty oikeilla valokuvilla, jotka osoittavat selvästi tuloksen.
Loistava tapa kommunikoida hyödyttää paitsi suullisesti myös visuaalisesti. Siten kaikki tieto havaitaan paremmin.
Sosiaalinen todiste käyttää kahta tehokasta markkinointielementtiä. Video, joka jälleen kerran painostaa ongelmaa ja puhuu oikein valittujen alusvaatteiden eduista.
Ja valokuva yrityksen johtajasta ja hänen osoitteensa asiakkaalle.
Suuri määrä negatiivista valkoista tilaa, jonka ansiosta huomio keskittyy sisältöön, sekä sisällön melko yksinkertainen muotoilu luovat vaikutelman tyylikkäästä ja modernista muotoilusta. Aloitussivu kiehtoo konseptillaan ja tekee kävijöistä asiakkaita osaavan markkinoinnin ansiosta.
Aloitussivun esimerkki #5
Tyylikäs esimerkki aloitussivusta, joka keskittyy palvelun myyntiin - luksusomatalojen ja mökkien suunnitteluun ja rakentamiseen. Aloitussivu on kehitetty AIDA-markkinointistrategian mukaisesti - klassikko, joka väsymättä osoittaa tehokkuutensa.
Jokainen lohko osoittaa markkinoijan, tekstinkirjoittajan ja suunnittelijan integroidun lähestymistavan. Voimakkaita ja motivoivia toimintakutsuja, omaperäisiä ja tyylikkäitä graafisia kuvia ja myyntiteksti ei jätä vierailijalle ainuttakaan mahdollisuutta paitsi saada hänet ryhtymään toimenpiteisiin, joita häneltä odotetaan.
Yksisivuisen verkkosivuston päätavoitteena on muodostaa positiivinen mielikuva yrityksestä ja sen maineesta, josta tulee päämotivaattori kohdeyleisölle, joka on varakkaat kuluttajat. Tämä kohdeyleisö on vähemmän kiinnostunut hintakysymyksestä, enemmän kiinnostunut esiintyvän yrityksen imagosta ja kyvyistä. Siksi aloitussivulla pyritään tuomaan esille rakennusyrityksen etuja.
Kaiken kaikkiaan kuluttajalle tarjotaan tämän yksisivuisen myyntisivuston avulla ratkaisu ongelmaansa löytää luotettava ja ammattimainen esiintyjä. Aloitussivu paljastaa täysin kaiken vahvuuksia yrityksiä, joista tulee yhteistyön motivaattori.
Esimerkki onnistuneesta aloitussivusta nro 6
Edessäsi - loistava esimerkki kaunis ja toimiva aloitussivu. Moderni muotoilu temaattisilla kuvilla, jotka on kehitetty yhdistämällä tummia ja vaaleita sävyjä kirkkaiden korostusosien kanssa, luo miellyttävän vaikutelman jaloisuudesta.
Tällä aloitussivulla on erottuva ominaisuus, jota muut kehittäjät käyttävät harvoin. Se paljastaa hintakysymyksen mahdollisimman paljon ja kehottaa käyttäjää valitsemaan hintaluokan itsenäisesti harkittuaan vaihtoehtoja, joihin hänellä on varaa.
Tämä on erittäin kätevä ja käytännöllinen toiminto, joka näyttää käyttäjälle visuaalisesti verkossa kaikki hintaan sopivat tarjoukset. Toinen yksisivuisen verkkosivuston etu on se, että se keskittyy kaikkiin kohdeostajan pyyntöihin. Tämän aloitussivun avulla vierailija voi saada neuvoja, tehdä tilauksen, saada käsityksen keittiösarjan hinnasta ja saada myös arvion tilauksestaan. Jokaiseen mahdollisuuteen liittyy toimintakehotus.
Kaiken kaikkiaan hanke herättää luottamusta yhtiöön. Ja tämä on pääasia, että yksisivuinen palveluja tarjoava verkkosivusto muodostuu. potentiaalinen ostaja. Luottamukseen esittäjää kohtaan perustuuhan se, että asiakas muuttuu potentiaalisesta todelliseksi.
Valitsimme tämän aloitussivuesimerkin, koska se eroaa olennaisesti tavallisista yhden sivun sivuista.
Sivusto on omistettu maidon jakelupalvelulle. Mutta se on tehty sarjakuvassa ja on suunnattu vain pienelle kohdeyleisölle.
Luettuaan tarinankerronta, josta yksisivuinen sivu alkaa, käy selväksi, että se on suunnattu slangista kiinnostuneille nuorille.
Tässä ei ole myyntirakennetta tai ongelmien selvittelyä, kuten edellisistä kauniista aloitussivujen esimerkeistä näkyy. Sivuston viesti on kuitenkin selkeä ja mielenkiintoinen, joten aloitussivulla itsessään on paikkansa.
Suuri määrä tietosisältöä, joka on esitetty "huviksi" hymyilemään, on täydennetty äänentoistotoiminnolla, joka lisää myös huumoria sivulle. Mutta vierittäessämme hieman alemmas, näemme lohkon, jossa on toimintakehotus, joka on tyypillistä "klassisille" myynnin aloitussivuille.
Ei ole sosiaalista näyttöä, ei luottamusta, ei etuja ja etuja. Mutta kotlettien resepti löytyy :-)
Tämän aloitussivun tehokkuudesta on vaikea sanoa. On vain ilmeistä, että sivu on mielenkiintoinen hieno muotoilu ja "kouluhuumori". Ja huolimatta siitä, että tällaiset projektit ovat harvinainen tapaus Internet-markkinoinnin alalla, ne ovat olemassaolon arvoisia, koska ne löytävät varmasti yleisönsä.
Esimerkki myyntisivuston aloitussivusta nro 8
Esimerkki toisesta työstämme, joka ansaitsee huomion. Aloitussivulla myydään palvelu liikkuvien osastojen/valokuvausalueiden myyntiin tai vuokraamiseen. Tämän yksisivuisen sivun avulla potentiaalinen asiakas löytää vastaukset kaikkiin kysymyksiinsä.
Erinomainen ratkaisu niille, jotka haluavat ymmärtää palvelun yksityiskohtaisesti. Syödä ainutlaatuisia kuvia kullekin palvelukategorialle kunkin kustannukset ja mahdollisuus valita välittömästi kiinnostava. Niille, jotka eivät voineet tehdä valintaa, aloitussivulla on yksilöllinen tilauspalvelu, joka ilmaisee henkilökohtaiset pyynnöt toimintakehotuksena.
Edut-lohko keskittyy yhteistyön mukavuuteen.
Etulohkoa täydentää joukko yrityksen etuja, jotka yhdessä luovat asiakkaalle voimakkaan motivaation toimia.
Mielenkiintoinen suunnittelupäätös, jossa yhdistyvät valkoinen ja tummanharmaa punaisilla elementeillä luodakseen tyylikkään jälkimaun aloitussivua katseltaessa. Toisin kuin muut aloitussivut, jotka käsittelevät kohdeyleisön ongelmia ja tarjoavat ratkaisujaan, tämä projekti paljastaa kaikki yrityksen palveluiden edut ja auttaa asiakasta löytämään vastaukset kaikkiin kysymyksiinsä.
Esimerkki aloitussivusta nro 9
Tämä verkkostudiomme kehittämä aloitussivu kiinnittää vierailijan huomion näytön ensimmäisestä käännöksestä ja motivoi häntä toimintaan. Suunnittelu- ja rakennuspalveluiden myyntiin keskittyvä aloitussivu avaa asiakkaalle paljon mahdollisuuksia. Tämän vahvistaa palautelomake, jonka avulla voit tilata heti yksittäisen projektin tai ladata ilmaisen esimerkin projektista.
Urakoitsijaa valittaessa potentiaalinen asiakas tarvitsee yrityksen mainetta ja kokemusta. Tästä tiedosta kuluttaja muodostaa itselleen etuja.
Erikoisbonus vierailijalle on oikeita valokuvia yrityksen luomista projekteista. Kirkkaat, kauniit ja viehättävät valokuvat lisäävät vierailijan luottamusta.
Seuraava on "herkkujen" lohko. Se bonus, jota kilpailijat tarjoavat harvoin, on asiakkaan mahdollisuus katsoa yrityksen rakentamia taloja omin silmin. Tämä palvelu ei velvoita kävijää tilaamaan palvelua. Mutta palautelomakkeen avulla kävijästä tulee jo liidi.
Lopputuloksena asiakkaalle esitellään omaperäinen suunnittelu, harkittu rakenne ja konsepti sekä asiantunteva sisältö, jolla on kokonaisvaltainen vaikutus sivujen muuntamiseen, mikä johtaa korkeaan tehokkuuteen.
Moderni käyttäjä, joka on hienostunut lukemattomilla hänen silmäinsä osuvilla myyntisivuilla, on jo kyllästynyt samaan tyyppiin. Nykyään ainutlaatuisuus on tullut muotiin; mitä mielenkiintoisempi ja epätavallisempi aloitussivu on, sitä todennäköisemmin se kiinnittää käyttäjän huomion. Lisäksi hyvä ja eksklusiivinen muotoilu on aina plussaa: sekä yllättää vierailija että ilahduttaa itseään. Ja iloisesti yllättynyt vierailija on vähintään +10 % konversiosta. Toivotamme sinulle alkuperäisiä ja herkullisia ideoita! Ja jos sinulla on vaikeuksia tämän kanssa, voit aina tilata aloitussivun web-studiostamme.
Tilaa blogi ja seuraa päivityksiämme.
Tämän sivun muotoilu on ainutlaatuinen, täysin täynnä brändin persoonallisuutta, eikä se ole samanlainen kuin muut.
Tämän suunnittelun erikoisuus on, että kaikki elementit ovat näkyvissä, mutta samalla erittäin siististi järjestetty. Yksinkertainen mutta kaunis diaesitys herättää myös huomiota.
Yksinkertainen mutta suloinen muotoilu. Etuna on, että voit kirjautua sivustolle Facebookin kautta tuhlaamatta aikaa rekisteröitymiseen.
Erinomainen esimerkki yrityksen tuotteiden esittelystä. Joka kuukausi yritys päivittää sivulla näkyvää tuoteluetteloa.
Sivustolla myytävän ymmärtäminen ei ole ongelma hyvin jäsennellyn sisällön, kauniiden diojen ja iso fontti hintalaput.
Suurin osa onnistuneita sivuja, joka on omistettu tavaroiden myyntiin, sisältää välttämättä selkeitä ja helposti ymmärrettäviä esimerkkejä tuotteista.
Avain tähän suunnitteluun on yksinkertaisuus. Yksinkertainen valikko ja kirkas liukusäädin sopivat täydellisesti yhteen.
Sivu avautuu onnistuneesti eri osiot. Lisää yksityiskohtainen tieto Napsauta vain haluamaasi kuvaa.
Suunnittelu ei ole ylikuormitettu tarpeettomia elementtejä, näet välittömästi kaikki tuotteen ominaisuudet ja hinnat.
Viihdesivustot
Yksinkertainen ja maukas. Sivun tarkoitus on heti selvä: dokumenttivideon katsominen.
Sivun suunnittelu on hyvin harkittu, se kiehtoo ja kirjaimellisesti hypnotisoi. Loistava värien ja muotojen yhdistelmä.
Tämä sivusto on ennen kaikkea kiitosta. Loistavasti harkittu muotoilu ja interaktiivisten elementtien runsaus ei jätä ketään välinpitämättömäksi.
Tämä Harry Potter -franchise-sivu on suunniteltu käyttämällä faneille tuttuja värejä, lauseita ja nimiä.
Tämä sivu ei vain näytä kauniilta, se on myös erittäin toimiva: monia interaktiivisia elementtejä, integraatio Google Kartat, käyttämällä välilehtiä.
Myöskään uudelleensuunnittelun jälkeen Uncrate ei muuta perinneään järjestää sivuston kaikki osat kätevään ylänavigointivalikkoon.
Tämä sivusto esittelee graafisen suunnittelun ja web-kehityksen voimaa. On parempi mennä siihen ja katsoa itse.
Erinomainen esimerkki "laatoitetusta" suunnittelusta, jonka avulla voit järjestää tyylikkäästi suuren määrän sisältölohkoja.
Tämän sivuston visuaalisuus on upea. Elävät kuvat kiinnittävät käyttäjien huomion välittömästi.
Jay-Z tietää varmasti kuinka pitää hauskaa. Hänen sivustollaan artikkelit, kuvat ja muu sisältö esitetään interaktiivisten laattojen muodossa.
Tässä suunnittelussa käytetään luonnollisia sävyjä, jotka sopivat hyvin sivustolla esiin tuotuihin tärkeimpiin kysymyksiin.
Portfolion aloitussivut
Tällä sivulla hallitseva rooli on jälleen annettu kuville, jotka kirjaimellisesti heräävät henkiin, kun hiirtä liikutetaan.
Tässä esimerkissä on erittäin mielenkiintoinen väriyhdistelmä. Lisäksi kaikki sivun elementit käyttävät samaa, puumaista taustarakennetta.
"Old school" -tyyliä käytetään tässä erittäin hyvin, jokaisen elementin suunnittelu on pienintä yksityiskohtaa myöten harkittu ja ainutlaatuinen. Tämän sivuston loputtoman vierityksen ansiosta voit nauttia tällaisesta kauneudesta pitkään.
Selkeä ja harkittu muotoilu auttaa sivua välittämään viestin tehokkaimmin päätiedot vierailijoille. Väriskeema vastaa brändiä ja näyttää suunnittelijan tyylin toiminnassa.
Sivu on loistava esitys. Jokainen banneri on omistettu erilliselle projektille.
Esimerkki epätavallisesta laattasuunnittelusta.
Typografialla on tärkeä rooli tällä sivulla. Erilaisten fonttien käyttö auttaa ideoiden välittämisessä.
Muotoilu on lakoninen ja ytimekäs. Sivulla näemme kaiken tarvitsemamme: portfolion ja linkit muihin osioihin.
Ikonit ja ei mitään muuta. Hyvä esimerkki minimalistisesta muotoilusta.
Portfoliosivulla näkyy tärkein asia - esimerkkejä työstä.
Jälleenmyynti
Sivulla on paljon käyttäjäkuvia, joita voi helposti selata vierittämällä ja vierittämällä.
Isot, kirkkaat valokuvat yrityksen tuotteista saavat sinut juomaan tölkin kylmää olutta.
Mikään ei häiritse vierailijaa pohtimasta kauneinta kelloa.
Tämän sivuston kohokohta on sivun yläosassa oleva diaesitys, joka esittelee suussa sulavia kulinaarisia herkkuja.
Fontti ja grafiikka yhdistyvät täydellisesti ja luovat yhtenäisen käsityksen sivustosta. Valikossa on vain kolme kohtaa, eikä niitä voi ohittaa.
Tyylikäs tyyli, korkealaatuisia kuvia, erinomainen esitys. Mikään ei häiritse pääelementeistä.
Toyota on luonut Pinterest-tyylisen sivuston Camryn ystäville. Täältä löydät monia valokuvia, artikkeleita, tilastoja.
Huolimatta siitä, että tämä sivu sopii yhdelle näytölle korkeudeltaan, siinä on monia mielenkiintoisia interaktiivisia elementtejä ja epätavallisia yksityiskohtia.
Sivun suunnittelu heijastaa täysin brändin tyyliä: värit, fontit, kuvat liittyvät välittömästi tähän yritykseen.
Suunnittelu on tehty rauhallisissa, vaaleissa väreissä, tämä värimaailma on ihanteellinen tarjottavalle tuotteelle.
Tämä sivusto on kuin kirja, joka vangitsee huomiosi epätavallisella juonellaan ja kuvituksillaan.
Kelluva punainen painike näytön keskellä tekee tehtävänsä: haluat todella napsauttaa sitä.
Tervehdys, rakkaat lukijani. Tänään puhumme teknisistä näkökohdista, joilla voimme lisätä tavaroidemme tai palveluidemme myynnin konversiota. Yksi tärkeitä kohtia on hyvin suunniteltu aloitussivu tuotteineen. Ns. aloitussivu, jonka luomisesta puhumme lisää ja saamme valmiit koodit sivuja.
Mikä on aloitussivu? Tämä on sivu, jolle ihmiset päätyvät yleensä mainoksen napsautuksen jälkeen. Luotu yhdelle tarjoukselle: tuote, palvelu tai tilaus. Tehokas aloitussivu on onnistuneen verkkomarkkinoinnin kulmakivi. Tuote voi olla markkinoiden paras, mainokset ovat täydellisiä, mutta ilman hyvää aloitussivua ponnistelut eivät tuota 100% tuloksia. Se kertoo vierailijoille, mitä on tarjolla ja miksi heidän pitäisi haluta sitä. Kiireellisyyden tunne edistää nopeaa päätöksentekoa ja käyttäjän siirtymistä asiakaskategoriaan.
Kuinka luoda aloitussivu? On väärin uskoa, että vastaus piilee kyvyssä ladontaa. Hyvä aloitussivu on tulos koordinoidusta työstä tavoitteiden, tekstin, suunnittelun ja koodin parissa. Aloitussivut, joista on esimerkkejä alla, auttavat aloittelijoita oppimaan asettelun perusteet, mutta eivät korvaa muunnostekstejä ja kohdeyleisön ymmärtämistä. Voit myös luoda niitä käyttämällä erilaisia aloitussivun suunnittelijoita.
Ennen kuin luot aloitussivun, kysy itseltäsi:
- Mitä henkilö tekee aloitussivulle laskeutumisensa jälkeen? Ostaako hän mitään? Täytätkö lomakkeen? Tilaa uutiskirje? Ennen kuin seuraat tulosprosenttiasi, aseta selkeät tavoitteet.
- Keitä ovat kilpailijani? Todellisuudessa nämä ovat kolme kysymystä: kuka, kuinka menestynyt he ovat ja miten heidän saavutuksiaan voidaan soveltaa? Jäljittely on imartelun vilpittömin muoto. Jos kilpailijasi tekevät jotain, joka toimii, kopioi se sivustollesi.
- Kuka on yleisöni? Mitä paremmin ymmärrät markkinarakoasi ja kohdeyleisösi, sitä suurempi on todennäköisyys, että ponnistelusi tuottavat tulosta.
Meidän on tarjottava kaikki tarvittavat tiedot, mutta ei niinkään kuin tukahduttaa ja ajaa pois potentiaalisen asiakkaan.
Esimerkkejä aloitussivun luomisesta + koodaamisesta tutilleEnnen kuin aloitamme, katsotaanpa nopeasti HTML:ää ja CSS:ää. Niiden toiminnan ymmärtäminen auttaa sinua luomaan laskun.
HTML on selaimen merkintäkieli verkkosivustojen visualisointiin. Kirjoitettu kulmasuluissa olevilla tunnisteilla, jotka määrittelevät sisällön.
Tunniste avautuu () ja sulkeutuu () täytteen ympärillä:
sisältö
Hienosäätöä varten määritteet lisätään nimen jälkeen:
sisältö
CSS - määrittää, miten sijoitetaan HTML-elementtejä. Koostuu valitsimista, ominaisuuksista ja arvoista:
#valitsin (ominaisuus: arvo;)
Valitsin vastaa tietyn tunnisteen nimeä html:ssä. Arvojen muuttaminen ja ominaisuuksien lisääminen säätelee sitä ulkomuoto. Voit luoda sivuja, jotka näyttävät erilaisilta, käyttämällä eri CSS-tyylejä samaan HTML-koodiin.
5 alkuvaihettaNopeaa asettelua varten käytämme mallia, jonka suunnittelu perustuu bootstrapiin. Tämä on järjestelmä, jossa on omat valitsimet ja jota käytetään kaikkialla maailmassa nopeuttamaan asettelua.
Se näyttää vaatimattomalta.
Tästä kalasta luodaan verkkosivusto jokaiseen makuun useassa vaiheessa.
Kansion hakemistorakenne:
- index.html: Tämä päätiedosto, jota muokkaamme.
- /assets: aputiedostot sijaitsevat täällä:
- /css: Hakemisto sisältää bootstrap- ja ikonityylit. Muokattava tiedosto on main.css.
- /img: kansio sivuston kuville.
- /fonts: kuvakefontit.
- /js: bootstrap javascript-tiedostot.
Vaihe 1: Otsikon käyttäminen
Otsikko ja alaotsikot - keskeiset paikat, mikä auttaa viestimään arvoehdotuksesta selkeästi.
Muutetaan sivuston otsikko ja nimi. Täällä sinulla ei tarvitse olla ladontataitoja - kirjoitat oman tekstisi ruudulla keltaisella korostettuihin paikkoihin.
Vaihe 2. Lyhytyys on kääntymyksen sisar. Lisätään etuja ja hintoja
Tarvitset 4 osaa:
- edut;
- hinnat;
- arvostelut;
- kehotus toimintaan.
Luodaan pääsisällöstä osio "main", johon lisäämme tarvittavat osiot:
…..
…..
…..
…..
Täytä täytteellä pisteiden sijaan.
Edut-osioon tarvitset tämän koodin:
Edut
Nopeasti
Luotettava
Sed diam nonummy
Kannattava
Elit, sed diam nonummy
Teknisesti
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Luotettava
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Kannattava
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Teknisesti
Lorem ipsum dolor sit amet, consectetuer adipiscing
Luotettava
Lorem ipsum dolor sit amet, consectetuer adipiscing
Kannattava
Lorem ipsum dolor sit amet, consectetuer adipiscing
Sisältö selkeyden vuoksi:
Se näyttää edelleen huolimattomalta, mutta ei ole syytä paniikkiin, jatketaan.
Kirjoitamme hinnat ylös. Sisältö muuttuu samalla tavalla kuin ensimmäisessä vaiheessa. yleinen kuvaus luokan "tariffit" ja kolme tariffia.
Tariffisuunnitelmat
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 exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Tariffi nro 1
$10
kuukaudessa/henkilöä kohden
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Tilaus
Tariffi nro 2
$20
kuukaudessa/henkilöä kohden
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Tilaus
Tariffi nro 3
$30
kuukaudessa/henkilöä kohden
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Tilaus
Näyttää siltä.
Vaikka emme ole kiinnostuneita tulevan aloitussivun ulkoasusta, harkitsemme alla esimerkkejä tyylien muuttamisesta.
Vaihe 3: Luota signaaleihin ja toimintakehotukseen
Kohdistettujen signaalien käyttäminen osoittaa vierailijoille, että brändi on luotettava. Signaalit voivat olla monenlaisia, mutta klassinen niistä on asiakaspalaute.
asiakkaiden arvostelut
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."
"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."
Asetetaan toimintakehotus.
Hyödy, kun tilaat tänään
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 exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:
Tilaa nyt!
Arvostelut auttavat potentiaalisia asiakkaita päättämään tuotteen ostamisesta. Selvyyden vuoksi tarvitsemme avatareja, joten laitamme ne heti paikoilleen - jokaisen lainauksen alle.
Asiakkaan Nimi.
Vaihe 4: Integrointi Grid- ja mobiiliystävällisyyteen
Verkon toteuttamiseksi tarvitsemme Bootstrap-säiliöitä. On tärkeää muistaa kelvollisten sarakeosien kokonaismäärä - 12. Luokka määrittää sisällön näytön leveyden. Tämän valmiin ruudukon etuna on, että säiliöt on suunniteltu mukautuvuutta ajatellen ja ovat heti käyttökelpoisia mobiililaitteet. Yksityiskohtainen kuvaus virallisella sivustolla. Ruudukko näyttää tältä.
Pääosan sisältö kääritään säiliöön. Tätä varten yläreunaan kirjoitetaan seuraava:
… .
Jos haluat, että lohko sopii koko näytön leveydelle, säiliö asetetaan sisään. Tässä se on jumbotron ja kehotus toimia.
Käärimme kaikki päällekkäin sijoittamista vaativat elementit rivierottimella.
Voimme nyt säätää sarakkeiden leveyttä keskittyen bootstrap-ruudukkoon. Käärimisen jälkeen täyte lakkasi tarttumasta näytön reunoihin ja näkyi siistejä painaumia.
Asetamme hinnat riville käyttämällä sarakeluokkaa col-lg-4. Rivirivien sisälle ei enää tarvitse kirjoittaa erillisiä divejä rivitystä varten. Ne voidaan yhdistää olemassa oleviin välilyönnillä erotettuihin.
Analogisesti määritämme sarakkeet arvostelut ja edut -osiolle. Jos haluat siirtää elementtiä sivuun, käytä offset-sarakeluokkaa col-lg-offset-2. Lopussa oleva numero määrittää, kuinka monella perussarakkeella siirto tapahtuu.
Vaihe 5. Fontit ja kuvakkeet
Toteutamme fontit Google-otsikot Fontti. Kun se on valittu, avaa tuonti-välilehti ja kopioi tiedot siitä main.css-tiedostoon. Lisäämme myös otsikon valitsimia tiedostoon, jossa uutta fonttia käytetään.
@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* tuo otsikoiden fontti */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 (
kirjasinperhe: "Roboto Condensed", sans-serif; /* Googlefont output */
}
Selvyyden vuoksi edut on kuvattu luokassa, jolla on itsestään selvä nimi text-center ja FontAwesome-kuvakkeet bootstrap-joukosta.
Tässä vaiheessa valmistelu on täysin valmis.
Aloitussivu: esimerkkejä koodeista tarjouksen, parallaksin ja laskurin kanssaKäytämme kolmea suosituinta tyyppiä: lauseella, lomakkeella ja laskurilla lähtölaskenta. Asettelun edetessä mallia täydennetään tehosteilla.
Esimerkki 1: lauseellaLaitetaan pääosan tausta ja pehmusteet niin, että ensimmäinen näyttö peittyy.
Jumbotron (
tausta: #f5f5f5 url(../img/fon.jpg) ylhäällä keskellä ei toistoa;
suurin leveys: 100 %;
täyte-top: 250px;
pehmuste-ala: 200px;
tekstin tasaus: keskellä;
}
Muutetaan jumbotron-otsikon koko h2:sta h1:ksi. Seuraavaksi kirjoitamme tyylit elementeille, joita on muutettava.
Aloitetaan kuvakkeista.
Edut i(
väri: #cac4c4;
}
Hash-merkin jälkeen määritetään väri. Voit valita oman vaihtoehdon käyttämällä html-väritaulukoita tai kuvankäsittelyohjelmaa.
Osion otsikoiden sisennys
osa h2 (
täyte-top: 30px;
marginaali-ala: 25px;
}
Selvitämme tariffien ulkoasua. Mukavuuden vuoksi luomme omat luokat elementtejä, jotka haluamme korostaa tarkasti.
Tariffi nro 1
$10
kuukaudessa/henkilöä kohden
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Tilaus
Ja paljon CSS:ää. Kommenteissa kerrotaan, mistä paikoista osiot vastaavat - /* tähdellä merkittyjen vinoviivojen välissä */
/* =========Tarif-tyylit======== */
/* yleinen muoto tariffi */
.pricing_item(
tausta: #f2f2f2;
asema: suhteellinen;
näyttö: -webkit-flex;
näyttö: flex;
flex-suunta: pylväs;
kohdista tuotteet: venyttää;
tekstin tasaus: keskellä;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
pehmuste: 2em 3em;
marginaali: 1em;
väri: #262b38;
kohdistin: oletus;
ylivuoto piilotettu;
}
/* vaihtaa taustaa napsauttamalla */
.pricing_item:hover (
väri: #444;
tausta: #daebef;
}
/* yksilöllinen hintalappu jokaisessa tariffissa */
.pricing_item:first-child .price (
tausta: #9ba9b5;
}
.pricing_item:nth-child(2).price (
tausta: #1f6098;
}
/* päällä leveät näytöt keskimmäisen tariffisarakkeen sisennys ja korostus */
@medianäyttö ja (min-leveys: 66.250em) (
.pricing_item(
marginaali: 1,5em 0;
}
.featured(
z-indeksi: 10;
marginaali: 0;
kirjasinkoko: 1,15 em;
}
}
/* otsikko */
.pricing_item h3 (
fontin koko: 2em;
marginaali: 0,5em 0 0;
väri: #1d211f;
}
/* hintalapun tausta */
.price (
fontin koko: 2em;
font-weight:bold;
väri: #fff;
asema: suhteellinen;
z-indeksi: 100;
rivin korkeus: 95 kuvapistettä;
leveys: 100 pikseliä;
korkeus: 100px;
marginaali: 1,15 em auto 1 em;
raja-säde: 50 %;
tausta: #77a5cc;
-webkit-siirtymä: väri 0,3 s, tausta 0,3 s;
siirtymä: väri 0,3 s, tausta 0,3 s;
}
/* valuutta */
.currency(
kirjasinkoko: 0,5 em;
pystysuuntaus: super;
}
/* ehdotuksen selvennys */
.tuomita(
font-weight:bold;
marginaali: 0 0 1em 0;
pehmuste: 0 0 0,5 em;
väri: #2a6496;
}
/* lista */
.pricing_item ul (
kirjasinkoko: 0,95 em;
marginaali: 0;
pehmuste: 1,5 em 0,5 em 2,5 em;
tekstin tasaus: vasen;
}
/* luettelon kohteet */
.pricing_item li (
pehmuste: 0,15em 0;
}
/* hintatilauspainike */
.pricing_item button(
font-weight:bold;
marginaali yläosa: auto;
pehmuste: 1em 2em;
väri: #fff;
reunan säde: 5px;
tausta: #428bca;
-webkit-siirtymä: taustaväri 0.3s;
siirtymä: taustaväri 0,3 s;
}
/* vaihtaa väriä, kun painiketta painetaan */
.pricing_item button:hover,
.pricing_item button:focus (
taustaväri: #285e8e;
}
/* tariffi tausta*/
.bg-2 (
tausta: #dddddd;
}
Tulos
Asiakkaiden arvostelut. Katsotaan niitä siististi ja osoitetaan niiden sijainti.
/* =========Suositelutyylit======== */
Suositukset (
pehmuste: 4em 0;
tekstin tasaus: keskellä;
}
.testimonials .avatar img (
raja-säde: 50 %;
kellua: vasen;
näyttö: inline;
marginaali-oikea: 1em;
leveys: 65px;
korkeus: 65px;
marginaali-ala: 30px;
}
.testimonials .avatar p (
tekstin tasaus: vasen;
pehmuste: 1em;
väri: #5d5d5d;
fontin paino: 900;
}
Jäljelle jää vain viimeinen toimintakehotus ja alatunniste.
/* Toiminta */
.toiminta(
tausta: #476177;
vähimmäiskorkeus: 180 kuvapistettä;
leveys: 100 %;
pehmuste: 4em 0;
tekstin tasaus: keskellä;
}
.action h2 (
väri: #fff;
fontin paino: 300;
}
.action p(
väri: #fff;
tekstivarjo: 0 1px 2px rgba(0, 0, 0, .2);
kirjasinkoko: 1,2 em;
}
.action .container (
marginaali-yläosa: 3em;
}
/* Alatunniste */
alatunniste(
tausta: #333333;
pehmuste: 1em 0;
tekstin tasaus: oikea;
}
alatunniste p(
väri: #fff;
rivin korkeus: 1;
tekstin muunnos: isot kirjaimet;
kirjasinkoko: 0,7 em;
marginaali yläosa: 0,5 em;
}
Alatunnistepainikkeelle on määritetty sisäänrakennettu bootstrap-luokka btn-default.
Mallin herättäminen henkiin. Toteutetaan tasainen vieritys ja osien painikkeet sekä tekstianimaatio ensimmäisessä näytössä.
Työhön siirtymistä varten korvaamme osan osastoluokista id -eduille ja tariffeille. Ja lisäämme painikkeisiin linkit tunnukseen. Kuvakaappaus – mitä on liitetty mihinkin, korostettuna keltaisella merkillä.
Asetamme painikkeille sisennykset - jbutton. Rullaus painettaessa toimii, mutta erittäin äkillisesti.
Sujuvia siirtymiä luodaan, kun javascript ohje tai jqueryllä. Jälkimmäinen on oletusarvoisesti yhdistetty Bootstrap-malleihin.
Vieritys on nyt sujuvaa.
Animaatioiden lisääminen tekstiin Animate.css:n avulla (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Tämä on valmis avoimen lähdekoodin koodi, jota voidaan käyttää millä tahansa verkkosivustolla. Aseta tiedosto Githubista sisään css-kansioon ja kirjoita polku.
Valitsemme tehosteet täältä: https://daneden.github.io/animate.css/. Olemme valinneet fadeInDownin. Se on kirjoitettu koodiin näin:
Nyt kun sivu ladataan tai päivitetään, teksti animoituu. Valmis.
Esimerkki 2: muodolla ja parallaksiefektilläMitä enemmän lomakekenttiä vierailijalle esitetään, sitä epätodennäköisemmin hän täyttää ne. Pyydä vain vähimmäistiedot.
Se on koottu analogisesti. Vaihdetaan taustat ja värit. Ja tietysti lisäämme muodon.
Aloitetaan parallaksilla.
Muutetaan jumbotronin tausta läpinäkyväksi:
tausta: läpinäkyvä;
Pään sisään lisäämme skriptin:
$(window).scroll(function(e)(
parallaksi();
});
funktio parallaksi())(
var scrolled = $(ikkuna).scrollTop();
$(".bgparallax").css("ylä",-(vieritty*0.2)+"px");
}
Rungon ensimmäinen rivi on säiliö parallaksia varten:
Ja CSS:ssä sen käyttäytyminen on:
bgparallax (
tausta: url(/../img/fon.jpg) toista;
asento: kiinteä;
leveys: 100 %;
korkeus: 300%;
alkuun:0;
vasen:0;
z-indeksi: -1;
}
Parallax on valmis. Mutta muutosten tekeminen koodiin ja uusi tausta vaatii värimaailman vaihtamisen.
Menun tummuminen:
Navigointipalkki-oletus (
taustaväri: #333;
reunaväri: #444;
väri: tummanharmaa;
raja-säde: 0;
}
Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
väri: tummanharmaa;
taustaväri: rgba(0, 0, 0, 0,5);
}
Korvaamme jumbotronin lauseen uudella - muotokoodilla:
Aloitussivu tekee vierailijoista asiakkaita
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.
Ja me määräämme ulkonäön
/* lomake */
.headform-list (
list-style-type: ei mitään;
rivin korkeus: 26 kuvapistettä;
fontin paino: 400;
täyte: 0px;
marginaali-ala: 40px;
}
.headform(
ylivuoto piilotettu;
asema: suhteellinen;
taustaväri: rgba(0,0,0,.4);
täyte: 35px 40px;
reunan säde: 8px;
}
syöttö, painike, valinta, tekstialue (
leveys: 100 %;
marginaali-ala: 10px;
}
.headform-list li .fa (
sijainti: absoluuttinen;
yläreuna: 0px;
vasen: 0px;
leveys: 42px;
fonttikoko: 24px;
tekstin tasaus: keskellä;
}
.headform-list li (
asema: suhteellinen;
vähimmäiskorkeus: 38 kuvapistettä;
täyte-vasen: 62px;
marginaali-ala: 20px;
}
.jumbotron p (
väri: #fff;
fonttikoko: 16px;
kirjasintyyli: kursivoitu;
}
Myös jumbotronin teksti päätyi tänne, koska se vaati muutoksia.
Muutamme tariffeja.
/* yleinen näkymä tariffista */
.pricing_item(
taustaväri: rgba(0,0,0,.4); /* rivi muutettu */
reunan säde: 4px; /* rivi muutettu */
asema: suhteellinen;
näyttö: -webkit-flex;
näyttö: flex;
-webkit-flex-suunta: sarake;
flex-suunta: pylväs;
-webkit-align-items: venyttää;
kohdista tuotteet: venyttää;
tekstin tasaus: keskellä;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
pehmuste: 2em 3em;
marginaali: 1em;
väri: #f2f2f2; /* rivi muutettu */
kohdistin: oletus;
ylivuoto piilotettu;
box-shadow: 0 0 15px rgba(0, 0, 0, 0,05);
}
/* vaihtaa taustaa napsauttamalla */
.pricing_item:hover (
väri: #444;
tausta: #ddd; /* rivi muutettu */
}
Nyt ne näyttävät tältä - läpinäkyvä tausta ja pyöristetyt kulmat.
Malli on valmis.
Esimerkki 3: lähtölaskurin kanssaMuutamme jumbotronin täyttöä uudelleen ja väritämme mallin uudelleen vastaamaan uutta taustaa edellisen mallin tapaan. Yhdistä laskurikoodi:
HTML
Aika ei odota
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 exercitation 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 felisinit do auguciga felisinit.
-
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((
aika: 86400 * 3, // 86400 sekuntia = 1 päivä
leveys: 300
, korkeus: 60
, rangeHei: "päivä"
, tyyli: "flip" //
