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; | |
} |
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