Cách thêm nút "Gọi cho chúng tôi" phía trên tiêu đề trên điện thoại di động trong Genesis

Hướng dẫn này cung cấp các bước để đăng ký một khu vực tiện ích và hiển thị một tiện ích được đặt trong đó phía trên tiêu đề theo chiều rộng di động (812px trở xuống) trong Genesis.before-header

Mặc dù hướng dẫn đã được viết cho Genesis Sample, nhưng nó sẽ hoạt động với một vài điều chỉnh trong bất kỳ chủ đề Genesis nào.

Bước 1

Thêm phần sau vào functions.php của chủ đề con :

// Register before-header widget area.
genesis_register_widget_area(
    array(
        'id'          => 'before-header',
        'name'        => __( 'Before Header', 'my-theme-text-domain' ),
        'description' => __( 'Appears above site header.', 'my-theme-text-domain' ),
    )
);

add_action( 'genesis_before_header', 'custom_above_header' );
/**
 * Display before-header widget area above site header.
 */
function custom_above_header() {
    genesis_widget_area( 'before-header', array(
        'before'    => '<div class="before-header widget-area"><div class="wrap">',
        'after'     => '</div></div>',
    ) );
}

Bước 2

Thêm phần sau vào style.css của chủ đề con :

.before-header {
    padding: 14px 0;
    display: none;
}

.before-header .wrap {
    text-align: center;
}

.before-header a.button {
    border-radius: 40px;
    padding: 10px 44px;
    margin-left: 30px;
}

.strong {
    font-weight: bold;
}

@media only screen and (max-width: 812px) {

    .before-header {
        display: block;
    }

}

@media only screen and (max-width: 546px) {

    .before-header a.button {
        margin-top: 12px;
    }

}

Bước 3

Tại Giao diện> Tiện ích, kéo tiện ích HTML tùy chỉnh vào vùng tiện ích “Trước tiêu đề” và thêm HTML Kêu gọi hành động của bạn.