Giao diện Bareungyeol (website doanh nghiệp)
Giao diện Bareungyeol (website doanh nghiệp · truyền thông doanh nghiệp)
Đây là hướng dẫn sử dụng Bareungyeol (bareungyeol), giao diện trả phí của Zittme dành cho website doanh nghiệp · tổ chức và truyền thông doanh nghiệp (phòng tin tức · câu chuyện nội bộ). Giao diện dùng chữ đen trên nền trắng, bố cục thẻ lấy ảnh làm nhân vật chính. Trang bìa chuyển các bài mới nhất của bảng tin thành slide ảnh, bên dưới lần lượt là thẻ bài viết nổi bật · câu chuyện · tin mới nhất và khu vực kêu gọi liên hệ màu đen. Dải tiêu đề · banner · tab menu con · độ rộng nội dung của trang con cũng được đặt trong cài đặt layout.
Demo: bareungyeol-demo.zitt.me · Cửa hàng: zitt.me/store/package/37507
Thành phần
| Thành phần | Vị trí | Vai trò |
|---|---|---|
| Layout | themes/bareungyeol/layouts/bareungyeol | Khung trang web + trang chính tích hợp trong giao diện + phần đầu trang con |
| Skin bảng tin | themes/bareungyeol/modules/board | Dạng danh sách · dạng thẻ · dạng thư viện ảnh lớn · dạng tạp chí · dạng FAQ |
| Skin thành viên · tin nhắn · trung tâm thông báo · thông điệp | themes/bareungyeol/modules/{member, communication, ncenterlite, message} | Đăng nhập · trang cá nhân · tin nhắn · thông báo · thông điệp hệ thống |
| Skin liên hệ · thương mại · zittme Pay | themes/bareungyeol/modules/{contact, commerce, zittme_pay} | Chỉ áp dụng trên trang web có cài mô-đun tương ứng. Thương mại dùng để giới thiệu và bán dịch vụ · sản phẩm |
Màu nhấn (mặc định xanh lá #00b04f) và chế độ màu (mặc định sáng · tối · theo thiết bị) được đổi tại Cài đặt layout > Cơ bản.
Cài đặt và áp dụng
- Sau khi mua trên cửa hàng và đăng ký tên miền sử dụng (kích hoạt giấy phép), mục tải xuống sẽ mở. Cài đặt từ engine (Quản trị > Kho tài nguyên) hoặc giải nén vào
themes/bareungyeol. - Chọn Bareungyeol tại Quản trị > Cài đặt thiết kế rồi áp dụng. Layout và skin mô-đun được đổi cùng lúc.
- Tạo bảng tin dùng làm trang chủ (ví dụ:
journal) và chèn ảnh vào bài viết. Nhập bảng tin đó vào "Bảng tin slide bìa (mid)" tại Cài đặt layout > Màn hình đầu là trang bìa hoàn tất. - Trang chính: Trang chủ (mô-đun mặc định trong cài đặt trang web) tự động trở thành trang chính. Để dùng trang khác ở dạng trang chính, hãy ghi
mvào lớp của menu đó trong sơ đồ trang. - Trang con: Các trang còn lại. Thứ tự là dải tiêu đề → (tab menu con) → nội dung.
- Toàn chiều rộng: Ghi
widevào lớp menu thì nội dung dùng hết màn hình, không giới hạn độ rộng (trang widget, v.v.). - Ở trang chủ, đầu trang phủ trong suốt lên ảnh bìa (chữ trắng), khi cuộn sẽ cố định với nền trắng. Nếu dùng ảnh logo, hãy đưa thêm logo trắng vào ô "Ảnh logo trắng".
- Nút đầu trang được tạo bằng "Tên · liên kết nút đầu trang" tại Cài đặt layout > Cơ bản. Để trống thì không hiển thị.
- Để ẩn liên kết đăng nhập · tài khoản khỏi đầu trang và chỉ để trong ngăn kéo di động, hãy đổi "Hiển thị đăng nhập · tài khoản trên đầu trang" thành Ẩn.
- Slide ảnh: Khi nhập bảng tin vào "Bảng tin slide bìa (mid)", các bài mới nhất có ảnh đại diện của bảng tin đó sẽ trở thành slide. Tiêu đề hiển thị lớn ở giữa ảnh, bên dưới có bộ đếm
1 / 4và mũi tên. Bạn có thể đặt khoảng thời gian tự chuyển (tắt · 4 · 5 · 8 giây) và số lượng, slide dừng khi rê chuột vào. - Bìa cố định: Để trống bảng tin thì trang bìa là bìa cố định dùng ảnh nền · dòng trên · tiêu đề · mô tả · nút.
- Bìa video (1.2.0): Nhập địa chỉ mp4 · webm vào "Video nền bìa cố định" thì video không tiếng sẽ phát lặp lại phía sau bìa cố định. Ảnh nền được dùng làm màn hình đầu trước khi video tải xong. Góc dưới bên phải có nút dừng, và video không tự phát với khách đã bật "Giảm chuyển động" trên thiết bị.
- Việc tự chuyển slide cũng có nút dừng · phát. Khi dùng bàn phím di chuyển vào trong slide, việc tự chuyển tạm dừng.
- Chiều cao: Toàn màn hình · Cao (80%, mặc định) · Vừa (620px).
- Chữ nhỏ trên tiêu đề: Cụm từ ngắn màu nhấn đặt trên tiêu đề (About, Since 2009, v.v.).
- Nền: Không · Xám nhạt · Tối. Xám và tối được tô đến tận mép màn hình để phân biệt với khối trước và sau. Dải ảnh · kêu gọi liên hệ · banner tuyển dụng · video dùng nền riêng.
- Nơi hiển thị: Để trống là trang chủ. Ghi mid của trang thì khối hiển thị ở trang con đó. Nhiều nơi thì cách nhau bằng dấu phẩy (
about, ceo), muốn hiển thị cả ở trang chủ thì ghi thêmhome. - Vị trí trên trang con: Dưới nội dung (mặc định) · Trên nội dung.
- Tắt ô hiển thị ở góc trên bên phải thẻ để tạm ẩn mà không xóa. Kéo thẻ để đổi thứ tự.
- Kiểu phần đầu: Dải tiêu đề (nền ảnh, mặc định) · Chỉ tiêu đề (nền trắng) · Không hiển thị.
- Ảnh nền mặc định của dải tiêu đề và chiều cao (220 · 320 · 460px). Không có ảnh nền thì là dải màu đậm đơn sắc.
- Nguồn tiêu đề: Tên menu cấp 1 (mặc định) hoặc tên mô-đun (bảng tin · trang).
- Hiển thị đường dẫn: Trang chủ / menu cấp 1 / menu con.
- Tab menu con: Nếu menu cấp 1 hiện tại có menu cấp 2, tab "Tất cả · menu con…" sẽ xuất hiện dưới dải tiêu đề.
- Độ rộng nội dung trang con: Bằng độ rộng nội dung tối đa, hoặc 960px dễ đọc.
- Banner theo trang: Nhập mid trang · ảnh nền · tiêu đề · phụ đề vào trường lặp lại thì dải tiêu đề của trang đó được trang trí riêng. Nhập mid của menu cấp 1 thì áp dụng cả cho các trang bên dưới.
- Tóm tắt nội dung của dạng tạp chí · dạng thư viện ảnh lớn chỉ xuất hiện khi bạn bật mục "Tóm tắt (summary)" tại Quản lý bảng tin > Cài đặt danh sách. Vì lõi chỉ đọc kèm nội dung khi truy vấn danh sách có mục tóm tắt.
- Nút viết · sửa · xóa chỉ hiển thị với thành viên có quyền. Với bảng tin chỉ quản trị viên viết như FAQ, hãy giới hạn "Viết bài" cho nhóm quản trị tại Quản lý bảng tin > Quyền.
- Cấu hình menu của demo: Câu chuyện → Inside (thư viện ảnh lớn), Phòng tin tức → Thông cáo báo chí (tạp chí), Liên hệ → FAQ. Menu cấp 2 tự động xuất hiện trong menu thả xuống ở đầu trang và tab trang con.
- Nút chuyển chế độ tối: Đặt chế độ màu là "Theo cài đặt thiết bị của khách" thì đầu trang có nút mặt trời/mặt trăng. Ban đầu theo cài đặt thiết bị, chế độ khách đã chọn sẽ được ghi nhớ. Skin bảng tin · thành viên · liên hệ · thương mại cũng đổi theo.
- Hiệu ứng xuất hiện khi cuộn: Các khối nổi lên nhẹ nhàng khi xuất hiện trên màn hình. Có thể tắt trong cài đặt, và tự động tắt với khách đã bật "Giảm chuyển động" trên thiết bị. Dù script tải chậm, sau 3 giây mọi khối đều sẽ hiển thị.
- Độ tương phản nút: Màu nhấn được giữ nguyên, nhưng nền nút có chữ trắng và chữ màu nhấn trên nền trắng được tự động pha đậm hơn một chút để đạt độ tương phản WCAG AA (4.5:1). Ở chế độ tối thì ngược lại, pha sáng hơn. Màu nhấn quá sáng (vàng · xanh nõn chuối) có thể làm chữ trên nút mờ đi, nên bạn nên dùng màu từ trung bình trở lên.
- Bàn phím: Có liên kết "Chuyển đến nội dung" ở đầu trang, mọi nút · liên kết đều có viền tiêu điểm.
- In: Bỏ đầu trang · menu · bản đồ · video, in đen trắng, FAQ được in ở trạng thái mở.
Môi trường khuyến nghị: Zittme 1.0.1 trở lên. Vì là giao diện đáp ứng nên bạn nên tắt chế độ xem riêng cho di động.
Loại trang
Đầu trang
Gồm logo (ảnh hoặc chữ) · menu trên cùng (menu cấp 2 là menu thả xuống) · dòng chữ bên phải (khẩu hiệu) · tìm kiếm · giỏ hàng (khi cài thương mại) · đăng nhập · nút màu nhấn (ví dụ: Liên hệ) · menu ngăn kéo trên di động.
Trang bìa (màn hình đầu)
Quy tắc ảnh đại diện
Ảnh trên thẻ và trang bìa dùng ảnh đại diện (ảnh thu nhỏ) của bài viết. Nếu không lấy được ảnh thu nhỏ thì dùng ảnh đầu tiên trong nội dung. Hãy luôn chèn ít nhất một ảnh cho mỗi bài. Bài không có ảnh sẽ bị loại khỏi slide bìa.
Trang chính tích hợp trong giao diện (cấu hình trang chính)
Lắp ráp theo thứ tự bằng trường lặp lại "Khối trang chính" trong tab Cấu hình trang chính tại Cài đặt layout. Nếu không có khối nào thì dùng cấu hình mặc định (bài viết nổi bật → câu chuyện → tin mới nhất → kêu gọi liên hệ).
| Loại khối | Nội dung | mid bảng tin | Số lượng |
|---|---|---|---|
| Bài viết nổi bật | 1 thẻ lớn + các thẻ nhỏ. Tên phân loại thành chip trên ảnh, tên bảng tin thành dòng nguồn | Ví dụ: journal | Khuyến nghị 5 |
| Câu chuyện | 2 thẻ rộng + tóm tắt nội dung | mid bảng tin | Khuyến nghị 2 |
| Tin mới nhất | Tiêu đề bên trái, hàng thẻ ngang bên phải, ngày | Ví dụ: notice | Khuyến nghị 4 |
| Tin tức | Thẻ 3 cột | mid bảng tin | 3 hoặc 6 |
| Đoạn giới thiệu công ty | Nhãn nhỏ + một khối chữ lớn (dùng nội dung) | - | - |
| Lĩnh vực kinh doanh | Thẻ biểu tượng 4 cột từ trường lặp lại "Lĩnh vực kinh doanh" | - | - |
| Ban lãnh đạo · thành viên | Trường lặp lại "Ban lãnh đạo · thành viên". Không có ảnh thì dùng chữ cái đầu của tên | - | - |
| Chỉ số | Trường lặp lại "Chỉ số". Con số tăng dần khi xuất hiện trên màn hình | - | - |
| Logo khách hàng · đối tác | Trường lặp lại "Khách hàng · đối tác". Không có logo thì hiển thị tên bằng chữ | - | - |
| Dải ảnh | Ảnh phủ kín màn hình + tiêu đề · câu · nút (dùng ảnh · nội dung) | - | - |
| Kêu gọi liên hệ | Dải đen với tiêu đề · câu · nút viền (dùng nội dung · tên nút · liên kết, thêm ảnh thì có nền ảnh) | - | - |
| Sản phẩm · sản phẩm mới | Thẻ sản phẩm thương mại 4 cột (khi cài thương mại). Giá bằng 0 thì hiển thị "Liên hệ" | - | Khuyến nghị 4 |
| Ảnh + chữ (trái · phải) | Một ảnh đặt cạnh tiêu đề · nội dung · liên kết. Dùng xen kẽ hai loại sẽ tạo bố cục zigzag | - | - |
| Lời chào của CEO | Ảnh dọc + tiêu đề + nội dung dài + chữ ký. Chữ ký ghi vào ô "Tên nút" (ví dụ: Tổng giám đốc Kim Bareun) | - | - |
| Dòng thời gian lịch sử | Trường lặp lại "Lịch sử" (năm · tiêu đề · nội dung · ảnh). Dòng thời gian nối bằng đường dọc và dấu chấm | - | - |
| Sơ đồ tổ chức | Trường lặp lại "Sơ đồ tổ chức". Cấp 1 (trên cùng) · 2 (khối) · 3 (nhóm dưới khối ngay trước đó) | - | - |
| Giải thưởng · chứng nhận | Trường lặp lại "Giải thưởng · chứng nhận" (ảnh biểu trưng · tên · tổ chức · năm). Không có biểu trưng thì dùng biểu tượng ngôi sao | - | - |
| Câu hỏi thường gặp | Trường lặp lại "Câu hỏi thường gặp". Tiêu đề bên trái, danh sách mở rộng bên phải | - | Số lượng hiển thị |
| Đường đến | Google Maps + địa chỉ · hướng dẫn giao thông (nội dung) · điện thoại · giờ hoạt động · nút ứng dụng bản đồ. Địa chỉ nhập ở ô "Địa chỉ bảng tin (mid) · địa chỉ", để trống thì dùng dòng cuối phần giới thiệu công ty ở chân trang | - | - |
| Hướng dẫn liên hệ | Tiêu đề · câu · nút liên hệ + danh sách điện thoại · email · giờ hoạt động ở chân trang | - | - |
| Banner tuyển dụng | Dải màu nhấn (thêm ảnh thì phủ màu nhấn lên ảnh) + nút trắng | - | - |
| Video | Địa chỉ YouTube · Vimeo hoặc mp4 nhập vào "Liên kết nút". Không tải trình phát bên ngoài cho đến khi nhấn nên nhanh (YouTube dùng địa chỉ không cookie). Ảnh là màn hình đầu | - | - |
| Tài liệu · IR | Hiển thị bài bảng tin dạng bảng. Hiển thị phân loại · tiêu đề · ngày · "Đính kèm N" | Ví dụ: ir | 4~6 |
Ô chung của khối (1.2.0)
Ví dụ lắp ráp trang con (cấu hình giống demo)
Tạo một trang có nội dung ngắn (một dòng tiêu đề + câu giới thiệu), rồi ghi mid của trang đó vào "Nơi hiển thị" của khối là có thể lắp ráp trang con từ bố cục.
| Trang (mid) | Khối |
|---|---|
Lời chào của CEO (ceo) | Lời chào của CEO → Ảnh + chữ (phải) |
Lịch sử · tổ chức (history) | Dòng thời gian lịch sử → Sơ đồ tổ chức (nền xám) |
Đường đến (location) | Đường đến → Hướng dẫn liên hệ (nền xám) |
Giới thiệu công ty (about) | Chỉ số (tối) → Tài liệu · IR → Giải thưởng · chứng nhận |
Liên hệ (contact) | Câu hỏi thường gặp (cùng trang chủ bằng home, contact) |
Hệ thống khoảng cách · chữ
Khoảng cách giữa các khối, giữa tiêu đề và nội dung, giữa các thẻ, lề trong của khối dạng dải, cỡ chữ tiêu đề · nội dung được thống nhất bằng một bộ giá trị. Chúng thu nhỏ mượt mà theo độ rộng màn hình (giữa các khối 72~120px, dưới tiêu đề 24~36px, giữa các thẻ 16~28px, trong dải 64~112px). Đặt khối theo thứ tự nào thì khoảng cách cũng như nhau, và khi các khối dạng dải nằm liền nhau thì nối tiếp mà không có khe trắng.
Chip phân loại
Chip đen trên ảnh của thẻ bài viết nổi bật · tin mới nhất · tin tức là tên phân loại (danh mục) của bài viết. Hãy tạo sẵn các phân loại như "Con người & văn hóa · Công nghệ · Dịch vụ · Doanh nghiệp" tại Quản lý bảng tin > Phân loại và chọn phân loại cho từng bài, bạn sẽ có trang chủ truyền thông doanh nghiệp.
Trang con (tab cài đặt "Trang con")
Loại bảng tin (cài đặt skin bảng tin "Kiểu danh sách")
| Kiểu | Hình thức | Demo |
|---|---|---|
| Dạng danh sách | Bảng số · tiêu đề · người viết · ngày | Phòng tin tức |
| Dạng thư viện ảnh lớn | Bài đầu tiên có ảnh lớn + tiêu đề, tiếp theo là thẻ ảnh 3 cột. Chip phân loại trên ảnh | Inside |
| Dạng tạp chí | Ảnh thu nhỏ bên trái + tiêu đề · tóm tắt | Thông cáo báo chí |
| Dạng thẻ | Lưới thẻ có viền | - |
| Dạng FAQ | Accordion nhấn câu hỏi để mở câu trả lời. Nhóm theo tab phân loại | FAQ |
Khối lắp ráp nội dung (trang giới thiệu công ty · tổ chức)
Dùng các lớp dưới đây trong nội dung của mô-đun trang (trang thường, không phải trang widget) sẽ tạo trang giới thiệu cùng phong cách với trang chủ. Chỉ cần dán vào chế độ HTML của trình soạn thảo. Bọc toàn bộ bằng <div class="bg-page"> thì khoảng cách giữa các khối tự động giãn ra.
| Khối | Mã đánh dấu | Công dụng |
|---|---|---|
| Đoạn mở đầu | <section class="bg-page-lead"><span class="bg-eyebrow">About</span><h2>Tiêu đề</h2><p>Nội dung</p></section> | Đoạn đầu tiên của trang |
| Ảnh + chữ | <section class="bg-split"><img src="..." /><div class="bg-split-copy"><span class="bg-eyebrow">Nhãn</span><h3>Tiêu đề</h3><p>Nội dung</p></div></section> | Thêm is-flip thì ảnh nằm bên phải |
| Thẻ 3 cột | <section class="bg-cols"><div class="bg-col"><em>01</em><strong>Tiêu đề</strong><p>Nội dung</p></div>…</section> | Nguyên tắc · phúc lợi · đặc điểm |
| Lịch sử | <section class="bg-timeline"><div class="bg-tl"><em>2009</em><strong>Tiêu đề</strong><p>Nội dung</p></div>…</section> | 4 cột, di động 2 cột |
| Trích dẫn | <section class="bg-quote"><blockquote>Nội dung</blockquote><cite>Nguồn</cite></section> | Một dòng chữ lớn |
| Dải ảnh | <section class="bg-band" style="background-image:url('...')"><div class="bg-band-copy"><h3>Tiêu đề</h3><p>Nội dung</p></div></section> | Phủ kín chiều rộng màn hình |
| Danh sách nhân sự | <section class="bg-roster"><div class="bg-roster-item"><img src="..." /><strong>Tên</strong><span>Chức vụ</span><em>Phòng ban</em></div>…</section> | Thay ảnh bằng <span class="bg-roster-photo">N</span> cũng được |
| Dòng nút | <div class="bg-page-links"><a class="is-primary" href="/contact">Liên hệ</a><a href="/shop">Dịch vụ</a></div> | Cuối trang |
Trang Giới thiệu công ty (/about) · Con người (/riders) của demo được tạo hoàn toàn bằng các khối này, nên sao chép nội dung rồi sửa lại sẽ nhanh hơn.
Dịch vụ · sản phẩm (thương mại)
Dùng mô-đun thương mại để giới thiệu và bán sản phẩm dịch vụ. Mục Tóm tắt của sản phẩm hiển thị thành dòng trên (màu nhấn) của thẻ, khối sản phẩm ở trang chủ dùng ảnh thu nhỏ hình vuông. Với sản phẩm báo giá, đặt giá bằng 0 thì trang chủ hiển thị "Liên hệ" (trong danh sách cửa hàng sẽ hiện 0 won nên bạn nên ghi giá).
Chân trang
Hai màu sáng · tối. Đoạn giới thiệu công ty (địa chỉ), điện thoại chính · email · giờ hoạt động, mạng xã hội (Instagram · YouTube · Facebook · LinkedIn · blog), dòng thông tin cuối trang, thông tin doanh nghiệp · liên hệ (mỗi dòng một mục), bản quyền, nút lên đầu trang.
Chế độ tối · hiệu ứng · khả năng tiếp cận (1.2.0)
Dữ liệu có cấu trúc cho công cụ tìm kiếm (1.2.0)
Trang chủ có thông tin schema.org Organization. Tên công ty (theo thứ tự tên chính thức của công ty → chữ logo → tiêu đề trang web), logo, điện thoại · email chính, địa chỉ (dòng cuối phần giới thiệu công ty ở chân trang), địa chỉ mạng xã hội được lấy từ cài đặt chân trang. Có thể tắt tại Cài đặt > Cơ bản > "Thông tin công ty cho công cụ tìm kiếm".
Tìm kiếm tổng hợp
Tìm kiếm trên đầu trang dẫn đến tìm kiếm tổng hợp của trang web. Màn hình kết quả cũng được vẽ theo phong cách giao diện (tab · danh sách kết quả · nút). Bạn cần chỉ định mô-đun được tìm kiếm tại Quản trị > Tìm kiếm tổng hợp thì mới có kết quả (nếu để trống đối tượng và chọn "Bao gồm" thì sẽ hiện "Không thể sử dụng tìm kiếm").
Toàn bộ mục cài đặt layout
Cơ bản
Ảnh logo · ảnh logo trắng · chữ logo · dòng chữ bên phải đầu trang · tên · liên kết nút đầu trang · màu nhấn · độ rộng nội dung tối đa · chế độ màu · dùng tìm kiếm · hiển thị đăng nhập · tài khoản trên đầu trang · địa chỉ cửa hàng sản phẩm (mid) · nút chuyển chế độ tối · hiệu ứng xuất hiện khi cuộn · thông tin công ty cho công cụ tìm kiếm · tên chính thức của công ty · menu trên cùng · menu chân trang
Màn hình đầu
Hiển thị bìa · chiều cao bìa · bảng tin slide bìa (mid) · số slide · khoảng thời gian tự chuyển · ảnh nền bìa cố định · video nền bìa cố định · dòng trên · tiêu đề · mô tả · tên nút · liên kết nút
Cấu hình trang chính
Khối trang chính (loại · tiêu đề · chữ nhỏ trên tiêu đề · nội dung · ảnh · mid bảng tin · địa chỉ · tên nút · liên kết nút · số lượng · nền · nơi hiển thị · vị trí trên trang con) · lịch sử · sơ đồ tổ chức · giải thưởng · chứng nhận · câu hỏi thường gặp · ban lãnh đạo · thành viên · lĩnh vực kinh doanh · khách hàng · đối tác · chỉ số
Trang con
Phần đầu trang con · ảnh nền mặc định của dải tiêu đề · chiều cao dải tiêu đề · nguồn tiêu đề · hiển thị đường dẫn · tab menu con · độ rộng nội dung trang con · banner theo trang
Chân trang
Màu chân trang · đoạn giới thiệu công ty · địa chỉ · điện thoại chính · email chính · giờ hoạt động · 5 loại địa chỉ mạng xã hội · dòng thông tin cuối trang · thông tin doanh nghiệp · liên hệ · ghi chú bản quyền