Cách sắp xếp các widget trong các cột trong Infinity Pro bằng CSS

Thủ thuật WordPress
#1

Trong nhóm Genesis Facebook, một người dùng đã hỏi:

Có ai biết về bất kỳ liên kết nào đến các hướng dẫn về cách tạo một khu vực tiện ích trên Front-Page trong Infinity Pro thành các cột chiều rộng 1/3 và chiều rộng 2/3 cạnh nhau không? Tôi đã đi vòng tròn với nó cả ngày và não của tôi bắt đầu tan chảy / Cảm ơn!

Chúng ta có thể dễ dàng hiển thị các widget có mặt, chẳng hạn như khu vực widget Front Trang 2 của Infinity Pro theo cách sắp xếp 1/3 - 2/3 bằng cách sử dụng CSS Grid.

Bước 1

Trong front-page.php của Infinity Pro, xóa lớp CSS khỏi mã hiển thị khu vực widget Front Page 2.flexible-widgets

Thay đổi

genesis_widget_area( 'front-page-2', array(
    'before' => '<div id="front-page-2" class="front-page-2"><div class="solid-section flexible-widgets widget-area fadeup-effect' . infinity_widget_area_class( 'front-page-2' ) . '"><div class="wrap">',
    'after'  => '</div></div></div>',
) );

đến

genesis_widget_area( 'front-page-2', array(
    'before' => '<div id="front-page-2" class="front-page-2"><div class="solid-section widget-area fadeup-effect' . infinity_widget_area_class( 'front-page-2' ) . '"><div class="wrap">',
    'after'  => '</div></div></div>',
) );

Bước 2

Thêm phần sau vào style.css :

@media only screen and (min-width: 801px) {
    .front-page-2 {
        text-align: justify;
    }

    .front-page-2 .wrap {
        display: -ms-grid;
        display: grid;

        grid-gap: 100px;
        -ms-grid-columns: 1fr 2fr;
            grid-template-columns: 1fr 2fr;
    }

    .front-page-2 .wrap:before,
    .front-page-2 .wrap:after {
        display: none;
    }
}

@media only screen and (max-width: 800px) {
    .front-page-2 .widget:first-child {
        margin-bottom: 100px;
    }
}