Mikä on paras tapa tehdä aloitussivu itse? Aloitussivun tekeminen itse: vaiheittaiset ohjeet

Aloitussivun (aloitussivun) tai aloitussivun, aloitussivun luominen yksinkertaistaa käyttäjän polkua haluamaasi tavoitteeseen mahdollisimman paljon. Tällainen sivu on suunniteltu vaikuttamaan ihmisen perusvaistoihin, rohkaisemaan häntä suorittamaan kohdennettuja toimia: klikkaa, soita, tilaa, osta "juuri nyt".

Aloitussivut sopivat parhaiten mainoskampanjoiden toteuttamiseen tietylle palvelulle tai tarjoukselle ainutlaatuisella (alhaisella) hinnalla sekä kohdeyleisön houkuttelemiseen kontekstuaalisista mainosjärjestelmistä Google AdWords, Yandex.Direct, sosiaaliset verkostot ja sähköpostiuutiskirjeet:

Mikä on aloitussivu?

Aloitussivu on erillinen sivu, jota käytetään:

• tietyn tuotteen tai palvelun myynti;
• tilauskannan luominen.

Kun olet päättänyt luoda aloitussivun, sinun on käytettävä tarvittavia vaikutuksen laukaisimia, jotka pakottavat käyttäjän tekemään nopean päätöksen (osta tuote, syötä tiedot saadaksesi alennuksen, osallistu kurssille, webinaari jne.).

Käyttäjän näkökulmasta aloitussivu on sivu, jolle hän päätyy napsautettuaan tiedottajaa, banneria, mainosviestiä jne. Aloitussivu eroaa pohjimmiltaan verkkokaupasta. Jos haluat myydä yhden tuotteen ja toteuttaa yhden mainoskampanjan, luot oman sivusi ja käytät erilaisia ​​vaikuttajia.

Aloitussivutyypit:

• Autonominen. Tämä on yleisin aloitussivutyyppi. Päätehtävänä on rohkaista käyttäjää ostamaan tai suorittamaan tietty sivun suosittelema toimenpide;
• Mikrosivusto. Pieni, usein erillinen verkkosivusto, joka koostuu enintään 5 sivusta, jotka sisältävät tietoa tuotteesta tai palvelusta;
• Pääsivusto. Käyttää aloitussivua yhtä tai useampaa resurssisivua;
• Landon verkkosivuilla. Resurssi, joka koostuu kokonaan itsenäisistä aloitussivuista:

Aloitussivutyypit

• Mainonta. sisältää suuren määrän tekstiä, grafiikkaa ja videotietoja palvelusta;
• Viraalinen. Mainos on naamioitu artikkeliksi tai peliksi. Siihen liittyy usein sähköposti, sosiaaliset verkostot, chatit;
• Kohdistetut liidisivut. Suunniteltu keräämään tietoa kohdeyleisöstä, ne sisältävät yleensä vähimmäistietoa.

Hyvin suunniteltu aloitussivu voi lisätä kävijöiden muuntumista todellisiksi ostajiksi.

Miksi tarvitset aloitussivun?

Aloitussivun päätarkoitus on myynti. Aloitussivu sisältää myyntitekstiä, tuotteen tai palvelun esittelyn ja toimintakehotuksen. Aloitussivu on erinomainen työkalu palvelun tai tuotteen nopeaan käynnistämiseen Internetissä. Aloitussivujen avulla voit kerätä tilaajia ja palvelupyyntöjä jne.

Jos esittelet tuotteesi/palvelusi oikein, teet hyvän esityksen vahvuuksia osoittaen ja luot myös liikennevirran (mainonta sosiaalisessa mediassa, kontekstuaalinen mainonta jne.), sinun tarvitsee vain kerätä sovelluksia asiakkailtasi ja myydä heille mainostettu tuote/palvelu.

Aloitussivun käytön edut

Laskeutumisella on useita etuja verrattuna tavallisiin palveluita tai tuotteita tarjoaviin resurssisivuihin:

• Tietylle yleisölle kohdistaminen. Aloitussivulla ei ole monia päätöksiä, jotka edellyttävät käyttäjän valitsemista, vaan yhden ainutlaatuisen tarjouksen, jota on vaikea vastustaa;
• Korkea muunnos. Tilastojen mukaan aloitussivujen käyttäminen mainontatarkoituksiin voi lisätä konversiota 10-15 %;
• Täydelliset tiedot tarjotusta tuotteesta/palvelusta, mutta ilman lisäsiirtymiä ja linkkejä;
• Mahdollisuus kerätä vierailijoiden yhteystietoja ja täydentää potentiaalisten asiakkaiden tietokantaa, joille voit myöhemmin lähettää tietoa tulevista kampanjoista/arvonnoista;
• Alhaiset aloitussivun luomiskustannukset. Jopa aloittelevilla liikemiehillä on varaa luoda aloitussivu ja testata näin tuotemarkkinoiden markkinarakoja aloittaakseen myynnin Internetissä:

Missä ja miten aloitussivuja käytetään?

Voit tehdä aloitussivusta yrityksen resurssin sisäisen tai pääsivun, yksisivuisen verkkosivuston tai sivun sosiaalisessa verkostossa. Viime aikoina siitä on tullut yhä suositumpi (offline-sivut) avaintuotteiden kohdalla, aikana, jolloin yrityksellä on jo yrityksen verkkosivusto. Näin tekevät laki- ja lääkeyhtiöt, pankit, matkapuhelinoperaattorit ja monet muut.

Missä aloitussivuja käytetään?

• Mainoskampanjoissa, joissa käytetään kontekstuaalista mainontaa ja pay-to-click (PPC) Yandex.Directissä, Google AdWords, Begun. Tässä tapauksessa liikenne ohjataan aloitussivuille, jotka on optimoitu keskeisille kyselyille.
• Bannerimainoskampanjoissa edellyttäen, että graafinen materiaali sijoitetaan kohdeyleisölle suunniteltuihin temaattisiin resursseihin. Esimerkiksi elektroniikka-alan uusien tuotteiden bannerimainoksia sijoitetaan uutisportaaleihin IT-teknologioiden asiantuntijoiden segmentissä;
• Tiedotus- ja markkinointikirjeiden uutiskirjeissä, jotka sisältävät linkin aloitussivulle. Esimerkiksi verkkokaupan uutiskirjeet, joissa otetaan huomioon käyttäjän aiemmat ostokset;
• Blogikampanjoiden toteuttaminen, joissa käyttäjä ohjataan resurssin aloitussivulle, jonka omistajan kanssa bloggaaja on aiemmin tehnyt kumppanuussopimuksen bannerimainonnan, posti- ja PR-artikkeleiden sijoittamisesta;
• Kampanjat sosiaalisissa verkostoissa (VKontakte, Facebook, Twitter jne.) tai suosituilla median isännöintisivustoilla (esimerkiksi YouTube, Flickr jne.). Käyttäjät ohjataan sen mainostajan aloitussivulle, jolla on sopimus mainosmateriaalin sijoittamisesta valitun mediaresurssin kanssa:

Perustavat aloitussivun luomiseen

• Ilmaiset aloitussivumallit ja generaattorit. Nykyään Internetissä on monia vaihtoehtoja ilmaisille malleille ja suunnittelijoille, joiden avulla voit luoda aloitussivun. Suosituin palvelu. Tämä on erinomainen vaihtoehto yrityksille, joilla on rajoitettu budjetti, mutta joilla on markkinoinnin ja suunnittelun asiantuntijoita;
• Ota yhteyttä asiantuntijoihin. Voit tilata tekstin aloitussivulle copywriterilta, suunnittelun kehittämisen suunnittelijalta ja integroinnin moottoriin ohjelmoijalta. Samalla yrityksellä tulee olla markkinoija, joka seuraa projektia sen kaikissa vaiheissa. Tämän menetelmän etuja ovat suhteellisen alhaiset kustannukset ja melko korkeat tulokset, haittoja ovat virheriski asiantuntijoiden valinnassa;
• Toimiston ulkoistaminen. Tämä aloitussivun luomismenetelmä sisältää yhteydenoton toimistoon, joka analysoi kilpailijoita, valitsee konseptin, kehittää mainoskampanjastrategian, ratkaisee integrointiongelman moottorin kanssa ja käynnistää projektin. Sinulta vaaditaan vain opas aloitussivun luomiseen, ja toimisto ottaa vastuulleen avaimet käteen -aloitussivun kehittämisen. Tämän menetelmän etuja ovat korkea tehokkuus ja ajansäästö, haitat ovat korkeammat kustannukset kuin aikaisemmissa vaihtoehdoissa;
• Ylläpidä asiantuntijoita, jotka käsittelevät... Tämä on kallein ja tehokkain tapa. Oma tiimisi, joka koostuu suunnittelijasta, copywriteristä, markkinoijasta ja layout-ohjelmoijasta, antaa sinun mainostaa tuotettasi/palveluasi täysimääräisesti markkinoille.

