Chúng ta tiếp tục tìm hiểu các vấn đề thường gặp khi sử dụng Beaver Builder để sửa/xây dựng website nhé!
23. Không thể mở BB sau khi chèn HTML/JavaScript
Nếu bạn đã chèn HTML/JavaScript, đăng giao diện, và sau này mở lại mà nó không chạy. Bạn có thể bật chế độ SAFE MODE, bằng cách chèn chữ
&safemode
phía sau đường dẫn. Ví dụ:
https://themevi.com/fl-builder-template/demo/?fl_builder&safemode
SAFE MODE sẽ tải Beaver Builder nhưng không sử dụng HTML/CSS/JavaScript, nên bạn có thể tìm và xóa đoạn mã bạn vừa chèn mà gây lỗi!
24. Không thể chỉnh sửa Cột/Hàng sau khi dùng Position:absolute
Nếu bạn đã chèn position:absolute vào Mã CSS/JavaScript hoặc Giao diện > Tùy biến > CSS bổ sung, để căn chỉnh margin cho các Hàng/Cột.
Nhưng điều này đôi khi khiến cho các Cột/Hàng trong khi sửa cũng bị thay đổi vị trí, và không thể sửa chúng được. Bạn chỉ cần chèn position:relative cho các hàng/cột đó ở Layout CSS/JavaScript (Mã CSS/JavaScript) là được.
25. Chèn màu nền cho Hàng (Row)
Di chuột vào một mục bất kỳ trong Hàng > Bấm vào biểu tượng Tua vít như hình
Kéo xuống mục Nền – Kiểu: chọn Màu sắc
Bấm chuột vào thanh màu màu xanh phía trên, và kéo con trỏ chuột (tròn) để chọn màu và con trỏ chuột (chữ nhật) để chọn độ trong suốt.
Bạn cũng có thể dán mã màu (ví dụ: #ffffff hoặc rgb(0,0,0) hoặc rgba(0,0,0,0.75) vào ô mã màu như hình dưới.
26. Chèn ảnh nền cho Hàng (Row)
Di chuột vào một mục bất kỳ trong Hàng > Bấm vào biểu tượng Tua vít như hình
Kéo xuống phần Nền – Kiểu: Ảnh > Bấm Chọn ảnh
Và tải ảnh lên thôi. Một số thiết lập bạn cần lưu ý.
- Repeat: lặp lại hay không, với repeat-x (lặp lại chiều ngang), repeat-y (lặp lại chiều dọc). Vì web rất dài và rộng, mà ảnh nền nhỏ, thì chúng sẽ tiến hành lặp lại ảnh để phủ hết chiều dài lẫn rộng. Trong CSS thì Repeat là background-repeat
- Vị trí: vị trí của ảnh, cái này bạn cứ thử tất cả để coi vị trí nào là hợp nhất. Trong CSS thì Vị trí là background-position
Đính kèm: cái này để mặc định (Cuộn chuột), lưu ý nếu chọn CỐ ĐỊNH (khi bạn kéo chuột xuống, ảnh sẽ đứng yên, tạo hiệu ứng khá đẹp). Trong CSS thì cái này là background-attachment
Scale: cái này bạn cứ thử xem cái nào hợp. Trong CSS thì Scale chính là background-size (cover, contain, auto…)
Và đây là chọn lớp màu phủ lên phía trên ảnh. (Background Overlay).
Hoặc là màu nền cho ảnh (màu sẽ hiển thị khi không tải được ảnh,..).
Cách chọn màu thì y hệt Mục 25.
27. Tạo viền dưới cho Hàng (Row)
Di chuột vào một mục bất kỳ trong Hàng > Bấm vào biểu tượng Tua vít như hình
và kéo xuống phần Viền, để tạo viền cho Hàng nhé. Bạn có thể tạo viền trên, dưới, trái, phải gì cũng được.
- Kiểu: có 5 kiểu viền. Không (không xài viền) – Solid (đường thẳng) – Dotted (đường chấm chấm) – Double (hai đường kẻ ngang) – Dashed (đường nét đứt). Mặc định là Solid.
- Màu sắc: màu sắc của viền, cách chọn màu giống với Mục 25 ở trên.
- Rộng: độ dày của viền. Nếu điền 0 tức là không có viền ở chỗ đó. Bạn điền một số bất kỳ nhé, nó tính theo đơn vị là px.
Nếu bạn muốn chỉ tạo viền dưới, thì điền số vào Dưới, còn các ô khác điền số 0.
Cột (Column) cũng có một thiết lập giống hệt như này. Nên bạn có thể làm tương tự để tạo viền cho cột.
BB gần đây đã cập nhật thêm tính năng cho phép sửa Viền trên cả Máy tính bảng và Điện thoại. Bạn chỉ cần bấm vào icon Máy tính bên phải chữ Viền để sửa.
Hoặc bạn cũng có thể chuyển qua chế độ Sửa Responsive để sửa nhá! (Xem lại Mục 8. Sửa Responsive)
28. Hàng Full chiều rộng
Mặc định, khi bạn kéo một Hàng với nhiều Cột vào giao diện, Hàng chỉ có một chiều rộng nhất định thôi (và cái này tùy theo thiết lập mặc định , thương là 1100px). Xem lại Cài đặt chung (Mục 15) để sửa thiết lập này.
Rồi, khi kéo Hàng vào Giao diện, bạn sẽ có như này. Chiều rộng mặc định là 1100px nên sẽ dư khoảng trắng hai bên.
Để nó kéo dãn ra 2 bên > Bấm vào biểu tượng Tua vít của Hàng. Và xem ở mục Rộng. Bạn sẽ thấy Cố định.
Bạn chọn Chiều rộng đầy đủ. Hàng sẽ được kéo dãn qua hai bên cho full chiều rộng.
Lưu ý Content Width: tức là nội dung bên trong sẽ có chiều rộng như nào. Bạn có thể chọn Chiều rộng đầy đủ, hoặc Cố định, rồi gõ chiều rộng vào, hoặc để mặc định là 1100px.
29. Thay đổi chiều rộng Cột
Bạn có thể thay đổi chiều rộng của một hoặc nhiều cột trên cả 3 thiết bị là: Máy tính – Máy tính bảng – Điện thoại. Mình lấy ví dụ cho máy tính, với các thiết bị khác, bạn chỉ cần bật chế độ sửa Responsive rồi làm y hệt.
Di chuột vào biểu tượng Cửa sổ > Cài đặt cột
Điền một con số vào (tối đa là 100). Bạn có thể bấm vào biểu tượng máy tính hoặc mở Chế độ sửa Responsive nếu muốn đổi chiều rộng trên máy tính bảng và điện thoại.
30. Ẩn Module/Cột/Hàng trên các thiết bị khác nhau
Cả 3 cái đều có thiết lập tương tự nhau. Nên mình gộp chung luôn. Bạn mở Cài đặt Hàng/Cột/Module ra.
Và kéo xuống phần Visibility (Hiển thị). Bạn sẽ thấy phần Breakpoin đang để là Tất cả. Hãy chọn một lựa chọn để hiển thị Hàng/Cột/Module theo từng kích thước màn hình khác nhau.
- Chỉ thiết bị cỡ lớn: chỉ hiển thị trên Máy tính
- Chỉ thiết bị cỡ lớn & trung bình: chỉ hiển thị trên máy tính & máy tính bảng
- Thiết bị cỡ trung bình: chỉ hiển thị trên máy tính bảng
- Thiết bị cỡ trung bình & nhỏ: chỉ hiển thị trên máy tính bảng và điện thoại
- Thiết bị cỡ nhỏ: chỉ hiển thị trên điện thoại
31. Ẩn Module/Cột/Hàng cho người dùng khác nhau
Làm tương tự bước 30, và kéo xuống mục Hiển thị như hình
- Luôn luôn: luôn luôn hiển thị
- Never: không hiển thị
- Người dùng đã đăng xuất: với tất cả thành viên đã thoát tài khoản và chưa đăng nhập
- Người dùng đã đăng nhập: với tất cả thành viên đã đăng nhập
- Condition Logic: rất nhiều điều kiện để ẩn/hiện, cực kỳ nhiều luôn, hỗ trợ Custom Field.
32. Shortcode ACF Field – Beaver Themer
Một số shortcode ACF để chèn vào giao diện, lưu ý đây là shortcode cho mục Options
+ URL: wpbb site:acf_option type=’url’ name=’facebook’]
+ Text: wpbb site:acf_option type=’text’ name=’dien_thoai_1′]
+ Image: wpbb site:acf_option type=’image’ name=’logo’]
+ WYSIWYG: wpbb site:acf_option type=’wysiwyg’ name=’tra_loi_1′]
+ Email: wpbb site:acf_option type=’email’ name=’email’]
Nhớ chèn [ vào trước shortcode. Mình ghi thiếu, vì ghi đủ thì web nó ẩn mất shortcode.
33. Tùy chỉnh mũi tên Content Slider Module
Nhớ đặt class cho Content Slider là kl-slide
.kl-slide .bx-wrapper .bx-controls-auto, .kl-slide .bx-wrapper .bx-pager {
bottom: 30px;
}
.kl-slide .bx-wrapper .bx-pager.bx-default-pager a.active {
background: #fff;
}
.kl-slide .fl-module-content-slider .bx-wrapper {margin-bottom: 0 !important;}
.kl-slide .fl-content-slider-navigation svg {
padding:30%;
}
.kl-slide .fl-content-slider-navigation .fl-content-slider-svg-container {
width: 32px;
height: 32px;
background: #2c2b3b;
}
34. Tạo Heading Gradient
Nhớ đặt class cho Heading Module là kl-heading
.kl-heading h2.fl-heading {
background: linear-gradient(241.88deg, #DCAF47 17.13%, #936702 102.75%);
padding: 10px !important;
color: #fff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
35. Xóa tên video, icon điều khiển trong video Youtube
Sử dụng Video Module trong Ultimate Addons for Beaver Builder để tạo Video. Plugin này sẽ chèn 1 ảnh thay cho video, bấm vào ảnh thì nó mới tải video.
Điều này làm cho web tải nhẹ hơn, so với chèn video trực tiếp bằng Video Module trong Beaver Builder.
36. Tùy chỉnh Caldera Forms
Tùy chỉnh màu chữ (placeholder), màu viền, màu nút submit và vài trường input cơ bản. Nhớ đặt kl-cff vào mục Custom Class khi tạo Form.
.kl-submit input[type="submit"] {
color: #fff !important;
background: #008000;
border-color: #008000;
border-radius: 0;
text-transform: uppercase;
font-weight: 500;
font-size: 18px;
}
.kl-cff input {
background: transparent !important;
border-color: #fff !important;
border-radius: 0 !important;
}
.kl-cff input::placeholder {
color: #fff !important;
}
37. Chèn viền trang trí dưới Heading
Nhớ đặt class là kl-vien cho Heading Module. Và thay thế link ảnh trong background: url
.kl-vien .fl-heading:after {
content: "";
background: url(https://2019.themevi.com/bdsone2/wp-content/uploads/sites/3/2019/09/viengreen.png) no-repeat center center;
display: block;
background-size: contain;
width: 150px;
height: 18px;
margin: 0 auto;
margin-top: 10px;
}
38. Thêm icon vào danh sách
Có thể sử dụng Icon Module thay thế, nhưng hơi chậm nếu cần sửa danh sách nhiều. Xài Text Editor Module, sau đó đặt class là kl-list và sử dụng CSS dưới.
.kl-list ul {
list-style-type: none;
margin-left: 5px;
}
.kl-list ul li:before {
content: "\f00c";
font-family: "Font Awesome 5 Free";
font-weight: bold;
border: 1px solid #008000;
border-radius: 50%;
padding: 1px;
font-size: 11px;
margin-right: 5px;
color: #008000;
}
Ảnh đại diện: IIona IIyes/Pixabay