Hướng Dẫn Một Số Thao Tác Với Rows (Hàng) Trong Beaver Builder

Bạn có thể thêm các Rows trong Beaver Builder, tùy chỉnh chiều cao, hiệu ứng hàng,… trong vài thao tác đơn giản. Cùng tôi tìm hiểu ngay trong bài viết nhé!

Các Rows trong Beaver Builder sẽ giúp bố cục trang của bạn đẹp mắt, chuyên nghiệp hơn. Nếu như bạn chưa biết cách tùy chỉnh hàng trong Beaver Builder. Bài viết của tôi hôm nay thật sự phù hợp với bạn.

Có thể bạn quan tâm:

Hướng dẫn sử dụng một vài thao tác cơ bản với Beaver Builder

Hướng dẫn sử dụng Templates trong Beaver Builder

Thêm các hàng dựng sẵn

Bạn có thể chọn từ hàng chục Row dựng sẵn để thêm vào bố cục của mình và sửa đổi theo ý muốn. Hình ảnh xuất hiện không được lưu trữ trong thư viện phương tiện của bạn. Vì vậy bạn sẽ muốn thay thế những hình ảnh đó. Văn bản là mặc định cho trang Web của bạn và phần Kiểu chữ mới sẽ cho phép bạn tùy chỉnh cài đặt văn bản trên Tab Style.

Để truy cập các hàng dựng sẵn, trên Tab Hàng của bảng Nội dung. Bạn hãy chọn nhóm Hàng dựng sẵn (Prebuilt Rows). Sau đó, bạn bấm vào một danh mục để xem hình thu nhỏ của hàng. Cuối cùng, bạn kéo một cái vào bố cục của bạn và sửa đổi theo ý muốn.

Làm việc với các Rows trong Beaver Builder

Các tùy chọn Row Layout có sẵn trên bất kỳ trang nào bạn tạo bằng Beaver Builder. Tôi sẽ hướng dẫn bạn truy cập chúng một cách đơn  giản:

• Ở góc trên bên phải, bạn nhấp vào + (dấu cộng) để hiển thị bảng Nội dung, sau đó nhấp vào Tab Hàng
• Để bắt đầu làm việc trên một bố cục mới, bạn hãy kéo và thả một Row Layout mà bạn chọn vào trang.

• Bạn rê chuột qua hàng bạn vừa kéo vào trang để xem các biểu tượng hiển thị các hành động có sẵn cho hàng đó.

Theo đó, bạn có thể:

• Di chuyển hàng bằng cách nhấp vào biểu tượng Di chuyển và kéo hàng đó.
• Chỉnh sửa cài đặt bằng cách nhấp vào biểu tượng Cài đặt hàng.
• Nhân đôi hàng.
• Đặt lại độ rộng cột cho toàn bộ hàng hoặc Đặt lại độ rộng hàng.
• Xóa hàng.

Full Width và Fixed Width

Khi tạo một Rows trong Beaver Builder. Bạn có thể chỉ định xem hàng đó có chiều rộng đầy đủ (Full Width) hay chiều rộng cố định (Fixed Width). Nếu bạn đặt hàng thành chiều rộng đầy đủ. Bạn cũng có thể lựa chọn nội dung của hàng là chiều rộng đầy đủ hay chiều rộng cố định. Tôi sẽ phân tích một ví dụ cụ thể để bạn dễ hình dung hơn nhé. Hãy xem hình bên dưới:

Hàng 1: Hàng có chiều rộng đầy đủ, nội dung có chiều rộng đầy đủ. Nền của hàng sẽ kéo dài đến chiều rộng đầy đủ của trình duyệt hoặc chiều rộng đầy đủ của vùng nội dung trên trang, một lựa chọn do chủ đề tự thiết lập. Khi nội dung cũng được đặt thành toàn bộ chiều rộng. Nó cũng sẽ kéo dài ra toàn bộ chiều rộng của màn hình hoặc khu vực được đóng khung. Với cài đặt này, bạn sẽ sử dụng lề và phần đệm của hàng, cột hoặc mô-đun để di chuyển cột hoặc nội dung ra khỏi các cạnh trái và phải của trang.