Onko mahdollista luoda aloitussivu itse?

Voit luoda aloitussivun itse, mutta sinulla tulee olla tiettyjä taitoja verkkokehityksessä, analytiikan ja suunnittelun alalla. Jos sinulla ei ole tällaista kokemusta, käytä palveluita, jotka tarjoavat valmiita malleja, joissa sinun tarvitsee vain täyttää teksti ja määrittää verkkotunnus ja hosting.

Aloitussivun luominen itse säästää rahaa ja aikaa. Internetistä löydät resursseja, joissa on eri aiheiden malleja, joiden mukana tulee ohjeet nopeaan asennukseen ja muokkausohjelmistoja. Tällaisten sarjojen hinta voi olla paljon alhaisempi kuin aloitussivun kehittämisen hinta erikoistuneessa toimistossa:

Onko mahdollista luoda aloitussivu ilmaiseksi?

Koska kiinnostus aloitussivuja kohtaan kasvaa jatkuvasti, kehittäjät tarjoavat yhä enemmän työkaluja aloitussivujen luomiseen malleihin perustuen. Tässä on luettelo suosituimmista tavoista ja palveluista:

• Voit luoda ilmaisen aloitussivun, jos rekisteröidyt Wixiin;
• Voit luoda aloitussivun Adobe Photoshopilla;

Kolmas vaihtoehto sopii parhaiten aloittelijoille, joilla on vähimmäistiedot ja jotka eivät halua tuhlata aikaa monimutkaisten web-ohjelmointijärjestelmien oppimiseen.

Aloitussivun optimointi

Aloitussivun luominen on puoli voittoa; on tärkeää optimoida se oikein. Yksisivuisilla verkkosivuilla on yksi, mutta melko merkittävä haittapuoli - hakukoneiden on melko vaikea löytää niitä. Monisivuisilla resursseilla on ainutlaatuiset otsikot, oikeat linkit ja monimutkainen rakenne, joka osoittaa sivujen painon jne.

Yksisivuisen sivuston arkkitehtuuri ei mahdollista laadukkaan sisäisen optimoinnin suorittamista klassisessa mielessä, sivuston "räätälöimistä" hakukoneiden vaatimuksiin. Googlen ratkaisu antoi meille mahdollisuuden päästä eroon tästä ongelmasta - asettelu JavaScriptillä ja PushState-menetelmällä.

Voit optimoida aloitussivusi seuraavasti:

• hajota aloitussivu lohkoihin;
• Jokaisen lohkon on saatava oma yksilöllinen ilmaisin, otsikko, kuvaus ja otsikko, URL-osoite.

Toisin sanoen jokaisella lohkolla on oltava samat ominaisuudet kuin kaikilla sivuston yksittäisillä sivuilla, kun taas hakurobotti havaitsee sivustosi useana ainutlaatuisena sivuna. Aloitussivun vierailijat eivät välttämättä huomaa tätä päätöstä; vain tarkkaavaisimmat huomaavat, että URL-osoite ja otsikko muuttuvat sivua vierittäessä. Tällaisen projektin toteuttamiseksi tarvitset tiettyjä tietoja SEO-alasta ja asettelusta JavaScriptillä.

Jos tarvitset vain tietoja palveluista, joilla voit tehdä aloitussivun, siirry suoraan vaiheeseen 5 - asettelutyökalun valinta. Jos haluat ymmärtää aloitussivun luomisalgoritmin A:sta Z:hen, lue koko artikkeli.

Aloitussivun tekeminen - vaiheittaiset ohjeet 9 vaiheessaVaihe 1. Valmistelu Aloitussivun tarkoitus

Ensinnäkin määritämme aloitussivun tarkoituksen, mitä haluamme saada sivun vierailijoilta. Tyypillisesti tämä on yksi kolmesta asiasta:

1. Tavaroiden/palvelujen myynti (esimerkki: hunajan myynti, logosuunnittelupalvelujen myynti, verkkokurssin myynti);
2. Ota yhteyttä (esimerkki: uutiskirjeen tilaus, mittauspyyntö);
3. Tiedot (esimerkki: kutsu ilmaiseen offline-tapahtumaan, kaupan kampanjasivu, jossa on tarjouksia).

Määritämme kohdeyleisön ja sen, mikä on heille tärkeää

Tässä vaiheessa meidän on tärkeää ymmärtää, kuka tarjouksemme kohdeyleisö on, mitä kipuja heillä on, mitä toiveita, mitä pelkoja ja mitä nämä ihmiset haluavat saada. Tämä kaikki on tärkeää ymmärtää, jotta sivuston elementit, kuten teksti ja suunnittelu, tehdään kohdeyleisöön (kohdeyleisöön) keskittyen.

Kuinka määrittää kohdeyleisö?

• Analysoi niitä asiakkaita, joiden kanssa olet jo työskennellyt tai työskentelet parhaillaan;
• Kysy asiakkailta, mikä on heille tärkeää. Kyllä, juuri niin, soita tai kirjoita, valmistele kysymysluettelo etukäteen;
• Muista, tai vielä parempaa, kirjoita ylös kysymykset, joita sinulle kysytään useimmiten tuotteestasi.
• Lue temaattisia sivustoja/foorumeita ja katso, mikä huolestuttaa asiakkaitasi.

Kilpailijoiden tarkastelu (benchmarking)

Kun olet kirjoittanut kaikki ajatuksesi ja ideasi tulevasta aloitussivusta, on aika aloittaa kilpailijoiden analysointi (benchmarking). Jos tunnet jo kilpailijasi, hienoa; jos et vielä, tee hakuja hakukoneista oman markkinaraon avainsanoilla.

Analyysin tarkoituksena on löytää ja nähdä, mitkä kilpailijat tekevät huonosti ja eivät toista virheitään ja mitä he tekevät hyvin, tarkastella ideoita, puuttuvia lohkoja, mielenkiintoisia suunnitteluratkaisuja. Tämä ei tarkoita, että sinun tarvitsee vain kopioida ne, sinun ei tietenkään tarvitse tehdä sitä, tallenna ne itsellesi, sitten tekstin kirjoittamisen ja suunnittelun kehittämisvaiheessa mukauta ne projektiisi.

Kuinka teen tämän: Luon erillisen kansion nimeltä "Ideat" ja otan kuvakaappauksia mielenkiintoisista lohkoista.

Vaihe 2. Tekstin kirjoittaminen aloitussivulle

Monille (mukaan lukien minulle) tekstin kirjoittaminen on vaikein kehitysvaihe, joten yritän henkilökohtaisesti aina delegoida tämän vaiheen copywriterille.

Laita kaaos päässäsi paperille

Yksinkertaisesti, ajattelematta sarjaa, siirrä kaikki ajatukset ja ideat tulevaa laskeutumista varten paperille. Kirjoita ylös kaikki, mistä haluat puhua. Kun kirjoitat tällaisen ajatuslistan ja tarkastelimme kilpailijoiden ideoita, seuraava askel on yhdistää kaikki ja luoda aloitussivun lohkot ja rakenne.

Laskeutumislohkojen teko

Aloitussivu koostuu tietyistä lohkoista; et voi vain kirjoittaa kiinteää tekstiä, kuten artikkeli, ja vain julkaista sitä. Tämä tulee olemaan hirveän kiusallista luettavaa.

Tässä on pääluettelo lohkoista, jotka löytyvät 90 prosentilta aloitussivuista:

Ensimmäinen näyttö USP:llä (ainutlaatuinen myyntiehdotus)

Tuotteen paljastaminen (palvelun tai tuotteen kuvaus)

Tekijän/yrityksen tiedot

Arvostelut

Tapaukset (menestystarinat)

Lomake/toimintakehotus

FAQ (vastaukset usein kysyttyihin kysymyksiin)

Yhteystiedot / sivuston alatunniste

Mitä muita lohkoja sivustolla voi olla:

