Cách thêm lưới ba cột vào trang

Có nhiều chủ đề WordPress sử dụng ba (hoặc nhiều hơn) tiện ích con hoặc khu vực tiện ích con trên trang chủ, cho các bài đăng trên blog, các trang nổi bật hoặc cho một danh mục đầu tư. Chúng thường được tạo kiểu theo chủ đề. Nhưng nếu bạn muốn thêm ba phần vào một trang hoặc bài đăng thông thường, có lẽ để liệt kê dịch vụ hoặc bảng giá?

Hướng dẫn này sẽ chỉ cho bạn cách thêm lưới ba chiều vào một trang có hình ảnh, tiêu đề, nội dung và liên kết, bằng cách sử dụng các lớp cột. Bạn cũng có thể sử dụng bất kỳ kích thước hình ảnh chủ đề bổ sung nào mà bạn đã thêm vào trình chỉnh sửa bài đăng trước đó.

Các chủ đề con của Genesis có các lớp cột giúp bố trí chủ đề. Bạn có thể sử dụng các lớp cột chủ đề trong các bài đăng hoặc trang của mình. Nếu bạn đang sử dụng một chủ đề không có các lớp cột, bạn có thể sử dụng một plugin, chẳng hạn như Genesis Easy Columns hoặc Grid Columns. Genesis Easy Columns hoạt động trong tất cả các chủ đề và thêm các nút vào trình chỉnh sửa bài đăng của bạn, để bạn có thể thêm các lớp cột Genesis dưới dạng mã ngắn mà không cần chuyển sang tab Văn bản. Bạn có thể đọc thêm về cách sử dụng Cột lưới để thêm mã ngắn cho các cột.

Bước 1: Tạo lưới cột

Bước đầu tiên là tạo một lưới cột với các mã ngắn của mã hoặc plugin. Đối với bước này, bạn sẽ muốn nhấp vào tab Văn bản trong trình chỉnh sửa bài đăng.
  1. Nếu bạn có tùy chọn để chọn mẫu trang có chiều rộng đầy đủ, hãy làm như vậy. Đối với các chủ đề Genesis, có Cài đặt Bố cục bên dưới cửa sổ trình chỉnh sửa để chọn bố cục trang của bạn. Chọn hình ảnh cuối cùng; thường đó là bố cục toàn chiều rộng.
  2. Sao chép mã bên dưới và dán vào trình chỉnh sửa bài đăng (khi ở trên tab Văn bản)
  3. Nhấp vào nút Lưu bản nháp.
  4. Bây giờ bạn có thể chuyển trở lại trình chỉnh sửa trực quan.
  5. Lưu ý rằng bạn sẽ thay thế "Nội dung" bằng thông tin dịch vụ của mình.
<!-- Add HTML below to post editor using Text tab -->
<div class="one-third first">Content</div>
<div class="one-third">Content</div>
<div class="one-third">Content</div> Add HTML below to post editor using Text tab -->

Bước 2. Thêm hình ảnh

  1. Đặt con trỏ của bạn ngay trước “Nội dung”. Sử dụng nút Thêm phương tiện để chọn kích thước hình ảnh sẽ vừa với một phần ba chiều rộng bài đăng của bạn.
  2. Đối với các chủ đề Genesis, bạn có thể chọn một trong các kích thước hình ảnh trang chủ. Nếu bạn đã làm theo ví dụ cho chủ đề Executive Pro vào tuần trước, bạn sẽ chọn Kích thước nhà.
  3. Bạn có thể chọn bất kỳ căn chỉnh nào, bạn thích; thường là Căn chỉnh> Căn giữa hoặc Không có.

Bước 3. Thêm văn bản tiêu đề

  1. Tiếp theo dấu cách con trỏ của bạn xuống một dòng mới.
  2. Bạn có thể thêm tiêu đề cho các dịch vụ của mình.
  3. Đặt nó thành Tiêu đề bằng cách sử dụng Trình chỉnh sửa thả xuống.
  4. H2 hoặc H4 là kích thước tiêu đề tốt cho tiêu đề của bạn.

Bước 4. Thêm một số văn bản

  1. Khoảng trắng con trỏ của bạn xuống một dòng mới.
  2. Bây giờ bạn có thể thêm văn bản của mình.
  3. Bạn có thể muốn làm cho văn bản trong ba cột của mình có cùng độ dài, nhưng không cần chính xác.

Bước 5. Thêm một liên kết đến một trang khác

  1. Dấu cách con trỏ của bạn xuống một lần nữa.
  2. Lần này thêm một số văn bản sẽ liên kết đến một trang khác.
  3. Hãy tiếp tục và xóa từ “Nội dung”, nếu bạn chưa xóa.
  4. Sử dụng các biểu tượng liên kết trong trình chỉnh sửa để liên kết đến trang của bạn.

Bước 6. Thêm một số kiểu (Tùy chọn)

Lưới ba ngang hẳn đã trông tuyệt vời vì tất cả các kiểu cần thiết đã có trong chủ đề của bạn (hoặc plugin lưới).

Nếu bạn muốn thêm đường viền và thêm một số phần đệm, bạn có thể thêm CSS bên dưới vào trình chỉnh sửa CSS tùy chỉnh hoặc vào style.css của bạn. Bạn có thể làm cho số đệm lớn hơn một chút và bạn có thể thay đổi chiều rộng đường viền (1px) hoặc màu (#ccc)

.one-third {
  border: 1px solid #ccc;
  padding: 10px;
}

Tất nhiên, bạn có thể thêm bất kỳ phong cách nào khác mà bạn thích.

Bạn có thể cần thêm và thêm lớp vào các lớp cột của mình, nếu bạn thêm các kiểu bổ sung, để giữ cho các kiểu đó không làm thay đổi cách hiển thị của các trang khác.
Trong trường hợp đó, bạn sẽ thêm một lớp .services (bạn có thể sử dụng bất cứ thứ gì bạn muốn.) Và HTML sẽ là:

<!-- Add HTML below to post editor using Text tab -->
<div class="one-third services first">Content</div>
<div class="one-third services">Content</div>
<div class="one-third services">Content</div>

Và CSS sẽ là:

.one-third.services {
  border: 1px solid #ccc;
  padding: 10px;
}

Bước 7. Thêm một số kiểu vào WordPress Editor (Tùy chọn)

Nếu bạn muốn trình chỉnh sửa WordPress của mình phản ánh các kiểu cột, bạn có thể thêm một biểu định kiểu trình chỉnh sửa vào chủ đề của mình. Chỉ cần làm theo cùng với Trình chỉnh sửa WYSIWYG WordPress của bạn có thể phản ánh các kiểu chủ đề của bạn