Ở phần trước chúng ta đã thiết kế hoàn thiện phần Header, Footer và trang chủ dựa theo ý tưởng thiết kế của theme Spotlight thuộc Ghost CMS. Trong phần 2 này, chúng ta sẽ thực hiện hoàn thiện thiết kế ở các trang còn lại bao gồm:
- Bổ sung nút search trên header mà phần trước quên làm.
- Thiết kế template Single Post: Trang hiển thị nội dung chi tiết của một bài viết.
- Thiết kế template mặc định cho các Page: Hiển thị nội dung chi tiết của một page.
- Thiết kế template cho trang Archive: Hiển thị các bài viết của category hoặc tag đó khi nhấp vào xem một category hoặc tag.
- Thiết kế giao diện trang Search
Bổ sung nút Search trên Header
Phần trước chúng ta thiết kế phần header nhưng quên làm tính năng tìm kiếm nội dung. Mặc định ở Elementor, bạn chỉ có thể chèn một khung tìm kiếm vào website, nhưng với thiết kế giao diện mẫu này thì tính năng tìm kiếm sẽ hiển thị một cái icon trên header (góc bên phải) và khi nhấp vào nó sẽ ra khung search.
Ở Elementor ta có thể biến tấu lại một tính năng cũng tương tự như vậy nhờ vào việc sử dụng tính năng tạo Mega Menu trong Elementor.
Để bật tính năng Mega Menu, bạn vào trang quản trị, vào Elementor => Settings => Features và bật tính năng Menu lên.
Bây giờ bạn ra lại trang chủ, chọn sửa nhanh Header với Elementor để vào trang sửa template Header đang sử dụng trên trang này.
Bạn sẽ cần điều chỉnh lại container của cột bên phải trong header với Direction là Row để chúng ta chèn cái biểu tượng tìm kiếm kế bên cái nút. Sau đó bạn thêm widget tên Menu vào kế bên cái nút, xoá bớt item trong đó và chỉ giữ lại 1 item, xoá Title trên item và chọn sử dụng icon, tìm icon tìm kiếm trong thư viện.
Trong tính năng Menu mới của Elementor nó có một tính năng hữu ích đó là cho phép chúng ta chèn Dropdown Content tuỳ chỉnh vào, nghĩa là biến một menu thông thường thành Mega bằng cách chèn nội dung vào dropdown content đó. Như vậy ta sẽ bật tính năng Dropdown Content ở item vừa tạo ra và chèn một widget Search vào nội dung dropdown đó.
Trong khi sửa widget Menu, bạn có thể sửa lại chỉ hiển thị khung search khi nhấp vào menu thay vì chỉ rê chuột bằng cách sửa tuỳ chọn Open on ở phần Dropdown Effect từ Hover qua Click.
Bạn xem video thao tác bên dưới.
Thiết kế trang Single
Giao diện mẫu trang single của chúng ta gồm có phần hiển thị tác giả bài viết ở trên, kèm thông tin về ngày đăng, bên dưới là tiêu đề và các nút chia sẻ bài viết.
Chúng ta thực hiện thiết kế giao diện cho template Single bằng cách vào trang quản trị, vào Templates => Theme Builder và tạo một template ở Single Post.
Ở đây nếu bạn thích ăn luôn và ngay thì có thể sử dụng các template thiết kế sẵn cho Single Post mà Elementor gợi ý, cũng khá là đẹp đó. Dĩ nhiên trong khuôn khổ bài này thì mình sẽ bỏ qua và tự thiết kế giao diện theo ý mình.
Theo như thiết kế thì trong trang single post sẽ có hai phần chính mà nó sẽ cần container riêng, một là thanh breadcrumb ở trên để điều hướng bài viết, điều này cũng giúp người đọc dễ xác định bài viết đang được phân loại ở category nào, và hai là khu vực hiển thị nội dung của bài viết với kích thước chiều rộng nội dung là 736px.
Hiển thị thanh breadcrumbs trong bài viết ở Elementor
Một vấn đề phát sinh ra ở đây 🤔, là Elementor mặc định không có widget hỗ trợ chèn thanh breadcrumb này vào website, chúng ta bắt buộc phải tự code thanh breadcrumb này. Tuy nhiên mình có ý này hay hơn.
Hiện nay tất cả website WordPress hầu như phải cài một plugin hỗ trợ SEO là Rank Math SEO hoặc SEO by Yoast, trong đó Rank Math SEO hiện nay phổ biến hơn cả. Và trong plugin Rank Math SEO nó có hỗ trợ tính năng chèn breadcrumb vào website thông qua một đoạn mã PHP hoặc shortcode. May mắn thay, Elementor có hỗ trợ widget chèn Shortcode vào trang. Vậy là đã rõ, chúng ta sẽ cài plugin Rank Math SEO vào website, sau đó bật tính năng Breadcrumb và nhúng breadcrumb này vào giao diện thông qua widget Shortcode.
Sau khi cài xong plugin Rank Math SEO, bạn truy cập vào Rank Math => General Settings, chọn Breadcrumbs bên tay trái và kích hoạt nó lên, chọn Separator Character là ký tự » cho nó phần nào giống mẫu thiết kế.
Bây giờ chúng ta đã có breadcrumb nên tiếp tục công việc thiết kế với Elementor thôi, ta quay lại giao diện thiết kế Single Post của Elementor, tạo một container cho breadcrumb, sau đó chèn widget Shortcode vào và dán đoạn shortcode bên dưới vào nội dung:
[rank_math_breadcrumb]
Để tiến hành làm đẹp cho breadcrumb khi dùng shortcode thì ta phải bắt buộc sử dụng Custom CSS để chèn CSS tuỳ chỉnh vào widget này. Bạn chuyển qua tab Advanced và dán đoạn CSS dưới đây vào mục Custom CSS:
selector .rank-math-breadcrumb .last {
color: var(--e-global-color-secondary);
}
selector .rank-math-breadcrumb a {
color: inherit;
}
selector .rank-math-breadcrumb {
font-size: 14px;
font-weight: 500;
}Còn lại bạn có thể cho margin top và bottom ở container chứa breadcrumb này đừng để nó đứng sát header quá sẽ không đẹp.
Thiết kế container chứa nội dung bài viết
Phần này chúng ta tiếp tục tạo thêm một container phía dưới, và điều chỉnh chiều rộng của container này về 736px.
Bây giờ ta sẽ đi vào chèn các nội dung trong bài viết.
Ở đầu bài viết ta có phần hiển thị các thông tin của bài viết như thế này, bạn thấy nó hiển thị trên cùng một hàng nhưng thông tin này ta có thể chỉ cần sử dụng một widget Post Info duy nhất và cho nó hiển thị phần tác giả và thời gian đăng bài.
Trong thiết lập phần Author hiển thị tên tác giả, bạn bật tính năng hiển thị Avatar lên và cho nó kích thước khoảng 40px.
Còn phần Date thì bạn tắt cái icon đi để không cho hiển thị icon.
Chuyển qua tab Styles, bật Divider lên để nó có viền ngăn cách giữa các thông tin, thiết lập height cho nó là 45% và width là 3.
Trong phần Styles có Text, bạn sửa Weight của chữ lên 500.
Cuối cùng là ta muốn tên tác giả nó có màu đen, bước này thì sẽ cần phải sử dụng Custom CSS vì ta không có tuỳ chọn màu chữ cho từng thành phần trong Post Info. Bạn chuyển qua tab Advanced của Post Info và chèn đoạn Custom CSS sau:
selector .elementor-post-info__item--type-author {
color: var(--e-global-color-primary) !important;
}Kết quả sơ bộ chúng ta có như sau, nó sẽ thiếu phần thời gian đọc vì mặc định Elementor không có widget hiển thị thời gian đọc mà cũng không cần thiết để cài thêm plugin.
Tiếp tục ta chèn thêm một widget là Post Title để hiển thị tiêu đề của bài viết ở ngay phía dưới. Widget này không cần tuỳ chỉnh gì nhiều, chỉ cần đưa độ đậm của chữ về 700 cho nó đậm lên.
Tiếp tục bạn chèn một widget tên là Share Buttons để chèn nút chia sẻ y hệt như demo. Bạn tuỳ chỉnh thiết lập của widget này như bên dưới đây.
Tuỳ chỉnh style để cho icon có màu đen và có kích thước nhỏ lại.
Tiếp theo bạn chèn một widget Post Content để hiển thị nội dung bài viết, tuỳ chỉnh size chữ của phần Post Content này lên 18px, line height lên 30px, màu chữ bạn cân nhắc đổi qua màu #343435 để tổng thể nhìn hài hoà hơn. Chuyển qua tab Advanced để thêm padding 50px cho top và 50px cho bottom để nó có khoảng đệm ở trên và dưới
Tiếp tục ở sau nội dung bài viết sẽ có thêm nút chia sẻ, bạn copy cái widget Share Button ở trên và paste lại ở dưới là được.
Sau đó nữa là cái hộp hiển thị thông tin tác giả, bạn sử dụng widget Author Box, chuyển qua phần Advanced và thiết lập background có màu nền là #f6f6f6, sau đó vào mục Border và cho border radius là 4 4 4 4. Chuyển qua tab Style, vào mục Author cho Name có màu Primary, Biography có màu là Secondary. Bạn có thể cho widget này padding là 35 25 35 25, và margin là 25 0 25 0 để hiển thị cân đối hơn chút. Nếu bạn muốn điều chỉnh ảnh avatar nhỏ như bản mẫu thì vào tuỳ chọn Styles và chỉnh Image Size về 48px.
Phần hiển thị cuối cùng trong nội dung bài viết này đó là phần Read Next, theo như mình phỏng đoán thì đây là các bài viết cũ hơn bài hiện tại để khuyến khích người dùng đọc tiếp.
Phần này bạn có hai hướng lựa chọn, một là bạn tái sử dụng phần Loop Carousel mà ta đã hoàn thiện ở phần trước, chỉnh query về lại để hiển thị các bài cũ hơn.
Hai là bạn chèn một widget Loop Grid và tái sử dụng template cho loop mà ta đã tạo ra trước đó ở phần hiển thị trên slide. Để xem các loop template bạn đang dùng, thì vào trang quản trị tìm Templates => Theme Builder, chọn Loop Item và ấn Edit để xem. Còn về query chỉ lấy bài viết cũ hơn bài hiện tại thì hiện tại Elementor chưa hỗ trợ query kiểu này, nên ở phần này chúng ta tạm sử dụng query để gọi các bài viết khác trong website thôi nhé.
Tổng quan sau khi hoàn thiện.
Như vậy là ta vừa hoàn thiện xong template Single Post rồi. Chúng ta tiếp tục thiết kế các template khác.
Sau khi hoàn tất bạn lưu lại thì nên hiển thị nó với Post thôi nhé.
Thiết kế cho template Archive
Template Archive là sẽ sử dụng chung khi chúng ta vào xem một trang thuộc loại lưu trữ, bao gồm trang category, tag, tác giả,…
Căn cứ theo mẫu thiết kế thì trong trang lưu trữ ta sẽ có hai thành phần chính, bao gồm tên loại lưu trữ và mô tả của nó ở trên, kèm tấm ảnh. Ở dưới là một cái grid loop nhưng không tạo query mới mà ta sẽ sử dụng query hiện tại trên trang lưu trữ để nó lấy đúng bài viết thuộc trang lưu trữ đang xem, cái này trong hướng dẫn mình sẽ có lưu ý khi hướng dẫn đến.
Chúng ta thực hiện tạo template cho trang lưu trữ bằng cách vào trang quản trị, tìm Templates => Theme Builder, sau đó chọn Archive và tạo một template mới ở đây.
Trước tiên ta cần tạo một container bao quát toàn bộ nội dung trong trang lưu trữ này, thiết lập margin top cho nó là 100px, margin bottom 50px.
Sau đó ta sẽ tạo một container để hiển thị thông tin giới thiệu của trang lưu trữ và mô tả của nó. Mình sẽ không cho hiển thị hình ảnh vì mặc định WordPress chưa có tính năng chèn ảnh đại diện cho một trang lưu trữ mà sẽ cần phải code thêm, nó không phù hợp ở bài viết hướng dẫn căn bản thế này. Ở container hiển thị thông tin trang lưu trữ, bạn cho padding 100 0 100 0 để có khoảng trống trên và dưới lớn giống như mẫu thiết kế.
Ta chèn widget Archive Title để hiển thị tiêu đề của trang lưu trữ, cho độ đậm của chữ lên 700. Bạn thiết lập tắt context khi hiển thị tên trang lưu trữ vì mặc định nó sẽ chèn thêm chữ Category: hoặc Tag: trước tên trang lưu trữ.
Để chèn mô tả của trang lưu trữ, ta sẽ sử dụng một thủ thuật nhỏ đó là chèn widget Text Editor vào, sau đó chọn nội dung hiển thị là Dynamic Tag và chọn Archive Description để hiển thị. Sau đó qua mục Styles và cho nó font size là 20px, độ đậm 500.
Tiếp tục tạo một container khác trong container chính, đặt padding về 0 và chèn widget Loop Grid, sử dụng template loop đã tạo trước đó, diều chỉnh số cột là 4 và hiển thị 8 hoặc 12 bài tuỳ ý bạn.
Ở phần Query, bạn chọn sử dụng Current Query.
Pagination bạn vẫn chọn kiểu Load on Click, và trang trí cái nút thành màu đen là được.
Tổng quan trang lưu trữ sau khi hoàn tất.
Thiết kế template trang Search Results
Template này sẽ được sử dụng khi ai đó tìm kiếm nội dung trên website của mình. Về cấu trúc và cách thức hoạt động thì nó y hệt như việc thiết kế template Archive. Vì vậy cách nhanh nhất đẻ tạo template Search là copy toàn bộ nội dung đã thiết kế bên trang Archive qua template này.
Để thực hiện việc này, bạn sẽ cần thao tác chọn copy container bao quát toàn bộ nội dung ở trang Archive mình vừa làm ở trên.
Sau đó bạn truy cập vào Templates => Theme Builder, tạo mới một template Search Results, và ấn chuột phải chọn Paste vào và lưu lại là xong.
Khi lưu lại lần đầu, bạn nhớ phải chọn áp dụng ở trang Search Results thôi nhé.
Bây giờ bạn có thể thử tìm kiếm trên website để xem giao diện hiển thị.
Vậy có cần thiết kế template giao diện của Page không?
Chúng ta chưa thao tác tạo template hiển thị nội dung của Page, nhưng hiện tại nó sẽ sử dụng template của Post ở mặc định. Mình nghĩ hiện tại ta không cần thực hiện tạo template cho page vì nếu bạn có tạo một page mới thì nên sử dụng Elementor để thiết kế, và chọn Page Template là Elementor Full Width để linh hoạt hơn.
Trường hợp nếu bạn muón thiết kế page mà không sử dụng header và footer mặc định thì sử dụng template Elementor Canvas.
Lưu lại thiết kế Elementor (export Kit)
Nếu bạn đã hoàn thiện thiết kế của mình trên Elementor, thì nên lưu lại nó thành một Elementor Kit để bạn có thể tự lưu trữ và tái sử dụng lại sau này khi cần, chứ lỡ lỗi website thì mất thật là uổng công.
Để Export các thiết kế hiện tại trong Elementor, bạn vào trang quản trị, tìm Elementor => Tools và chọn Import/Export Kit.
Trong quá trình tuỳ chọn trước khi export, bạn có thể chọn plugin mà đang phụ thuộc trong các thiết kế (nếu có) và nên export cùng để tránh bị thiếu.
Sau khi ấn nút Create Kit, trình duyệt sẽ tải về tập tin .zip và bạn có thể lưu trữ lại. Sau này cần dùng lại thì bạn cũng vào Elementor => Tools => Import/Export Kit và chọn Import để tái sử dụng.
Kết thúc hướng dẫn thiết kế blog bằng Elementor Pro
Chúng ta vừa đi qua hướng dẫn rất chi tiết việc sử dụng Elementor Pro để thiết kế một giao diện blog hoàn chỉnh. Trong suốt chiều dài bài viết, chúng ta đã ứng dụng rất nhiều thao tác với Elementor và với cacs thao tác đó, cộng với sự sáng tạo của bạn thì hoàn toàn có thể thiết kế được nhiều giao diện website khác nhau mà không cần phải sử dụng các đoạn code phức tạp.
Bây giờ bạn có thể giữ lại giao diện này để sử dụng trong các bài hướng dẫn tiếp theo về sau. Ở các bài sau, chúng ta sẽ đi tìm hiểu về WooCommerce để làm một trang bán hàng trong WordPress, và chúng ta sẽ kết hợp với Elementor Pro để thiết kế thêm một số tính năng hiển thị liên quan đến sản phẩm trong website.