• Faktat numeroina
• Edut (edut)
• Video
• Portfolio
• Kenelle
• Yhteistyön vaiheet (tai Kuinka tehdä tilaus, Kuinka jättää pyyntö)
• Tariffit ja hinnat
• Yhteistyökumppanit
• Galleria
• Ajoittaa
• Tiimi
• Todistuksia, diplomeja, kiitoskirjeitä
• Dokumentointi
• Ajastin

Kun aloitussivun kehys on valmis, alamme kirjoittaa tekstiä. Voit tehdä sen itse tai ulkoistaa sen copywriterille.

Laitoimme pääasian alkuun. Sinun ei tarvitse kirjoittaa itsestäsi sivuston alussa, vaan esitä tuotteesi ensin.

Korvaa yleiset sanat faktoilla. Vierailijoita ei tarvitse vakuuttaa mistään; jätä tämä oikeus heille. (Esimerkki: älä kirjoita, että olet markkinoiden johtajia, joihin voi luottaa, näytä arvosteluja yrityksistä, joille tarjosit palveluita ja he olivat tyytyväisiä, lisäksi liitä alkuperäinen arvostelu, jotta se ei ole perusteeton).

Toimii erityisen hyvin ensimmäisessä näytössä ja USP:ssä. Kun vierailija saapuu aloitussivullesi, sinulla on kolme sekuntia aikaa kiinnittää hänen huomionsa. Jos sinulla ei ole aikaa, henkilö sulkee sivun ja jatkaa surffausta. Ensimmäisen näytön tulee olla mahdollisimman osuva kyselyyn, jonka kautta vierailija saapui sivustolle. (Esimerkki: jos henkilö hakee "Yksittäisen yrittäjän kirjanpito", aloitussivua ei tarvitse näyttää, jonka otsikko on "Osayhtiön kirjanpito").

USP (ainutlaatuinen myyntiehdotus). Yksinkertaisesti sanottuna pääotsikko ja kuvaus, joiden pitäisi kertoa ytimekkäästi, mistä aloitussivulla on kyse. Voit luoda USP:n käyttämällä 4U-tekniikkaa.

Mitä lyhyempi sen parempi. Yritä kirjoittaa tekstilohkoja mahdollisimman lyhyiksi. Kukaan ei lue pitkiä jalkoihin tekstiä, nykyään ihmisillä on aina pulaa ajasta ja tämä on otettava huomioon. Jos sinun on silti annettava paljon tietoa, jaa se kappaleisiin ja lohkoihin.

Lisää nimikkeitä. Tekstin kappaleita ei pidä kirjoittaa sellaisenaan ilman otsikkoa. Suurin osa vierailijoista vieraillessaan verkkosivustolla selaa ensin sivustoa ja yrittää arvioida, pääsivätkö he sinne vai eivät. Ja tässä otsikoilla on tärkeä rooli, koska hän selailee sivustoa ja arvioi sivuston tarkasti niiden perusteella.

Etkö halua säveltää tekstiä itse? Etsi copywriter, joka tekee tämän puolestasi.

Mistä etsiä copywriteriä

Copywriting-vaihto ContentMonster.ru

Copywriting-vaihto Etxt.biz

Yksityiset yritykset tai asiantuntijat. Voit etsiä niitä haun kautta tai sosiaalisista verkostoista (VK, Facebook, Instagram).

Voit kääntyä copywriterin puoleen paitsi kehittääksesi tekstiä tyhjästä. Voit ottaa meihin yhteyttä esimerkiksi valmiilla lohkoluettelolla, alustavilla luonnoksilla tai jopa jo kootulla tekstillä, jonka copywriter "elvyttää", tekee mielenkiintoisemmaksi ja korjaa virheet.

Vaihe 3. Prototyypin tekeminen

Ennen suunnitteluvaihetta on tärkeää luoda prototyyppi, kerron miksi. Syitä on useita:

Ilman prototyyppiä kuluu enemmän aikaa, kummallista kyllä ​​:) Urani alussa, tekstin kirjoittamisen jälkeen, tein heti suunnittelun. Ajattelin, että näin säästän aikaa, mutta todellisuudessa kävi ilmi, että kaikki kesti vielä kauemmin, koska ei ole kätevää heti keksiä suunnitteluelementtejä ilman kehystä.

Ongelmia asiakkaan kanssa, jos teet aloitussivun tilauksesta. Kaikilla oli tämä tilanne. Hyväksyit tekstin ja aloitit heti suunnittelun, vietit paljon aikaa, lähetit sen asiakkaalle ja hän sanoo, että kaikki on väärin ja pitää tehdä uusiksi, tekstiä vaihtaa jne. Tämä on paljon vaikeampaa tehdä, kun suunnittelu on jo valmis kuin silloin, kun sinulla on vain prototyyppi tekstistä ja ympyröistä.

Prototyyppiä voidaan verrata luonnokseen, jonka teet ennen maalausta. Harvat ihmiset voivat ottaa maalit ja maalata kuvan välittömästi. Joten tässä ensin tehdään luonnos, katsotaan kuinka se suunnilleen käy, mitä lohkoja voidaan siirtää, muuttaa, lisätä tai poistaa tekstiä jne.

Esimerkki tapauksestani prototyypistä ja tällä prototyypillä tehdystä mallista.

Esimerkki prototyypistä

Esimerkki prototyyppisuunnittelusta

Prototyypissä ilmoitamme:

• Tekstin sijoittaminen, korosta otsikot;
• Missä grafiikat (kuvat, kuvakkeet) sijaitsevat?
• Missä painikkeet tulevat olemaan?
• Missä lohkossa tausta on vaalea ja missä lohkossa tumma.

Prototyyppipalvelut:

• Photoshop. Teen sen Photoshopissa. Kun olemme hyväksyneet prototyypin asiakkaan kanssa, täällä on kätevää tehdä malli prototyypin perusteella.
• Moqups palvelu. Erikoispalvelu valmiilla elementeillä, vedä ja pudota ja lisää tekstisi.
• Paperilla. Voit hahmotella prototyypin käsin, jos aloitussivu ei ole monimutkainen etkä halua vaivautua liikaa.

Aloitan aina prototyypin paperilla, se on minulle kätevämpää. Sitten siirrän sen Photoshopiin.

Käytä Bootstrap Gridiä

Suosittelen myös suunnittelemaan ruudukolle, jotta se voidaan myöhemmin helposti sovittaa erilaisiin laitteisiin. Jos valitset asetteluun suunnittelutyökalun, jossa suunnittelu itsessään mukautuu eri näyttöihin (taittotyökaluista lisää myöhemmin), eikä käytä erillistä mobiiliversiota sivustosta, niin suunnittelu on kehitettävä ruudukossa.

Photoshop-ruudukkomalli, jota käytän työssäni, voit tehdä.

Vaihe 4. Suunnittelun tekeminen

Kaikki aloitussivun suunnitteluelementit voidaan jakaa kolmeen osaan, tämä on valinta:

Fontti

värit

Kaaviot (kuvat, kuvakkeet, kuvat)

Jokainen elementti luo tietyn tunnelman, meidän on tärkeää valita sellainen yhdistelmä kaikista elementeistä, jotta vierailijalle muodostuu oikea, luottavainen asenne yritystämme ja tuotettamme kohtaan.

Esimerkkinä: Hautauspalveluita tarjoavalla sivustolla kirkkaat värit ja tyttö, jolla on säteilevä hymy, jossa on suurilla kirjaimilla kirjoitettu PROMOTION!, eivät todennäköisesti ole sopivia. Tai sivusto lomien järjestämisestä harmaissa, haalistuneissa väreissä, mustilla painikkeilla ja laatta-serif-fontilla, jonka katselun jälkeen haluat pudota masennukseen, etkä tilata lomaa lapsellesi. Esimerkit ovat tietysti liioiteltuja; et todennäköisesti näe niitä elämässä (vaikka se on mahdollista), mutta luulen, että ymmärrät asian.

Keskustellaan jokaisesta elementistä yksityiskohtaisemmin.

Fontti

Teksti on minkä tahansa verkkosivuston perusta, joten fontti on yhtä tärkeä kuin väri tai grafiikka. Fontti voi myös luoda tunnelmaa; se voi olla kevyt tai brutaali, herättää kalleuden tai yksinkertaisuuden tunteen jne.

Perustuu aiheeseen ja tunteisiin, jotka haluat herättää vierailijoissa.

Jos et halua vaivautua keksimään yhdistelmiä, valitse valmiit neutraalit vaihtoehdot, jotka olen sinulle valmistanut. Ne sopivat mihin tahansa teemaan. Tämä:

• Roboto
• Avoin ilman
• Pt sans

