Skip to content

Tarjousbannerin luominen CSS- ja HTML -koodilla – Lopullinen opas

2 de syyskuu de 2021
html css 14749

Verkkosivustojen mainosbannerista on tullut yksi erehtymättömistä työkaluista asiakkaiden ja käyttäjien houkuttelemisessa. Koska ne ovat houkuttelevia ja pääsee miltä tahansa alustalta jossa niitä käytetään.

Lisäksi mainosbannerin luominen HTML- ja CSS -koodien avulla on yksi täydellisimmistä tavoista, joita voit käyttää. Koska molemmat koodityökalut saa mainosbannerisi näyttämään niin houkuttelevalta alkuperäisenä.

Tästä syystä näytämme sinulle vaiheet, jotka sinun on noudatettava luodessasi mainosbannerin ja visuaalisesti houkutteleva CSS- ja HTML -koodeilla. Tällä tavalla sinulla on perustiedot tämän elementin suunnittelusta verkkosivustollasi.

CSS- ja HTML -koodin peruskäsitteet

Yksi helpoimmista tavoista luoda mainos- ja luovia bannereita Web -sivusi on HTML- ja CSS -koodien kautta. Siksi on välttämätöntä, että käsittelet kunkin peruskäsitteet ennen kuin aloitat bannerin ohjelmoinnin.

Joten koodi HTML ei ole ohjelmointikielimutta pikemminkin kuvauskieli. Sitä käytetään määrittämään web -sivun käsite, kuten värit, kuvat, tekstit, luettelot jne. Näin ollen HTML -asiakirjoja voidaan käyttää Web -sivujen luomiseen.

Tällä tavalla HTML- ja CSS -koodit tunnistetaan yleensä nimellä keskitie ohjelmoinnin ja suunnittelun välillä. Koska CSS ja HTML muodostavat yhdessä JavaScripin kanssa verkkosivun visuaalisen osan, joka tunnetaan myös nimellä Front-End.

CSS -koodi puolestaan ​​täydentää HTML -koodia, koska CSS korostaa tyyliä tai verkkosivun esteettinen osa.

Siksi nämä kaksi koodia ovat yksi parhaista vaihtoehdoista ammattimaisten verkkosivujen luomiseen ja sisällyttämiseen niihin luova ammattimainen banneri toimintojensa kautta.

Mitä minun pitäisi pitää mielessä luovien bannereiden suunnittelussa?

Banneria suunniteltaessa meidän on otettava huomioon useita asioita niin, että se olla houkutteleva yleisön silmissä jolle haluamme osoittautua ja olla siten huomaamatta kuin muu verkkomainonta, tässä artikkelissa osoitamme ne kohdat, joihin sinun tulee kiinnittää huomiosi banneria luodessasi:

Ensimmäinen sinun on oltava selvä tavoitteestaeli tiedä mitä tuotetta aiot tarjota ja luo mainoskampanja juuri sitä varten. Jos haluat myydä useita tuotteita, käytä niitä erikseen. Tällä tavalla tuotat enemmän liikennettä verkkoihin ja tavoitat enemmän kuluttajia.

Sinun pitäisi tiedä mihin yleisöön aiot keskittyä tuotteessaAsiakkaan tunteminen on äärimmäisen tärkeää, sillä sinun on otettava huomioon sukupuoli, ikä ja kansallisuus. Tietäen makuista, jotka enemmistö voi hankkia, voit myös luoda näyttävimmän mainosbannerin.

Viestin, jonka aiot antaa bannerissa, tulee olla lyhyt ja suora. Jos et ole selkeä tai laitat paljon tekstiä, ihmiset lopettavat sen lukemisen, koska se tekee heistä jotain ikävää. Viimeisenä mutta ei vähäisimpänä bannerisi on oltava houkutteleva muotoiluTaustan ja kirjasinten välillä on oltava harmonia. Estetiikka on erittäin tärkeää. Voit myös valita animoinnin tai staattisen bannerin tekemisen.

luo mainosbanneri

Sinun on oltava hyvin varovainen, kun suunnittelet mainosbanneriasi, koska joidenkin suunnitteluvirheiden tekeminen kaukana asiakkaiden soittamisesta voi tehdä hylkivän tuotteen, nämä ovat joitain virheitä, joita sinun tulisi välttää kaikin keinoin:

Ei käytä oikeita fontteja (typografia) Tämä osa on erittäin tärkeä, koska se välittää viestin, jonka haluamme välittää kuluttajalle, sen on oltava luettava kirjasin, joka on sopivan kokoinen, ei ole suositeltavaa käyttää yli kahta fonttia, tämä luo kaaoksen kuvaan.

