Tạo khối nội dung tùy biến cho
Danh mục sản phẩm hoặc sản phẩm nổi bật

Nền tảng VTECH CMS - Hệ thống website Tùy biến chuẩn SEO

Chúng ta có thể hiện thị khối danh mục sản phẩm dưới dạng - Khối tính năng tùy biến theo cách sáng tạo, tạo ra khối giao diện mới trong lạ mắt và đẹp hơn trong giao diện PLUS và giao diện Simple Creative 2 từ hệ thống tạo website Vtech CMS. 

Xay dựng khối nội dung tùy biến website với nền tảng VTECH CMS

Khối tùy biến trên có thể được thể hiện trong khu vực soạn thảo nội dung (CKEDITOR) của tính năng:

  • Tính năng Khối nội dung tùy biến có thể thực hiện tại khu vực: Content Top; Home Block, Content Bottom
  • Tính năng bài viết: chèn vào một nội dung chi tiết bài viết.
  • Tính năng quản lý bán hàng => đăng chi tiết một sản phẩm: chèn vào một nội dung chi tiết sản phẩm

Tải Code và hình minh họa tại đây >>>> Tải ngay

Xem khối thực tế tại đây >>> Xem khối ngay

Xay dựng khối nội dung tùy biến website với nền tảng VTECH CMS

Để xây dựng được khối nội dung chúng ta tiến hành 03 bước cơ bản như sau:

  • Bước 1: Chuẩn bị hình ảnh
  • Bước 2: Nhúng đoạn mã code dựng sẵn vào website
  • Bước 3: Hiệu chỉnh phần trình bày và hoàn tất

Bây giờ chúng ta bắt đầu tiến hành chi tiết các bước để thực hiện khối nội dung như trên.

Bước 1: Chuẩn bị hình ảnh

Các bạn cần chuẩn bị hình ảnh theo kích thước phù hợp với khối nội dung muốn trình bày và định dạng hình.

  • Khối hình lớn: kích thước 350 px (ngang) X 420 px (cao); có thể thiết kế hình với dịnh dạng .JPG hoặc .PNG hoặc .WEBP
  • Khối hình nhỏ: Kích thước 320 px (ngang) X 320 px (cao); nên sử dụng hình thiết kế với định dạng .PNG hoặc .WEBP và xóa phông để hình đẹp hơn (Xem ví dụ minh họa các icon)

Các bạn có thể tham khảo hình demo trong file đính kèm.

Bước 2: Nhúng đoạn mã code dựng sẵn vào website

Tải Code và hình minh họa tại đây >>>> Tải ngay

Sau khi tải xong dữ liệu, chúng ta cần giải nén để sử dụng các file và hình ảnh (minh họa).

Bạn có thể sử dụng Khối nội dung tùy biến trong khu vực soạn thảo nội dung (CKEDITOR) tại các tính năng của website:
  • Khu vực soan thảo nội dung cho khối tính năng tùy của tính năng [Quản lý khối nội dung] => => Chọn tính năng [Quản lý khối nội dung] => chọn Tạo mới => Tại khu vực "Cài đặt chức năng" chọn loại khối "Hiển thị nội dung tùy biến" =>để tạo ra khối nội dung tùy biến tại các vị trí : (1) Content-Top; (2) Home-Block (1 đến 4); (3) Content-Bottom
  • Khu vực soạn thảo văn bản cho tính năng [Bài viết]=> chọn tính năng [Quản lý bài viết] => chọn [Bài viết] => chọn tạo mới hoặc sửa Bài viết => chèn vào nội dung bài viết để giúp bài viết đẹp và hấp dẫn người đọc hơn
  • Khu vực soạn thảo văn bản cho tính năng [Sản phẩm] trong Quản lý bán hàng => chọn tính năng [Quản lý bán hàng] => chọn [Sản phẩm] => chọn tạo mới hoặc sửa sản phẩm => => chèn vào nội dung mô tả sản phẩm để giúp bài viết đẹp và hấp dẫn người đọc hơn

Các bạn chọn một khu vực để thực hiện; trong bài viết này chúng ta sẽ chọn hiện thị khối để trình bày ra ngoài khu vực trang chủ; chúng ta sẽ tiến hành như sau:

Đầu tiên, các bạn đăng nhập vào khu vực quản trị của website bằng tài khoản quản trị. Sau đó chọn tính năng Quản lý khối nội dung => nhấn vào Tạo mới

