Cum de a schimba butonul - buy-in cms opencart, viața unui șomer

Astăzi vom lua în considerare o lecție foarte populară despre schimbarea butonului "Cumpărați" în CMS Opencart. Butonul foarte "Cumpărați" în orice magazin online - acesta este un element foarte important! Ea trebuie să iasă în evidență. Schimbând mărimea, forma, culoarea și locația butonului, putem îmbunătăți sau anula semnificativ conversia magazinului.

Modul în care este afișat butonul este ușor diferit de versiunea OpenCart, așa că vom examina o versiune mai nouă a versiunii 1.5.5.

Găsiți unde este corectat butonul

Deschideți fișierul de gestionare a stilului.
your_site / catalog / view / theme / your_theme / stylesheet / stylesheet.css

Pentru afișarea butonului corespunde butonului secțiunii (undeva pe linia 570).
Vom găsi linia: fundal: url ('../ image / button.png') repeat-x;
Se pare că butonul în sine este desenat în butonul file.png
Accesați directorul imagine și copiați în unitate o fotografie pentru editare.

Se pare că butonul în sine este extras din această bucată mică.
Lungimea butonului depinde de setările stilului și de mărimea inscripției în butonul propriu-zis, fie că este vorba de "cumpărare" sau de "comandă" sau altceva.

Cum funcționează butonul Cumpărare

Iar înălțimea butonului este standard de 24 de pixeli, de ce nu 48? Deoarece, după cum vedem din imagine, butonul este format din două culori. Culoarea de top este culoarea care este afișată peste tot în mod implicit, iar cea inferioară este culoarea care apare atunci când mutați mouse-ul peste buton. Adică, în software, când treceți peste buton, fotografia se ridică în sus și vedem un buton mai închis "Cumpărați".

Dacă vrem să facem butonul mai gros sau mai mare (așa cum vă place mai mult), atunci creștem fotografia noastră în dimensiune dublă față de rezultatul dorit. Să spunem ... Acum, butonul nostru are o înălțime de 24 de pixeli și vrem să facem 36 (adică +12), dar creștem fotografia cu 24 (de la 2 la 12). și se pare că butonul nostru va avea o înălțime de 72px (48 + 24). Adică, luăm fiecare culoare separat, dar deoarece acestea sunt afișate în aceeași imagine, adăugăm culori atât în jos, cât și în același mod! De fapt, este mai ușor de înțeles decât în cuvinte. 🙂

Dacă doriți, schimbați partea superioară - culoarea principală și cea de jos - culoarea când plasați cursorul peste buton. Salvați fotografia în format .png, de preferință schimbând numele, să spunem butonul72.png. Descărcați butonul înapoi în dosarul imagine și reveniți la editarea stilurilor stylesheet.css.

Schimbați butonul vechi la unul nou

Luăm linia deja cunoscută: fundal: url ('../ image / button.png') repeat-x; și schimbați numele fișierului în butonul nostru72.png
Acum, butoanele noastre de pe site-ul nu s-au schimbat în înălțime, iar când se deplasează doar o parte din ea este pictat peste. Fix.

Mai jos, în clasa input.button, vedem înălțimea liniei: 24px; - aceasta este înălțimea butoanelor noastre, schimbați-o pe cea pe care am făcut-o în fotografie, în cazul nostru 36px.

Și chiar mai mic, în a.button: hover, input.button: hover în linia background-position: 0px -24px; schimba -24 la -36. Acest parametru este responsabil pentru cât de mare crește imaginea când treceți cu mouse-ul peste ea.
Asta e ceea ce avem, un buton drăguț 🙂

Acum putem face ca fontul inscripției să fie mai mare. Pentru aceasta, font-size: 12px; .

Și adăugați un spațiu mic în dreapta și în stânga, astfel încât butonul nu este atât de pătrat. În linia de umplutură: 0px 22px 0px 22px; atribut input.button 22 schimba ceea ce vrem, spune 36.

Asta e tot! Acum, butonul nostru este mai mare și mai vizibil!
Dacă utilizați versiuni anterioare ale OpenCart, atunci butonul este implementat cu ajutorul mai multor imagini. Dacă nu reușiți să-mi dați seama, scrieți-mi, vă voi ajuta.

Și cum rămâne cu inscripția "Cumpărați"?

P.S. Apropo, pentru cei care nu știu, chiar inscripția "Cumpărați" pe buton se modifică în fișier
www.your_site / catalog / language / russian / russian.php
undeva 25 linii:

Articole similare

Pagina anterioară