Älä käytä liian korkealaatuisia valokuvia, tämä aiheuttaa bannerimainoksemme latautumisen hitaammin, joten useimmat jättävät sen huomiotta. Yritä myös käyttää sopivaa värivalikoimaaOn erittäin tärkeää, että bannerissa ei saa ylittää neljää väriä.

Älä käytä kuvassa paljon tekstiä, Jos kirjoitat mainontaan kokonaisen testamentin, kyllästyt vain potentiaaliseen kuluttajaan, joka lähtee lukematta neljänneksen mainoksesta. Lisäksi sinun tulee aina yrittää korostaa tuotteen tuotemerkkiä.

Mainospalkit ovat tällä hetkellä yksi houkuttelevimmista digitaalisen markkinoinnin työkaluista. Koska se on mahdollista lisää mainos HTML- ja CSS -banneri sosiaalisiin verkostoihin tai verkkosivuille houkutellakseen ja houkutellakseen käyttäjien huomion.

Aloita avaamalla verkkosivusi koodirivi ja päästä HTML -osioon. Kun olet siellä, sinun on annettava otsikko mainosbannerillesi, voit käyttää ensimmäisen tason otsikkoa. Sitten sinun on käytettävä alaotsikkoa tai h2 määritelläksesi ylennyksesi kohde tai syy.

Nyt voit määrittää kolmannen tason tai h3-otsikon avulla, kuinka paljon alennus, jonka tarjouksesi saa. Nyt voit luoda kappaleen, joka herättää enemmän käyttäjien huomiota, määrittelemällä, että se on rajoitettu mainoskampanja, ja lisäämällä tunnisteen ankkuri, joka ohjaa mainoksen järjestykseen.

mainosbanneri CSS- ja HTML -koodilla

Myöhemmin, jotta mainos näyttää bannerilta, sinun on lisättävä etiketti div eristys alussa ja lopussa HTML -koodistasi.

Kun olet luonut tarjousbanneri HTML -koodilla Sinun on aika tehdä luova kosketus kyseistä banneria käyttäen CSS -koodilla. Tätä varten sinun on käytettävä verkkosivullasi CSS -tunnistepilveä, jotta voit muotoilla sen.

Tätä varten on parasta aloittaa mainosbannerin taustan antaminen. Aloita kirjoittamalla bannerisi nimi. Edellisen ohjeen mukaan kontin div. Nyt voit jatkaa bannerin taustan asettamista lisää ”tausta” -ominaisuus ja väri, jolla haluat mainosbannerisi näkyvän.

Toisaalta, jos haluat mainosbannerisi sisältävän taustakuvan, kuten verkkosivustosi alkuperäisen logon, sinun on käytettävä taustakuva-ominaisuutta. Jotta voit käyttää tätä, sinun on anna sille URL -osoitteen arvo sisältää kuvan, jota haluat käyttää taustana.

Samoin käyttämällä koodia ”taustakoko” voit määrittää kuvan koon tai väri, jolla mainosbannerisi peitetään. Tällä tavalla, kun olet lisännyt haluamasi ominaisuudet, olet luonut onnistuneesti täysin alkuperäisen mainosbannerin.

Onko navigointilinkkejä

On erittäin tärkeää saada banneri navigointilinkillä, koska tällä tavalla se muuttuu yksinkertaisesta kuvasta verkkomainontaan, on olemassa sivuja, kuten Oleoshop helpottaa linkin saamista, vaiheittainen selitys ja erittäin edulliseen hintaan. Pidä tätä pienenä investointina yrityksesi kasvattamiseen.

Suunnittele bannerinauha

Jos haluat luoda modernin bannerilainauksen, voit siirtyä käyttämään HTML / CSS3, CSS3 on yksi parhaista vaihtoehdoista, koska se on kestävämpi, sillä on laaja tuki, siinä on modernit ja esteettiset vaihtoehdot, lähes rajattomat ja hauskat grafiikat.

bannerit verkkosivustollesi

Lisää asettelutyyli

Bannerisuunnittelun luomiseksi meidän on käytettävä CSS -ohjelmointikieltä. Sen avulla voimme käyttää ääretöntä määrää tehosteita, värejä ja suunnittelua ideamme mukaisesti koodin kautta. Jos meillä ei ole paljon suunnittelua koskevia ideoita, voimme etsiä ideoita esimerkiksi Pinterestin kaltaisilta alustoilta. Voimme myös etsiä verkko- tai bannerimalleja, joista joissakin tapauksissa meillä on käytettävissä koodi suunnittelun perustana ja sitten voimme muokata mieleiseksemme.

Responsiivisen bannerin suunnittelu HTML: llä tai CSS: llä

