Đã đến lúc thiết kế một trang chủ thật đẹp và chuyên nghiệp với Ux builder wordpress để tiếp tục series Tự thiết kế website bằng WordPress.
Bài này sẽ khá nhiều kiến thức quan trọng về phần cài đặt, hãy kiên trì xem hết nhé!
Chỉ cần đọc hết & thực hành được bài này là bạn đã thiết kế được 80% giao diện của website rồi.
Tuy đây là cách chỉnh sửa trang chủ, nhưng đồng thời cũng có thể áp dụng với toàn bộ kiến thức này để chỉnh sửa các page khác.
Vậy Ux Builder wordpress là gì?
UX Builder là một công cụ có tích hợp sẵn trong Theme Flatsome, là một bộ công cụ để tuỳ biến giao diện website chỉ bằng thao tác kéo và thả.
Bạn không nghe nhầm đâu, chỉ cần kéo thả để sắp xếp thứ tự, hiển thị của trang web mà không cần phải code một dòng code phước tạp.
Nguyên lý hoạt động của UX Builder: Giao diện trên website được quy ước hiển thị theo những đoạn code, và UX builder cho chúng ta một giao diện cho phép kéo thả dễ dàng hơn.
Những gì chúng ta kéo thả & sắp xếp sẽ được TỰ ĐỘNG chuyển hoá thành những dòng code trong giao diện.
Có phải bạn đang rất hào hứng phải không nào? Hãy cùng tiếp tục để coi trình tự các bước sẽ như thế nào nhé!
3 bước lột xác giao diện của bạn lên một tầm cao mới
Mình đúc kết được 3 bước để có thể tạo được một trang giao diện đẹp.
Trước hết phải lên được khung sườn sắp xếp thứ tự phần nào sẽ hiển thị cái gì? Sau đó sẽ tìm những mảnh ghép phù hợp ráp vào khung sườn rồi lắp đầy bằng những thông tin đã chuẩn bị.
Cùng bắt đầu nhé!
Bước 1: Lên outline từng phần nội dung sẽ xuất hiện
Khung sườn chính là thứ quan trọng nhất khi tự thiết kế website, hãy sắp xếp mẫu từng phần trên website mà bạn muốn hiển thị.
Hãy xem hình sau đây, mình sẽ lấy chính trang chủ của Digitalbyrick.com ra làm ví dụ nhé!
- Phần 1: Banner chính của web gồm tên + mô tả nội dung chính của web
- Phần 2: Sẽ là tóm tắt những danh mục nội dung chính cho đọc giả
- Phần 3: Bổ trợ thông tin cho nội dung “Kinh Doanh Online” & gắn 3 bài viết mới nhất của website
- Phần 4: Giới thiệu một phần về series tự học để xây dựng cho mình một hệ thống bán hàng.
Mình sẽ chỉ lấy 4 Section ( Phần mảng khung riêng biệt ) đầu tiên ra làm ví dụ.
Hãy hình dung trước là đọc giả sẽ đọc từ trên xuống dưới, từ trái qua phải nên sẽ sắp xếp nội dung như sau để họ hiểu được trang chủ mình đang thể hiện gì!
Trên đây chỉ là 4 phần, nhưng một trang chủ hoặc một trang lading page giới thiệu về cá nhân hay doanh nghiệp thì cần ít nhất 9 – 12 Section.
Mình sẽ để 9 phần thông tin mẫu cần thiết của 2 loại website phổ biến nhất là Website Doanh nghiệp & Website thương mại điện tử cho mọi người tham khảo nhé!
| Doanh nghiệp | Thương mại điện tử – Bán lẻ |
| 1: Banner giới thiệu | 1: Banner giới thiệu |
| 2: Giới thiệu dịch vụ / sản phẩm chủ đạo | 2: Danh mục sản phẩm |
| 3: Các tính năng độc đáo | 3: Các sản phẩm mới |
| 4: Tại sao nên sử dụng dịch vụ / sản phẩm | 4: Banner khuyến mãi – chương trình |
| 5: Hình ảnh / video thực tế | 5: Các sản phẩm khuyến mãi |
| 6: Đánh giá của khách hàng | 6: Banner chương trình sắp diễn ra ( Nếu có ) |
| 7: Bảng giá | 7: Giới thiệu về doanh nghiệp |
| 8: Form điển thông tin | 8: Giới thiệu về nguồn sản phẩm ( Xưởng sản xuất nếu có) |
| 9: Tin tức – bài viết liên quan | 9: Tin tức – bài viết liên quan |
Hãy soạn riêng cho mình một bộ khung sườn để chuẩn bị cho bước tiếp theo: Cài đặt
Bước 2: Cài đặt Flatsome Studio trong UX Builder wordpress
Sau khi đã có bộ khung sườn đầy đủ, hãy trung cập vào Trang > Thêm Trang Mới.
Điền Tiêu đề trang là Trang chủ 2, vì trong giao diện đã có sẵn một trang chủ mặc định của theme.
Không cần điền mô tả hay gì khác > Bấm Đăng.
Sau đó bấm vào phần Ux Builder như hình dưới.
Sau khi bấm vào nó sẽ hiện lên giao diện của UX Builder, đây chính là nơi tình yêu bắt đầu :))
Bấm ngay vào Add elements, bên tay trái sẽ xuất hiện thanh công cụ thêm elements ( phần tử nhỏ trong 1 section )
Lúc này sẽ có một bảng điều khiển hiện ra, bạn sẽ thấy được phần Flatsome Studio
Không thấy hiện lên phần Flatsome Studio? (Bỏ qua nếu không gặp phải)
Bình tĩnh nào! Có một vài lúc WP bị lỗi và tự ẩn phần này đi thôi.
Hãy nhìn biểu tượng Flatsome bên góc trái màn hình > Advanced > Integtations. Trong phần này sẽ hiện chỗ Flatsome Studio, nếu đang bị tắt bạn hãy bật lên và Lưu.
Tiếp tục nào, nếu bạn bấm vào Flatsome Studio được thì sẽ có một trang tiếp theo hiện ra. Trong đây chứa hơn 300+ mẫu trang chủ, trang sản phẩm, liên hệ, chiến dịch… có sẵn.
Hay không nhỉ? chỉ vài click là đã có một giao diện thật hoành tránggggg.
Tuy nhiên trước khi hướng dẫn các bạn Import các trang có sẵn này vào thì bạn cần hiểu một chút về Flatsome Studio.
- Chứa đựng 2 phần chính là một trang full elements sắp xếp sẵn và các phần elements nhỏ dành cho người muốn tự sắp xếp.
- Giao diện ở đây nhìn chuyên nghiệp, tuy nhiên theo kinh nghiệm của mình thì giao diện này đã được Mỹ hoá. Đại loại là nó phù hợp với người nước ngoài hơn là người xem ở Việt Nam.
- Sau khi Import thì vẫn còn rất nhiều thứ để tuỳ chỉnh, nếu bạn là người mới tiếp cận với WP, hãy chọn những trang có sẵn THẬT ĐƠN GIẢN và càng ít section càng tốt để tập luyện.
Bây giờ nãy Import nào, hãy chọn trang mà phù hợp nhất với mục đích của bạn : Có thể là blog cá nhân, bán sản phẩm hay giới thiệu dịch vụ, doanh nghiệp… Bạn có thể bấm Preview để xem trước được giao diện nhé.
Full page được cài sẵn chỉ có ở trong mục 1.E-commerce và 2.Full page thôi nhé, những mục còn lại là những section nhỏ.
Ở đây mình chọn sẵn một Theme Coffe Shop, đây là web dạng doanh nghiệp giới thiệu doanh nghiệp và một chút bán hàng.
Mình khuyên bạn nên tick vào Import Images để nó tải tất cả những gì mà chúng ta đã preview trước đó, sau đó chúng ta đổi ảnh sau. Tải 11 tấm ảnh thì sẽ mất tầm 3 – 5p để cài đặt hơi lâu hơn so với bình thường.
Nếu không bấm Import ảnh thì Flatsome sẽ tự mặc định là chỉ Import khung sườn section, nó sẽ trống lốc và hơi khó để chỉnh sửa với những bạn chưa sử dụng thành thạo.
Khi tải xong thì giao diện thì rất nhiều section sẽ được thêm vào web của bạn, bấm Update và blog sẽ có dạng như sau:
Trước khi tiếp tục thì bạn hãy mở một tab chorme mới và truy cập Bài 4 : Một vài thuật ngữ cơ bản trong WordPress và kéo xuống phần thuật ngữ giao diện để ôn lại các tên gọi của những phần tử mà chúng ta chuẩn bị sắp xếp.
Bước 3: Hoàn thiện đầy đủ thiết lập, nội dung trong UX Builder WordPress
Bây giờ chúng ta đã có một trang gồm rất nhiều section được sắp xếp ở trong giao diện mẫu, công việc tiếp theo là phải thay lại toàn bộ ảnh, nội dung của chúng ta theo khung sườn đã có sẵn.
Lưu ý là cứ một vài tuỳ chỉnh hãy bấm Apply > Update để lưu. Và khi bấm Update hãy chờ cho nó lưu xong, đừng vội tắt nếu không tất cả công sức chỉnh sửa của bạn nãy giờ gần như là đổ sống đổ biển 🙁
Cá nhân mình đã từng dành vài tiếng chỉnh web nhưng lưu lỗi và phải làm lại từ đầu 🙂
Trong phần này sẽ có vài thứ cần lưu ý như sau:
Thứ tự sắp xếp cấu trúc khung sườn theo dạng Cha > Con trong wordpress.
- Section
- Row
- Columns ( Khi tới đây vẫn có thể mở một section mới, và thứ tự được tính lại từ đầu, nhưng vẫn là tập hợp con của Columns này )
- Text, Image, Video, Image box
Khung sườn mà chúng ta tải về đã có sẵn hầu như những tuỳ chỉnh riêng và hiệu ứng, chỉ cần đổi ảnh và text là được.
Tuy nhiên nếu bạn muốn tự tuỳ chỉnh theo sở thích của mình thì hãy đọc nhanh phần dưới đây nhé!
Tiếp theo là những tuỳ chỉnh có trong từng phần, bấm vào bánh răng ở cuối mỗi phần > vào Option để cài đặt.
Ở đây mình chỉ nói một vài phần hay xuất hiện nhất vì thời lượng chương trình tới đây cũng khá dài rồi :))
Trong phần Khung sườn : Bao gồm Section, Row, Column
+ Nền
- Ảnh : Sẽ dùng để tải ảnh lên
- Size: Luôn chọn Original để có được chất lượng ảnh cao nhất
- Overlay: Lớp màu phủ trên tấm ảnh
- Effects: Hiệu ứng tấm ảnh, nhưng hiệu ứng phức tạp sẽ làm cho website tải chậm
+ Bố cục: Đây là phần nâng cao, nó sẽ có vài thứ để chỉnh màu chữ, chiều cao của khung sườn
+ Viền: Tạm thời nên bỏ qua
+ Video: Để chèn link video nhưng cũng nên tạm bỏ qua
+Advance: Phần này nâng cao về chèn code giao diện
Trong phần Text:
Hãy bấm Open Text Editor để tuỳ chỉnh lại chữ của bạn nhé. Giao diện khá giống với word nên rất dễ để sử dụng, ở đây nếu bạn nào đã có kinh nghiệm về HTML thì có thể chỉnh trực tiếp như trong ảnh.
Sau khi đã thay tất cả hãy bấm vào Apply > Update nhé.
Lưu ý lần 2 là ở trong UX Buider wordpress cứ một vài tuỳ chỉnh hãy bấm Apply > Update để lưu. Và khi bấm Update hãy để cho nó lưu xong, đừng vội tắt nếu không tất cả công sức chỉnh sửa của bạn nãy giờ gần như là đổ sống đổ biển 🙁
KHOAN ĐÃ!!!
Sau khi tuỳ chỉnh & lưu xong thì bạn hãy bấm dấu X ở bên góc trái màn hình để thoát ra.
Phần trang còn một tuỳ chỉnh nữa là trong phần Thuộc tính trang > Giao diện > Hãy chọn Page – Full Width > Bấm Cập nhật để page tràn rộng ra 2 bên nhé ^^
Cuối cùng là vào phần Cài Đặt > Đọc > Bố cục trang chủ > Một trang tĩnh > Sau đó chọn page Trang chủ 2 bạn vừa làm xong nhé.
Bây giờ hãy vào lại tên miền chính của bạn để thấy điều kì diệu <3.
Nhìn thì có vẻ hơi cơ bản, tuy nhiên nên nhớ đây là series cho người mới bắt đầu.
Mình luôn ước gì khi mới bắt đầu học có người huớng dẫn mình chi tiết đến vậy 😀
VD : https://demo.digitalbyrick.com/
Phù, cuối cùng cũng xong phần Ux Builder wordpress, mình sẽ để một đường link tài liệu tiếng anh để bạn tham khảo về UX Builder WordPress
Vậy là đã đi hơn nửa chặng đường rồi, bài tiếp theo mình sẽ hướng dẫn bạn thiết kế giao diện của trang bài viết.
Còn bây giờ hãy nghỉ ngơi một lát và ngắm nhìn những gì bạn đã tự làm được nhé kk.
<<Bài 4 : Một vài thuật ngữ cơ bản trong WordPress
>> Bài 6 : Sidebar menu và thiết kế giao diện cho trang bài viết
Đánh giá 5 sao nếu thấy bài viết hữu ích nhé ^^
[Tổng: 1]
Founder của Digital By Rick.
Hy vọng những chia sẻ của mình giúp mọi người có thể làm Kinh Doanh Online, Marketing & Chuyển Đổi Số hiệu quả hơn.