Valitse niistä yksi tai kaksi ja sekoita.

Esimerkiksi:

Otsikko - Roboto (lihavoitu)
Teksti - Roboto (kevyt)

Otsikko – Avoin ilman (lihavoitu)
Teksti - Roboto (kevyt)

Otsikko - Pt sans (tavallinen)
Teksti - avoin ilman (valo)

Mistä saan fontteja?

On ilmaisia ​​ja maksullisia fontteja. Ensimmäisessä vaiheessa suosittelen käyttämään ilmaisia ​​kirjasimia Google Fontsista. Siellä on hyviä vaihtoehtoja, ja ne, jotka kuvailin edellä, ovat myös siellä.

Miksi suosittelen Google-fontteja?

Koska heidän lisenssinsä antaa sinun käyttää fontteja sekä itsellesi että kaupallisiin tarkoituksiin. Jos päätät ostaa haluamasi fontin kehittäjiltä tai erityisistä verkkokaupoista, niin ok, ei ole ongelmia, mutta jos aiot ladata kirjasimia ilmaiseksi kolmansien osapuolien sivustoilta, on tärkeää tarkistaa lisenssi, koska voit rikkoa tekijänoikeuksia, jos käytät kirjasinta, joka on maksettu, mutta et ostanut sitä.

Jos teet verkkosivuston itsellesi, korvaa itsesi, jos teet sen asiakkaalle, korvaa asiakas.

VäriKuinka valita oikea värimaailma verkkosivustolle?

Valkoinen, harmaa ja musta värit sisältyvät jo sarjaan, niitä käytetään aina, esimerkiksi fontti on valkoinen, harmaa tai musta, sivuston tausta on valkoinen, harmaa tai musta. Sanotpa mitä tahansa, näitä värejä käytetään jo aloitussivulla. Niitä kutsutaan akromaattisiksi (eivät sisällä värisävyjä). Jäljelle jää vain kromaattisten värien (värisävyjen) valinta.

Tyypillisesti verkkosivusto käyttää yhtä, kahta tai kolmea kromaattista väriä. Suosittelen valitsemaan yhden tai enintään kaksi, muuten on mahdollista, että et voi yhdistää niitä harmonisesti ja sivusto näyttää rumalta ja epäharmonisesta.

Katso mielenkiintoinen video tästä aiheesta

Sinun on myös valittava ne aiheesi perusteella.

Esimerkkejä kunkin värin tunnelmasta:

Materiaali väreistä on otettu täältä.

Grafiikka (valokuvat, kuvakkeet, kuvat)

Viimeaikainen trendi on, että on parempi käyttää mahdollisimman monia kuviasi kuin käyttää kuvia kuvista tai ilmaisista Internetistä. Tämä tapahtui, koska arkistokuvista on tullut jo tylsää; identtiset hymyilevät naiset puhelinkeskuksesta tai iloiset, leikkivät muuttajat sinisissä haalareissa herättävät vähintään epäluottamuksen tunteen.

Rehellisesti sanottuna olen myös tehnyt syntiä tämän kanssa aiemmin, mutta nyt pyydän (pyydän) asiakkaita lähettämään mahdollisimman monta "elävää" valokuvaansa tuotteista, henkilökunnasta, tiloista jne.

Totta, on parempi ottaa valokuva puhelimellasi, vaikka se olisi huonompilaatuinen, mutta asiakas ymmärtää, että et piiloudu Internetistä tulevan kuvan naamion taakse, näytät kasvojasi, toinen piste luota ihmiseen.

Tietysti on aiheita, joissa ei ole mitään erityistä näytettävää, niin voit jo turvautua kuviin. Suosittelen silti ostamaan kuvia sieltä mieluummin kuin etsimään ilmaisia ​​kuvia hausta, koska niitä käytetään useammin muilla sivustoilla.

Joku sanoo: "Ilja, valokuvat näyttävät lentokoneelta!" - Sellainen on :) On tapa ladata kuvia dollarilla, palvelusta. No, jos olet tekemässä projektia suurelle kaupalliselle yritykselle, on parempi budjetoida tämä summa ja ostaa kuvia virallisesta valokuvakannasta, jälleen suojataksesi itseäsi.

• Service ShopDiz.pro - kuvien lataaminen varastosta hintaan 0,5-1 dollaria.
• ShutterStock-palvelu on suosituin osake, jossa on suuri määrä valokuvia, vektoreita ja videoita.

Kuvien valinnassa keskity myös aiheeseen ja siihen, mitä tunteita haluat herättää asiakkaissa. Luottamus, ilo, luotettavuus, onnellisuus jne.

Kuinka keksiä suunnitteluideoita lohkoille? Tässä ei ole universaalia sääntöä. Tärkeintä on poistaa kaikki tarpeettomalta näyttävä, lyhentää tekstiä, käyttää grafiikkaa kohtuudella, äläkä ylikuormita. Katso esimerkkejä hyvistä aloitussivuista, tee muistiinpanoja itsellesi, ota kuvakaappauksia lohkoista, joista pidät, jotta voit tehdä jotain vastaavaa projekteissasi.

Vaihe 5. Valitse asettelutyökalu

Taittotyökaluja on nykyään tarjolla paljon, puhun vain niistä, joita olen itse käyttänyt ja jotka ovat kätevimpiä minulle ja asiakkaille.

1. CMS WordPress + WPBakery tai Elementor builder

Asennat WordPress-sisällönhallintajärjestelmän, asennat mallin, WPBackery-rakennustyökalu on maksettu, mutta se tulee ilmaiseksi 99 %:lla malleista, jotka minä . On olemassa toinen kätevä suunnittelija, tämä on Elementor, se on ilmainen, mutta laajentaaksesi sen toimintoja osta Elementorin Pro-versio. Minulle molemmat suunnittelijat ovat käteviä, en voi suositella yhtä, jokaisella on omat etunsa. Katso molempien rakentajien sivustojen kuvaukset ja vaihtoehdot ja valitse sopiva.

Käytän tätä vaihtoehtoa pääasiassa, jos tarvitsemme aloitussivun lisäksi lisäsivuja, eli teemme monisivuisen sivuston. Tai, jotta sivusto ei olisi sidottu mihinkään alustaan, sen tulisi sijaita henkilökohtaisella isännöinnilläsi.

Esimerkiksi tässä blogissa käytän The7-mallia, joka tulee WPBakery-laajennuksen mukana.

Voit valita verkkotunnuksen palvelusta:

• Reg.ru - verkkotunnuksen rekisteröinti
• Timeweb.com - jos ostat verkkotunnuksen heti isännöinnillä, on kannattavampaa ostaa täältä

Verkkotunnuksen rekisteröinti on sama kaikille palveluille:

Rekisteröi tili palveluun;

Valitse verkkotunnusvaihtoehto, nimen on oltava vapaa;

Valitse vyöhyke (ru, com, рф jne.);

Anna passitietosi, jos rekisteröidyt oikeushenkilöksi, niin yritystiedot;

Maksa verkkotunnuksesta vuodeksi (tai useita vuosia kerralla);

Valmis!

Jotta voit liittää verkkotunnuksen valittuun suunnittelijaan tai isännöintiin, sinun on rekisteröitävä ns-palvelimet toimialueen asetuksissa. Tuki auttaa sinua selviytymään tästä tehtävästä, jos et pysty selvittämään sitä itse.

Vaihe 7. Suunnittele aloitussivu

Kun suunnittelu on valmis ja olet päättänyt asettelutavan. Seuraava askel on viedä tämä koko juttu loppuun.

Olisi mahdotonta puhua kaikista asettelutyökaluista yhdessä artikkelissa, sinun on tutkittava ne itse. Vaihtoehdot, kuinka voit tehdä tämän:

- tämä on kurssini, jonka nauhoitin The7-mallilla ja WPBakery-konstruktorilla;

Tilda.Education - oppitunnit ja webinaarit Tilda-suunnittelijasta;

WPlovers kanava- kaveri äänittää oppitunteja Elementorilla;

LPGenerator-tietokanta – vastauksia LPGenerator-alustaa koskeviin usein kysyttyihin kysymyksiin.

Vaihe 8. Liitä lisätyökaluja Online-chat

Online-chat lisää konversiota, todistettu! Jos on jotain, jota henkilö ei ymmärrä ja tarvitsee neuvoja. Kaikki eivät soita tai lähetä sähköpostia tukeen, vaan on helpompi kysyä ja saada vastaus heti online-chatissa. Voit yhdistää esimerkiksi Jivositen, käytän sitä itse, se "tuo" minulle uusia asiakkaita. Voit kirjoittaa minulle chatissa "Hei!"

