It’s time to design a beautiful and professional homepage with Ux builder wordpress to continue the series of DIY Website Design with WordPress.

This article will have a lot of important knowledge about the installation, please be patient to watch it all!

Just read and practice this article, you have designed 80% of the interface of the website already.

While this is how to edit the homepage, it can also be applied with all this knowledge to edit other pages.

So what is Ux Builder wordpress?

UX Builder is a tool built into the Flatsome Theme, which is a set of tools to customize the look and feel of your website with just drag and drop.

You did not hear wrong, just drag and drop to arrange the order and display of the website without having to code a complicated line of code.

 

Working principle of UX Builder: The interface on the website is conventionally displayed according to the code, and the UX builder gives us an interface that allows easier drag and drop.

What we drag & drop & arrange will be AUTOMATICALLY converted into lines of code in the interface.

 

Are you really excited? Let’s continue to see what the sequence of steps will be!

3 steps to take your interface to the next level

I have summarized 3 steps to be able to create a beautiful interface.

First of all, you have to get to the layout frame, which part will show what? After that, we will find the right pieces to assemble into the frame and then fill it with the prepared information.

Let’s get started!

Step 1: Outline each piece of content that will appear

The framework is the most important thing when designing your own website, arrange the template for each section on the website you want to display.

Take a look at the following picture, I will take the homepage of Digitalbyrick.com as an example!

 

  • 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 :))

Giao diện Ux Builder WordPress
Giao diện Ux Builder WordPress

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ẵncá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 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.

  1. Section
  2. Row
  3. 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 )
  4. 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

steps