Adaptive layout. Site-ul permite paginilor web să se adapteze automat ecrane de tablete și smartphone-uri. Traficul pe Internet mobil crește în fiecare an și pentru a procesa efectiv acest trafic, trebuie să oferiți utilizatorilor site-uri adaptive cu o interfață convenabilă.
Motoarele de căutare utilizează o serie de criterii pentru a evalua adaptabilitatea site-ului atunci când vizualizați dispozitivele mobile. Google încearcă să simplifice utilizarea internetului pentru proprietarii de smartphone-uri și tablete, menționând în emisiunea mobilă adaptată în cadrul site-urilor dispozitive mobile mobile-friendly.. Yandex funcționează, de asemenea, algoritmul care preferă site-urile cu o versiune mobilă / adaptivă pentru utilizatorii într-o căutare mobilă.
Puteți verifica afișarea paginii pe dispozitive mobile pe servicii și.
Smochin. 1. Mobile Yandex și Google emiterea cu o notă despre prietenia site-ului la dispozitive mobile Ce este un aspect adaptiv
Aspectul adaptiv implică absența stripul orizontal. Derulați și scalabili în vizualizarea pe orice dispozitiv, text lizibil și zone mari pentru elemente clare. Folosind regiuni media, puteți controla aspectul și localizarea blocurilor de pe pagină, reconstruirea modelului astfel încât să se adapteze la diferite dimensiuni ale dispozitivelor.
Principalele tehnici de creare a unui sit adaptiv sunt prezentate în articol. Pentru designul receptiv Lățimea containerului principal al site-ului este setată în%, în timp ce poate fi egală cu ambele lățimi de 100% a ferestrei browserului și mai mică. Lățimea coloanelor grilajului este, de asemenea, stabilită în%. ÎN design adaptiv Lățimea recipientului principal și a coloanelor de rețea este fixată cu ajutorul valorilor din PX.
Structura de cauciuc adaptivă, luată în considerare în această lecție, va funcționa perfect pe un model cu două coloane, făcând site-ul adaptiv și convenabil pentru vizualizarea pe dispozitivele mobile. Șablonul presupune un aspect diferit al conținutului principal al paginilor, în această lecție va fi dezmembrată la pagina principală.
Dulapul paginii principale
Pagina este alcătuită din trei blocuri principale: subsolul de sus (cap), recipientul de ambalaj pentru conținutul principal și salvarul și subsolul (subsol). Ca punct de cotitură al punctelor de design, luați 768px și 480px.
În primul punct, ascundeți meniul de sus și mutați bara laterală sub container cu postări. În al doilea punct, veți schimba locația elementelor antetului, anulați poziționarea butoanelor rețelelor sociale în posturi și anulați fluxul în jurul coloanelor paginilor.
Smochin. 2. Exemplu de aspect adaptiv 1. Metagelet și secțiune
1) Adăugați la secțiune
Fișierele necesare sunt o legătură cu fonturile utilizate, biblioteca jQuery, precum și pluginul prefixfree (nu pentru a scrie pentru proprietățile prefixelor browserului):
2. Capacul paginii
În antetul paginii
Siglă ;
pentru a afișa / ascunde meniul principal
< div class = "col-md-4" > [Trimiteți clasa: BTN - Clasa Flat: Col - XS - 12 "Comandă"]< / div > < / div > |
Notă importantă:Dragi prieteni, în acest exemplu, folosesc stiluri adaptive pentru a crea un formular de contact pe WordPress, adică poate lua forme de dimensiune a ecranului.
Veți vedea butonul din colțul din dreapta sus. Cu siguranță nu lipsesc. 🙂.
Am făcut parte din lucrare, acum mergem la etapa următoare.
Configurarea adreselor de poștă electronică pentru primirea aplicațiilor
În acest pas, trebuie să facem câteva setări, astfel încât literele să meargă la cutia noastră poștală. Cum de a realiza acest lucru va spune mai jos.
Trebuie să facem clic pe fila mare "Letter". Acesta va fi al doilea după șablonul de formă.
Primul lucru pe care îl vedeți este etichetele pe care le-ați adăugat, avem nevoie de ele inserați în scrisoarea literei, acestea vor înlocui datele care intră în utilizator de formular. Cred că am explicat că este inteligibil.
Acum în câmpuri:
- Pentru (în cazul în care cererea este trimisă, în cazul meu, aceasta este adresa mea de e-mail, puteți specifica mai multe adrese în care să trimiteți aplicații)
- De la (unde se află câmpul, adică va înlocui valoarea pe care aplicația vine de la site-ul meu studio)
- Tema (servește la determinarea care formează o aplicație vine, în cazul nostru, aceasta este o aplicație cu formularul de promovare a site-ului).
- Antete suplimentare (rubrici suplimentare, nu le atingeți, sunt necesare pentru corectitudinea formularului de trimitere)
- Corpul mesajului (corpul mesajului, aici specificați de la care a venit scrisoarea și de la care adresă, de exemplu: adresa de e-mail "de la: Ivan": vasya @ mail. RU. »)
- Fișiere atașate (aplicație la fișier, nu atingeți)
Acum trebuie să configuram notificări despre e-mailurile reușite sau nereușite din formularul de contact WordPress.
Acestea vor fi mesaje care vor fi afișate utilizatorului ca răspuns la acțiunile sale cu forma. În mod implicit, merg în limba engleză. Am făcut un transfer rușilor cel mai necesar pentru tine. Ei vor fi mai mult decât suficient și, dacă nu, atunci traducătorul Google să vă ajute. Deci, procedați.
- Dacă trimiteți cu succes un mesaj: "Mesajul dvs. a fost trimis cu succes. Mulțumesc."
- Dacă nu reușiți să trimiteți un mesaj din formularul: "Eroare când trimiteți un mesaj. Încercați mai târziu sau contactați administratorul site-ului. "
- Eroare de umplere: "Erori de umplere. Verificați toate câmpurile și trimiteți din nou. "
- Datele trimise sunt definite ca spam: "Eroare la trimiterea unui mesaj. Încercați mai târziu sau contactați administratorul site-ului. "
- Unele condiții trebuie acceptate: "Vă rugăm să acceptați condițiile pentru continuare".
- Unele câmpuri trebuie completate: "Vă rugăm să completați un câmp obligatoriu".
- Lungimea caracterelor din câmp este depășită: "Este indicat prea multe date".
- Lungimea simbolului insuficient în domeniu: "Datele sunt indicate prea mult".
- Formatul de date nevalid: "Formatul datei este incorect."
- Data anticipată în limita minimă: "Se indică data următoare."
- Data târzie la limita maximă: "Ultima dată este indicată".
- Încărcarea fișierelor nereușite: "Nu a reușit să încărcați un fișier."
- Tipul de fișier nerezolvat: "Acest tip de fișier nu este permis".
- Încărcarea fișierului prea mare: "Acest fișier este prea mare".
- Încărcarea fișierelor a eșuat din cauza erorilor PHP: "Trimiterea unui fișier a eșuat. A aparut o eroare. "
- Formatul numeric introdus de expeditor este incorect: "Formatul numeric este incorect."
- Numărul este mai mic decât limita minimă: "Acest număr este prea mic".
- Numărul este mai mare decât limita maximă: "Acest număr este prea mare".
- Expeditorul nu a intrat în răspunsul corect la întrebarea: "Ați introdus un răspuns incorect."
- Adresa de e-mail introdusă de expeditor este incorectă: "E-mail incorect".
- Adresa URL introdusă de expeditor este incorectă: "URL-ul incorect".
- Numărul de telefon introdus de expeditor este incorect: "Număr de telefon incorect".
Foarte bun. Cu setarea formularului, am terminat, acum trebuie să îl introduceți pe site. Pentru aceasta, tehnologia deja cunoscută, să mergem la o pagină existentă sau să creăm una nouă. În exemplul dvs., vă voi arăta un exemplu de formular existent pe pagina site-ului WordPress.
Deoarece forma noastră colectează aplicații pentru promovarea site-ului, să mergem la o pagină similară.
Pentru a introduce formularul nostru de contact, trebuie să copiați, atribuit acestuia cu un plugin, un cod scurt. Este disponibilă formularul dvs.
Copiați și introduceți în pagina noastră, după trecerea editor de text (nu vizual). Prezentat în ecranul de mai jos:
Salvați pagina noastră și vedeți ce sa întâmplat în final în browser:
Super! Acum, să încercăm să trimitem formularul fără a fi completat. Și asta vom vedea.
A apărut o eroare de trimitere din formular, deoarece utilizatorul nu specifică datele necesare în câmpuri. Acum, să introducem datele corecte și să vedem ce reușim în acest caz. 
Faceți clic pentru a trimite și acesta este formularul nostru scrie:
Acum, să vedem ce arată aplicația noastră. Ei vin de la mine la Milovskaya Mail. Verificați livrarea:
Să intrăm înăuntru pentru a ne asigura că codificarea și toate datele sunt corecte.
Totul este in regula. Formularul funcționează bine și trimite date. Acum putem colecta aplicații care vor veni la dvs. când faceți dacă vorbim despre promovarea regională.
Deci, am spus cum să facem un formular de contact pe WordPress pe pagina site-ului. Acum îți voi spune cum să faci formularul de feedback adaptiv pop-up Utilizarea formularului de contact al pluginului 7.
Facem un formular de contact de feedback adaptiv pop-up pe WordPress
Pentru ca forma noastră să fie adaptabilă, adică cauciucul, trebuie să conectăm un alt plugin și mai precis adăugarea acestuia la formularul de contact 7 - se numește Formular de contact Bootstrap 7. Instalați și pur și simplu activați și funcționează. Nu setările nu trebuie să facă cu el. Instalat și uitat.
În pasul următor, vă voi spune ce schimbări ar trebui să fie făcute astfel încât forma noastră să devină pop-up și adaptabilă. Am făcut o astfel de realizare pagina principală a site-ului său de studio. Pentru a face acest lucru, ne întoarcem la modelul index.php, care este situat în secțiunea "Editor exterior". Vom lucra numai cu codul, manual.
Formularul nostru pop-up va fi afișat în caseta de dialog modal după cum urmează:
Pentru a atinge acest rezultat, veți avea nevoie de următorul cod, vă voi imagina complet în fragment:
A comanda
< a href = "#" class = "btn btn-primary btn-flat" data - toggle = "modal" data - target = "#modal2" > A comanda< / a > < ! -- Modal -- > < div class = "modal contact-modal fade" tabindex = "-1" id = "modal2" role = "dialog" aria - labelledby = "myModalLabel" aria - hidden = "true" > < div class = "modal-dialog" > < div class = "modal-content" > < div class = "modal-header" > < button type = "button" class = "close" data - dismiss = "modal" > < span aria - hidden = "true" > Și ori;< / span > < span class = "sr-only" > Închide.< / span > < / button > < h4 class = "modal-title black" id = "myModalLabel" > Trimiteți-vă cererea< / h4 > < / div > |
De la autor: O pagină de contact bună este foarte importantă pentru a menține relațiile cu vizitatorii lor. Indiferent dacă vorbim de comerț electronic, reviste, site-uri web personale, servicii online - ca primul instrument de comunicare cu utilizatorii dvs., caută de obicei o pagină de contact. Este ciudat, dar mulți designeri web neglijează pagina de contact modestă, considerați-o chiar una dintre cele mai puțin importante aspecte ale site-ului web. Să o rezolvăm.
Valoarea unei bune pagini de contact
Pagina de contacte sunt adesea ratate din vizualizare. Câte site-uri pe care le-ați vizitat, dorind să le contactați pentru a vă plânge despre produs sau serviciu sau puneți o întrebare? Și cât de des a trebuit să lupți cu formularul de contact?
Pagina de contact bună este benefică pentru orice tip de afacere. Ea este capabilă să crească satisfacția clienților, ajutând la rezolvarea problemelor lor. De asemenea, poate contribui la îmbunătățirea produselor și serviciilor, asigurând o modalitate largă pentru o revizuire valoroasă.
Când vine vorba de revocarea unui utilizator direct, alte canale pot fi limitate. Televiziune, radio, reviste, ziare ... toate sunt o formă de comunicare unilaterală. Comunicarea online ar trebui să fie o stradă cu două fețe; Dialog între afaceri și vizitator. Favo de la aceasta este ambele părți, și aici este motivul pentru care pagina bună a contactelor este atât de importantă.
Locație
Primul pas: locul de plasare a informațiilor dvs. de contact. Nu are sens să aveți cea mai bună pagină de contact din lume, dacă vizitatorii dvs. nu o pot găsi. Le puteți ajuta dacă aderă la unele tradiții de designer.
În general, informațiile de contact pot fi amplasate în două locuri:
Navigare principală - Locul perfect pentru a vă conecta la pagina de contact. Vizitatorii caută de obicei o pagină de contact din dreapta, deoarece este văzută de elementul valorii secundare. În consecință, veți vedea pur și simplu un link către pagina de contact ca unul dintre cele mai recente elemente de navigare pe site.
De asemenea, putem privi mai puțină subvenționare în colțul din dreapta sus al ecranului. Aceasta este, de asemenea, o poziție valoroasă pentru pagina de contact. Apropo, este mai bine să evitați plasarea paginii de contact din meniul derulant, deoarece este ușor să o săriți.
subsol De asemenea, este o destinație populară pentru informații de contact. Poate conține o legătură către pagina de contact:
... sau cele mai importante informații de contact:
Prezicerea fluxului de vizitatori la pagina de contact este dificilă, astfel încât plasarea referințelor cel puțin în cele două locuri menționate vă va forța în siguranță.
Cel mai important lucru din pagina de contact
Acum sunteți calm - vizitatorii dvs. vor putea găsi o cale spre pagina de contact și este timpul să vă gândiți la conținutul său real. Să începem cu principalele și să luăm în considerare informațiile care trebuie reprezentate.
Email Email / Formular de contact
Adresa de e-mail este cea mai ușoară cale de afaceri online în afaceri. Alternativ, puteți utiliza un formular de contact care se referă la e-mail. Prin formularul obțineți mai mult control asupra conținutului (necesar pentru a umple câmpul) și astfel pot fi prevenite prin spam. Vom spune despre formularele de contact în acest articol de mai jos.
Abordare
Afacerea cu un magazin tradițional nu ar trebui să uităm să menționeze adresa dvs. Dacă aveți multe magazine, este mai bine să creați o pagină individuală pentru fiecare. Umpleți-l cu informații de contact separate despre acest magazin, ore de lucru, schemă de călătorie etc. Este necesar nu numai vizitatorilor, ci vă poate ajuta site-ul dvs. în interogările de căutare locale.
Telefon
Afișarea numărului de telefon provoacă un sentiment de încredere. Acest lucru este adesea privit ca un semn al unei companii reale existente și într-adevăr ajută magazinele online.
Multe site-uri au început să adauge butonul rețelelor sociale pe pagina de contact. Deși, poate, nu beneficiază de toate site-urile, pentru ca unii vizitatori să aibă sensul suplimentar. Mai ales că tot mai multe companii oferă suport pentru clienți prin Twitter (uneori chiar și în jurul ceasului și fără zile libere).
În plus
Nu există o soluție universală pentru o pagină de contact bună. Orice site web sau de afaceri necesită anumite elemente care pot fi inutile pe alte site-uri.
Există multe informații sau proprietăți suplimentare care vor fi utile pe pagina de contact. Pentru magazinele tradiționale, o idee bună este să menționăm, să spunem, orele de program. Companiile mari ar putea face referire la chat-ul lor live, iar site-urile de e-commerce pot consolida încrederea utilizatorilor, care își depozitează numărul de TVA.
Informații confortabile
Ușurința de utilizare a informațiilor vă va proteja vizitatorii de dezamăgirea paginii de contact.
În loc de imagini, activați informațiile dvs. sub formă de text HTML. HTML Text Puteți copia și lipi care facilitează vizitatorul pentru a salva datele de contact.
Adresa de e-mail trebuie să utilizeze linkul mailto. Acest lucru oferă vizitatorului posibilitatea de a face clic pe acesta și de a trimite un mesaj fără a fi nevoie să copiați adresa de livrare și deschiderea. client de poștă electronică. Cu această tehnică, totuși, poate exista o problemă în fața spam-urilor care colectează adrese de e-mail legate de Mailto:. Prin urmare, puteți decide mai întâi să le confundați folosind serviciul precum Mailtoencoder.com.
Notă de fundal: Numerele de telefon trebuie, de asemenea, să fie interactive. Anul trecut, am postat un sfat mic despre modul de a face un număr de telefon sensibil la un clic. Datorită fragmentului mic al codului, smartphone-urile identifică numere de telefon și fac posibilă apelurile. Este foarte convenabil utilizatorilor de telefonie mobilă.
Întreprinderile care sunt puternic dependente de magazinele lor tradiționale, adesea beneficiază foarte mult de o carte interactivă, oferind utilizatorului posibilitatea de a găsi rapid calea către punctele de vânzări. Afișați bine adresa magazinului și adăugați o cartelă interactivă și mai bună.
Mulțumiri Hărți Google. introduceți-l proprietate utilă la fel de ușor ca plăcintă. Doar introduceți adresa dvs. în Hărți Google și faceți clic pe pictograma link-uri din coloana laterală. Acolo pentru dvs. există un cod de introducere.
Știați că vă puteți adapta cardul pentru dvs.? Puteți edita culorile cardului, adăugați pointeri personalizate pe hartă și creați o legendă. Puteți citi mai multe despre acest lucru pe dezvoltatori.google.com. De asemenea, puteți să vă gândiți la utilizarea serviciilor alternative, cum ar fi MAPBOX destul de atractivă.
Nu uitați de optimizarea motorului de căutare
Ca vizitator, veți recunoaște instantaneu adresa de pe pagina de contact. Motoare de căutareCu toate acestea, este necesar un mic ajutor atunci când recunoașteți diferite elemente.
Formulare de contact
Majoritatea site-urilor web aplică formularul de contact pe pagina lor. Cu toate acestea, unele forme sunt inutile complicate și neprietenoase utilizatorului.
Indiferent cât de simplu este forma de contact părea, de fapt este o combinație a mai multor componente. Toți trebuie să lucreze împreună pentru a garanta cea mai bună impresie a utilizatorului.
Câmpuri de introducere
Câmpurile de introducere, cum ar fi câmpurile de text, opțiunile pentru selectarea opțiunilor (bazine radio), casete de selectare etc., permit utilizatorului să efectueze informațiile necesare.
Vizitatorii site-ului sunt mai înclinați să umple formularele scurte, deoarece acestea necesită mai puțin efort. Numărul câmpurilor de introducere este echilibrarea între impresia utilizatorului și nevoile afacerii. Hubspot a analizat mai mult de 40.000 de forme și a considerat efectul creșterii numărului de câmpuri de introducere. Rezultatul cercetării lor spune că ar trebui să fie folosit ca puține câmpuri de formular și să fie deosebit de atent cu zone text complicate și liste derulante.
Ajutați-vă vizitatorii să completeze câmpurile, specificând formatul potrivit. Numerele de telefon și datele pot fi capcane, în special pentru vizitatorii străini. Atributul de plasină HTML5 vă va ajuta.
Apoi, asigurați-vă că alocați câmpul pe care trebuie să-l umpleți (acestea sunt izolate în mod tradițional folosind asteriscurile *). Siguranța pentru a indica cu siguranță obligatorie și opțională pentru a umple câmpul.
În cele din urmă, este util să evidențiem câmpul activ. Poate fi desemnat cu greu sau foarte luminos - așa cum doriți.
Mai jos este un exemplu de formular de contact de la un Jim Nielsen Jim. Utilizează un pinion roșu pentru a umple câmpurile, oferă sfaturi pe formate și evidențiază câmpul activ.
Validarea formei
Validarea internă este, de asemenea, capabilă să prevină unele boli ale formularelor de contact. Necesitatea de a trimite și transferă forma datorită introducerii unor date sau date incorecte în formatul greșit este foarte enervant. După cum sa menționat deja aici, este mai bine să asistați vizitatorii prezentând formatul necesar (de exemplu, date, număr de telefon ...).
Butoane
Fără butonul de trimitere, nu există formă de contact. Trebuie să fie la sfârșit. Ca text al butonului, utilizați mesajul "Trimiteți mesajul" în loc de "Trimitere" pentru a reaminti clienților ceea ce fac.
Standardul obișnuit de la anul trecut este de a permite butonul "Resetare" sau "Clear Forme". Nu face aia. Se va presa la întâmplare. Nu este nimic mai rău decât imprimarea unui mesaj detaliat bine gândit și pierdeți-l datorită butonului "Resetare".
Raspuns
Vizitatorul și-a făcut informațiile de contact, a scris un mesaj și a apăsat butonul "Trimitere". Acum ce? A făcut mesajul sau nu?
Având în vedere vizitatorii dvs. în faptul că mesajul a fost trimis cu succes prin afișarea mesajului corespunzător. De asemenea, aplicați un mesaj de e-mail pentru a confirma.
Același sfat se referă la erori. Eroare afișează dacă nu reușiți să trimiteți un mesaj - o nevoie care să împiedice multe litigii viitoare. Un mesaj de eroare ar trebui să fie prietenos, deci evitați afișarea codurilor de eroare alarmante.
Pagina de contact Design.
Mulți se aplică designului stației de contact cerinte tehnicedar nu uitați unul cele mai importante puncte: Stiluri vizuale.
Dacă utilizați formularul de contact, faceți câmpurile în mari, prietenoase și montate pe care le completați. Spațiul alb și liniuța vă vor servi un serviciu bun.
Vizitatorii site-ului urmăresc șablonul sub formă de litera f când vizionați o pagină web, astfel încât atunci când creați marcajul dvs., amintiți-vă acest lucru. Pentru formularele de contact, este cel mai bine să plasați toate câmpurile pe verticală în loc să le plasați una lângă cealaltă. Deci, numărul de mișcări de vizionare a vizitatorului necesar este redus când formularul este umplut.
Pagina de contact trebuie să fie combinată cu caracteristicile vizuale ale site-ului. Secvența este cheia perfecțiunii. Uită-te, de exemplu, pe această pagină de contact, creată ca o carte poștală.
Și, ca în cazul majorității sarcinilor de design web; Abordarea creativă se plătește perfect. Neil Petel (Neil Patel) și-a creat pagina de contact sub formă de infografice, tripling numărul de solicitări de contact.
Exemple de formulare de contact
Vorbind despre formularele de contact bune, să vedem pentru inspirație pentru aceste exemple (faceți clic pe imagine pentru a vizita site-ul corespunzător):
Concluzie
Înainte de a crea designul paginii dvs. de contact, asigurați-vă că vizitatorii sunt capabili să o găsească. Faceți o referință la ea de la navigația sau subsolul principal. Amintiți-vă că majoritatea oamenilor caută informații de contact din partea dreaptă a ecranului.
Gândiți-vă la ce informații trebuie să activați. Posibilitatea de a trimite un mesaj prin e-mail sau formular de contact este urgent importantă. De asemenea, adresa și numărul de telefon pot fi, de asemenea, utile. Informații suplimentare, cum ar fi legăturile către profiluri în retele sociale Și orele de program pentru unele tipuri de afaceri este, de asemenea, necesară.
Interactivitatea este importantă. Aplicați atributul Mailto pentru adresele de e-mail și atributul Tel: pentru numere de telefon (Este foarte util pentru vizitatorii de la dispozitive mobile). Puteți introduce o hartă interactivă, cum ar fi Google Maps, dar ia în considerare efectele sale pentru performanță.
Formular de contact de utilizare poate crea sau distruge pagina de contact. Solicitați numai cele mai necesare informații. Puteți evita durerile de cap, indicând formatul corect de câmpuri de introducere și aplicarea validării interne. Uitați să afișați o trimitere de succes a mesajelor la trimiterea unui formular.