CallbackMetrica

On tärkeää seurata verkkosivuston indikaattoreita; ilman numeroita olet kuin sokea kissanpentu. On tärkeää ymmärtää kuinka monta ihmistä vieraili sivustolla, kuinka moni jätti pyynnön, mitä yleisiä indikaattoreita sivustolla on, voit jopa tarkastella vierailijoiden käyttäytymistä, kuinka he näkevät sivuston. Voit asentaa Yandex Metricsin ja/tai Google Analyticsin.

Uudelleenkohdistaminen

Jos aiot näyttää mainoksia sosiaalisissa verkostoissa, asenna haluamasi sosiaalisen verkoston koodi verkkosivustollesi. Tämä koodi kerää luettelon vierailijoista, jotka vierailivat aloitussivullasi (eli olivat kiinnostuneita tarjouksesta) ja joilla on profiili sosiaalisissa verkostoissa. Sitten voit näyttää mainoksiasi heille valitussa sosiaalisessa verkostossa.

CRM

CRM on vastuussa siitä, ettei yksikään sovellus katoa sivustolta, jotta ymmärrät jokaisen sovelluksen kohdalla, mihin toimenpiteisiin on ryhdyttävä (soita takaisin, lähetä pyyntö, tavata, muistuta itsestäsi 14 päivän kuluttua jne.). Tämä pätee, jos sinulla on asiakkaita, mutta jos sinulla on 2-3 kuukaudessa, et mielestäni tarvitse CRM:ää.

Suosituimmat CRM:t ovat:

• AmoCRM (hinta 499 - 1499 ruplaa/kk)
• Bitrix24 (hinta, ilmaisesta tilauksesta 11 990 ruplaan/kk)
• Google-laskentataulukko, Excel tai kynä ja paperi (jos tarvitset sitä pienellä budjetilla)

Laskin

Joissakin markkinaraoissa on tärkeää käyttää laskinta palvelun tai tuotteen laskemiseen. Tämä ei ole vain kätevää, vaan myös lisää sovellusten muuntamista. Koska on aina mielenkiintoista painaa painikkeita, liikuttaa vipuja ja nähdä, mikä on lopullinen hinta. Ja se myös lisää hakukoneiden käyttäytymisindikaattoreita.

Laskurin voi joko tilata kehittäjiltä, ​​mikä on kallista, tai käyttää valmiita palveluita. Siellä on palvelu uCalc, joka voidaan mukauttaa suosittuja sisällönhallintajärjestelmiä, suunnittelijoita tai mukautettua verkkosivustoa varten. Rakenna laskimesi kätevällä rakentajalla ja lisää se sivustolle.

Tilaajakannan kerääminen

Jos päätät kerätä asiakasyhteystiedot tilaajatietokantaan sähköpostien tai tekstiviestien lähettämistä varten myöhemmin, sinun on käytettävä erikoispalvelua. Haluat ehkä harkita SendPulsea. Tarkistin äskettäin tämän palvelun, jonka voit tehdä. SendPulsella on ilmainen liittymä, jolla voit testata palvelua. Jos ei hänen, niin markkinoilla on muita tarjouksia, esimerkiksi MailerLite, UniSender, JustClick, GetResponse jne.

Vaihe 9. Varmistus

Niin! Kaikki on asennettu, yhdistetty, sivusto on jo Internetissä, hurraa, hyvin tehty. Nyt on aika tarkistaa se. Mitä minun pitäisi tarkalleen tarkistaa?

Tekstin tarkistus

Muista oikolukea teksti tai ota yhteyttä oikolukijaan/kopion kirjoittajaan. Tarkistamme tekstissä virheitä, vahingossa kopioituja lohkoja asettelun aikana jne. Mikään ei pilaa vaikutelmaa vakavasta yrityksestä enemmän kuin virheet tekstissä.

Sopeutuvuuden tarkistus

Muista tarkistaa aloitussivun asettelu tabletillasi ja puhelimessasi. Sopeutuuko kaikki hyvin? Kyllä, joskus käy niin, että kaikkea ei ole mahdollista järjestää täydellisesti, mutta sen pitäisi olla ainakin luettavaa ja enemmän tai vähemmän siistiä. Jos lohkoa ei voida mukauttaa oikein, sinun on tehtävä kaksi identtistä lohkoa, piilotettava toinen tietokoneversiossa ja toinen mobiililaitteissa. Ja jokainen lohko on kätevä konfiguroida valitulle resoluutiolle.

Painikkeiden testaus

Tarkista, että kaikilla painikkeilla on vaadittu arvo: ankkuroi haluttuun paikkaan, avaa modaalinen ikkuna, siirry toiselle sivulle jne.

Hakemuslomakkeiden tarkistaminen

Lähetä testipyyntö ja tarkista sähköpostin toimittavuus. Jos olet integroinut CRM:n, tarkista, että sovellus sisältyy CRM:ään.

Esimerkkejä aloitussivuista

Näet esimerkkejä kehittämistäni aloitussivuista

Jos sinun on tehtävä aloitussivu tilausta varten, kirjoita kommentteihin tai jätä pyyntö

TULOS

Jos olet suorittanut kaikki vaiheet, onnittelut, aloitussivusi on valmis! Nyt tarvitset aloitussivusi tuomaan sinulle asiakkaita. Tätä varten sinun on määritettävä mainonta, mutta se on tarina toiselle artikkelille. Toivon, että tästä artikkelista oli sinulle hyötyä ja ymmärsit koko korkealaatuisen avaimet käteen -aloitussivun kehittämisprosessin. Jos sinulla on kysyttävää, voit kirjoittaa kommentteihin tämän julkaisun alla. Voit myös kirjoittaa menetelmäsi ja temppusi muistiin verkkosivustoa luodessasi, on mielenkiintoista lukea ja oppia saavutuksiasi :)

Google-kirjasimet

Kirjoita ajatuksesi kommentteihin. Nähdään muissa artikkeleissa!

Aloitus, laskeutuminen, aloitussivu, aloitussivu, yksisivuinen sivusto, yksisivuinen sivu, myyntisivusto, aloitussivu.

Niin monta nimeä, jopa täysin perverssiä, sama asia. Pointti on siinä, että tarvitset tällaisen sivuston melkein riippumatta siitä, mitä teet.

No, koska sitä tarvitaan, ratkaistaan ​​sitten sen luomisongelma. Teetkö itse aloitussivun? Tämän artikkelin jälkeen - ei kysymystä!

Lisäksi se on oikein, merkityksellistä ja osuu maaliin. Kuten he sanovat, voit tehdä itse arvostetun myynti-aloitussivusi.

Varmuuden vuoksi tai vaihe 0

Yleensä sanotaan, että yksisivuiset sivustot luodaan myymään tai hankkimaan henkilön yhteystiedot verkossa, mutta itse asiassa täällä on paljon laajempi tehtävävalikoima:

Vastaanota uusia tavaroita/palveluita koskevia pyyntöjä;

Lisää bränditietoisuutta;

tiedottaa tavaroiden/palvelujen toimittamisesta;

Tarjoa neuvoja palveluista;

Vastaanota hakijoiden ansioluetteloita;

Houkuttele kumppaneita, jälleenmyyjiä, edustajia;

Tarjoa pääsy palveluun;

Ja niin edelleen.

Ennen kuin aloitat luomisen, sinun on muistettava, että et voi yrittää myydä tuotetta ja houkutella jälleenmyyjiä yhdelle sivustolle. Ja kaikki siksi, että nämä ovat erilaisia ​​tehtäviä, ja tämä tarkoittaa erilaisia ​​aloitussivuja.

Tärkeä. Ennen luomista sinun on määriteltävä selvästi aloitussivusi tarkoitus. Ja muista - tavoite pitäisi olla yksi.

Anna tämän vähentää potentiaalisten ihmisten tavoittavuutta, mutta lisää sivun tehokkuutta, mikä oikeuttaa kaiken taloudellisesti.

VAIHE 1 – Lahjoita tai tee se itse

Tässä vaiheessa sinun on määritettävä, kumman kahdesta ratkaisuvaihtoehdosta valitset.

Mitä tehdä... Mitä tehdä

Ja ne valitaan taloudellisten ja aikaresurssien perusteella. Katsotaanpa kutakin niistä etuja ja haittoja.

Rakentaja

Kerran yksi asiakas kirjoitti meille valituksen saatuaan sivuston. Sen ydin oli, että emme ottaneet paljon rahaa perustellusti.

