Skip to content

Instantly share code, notes, and snippets.

@DavidPeralvarez DavidPeralvarez/Widget 1 Secret
Last active Jan 9, 2020

Embed
What would you like to do?
Creando una plantilla para la Home con áreas de widgets
<?php
/**
* Custom front page template
*/
// Output jumbotron & features widget areas
add_action( 'genesis_after_header', 'genesis_sample_home_widget_areas' );
function genesis_sample_home_widget_areas(){
genesis_widget_area( 'home-jumbotron', [
'before' => '<div class="home-jumbotron widget-area"><div class="wrap">',
'after' => '</div></div>'
] );
genesis_widget_area( 'home-features', [
'before' => '<div class="home-features widget-area"><div class="wrap">',
'after' => '</div></div>'
] );
}
genesis();
<?php
/**
* Child Theme customizations
*/
// Create jumbotron widget area for front page
genesis_register_sidebar( [
'id' => 'home-jumbotron',
'name' => esc_html__( 'Home Jumbotron', 'genesis-sample' ),
'description' => esc_html__( 'Widget area placed after the header.', 'genesis-sample' )
] );
// Create features widget area for front page
genesis_register_sidebar( [
'id' => 'home-features',
'name' => esc_html__( 'Home Features', 'genesis-sample' ),
'description' => esc_html__( 'Widget area placed after the jumbotron.', 'genesis-sample' )
] );
/* Fuera de la media query */
/* Front Page
---------------------------------------------------------------------------- */
/* Jumbotron widget area */
.home-jumbotron {
background-color: #cc0099;
background-image: linear-gradient( to right, #cc0099, #3333cc );
}
.home-jumbotron .wrap {
padding: 40px 20px;
}
/* Jumbotron widget area: Custom HTML widget */
.home-jumbotron .widget_custom_html {
color: white;
margin-bottom: 0;
}
.home-jumbotron .widget_custom_html .widget-title {
font-size: 32px;
}
.home-jumbotron .widget_custom_html .button {
background-color: #3333cc;
text-transform: uppercase;
border-radius: 0;
}
.home-jumbotron .widget_custom_html .button:hover,
.home-jumbotron .widget_custom_html .button:active,
.home-jumbotron .widget_custom_html .button:focus {
background-color: white;
color: #3333cc;
}
/* Features widget area */
.home-features {
background-color: #f4f4f4;
}
.home-features .wrap {
padding: 40px 20px;
}
/* Features widget area: Custom HTML widget */
.home-features .widget_custom_html .widget-title {
font-size: 32px;
}
.home-features .widget_custom_html .one-third {
margin-bottom: 40px;
}
.home-features .widget_custom_html .one-third h4 {
font-weight: bold;
color: #3333cc;
}
/* Dentro de la media query */
/* Front Page
--------------------------------------------- */
/* Jumbotron widget area */
.home-jumbotron .wrap {
margin: 0 auto;
max-width: 1140px;
}
/* Jumbotron widget area: Custom HTML widget */
.home-jumbotron .widget_custom_html .widget-title {
font-size: 48px;
}
.home-jumbotron .widget_custom_html p {
font-size: 24px;
}
/* Features widget area */
.home-features .wrap {
margin: 0 auto;
max-width: 1140px;
}
/* Features widget area: Custom HTML widget */
.home-features .widget_custom_html .one-third {
margin-bottom: 0;
}
Domina Genesis Framework
----------
<p>El curso que NO estabas esperando. Pero ha llegado igualmente. Así que habrá que aprovecharlo. ¿No?</p>
<p><a href="#" class="button">Accede gratis</a></p>
El curso tiene de todo
----------
<div class="one-third first">
<h4>Emoción</h4>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
<div class="one-third">
<h4>Acción</h4>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
<div class="one-third">
<h4>Pasión</h4>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
<div class="clearfix"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.