Como lo había prometido y después de realizar el sketch para una web en Illustrator, hoy tenemos el curso completo para convertir ese wireframe en una página web real y totalmente funcional.
A lo largo de 4 videos vamos a poder realizar una onepage de forma fácil y lo mejor de todo, ¡gratis! utilizando nuestro local para desarrollar todo el proyecto.
Todos los códigos utilizados en nuestro proyecto estarán disponibles aquí para que puedas utilizarlos en tiempo real.
Este post contiene
Creación de Hero o Banner en WordPress
En este capitulo vamos a ver como comenzar a crear nuestra web basada en lo que tenemos ya diseñado en illustrator y vamos a comenzar por nuestro Hero o también conocido como Banner.
Capítulo #2
Creación de sección Servicios y Quienes somos
En este capitulo vamos a construir varias secciones de una sola. Por un lado vamos a hacer una sección de servicios o plus de nuestra empresa como también una sección de «Lo que hacemos» y terminamos con una sección exclusiva para los testimonios de nuestros clientes.
Además está última sección la vamos a desarrollar con un plugin especial para darle un toque de dinamismo a nuestra web.
Capítulo #3
Creación del Footer en nuestra plantilla GeneratePress
En este capitulo vamos a darle forma a nuestro footer por medio de los widgets que nos brinda WordPress y las posiciones que nos da nuestro theme.
También lograremos cambiar nuestra barra de Copyright por medio del uso de Hooks que tiene nuestro theme.
Capítulo #4
Creación del contacto con Contact forms 7 [extras]
Y hemos llegado al final de este súper curso. Con este capitulo vamos a aprender como generar un formulario de contacto para que nuestros clientes puedan escribirnos por medio de nuestra web.
Ademas vamos a adicionar algunas cosas para hacer ver nuestra página un poco mas dinámica por medio del scroll de nuestro menú de navegación.
Y… como te lo había prometido, aquí te dejo todos los códigos utilizados en nuestro proyecto.
Código CSS
/* escribe aquí tu código CSS */
.titulobanner_1{
margin-bottom: 0px;
line-height: 0.8;
}
.titulobanner_2{
margin-bottom: 18px;
}
.titulobanner_3{
margin-bottom: 50px;
line-height: 0.2;
}
.banner_width{
max-width: 1200px!important;
margin-left: auto!important;
margin-right: auto!important;
}
.textoplus_1{
width: 255px;
margin: 0 auto;
}
.footer-widgets{
background: #2d4b9e;
color:#fff;
}
.footer-widgets h2{
color:#fff!important;
}
.footer-widgets a{
color:#fff!important;
}
footer.site-info {
background: #2d4b9e;
border-top: solid 2px #fff;
}
.campotxt{
width:100%;
}Código para modificar el Copyright
add_filter( 'generate_copyright','tu_custom_copyright' );
function tu_custom_copyright() {
echo date('Y').' Diseñado por <a href="https://buhodemia.com" target="_blank">Buhodemia</a>';
}Espero te haya sido de interés este post… nos leemos pronto!