Kaikki näytti hyvin oudolta, koska hän oli jo perehtynyt kaikkeen ja allekirjoittanut sopimuksen. Mutta emme ole huono yritys, joten meidän on helpompi päästää asiakas rauhassa (ei aina) kuin yrittää todistaa jotain. Niin me teimme.

Ja kaikki tämä tapahtui, koska hän löysi Internetistä aloitussivun suunnittelijan ja oppi, että hän pystyi tekemään kaiken itse, viettäen siihen kirjaimellisesti 5-6 tuntia ja maksamalla enintään 1 000 ruplaa kuukaudessa.

Mutta sinä ja minä ymmärrämme, että voit koota "auton" itse, mutta kuinka pitkälle se menee, kuinka yksilöllinen se on, kuinka paljon siinä on oikeat tekniset varusteet...

Kuvasimme artikkelissa yksityiskohtaisesti kaikki aloitussivun luomisen vaiheet määräajoineen.

Plussat :

• Halpa. Todella paljon. 500-1000 ruplaa kuukaudessa ja olet yksisivuisen verkkosivuston onnellinen omistaja;
• Vain. Sinun ei tarvitse miettiä ulkoasua, mukauttamista mobiililaitteisiin tai uusien sovellusten tekstiviesti-ilmoitusten liittämistä puhelimeesi. Kaikki tämä on jo olemassa ja tehty avuksesi;
• Nopeasti. Voit tehdä ja määrittää kaiken todella nopeasti. Muutosten tekeminen ei myöskään ole vaikeaa;
• Tekninen tuki. Onko sinulla kysyttävää? He vastaavat sinulle mahdollisimman nopeasti ja perusteellisesti. Valtava plussa;
• Ilmainen kokeilujakso. Nyt lähes kaikilla aloitussivujen suunnittelijoilla on 14 päivän ilmainen kokeilujakso. Rekisteröidy ja...

Pieni totuus elämästä. “14 päivää ilmaislahjoja! Tänä aikana ansaitsen rahaa käyttämällä aloitussivua verkkosivujen rakentajassa ja tilaan kauniin verkkosivuston toimistolta”, he ajattelivat.

14 päivän kuluttua, kun he tuskin onnistuivat kukistamaan suunnittelijan, tehneet kaiken väärin eivätkä saaneet yhtään tilausta sivuston kautta, he huomasivat, että yksihakulaitteet eivät toimineet.

Miinukset:

• Tietoa. Sinun on tiedettävä, mitä lohkoja käytetään, niiden järjestys jne.

  Päätitkö katsoa kilpailijoitasi? Loistava! Mutta mistä tiedät, että kilpailijoillasi on tehokas aloitussivu ja he menestyvät hyvin?

• Design. Jos työskentelet suunnittelijan kanssa ensimmäistä kertaa, et voi katsoa aloitussivun suunnittelua työn lopussa ilman kyyneleitä.

  Vaikka tämä ei ole ensimmäinen vaihtoehto. Älä odota siistiä muotoilua, joka on "vau!"

• Rajoitus. Valmiiden lohkojen määrä on rajoitettu, kuten myös niiden toimivuus. Suunnitteluratkaisuja ei myöskään esitetä laajimmassa valikoimassa.

  Siksi, jos haluat linnun lentävän tänne, kun joku jättää hakemuksen (ikään kuin hänen hakemuksensa olisi lentänyt luoksesi kirjekyyhkysten kanssa), voit unohtaa tällaisen idean.

Henkilökohtaisesti voimme suositella tätä aloitussivun rakennustyökalua. Yleensä ohjaamme asiakkaita heidän luokseen, jotka ovat vasta aloittamassa tai testaavat markkinarakoa.

Freelancereita

Mennään suoraan asiaan ja kokemuksesta. On MAHDOLTONTA löytää freelancerina, joka luo yksin myytävän aloitussivun tyhjästä ja avaimet käteen -periaatteella. No, se on totta.

On mahdollista löytää yksittäisiä asiantuntijoita: suunnittelija, joka tekee suunnittelun tulevalle verkkosivustolle, tai ohjelmoija, joka kokoaa sen, mutta ei ole hirviötä, joka voisi LAATUA tehdä verkkosivuston sisältä ja ulkoa.

Kaikella työllä tarkoitan myös sellaisia ​​ihmisiä kuin: Internet-markkinoija, copywriter, projektipäällikkö. On yksinkertaisesti mahdotonta olla hyvä kaikessa, ainakin fyysisesti.

Siksi ihanteellinen tapa työskennellä freelancerin kanssa on analysoida, kerätä ja valmistaa kaiken itse.

Ja freelance-pörssistä löydetty suunnittelija ja taittosuunnittelija yksinkertaisesti toteuttavat sen ilman aloitetta.

Plussat :

• Aika. Sekä plussa että miinus. Etuna on, että vapautat suurimmasta osasta ulkonäön ja teknisen osan toteuttamisen vaivaa.
• Laatu. Tärkein plus. He tekevät sata prosenttia paremmin kuin sinä, jos teet sen itse tyhjästä.

  Vähintäänkin, koska heillä on kokemusta ja tietoa, mitä sinulla on omalta alalta, olkaamme rehellisiä, melkein ei mitään.

Miinukset:

• Vastuullisuus. Jos sivusto ei toimi, kukaan ei ole syyllinen, paitsi sinä. Koska sinä hallitset niitä ja puhut tarpeen mukaan.

  Hae. Tarvitset erityistietoa siitä, mistä niitä etsitään, kuinka heille annetaan tehtäviä ja... sinun on myös täytettävä tiivistelmä, näytettävä tekniset tiedot jne.

• Aikaa ja hermoja. Aika löytää freelancerina, aika luoda tehtäviä, aika tehdä aloitussivun prototyyppi, aika hallita. Tulet hukkaamaan paljon aikaa ja hermoja.

  Suurin osa freelancereista on slobseja (anteeksi, mutta näin se on), joten määräajat viivästyvät ja viestintätutkat menevät ajoittain.

  Ja tämä on vähimmäismäärä, jonka voit odottaa, kun haluat tehdä aloitussivun edullisesti.

• Raha. Sinun on haettava rahaa, koska hyvä asiantuntija ilman "yhteyksiä" maksaa melko paljon.

  Keskimääräinen laadukas suunnittelu maksaa noin 8-10 tuhatta, myös layout maksaa noin tämän summan. Jälleen kaikki riippuu projektin monimutkaisuudesta ja esiintyjistä itsestään.

• Huijarit. Työ on rakenteeltaan seuraava: 50/50 Ennakkomaksu ja sitten loppumaksu projektin päätyttyä.

  En halua loukata ketään, mutta freelancerien joukossa on paljon ihmisiä, jotka... eivät ota projektia vastaan ​​ennakkomaksun saatuaan. Yksinkertaisesti sanottuna ne katoavat.

Nyt vähän maksusta: jos päätät työskennellä freelancerin kanssa, suosittelen seuraavaa maksutapaa: tee 50 prosentin ennakkomaksu turvallisena kaupankäynninä (lähes kaikissa pörsseissä on).

Ja siirrä loput summasta suoraan freelancerille. Tässä tapauksessa maksat yli 15%, mutta suojaat itseäsi.

Lifehack. Jos freelancer aikoo huijata sinua, hän saa sinut luopumaan turvallisesta liiketoimesta. Tämä on signaalisi.

Vaihe 2 – kenelle ja mihin?

Tylsin (mutta tarpeellisin) lohko tässä artikkelissa. Ei ole väliä kumpaan suuntaan menet. Teet tehokkaan aloitussivun itse tai lähetät sen erikoistuneelle toimistolle. Joka tapauksessa sinun on tiedettävä 3 asiaa:

Kohdeyleisösi;

Hunt's tikkaat;

Yrityksesi sisäpuoli.

Ainoa ero on, että jos luot aloitussivun yksin, sinun on kirjoitettava ja mietittävä kaikki itse.

Toimisto antaa sinulle yksityiskohtaisen tiedotteen, jonka ansiosta he suunnittelevat kohdeyleisön ja niin edelleen itse. Valitsemme kuitenkin eri reitin ja täytämme tiedotteen itse, kommunikoimme kanssasi Skypen kautta.

Uskomme vilpittömästi, että tämä on ainoa tapa saada kaikki tieto, koska keskustelun aikana on mahdollista esittää seuraavat kysymykset. Ja sellaisia ​​kysymyksiä tulee aina.

