4.75 de 5
4.75
31 valoraciones en Udemy

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.
Profesor:
Daniel Sánchez Romero
405 Estudiantes apuntados
Spanish [Auto-generated]
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

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.

Preparación del tema de WordPress para Elementor

1
Ajustes principales de WordPress

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.

2
Creación de una plantilla hija (o child theme)

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.

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

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.

4
Creamos un Template para la página principal

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.

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

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.

6
Editamos con CSS el resto del Template

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.

Comenzando con Elementor

1
Instalación del plugin Elementor Free

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

2
Integramos el título y menú principal de WordPress dentro de Elementor

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

Maquetando la portada del sitio web

1
Maquetando portada: Herramientas y módulos de elementor - Parte 1
2
Maquetando portada: Herramientas y módulos de elementor - Parte 2
3
Maquetando portada: Herramientas y módulos de elementor - Parte 3
4
Maquetando portada: Herramientas y módulos de elementor - Parte 4
5
Maquetando portada: Herramientas y módulos de elementor - Parte 5

Maquetando el resto de páginas

1
Maquetando la página de Servicios
2
Maquetando la página de Contacto

Integrando la sección de noticias (Entradas) en una sección de Elementor

1
Preparando la página para Noticias (listado de entradas)

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

2
Programamos el loop de entradas y lo añadimos a un shortcode

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.

3
Editamos y regeneramos el tamaño de los thumbnails (imagen destacada de entrada)

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.

4
Damos formato con estilos CSS al listado de entradas
5
Añadiendo un sistema de paginación para el listado de entradas

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

Creando una plantilla para cargar entradas en Elementor

1
Creamos el archivo Template para cargar entradas de WordPress en Elementor

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.

2
Añadiendo sistema de comentarios al final de la entrada

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.

3
Guardamos la plantilla en la biblioteca para reutilizarla en otras entradas

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.

Maquetación de una página desde cero

1
Recreamos una plantilla de ejemplo para web de Restaurante

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.

2
Primera sección: Cabecera, fondo y logotipo

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

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

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.

4
Tercera sección: Módulo de recomendación

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.

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

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.

6
Quinta sección: Carrusel de imágenes

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

7
Sexta sección: Lista de iconos y mapa de GoogleMaps

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.

Ajustes en el menú responsive

1
CSS para el menú responsive de WordPress

Caso práctico 1: Maquetar una landing / page de tipo inmobiliaria

1
Barra superior: Logotipo e iconos sociales
2
Maquetar la sección de cabecera (fondo)
3
Insertar un bloque de contadores
4
Sección de mapa y vídeo
5
Maquetar sección de agentes inmobiliarios
6
Sección final: galería de imágenes

Caso práctico 2: Maquetar una landing / page de tipo aplicación móvil

1
Sección cabecera: Bloques de la cabecera
2
Sección cabecera: Estilos de icono y textos
3
Sección cabecera: Estilo botones
4
Sección cabecera: Divisor de la cabecera
5
Sección contenido: Bloque de iconos y textos
6
Sección contenido: Bloque de recomendación
7
Sección final: Carrusel de logotipos

Clase final: Crear un menú principal y responsive en una plantilla Elementor

1
Menú principal responsive: Introducción
2
Menú principal responsive: Diseñar el menú para el modo escritorio (desktop)
3
Menú principal responsive: Diseñar el menú para el modo responsive
4
Menú principal responsive: Cambiar entre modo desktop y responsive

En esta clase veremos los estilos CSS y funciones JQuery para que el menú se adapte a modo desktop o responsive en función del tamaño de pantalla.

Clase adicional: Crear un módulo de cuenta atrás

1
Crear módulo de cuenta atrás: Introducción
2
Crear módulo de cuenta atrás: Diseño de la sección y explicación de la función
3
Crear módulo de cuenta atrás: Dando estilo CSS a los números de la cuenta atrás

Clase adicional 2: Crear un módulo para inicio de sesión y registro

1
Módulo inicio de sesión / registro: Introducción
2
Módulo inicio de sesión / registro: Pestañas para los formularios
3
Módulo inicio de sesión / registro: El formulario de inicio de sesión
4
Módulo Inicio de sesión / registro: Formulario de registro
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.8
4.8 de 5
Calificaciones 31

Calificación Detallada

5 estrellas
18
4 estrellas
8
3 estrellas
4
2 estrellas
1
1 estrellas
0