+ Tại khu vực Thông tin cơ bản: Đặt tên tiêu đề khối - Công bố (Chọn Không nếu bạn chưa muốn công bố trên giao diện người dùng, chọn nếu bạn muốn công bố) - Hiển thị tiêu đề (Chọn Không) để không hiển thị tiêu đề tại giao diện người dùng.

+ Tại Khu vực Cài đặt chức năng: Loại Khối - chọn loại khối là HIỂN THỊ NỘI DUNG TÙY BIẾN

  • Loại Khối - chọn loại khối là HIỂN THỊ NỘI DUNG TÙY BIẾN
  • Ví trí - có thể lựa chọn 1 trong các vị trí sau: content-top; content-bottom; home-block-1; home-block-2; home-block-3; home-block-4
  • Nội dung - các bạn click chuột phải vào nút  MÃ HTML (để chuyển sang chế độ soạn nội dung bằng ngôn ngữ lập trình HTML), sau đó mở file "Kieu-4-Code-Tao-Danh-muc-san-pham-bang-Khoi-noi-dung-tuy-bien.txt" bạn tải về máy tính ở trên và copy toàn bộ phần code đó pass vào khu vực soạn thảo bằng mã HTML (Lưu ý nếu làm sai các bạn xóa hết để copy và pass nội dung lại từ đầu). Sau khi dán đoạn mã HTML vào xong, chúng ta click chuột phải vào nút MÃ HTML lần nữa để trở về chế độ soạn thảo bằng văn bản để kiểm tra khối nội dung đã được trình bày theo đúng nội dung khối mẫu
  • Sau đó nhấn vào nút Lưu dữ liệu để đảm bảo Khối nội dung mẫu vừa tạo được lưu lại để kiểm tra khối nội dung đã được tạo đúng với ý đồ, các bạn có thể kiểm tra bằng thiết bị điện thoại và laptop để xem các khối hiện thị đúng như hình bên dưới không ?

Bước 3: Hiệu chỉnh phần trình bày và hoàn tất

Tại bước này các bạn mở lại khối nội dung tùy biến vừa được tạo ra để tiến hành thay đổi các nội dung và hình ảnh thực tế của website mình và hoàn thiện nội dung của khối: Thay đổi nội dung và đổi màu nền cho khối nội dung.

Để thay đổi các nội dung demo thành nội dung chính thức của website (hình ảnh, icon, tiêu đề, link liên kết). Các bạn có thể thực hiện hiệu chỉnh như sau:

  • Thay đổi hình: Hình quảng cáo và hình icon - nhập đúp chuột vào hình cần thay thế và sao đó thay thế hình các hình bạn đã chuẩn bị tại bước 1 - chú ý khi tải hình lên, trước khi nhấn vào nút ĐỒNG Ý nhớ xóa đi kích thước của hình ảnh để ảnh được co giãn thei kích thước thiết bị hiển thị
  • Thay đổi tiêu đề dưới các Icon - trỏ chuột vào khối tiêu đề để chỉnh sửa nội dung tiêu đề thành nội dung của website các bạn.
  • Thay đổi link liên kết để điều hướng người dùng đến nội dung mình mong muốn (hình, icon, tiêu đề nhóm) - nhấn vào hình hoặc icon (hoặc bôi đen khối tiêu đề) để chọn khối, sau đó nhấn vào biểu tượng liên kết (trên khu vực hỗ trợ soạn thảo nội dung) - mở trang bạn cần điều hướng người dùng đến trogn trình duyệt và copy đường link (URL) của trang đó và dán vào vị trí khu vực URL; sau đó nhấn vào nút ĐỒNG Ý để lưu lại (Các bạn làm tương tự với các hình, icon và khối tiêu đề.)

Thay đổi hình: Hình quảng cáo và hình icon

Thay đổi link liên kết để điều hướng người dùng

Tạo màu nền cho khối nội dung ta tiến hành như sau:

 Để tạo màu nền cho khối nội dung trên, các bạn vào tính năng Cấu hình => chọn Giao diện => chọn Trang Ngoài => chọn Tùy biến giao diện => chọn Hiệu chỉnh khối => chọn khối nội dung tùy biến bạn vừa tạo ra => chúng ta sẽ thực hiện 1 trong 2 cách: (1) Tại Lớp nền của Khối - chọn màu nền theo màu có trong hệ thống. hoặc theo cách (2) tại khu vực Kiểu CSS trực tiếp - sử dụng mã code sau: background-color:#Mã-Màu; - Ví dụ: background-color:#f6f6f6;