Kohdeyleisö

Olemme jo kirjoittaneet kohdeyleisön määrittelystä tai jopa syvemmästä asiakkaan määrittelemisestä.

Tämä tutkimus antaa sinulle käsityksen siitä, kuka potentiaalinen asiakkaasi on, mitä pelkoja, vastalauseita ja toiveita hänellä on tuotteeseesi/palveluusi liittyen.

Mitä tulevalla aloitussivulla tulisi painostaa, mitä sanoja käyttää, mitä kuvia on parasta lisätä. Yksinkertaistettu yhteenvetokaavio näyttää tältä:

Kohdeyleisö Hunt's Ladder

Mutta mitä Huntin tikkaiden tuntemus antaa? Aivan kuten asiakkaan avatar, se tarjoaa tulevan aloitussivun rakenteen.

Kerron lyhyesti, mutta sovelluksessa yksisivuiselle verkkosivustolle, koska yritysten omistajat eivät usein ymmärrä, missä tietoisuusasteessa heidän potentiaalinen asiakkaansa on (jos olet liian laiska lukemaan, katso video).

Lyhyesti sanottuna, ennen ostopäätöksen tekemistä henkilö käy läpi 5 tietoisuusvaihetta/tasoa:

Vaihe "välinpitämättömyys". Ei ole mitään ongelmaa.

Vaihe "tietoisuus". Ongelma on, mutta ratkaisua ei ole.

Vaihe "Vertailu". Vaihtoehtoja ongelman ratkaisemiseksi verrataan keskenään.

Vaihe "Valinta". Ratkaisuvaihtoehto on valittu. Etsitään tuotteita.

Vaihe "Osta". Valikoima tuotetoimittajien välillä.

Kuinka tämä monimutkaisuus voi auttaa sinua aloitussivun luomisessa? Katsotaanpa kutakin vaihetta ja miten edetä:

Vaihe "välinpitämättömyys". Sinun on ensin luotava ongelma ihmisen päähän. Näytä, että jos hän ei osta/ei osta sitä, kaikki on huonosti.

Vaihe "tietoisuus". Sinun on näytettävä ensimmäisissä näytöissä, että hänen ongelmansa ratkaisemiseksi on olemassa erilaisia ​​​​vaihtoehtoja.

Vaihe "Vertailu". Sinun on kerrottava, että ratkaisusi on parempi kuin muut, ja tätä varten voit tehdä vertailutaulukon, tarjota tuotearvion, tutkimustuloksia, henkilökohtaisen valinnan konsultoinnin jne.

Vaihe "Valinta". Sinun täytyy näyttää mikä tarjous sopii hänelle, tai pikemminkin missä muodossa/paketissa. Tätä varten paljastamme tuotteistamme lisää etuja.

Vaihe "Osta". Sinun on ensin näytettävä yrityksesi kanssa työskentelyn edut ja vasta sitten puhuttava tuotteesta ja siitä, että se on paras.

Et ilmeisesti tarvitse tätä, mutta... Jos ihminen esimerkiksi valitsee asunnon ostamisen ja oman talon rakentamisen välillä, niin talon aloitussivulla tulisi olla lohko, joka selittää miksi talo on parempi kuin huoneisto.

Paketti

Voit suunnilleen kuvitella, miltä verkkosivustosi tulee näyttämään päässäsi. Ja on hyvä, jos sinulla on yritysidentiteetti tai brändikirja (ihanteellinen, sanoisin jopa).

Entä tuotteesi tai yrityksesi edut kokonaisuudessaan? Ja useita kymmeniä muita kysymyksiä, joihin sinun on vastattava ennen kuin siirryt prototyypin ja verkkosivuston luomiseen.

Koska oikeat kysymykset muodostavat oikeat vastaukset, jotka otat ja pakkaat verkkosivustollesi. Tämä vaihe auttaa sinua ottamaan kaikki arvokkaimmat asiat yrityksestäsi ja esittelemään sitä.

Jotta saat oleellisen, tässä on esimerkki 10 kysymyksestä, jotka auttavat sinua ymmärtämään yritystäsi ja tuotettasi paremmin/syvemmin ja tarjoamaan sen "ihanan kastikkeen kera":

Muotoile 3-5 syytä, miksi on objektiivisesti kannattavampaa ostaa sinulta kuin kilpailijoilta.

Mitä tuotantoominaisuuksia yritykselläsi on?

Järjestätkö sisäistä henkilöstökoulutusta?

Vertaa tuotetta vastaaviin tuotteisiin. Kerro edut ja haitat.

Kuka on yrityksen henkilö tai henkilöt?

Mitä bonuksia olet valmis antamaan asiakkaille ostaessasi suuria summia?;

Kuvaa yksityiskohtaisesti asiakkaan kanssa työskentelyn vaiheet ensimmäisestä yhteydenotosta työn valmistumiseen.

Kerro meille työn taloudellisista ehdoista (ennakkomaksu, lyhennykset, ensimaksun lykkäys, tuotelainat, alennukset, myytävä tuote, epälikvidin omaisuuden takaisinosto jne.).

Mitä julkaisuja yrityksestä tai yrityksestä on olemassa? (asiantuntijakommentit, haastattelut, tv-tuomarit, kolumnit, artikkelit).

Asiakkaasi ovat tähtiä.

VAIHE 3 – Prototyyppi

Lopulta pääsimme mielenkiintoisimpaan kohtaan. Nyt luomme tulevan verkkosivustosi.

Tai pikemminkin toistaiseksi prototyypin tekeminen itse, mutta ainakin tämä on mielenkiintoisempaa kuin vain kohdeyleisön kuvaaminen.

Vaihe 1. Prototyypin rakenne

Prototyyppi on tulevan aloitussivun rakenne ja lohkojen järjestys, jonka voit helposti rakentaa kohdeyleisösi valintakriteereistä ja vastalauseista.

Paras tapa tehdä tämä on seuraava: ota paperiarkki ja kirjoita muistiin joukko lohkojen/merkityksiä. Se näyttää jotakuinkin tältä:

Lippalakki;

Yrityksen edut;

Luettelo;

Oma tuotanto;

varastossa;

Tiimi;

jne.

Sinä ja minä määräämme lohkot, mutta emme saa myöskään unohtaa kahta klassista rakennetta, joihin mainosmateriaali rakennetaan, eikä aloitussivu ole poikkeus:

(Tuotteet);

PmPHSA(). Sanaa Pain, more Pain, Hope, Solution, Action (kipu, lisääntynyt kipu, toivo, ratkaisu, kehotus toimia).

Tämä artikkeli auttaa sinua, jotta et mieti, miten voit välittää jonkin valituista merkityksistä ja tehdä elämästäsi paljon helpompaa, kun luot prototyypin itse.

Anteeksi rehellisyyteni, mutta minulle on helvetin mukavaa nähdä ihmisiä, jotka työskentelevät myös yöllä (tee se vain terveydestäsi tinkimättä). Aloin ajatella, että työnarkomaanit olivat kuolleet sukupuuttoon. Yhteistyön tuloksista mainitsen vain tämän tosiasian: ruuhkapäivinä saimme 140 hakemusta päivässä ja meidän piti palkata kokonainen myyntiosasto Internet-markkinointikanavaan. Kiitos!

avaa arvostelu Dmitry Novozhilov, D-väri

Tiedätkö mitä sähköpostimarkkinointi on? En esimerkiksi tiennyt ennen kuin tapasin Convert Monsterin kaverit. Uskoin naiivisti, että tämä oli vain kaunis sana. Uskoin ja samalla kuulin, että se auttaa työskentelemään tehokkaammin asiakaskunnan kanssa. Kuusi kuukautta sitten hankimme asiakaskunnan. Se on koottu päiväkodin franchising-sovelluksista. Sovelluksia oli paljon, mutta konversio pysyi erittäin alhaisella tasolla. Taistelin tämän ilmiön kanssa - yritin itse lähettää kirjeitä tietokantaan. Aika ei aina riittänyt - seuraavan uutiskirjeen hyvin laatimiseen meni puoli työpäivää. Jokaisen käytetyn minuutin myötä tarve tehdä pätevä ketju syntyi yhä enemmän. Mutta toistaiseksi kirjeitä on lähetetty kerran viikossa tai kerran kahdessa kuukaudessa. Työssä ei ollut johdonmukaisuutta. Jotain puuttui. Pitkään aikaan emme voineet ymmärtää mitä tarkalleen. Convert Monsterin kaverit pääsivät nopeasti töihin. Ensimmäiset tulokset eivät odottaneet kauaa. Alkuperäisen sähköpostiketjun käyttöönoton jälkeen teimme useita tapahtumia käyttämällä vanhaa tietokantaa. Ne kattoivat sähköpostimarkkinoinnin käynnistämisen kustannukset. Muutaman kuukauden kuluttua huomaamme konversion kolminkertaistumisen. Ja tämä on vasta alkua. Työskentelemme parhaillaan nykyisen muuntokurssin nostamiseksi entisestään. Esimerkiksi vielä kolme kertaa. Laske itse: - kuinka paljon rahaa muuntokurssin nostaminen 2-kertaiseksi tuo? Se on minimi! - kuinka paljon saat, jos suljet vähimmäisprosenttiosuuden asiakkaista nykyisestä perustastasi? Oletko edelleen epävarma, otatko yhteyttä Convert Monsteriin?

