Maquetación web profesional con WordPress + Elementor Free
4.7 (33 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.
414 students enrolled

Maquetación web profesional con WordPress + Elementor Free

Sácale todo el partido a Elementor con consejos y trucos que no están disponibles en la versión Free.
4.7 (33 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.
414 students enrolled
Last updated 12/2019
Spanish
Spanish [Auto-generated]
Price: $59.99
30-Day Money-Back Guarantee
This course includes
  • 7 hours on-demand video
  • 9 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
  • Maquetar profesionalmente una página web en muy poco tiempo partiendo de un tema de WordPress y sin gastar dinero en temas y plugins adicionales.
  • Aprender a crear un tema hijo (child theme) para maquetar un nuevo diseño sin perder las características del tema principal.
  • Utilizar el inspector de elementos del navegador para localizar rápidamente clases y estilos CSS.
  • Aprender a crear shortcodes para llamar a funciones de WordPress dentro de Elementor.
  • Integrar el loop de entradas de WordPress en una página de Elementor.
  • Integrar una entrada de WordPress dentro de una plantilla de Elementor.
  • Crear un menú principal y responsive listo para usar en cualquier plantilla de Elementor.
  • Programar un módulo de cuenta atrás combinando maquetación con Elementor y un poco de JavaScript.
  • Crear formularios de inicio de sesión y registro en WordPress
Requirements
  • Tener conocimientos básicos de WordPress (estar familiarizado con su entorno y panel de control).
  • Se recomienda conocer la estructura de archivos de WordPress y un poco de HTML/CSS, aunque no imprescindible.
  • Se recomienda una instalación de WordPress en modo local (localhost)
Description

Los desarrolladores web a menudo invertimos gran cantidad de nuestro tiempo de desarrollo en escribir código HTML y CSS para maquetar páginas web. Elementor es un constructor visual para WordPress que nos agiliza gran parte del trabajo de diseño y maquetación web, pudiendo invertir más tiempo en otras tareas, como programación o elaboración de contenidos.

Elementor tiene dos versiones: Free y Pro. La versión Free es suficiente para maquetar páginas web, pero carece de ciertas funcionalidades, como la  integración de menús, módulos para entradas, etc.

En este curso veremos cómo adaptar un tema por defecto de WordPress, el Twenty  Sixteen para que Elementor encaje en él perfectamente y poder aprovechar tanto el título, como el menú principal y pié de página dentro de una plantilla de Elementor.

Veremos cómo integrar la sección de entradas en una plantilla de Elementor gracias a funciones propias de WordPress y el uso de shortcodes.

Aprenderemos a maquetar páginas desde cero utilizando las herramientas de maquetación de elementor cómo la creación de secciones, columnas, módulos de texto, imágenes, carruseles, galerías, listas de iconos, mapas de GoogleMaps, etc.

También aprenderemos a crear un menú principal responsivo para poder utilizarlo en todas las páginas de nuestro sitio web.

Este curso queda abierto para incorporar nuevos consejos y contenidos en la medida que experimente y los considere de interés para los alumnos.

Espero que el curso sea de tu agrado y ayude a abrirte la mente a nuevas posibilidades en el mundo del diseño y la maquetación en WordPress sin gastar dinero en la licencia Pro de Elementor.

Who this course is for:
  • Diseñadores que deseen agilizar las tareas de maquetación de sitios webs.
  • Profesionales que quieran ahorrar costes en temas de pago y necesiten adaptar los diseños a las necesidades de sus clientes.
  • Usuarios que quieran produndizar en WordPress aprendiendo técnicas y funciones avanzadas.
Course content
Expand all 55 lectures 07:02:20
+ Preparación del tema de WordPress para Elementor
6 lectures 40:06

En esta primera clase haremos algunos pequeños ajustes en la instalación de WordPress recién instalado, como la configuración de enlaces permanentes. Crearemos algunas páginas internas de ejemplo y con ellas construiremos un menú principal.

Preview 04:44

Para el tema de WordPress a las plantillas de Elementor crearemos un tema hijo (o child theme) para hacer en él todas las modificaciones necesarias y así no perder los cambios en caso de que el tema principal se actualice.

Preview 07:56

Desde la aparición de la versión 5 de WordPress, la forma de declarar plantillas hijas ha variado sensiblemente. En esta clase vemos cómo hacerlo para no tener ningún problema a la hora de crearla.

Creación de una plantilla hija (o child theme) ACTUALIZACIÓN WORDPRESS 5
06:47

Crearemos un nuevo archivo Template en nuestro tema hijo para llevar a cabo en él todas las modificaciones que necesitemos para acoplar a la perfección la plantilla de Elementor.

Preview 02:25

Comenzamos a editar nuestro Template modificando la cabecera y el pie de página, y eliminando los sidebars que no necesitemos. El objetivo es dejar el Template lo más básico y neutro posible.

Modificamos la cabecera, los sidebars y el pie de página del nuevo Template
07:34

Una vez eliminados todos los elementos que no necesitamos, vamos a terminar de editar nuestro Template con CSS para eliminar márgenes, rellenos y colores de fondo que no necesitemos.

Editamos con CSS el resto del Template
10:40
+ Comenzando con Elementor
2 lectures 08:53

Instalaremos desde el propio repositorio de WordPress, el plugin Elementor en su versión Free. Insertamos una plantilla para crear la portada.

Instalación del plugin Elementor Free
04:32

Una técnica interesante para tener nuestro título web y menú principal en todas las páginas que maquetemos con Elementor.

Integramos el título y menú principal de WordPress dentro de Elementor
04:21
+ Maquetando la portada del sitio web
5 lectures 45:28
Maquetando portada: Herramientas y módulos de elementor - Parte 1
07:23
Maquetando portada: Herramientas y módulos de elementor - Parte 2
09:29
Maquetando portada: Herramientas y módulos de elementor - Parte 3
05:21
Maquetando portada: Herramientas y módulos de elementor - Parte 4
12:08
Maquetando portada: Herramientas y módulos de elementor - Parte 5
11:07
+ Maquetando el resto de páginas
2 lectures 23:57
Maquetando la página de Servicios
11:14
Maquetando la página de Contacto
12:43
+ Integrando la sección de noticias (Entradas) en una sección de Elementor
5 lectures 48:45

Creamos una página donde ubicaremos la sección que cargará el listado de entradas publicadas. Explicamos qué son los shortcodes en WordPress.

Preparando la página para Noticias (listado de entradas)
04:50

Crearemos un nuevo archivo donde, con un poco de programación PHP, haremos la llamada al loop de WordPress que nos devolverá el listado de entradas publicadas. Después llamaremos al loop desde un shortcode que será lo que incluiremos en la sección de Elementor.

Programamos el loop de entradas y lo añadimos a un shortcode
10:32

Una vez hacemos la llamada al loop de WordPress para traernos los títulos y contenidos de las entradas, llamamos también a las imágenes destacadas, las cuales editaremos y regeneraremos su tamaño para adaptarlas a las dimensiones deseadas para el listado de entradas.

Editamos y regeneramos el tamaño de los thumbnails (imagen destacada de entrada)
09:56
Damos formato con estilos CSS al listado de entradas
12:04

Vamos a añadir un sencillo sistema de paginación para nuestras entradas, compuesto por 2 únicos enlaces: Entradas anteriores y Entradas siguientes.

Añadiendo un sistema de paginación para el listado de entradas
11:23
+ Creando una plantilla para cargar entradas en Elementor
3 lectures 25:53

Creamos la plantilla para cargar el contenido de nuestras entradas, como siempre, gracias a los shortcodes de WordPress, nos traemos tanto el título como el contenido de la entrada de forma dinámica.

Creamos el archivo Template para cargar entradas de WordPress en Elementor
11:03

Usaremos las funciones de WordPress destinadas a la publicación de comentarios en nuestras entradas. Estas funcionen incluyen tanto la caja de comentarios (formulario de registro para poder comentar) así como mostrar el listado de comentarios publicados actualmente para la entrada.

Añadiendo sistema de comentarios al final de la entrada
10:47

Una vez que hemos montado todas las partes de la plantilla (cabecera, módulo para redactar el contenido de la entrada, sección de comentarios y pié de página, la guardamos en la Biblioteca de Elementor para poder reutilizarla en futuras entradas.

Guardamos la plantilla en la biblioteca para reutilizarla en otras entradas
04:03
+ Maquetación de una página desde cero
7 lectures 53:09

Vamos a recrear desde cero una de las plantillas ejemplo que incorpora Elementor, de temática de Restaurante. Una plantilla bastante completa que nos va ayudar a repasar las herramientas y módulos de maquetación de Elementor. Dejo en un enlace las imágenes de muestra utilizadas para la plantilla.

Recreamos una plantilla de ejemplo para web de Restaurante
01:59

En la primera sección de la plantilla, que actuará como cabecera, insertaremos un fondo y el logotipo del restaurante.

Primera sección: Cabecera, fondo y logotipo
04:50

La segunda sección está compuesta por 2 columna, una de ellas formada por un módulo de texto y la otra por una galería de imágenes.

Segunda sección: Columna de texto y galería de imágenes
08:02

La tercera sección consiste en una recomendación ideal para recomendaciones de los clientes del restaurante. Elementor tiene un módulo específico para ello.

Tercera sección: Módulo de recomendación
08:16

La cuarta sección puede que sea la que más trabajo conlleve, ya que necesitamos crear un grid (o collage) formado por cuadros de texto, entremezclados con imágenes, un slider y un video.

Cuarta sección: Grid variado de texto, imágenes, slider y vídeo.
13:08

La quita sección se compone de un carrusel de imágenes con una imagen de fondo fija (efecto de paralaje o parallax)

Quinta sección: Carrusel de imágenes
10:20

La última sección, compuesta por dos columnas, una de ellas con un listado de iconos para las formas de contacto, y la segunda columna con un mapa de ubicación de GoogleMaps.

Sexta sección: Lista de iconos y mapa de GoogleMaps
06:34
+ Ajustes en el menú responsive
1 lecture 09:57
CSS para el menú responsive de WordPress
09:57
+ Caso práctico 1: Maquetar una landing / page de tipo inmobiliaria
6 lectures 52:01
Barra superior: Logotipo e iconos sociales
07:16
Maquetar la sección de cabecera (fondo)
14:16
Insertar un bloque de contadores
05:06
Sección de mapa y vídeo
07:13
Maquetar sección de agentes inmobiliarios
14:18
Sección final: galería de imágenes
03:52
+ Caso práctico 2: Maquetar una landing / page de tipo aplicación móvil
7 lectures 38:28
Sección cabecera: Bloques de la cabecera
04:02
Sección cabecera: Estilos de icono y textos
06:59
Sección cabecera: Estilo botones
04:27
Sección cabecera: Divisor de la cabecera
01:48
Sección contenido: Bloque de iconos y textos
08:19
Sección contenido: Bloque de recomendación
08:53
Sección final: Carrusel de logotipos
04:00