Hàng 2: Hàng có chiều rộng đầy đủ, nội dung có chiều rộng cố định. Cài đặt chiều rộng cố định mặc định là 1100px, nhưng bạn có thể thay đổi cài đặt này. Trong ví dụ này, tôi đặt chiều rộng nội dung thành 800px. Điều này có nghĩa là không có lề hoặc đệm, cột và mô-đun có chiều rộng 800px và được căn giữa theo chiều ngang của trang. Trong ví dụ được hiển thị trong ảnh ở trên, tiêu đề và văn bản được căn trái trong chiều rộng nội dung đó.

Hàng 3: Hàng có độ rộng cố định. Điều này có nghĩa là nền hàng sẽ kéo dài đến chiều rộng tùy chỉnh mà bạn chỉ định hoặc đến giá trị toàn cục mà bạn đã đặt cho chiều rộng hàng, hoặc đến chiều rộng cố định mặc định là 1100px. Cài đặt chiều rộng cố định là chiều rộng tối đa. Nội dung sẽ tự động được đặt thành cùng chiều rộng trừ mọi cài đặt lề và phần đệm. 

Set chiều rộng của hàng và nội dung

Có một số cách để điều chỉnh cài đặt chiều rộng của hàng và nội dung. Tôi sẽ hướng dẫn chi tiết ngay trong mục này.

• Cài đặt hàng (Row Settings)

Nếu Chiều rộng hàng được đặt thành Chiều rộng cố định, bạn có thể đặt chiều rộng tối đa cho hàng đó, theo đơn vị Pixel hoặc phần trăm chiều rộng khung nhìn/phần trăm của cài đặt gốc CSS. 

Nếu Chiều rộng Rows trong Beaver Builder được thiết lập Full Width, bạn sẽ có một tùy chọn để thiết lập chiều rộng nội dung để chiều rộng đầy đủ hoặc cố định. Nếu chiều rộng nội dung được đặt thành Cố định. Bạn sẽ có tùy chọn đặt chiều rộng tối đa cho nội dung.

Nếu chiều rộng hàng hoặc nội dung được đặt thành Cố định. Bạn có thể thay đổi chiều rộng tối đa của hàng bằng cách di chuyển Drag Handle. Khi một hàng có một cột, có một chốt kéo chiều rộng hàng ở cả hai bên. Nếu hàng có hai cột, phía bên ngoài của hộp nội dung là một chốt kéo hàng và phía bên trong là một chốt kéo cột, như được hiển thị trong ảnh chụp tôi để bên dưới.

Nếu bạn không thấy Drag Handle, điều đó có nghĩa là cả hàng và cột đều được đặt thành chiều rộng đầy đủ. 

Khi bạn nhấp và giữ Drag Handle, vùng chọn sẽ thay đổi để bao gồm toàn bộ nội dung của hàng. 

Set độ rộng mặc định của hàng cho toàn trang Web (Site-Wide)

• Trong trình chỉnh sửa Beaver Builder, bạn nhấp vào thanh tiêu đề ở góc trên bên trái để hiển thị Menu Công cụ. Sau đó, bạn chọn Cài đặt chung hoặc chỉ sử dụng phím tắt ⌘+ U (macOS) hoặc Ctrl+ U(Windows).
• Bạn di chuyển đến Section Rows.
• Đối với Chiều rộng tối đa, bạn hãy đặt con số nhất định cho px hoặc vw (mỗi đơn vị là 1% của chế độ xem, trong trường hợp này có nghĩa là chiều rộng trình duyệt). Tôi muốn lưu ý với bạn rằng thay đổi này sẽ áp dụng cho các hàng mới và tất cả các hàng hiện có trong trang Web của bạn, nếu chúng có hàng cố định hoặc chiều rộng nội dung cố định và cài đặt chiều rộng tối đa mặc định. 
• Đối với Chiều rộng hàng mặc định, bạn có thể Full Width hoặc Fixed Width.
• Nếu chiều rộng hàng mặc định của bạn được thiết lập Full Width. Hãy thiết lập chiều rộng hàng nội dung mặc định là Full Width hoặc Fixed Width.
• Cuối cùng, bạn nhấp vào Lưu.

Full-Width Rows trên các Theme thuộc bên thứ 3

Nếu bạn sử dụng chủ đề của bên thứ ba. Bạn có thể cần thêm một số CSS bổ sung để các Rows trong Beaver Builder có chiều rộng đầy đủ. Bạn có thể thử thực hiện theo cách của tôi sau đây.

