Tạo khu vực tiện ích con 4 cột ở chân trang

Thông thường các chủ đề SP đang hỗ trợ khu vực tiện ích 3 cột footer. Trong bài viết này, tôi sẽ hướng dẫn các bạn cách tạo vùng widget 4 cột footer với hiệu ứng responsive.

Đầu tiên, mở tệp functions.php trên trình chỉnh sửa Chủ đề (Dashboard-> Appearance-> Editor) hoặc tải tệp xuống qua FTP / File Manager và mở nó trên Notepad + hoặc bất kỳ trình chỉnh sửa PHP nào. Trong các chủ đề tối đa, bạn sẽ nhận được dòng này

add_theme_support( 'genesis-footer-widgets', 3 );

Thay đổi giá trị 3 thành 4.

Nếu chủ đề của bạn không hỗ trợ các tiện ích chân trang thì hãy thêm dòng này vào tệp

add_theme_support( 'genesis-footer-widgets', 4 );

Bây giờ bạn cần sửa đổi tệp style.css.

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.footer-widgets-4 {
  width: 23.076923076923077%;
  float: left;
  margin-left: 2.5%;
}
.footer-widgets-1 {
  margin-left: 0px;
}
@media only screen and (max-width: 1139px) {
   .footer-widgets-1,
   .footer-widgets-2,
   .footer-widgets-3,
   .footer-widgets-4{
     width: 48.717948717948715%;
   }
  .footer-widgets-1,
  .footer-widgets-3 {
     margin-left: 0px;
  }
}
@media only screen and (max-width: 1023px) {
 .footer-widgets-1,
 .footer-widgets-2,
 .footer-widgets-3,
 .footer-widgets-4 {
   width: 100%;
   float: none;
   margin-left: 0;
 }
}