VietNetwork.Vn

Bạn có muốn thêm hoặc xóa không gian trống giữa các khối WordPress không?

Thêm hoặc xóa không gian trống giữa các khối WordPress của bạn cho phép bạn kiểm soát nhiều hơn thiết kế trang web WordPress của mình.

Trong bài viết này, mình sẽ hướng dẫn bạn cách thêm hoặc xóa khoảng trống giữa các khối WordPress theo từng bước.

Tại sao phải thêm hoặc xóa khoảng trống giữa các khối WordPress?

WordPress giúp tạo các trang và bài đăng tùy chỉnh dễ dàng với trình chỉnh sửa khối WordPress tích hợp sẵn.

Tuy nhiên, bạn có thể nhận thấy rằng khi bạn thêm các khối nhất định, có quá nhiều hoặc quá ít khoảng cách. Bằng cách thêm hoặc xóa không gian trống giữa các khối WordPress của bạn, bạn có thể tạo bố cục trang tùy chỉnh chính xác như bạn muốn.

Với nhiều quyền kiểm soát hơn đối với thiết kế trang web WordPress cuối cùng của mình, bạn có thể cung cấp cho khách truy cập trải nghiệm người dùng tốt hơn.

Chúng ta hãy xem cách thêm hoặc xóa khoảng trống giữa các khối WordPress trên trang web của bạn. Chỉ cần sử dụng các liên kết nhanh bên dưới để chuyển thẳng đến phương pháp bạn muốn sử dụng.

• Thêm không gian trống với trình chỉnh sửa khối WordPress
• Thêm hoặc xóa không gian trống bằng cách thêm mã vào WordPress
• Thêm hoặc xóa không gian trống với CSS Hero
• Thêm hoặc xóa không gian trống với SeedProd

1. Phương pháp 1. Thêm khoảng trống giữa các khối WordPress bằng trình chỉnh sửa khối

Cách dễ nhất để thêm khoảng trống giữa các khối của bạn là sử dụng trình chỉnh sửa khối WordPress. Có một khối khoảng cách tích hợp cho phép bạn thêm khoảng trống bằng một vài cú nhấp chuột.

Để sử dụng điều này, hãy mở bài đăng hoặc trang bạn muốn chỉnh sửa và nhấp vào nút khối thêm 'Plus'.

Sau đó, tìm kiếm 'Spacer' và chọn khối.


Thao tác này sẽ tự động chèn một khoảng đệm vào trang.

Bạn có thể làm cho nó lớn hơn hoặc nhỏ hơn bằng cách kéo khối lên hoặc xuống.


Sau khi bạn hoàn tất, hãy nhấp vào nút 'Update' để lưu các thay đổi của bạn.

Hãy nhớ rằng, phương pháp này chỉ cho phép bạn thêm khoảng cách giữa các khối. Để xóa khoảng trống, bạn sẽ cần sử dụng một trong các phương pháp khác bên dưới.

2. Phương pháp 2. Thêm hoặc xóa khoảng trống giữa các khối WordPress bằng cách thêm CSS tùy chỉnh

Một cách khác để thêm và xóa không gian trống giữa các khối của bạn là thêm mã CSS tùy chỉnh vào giao diện của bạn.

Nếu bạn chưa làm điều này trước đây, thì mình khuyên bạn nên xem hướng dẫn của mình về cách dễ dàng thêm CSS tùy chỉnh vào trang web WordPress của bạn trước khi bắt đầu.

Tiếp theo, mở trang hoặc bài đăng bạn muốn chỉnh sửa, sau đó nhấp vào khối mà bạn muốn thêm hoặc xóa khoảng trống.

Sau đó, nhấp vào mục menu 'Block' trong bảng tùy chọn bên tay phải.


Sau đó, cuộn xuống menu thả xuống 'Advanced' và nhấp vào nó. Thao tác này sẽ đưa ra một tập hợp các tùy chọn bổ sung cho khối đó.

Sau đó, trong hộp 'Additional CSS classes', hãy thêm mã sau:

.add-remove-bottom-space
Đoạn mã này tạo một lớp CSS mới dành riêng cho khối đó.


Sau đó, nhấp vào nút 'Update' để lưu các thay đổi của bạn.

Tiếp theo, điều hướng đến Appearance >> Customize để hiển thị tùy biến giao diện WordPress.


Sau đó, cuộn xuống và nhấp vào tùy chọn menu 'Additional CSS'.

Thao tác này sẽ hiển thị một trường mà bạn có thể thêm mã CSS.


Tiếp theo, dán đoạn mã sau vào hộp.

.add-remove-bottom-space {
 
 margin-bottom: 0;
 
}
Đoạn mã này đặt lề dưới bằng 0 và sẽ xóa khoảng trống khỏi khối. Nếu bạn muốn thêm không gian ở dưới cùng, thì chỉ cần thay đổi '0' thành '20px'.


Sau khi bạn đã thực hiện các thay đổi của mình, hãy đảm bảo nhấp vào nút 'Publish' để thực hiện các thay đổi của bạn.

Lưu mã CSS tùy chỉnh bằng plugin

Bằng cách thêm CSS tùy chỉnh vào tùy biến giao diện WordPress, nó sẽ chỉ lưu cho giao diện bạn hiện đang sử dụng. Nếu bạn thay đổi giao diện WordPress, thì bạn sẽ cần sao chép mã CSS sang giao diện mới của mình.

