Sección de bienvenida en Génesis

Sección de bienvenida con la imagen a la izquierda y un widget de texto a la derecha en Génesis.

Cómo se puede registrar un área de widget de bienvenida y lo mostrará debajo del header en Génesis . Vamos a escribir CSS responsive y mostrar una imagen a la izquierda, con un widget de texto.



Paso 1
Agregue lo siguiente en el tema hijo en functions.php :

// Register Welcome widget area
genesis_register_widget_area(
 array(
 'id' => 'welcome',
 'name' => __( 'Welcome', 'my-theme-text-domain' ),
 'description' => __( 'Welcome section below header', 'my-theme-text-domain' ),
 )
);
 
// Display Welcome widget area below header
add_action( 'genesis_after_header', function () {
 genesis_widget_area( 'welcome', array(
 'before' => '<div class="welcome widget-area"><div class="wrap">',
 'after' => '</div></div>',
 ) );
} );

Paso 2
Sube la imagen  al directorio images del tema hijo. En este ejemplo, estoy usando un 500 x 500 png transparente llamado imagen.png .

Paso 3
Agregue lo siguiente en el tema hijo style.css :

.welcome {
    background-color: #f5d355;
}
 
.welcome .wrap {
    background: url(images/imagen.png) no-repeat left bottom;
    padding: 170px 0;
}
 
.welcome .widget {
    text-align: center;
    /*float: right;*/
    max-width: 500px;
    margin-left: 580px;
}
 
.welcome .widget-title {
    color: #fff;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: bold;
}
 
.welcome .button {
    text-transform: uppercase;
    background-color: #82dce9;
    border-bottom: 3px solid #73d2e0;
    border-radius: 3px;
    font-size: 18px;
    letter-spacing: 2px;
    padding: 14px 50px;
}
 
.welcome .button:hover {
    background-color: #73d2e0;
}
 
@media only screen and (max-width: 1200px) {
 
    .welcome .wrap {
        padding: 130px 0;
    }
 
}
 
@media only screen and (max-width: 1023px) {
 
    .welcome .wrap {
        background-size: 40%;
        padding: 60px 0;
    }
 
    .welcome .widget {
        margin-left: 400px;
    }
 
}
 
@media only screen and (max-width: 860px) {
 
    .welcome .wrap {
        padding: 70px 0;
    }
 
    .welcome .widget {
        margin-left: 300px;
        padding: 0 40px;
    }
 
}
 
@media only screen and (max-width: 771px) {
 
    .welcome .wrap {
        background-position: center bottom;
        background-size: 300px;
        padding-bottom: 350px;
    }
 
    .welcome .widget {
        margin: 0 auto;
    }
 
}