Cách tạo banner trong WordPress

Trong bài này sẽ hướng dẫn các bạn cách thêm slide banner cho trang web, cách chỉnh sửa css nâng cao trong thành phần giao diện của website.

Danh sách bài học thiết kế website bán hàng bằng wordpress

  1. Cài Đặt Xampp - Wordpress
  2. Cài Đặt Theme - Woocommerce
  3. Thêm sản phẩm vào website
  4. Thêm nhiều sản phẩm - thuộc tính sản phẩm
  5. Liên kết tới sản phẩm liên quan - sản phẩm thường mua cùng nhau
  6. Tạo Menu Danh Mục - Chỉnh Sửa Cửa Hàng
  7. Thêm Slide Banner Cho Web - Điều Chỉnh CSS Nâng Cao

Kết quả Demo Website Bán Hàng Wordpress Váy Đầm

1 Thêm Slide cho cửa hàng

Tạo trang tĩnh có hình ảnh banner của slide

Cách tạo banner trong WordPress

Cách tạo banner trong WordPress

Upload slide

Cách tạo banner trong WordPress

Thêm hình đại diện cho trang 

Cách tạo banner trong WordPress

Tương tự tạo các trang Slide2 với các banner khác

Tùy chọn Slide Cho cửa hàng

Cách tạo banner trong WordPress

Cách tạo banner trong WordPress

Tùy chọn trang Slide

Cách tạo banner trong WordPress

Thêm Slide2 Tương tự

Cách tạo banner trong WordPress

Nhấn Đăng để hoàn thành

Cách tạo banner trong WordPress

2 Chỉnh sửa logo cho trang web

Cách tạo banner trong WordPress

Thành phần cơ bản của website

Cách tạo banner trong WordPress

Cách tạo banner trong WordPress

3 Sử dụng Code CSS để điều chỉnh các thành phần nâng cao trên giao diện cửa hàng

Cách tạo banner trong WordPress

Bổ sung các thành phần CSS cần thiết để điều chỉnh các thành phần trên website theo ý muốn

Cách tạo banner trong WordPress

Thay đổi CSS

Cách tạo banner trong WordPress

Thêm CSS vào website để lưu thay đổi

Chúc mừng các bạn. Như vậy, các bạn đã hoàn thành quá trình xây dựng một website bán hàng bằng wordpress từ đầu.

Trong Series bài học WordPress A-Z hôm nay, mình tiếp tục hướng dẫn bạn tự tay tạo Banner trang trí website đẹp mắt hơn. Ngoài ra, mình chia sẻ đến bạn tạo Sitebar cho Website của mình trở nên chuyên nghiệp và thân thiện với người xem.

Nội dung chính Show

Trước khi bắt đầu bài viết hôm nay, các bạn có thể xem lại nội dung các bài viết trước:

>> Cách thêm Logo, Breaking News, Date Day

>> Tạo User & Phân quyền quản trị viên website

Cách thêm banner trong WordPress

Cách thêm Banner & tạo Sitebar cho Website thật chuyên nghiệp

Hướng dẫn tạo Banner chuyên nghiệp

Cách thêm banner trong WordPress

Mình có đánh dấu mũi tên đỏ trên hình, đây chính là Banner của website, và công việc của bạn đó là hãy chuẩn bị cho mình một Banner thật đẹp mắt và chuyên nghiệp. Sau đó, upload lên website để làm hình ảnh thương hiệu cho trang web của mình.

Kích thước chuẩn của Banner Header là 729 x 90 Pixel, độ phân giải Full HD

Ngoài ra, trên Banner có hình ảnh đẹp, cung cấp đủ nội dung thông tin cần thiết cho người xem, như: Tên thương hiệu, kênh Social Network, hình ảnh rõ ràng sống động, ,..v.v

Sau khi đã chuẩn bị cho mình bộ Banner chuẩn chỉnh theo đúng những tiêu chí trên. Phần tiếp theo này, mình hướng dẫn bạn Upload Banner lên Website

Cách thêm banner trong WordPress

Đầu tiên, tại giao diện chính bạn vào mục Appearance -> Sau đó, chọn tiếp Widgets -> Và cuối cùng bạn vào mục Header Sidebar

Cách thêm banner trong WordPress

Kế tiếp, bạn cần lưu ý đến mục Visual Editor -> Hãy click chuột vào nó và chọn Header Sidebar thì banner của bạn mới được xuất lên đầu Website nhé

=> Sau đó, nhấn nút Save là xong.

Cách thêm banner trong WordPress

Bạn Click vào mục Upload và tìm đến file banner mình muốn tìm trên máy tính -> Rồi nhấn nút Open là được. Sau khi Upload lên bạn nhớ tối ưu SEO cho hình ảnh, và kiểm tra lại kích thước đã đạt chuẩn: 729×90 Pixel chưa nhé. Hãy tối ưu thật chuẩn rồi mới tải hình ảnh lên.

