Banner website luôn là một phần quan trọng mang đến tính hiệu quả của website. Vậy phải thiết kế banner trong PrestaShop ra sao cho hiệu quả và phù hợp với giao diện PrestaShop Theme của bạn?
1. Thứ nhất bạn cần Thay đổi Style CSS cho banner trong PrestaShop
Chọn độ rộng width bằng với độ rộng của header: khoảng 980px.
2. Tối ưu kích thước banner, giảm độ sâu màu, giảm chất lượng hình ảnh đến mức thích hợp để tiết kiệm băng thông cho website.
3.1. Nếu bạn sử dụng banner flash thì bạn sử dụng swfobject thay vì nhúng trực tiếp thẻ <object>, <embed> vào file template của PrestaShop để tương thích với chuẩn valid XHTML1.0 của W3C.
Thực hiện
Chèn mã Javascript vào file /themes/your-theme/header.tpl.

Mã Javascript :

<script type="text/javascript" src="/js/swfobject.js"></script>

 <div id="logo"> <div id="flashcontent">

 <script type="text/javascript"> var so = new SWFObject("/img/star.swf", "banner", "1055px", "232px", "9.0.115.0", "#cccccc");  so.addParam("quality", "high");  so.addParam("scale", "scale");  so.addParam("menu", "false");  so.addParam("salign", "lt");  so.addParam("wmode", "transparent"); so.write("flashcontent"); </script>

 </div></div>

3.2. Nếu là banner ảnh thì thêm thuộc tính background-image ảnh nền cho logo của site đưa vào CSS.

Thay đổi độ rộng logo cho phù hợp.

Mở file header.tpl tìm  

<h1 id="logo"></h1>

Xóa hoặc comment thẻ img

Mở File /themes/your-theme/global.css

Tìm đến dòng 188

Mã CSS:

 #logo { background:transparent url(../img/banner.jpg) no-repeat center top; border-width:1px; float:left; height:232px; margin-top:0.5em; padding-left:0; width:1055px; }#header{/* Style của bạn*/}

Download swfobject tại đây

VN:F [1.9.20_1166]
Rating: 4.0/10 (1 vote cast)
VN:F [1.9.20_1166]
Rating: 0 (from 0 votes)
Thiết kế banner trong PrestaShop, 4.0 out of 10 based on 1 rating
Bài viết này có ích hãy chia sẻ cho bạn bè:
Bài viết được cám ơn 0 lần. Bấm đây để Cám ơn ?

Bài khác

Các bài liên quan:

  1. Tạo trang thông tin CMS trong Prestashop Back Office
  2. Khôi phục mật khẩu tài khoản quản trị PrestaShop
  3. Hướng dẫn cách thêm ngôn ngữ cho PrestaShop
  4. Hướng dẫn Quản trị PrestaShop
  5. Việt hóa PrestaShop
  6. Hướng dẫn viết PrestaShop Modules
  7. P1-NHẬP MÔN JAVASCRIPT
  8. BIẾN TRONG JAVASCRIPT
  9. XÂY DỰNG CÁC BIỂU THỨC TRONG JAVASCRIPT
  10. P2- Nhập môn Javascript