Trong bài trước bạn đã làm quen với Elementor thông qua việc thiết kế một trang landing page đơn giản để làm quen với các thao tác. Trong đó mình cũng đã nói rõ rằng Elementor phiên bản miễn phí dường như chưa đủ khả năng tuỳ biến ở mức trên toàn website, nên nó sẽ chỉ phù hợp với việc thiết kế một langding page đơn giản như vậy.
Với các nhu cầu thiết kế mang tính toàn cục, ví dụ như thiết kế một giao diện blog riêng có khả năng tuỳ biến giao diện xem bài viết, giao diện các trang lưu trữ,…thì bạn sẽ cần hai giải pháp:
- Sử dụng theme thiết kế sẵn cho Elementor: Trong các theme này thường thì tác giả đã thiết kế template riêng để hiển thị toàn bộ các trang trong website, nên chúng ta chỉ cần sử dụng là được. Nhưng các theme đầy đủ hiện nay hầu như không miễn phí.
- Sử dụng Elementor Pro: Nếu bạn cần tự bắt tay vào thiết kế một giao diện riêng, bạn cũng có thể kết hợp vừa sử dụng theme có sẵn, vừa sử dụng Elementor Pro để cho hiệu suất tốt nhưng dĩ nhiên là tốn nhiều tô phở hơn.
Do phương án sử dụng theme có sẵn thường sẽ mất nhiều thời gian tìm hiểu vì các theme trả phí có rất nhiều tính năng, nên việc hướng dẫn sử dụng một theme mình sẽ đề cập ở các bài sau. Còn trong phần này thì mình sẽ hướng dẫn sử dụng Elementor Pro để tự thiết kế một trang blog hoàn chỉnh với giao diện đơn giản (xấu thì chưa chắc đâu nha).
Vì sao cần phải sử dụng Elementor Pro
Dĩ nhiên Elementor miễn phí cũng đáp ứng được đa số các nhu cầu sử dụng, đặc biệt là trong trường hợp bạn đã có một website hoạt động nhưng cần thêm tính năng kéo thả để chỉnh sửa bố cục thuận tiện hơn. Nhưng với một số yêu cầu như tự thiết kế một giao diện theo mong muốn bằng Elementor thì bắt buộc bạn phải dùng Elementor Pro, vì một số tính năng cần thiết như:
- Sử dụng theme builder để thiết kế toàn bộ các trang trong WordPress. Ví dụ bạn dùng theme Hello Elementor mà dùng với Elementor miễn phì thì sẽ không thiết kế giao diện cho một số trang bên trong, như trang single (để hiển thị bài viết), trang lưu trữ (giao diện khi xem nội dung một category hoặc tag),…
- Sử dụng Global Widget để tái sử dụng một widget trên nhiều trang. Điều này có thể rút ngắn thời gian hoàn thiện một website của bạn.
- Tận dụng thư viện template của Elementor khi tạo page hoặc một template mà không cần phải thiết kế từ đầu.
- Sử dụng một số widget có chữ Pro để thiết kế tốt hơn.
- Cho phép tuỳ chỉnh CSS cho từng widget hoặc một container, sẽ có lợi thế cho người dùng có kiến thức về CSS.
- Có thể tuỳ chỉnh query hoặc tham số request ở một số widget hiển thị nội dung.
- Hỗ trợ các widget dành riêng cho WooCommerce để làm website bán hàng.
Và rất nhiều tính năng khác mà Elementor miễn phí không có, bạn có thể tìm hiểu thêm tại đây. Vì vậy nếu bạn đang có dự định theo hướng dẫn của mình thì hãy chuẩn bị một thẻ thanh toán quốc tế để mua Elementor Pro với giá $59/năm nhé. Số tiền này không phải nhỏ nhưng cũng không phải quá lớn để bắt đầu tự thiết kế website cho riêng mình.
Thông tin thêm: Nếu bạn đang sử dụng hosting tại AZDIGI thì có thể liên hệ bộ phận kỹ thuật để được kích hoạt bản quyền Elementor Pro miễn phí, chỉ áp dụng cho 1 website cho mỗi gói dịch vụ.
Thiết kế giao diện blog minimalist với Elementor Pro
Trong bài này, chúng ta sẽ thực hiện thiết kế một giao diện WordPress mới hoàn toàn dựa vào Elementor Pro, giao diện đó sẽ được thiết kế lấy cảm hứng từ giao diện Spotlight của Ghost. Dĩ nhiên là mình chỉ đang lấy cảm hứng thôi chứ không hẳn là thiết kế hoàn toàn giống như vậy.
Reset hoặc thực hành trên một website mới
Để cho tối ưu trong việc tìm hiểu theo hướng dẫn này, bạn nên cài mới lại một website WordPress hoàn toàn mới, hoặc nếu bạn đang thực hành trên website đã cài đặt trước đó thì có thể reset lại thông qua cài plugin WP Reset để xoá toàn bộ các plugin/theme cùng các tuỳ chọn trước đó. Ở dưới là video hướng dẫn thao tác reset lại website.
Cài đặt theme Hello Elementor và kích hoạt Elementor Pro
Phần này đã quá đơn giản vì trước đó bạn đã có làm qua rồi, nên mình sẽ không nói qua về thao tác nữa nhé. Chỉ có một sự khác biệt là bạn sẽ cần kích hoạt Elementor Pro để có thể làm theo hướng dẫn này. Nếu bạn đã mua Elementor Pro hoàn tất trên trang chủ https://elementor.com/pricing-plugin/ thì sẽ cần tải file .zip của plugin Elementor Pro và cài đè vào website.
Khi cài xong thì truy cập vào Elementor => License để thực hiện kích hoạt bản quyền bằng cách kết nối website đến tài khoản Elementor của bạn.
Cài đặt Dummy Content với plugin FakerPress
Dummy Content là tập hợp những nội dung mẫu bao gồm các bài viết, trang, category và tag được tạo sẵn cho mục đích kiểm tra hiển thị của website. Do website chúng ta đang làm việc là mới hoàn toàn, không có nội dung sẵn nên sẽ cần thêm các dummy content này vào.
Thay vì tạo nội dung dummy content thủ công, bạn nên sử dụng plugin FakerPress để tạo nhanh các nội dung này vì plugin này có tính năng xoá nhanh các nội dung dummy content mà không cần phải xoá thủ công từng nội dung.
Sau khi cài đặt hoàn tất, bạn truy cập vào trang quản trị và vào FakerPress => Posts để bắt đầu tạo nội dung, ở phần Quantity bạn nên chọn tạo khoảng từ 15 đến 20 bài là đủ dùng, chọn xong thì ấn nút Generate ở dưới và đợi nội dung được tạo ra. Thời gian tạo này có thể mất khoảng từ 5-10 phút để hoàn tất.
Cấu hình Site Settings cơ bản
Giống như thao tác khi thiết kế landing page phần trước, chúng ta sẽ phải cần thiết lập sẵn các thông số cơ bản trong giao diện nếu như tự thiết kế giao diện bằng Elementor ngay từ đầu. Các thông số này bao gồm các màu sắc mà ta sẽ sử dụng trong trang, font chữ,…để đảm bảo các thành phần được hiển thị một cách nhất quán.
Bây giờ bạn vào Pages hoặc Posts, chọn Edit with Elementor ở một page và post bất kỳ, chọn Site Settings phía trên để bắt đầu thiết lập.
Và đây là một số thông số Site Settings mà bạn cần điều chỉnh để phù hợp với thiết kế của chúng ta.
- Global Colors: Do giao diện chúng ta chủ yếu là đen và trắng nên màu sắc ở đây cũng không có gì nhiều, màu Accent màu cam để dành làm điểm nhấn cho thành phần nhỏ nào đó, ví dụ như các liên kết trong bài viết chẳng hạn.
- Primary: #1d1d1f
- Secondary: #a5a5a5
- Text: #1d1d1f
- Accent: #1d1d1f
- Light gray: #f8f8f8
- Footer text: #1d1d1f
- Global Fonts: Ở thiết kế này chúng ta chỉ sử dụng một font chữ duy nhất là Roboto. Nếu trình duyệt không load được font này thì nó sẽ sử dụng stack font mặc định của hệ thống mà ta khai báo là phần fallback font family.
- Primary: Default, Weight 500
- Fallback Font Family:
-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif
- Buttons: Trong giao diện này các nút bấm của chúng ta sẽ là màu đen thui với chữ trắng.
- Text Color: #fff
- Background: #000
- Border radius: 100px 100px 100px 100px
- Padding: 20px 28px 20px 28px
- Layout: Phần này chúng ta sẽ thiết lập chiều rộng nội dung là 1584px, và các container sẽ có khoảng đệm bên trái là 40px, khoảng đệm bên phải là 40px.
- Content Width: 1584px
- Container Padding: 0 40px 0 40px
Thiết kế Header
Bây giờ chúng ta sẽ thực hiện làm một header đơn giản như mẫu, không bao gồm nút đổi chế độ đọc tối và sáng như mẫu gốc đâu nhé, nếu muốn bạn có thể tự chèn thông qua plugin Nocturne Dark Mode – Elementor Dark Mode Toggle for WordPress.
Để tạo header, bạn truy cập vào Templates => Theme Builder, sau đó chọn phần Header.
Ở đây chúng ta bỏ qua phần chọn template của Elementor nhé vì đang cần thiết kế đúng ý tưởng. Theo như ý tưởng thiết kế thì phần header này chúng ta sẽ có một container với direction là xếp theo chiều ngang, trong đó sẽ bao gồm 3 cột để hiển thị logo (20%), menu ở giữa (60%) và một thanh chức năng bên tay phải (20%).
Ở cột đầu tiên ta sẽ chèn một widget là Site Logo hoặc Site Title, ở đây mình sẽ dùng Site Title vì không có logo. Nếu chèn title mà muốn nó hiển thị ra giữa hàng thì thiết lập Justify Content là Center nhé.
Ở cột giữa thì chèn widget là WordPress Menu, có thể truy cập vào trang /wp-admin/nav-menus.php để tạo menu trước khi thực hiện nhé. Trong phần Styles của menu thì cho weight của chữ lên 500 là hợp lý.
Và cột cuối cùng thì bạn có thể chèn một widget là Button để hiển thị một cái nút bấm.
Cuối cùng là thêm padding vào container chính cho 25px và 25px ở dưới để nó có khoảng đệm trên và dưới hợp lý hơn.
Khi chọn publish lần đầu, bạn sẽ cần đặt condition cho nó là Entire site.
Thiết kế Footer
Để thực hiện thiết kế cho footer trên toàn trang, bạn truy cập vào Templates => Theme Builder và chọn site part là Footer và ấn nút Add New để thêm mới, cũng bỏ qua thao tác sử dụng template mẫu.
Ở footer theo ý tưởng thiết kế thì ta sẽ có 3 container phân chia như hình dưới. Cũng khá đơn giản để thực hiện.
Container đầu tiên bạn thiết lập màu nền là #f8f8f8, chia 2 cột mỗi cột 50%, cột bên trái chèn widget Heading, Text Editor (font size 20px với màu chữ #5A5656) và Button, chỉnh Justify Content là Center. Cột bên phải là chỉ chèn tấm ảnh.
Cột thứ 2 sẽ có màu nền là #f1f1f2, cũng chia thành 2 cột (mỗi cột 35%). Cột bên trái sẽ bao gồm các widget Site Title, Text Editor, Social Icons. Cột bên phải sẽ là WordPress Menu nhưng thiết lập chế độ hiển thị Vertical, thông số Align thiết lập là End. Ở thiết lập container chính của phần này bạn thiết lập justify Content là Space Between, và padding là 50px 0 50px 0 nhé.
Ở container cuối cùng, bạn tạo ra một container và thiết lập màu nền cho nó là #f1f1f2, sau đó bạn chèn thêm một container bên trong và thiết lập cho nó padding 50px 0 50px 0, ở phần Styles bạn chọn Border Type là Solid, và chỉ điền 1px vào phần Top để nó tạo cái hiệu ứng viền ở trên, màu viền bạn cho là #DDDDDD.
Sau đó bạn chèn một widet Text Editor vào đó, cho màu chữ thành màu Secondary. Kết quả cuối cùng ta có footer như hình bên dưới, cũng tạm ổn đó nhỉ.
Thiết kế trang chủ
Trong trang chủ ở thiết kế mẫu ta sẽ có các phần hiển thị bao gồm:
- Phần slide ảnh chuyển động ngược chiều kèm tiêu đề bên trái.
- Phần hiển thị bài viết trong một danh mục nhưng hiển thị theo chiều ngang.
- Phần hiển thị bài viết mới nhất chia thành 2 cột.
Trong đó riêng phần slide ảnh thì chúng ta sẽ chèn một chút mã Javascript vào để nó có hiệu ứng chạy ngược chiều nhau.
Để bắt đầu tạo trang chủ, bạn vào trang quản trị và vào Pages => Add New Page để tạo một trang mới, bạn đặt tên là trang chủ, chọn Template là Elementor Full Width. Sau đó chọn Edit with Elementor để sửa.
Thiết kế phần tiêu đề có slide ảnh
Phần này bạn tạo một container, vào Styles chọn Border rồi thiết lập Border Type là Solid, cho 1px ở Bottom với màu #DDDDDD.
Cột đầu tiên bạn thiết lập Justify Content là Center, chèn widget Heading (font size 55px, độ đậm 700), Text Editor (chỉnh size chữ lên 20px, độ đậm 500), và chèn một cái widget Button ở dưới.
Ở cột thứ 2 bạn chèn thêm một container bên trong và thiết lập Direction nó là Row rồi chuyển qua tab Advanced đặt CSS ID của nó là heroImg_slide_vertical. Tiếp tục chèn thêm 2 cột bên trong nữa, và đặt CSS Class cho mỗi cột là heroImg_column, và đặt padding là 0 hết nhé. Nếu bạn tạo đúng thì sẽ có cấu trúc như bên dưới.
Bây giờ bạn chèn ảnh vào 2 cột này với widget Image, bạn nên chèn các ảnh có kích cỡ theo chiều dọc, ví dụ như tấm ảnh này. Ở mỗi tấm ảnh bạn có thể cho nó border radius là 20px.
Tới đây bạn nên bật chức năng Structure lên để hiển thị công cụ điều hướng cho thuận tiện làm việc nhé.
Bây giờ bạn chọn container chứa hai cột (trước đó đặt CSS ID là heroImg_slide_vertical), chọn Advanced => Custom CSS và chèn đoạn sau vào:
@keyframes vertical-scroll-down {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
@keyframes vertical-scroll-up {
0% {
transform: translateY(-50%);
}
100% {
transform: translateY(0);
}
}
selector {
overflow: hidden;
height: 100vh;
}Tiếp tục chọn cột chứa hình ảnh đầu tiên, chọn Advanced => Custom CSS và chèn vào:
selector {
animation: vertical-scroll-down 20s linear infinite;
}Tiếp tục chọncootj chứa hình ảnh thứ 2 và cũng vào Advanced => Custom CSS và chèn vào:
selector {
animation: vertical-scroll-up 20s linear infinite;
}Với các bước trên ta đã có hiệu ứng chuyển động rồi.
Tuy nhiên ta không thể cố định thời gian cuộn ở 20s, vì nếu xem website ở các trình duyệt nhỏ hơn việc chuyển động như vậy sẽ không xem được ảnh rõ ràng. Vì vậy ta sẽ cho tốc độ chuyển động dựa theo chiều cao của cột. Bạn cài plugin Insert Scripts In Header and Footer, sau đó vào Settings => Insert Scripts In Header and Footer và chèn đoạn mã dưới đây vào mục Footer Scripts, nếu bạn muốn chuyển động nhanh hơn thì có thể điều chỉnh giá trị thời gian của đoạn const duration = (maxHeight / containerHeight) * 20, thay 20 xuống thấp hơn:
<script>
const heroContainer = document.querySelector('#heroImg_slide_vertical');
const heroColumns = document.querySelectorAll('.heroImg_column');
function adjustHeroScrollSpeed() {
const containerHeight = heroContainer.clientHeight;
let maxHeight = 0;
heroColumns.forEach(column => {
const columnHeight = column.scrollHeight;
if (columnHeight > maxHeight) {
maxHeight = columnHeight;
}
});
// Tính toán thời gian cuộn dựa trên chiều cao lớn nhất
const duration = (maxHeight / containerHeight) * 20; // Thời gian cuộn đồng nhất cho cả hai cột
// Áp dụng thời gian cuộn giống nhau cho cả hai cột
heroColumns.forEach(column => {
column.style.animationDuration = `${duration}s`;
});
}
window.addEventListener('resize', adjustHeroScrollSpeed);
adjustHeroScrollSpeed(); // Initial adjustment on load
<
/script>Thiết kế slide hiển thị bài viết
Theo như mẫu thiết kế ở trang chủ, thì ta sẽ có các phần hiển thị bài viết trong một category nào đó được hiển thị với dạng slide như ảnh bên dưới. Ở giao diện mẫu họ có chèn 2 phần này vào trang chủ, nên bây giờ chúng ta sẽ đi thiết kế phần hiển thị bài viết dạng slide như này rồi nhân đôi lên là được.
Trong một thành phần này, chúng ta sẽ có một widget Heading để hiển thị tên category, còn slide hiển thị bên dưới chúng ta sẽ sử dụng widget tên Loop Carousel.
Bây giờ ta tạo một container để bao quát cả thành phần này, đặt margin 50 0 50 0, padding 50 0 50 0, sau đó chèn widget:
Heading: thẻ h2, font-weight 700, size giữ nguyên, có thể chèn link tới một category tương ứng ở phần Link trong widget heading này.
Loop Carousel: Khi chèn xong, bạn chọn Choose template type là Posts, và bắt đầu ấn nút Create template để tạo một template hiển thị cho slide này. Nó hỏi lưu lại các thay đổi trên thiết kế của trang chủ thì ấn save để lưu lại nhé.
Bây giờ chúng ta sẽ tiến hành thiết kế template hiển thị cho slide, theo mẫu thiết kế thì trên các bài viết hiển thị ra slide nó sẽ bao gồm ảnh đại diện của bài viết, tên category, tên bài viết và thông tin ngày đăng bài viết đó.
Vậy thì bây giờ chúng ta sẽ tiến hành chèn các widget tương ứng vào khung thiết kế template là được, cụ thể là bao gồm các widget theo thứ tự như Featured Image (chỉnh size ảnh hiển thị phù hợp là 454×541, chọn qua mục Styles chọn border radius là 4 4 4 4), Post Info (xoá hết và tạo một item hiển thị Term và chọn taxonomy là Categories), Post Title (thẻ h3, font-weight 700, ở phần Link các bạn ấn vào nút Dynamic Tag và chọn Post URL để tiêu đề có link dẫn tới trang bài viết đó), Post Info (xoá hết giữ lại Date, bỏ link, thêm chữ Đăng ngày vào Before, vào Styles để đổi màu chữ về màu Secondary, đặt font-weight là 500, có thể vào phần Advanced để thêm margin top là 35px để nó hiển thị tụt xuống dưới như demo).
Để phần hiển thị category bài viết ở phần này giống demo hơn là có màu nền, viền bo tròn thì bạn nhấp vào widget hiển thị tên category, vào phần Styles thiết lập màu chữ cho Text là #616162, font-size 14px, letter spacing là 0,5 px, font weight 500, line height 17px, qua phần Advanced bạn chọn Align Self là Start, padding là 6 12 6 12, vào mục Border chỉnh border radius là 4 4 4 4.
Sau khi điều chỉnh template hiển thị ở Loop Carousel thì sơ bộ chúng ta đã có kết quả như bên dưới.
Bạn bấm Save & Back để quay lại giao diện thiết kế trang chủ, bây giờ bạn sẽ thấy một số bài viết đã hiển thị ra rồi. Bài nào không có ảnh thì sẽ không hiển thị.
Bây giờ mặc định ở widget này nó sẽ hiển thị toàn bộ bài viết ra (số lượng thiết lập ở mục Layout => Number of slide), nhưng theo thiết kế thì ta sẽ chỉ muốn các bài viết trong một category nào đó hiển thị ra ở đây, thì sẽ cần điều chỉnh lại Query trong widget Loop Carousel này.
Thông tin thêm: Thuật ngữ Query trong WordPress đang nói đến một chức năng gửi truy vấn vào cơ sở dữ liệu để lấy dữ liệu bài viết hiển thị ra bên ngoài, mỗi công việc lấy dữ liệu sẽ được gọi là một query. Để tuỳ chỉnh dữ liệu trả về thì ta sẽ cần phải điều chỉnh tham số trong query. Với Elementor ta có thể thực hiện thay đổi tham số query trong một số widget liên quan đến lấy dữ liệu bài viết. Cũng xin nói thêm là “bài viết” ở đây mình chỉ đang gọi chung chung, thực tế query áp dụng với mọi “post type” và “taxonomy” mà hai khái niệm này nếu bạn học lập trình trong WordPress thì sẽ cần nghiên cứu thêm.
Để điều chỉnh query trong Loop Carousel, bạn nhấp vào phần tuỳ chỉnh Query trong widget. Giả sử bạn cần hiển thị bài viết trong một category nào đó thì sẽ thêm mục Term vào include by, sau đó ở phần Term bên dưới sẽ nhập tên category cần lấy bài viết ra. Bạn có thể vào trang quản trị, vào Posts => Categories và tạo thử một category, sau đó thiết lập lưu vài bài viết vào category này để thử nghiệm nhé.
Và vào mục Pagination đưa về None để nó không hiển thị mấy dấu chấm phân trang ở dưới slide.
Bạn chuyển qua tab Advanced của Container
Kết quả sau khi hoàn thành làm phần slide hiển thị bài viết.
Bây giờ bạn có thể lưu cả phần này lại thành một template bằng cách ấn chuột phải vào container tổng, chọn Save as Template để sau này muốn sử dụng lại mà không cần thiết kế lại hay copy.
Mình thấy theo mẫu thiết kế trên trang chủ là hiển thị slide này 4 lần, bạn có thể tuỳ ý tái sử dụng lại bao nhiêu lần tuỳ thích, và khi dùng thì đổi lại tên category ở widget Heading, và điều chỉnh lại query trong widget Loop Carousel thôi nhé.
Thiết kế phần hiển thị bài viết mới nhất chia cột
Dựa trên mẫu thiết kế, thì trang chủ sẽ có thêm một phần hiển thị bài viết mới nhất được chia thành 2 cột, ở dưới có nút Load more để tải thêm bài viết. Cảm ơn Elementor, chúng ta hoàn toàn có thể dễ dàng làm được phần này thông qua widget Loop Grid, nó cũng đi kèm cái nút tải thêm bài viết.
Để là phần này, dĩ nhiên rồi ta cũng sẽ tạo một container để bao bọc toàn bộ chức năng này, đặt margin là 50 0 50 0, padding cũng 50 0 50 0.
Kế tiếp là tạo một widget Heading để hiển thị chữ “Latest Posts”, cũng cho font weight thành 700 nhé.
Và chèn thêm một widget Loop Grid để hiển thị các bài viết mới nhất, bạn thiết lập tuỳ chọn Column là 2 để nó sẽ chia lưới hiển thị các bài viết với 2 cột. Chúng ta cũng ấn nút Create template để tạo template hiển thị những bài viết ra đây.
Phần template thì bạn lưu ý là mỗi bài viết được tải ra, nó sẽ có 2 cột, cột trái hiển thị Featured Image, cột phải là hiển thị các thông tin của bài viết đó với các block Post Info và Post Title.
Vậy nên khi tạo template, bạn phải chèn một container bao quát bên trong với Direction là row, và chèn thêm 2 container tương ứng với 2 cột mỗi cột 50% chiều rộng. Container chia cột bạn nên thiết lập padding về là 0.
Cấu trúc nó sẽ như ảnh bên dưới.
Bây giờ ta sẽ chèn widget Featured Image vào cột bên phải, kích thước ảnh là 322×181, qua phần Style chỉnh Border Radius về 4 4 4 4.
Cột bên phải ta sẽ chèn các widget bao gồm Post Info (hiển thị category), Post Title và Post Info (hiển thị ngày đăng). Phần này nếu muốn nhanh bạn vào sửa lại template của Loop Carousel ta đã làm ở phần trên và copy nguyên phần hiển thị thông tin của nó. vàolà được, đỡ mất công sửa lại thông số. Video thao tác copy ở bên dưới.
Để hiển thị nút Load More thì bạn sửa widget Grid Loop, chọn mục Pagination và sử dụng loại Load on Click. Sau đó chuyển qua mục Styles thiết lập lại màu nút Pagination theo ý muốn.
Kết quả hoàn thiện sau khi hoàn tất.
Và đây cũng là lúc ta kết thúc phần thiết kế trang chủ.
Thiết lập page Trang chủ làm homepage
Chúng ta đã hoàn tất thiết kế trang chủ nhưng khi truy cập vào website thì trang này sẽ chưa hiển thị ra mặc định. Bạn cần thiết lập trang này làm homepage tại Settings => Reading, chọn a static page và đưa Homepage lấy từ trang đã thiết kế.
Phần tiếp theo
Do bài này hơi dài và có nhiều video, hình ảnh nên mình kết thúc phần 1 tại đây, ở phần tiếp theo chúng ta sẽ hoàn thiện thiết kế của trang đọc bài viết chi tiết và các trang lưu trữ (khi xem category hoặc tag).
