Còn nếu như mọi người muốn thêm widget vào trong từng cột Footer thì hãy thay Nội dung Cột 1,Nội dung Cột 2,Nội dung Cột 3 thành đoạn sau. (Với x là khác nhau) Show Bây giờ, chúng ta sẽ chèn nó ngang với header, main-wrapper hay sidebar-wrapper nhé  Sau khi bạn chèn xong và quay vào phần bố cục thì nó sẽ có thêm 1 đoạn như thế này Như vậy là các bạn hoàn toàn có thể thêm tiện ích vào Footer của mình rồi. Tiếp theo, bây giờ chúng ta sẽ viết CSS cho chúng ta. Dưới đây là đoạn CSS của mình. bạn thêm đoạn CSS dưới đây mà trước ]]> nhé #Chân trang bề rộng. 100%; trôi nổi. bên trái; chiều cao tối thiểu. 100px; lai lịch. #ccc; footer-chính bề rộng. 100%; trôi nổi. bên trái; chiều cao tối thiểu. 80px; lai lịch. #888; footer-bản quyền bề rộng. 100%; trôi nổi. bên trái; chiều cao tối thiểu. 20px; lai lịch. #666; cột chân trang bề rộng. 33. 333333%; trôi nổi. bên trái Xong, chỉ với vài dòng CSS nhỏ như vậy là các bạn đã chia Footer của mình thành 3 cột và có thể thêm thông tin bạn muốn nhé Bài viết này mình sẽ hướng dẫn các bạn làm 1 menu footer cực kỳ đơn giản chỉ với UX-Block và CSS. Các thánh HTML thì không cần đọc bài này nhé ^^. Code dưới đây dành cho theme Flatsome nhé Link tải hình demo. https. //lái xe. Google. com/file/d/1BKP66n480FtOuFdR9or2a3_zeV9C9bE1/view?usp=sharing Demo will like this Tạo UX-Block chứa các biểu tượngCác bạn copy đoạn shortcode mà mình có sẵn, sau đó tạo 1 block ux với tên gọi Menu footer. Các bạn lưu ý giúp mình là đặt đúng tên này nhé, vì lát nữa code của mình gọi ra sẽ gọi uxblock với tên này Sau đó các bạn dán giúp mình đoạn shortcode sau [section class="footer-pttuan-menu"] [ux_stack distribute="around" class="menu-footer-pttuan-main active"] [featured_box img="274" pos="center" title="Danh mục" class="danh-muc"] [/featured_box] [featured_box img="286" pos="center" title="Tìm kiếm" class="tim-kiem"] [/featured_box] [featured_box img="285" pos="center" title="Giỏ hàng" class="gio-hang"] [/featured_box] [featured_box img="284" pos="center" title="Tư vấn" class="tu-van"] [/featured_box] [/ux_stack] [/section] Các bạn quay lại xem bằng Builder sẽ như thế này Với phần tử ICON BOX, các bạn có thể sử dụng ảnh SVG hoặc ảnh tùy thích nhé, và thêm liên kết vào tùy chọn Sau đó các bạn thêm đoạn mã sau để nó chỉ hiển thị trên mobile nhé function menu_footer(){
if(wp_is_mobile()){
echo do_shortcode('[block id="menu-footer"]');
}
}
add_action('wp_footer','menu_footer');
Bạn có thấy địa chỉ block id của mình là menu-footer không? <style type="text/css">
.footer-pttuan-menu{
position: fixed;
bottom: 0;
background: #fff;
z-index: 999;
padding: 10px 0!important;
}
.footer-pttuan-menu .icon-box-img{
width: 30px!important;
}
.footer-pttuan-menu .icon-box-text{
font-size: 12px;
}
.menu-footer-pttuan-main>*{
width: 25%!important;
}
.menu-footer-pttuan-main.active{
display: flex;
}
</style>
Như vậy là xong, chúc các bạn thành công nhé Các bạn lưu ý. Vì mình sử dụng hàm wp_is_mobile() nên khi các bạn F12 thì các bạn phải F5 lại 1 lần nữa nó mới nhận nhé, hàm này là hàm hiển thị cho mobile thôi nhé To setting Header / Footer or also call is the head/end page. Đầu tiên, chúng ta cần truy cập vào trang web quản trị
Thiết lập Header và Footer, các bạn có thể xem video hướng dẫn bên dưới hoặc bài hướng dẫn bằng nội dung và hình ảnh bên dưới video này Header SettingsKhi truy cập đã được quản trị trang web rồi, thì ta bắt đầu thiết lập tiêu đề bằng cách nhấp chọn Thiết kế trang > Cấu trúc trang Tại đây, nếu tài khoản của bạn đã có sẵn mục Header thì hãy nhấp vào đó để thiết lập. Nếu không, hãy nhấp vào nút Thêm mới để tạo tiêu đề mới Argument with Header đã có sẵn
Sau khi thay đổi xong, hãy nhấp vào nút cập nhật Sau đó, chúng ta sẽ truy cập vào nơi chỉnh sửa Header tùy chỉnh theo tiêu đề mẫu mình mong muốn bằng cách nhấp vào Mở thiết kế trang Đối với Header chưa có sẵnTruy cập vào Add New và nhập tên Header, kiểu Themer Layout, Layout is header. Nhấp vào Add Themer Layout để hoàn thành. Sau đó bạn sẽ quay lại bước chỉnh sửa Header như ở bước đối với Header đã có sẵn Customise header interfaceKhi mở thiết kế trang, bạn sẽ thấy giao diện chỉnh sửa Tiêu đề như bên dưới. Để có thể thay đổi tiêu đề mẫu khác, hãy nhấp vào dấu + ở góc trên bên phải sao cho trở thành dấu x. Bạn sẽ thấy cửa sổ bật lên với các biểu tượng thuộc tab Mô-đun, ngay lúc này bạn nhấp tiếp vào tab Mẫu để hiển thị các mẫu Tiêu đề có sẵn để lựa chọn Tại đây, bạn có thể lựa chọn tiêu đề mẫu và nhấp vào mẫu bạn ưng ý, sau đó nhấp vào Thay thế bố cục hiện có để thay đổi hoàn toàn tiêu đề mới Sau khi thay đổi xong Tiêu đề, bạn sẽ bắt đầu thay đổi các mục bên trong tiêu đề như Logo, Số điện thoại bằng cách “thay đổi gì thì bấm vào đấy”. Ví dụ, mình sẽ thay đổi logo thì mình sẽ nhấp vào logo Nhấp tiếp vào nút Xóa bỏ rồi tải lên logo mới của bạn > Lưu Change menu on HeaderĐể thay đổi menu thành menu khác, các bạn click vào menu hiện tại, và thay đổi ở mục Menu thuộc tab General
Nhấp vào Lưu để hoàn tất thay đổi menu Tương tự, để thay đổi số điện thoại, hãy nhấp vào số điện thoại và thay đổi Sau khi thay đổi xong, ta nhấp vào Xong > Đăng ký để hoàn tất Footer settingTương tự với Header thiết lập. Footer thiết lập ta cũng có 2 cách, nếu footer đã có sẵn thì click vào đó để ẩn, nếu chưa thì vào Add New và làm như bên dưới Sau khi click vào Add Themer Layout sẽ hiện ra bản như ảnh thứ 2 dưới đây. Tại đây, bạn có thể thiết lập các phần chung như để hiển thị ở tất cả các trang như ở Header. Toàn bộ trang web Thiết lập xong, nhấp vào cập nhật. Sau đó nhấp vào Mở thiết kế trang để bắt đầu thay đổi mẫu và chỉnh sửa thông tin Tại đây, chúng ta vẫn đi theo câu nói cũ chỉ là “nhé gì thì click người” và các bạn cũng chỉnh sửa tương tự như Header Nếu chưa có Footer mẫu thì click vào dấu + sau cho thành dấu x rồi chọn tiếp tab Template và chọn mẫu yêu thích |
