Desarrollo de Temas de WordPress con Bootstrap 4 y CMB2
4.6 (184 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
760 students enrolled

Desarrollo de Temas de WordPress con Bootstrap 4 y CMB2

Convierte tus Diseños de Bootstrap en Temas de WordPress para crear Sitios Web Increibles y 100% Dinámicos con WP y CMB2
4.6 (184 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
760 students enrolled
Last updated 6/2019
Spanish
Spanish [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 9.5 hours on-demand video
  • 12 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Transformar un diseño en Photoshop, Adobe XD, JPG o Sketch en código de Bootstrap para crear sitios web responsive
  • Tomar ese mismo diseño y convertirlo en un Theme 100% dinámico de WordPress
  • Agregar y escribir código más avanzado para tus themes de WordPress
  • Integrar una librería como CMB2 en tu Theme con opciones avanzadas para venderlo
  • Crear opciones del Theme para que tu o tus clientes puedan cambiar su apariencia del sitio web sin escribir código
Course content
Expand all 105 lectures 09:24:46
+ Introducción al Curso y Primeros Pasos
6 lectures 40:33

Veamos lo que construiremos a lo largo de este curso

Preview 19:05

WordPress y Bootstrap siguen siendo excelentes opciones en 2018 y 2019, sobretodo para personas que buscan crear algo rápido en poco tiempo

Preview 08:27

Veamos el Plan que vamos a seguir para este curso

Preview 04:41

En este video veremos los materiales para descarga

Los Materiales del Curso
01:33

Estaré utilizando VSCode por el resto del curso, además de una extensión llamada Live Server, veamos como utilizarla

Ambiente de Desarrollo y Editor
04:31
El código Fuente del Curso
02:16
+ Creando el Diseño con Bootstrap
5 lectures 29:27

Vamos a comenzar este proyecto

Primeros pasos con el Proyecto
04:06

Vamos a crear el Header de este proyecto

Creando el Header
04:26

Veamos como crear un menú responsive en nuestro proyecto

Creando el Menú Principal
10:28

Veamos como crear el Footer para nuestro sitio web

Creando el Footer
05:42

Veamos como darle estilos al Header y al Footer

Estilos al Header y al Footer
04:45
+ Creando la Página de Nosotros
4 lectures 19:51

Vamos a comenzar a crear la página de Nosotros

Creando la página de Nosotros
05:06

En este video veremos los estilos para la página de Nosotros

Estilos a la página de Nosotros
05:07

Mostraremos un gráfico después de cada encabezado, veamos como hacerlo

Agregando un gráfico para los encabezados
03:55

Veamos como cargar los iconos de la parte inferior

Preview 05:43
+ Creando el Blog
5 lectures 26:51

Vamos a comenzar con la página de Blog

Creando el Blog
05:31

Vamos a crear el contenido de las entradas

Creando las Entradas del Blog
05:34

Vamos a escribir el CSS de las entradas

Estilos a las Entradas del Blog
05:59

En este video crearemos el sidebar del blog

Creando el Sidebar del Blog
04:57

Vamos a agregar CSS al Sidebar

Estilos CSS al Sidebar
04:50
+ Creando la Página de Entradas del Blog
1 lecture 02:33

Veamos como crear el diseño para las Entradas

Creando la página para las Entradas
02:33
+ Creando la Página de Próximas Clases
3 lectures 13:25

Veamos como crear la página de las próximas clases

Creando la página para las Próximas Clases
05:59

Utilizaremos el Card para las Clases

Creando las Clases
04:34

Vamos a escribir un poco de CSS para las clases

Estilos a las Clases
02:52
+ Creando la Página para cada Clase
3 lectures 14:45

Veamos como crear la página para cada clase

Creando la página de las Clases
04:48

En este video vamos a finalizar el Contenido

Finalizando el Contenido
05:00

Vamos a darle estilos a la página de Clases

Estilos a la página de Clases
04:57
+ Creando la página de la Galería de Imágenes
2 lectures 06:40

En este video veremos como crear la galería

Creando la página de la Galería
04:24

Veamos como agregar las imágenes Modal

Agregando las Modales para cada Imagen
02:16
+ Creando la página de Contacto
1 lecture 08:22

Vamos a crear una página de Contacto

Creando la página de Contacto
08:22
+ Creando la página de Inicio
4 lectures 21:40

Vamos a crear la página de Inicio

Creando la página de Inicio
05:20

Vamos a crear los contenedores de las imágenes

Creando los Contenedores de las imágenes principales
06:46

Vamos a crear el listado de clases

Creando la sección de las Clases
02:44

Veamos como crear la sección de licenciatura

Creando la sección de Licenciatura
06:50
Requirements
  • Un Editor de Texto, yo estaré utilizando Visual Studio Code
  • Un Navegador, estaré utilizando Chrome y Chrome Dev Tools (incluido en Chrome)
  • Conexión a Internet, debido a que estaremos descargando algunas librerías a lo largo del curso
  • Un Servidor Local, estaré utilizando MAMP
  • Si has escrito un poco de código HTML, CSS o PHP o has utilizado WordPress cualquier conocimiento previo te servirá en el curso
Description

En este curso aprenderás a crear Themes 100% dinámicos con WordPress de tus diseños en Bootstrap.

Primero estaremos creando el diseño en Bootstrap, nuestro cliente nos ha entregado 9 diseños con la apariencia de como debe quedar el sitio web y estaremos utilizando Bootstrap para crear un sitio web Responsive, utilizaremos los menús, el nuevo grid de Bootstrap hecho con Flexbox, Cards, Formularios, las classes de Bootstrap y mucho más, si eres de las personas que crean sus diseños con AdobeXD, Photoshop o Sketch y cualquiera de estas heramientas, podrás seguir el mismo enfoque para convertir tu diseños a bootstrap.

Una vez que los archivos con los Templates esten listos, estaremos creando el theme de WordPress, pasaremos los archivos con código estático a código dinámico de WordPress, aprenderás a utilizar las funciones nativas de WordPress para crear headers, menús, barras laterales, widgets, mostrar el contenido, imágenes destacadas y más.

Agregaremos código para sacar el máximo provecho a nuestros templates y reutilizar lo más posible nuestros archivos.

Finalmente estaremos incorporando temas más avanzados, agregaremos CMB2, una librería desarrollada para extender los campos por default que convierte a WordPress en un CMS real, con más de 30 campos, CMB2 nos dará opciones más avanzadas para crear un theme 100% dinamico y flexible.

Veremos temas más avanzados tales como crear Widgets, Post Types, relacionar post types, CMB2, Opciones del Tema y Mucho más.

Un curso de WordPress que va desde lo básico hasta temas más avanzados paso a paso

Who this course is for:
  • Diseñadores que quieran aprender a tomar sus diseños PSD, Adobe XD o Sketch en diseños con Bootstrap y Themes de WordPress
  • Personas que quieran tomar un diseño en HTML y convertirlo a un Tema 100% dinámico de WordPress
  • Si deseas crear un sitio web dinámico donde el cliente o tu tengan control total sobre la información WordPress es una Excelente opción
  • Aprenderás paso a paso a crear sitios web dinámicos con WordPress y Bootstrap