Cách thêm banner trong WordPress

Sau khi Upload lên hãy quay trở lại website của mình để kiểm tra thành quả bạn và mình đã làm được nãy giờ.

Cách tạo Sitebar cho Website chuyên nghiệp

Trong phân tiếp theo này, mình hướng dẫn bạn cách tạo Sitebar thật chuyên nghiệp và thu hút người xem. Nhưng trước tiên, bạn cần hiểu Sitebar là gì?

Nói đơn giản Sitebar chính là nội dung, thông tin chứa tại cột bên phải của website. Có thể mục lục, hình ảnh banner quảng cáo, Form đăng ký, tìm kiếm nhanh,

Trong nội dung bài viết này mình từng bước hướng dẫn bạn từng bước tạo Sitebar cho Website thật chuyên nghiệp.

Cách thêm banner trong WordPress

Đầu tiên, tại trang giao diện quảng trị website, bạn hãy tìm đến mục Appearance -> Click chọn tiếp Widgets. Mình đã có ảnh minh họa như hình bên dưới.

Kế tiếp, bạn chú ý mục Primary Widget Area đây chính là phần thiết lập chính của Sitebar.Tại đây, có rất nhiều loại Sitebar khác nhau để bạn tùy chỉnh và lựa chọn.

Cách thêm banner trong WordPress

1. Sitebar quảng cáo

Bạn hãy click chọn mục như hình bên dưới đây, và kéo thả nó đến mục Sitebar mình có giới thiệu ở trên.

Cách thêm banner trong WordPress

Kế tiếp, trong phần Primary Widget Area này chính là đặt tên Banner mình muốn quảng cáo.

+ Title: Chính là tên hiển thị hình ảnh, bạn nên tối ưu SEO từ khóa cho hình ảnh thật chuẩn nhé.

+ Ads inmage Path: Bạn muốn thêm Link bất kỳ hình ảnh nào muốn thêm trên Website.

+ Ads Link: Đây là Link Affiliate bạn muốn tiếp thị hay Review san phẩm nào. Hãy coppy URL Link này và bỏ vào Sitebar quảng cáo của mình.

=> Sau khi quá trình trên hoàn tất, bạn hãy nhấn nút Save và quay trở lại giao diện chính website. Để xem thành quả mình đã thiết lập & xây dựng nãy giờ nhé.

Cách thêm banner trong WordPress

2. Sitebar Video

Cách làm cũng tương tự như Sitebar quảng cáo, khi bạn muốn website mình hiển thị một video nào đó. Bạn tiếp hành thiết lập và click thêm vào theo từng bước hướng dẫn sau đây:

Đầu tiên, bạn chọn vào mục Sahifa Video và click chuột kéo thả vào Sitebar. Bạn có thể xem hình ảnh mình có khoanh đỏ bên dưới, để hiểu rõ hơn.

Cách thêm banner trong WordPress

Tương tự, phần này giống như Sitebar quảng cáo. Các mục bạn cần quan tâm như sau:

+ Title: Bạn hãy tiến hành đặt tên cho Video, bạn nhớ hãy đặt từ khóa thật chuẩn để tối ưu SEO cho Video nhé

+ Youtube Video ID:Bạn có thể lên Youtube hay bất kỳ trang mạng nào khác có chứa Video. Hãy Coppy địa chỉ ID Video đó và dán vào đây, rồi nhấn nút Save lại là OK.

Cách thêm banner trong WordPress

ID Video chính là đoạn mã ID, mình có đánh dấu màu đỏ như hình bên dưới để bạn dể hiểu và hình dung rõ ràng hơn

Cách thêm banner trong WordPress

Ngoài ra, còn rất nhiều nội dung khác nhau để bạn có thể thêm trên Sitebar. Các bước làm đều tương tự như vậy. Bạn có thể tìm hiểu thêm qua video hướng dẫn bên dưới nhé..

++ Video hướng dẫn:

Kết lại

Như vậy, mình đã hướng dẫn các bạn xong Cách thêm Banner & tạo Sitebar cho Website thật chuyên nghiệp.

Mọi thao tác đều rất đơn giản, chỉ click chuột kéo và thả là được. Nó hoàn toàn đơn giản cho dù bạn là người mới vẫn có thể xây dựng website thật chuyên nghiệp; theo từng series bài học hướng dẫn của mình một cách dể dàng.

Nếu có câu hỏi hay bất kỳ thắc mắc nào trong nội dung bài viết này. Bạn hãy để lại bình luận ngay bên dưới, mình hỗ trợ bạn trong thời gian sớm nhất.