Lưu ý: chúng ta chỉ thực hiện đổi khối màu nền bằng các này khi chọn thực hiện khối nội dung này ngoài khu vực trang chủ thông qua tính năng Quản lý khối nội dung.

Tạo khối màu nền cho khối nội dung trên

Bây giờ các bạn có thể hoàn tất khối nội dung tùy biến của mình theo mong muốn và tận hưởng khối mới vừa được tạo nên trên thiết bị laptop và thiết bị di động bạn nha. Chúc bạn thành công.

Xem thêm video hướng dẫn tại kênh Youtube và đừng quên nhấn theo dõi kênh để theo dõi video hướng dẫn cập nhật mới nhất bạn nha

Các bạn có thể trải nghiệm thực tế khối nội dung tại đây:
Có thể bạn sẽ quan tâm

Ngành thương mại điện tử là gì ? và cơ hội việc làm khi ra trường

Thương mại điện tử là một ngành tương đối mới nhưng rất nóng hiện nay vì được sự quan tâm rất lớn từ tất cả các doanh nghiệp lớn, nhỏ và các ngành nghề khác nhau, đặc biệt trong tiến trình bắt buộc phải thay đổi tư duy và chuyển đổi phương thức kinh doanh từ truyền thống (Offline) sang hình thức kinh doanh mới

HUTECH ký MOU cùng Lazada Việt Nam, mở rộng cơ hội nghề nghiệp cho sinh viên ngành Thương mại điện tử

Ngày 01/6, Khoa Tài chính - Thương mại Trường Đại học Công nghệ TP.HCM (HUTECH) ký biên bản ghi nhớ hợp tác (MOU) cùng Công ty TNHH Thương mại Điện tử Lazada Việt Nam, nhằm mở ra nhiều cơ hội học tập và nghề nghiệp cho sinh viên về lĩnh vực Thương mại điện tử.

Lễ ra mắt và giới thiệu ngành học mới: THƯƠNG MẠI ĐIỆN TỬ

Vào sáng ngày 24 tháng 4 năm 2021, Khoa kinh tế - Quản trị Trường Đại học Hoa Sen đã tổ chức "LỄ RA MẮT VÀ GIỚI THIỆU NGÀNH HỌC MỚI & CƠ HỘI VIỆC LÀM " tại Cơ sở Thành Thái, Quận 10. Trong đó, có ngành Thương mại điện tử, một ngành học hiện nay đáp ứng nhu cầu khát nguồn nhân lực trong quá trình chuyển đổi số của các doanh nghiệp Việt Nam.

Cách thiết lập mật khẩu ứng dụng cho email

Việc thiết lập mật khẩu ứng dụng cho email để tránh việc ảnh hưởng đến mật khẩu của email khi khai báo sử dụng cho các nền tảng ứng dụng bên thứ 3 như là khai cấp quyền sử dụng cổng email gửi đi trong SMTP mail Gate của website ...

Cách cấu hình SMTP trong hệ thống website Vtech CMS

Thiết lập này cho phép cấu hình phương thức chứng thực SMTP mail gateway, được dùng cho những tác vụ liên quan đến việc gửi mail như khi có đơn hàng mới, phản hồi liên hệ... Nếu bạn không thiết lập SMTP sẽ dẫn tới lỗi cho website khi khách hàng thực hiện thao tác trên web của bạn như: đặt đơn hàng mới, liên hệ, thiết lập quên mật khẩu.

Học ngành Thương mại điện tử ra trường lại công việc gì ?

Ngành thương mại điện tử (E-Commerce) đang là một trong những nhóm ngành hót hiện nay được nhiều bạn trẻ quan tâm. Tuy vậy, không phải ai cũng biết được những cơ hội việc làm của nhóm ngành này. Hãy cùng mình tham khảo ngay 10 việc làm ngành thương mại điện tử hiện nay.

Cách trỏ tên miền về hệ thống website Vtech CMS

Website của bạn để được vận hành dưới tên miền mang thương hiệu hay tên riêng của dự án, cửa hàng, doanh nghiệp, cá nhân ... Sau khi đăng ký sở hữu tên miền, các bạn tiến hành các bước cấu hình như sau để trỏ tên miền bạn sở hữu về hệ thống server và kết nối với hệ thống website Vtech CMS.