Dưới đây là một hướng dẫn về cách tạo bố cục bài viết trên blog theo bố cục kiểu bàn cờ, sử dụng hình ảnh nổi bật ở một bên và tiêu đề và nội dung bài viết ở bên kia. Điều này tương tự như cách thiết kế của Atmosphere Pro chúng ta sẽ sử dụng hình ảnh nổi bật và được cắt theo tỷ lệ vuông với độ phân giải tối đa 640px.
Bạn có thể xem demo tại đây: https://my.studiopress.com/themes/atmosphere
Bước 1: Đăng ký vùng Widgets mới
Để thực hiện được việc này trước hết bạn cần tạo một tiện ích mới trong widgets bằng cách truy cập Appearance > Customize kéo tiện ích Feature Post vào khu vực Home Contents.
Ở đây tôi chọn chuyên mục là “Check” và hiển thị 6 bài viết mới nhất, hình ảnh nổi bật được thiết lập để hiển thị phía bên trái liên kết, nhưng điều này sẽ được ghi đè trong CSS, tiêu đề bài cho thấy và có một Giới hạn nội dung là 300 ký tự. Điều quan trọng là giữ giới hạn nội dung ở mức hợp lý nếu không bố cục sẽ bị vỡ với kích thước nhỏ hơn.
Bước 2: Thiết kế CSS bàn cờ
Và dưới đây là mã CSS
.home-top {
margin: 40px auto;
}
.home-top .featured-content .entry {
padding: 0;
margin: 0 0 30px;
background: #fff;
overflow: hidden;
}
.home-top .featured-content .entry-header,
.home-top .featured-content .entry-content {
padding-left: 7.5%;
padding-right: 7.5%;
float: none;
margin-bottom: 40px;
}
.home-top .featured-content .entry-title {
display: inline-block;
}
.home-top .featured-content .entry-header {
padding-top: 6%;
clear: both;
}
.home-top .featured-content .entry-content {
padding-bottom: 1%;
}
.home-top .featured-content .entry-image {
max-width: none;
width: 100%;
float: none;
height: auto;
max-height: 360px;
}
.home-top .featured-content .entry > a {
margin: 0;
}
@media only screen and (min-width: 500px) {
.home-top .featured-content .entry-image {
float: left;
height: 600px;
max-height: none;
width: auto;
}
}
@media only screen and (min-width: 650px) {
.home-top .featured-content .entry {
margin: 0;
}
.home-top .featured-content .entry > a {
max-width: 50%;
}
.home-top .featured-content .entry-header,
.home-top .featured-content .entry-content {
width: 50%;
float: left;
margin-bottom: 0;
clear: none;
}
.home-top .featured-content .entry-image {
float: left;
height: 600px;
max-height: none;
}
.home-top .featured-content .entry:nth-of-type(even) > a {
float: right;
}
.home-top .featured-content .entry:nth-of-type(odd) > a {
float: left;
}
.home-top .featured-content .entry:nth-of-type(odd) > a .entry-image {
float: right;
}
}
Sao chép toàn bộ mã CSS bên dưới dán vào style.css
Điều quan trọng ở đây là việc sử dụng lớp CSS widget của bạn, của tôi là .home-top nếu bạn sử dụng lớp CSS khác thì có thể sửa cho đúng với theme của mình, Hình ảnh được chứa trong liên kết được chia theo tỉ lệ 50% và tiêu đề và nội dung 50%.
Chiều cao hình ảnh được cài đặt kích thước px cố định để duy trì hình dạng, nhưng chiều rộng của nó sẽ thay đổi theo chiều rộng khi xem ở kích thước di động, tôi nghĩ tốt hơn là giảm chiều cao, ban đầu tôi đặt nó ở kích thước 600px nhưng thay đổi nó thành 360px với kích thước nhỏ hơn.