Trước tiên, bạn hãy tìm ID hoặc Class Name của trình bao bọc nội dung (Content Wrapper) của Theme. Nếu bạn xem nguồn HTML cho một trang, trình bao bọc nội dung thường là Tag <div> xuất hiện sau khối tiêu đề. Nó thường sử dụng ID hoặc Class với Selector Content.

Tiếp theo, bạn viết quy tắc cho Class fl-builder với Content Wrapper ID đó hoặc lớp bên trong nó. Nếu id=”content” là bộ chọn cho trình bao bọc nội dung của bạn, thì quy tắc sẽ giống như sau:

.fl-builder # content {  
  đệm : 0 ; 
  lề : 0 ; 
  max-width : không có ;
  chiều rộng : tự động ;
}

Tùy chỉnh chiều cao của hàng

Theo như tôi được trải nghiệm, trong cài đặt hàng, có ba lựa chọn cho chiều cao hàng như sau:

• Mặc định: Chiều cao hàng điều chỉnh để phù hợp với nội dung.
• Chiều cao đầy đủ: Chiều cao hàng lấp đầy chiều cao của cửa sổ trình duyệt.
• Chiều cao tối thiểu: Chiều cao hàng sẽ đạt giá trị tối thiểu bằng giá trị được bạn nhập vào sử dụng px, vh và vw. 

Hiệu ứng của hàng

Bạn có thể tạo nhiều hiệu ứng cho Rows trong Beaver Builder để nội dung nổi bật, trang Web đẹp mắt hơn. Tôi sẽ thống kê vài hiệu ứng được sử dụng phổ biến để các bạn tham khảo nhé.

Row Shape Overlays

Bạn có thể thêm và tùy chỉnh các Shape Layers trên các hàng. Theo mặc định, các hàng có thể được gán tối đa hai Shape Layers. Shape Settings xuất hiện bên dưới phần Viền trên Tab Style của hàng .

Sau khi bạn chọn một Shape, bạn có thể thực hiện các tùy chỉnh về chiều rộng, chiều cao, Y Offset (vị trí dọc), căn chỉnh trong hàng, tô màu hoặc tô màu Gradient,..

Tác dụng của các cài đặt này là bạn có thể sửa đổi và di chuyển các Shape hầu như ở bất kỳ vị trí nào trong hàng.

Nền Video cho hàng trong Beaver Builder

Để vào phần cài đặt hàng cho Video nền, bạn mở cài đặt của hàng và trên Tab Style, bạn cuộn đến phần Nền. Trong trường Type, bạn hãy chọn Video.

Tôi sẽ giải thích cụ thể hơn các tùy chọn  trên hình.

• Video nền (Background Video): Chỉ định nguồn của Video cùng với các cài đặt khác liên quan đến cách thức và vị trí Video phát. 
• Lớp phủ nền: Phủ màu nửa trong suốt lên Video.
• Màu nền: Đặt màu nền hiển thị cho đến khi tải hình ảnh dự phòng hoặc Video. Tùy thuộc vào thời gian tải, màu nền có thể không xuất hiện hoặc có thể nhấp nháy trong giây lát.
• Đường viền (Border): Cài đặt đường viền tiêu chuẩn xung quanh hàng, bao gồm hiệu ứng Raius và bóng đổ .
• Bottom Shape, Top Shape, Shape Container: Thêm lớp phủ hình dạng vào cạnh trên hoặc cạnh dưới của hàng.

Trong phần Video nền, tại trường Nguồn bạn chỉ định một trong các nguồn sau: Thư viện phương tiện, URL, Youtube hoặc Vimeo.

Sử dụng màu nền và hiệu ứng

Có nhiều cách để thêm màu sắc và hiệu ứng màu sắc cho hình nền. Sau đây, tôi sẽ gợi ý một số ý tưởng màu nền và hiệu ứng. Chúng tuy đơn giản nhưng mang lại hiệu quả thẩm mỹ khá tốt.

• Màu đồng nhất: Nền hàng hoặc cột là một màu đồng nhất. Dưới đây là hình ảnh minh họa về nền hàng màu xanh đậm sau mô-đun kêu gọi hành động.

Bạn cũng có thể thực hiện các biến thể của nền hàng đồng màu.