Nếu bạn muốn CSS tùy chỉnh của mình áp dụng cho dù bạn đang sử dụng giao diện nào, thì bạn sẽ cần sử dụng plugin  Simple Custom CSS.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin. Để biết thêm chi tiết, hãy xem hướng dẫn của mình về cách cài đặt plugin WordPress.

Khi kích hoạt, chỉ cần đi tới Appearance >> Custom CSS và thêm mã CSS tùy chỉnh của bạn.


Khi bạn hoàn tất, hãy nhấp vào nút 'Update Custom CSS' để lưu các thay đổi của bạn.

3. Phương pháp 3. Thêm hoặc xóa khoảng trống giữa các khối WordPress với CSS Hero

Một cách khác thân thiện với người mới bắt đầu để thêm hoặc xóa khoảng trống giữa các khối WordPress là sử dụng plugin CSS tùy chỉnh của WordPress. Điều này cho phép bạn thực hiện các thay đổi trực quan cho blog WordPress của mình mà không cần chỉnh sửa bất kỳ mã CSS nào.

Mình khuyên bạn nên sử dụng plugin CSS Hero. Nó cho phép bạn chỉnh sửa hầu hết mọi kiểu CSS trên trang web WordPress của mình mà không cần viết một dòng mã nào.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin. Để biết thêm chi tiết, hãy xem hướng dẫn dành cho người mới bắt đầu của mình về cách cài đặt plugin WordPress.


Khi kích hoạt, bạn cần nhấp vào nút 'Proceed to Product Activation' để kích hoạt plugin. Bạn sẽ tìm thấy nút ngay phía trên danh sách các plugin đã cài đặt.

Thao tác này sẽ đưa bạn đến màn hình nơi bạn cần nhập tên người dùng và mật khẩu của mình. Sau đó, làm theo hướng dẫn trên màn hình và bạn sẽ được chuyển hướng trở lại trang tổng quan sau khi tài khoản của bạn được xác minh.

Tiếp theo, bạn cần mở trang hoặc bài đăng mà bạn muốn chỉnh sửa, sau đó nhấp vào nút 'CSS Hero' ở đầu thanh công cụ quản trị WordPress của bạn.


Thao tác này sẽ mở ra cùng một trang với CSS Hero chạy trên đó. Plugin sử dụng trình chỉnh sửa trực quan, vì vậy bạn sẽ có thể thực hiện các thay đổi của mình trong thời gian thực.

Khi bạn nhấp vào bất kỳ phần tử nào trên trang của mình, nó sẽ hiển thị một thanh công cụ ở bên trái của trang để bạn thực hiện các tùy chỉnh.


Để xóa hoặc thêm khoảng trống giữa các khối của bạn, chỉ cần nhấp vào tùy chọn 'Spacings' và sau đó cuộn xuống phần 'Margin-Bottom'.

Tại đây, bạn có thể di chuyển thanh trượt lên hoặc xuống để thêm hoặc xóa không gian trống.


Bất kỳ thay đổi nào bạn thực hiện sẽ tự động hiển thị trên trang của bạn.

Sau khi thực hiện xong các thay đổi, bạn cần nhấp vào nút 'Save' để thực hiện các thay đổi của mình.

4. Phương pháp 4. Thêm hoặc xóa khoảng trống giữa các khối WordPress với SeedProd

SeedProd là trình tạo trang kéo và thả tốt nhất được hơn 1 triệu trang web sử dụng.


Bạn có thể sử dụng thư viện gồm hơn 150 mẫu để tạo các trang 404 tùy chỉnh, trang bán hàng, trang đích và hơn thế nữa. SeedProd thậm chí có thể được sử dụng để tạo giao diện WordPress tùy chỉnh mà không cần viết bất kỳ mã nào.

Với trình tạo kéo và thả, bạn có toàn quyền kiểm soát thiết kế trang web của mình và bạn có thể dễ dàng xóa hoặc thêm khoảng cách vào bất kỳ phần tử trang web nào.

Để tìm hiểu thêm, hãy xem hướng dẫn của mình về cách tạo trang tùy chỉnh trong WordPress.

Khi bạn đang tùy chỉnh trang của mình, bạn có thể thêm không gian ở bất kỳ đâu bằng cách sử dụng khối Khoảng cách.


Chỉ cần kéo và thả nó vào bất kỳ vị trí nào trên trang mà bạn muốn thêm không gian giữa các khối.

Sau đó, bạn có thể sử dụng thanh trượt để điều chỉnh chiều cao của nó.


Bạn cũng có thể kiểm soát khoảng cách giữa bất kỳ khối nào. Để làm điều đó, chỉ cần nhấp vào bất kỳ khối nào mà bạn muốn thêm hoặc xóa không gian.

Thao tác này sẽ hiển thị bảng tùy chọn ở bên trái. Sau đó, nhấp vào tab 'Advanced'.


Tiếp theo, cuộn xuống menu thả xuống 'Spacing' và nhấp vào nó.

Thao tác này sẽ hiển thị một menu nơi bạn có thể kiểm soát 'Margin'. Chỉ cần nhập một số vào hộp lề dưới cùng để thêm khoảng trắng hoặc xóa số để xóa bất kỳ khoảng trống hiện có nào.


Sau khi bạn thực hiện xong các thay đổi, hãy nhấp vào nút 'Save' và chọn trình đơn thả xuống 'Publish' để thực hiện các thay đổi của bạn.


Mình hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm hoặc xóa khoảng trống giữa các khối WordPress. Bạn cũng có thể muốn xem hướng dẫn của mình về cách bắt đầu podcast của riêng bạn và các chuyên gia lựa chọn dịch vụ lưu trữ trang web miễn phí tốt nhất được so sánh.