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

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.

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.

Môn Xây dựng website kinh doanh

Ngày nay Website thương mại điện tử được sử dụng rộng rãi ở tất cả các lĩnh vực kinh doanh. Môn “Xây dựng web kinh doanh” là môn học giúp sinh viên hiểu được các khai niệm có bản liên quan đến thiết kế website nối chung và website hổ trợ cho hoạt động kinh doanh được hiệu quả hơn.

Thay đổi các menu tại vị trí Hamburger cho giao diện Vtech Clearly BS3

Hướng dẫn thực hiện thiết lập Thêm - Xóa - Sửa các menu tại vị trí Hamburger trong giao diện Vtech Clearly BS3, nhóm tính năng "Trình bày" webiste do VTECH CMS cung cấp.

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.

Elon Musk: 'Dịch vụ cấp internet từ vệ tinh Starlink của SpaceX hiện đã hoạt động ở Ukraina'

Tỉ phú Elon Musk, CEO SpaceX, người giàu nhất thế giới hiện nay, tuyên bố hôm 26/2 vừa qua rằng dịch vụ Intenet vệ tinh Starlink của công ty đã được “kích hoạt” ở Ukraine sau khi Phó Thủ tướng nước này lên tiếng đề nghị hỗ trợ.

Bạn tha hồ "Chat chit" với những tính năng hấp dẫn trên bàn phím của ứng dụng Gboard

Nếu mỗi lần "chat chit" đều phải mất công copy câu nói đem ra ứng dụng Google Translate khá tốn thời gian nên Google tiếp tục phát triển một ứng dụng khác để gắn hẳn Google Translate lên bàn phím nhằm nâng cao trải nghiệm của người dùng, giúp thuận tiện hơn khi nhắn tin với người nước ngoài.

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 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ạ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.