avaa arvostelu Sergei Degtyarev

Olemme käyttäneet Internet-liikennettä asiakkaiden houkuttelemiseen jo pitkään. Noin puolitoista vuotta. Tänä aikana vaihdoimme 2 palveluntarjoajaa, kunnes Convert Monsteria suositeltiin meille. Useimpien vastaavia palveluita tarjoavien yritysten yhteistyöehdot ovat samanlaiset: kuukausibudjetti, mainoskampanjan laatiminen ja matkaan. Silloin kampanja vanhentuu, alkaa lasku ja sen seurauksena asiakkaiden puute. Sitten pyydät johtajia muuttamaan taktiikkaa, strategiaa, otsikoita, semanttista ydintä - vetoat kaikkiin pyhiin. Ja he (johtajat, eivät pyhät) tee mitään. Tai ehkä he tekevät, mutta tulosta ei ole. Eräänä päivänä se saastuttaa hampaasi, jätät tämän toimiston toiseen, sitten alat etsiä seuraavaa. Tärkeä! Ennen kuin alat etsiä ensimmäistä, kokeile sitä itse. Tietenkin tämän hetken tuloksesi ovat parhaat mahdolliset, ne ovat yksinkertaisesti NOLLA! Tulimme Convert Monsterin luo epätoivoisina. Tämä oli hetki, jolloin Yandex perusti asennuksen - he poistivat takuun, jolla istuimme niin hyvin, ja lypsivät sitä niin paljon kuin mahdollista ja MAHDOLLISTA. Ymmärsimme, että onnellisuus ei tule hetkessä, mutta odotimme sitä. Ja todellakin! Se alkoi hitaasti koputtaa oveemme – hakemuksia ja myyntiä alkoi tulla. Sitten epäonnistuminen - kesä, sesongin ulkopuolella, työ miinuksella. Mutta kaverit eivät antaneet periksi, emmekä leikanneet budjetteja, koska tiedämme MITÄ se uhkaa. Älä koskaan pienennä budjettiasi tai poistu sivustolta, joka tuo sinulle tuloja! Lopputulos: yli 6 miljoonaa tuloa Yandex.Directin kautta. Olemme enemmän kuin tyytyväisiä yhteistyöhön! Jos sinulla on epäilyksiä, haluatko työskennellä Convert Monsterin kanssa vai ei, ota meihin yhteyttä! Kerromme sinulle, mistä aloittaa. Silloin polkusi niihin on pidempi, ja viimeinen uloskäynti Convert Monsteriin on "uloshengityksesi" ja valo tunnelin päässä. Kaikki tiet vievät edelleen niihin. Jos etsit niitä, tietysti. Se on ajan kysymys. Asetu vain yritykseksi, joka on valmis kehittymään ja skaalautumaan. Muuten he eivät yksinkertaisesti ole kiinnostuneita sinusta.

avoin arvostelu Isabella Ritz, Ritz Group LLC

Ennen kuin otin sinuun yhteyttä, tilasin aloitussivun yhdeltä yritykseltä ja Yandex Direct -asennuksen toiselta. Molemmat yhtiöt ovat markkinoilla tunnettuja, mutta kumpikaan sivustomme + mainoskampanjan yhdistelmä ei pyrkinyt auttamaan, vaan kritisoi vain toista esiintyjää: ohjelmoijat - directologit, directologit - ohjelmoijat. Tämän seurauksena otimme sinuun yhteyttä suosituksesi perusteella ja vain 4 kuukaudessa lisäsimme hakemusten määrää 4-kertaiseksi (jopa 120 kuukaudessa) ja verkkomyyntimme liikevaihtoa useisiin miljooniin ruplaihin.

avaa arvostelu Vladislav Shupenya, Kimberlit-yritys

Tervehdys, rakkaat lukijani. Tänään puhumme teknisistä näkökohdista, joilla voimme lisätä tavaroidemme tai palveluidemme myynnin konversiota. Yksi tärkeimmistä kohdista on hyvin suunniteltu aloitussivu tuotteineen. Ns. aloitussivu, jonka luomisesta puhumme myöhemmin ja saamme valmiit sivukoodit.

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.

Sinun on tarjottava kaikki tarvittava tieto, mutta ei niin paljon, että ylität ja karkottaisit potentiaalisen asiakkaasi.

Esimerkkejä aloitussivun luomisesta + koodaamisesta tutille

Ennen 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ää, kuinka HTML-elementtejä järjestetään. Koostuu valitsimista, ominaisuuksista ja arvoista:

#valitsin (ominaisuus: arvo;)

Valitsin vastaa tietyn tunnisteen nimeä html:ssä. Arvojen muuttaminen ja ominaisuuksien lisääminen säätää sen ulkonäköä. Voit luoda sivuja, jotka näyttävät erilaisilta, käyttämällä eri CSS-tyylejä samaan HTML-koodiin.

5 alkuvaihetta

Nopeaa 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ä on 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 ovat tärkeitä paikkoja, jotka auttavat välittämään tarjouksen arvon selkeästi.

Muutetaan sivuston otsikko ja nimi. Täällä sinun ei tarvitse olla kirjoitustaitoja - 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 "tariffit"-luokan ja kolmen tariffin kanssa.

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ä.

Toistaiseksi emme ole kiinnostuneita tulevan aloitussivun ulkoasusta - katsomme 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 monimuotoisia, 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.

Edut, 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: Verkko- ja mobiiliystävällinen integrointi

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. Hyvä puoli tässä valmiissa ruudukossa on, että säiliöt on suunniteltu reagointikykyä ajatellen ja ne ovat heti käyttökelpoisia mobiililaitteissa. Yksityiskohtainen kuvaus virallisella verkkosivustolla. Ristikko 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, vaan 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 Google Font -otsikkofontit. 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 kanssa

Käytämme kolmea suosituinta tyyppiä: lauseella, lomakkeella ja laskurilla. Asettelun edetessä mallia täydennetään tehosteilla.

Esimerkki 1: lauseella

Laitetaan 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 luokkamme elementeille, joita haluamme erityisesti korostaa.

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 paikoista, joista osiot ovat vastuussa - /* tähdellä merkittyjen vinoviivojen välissä */

/* =========Tarif-tyylit======== */
/* yleiskuva tariffista */
.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;
}
/* laajakuvanäytöillä keskimmäinen tariffisarake on sisennetty ja korostettu */
@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 */
.hinta(
fontin koko: 2em;
fontin paino: lihavoitu;
väri: #fff;
asema: suhteellinen;
z-indeksi: 100;
rivin korkeus: 95 pikseliä;
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 */
.lause (
fontin paino: lihavoitu;
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(
fontin paino: lihavoitu;
margin-top: 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 koristella 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. Otamme käyttöön sujuvan vierityksen ja osien painikkeet sekä tekstianimaatiot ensimmäiselle näytölle.

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.

Sujuvat siirtymät luodaan JavaScriptin tai jqueryn avulla. Jälkimmäinen on yhdistetty Bootstrap-malleihin oletuksena.

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 css-kansioon ja määritä 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 animoidaan. 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 = $(window).scrollTop();
$(".bgparallax").css("ylä",-(vieritty*0.2)+"px");
}

Ensimmäinen rivi rungossa 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 uuteen taustaan ​​edellyttää väriteeman määrittämistä uudelleen.

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 lauseella - 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;
font-tyyli: kursivoitu;
}

Myös jumbotronin teksti päätyi tänne, koska se vaati muutoksia.

Muutamme tariffeja.

/* yleiskuva 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 kanssa

Muutamme jumbotronin täyttöä uudelleen ja värjä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 te auguciga feisiga deleitnit.

• 
  

  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" //