Tạo tiêu đề dọc bằng plugin Beaver Builder trong chủ đề Astra. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách bạn sẽ đạt được điều này với hai công cụ phổ biến của chúng tôi: plugin Beaver Builder và chủ đề Astra.
Lúc đầu, chúng tôi xóa tiêu đề chung khỏi toàn bộ trang web. Tôi không có Astra Pro. Vì vậy, tôi đã làm điều này. Nó sẽ xóa hoàn toàn tiêu đề trang web khỏi trang Astra của bạn.
Bây giờ chúng ta sẽ tạo một mẫu với plugin Beaver Builder.
- Đăng nhập vào Trang tổng quan
- Điều hướng đến Trình tạo -> Trang mẫu
- Nhấp vào nút Thêm mới
- Kéo và thả hàng một cột
- Thay đổi kích thước chiều rộng hàng. Tôi đặt thành 340px
- Thêm các mô-đun. Tôi đã sử dụng Tiêu đề, Trình đơn phân tách và Nhóm biểu tượng
- Nhấp vào Biểu tượng cờ lê Cài đặt hàng và thêm tên lớp CSS “ tiêu đề dọc ” trong tab Nâng cao
- Xuất bản mẫu
Sau đó, chúng tôi thêm mẫu Beaver Builder này trên trang web của mình và sử dụng nó làm thanh tiêu đề dọc. Mở tệp functions.php của chủ đề con astra của bạn và thêm đoạn mã PHP này vào cuối tệp:
add_action('astra_header_before', 'vertical_header', 1);
function vertical_header() {
echo do_shortcode('[fl_builder_insert_layout id="110"]');
}
[fl_builder_insert_layout] là một mã rút gọn của Beaver Builder đang chèn mẫu Beaver Builder vào trang web của bạn. Chúng tôi đang sử dụng nó khi chúng tôi đưa mẫu vào tệp PHP.
110 là ID mẫu của tôi. Bạn sẽ thay thế nó bằng ID mẫu của riêng mình hoặc bạn có thể sử dụng slug thay vì ID.
Đây là bước cuối cùng. Chúng tôi cần một số CSS để đặt mẫu này ở bên trái. Mở tệp style.css của bạn chủ đề con astra và thêm CSS này
.vertical-header {
border-right: 1px solid #ede3e3;
display: block;
height: 100%;
padding-top: 40px;
position: fixed;
top: 0;
left: 0;
width: 340px;
z-index: 99;
}
.site-content,
footer {
margin-left: 340px;
}
Bây giờ làm mới trang chủ và bạn sẽ nhận được thanh tiêu đề dọc ở bên trái.
Lưu ý: Tôi đã không tạo hiệu ứng phản hồi trên thiết bị di động. Bạn có thể dễ dàng làm điều đó với Beaver Builder. Tạo một mẫu mới khác cho thiết bị Vừa và Nhỏ và đặt mẫu này qua shortcode.