Jos haluat luoda HTML -bannerin, voit siirtyä Google Web Designer -sovellukseen. Kun ohjelma on asennettu tietokoneellesi, napsautaluo uusi tiedosto ’ sitten lisäämme kuvia ja luomme bannerimme. Jää vain viedä tulos

Toisaalta CSS-bannerin suunnittelemiseksi voimme myös siirtyä Google Web Designer -sovellukseen tai tehdä nopean haun selaimessa saadaksemme CSS-tyylisen koodin, joka tarvitaan, jotta voimme näyttää bannerin verkkosivustollamme ja korvata vain välilyönnit jotka osoittavat meitä. Hyvä Koodien lähde on TheDigitalMike -sivu.

Nykyään verkossa on laaja valikoima muokkaussovelluksia, joiden avulla voimme lisätä animaatioita mainosbannerimme koodiin. Creatopy on yksi niistä, jos olet aloittelija etkä tiedä koodinhallinnasta, sama voit animoida oman mainoksesi.

Creatopylla on oma HTML5 -editori, löydämme tuhansia malleja ammattimaisten animoitujen mainosten kehittämiseen. tarjoaa lisää työkaluja koodin luomiseen, Noudata näitä yksinkertaisia ​​ohjeita:

Siirry Creatopy -alustalle, etsi käytettävissä olevat bannerikoot valikosta, valitse yksi ja aloita suunnittelu, HTML 5 -editorin avulla voimme valita animaation, josta pidät eniten, räätälöimme lisäämällä fontin ja kuviaLopuksi annamme bannerille animaatiota soveltamalla aiemmin valittua mallia ja lataamalla tuloksen.Jotkut mainosbannerit, jotka voit suunnitella

Internetissä on useita bannerimainonnan muotoja, joista jotkut ovat silmiinpistävämpiä kuin toiset. Jotkut sopivimmista tuotteen myynnistä ovat seuraavat:

Otsikkotyyppiset bannerit ovat niitä sijaitsevat sivun yläosassa. Koska ne ovat täysin näkyvissä, ne tuottavat eniten liikennettä, eli ne tavoittavat suurimman määrän ihmisiä.

banneri CSS- ja HTML -koodilla

Sivun alareunassa oleva suorakulmainen banneri on yleisimpiä, vaikka ne eivät siirrä pitkällä aikavälillä niin monta käyntiä kuin otsikkokäynnit tavoittaa hyvä määrä ihmisiä.

Sisällön bannerit, nämä ovat bannereita löydät sivun keskeltä Kun esimerkiksi luet uutisia, ne näkyvät todennäköisemmin, koska ne puhkeavat yhtäkkiä ja ovat yksi eniten liikennettä tuottavista.

Useimmat koodit CSS: ssä mainosbannerien tekemiseen

Koodit ovat bannerin perusta, on olemassa laaja valikoima koodeja, jotka muokkaavat sen tiettyjä piirteitä, olipa kyseessä typografia, väri tai reunus. Alla mainitsemme joitain eniten käytettyjä mainosbannereita:

Koodi ’font-family’, joka luo typografisen fontin ja ’fonttityyli’, joka määrittää tyylin (normaali, kursivoitu tai vino). Meillä on myös ’fontti-variantti’joka muuttaa pienet kirjaimet isoiksi, mutta pienemmiksi; ’reuna: 1px kiinteä # 000’ joka säätää reunoja, ’väri: #fff’ tekstin väriä ja ”leveys: 100 pikseliä” leveydelle pikseleinä, erityisesti 100 pikseliä.

Graafisille elementeille

CSS: n suosituimmat koodit kuvien muokkaamiseen ovat ’leveys’ joka muuttaa elementin tai kuvan leveyttä, joka yleensä määritellään pikseleinä, ’korkeus’ määrittää elementin korkeuden ’taustaväri’ joka muuttaa elementin taustaväriä, ’taustakuva’joka olisi lopulta elementin taustakuva ”tausta-asema” joka osoittaa kuvan sijainnin taustalla.

Välilyönneille tai marginaaleille

Tämän luokan suosituimmat ovat: ’marginaali’ joka on marginaali ylöspäin, ’marginaali-oikea’ ajaa marginaalia oikealle, ’marginaali-pohja’ siirtää marginaalia alaspäin, ’marginaali-vasen’ marginaali vasemmalle, ’kirjainväli’ luoda tiloja.

Tekstin lisääminen

Lopuksi koodit, joita käytämme bannerimme tekstin muokkaamiseen, ovat ’font-family’ asettaa fontin, ’fonttityyli’, ’fontti-variantti’ja ’fontin paino’, joka muokkaa kirjasimen paksuutta.