• Thay đổi độ mờ: Nếu bạn đang làm việc với một bảng màu đã xác định. Hãy thử thay đổi một trong các nền hàng hoặc cột trong bảng màu của bạn thành độ mờ nhẹ hơn một chút. Trong ảnh tôi chụp bên dưới, màu xanh lam từ ảnh chụp màn hình trước được đặt thành độ mờ 80% để tạo ra sự khác biệt nhỏ.

• Thêm một Gradient: Bạn có thể sử dụng các Gradient màu trong nền hàng. Hình bên dưới minh họa về mô-đun kêu gọi hành động được bao quanh bởi một Gradient xuyên tâm. Bạn cũng có thể tạo các Gradient phức tạp tại các trang Web của bên thứ ba và thêm chúng bằng CSS.

• Thêm Row Shape Overlay: Bạn có thể thêm một Shape vào một cạnh hàng được cố định liên quan đến đường viền trên cùng hoặc dưới cùng của hàng. Bạn có thể tạo kiểu và biến đổi hình dạng theo nhiều cách khác nhau, chẳng hạn như lật theo chiều ngang và chiều dọc và thay đổi độ lệch Y. Tôi sẽ đưa ra hình ảnh ví dụ cụ thể trong hình ảnh bên dưới. Lớp phủ lõm ở đường viền trên cùng với màu nền bán trong suốt, kết hợp lớp phủ Gradient xuyên tâm tạo ra hiệu ứng vầng hào quang khá đẹp mắt.

Nền Parallax

Nền Parallax có thể áp dụng với cả hình ảnh nền và nội dung nền trước khi cuộn, nhưng ở các tốc độ khác nhau. Hiệu ứng Parallax rất nổi bật. Tuy nhiên, tôi khuyên bạn không nên lạm dụng nó. Bởi tôi tin rằng bạn sẽ không muốn khách truy cập của mình bị mê hoặc bởi chuyển động trên trang mà không chú ý đến nội dung của mình đúng không!

Để tạo Parallax Row Background, bạn thực hiện các bước sau nhé:

• Bạn mở cài đặt hàng.
• Trên tab Style, bạn cuộn đến phần Nền. Trong trường Type, bạn chọn Parallax.
• Phần nền Parallax sẽ mở ra với nhiều tùy chọn hơn.
• Bạn có thể chọn ảnh để sử dụng cho nền hàng.
• Kế đến, bạn chọn tốc độ mà mình  muốn hình nền cuộn.

Tạo hiệu ứng Ken Burns trong nền của hàng

Hiệu ứng Ken Burns bắt đầu bằng việc triển khai trình chiếu dưới dạng nền hàng với tối thiểu hai hình ảnh. Đây là một trong những hiệu ứng của Rows trong Beaver Builder mà tôi khá yêu thích. Bạn có thể thực hiện theo các bước sau để tạo hiệu ứng Ken Burns:

• Đầu tiên, bạn mở hàng để chỉnh sửa trong trình chỉnh sửa Beaver Builder.
• Trong phần Nền, đối với Type bạn hãy chọn Trình chiếu (Slideshow).
• Trong trường Ảnh, bạn hãy nhấp vào Thêm ảnh và tạo thư viện với ít nhất hai hình ảnh.
• Tiếp  đến, bạn có thể đặt Tốc độ (Speed) thành số giây bạn muốn mỗi hình ảnh hiển thị.
• Đối với Chuyển đổi (Transition), bạn chọn Ken Burns.
• Bước tiếp theo, tại Tốc độ chuyển đổi (Transition Speed) bạn đặt thành số giây mà mỗi ảnh sẽ dừng lại trước khi chuyển sang ảnh tiếp theo.
• Nếu bạn muốn ảnh hiển thị ngẫu nhiên thay vì theo thứ tự trong thư viện. Hãy đặt tùy chọn Ảnh ngẫu nhiên (Randomize Photos) thành Có (Yes).

Có thể bạn quan tâm:

Hosting WordPress – giải pháp tối ưu nhất dành cho các Website nền tảng WordPress

Nếu có ý tưởng mới lạ về các hiệu ứng Rows trong Beaver Builder. Đừng ngại ngần để lại bình luận chia sẻ cho mọi người các bạn nhé! Hy vọng thông tin tôi mang lại sẽ giúp bạn sử dụng Beaver Builder hiệu quả hơn.