Xây dựng khối nội dung tùy biến tại khu vực Trang chủ - Khối 1

Hướng dẫn xây dựng khối nội dung tùy biến trên trang chủ của hệ thống Website trên nền tảng VTECH CMS

  • Sử dụng tính năng => QUẢN LÝ KHỐI NỘI DUNG
  • Thực hiện Khối HOME-BLOCK-1 với nội dung KHỐI NỘI DUNG TÙY BIẾN

Để xây dựng khối nội dung như hình (Có thể xem Demo khối tại đây: Xem khối tại website demo) các bạn tiến hành các bước sau:

Bước 1:

Tải đoạn code về máy Tại đây  , sau đó đăng nhập khu vực quản trị website do Vtech Group cung cấp với nền tảng Vtech CMS, chọn tính năng "Quản lý khối nội dung"

Bước 2:

Tạo mới Khối nội dung trong tính năng QUẢN LÝ KHỐI NỘI DUNG và hiết lập nội dung cơ bản

Thiết lập "Cài đặt chức năng" của khối theo hình bên dưới: 

  • Loại khối chọn: "Hiển thị nội dung tùy biến"
  • Vị trí chọn: "Home-block-1" , lưu ý tùy vào vị trí hiện thị của khối tại trang chủ bạn mong muốn có thể chọn các khối Home-block khác từ Home-block-1 đến Home-block-4
  • Thứ tự sắp xếp: chọn thứ tự cho khối theo ý muốn trong Khối Home Block mà bạn đã thiết lập, ví trí này nếu bạn để trống thì khối nôi dụng này sẽ được hiện thị theo thứ tự mặc định của hệ thống Vtech CMS
Bước 3:

Tại khu vực soạn thảo nội dung, nhấn vào nút "Mã HTML" bên góc trái của khu vực soạn thảo để chuyển sang soạn thảo nội dung bằng mã Code HTML, các bạn có thể sử dụng thêm nút "4 mũi tên" bên góc phải phía dưới của khu vực soạn thảo để mở rộng nội dung soạn thảo và nhấn vào nút "4 mũi tên" lần nữa để thu nhỏ mà hình khu vực soạn thảo.

Bước 4:

Mở file word bạn tải về máy tại bước 1 ra và coppy toàn bộ đoạn mã CODE trong file và dán vào trong khu vực soạn thảo bằng mã HTML

  • Để thay đổi màu chữ, bạn lưu ý thuộc tính Color (dòng code thứ 3, 8, 15) có trong mã HTML
  • Để thay đổi size chữ, bạn lưu ý thuộc tính Font-size (dòng code thứ 3, 8) có trong mã HTML
  • Để thay đổi màu nền của nút nhấn (Button) bạn chú ý thuộc tính background-color (dòng code thứ 31) trong mã HTML
  • Để thay đổi màu chữ của nút nhấn (Button) bạn chú ý thuộc tính color (dòng code thứ 33) trong mã HTML
  • Để thay đổi màu nền nút nhấn khi bạn trỏ chuột vào vị trí nút nhấn (button) bạn chú ý thuộc tính background-color (dòng code thứ 50) trong mã HTML
  • Đẻ thay đổi link liên kết hiện tại trong khối nội dung bạn chú ý thuộc tính href (dòng code 17) trong mã HTML
  • Để thay đổi ảnh, nhấn nút "Mã HTML" trở lại khu vực soạn thảo bình thường và cilck và tấm ảnh để tải lại tấm ảnh cần thay thê, lưu ý ảnh đưa lên tại khu vực này nên chọn ảnh đuôi file PNG và xóa phông nền phía sau ảnh cho đẹp và chú ý kích thước chiều ngang và chiều cao ảnh phù hợp
Bước 5:

Lưu khối nội dung soạn thảo lại

Bước 6:

Thay đổi màu nền cho khối nội dung như hình; chúng ta tiến hành thêm các bước sau:

  • Chọn 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" như hình bên dưới
  • Chọn "Hiệu chỉnh khối" => chọn [Tên khối bạn đã đặt cho nội dung đã tạo và lưu lại tại bước 5], ở đây tôi đã đã đặt tên khối là "Khối 1 - Tạo 1 nội dung tùy biến với Nội dung và Hình"
  • Tại khu vực "Kiểu CSS trực tiếp" => nhập vào đoạn code CSS để thay đổi màu nền của khối "background-color: #ff7f50 ;"  - trong đó thuộc tính :background-color để thay đổi màu nền và #ff7f50 là mã màu bạn chọn - bạn có thể thay màu khác phù hợp với màu tổng thể website của bạn bằng 1 mã màu mới.
  • Cuối cùng "Lưu cấu hình " để save lại.
Bước 7:

Mở website của bạn để kiểm tra nội dung đã thực hiện, nếu bạn muốn thay đổi màu chữ (ví dụ màu trắng) để phù hợp với màu khối nội dung bạn chọn, xem lại bước 4 - cách thay đổi màu chữ tại thuộc tính color.

Bây giờ các bạn có thể mở website và thưởng thức nội dung mình đã biên soạn và thực hiện thành công.

Chủ đề liên quan
Có thể bạn sẽ quan tâm

Tại sao Website quan trọng với bạn ? Website là một công cụ giúp bạn kinh doanh và truyền thông hiệu quả

Ngày nay website là một công cụ vô cùng quan trọng với cá nhân và doanh nghiệp; website được sử dụng để: Truyền thông - Marketing, thương mại điện tử, chia sẻ kiến thức, kiếm tiền ... Cá nhân và doanh nghiệp sở hữu và có đầy đủ quyền thực hiện các hoạt động truyền tải thông tin - thông điệp - kinh doanh ... đến với đối tượng khách hàng của mình. Việc sở hữu website giúp bạn dễ dàng hoạt động trên môi trường internet và tiếp cận với các đối tượng khách hàng mình.

Hệ thống thanh toán tài chính toàn cầu SWIFT là gì ? SWIFT giúp các ngân hàng trên thế giới chuyển tiền cho nhau hoặc trao đổi thông tin

Hiệp hội viễn thông liên ngân hàng và tài chính quốc tế ( SWIFT) -là một tổ chức cung cấp một mạng lưới cho phép các tổ chức tài chính trên toàn thế giới gửi và nhận thông tin về các giao dịch tài chính.

Hướng dẫn đăng Biểu tượng Favicon cho website

Hướng dẫn đăng biểu tượng Favicon cho website giúp gia tăng hiện diện thương hiệu và tạo sự khác biệt cho website

Khối 2 - Xây dựng khối nội dung tùy biến tại khu vực Trang chủ vị trí Home Block

Hướng dẫn xây dựng khối nội dung từ tính năng QUẢN LÝ KHỐI NỘI DUNG tại vị trí Home Block từ hệ thống website do Vtech cung cấp từ nền tảng Vtech CMS

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.

Từ hiện tượng TikTok, tiếp thị video ngắn sẽ "bùng nổ"?

TikTok vừa công bố kế hoạch thúc đẩy quảng cáo bằng video ngắn trong năm 2021, sau một thời gian trở thành hiện tượng của giới trẻ.

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ông cụ AI của Google hỗ trợ khả năng viết báo

Sản phẩm này, được giới thiệu như một trợ thủ đắc lực cho các nhà báo, đã được giới thiệu cho các giám đốc điều hành của The New York Times, The Washington Post và News Corp, công ty sở hữu The Wall Street Journal.

Web3 là gì ? Tìm hiểu chi tiết về Web3 và cách Web3 thay đổi Internet

Internet hay công nghệ ngày càng phát triển khi mà tính phi tập trung ngày càng được quan tâm. Sau sự bùng nổ của tiền điện tử với các tài sản không bị quản lý bởi chính phủ thì Web 3 ra mắt để đáp ứng nhu cầu thị trường.

Người dùng Việt Nam có thể đặt hàng trước và đăng ký sử dụng Internet vệ tinh từ 2022 của tỷ phú Elon Musk

Dự án phủ sóng Internet quanh Trái Đất của Elon Musk đã bắt đầu cho người dùng đăng ký thử nghiệm. Bạn có thể là một trong những người đầu tiên sử dụng dịch vụ này ngay cả khi đang sống tại Việt Nam.