Crea un sitio web de descargas digitales con Elementor (plugins gratuitos)

1. Introducción: Bienvenido de nuevo a otra clase impresionante conmigo, can Besser. Siempre es un placer tenerte aquí. Si has estado viendo mis gafas, entonces ya sabes, me gusta enseñar a la gente a diseñar páginas de aterrizaje impresionantes con Elementor y WordPress. Ahora, en esta clase, te estaré enseñando a diseñar un sitio web de descargas digitales donde puedas vender tus productos digitales. Por productos digitales, me refiero a cosas como plantillas de logotipos, tu música, si vendes instrumentales, si eres productor musical, o si diseñas plantillas de interfaz de usuario usando Figma y Sketch, y quieres poder venderlas en tu propia página web. Si alguna vez has visitado un mercado como rio gráfico, pico libre, o Mercado Creativo, entonces, ya sabes, una especie de negocio de descargas digitales. Estoy hablando de una plataforma donde un visitante puede venir a explorar su biblioteca de productos digitales en su tienda digital. Selecciona un producto digital para ver más detalles, y luego por y descarga ese producto digital. Ese es el tipo de negocio del que hablo. Si estás en la industria creativa y tu trabajo implica la creación de contenidos digitales. Por ejemplo, fuentes, diseño gráfico como volantes y plantillas de logotipos, plantilla UX UI como plantillas de figma o boceto. En esta clase, aprenderás a configurar una plataforma a la que podrás vender esas plantillas. A diferencia de mis otras clases elementales donde me enfoqué principalmente en cómo usar Elementor para construir una sola página de aterrizaje sin entrar en detalles sobre cómo funciona un sitio web. En esta clase, estaremos creando un sitio web de múltiples páginas completamente en toda regla que esté funcionando y tenga el potencial de empezar a ganar nuevos ingresos pasivos incluso mientras estás dormido. Eso si estás dispuesto a comprometerte con eso. Entonces si has estado soñando con tener una plataforma en línea donde la gente pueda venir y descargar productos digitales, donde puedes subir las plantillas para crear. Entonces este es el sistema que vamos a estar aprendiendo. Entonces espero que estés tan emocionado como yo. Yo quiero mostrarles justo lo que vamos a estar construyendo y luego no empezamos, así que sígueme. Y ahí lo tenemos. Ahora que hemos tenido una visión general del sitio web de descargas digitales va a construir. Y porque esta clase está diseñada para dar cabida a personas en todos los niveles de experiencia en WordPress, incluyendo principiantes. Empezaremos por mirar lo que es un CMS sin perder más tiempo. Empecemos. 2. Qué es un CMS: Un sistema de gestión de contenidos, o un CMS, es una aplicación que permite crear, publicar y modificar contenido digital. Con un CMS, puedes crear un sitio web que funcione completamente en minutos y comenzar de inmediato a vender productos y servicios a clientes en línea. Para usar un CMS, no necesitas saber codificar porque la aplicación te proporciona herramientas para manipular tu contenido visualmente. Si sabes apuntar y hacer clic en los iconos de una pantalla de computadora, puedes usar un CMS. Cualquiera puede usar un CMS. Después estaremos echando un vistazo a algunos de los ejemplos de la CMS más popular tiene en breve. Pero, ¿cómo funciona un CMS? Para entender cómo funciona un CMS, tenemos que verlo como dos partes que trabajan juntas para producir una experiencia deliciosa para el usuario. Y estas dos partes incluyen una aplicación de administración de contenido o un CMA, que básicamente es la interfaz gráfica de usuario front-end o front-facing con la que interactúas a medida creas y edita el contenido de tu sitio web. Esto está representado por un tablero que te proporciona varias herramientas y utilidades que puedes seleccionar y hacer diferentes cosas en tu contenido. La otra parte es la aplicación de entrega de contenidos o el C, D, a. Este es el lado backend del CMS, cual es responsable de la entrega del contenido que hayas creado con un CMA a tu página web visitantes. Para ilustrar cómo se relacionan estos dos componentes. Pensemos en un CMS como restaurante por un momento. Si un CMS es un restaurante, el CMA es como la cocina. Proporciona la cocina donde sea necesario para cocinar los alimentos que se servirán a los clientes. Es decir en un CMS, el CMA es la parte que te da las herramientas para crear un publicado, el contenido digital que se servirá a los visitantes, como artículos de post blog, productos que se muestran en tu sitio web cuando las estás creando. Es el CMA el que te da las herramientas para crear esas piezas. Por otro lado, mientras todavía en el ejemplo del restaurante, el CDA es como el mesero en un restaurante que recibe pedidos de comida, va a la cocina para conseguir la comida y se la sirve a los clientes. Entonces volviendo a nuestra página web, es decir que el CDA es la parte del CMS que atiende las páginas que han sido solicitadas por los visitantes de su sitio web. Por lo que cuando solicitan la página de inicio, hacen clic en un botón supuestamente redirigido a otra parte del sitio web. Es el CDA el que se encarga de entregar esa página que han solicitado. Existen dos formas en las que se puede utilizar un CMS, y esto está determinado por cómo se instala el CMS. Puede usar un CMS como CMS local o un CMS basado en la nube. Si descarga e instala el CMS en un servidor que ha sido proporcionado por un host web o en un servidor que haya creado localmente en su máquina. Se dice que el CMS es una instalación local. Porque está instalado en un servidor sobre el que tienes control. Puedes realizar cambios directos en el núcleo de la aplicación para satisfacer las necesidades específicas de tu proyecto de sitio web. Por ejemplo, puedes acceder y editar el código fuente de WordPress para personalizar cómo construyes tu sitio web. En cuanto a los basados en la nube, CMS, un vendedor del servicio CMS, te brinda un entorno alojado en la nube en el que puedes crear y administrar tu sitio web. Por ejemplo, piense en semanas. Te proporcionan un entorno en el que puedes construir un sitio web, pero gestionan la plataforma de semanas principales que está potenciando tu sitio web. Con este tipo de instalación, no tienes la libertad de editar el propio CMS. El núcleo. Por ejemplo, puedes crear un sitio web en semanas, pero no puedes editar el núcleo de la plataforma weeks en sí porque solo el equipo de desarrolladores de semanas internamente tiene acceso al código fuente. Usted y otros usuarios pueden utilizar las herramientas proporcionadas en la plataforma WIX para crear sitios web. Pero el equipo de la semana se encarga de las funcionalidades de backside y backside para ti. Ejemplos tan populares de CMS en las instalaciones incluyen Drupal, Joomla, y el WordPress, wordpress.org. Algunos ejemplos comunes de instalaciones CMS basadas en la nube incluyen semanas, Shopify, y la plataforma WordPress.com. Si bien cada CMS es único en cierto grado, casi todos los CMS comparten ciertas características cruciales. Echemos un vistazo a algunos de ellos. Número 1, un CMS te da las herramientas para publicar diferentes tipos de contenido digital. Mucha gente opta por usar un CMS porque les permite armar piezas de contenido con unos pocos clics y publicarlas como entradas de blog o productos en tiempo real sin necesidad de codificar. Número 2. A CMS le brinda formas de revisar su contenido publicado. Como propietario de un sitio web, siempre querrás editar o actualizar algún contenido que ya has publicado. Un CMS confiable debería permitirte realizar cambios a tu antojo, y además realizar un seguimiento de esos cambios para que puedas revertir a versiones anteriores de tu trabajo en caso de que cometas errores ya que estás editando. Un CMS proporciona una manera fácil de indexar, buscar y recuperar contenido. Esto simplemente significa que un CMS debe permitirle usted o a sus usuarios acceder fácilmente al contenido de su sitio web a través de la búsqueda proporcionando una forma agrupar contenido por categorías o agrupaciones predefinidas. Por ejemplo, plantillas de volador, plantillas de revistas. Cuando un usuario tipea plantillas de revistas, deberían poder obtener una lista o una galería de resultados relacionados con revistas justo ahí en la pantalla. A eso nos referimos con indexación, búsqueda y recuperación de contenidos. Entonces ahora que entiendes lo es un sistema de gestión de contenidos, echemos un vistazo al sistema de gestión de contenidos más famoso y popular del mundo , WordPress. Hagámoslo en la siguiente lección. 3. Introducción a entorno en línea de Wordpress: El primer paso para configurar un entorno de desarrollo de WordPress en línea es obtener alojamiento web confiable. Un host web básicamente almacena tu sitio web en una computadora que está conectada a Internet 24, 7, 365 días al año. Por lo que eso asegura que tus páginas web estén disponibles para los visitantes cuando las soliciten mientras navegan por tu sitio web. Entonces elegamos un buen sitio web para tu negocio. haber estado diseñando sitios web de WordPress desde hace años, me he encontrado y uso bastantes hosts web y algunos de los factores cruciales que he aprendido a considerar a la hora de buscar un buen host web incluir, ¿hay servicios de hosting eran prensa amigable porque hay hosts web por ahí que ofrecen servicios específicos de WordPress. ¿ Qué tecnologías de seguridad utilizan para mantener tu sitio web seguro? ¿ Proporcionan un soporte técnico confiable 24, 7? Ofrecerán velocidades de carga rápidas para su sitio web? Estos son algunos de los pocos, ya que debes tener en cuenta ya que buscas un host web. Y con estos factores en mente, algunos de los hosts web de WordPress más populares que son conocidos por sus consistentemente excelentes servicios amigables para WordPress incluyen hosting TMD, sitio tierra , anfitrión de los sueños, bluehost. Estas empresas proporcionan servicios específicos de WordPress como parte de sus ofertas de productos. Y estos son sólo cuatro de los anfitriones web amigables para WordPress más famosos del mercado. Podrás obtener un buen host web para tu negocio de descargas digitales en tu propio país. Pero por si quieres ahorrarte ese tiempo y dolor de tener a Googleen y dolor de tener a Google todas partes para los mejores servicios de alojamiento web que los cuatro que ya he mencionado, eso es TMD hosting site ground, anfitrión de ensueño y Bluehost, el muy popular entre los usos de WordPress y podrías considerar usarlos. Entonces eso es todo para el alojamiento web y el nombre de dominio. Ya es hora de configurar un entorno de desarrollo de WordPress en línea. Entonces vamos a sumergirnos enseguida. 4. Demostración: cómo configurar un Envio de WordPress en línea en WordPress Envir en línea: Bienvenidos a esta lección. En la última lección, hablamos los dos entornos diferentes de WordPress que podemos configurar para empezar a construir sitios web. En esta lección, vamos a configurar un entorno WordPress en línea. Y también miramos algunos factores que debes tener cuenta cuando buscas un host web. Entonces ahora en esta clase asumiré que ya has decidido qué host web vamos a usar para los fines de mis demos, estoy usando estos hosts web. Por lo que voy a iniciar sesión para tener acceso a mi cPanel. Por lo que inicia sesión en tu host web con el fin de obtener acceso a tu cPanel. Dentro de mi panel de hosts web, tengo esta opción de inicio de sesión cPanel. Busca la opción de inicio de sesión cPanel dondequiera que esté en tu panel de control. Entonces dentro de mi cPanel, me desplazaré todo el camino hasta la parte inferior y buscaré aplicaciones subscapularis, el instalador, voy a dar clic en Wordpress. Y debido a que has hecho clic en WordPress, serás llevado directamente a la página de aterrizaje de WordPress dentro de cálculo. Y debido a que ya tengo dos instalaciones de WordPress en trigo, tengo que vivir web. Tengo una lista de las instalaciones actuales aquí. Cuando instale otra copia de WordPress, se enumerará a continuación estos dos aquí mismo. Por lo que esta será la lista de todas sus instalaciones de WordPress. Entonces lo siguiente que tenemos que hacer ahora es sístole. Ahora. Ahora vamos a tomar en esta página donde podremos rellenar todos los detalles sobre nuestra nueva página web. Por lo que para el protocolo, haré clic en el menú desplegable y seleccionaré HTTPS. Asegúrate de que sea https, www dot, para que sea www dot tu dominio. Deja el directorio en blanco aquí, y esta es la versión de WordPress que queremos instalar. Entonces es 5.8.1. Entonces, dale un sitio web y un nombre, y démosle una descripción. Está bien, así que aquí puedes proporcionar los detalles del administrador. Estas serán tus credenciales de inicio de sesión de WordPress. Entonces siempre que quieras iniciar sesión tu WordPress con el fin de acceder al panel de WordPress. Estos son los detalles que usarás. Así que asegúrate de que sea una contraseña segura. Déjame ocultar eso y establecer mi contraseña. Por lo que sugeriría que deje el correo electrónico por defecto que está en el campo de entrada justo aquí. A continuación, estos no son obligatorios. Sí, y eso es todo. Ya terminamos. Y aquí dentro, escribe el correo al que quieres soft tackle nosotros para enviar una notificación cuando se crea tu sitio web. Por lo que una vez que se haya creado este sitio web, por lo que una vez que esta instalación de WordPress esté completa y se enviará notificación a este correo electrónico. Por lo que voy a poner mi correo electrónico y decir instalar. No digas eso. Deberíamos decir de tres a cuatro minutos. Todo bien. Y ahora felicitaciones, el software se instaló con éxito. Y este es el enlace directo a la página principal, a la página principal del dominio. Entonces déjame solo dar click y ver donde tenemos. Entonces esa es nuestra página web en este momento. Y este es el enlace a nuestro panel de control. Es el mismo dominio, pero con un guión WP admin. Entonces ese es el enlace al tablero. Si hago clic en eso, serás llevado al tablero. Y wallah, ahí lo tenemos. Hemos configurado un entorno en línea estamos presionados, y ahora nuestra página web está en vivo. Si con razón ese enlace abierto en nueva pestaña y vamos a esa pestaña, esto es lo que tenemos. Entonces ahora lo siguiente que queremos hacer es ver cómo instalar un tema de WordPress. ¿ Qué es un tema de WordPress? Te veré en breve. 5. Demostración: cómo configurar un entorno local de WordPress: En este tutorial, te voy a mostrar cómo configurar una instalación local de WordPress y estaremos usando XAMPP. Pero antes que nada, ¿qué es XAMPP? Know zap es un entorno de desarrollo completamente gratuito y de código abierto que permite a los usuarios de WordPress construir y alojar sitios web localmente en sus máquinas sin necesidad de conexión a internet. Eso significa que podemos seguir interactuando con sitios web que has construido sin necesidad de conexión a Internet. En su totalidad. Xampp significa la X es sinónimo de Apache multiplataforma, MySQL o MySQL, emperador PHP. Según WordPress, en el contexto de una red, un host local es un equipo específico en el que estás trabajando en este momento. Entonces si estás en una oficina en este momento, la computadora que estás usando el anfitrión local de Israel. Si estás trabajando desde casa, tu computadora en casa es tu anfitrión local. Si tienes una computadora favorita, es un cibercafé, esa computadora puede ser tu anfitrión local también. Puedes tener XAMPP en cualquiera de estas máquinas e instalar WordPress allí y empezar a construir sitios web desde ahí. Entonces veamos cómo configurar un host local usando XAMPP. Por lo que aquí estamos en la página oficial de descargas de XAMPP. Y la URL es www dot Apache friends.org slash index.html. Y notarás que tenemos diferentes versiones de XAMPP creative para diferentes sistemas operativos. Porque estoy usando Windows, seguiré adelante y haré clic en XAMPP para Windows. La descarga debe comenzar automáticamente, pero no la voy a descargar porque ya había descargado el, como se puede ver aquí mismo en mi escritorio, ya lo tengo. Lo siguiente que queremos hacer es ir a la página de descargas de WordPress, que es WordPress.org slash download. Desplácese hacia abajo y haga clic en este botón aquí mismo para descargar la última versión de Wordpress. Y ya tengo una copia del mismo. Ya lo he descargado y extraído. Está en mi escritorio, como puedes ver aquí mismo. Así que descarga ese WordPress y extrae a un lugar donde puedes recuperarlo. Entonces ahora que tienes estos dos, Empecemos instalando XAMPP. Entonces haré doble clic en eso. Y obtendrás este aviso de advertencia. Adelante y di, sí, continúa con la instalación. Después sigue las indicaciones. Debería ser bastante fácil. No complicado gol el camino al final e instaló XAMPP en su defecto. Ver la derecha, Lo siento, ya tengo una copia del mismo en mi sistema, así que no la voy a instalar. Por lo que una vez que hayas instalado XAMPP e ingresas dentro tu panel de control y mira la lista de todos los programas que tienes, has instalado en tu máquina, deberías encontrar el módulo Bitnami WordPress ahí mismo y XAMPP en la carpeta. Déjame seguir adelante y cerrar eso. Y dentro de tu unidad C o seco principal, encontrarás una carpeta llamada SAM que debería decirte que has instalado XAMPP con éxito en tu máquina. Y antes de pasar a la carpeta de WordPress, Vamos a asegurarnos de que nuestro servidor se está ejecutando ahora. Por lo que abriré XAMPP desde el menú de inicio. Lo pondré aquí mismo en foco. Y notarás que tiene muchos botones aquí mismo. Pero nos interesan sólo dos botones. Apache, MySQL. Entonces haz clic en Iniciar en ambos y notarás que el estado ha cambiado. Ahora MySQL se está ejecutando y Apache se está ejecutando. Mysql es la base de datos, y Apache es un servidor. Entonces seguiré adelante y minimizaré eso. Y pasemos al siguiente paso. Lo siguiente que queremos hacer es escoger la carpeta de WordPress que acabas de extraer. Y podríamos simplemente abrirla por un segundo. Notarás que tiene muchas páginas web aquí en un montón de otras carpetas con más archivos que te permitirán navegar por tus páginas en tu sitio web local. Entonces ahora que hemos confirmado todo lo que necesitas está ahí dentro. Copiarlo. Y luego abriremos Windows Explorer e iremos dentro de C, abriremos la carpeta Zoom que acabamos de mirar y buscaremos esta carpeta, los docs HT. Aquí es donde se instalarán todos tus sitios web de WordPress . Aquí es donde tendrás todos tus sitios web de WordPress instalados localmente. Entonces si lo pegamos aquí. Creo que ya había pegado una copia del mismo, así que ya tengo una copia del mismo aquí, pero básicamente solo pega esta carpeta de WordPress en estas carpetas de HT docs que está dentro de la carpeta de examen, dentro de la unidad C. Y una vez que lo hayas pegado ahí, cámbialo por el nombre de tu sitio web. Entonces mi web me dejó simplemente llamarlo mi anulación web. Entonces ahora que hemos instalado XAMPP en nuestro sistema y se está ejecutando como puedes ver por este estado aquí mismo. Y ya hemos descargado una copia de WordPress y creado un sitio web a partir de él, y le hemos llamado mi web dentro de la carpeta XAMPP. Ahora podemos ir y acceder al panel del sitio web de WordPress, el panel de control de estos sitios web. Entonces vamos al anfitrión local. Mi web, el nombre de tu sitio web o el nombre que diste a tu carpeta, y será redirigido a esta página donde comenzaremos con la instalación de WordPress. Entonces antes de ir más allá de esto, abre una nueva pestaña y ve a localhost, PHP, mi administrador. Y la razón por la que estamos entrando aquí es porque nuestro sitio web aún no tiene una base de datos. Entonces vamos a crear una base de datos. Después volveremos a esta página y seguiremos instalando todo lo demás. Entonces dentro de PHP, mi administrador, adelante y golpea eso una base. Y vamos a darle un nombre. Entonces mi, cuando anoté el B o algo así, solo dale cualquier nombre, realmente no importa. Entonces esa era mi base de datos web y la encontrarás listada aquí. Aquí está mi web underscore DB. Entonces ahora podemos volver a esta página y hacer click, Vamos por el nombre de la base de datos, dale ese nuevo nombre, acabamos de nombrarlo. Entonces es mi web underscore DB. Para el nombre de usuario, démosle rutas. Y para la contraseña, déjala en blanco. Después golpea Submit. Muy bien, chispeante, lo hiciste a través esta parte de la instalación. Entonces a continuación, vamos a ejecutar que la instalación. Entonces aquí mismo solo proporcionaremos información básica sobre nuestro sitio web de WordPress y estableceremos las credenciales de registro. Por lo que el sitio web es mi web. Y luego vamos a ir con admin para el nombre de usuario. Usa una buena contraseña segura. Pero por ahora, con fines ilustrativos, sólo iré con educado. Entonces confirmaré uso de contraseña débil. Mi correo electrónico, P en k.com. Y voy a calentar instalado WordPress. Démosle un momento. Entonces ahí vamos. Éxito WordPress ha sido instalado. Gracias y disfruta. Vamos a iniciar sesión con las credenciales que acabamos de crear, admin. Nuestra contraseña me dejó solo revelar este era mi pase, si recuerdo correctamente, ¿cuál era mi contraseña para luz o derecha. Entonces ahí lo tenemos. Entonces en resumen, o un resumen rápido, cualquier momento que quieras crear un nuevo sitio web localmente en tu máquina, todo lo que tienes que hacer es copiar esta carpeta, pegarla aquí, darle un nombre. Otro sitio web, copiar esta carpeta, ponerla aquí, darle otro nombre, y así sucesivamente y así sucesivamente. Asegúrese de que sea la carpeta original que descargó, la que descargó y extrajo. Para que puedas tener 50, 7000 sitios web aquí. Y cuando quieras entrar al tablero, antes que nada, asegúrate de que tu XAMPP, tu XAMPP, déjame solo llevar esto a enfocar. tu Apache como MySQL se están ejecutando. Por lo que mientras estos dos estén funcionando, deberías poder abrir tu navegador así e ir directamente a tu host local, localhost , y al nombre de tu sitio web. Y así es como hacerlo, chicos. Espero que estos hayan sido útiles. Si te gustó este video, por favor dame un pulgar arriba. Siempre damos la motivación para seguir adelante. 6. Qué es un tema de WordPress: Un tema de WordPress es una colección de archivos que determinan cómo se verá y se comportará cualquier sitio web de WordPress cuando los usuarios están interactuando con él. Por lo que estos archivos pueden incluir código PHP, HTML, y CSS, imágenes, plugin y plantillas de páginas web. Al realizar cambios en esta colección de archivos, puedes cambiar la apariencia y el diseño de tu sitio web de WordPress para que se vea y funcione exactamente como quieras. Por ejemplo, al ajustar algunos de tus temas, ajustes de apariencia, puedes cambiar cómo se mostrarían los artículos en tu blog, cómo aparecerán tus productos en tu tienda de comercio electrónico, cómo tus menús se presentarán en todo el sitio web, y cómo se comportan los enlaces o cuando se hace clic. En cualquier momento que instales WordPress, viene precargado con el tema predeterminado de WordPress, típicamente llamado así por el año en el que iguala lanzado. Por ejemplo, el tema de WordPress 2020 o el dolor de WordPress 2021. Siempre puedes cambiar a un nuevo tema si quieres. Y ya veremos cómo hacerlo en esta clase. Hay tres tipos de temas de WordPress cuando se trata de cuánto cuesta conseguirlos. Hay temas gratuitos. Eso significa que son libres de usar por completo. No tienes que pagar ningún dinero para usarlos. Hay temas freemium, lo que significa que son gratuitos pero con características premium adicionales a las que hay que pagar para tener acceso. Y entonces tenemos temas premium los cuales solo están disponibles para ti si los compras, solo puedes usarlos. Si los has comprado. Como usuario de WordPress, puedes encontrar fácilmente cualquier alma, miles de temas gratuitos enumerados en el repositorio de temas de WordPress o directorio de temas. Si quieres temas premium, puedes comprarlos un mercado digital como Creative Market, o pagar a un desarrollador para que cree uno por ti. ¿ Cómo puedes saber si un tema de WordPress es bueno para tu proyecto? Ahora bien, si bien realmente no hay una talla única respuesta a esta pregunta, general, cualquier tema de WordPress bien diseñado debería tener algunas características comunes de un buen tema. En otras palabras, el tema debe verse presentable e impresionante en todos los tamaños de pantalla. Debe tener una apariencia consistente en todos los principales navegadores. Eso significa que deberías trabajar bien con Chrome, Firefox, Safari, Internet Explorer, y esos otros. Debe mantenerse activamente y actualizarse regularmente. Debe ser en vivo y por lo tanto rápido de cargar. Es decir, si está bien escrito, debería tener un código limpio y bien escrito. Debe tener documentación extensa y bien escrita disponible en línea. Debe estar respaldado por una atención al cliente confiable y soporte para todos los usuarios. Debe ser SEO amigable. Los dos temas de WordPress que uso en prácticamente todos mis proyectos de diseño web son. Número uno, Astra. Astra es untema de WordPress gratuito y multipropósitomuy popular tema de WordPress gratuito y multipropósito que te proporciona toneladas de hermosas plantillas prefabricadas que son totalmente editables con cualquiera de la popular página de Drag and Drop constructores, como Elementor, Beaver Builder, dV, y así sucesivamente. Las características que se ofrecen en la versión gratuita son suficientes para la mayoría de los proyectos de sitios web en los que podría querer trabajar. De hecho, estaremos usando astro para nuestro proyecto de negocio de descargas digitales. El otro tema que me gusta usar en muchos de mis proyectos, iz dV. Dv no solo es uno de los temas de WordPress más populares en el mercado hoy en día, también cuenta con un increíble constructor de páginas visuales que permite editar todos los aspectos del equipo y diseño cualquier tipo de sitio web que desees sin ninguna habilidad de codificación. Entonces, ya sea que quieras empezar a diseñar desde cero o desde una plantilla ya hecha, dv te proporcionará la capacidad de hacerlo sin problemas. Como he mencionado, cada nueva instalación de WordPress viene con un tema predeterminado para controlar la apariencia de su sitio web. Wordpress te da la libertad de cambiar a un tema diferente simplemente instalando uno nuevo a través la función de apariencia de WordPress en el tablero. Entonces instalemos y activemos nuestro tema en la siguiente lección. 7. Demostración: cómo instalar un tema de WordPress: Así que bienvenido de nuevo. En la última lección, miramos lo que un tema de WordPress facilidad. Entonces en esta lección, estaremos cambiando del tema predeterminado de WordPress para alcanzar llamado astro. Entonces con siempre en más tiempo, vayamos directamente a temas de apariencia. Y como mencioné en la última lección, cada nueva instalación de WordPress viene con un tema predeterminado. Y el tema suele llevar el nombre del año en el que se estrena. Entonces ahora mismo estamos en el año 2021. El equipo activo en cada nueva instalación de WordPress es 2021. Y tenemos estos otros dos, 2019 y 2020. Queremos decir Agregar Nuevo. Y el tema que queremos utilizar para esta clase y el PMI recomiendan para la mayoría de los proyectos es Astra. Ahora por si acaso no puedes ver a Astra aquí, puedes escribir Astra en esta barra de búsqueda, Astra. Déjame teclear correctamente. Astra. Y ahí está. Y podemos seguir adelante e instalarlo o montar. Entonces ahora que está instalado, activemos. Y ahora Astra es nuestro tema activo. Y así es como instalar un tema de WordPress. Y quiero solo tomarme un momento y dar click en detalles del tema solo para que podamos ver por qué Astra es un equipo increíble y por qué se lo recomiendo a cualquiera que quiera construir un sitio web en WordPress. Si lees esta descripción aquí mismo, verás por qué Astra es uno de los mejores temas de WordPress que hay en el mercado hoy en día, y es gratis para que lo instales y empieces a usar hoy. Lo bueno es que es un tipo de tema multipropósito WordPress porque puedes usarlo para tus entradas de blog, carteras personales, sitios web de negocios, incluso escaparates WooCommerce. Pero definitivamente hay muchos otros temas impresionantes de WordPress por ahí. Definitivamente debes echarles un vistazo. Solo te estoy mostrando lo que he estado usando y porque ha estado funcionando para mí, creo que debería contarle a más gente al respecto. Entonces volviendo adentro aquí, ahora que hemos instalado y activado nuestro tema, tiempo ahora para ver lo que es un plugin de WordPress porque estaremos usando Elementor y otros plug-ins para construir un sitio web para ampliar el poder de WordPress a medida que construimos nuestro negocio de descargas digitales, estoy asumiendo que no todo el mundo que toma esta clase ha usado eran apremiantes. Entonces tenemos que partir de qué es un plugin? Veamos eso en la siguiente lección. Nos vemos en breve. 8. Qué es un complemento de WordPress: Al momento de grabar esta lección, hay más de 58 mil plugins de WordPress disponibles para que los uses en tu sitio web. Pero, ¿qué es un plugin? A plugging es una aplicación o software de terceros que se puede instalar en tu CMS de WordPress para agregar nuevas características a tu sitio web de WordPress. Es como un software pequeño que está diseñado para poder conectarse a un software más grande para agregar características al software más grande, que en este caso e es wordpress. Con plugins, puedes agregar características increíbles a tu negocio de descargas digitales para atender mejor a tus clientes. El hecho de que estemos presionados es de código abierto y su arquitectura permite la integración con software de terceros, es la razón principal por integración con software de terceros, la que los plugins son tan populares entre los usuarios de wordpress. Entonces ahora que ya sabes lo que es un plugin, veamos cómo instalar y activar un plug-in instalando y activando Elementor. Eso haremos en la siguiente lección. Nos vemos en breve. 9. Actualiza rápidamente el nuevo asistente de configuración de elementos: Bienvenido de nuevo. Ahora, esta lección es una nota lateral rápida o una rápida actualización del proceso de instalación de Elementor. Si estás tomando esta clase en mayo de 2022 y más allá, notarás que la activación de Elementor ahora tiene un asistente de configuración que se compone de varios pasos que tienes que seguir para configurar las partes básicas de su sitio web. Mientras creaba esta clase hace varios meses, Elementor no tenía ese asistente de configuración. Entonces solo quiero que pasemos por ese asistente de configuración. Pero todo lo demás que estás aprendiendo en esta clase no cambia. Sigue siendo el mismo proceso en todo momento. La única adición es el asistente de configuración. Entonces como pueden ver en este momento, tengo una instalación completamente nueva de WordPress y estamos en la Versión 6. Y lo que quiero hacer es ir a Plugins, Agregar Nuevo. Para que podamos agregar Elementor y pasar por ese proceso. Buscaré la instalación de Elementor ahora. Y ahora cuando haga clic en Activar será redirigido a ese asistente de configuración. Y podemos atravesarlo juntos. Entonces aquí estamos. Simplemente alejaré un poco para que podamos ver más detalles. De acuerdo, así que ahora notarás que lo primero que elemental quiere que hagamos ahora es crear una cuenta para sacar el máximo provecho de Elementor. Por lo que estos son algunos de los beneficios por apuntarse a una cuenta con Elementor. Pero la cosa es que no es necesario tener una cuenta con Elementor para usar Elementor. Entonces sólo voy a seguir adelante y saltarme esta parte. El segundo paso es aceptar, continuar con el tema hallow que Elementor ha hecho para nosotros. Esto lo hace Elementor, pero estamos usando el Tema Astra, así que solo seguimos adelante y saltamos. Astra es un tema más poderoso. El tercer paso es dar nombre a nuestro sitio web. Mientras estabas instalando tu WordPress. Le diste un nombre al sitio web. Ese es el nombre que se mostrará aquí. Pero esto nos da la oportunidad de cambiar el nombre por cualquier otro nombre que queramos. Mi sitio web, y luego hagamos clic en Siguiente. Y si tienes un logo para tu sitio web y quieres agregarlo ahora mismo con anticipación. Simplemente puedes seguir adelante y abrir la mediateca y recogerla de la mediateca o cargarla desde tu computadora. Pero no vamos a hacer eso ahora mismo. Por lo que sólo me quedaré con este paso. Y claro que podemos agregar el logo más adelante y te mostraré cómo hacerlo. Hagamos clic en Skip. Y ahora llegamos al último paso donde tenemos dos opciones. Podemos empezar a editar nuestra página de inicio desde un lienzo en blanco con el editor Elementor. O podemos navegar desde cientos de plantillas o importar nuestras propias plantillas si las tenemos. Pero yo seguiré adelante y saltaré. Eso. Será redirigido al lienzo donde ahora podemos empezar a construir un sitio web. Y aquí vamos. Entonces básicamente eso es todo lo que quería mostrarte. Es una nueva actualización. No estaba ahí hace unos meses. Ahora, ya está ahí. Pero todo lo demás en las próximas lecciones sigue igual. El proceso sigue siendo el mismo para construir una landing page. Entonces sin perder más tiempo, Pasemos a la siguiente lección. Voy a ir a este menú de hamburguesas y hacer clic en Salir a Dashboard. Salgamos de esta página. Ahora estamos dentro del tablero y estamos listos para comenzar a construir el sitio web. 10. Demostración: cómo instalar un complemento de WordPress: Bienvenido de nuevo. En la última lección, vimos lo que un iz tapón. Entonces ahora veamos cómo instalar y activar un plugin de WordPress. Entonces porque estaremos usando Elementor como nuestro constructor de páginas, Vamos a seguir adelante e instalar Elementor. Por lo que seguiré adelante y click plug-in para principiantes se llevará al menos de todos los plugins que tenemos actualmente. Y debido a que esta es una instalación totalmente nueva de WordPress, tengo que por defecto plugins aquí, deshacerme de ellos seleccionándolos. Después en este menú desplegable, seleccionando, Eliminar, luego aplicando. Muy bien, así que nos hemos deshecho de ellos. Y también quiero deshacerme de estas notificaciones astrales aquí. Entonces vamos a cerrar eso y ahora tenemos una pizarra limpia. Demos clic en Agregar Nuevo para que podamos ir al repositorio de plugins de WordPress. Y aquí quiero buscar Elementor. Elementor. Está bien, entonces debería ser el primer resultado aquí mismo, y es por elementary.com. Y notarás que aquí hay muchos otros plug-ins que tienen el nombre Elementor en ellos. Y estos son plugins desarrollados por desarrolladores de plugins de terceros porque Elementor en sí es un proyecto de código abierto. Entonces eso significa que puedes, puedes extender el poder del plugin de la misma manera que se creó elemental para extender el poder de WordPress porque WordPress es de código abierto. Por lo que estos chicos aquí han creado plug-ins, widgets, elementos que se pueden agregar a elementor y hacer tu proceso de diseño Reacher. Por lo que seguiré adelante y haga clic en Instalar ahora. Anular, entonces activaré. Y ahora está activo. Y así es como instalar y activar un tapón de WordPress. En la siguiente lección, vamos a tener una visión general rápida del espacio de trabajo elemental para que puedas familiarizarte con las herramientas y características con las que trabajarás para que estés cómodo mientras construimos el negocio de descargas digitales. Te veré en breve. 11. Descripción del espacio de trabajo de elementos: Bienvenidos de nuevo y bienvenidos a esta lección. En la última lección, vimos cómo instalar y activar un plugin de WordPress. Instalamos Elementor y debido a que estaremos usando elemental para construir unas páginas web, Vamos a tener una visión rápida del espacio de trabajo elemental para que podamos familiarizarnos con él. Entonces con nuestro pasar más tiempo, vayamos dentro de las páginas y añadamos nuevos. Pero antes de añadir mu, Digamos sólo páginas. Entonces haga clic en Páginas. Y debido a que esta es una nueva instalación de WordPress, tenemos estas dos páginas por defecto. Yo quiero eliminarlos, así que los seleccionaré a ambos. Y en este menú desplegable, muévete a la basura, luego aplica eso. Ahora vamos a crear una página totalmente nueva para que podamos abrirnos en un mentor y tomarla para dar una vuelta. Entonces démosle un nombre a nuestra página. Llamémoslo la página de inicio. Inicio. Y en el extremo derecho de la pantalla, notarás que tenemos estos ajustes aquí mismo. En Configuración. Ir a plantilla y seleccionar Elementor ancho completo. Llega dándole nombre. Entonces, publiquemos eso. Vamos adentro editar con Elementor. Entonces aquí estamos en el front end de la página que acabamos de crear. Y este es el espacio de trabajo elemental. Siempre que estés construyendo una página web o un encabezado. Así se verá el espacio de trabajo elemental. Aquí mismo. Esta es nuestra página y estará arrastrando elemento y herramientas desde el lado izquierdo a nuestra página y cualesquiera cambios que hagamos aquí mismo, podremos verlos surtir efecto en tiempo real y podremos haga clic en Vista previa de cambios y vea la página web sin estos ajustes, sin estos bloques. Entonces podremos ver eso. Ahora partiendo de arriba aquí mismo, tenemos este menú de hamburguesas. Si haces clic en él, tenemos algunos ajustes generales para la página web en el sitio web, pero no entraremos en eso por ahora. Sólo tienes que saber que tenemos algunos ajustes ahí dentro. Y luego antes de llegar a este ícono aquí mismo, en esta zona media, tenemos los diferentes elementos estarán arrastrando y soltando al espacio para construir la página web. Entonces si pudiera colapsar este panel básico ahí mismo y luego colapsar ese panel pro. Vamos a colapsar todos los paneles. Elemental proporciona estos paneles y anidados dentro de los paneles son los diferentes elementos que podemos arrastrar para construir nuestras páginas web. Entonces, por ejemplo, si arrastro este elemento de imagen y lo suelto ahí, ahora tenemos un elemento de imagen y notarás que esta área ha cambiado porque el elemento activo que actualmente está seleccionado en la página aquí es la imagen y por eso dice Editar imagen aquí arriba. Estos son los ajustes que podemos cambiar para cambiar el aspecto de la imagen. Y aquí hay más paneles para modificar los ajustes de la imagen. Entonces, permítanme borrar eso. Arrastremos algo más aquí, como el editor de texto. Y ahora aquí mismo es la configuración del editor de texto, y aquí arriba dice editor de texto. Entonces, cualquier elemento que se seleccione activamente aquí es el que aparece justo aquí. Y puedes configurar los diferentes ajustes para el elemento. Y ahora porque tenemos un elemento activo y sus ajustes que están apareciendo aquí, ¿y si quisiéramos agregar otros elementos a la página? No podemos ver los elementos. Entonces todo lo que tenemos que hacer es hacer clic en este pequeño icono aquí arriba y eso volverá a revelar los elementos. Entonces colapsando que ahora que hemos visto que el panel básico tiene elementos libres que la mayoría de los sitios web necesitan. Botones, texto, imágenes, videos, divisores. Vamos a colapsar eso. Si entramos al panel Pro, notarás que tenemos pro elements. Podemos utilizar estos elementos a menos que tengamos elemental Pro. Entonces si tratamos de arrastrar los elementos ahí dentro, este pop-up nos impide y dice Necesitamos la versión pro. Entonces déjame cerrar eso y colapsar el panel Pro, expandiendo el panel general, tenemos más cosas gratis aquí para que podamos arrastrar y soltar un testimonial ahí dentro. Déjenme cerrar eso hacia abajo entonces básicamente esta es la parte de elemental con la que estaremos interactuando la mayor parte del tiempo porque estaremos arrastrando elementos y luego, y luego modificando sus ajustes. Entonces lo siguiente aquí mismo al pie de página, tenemos el botón de actualización. A medida que realizamos cambios en la página web. Ejemplo, déjame arrastrar un botón allí. Si quieres guardar los cambios que hemos realizado hasta ahora, bueno, tenemos que hacer es dar click Actualizar. Y ahora se han guardado nuestros ajustes. Si salimos de esta zona, cuando regresemos, aún podremos continuar desde donde llegamos para ver los cambios sin este bloque de ajustes. Adelante y haz clic en Vista previa de cambios. Y abre la página que estamos construyendo y podemos ver cómo se ve. También tenemos el icono del modo responsive aquí mismo. Cuando es el momento de hacer que la página web receptiva para diferentes tamaños de pantalla, podemos hacer clic en ese modo responsive. Se va a traer esta barra aquí arriba que tiene puntos de rotura. Y aquí mismo tenemos los tamaños de los dispositivos, tenemos la tablet y la pantalla móvil. Y en la clase podrán usar este icono de modo responsive y ajustes para asegurarnos nuestro sitio web se vea impresionante en todos los tamaños de pantalla. Déjenme salir de ahí. Voy a hacer clic en eso para deshacerme de ese bar. A continuación tenemos el ícono de historia justo aquí. Si hacemos clic en eso, veremos cada movimiento que hemos hecho desde que empezamos editar la página y podemos volver a un punto específico en el tiempo. Entonces, por ejemplo, luego volver al punto en el tiempo en que teníamos la imagen agregada. Por lo que hacer clic en que todo lo demás que vino después de que se agregara la imagen ahora se deshace. Entonces esta es una gran característica en el sentido de que si has hecho algún cambio y no te gusta cómo se ven las cosas, puedes volver a esos ajustes que tenías hace un momento que se veían mejor. Entonces tenemos al navegante aquí. Por lo que al hacer clic que te trae este tipo de contorno y puedes tener una vista a ojo de pájaro de tu sitio web. Entonces si tenemos muchos elementos aquí, todo el camino hasta el fondo, y quieres tener una idea de dónde estás, una vista de pájaro de dónde estás. Este navegante nos ayudará. Entonces, solo duplicemos esto un par de veces. Duplicar eso. Haga clic derecho que replicó. Ahora tenemos tres secciones y si las ampliamos, cada sección tiene una columna, esta columna que está sosteniendo una imagen. Y de esa manera somos capaces de saltar rápidamente a diferentes secciones, editar esas secciones específicas. En aquí tenemos más configuraciones sobre estas páginas web en particular. Y veremos cómo usar todos estos ajustes. Entonces si pudiera salir de aquí, permítanme borrar estos. Permítanme borrar eso. Y eso es sólo un resumen rápido de Elementor. Por supuesto, llegaremos a entender cómo utilizar las diferentes herramientas y paneles aquí dentro a medida que construimos nuestras páginas, aprenderemos haciendo. Entonces. Eso solo estaba destinado para familiarizarte con el espacio de trabajo con el que estarás interactuando con nuestro paso más tiempo. Ya es hora de empezar a construir su página de aterrizaje de descargas digitales. Te veré en la siguiente lección. 12. Crea las páginas web: Bienvenido de nuevo. Ahora en las lecciones anteriores, hemos estado mirando tanto un CMS, lo que estamos prensas en cómo funciona WordPress. Entonces ahora con esa comprensión bastante sólida de estos conceptos, es hora de ensuciarnos las manos. Sam, para empezar a construir nuestra página web. Entonces sin perder más tiempo, vayamos por dentro de las páginas. Y debido a que se trata de una instalación totalmente nueva de WordPress, aún no tengo ninguna página web creada, así que seguiré adelante y añadiré nuevas. Entonces esta va a ser nuestra página de inicio. Por lo que voy a golpear Publicar o montar en Ahora está publicado. Podemos ver la página, pero sólo quiero volver dentro nuestras páginas menos y crear el resto de las páginas, entonces podemos verlas a medida que las construimos. Por lo que volviendo ahí, diré Agregar Nuevo para que podamos crear unos cuantos más. Simplemente llamaré a éste descargas. Aquí es donde mostraremos todos nuestros productos digitales y se publica. Voy a repetir dos veces más para la página del blog y la página Contacto, voy a añadir nuevo. Y esa es la página de blog publicada que publicó. Y por último, vamos a crear la página de contacto y publicar esa anulación. Entonces volvamos aquí. Y ahora tenemos cuatro páginas web listas para ser pobladas con contenido. Sigamos adelante y creemos nuestro menú de navegación. Y usaremos estas páginas web como nuestros elementos de menú. Elementos de menú como estos. Así que sigamos adelante y creemos un nuevo menú de WordPress. En la siguiente lección, nos vemos en breve. 13. Crea un menú Nav de WordPress WordPress: Bienvenido de nuevo. En la lección anterior, creamos nuestros sitios web, páginas web. Ahora es el momento de crear nuestro menú de navegación del sitio web. El menú que estará en la parte superior, así. Y así estaremos utilizando nuestras páginas web como nuestros elementos de menú. Por lo que va dentro de los menús de apariencia. Lo primero que notarás es que tenemos estos crean tu primer menú a continuación, porque aún no tenemos menú. Para que podamos darle un nombre a nuestro menú. Y hagámoslo nuestro menú primario. Después haré clic en Crear menú o paseo. Por lo que ahora se crea nuestro menú. Y como puedes ver aquí mismo, podemos añadir elementos de menú desde la columna de la izquierda. Esta columna aquí. Y si colapso estas páginas panel, notarás que también tenemos posts, enlaces personalizados, categorías. Por lo que estos son todos diferentes tipos de contenido que puedes usar como elementos de menú en tu menú. Pero queremos utilizar nuestras páginas web como nuestros elementos de menú, las páginas web que creamos. Por lo que los seleccionaré a todos. Y luego voy a añadir al menú. Y ahora se han sumado a nuestro menú. Déjame simplemente arrastrar este elemento de inicio para ser las primeras descargas y luego contacto del Blog será el último ítem de nuestro menú de navegación. Voy a guardar menú. Y ahora nuestro menú está guardado y actualizado. Entonces lo siguiente que queremos hacer, ahora que tenemos nuestro menú de navegación lo diseñamos en el front end en el sitio web real para que la gente sea capaz de ver e interactuar con él así como así. Entonces hagámoslo en la siguiente lección. Te veré en breve. 14. Diseñar la navbar con Elementor: Bienvenidos a esta lección. Por lo que para diseñar la barra de navegación, necesitaremos instalar otro plugin que sea una extensión de Elementor. Y se llama Encabezado Footer builder plug-in para Elementor. Entonces, vayamos adentro. Plugins, Añadir Nuevo. Entonces sigamos adelante y tecleemos Header Footer builder. Y aquí lo tenemos. Entonces vamos a instalar Elementor cabecera o pie de página constructor por fuerza de lluvia de ideas. Sí, así que sigamos adelante y activarlo. Y ahora está activo. Por lo que para acceder y usarlo, iremos bajo Apariencia. Y notarás que ahora es uno de los elementos del menú aquí. Entonces hagamos clic en Elementor, constructor de encabezado y pie de página. Y una vez que creemos nuestros encabezados y pies de página, aquí estarán listados, pero por ahora no tenemos ninguno. Así que digamos Agregar Nuevo. Y quiero saltarme esto. Muy bien, Así que vamos a darle un nombre a nuestra barra de navegación. Entonces ahora bar, ese sería un buen nombre. Y bajo tipo de plantilla, digamos que es un encabezado. Y digamos mostrar en toda la página web. Y por si acaso tienes gente debajo de ti, eres el medio del anuncio, y también tienes gente trabajando en el sitio web. Se les puede dar diferentes roles. Puedes decidir quién puede editar estas barras de navegación y quién no puede editar. Entonces digamos que todos están permitidos. Y luego en el extremo derecho aquí bajo plantilla, Vamos a seleccionar Elementor ancho completo porque queremos que la barra de navegación se ejecute todo el camino de izquierda a derecha de la pantalla. Y bajo la barra lateral de ajustes de Astro. Seleccionemos ninguna barra lateral porque no queremos barras secundarias. Para el diseño de contenido. Digamos ancho completo, barra estirada. Y desactivemos el encabezado principal, el encabezado móvil, título y el pie de página, porque no queremos usar los encabezados y pies de página de Astra predeterminados. Nosotros queremos construir la nuestra propia, que es lo que estamos tratando de hacer en este momento. Entonces con esos ajustes, Digamos Publicar. Y entonces digamos Editar con Elementor. Por lo que ahora podemos ir al front end y empezar a construir visualmente la barra de navegación. Entonces aquí estamos en el frente. Queremos diseñar visualmente la barra de navegación. Entonces haré clic en ese botón más y escogeré una sección de triple columna aquí mismo. El triple columna aquí será de tal manera que en esta columna tengamos el logo. Por lo tanto, permítanme añadir un elemento de imagen, hacer clic en el signo más, luego arrastrar un elemento de imagen ahí dentro. Y voy a dar clic aquí para que podamos seleccionar la imagen del logotipo. Y como aún no tengo ninguna imagen cargada, tendremos que ir adentro, subir archivos y seleccionar archivos. Por lo que prepararé estas carpetas llamadas activos del proyecto y la encontrarás en la siguiente descripción. Tiene todo lo que necesitamos para este proyecto, incluido el logotipo. Por lo que aquí tenemos logotipos. Déjame arrastrar, agarra los dos logotipos. Uno es como uno está oscuro porque vamos a necesitar uno para el pie de página, pero para el encabezado enfrenta lo que estamos usando. Por lo que al seleccionarlo, inserte medios. Y ahora el logo se ve impresionante. Entonces déjame solo arrastrar eso para aumentar un poco el tamaño. Y se ve bien. Entonces lo siguiente, voy a ir a esta columna aquí y hacer clic en el signo más. Y aquí dentro voy a teclear nav. Y aquí tendremos estas opciones de Nav. El que nos interesa es el HF ser jefe de comida o constructor nav bar. Entonces déjame arrastrarlo a esa columna. Y en el momento en que lo sueltes ahí, los cuatro elementos de menú que creamos antes, es decir, aparecen las páginas web recreadas, aquí arriba. Yo quiero mostrar algo muy rápido. Así que déjame hacer clic en eso y salir del panel. Y recordarán que pasamos por los menús de Apariencia. Y creamos estos menús y agregamos estos cuatro elementos de menú al menú y lo hicimos nuestro menú principal. Por lo que ahora volviendo dentro del constructor de pie de encabezado elemental, y haciendo clic en Editar con Elementor en nuestra barra de navegación. Ese es el mismo menú que estamos viendo aquí. Entonces permítanme sólo seleccionar eso. Recuerda que llamamos al menú, y esto es lo que tenemos aquí. Entonces vamos a seguir adelante y darle estilo a la napa en la siguiente lección, nos vemos en breve. 15. Estilo de la barra de navbar elementor: Por lo que ahora es el momento de darle estilo a nuestra barra de navegación y específicamente a este menú. Porque por ejemplo, cuando pasemos el cursor sobre los elementos del menú, notarás que hay verde, pero nuestro tema es amarillo y negro, así que tenemos que hacer algo al respecto. Por lo que seleccionando el menú para activarlo aquí, voy a ir dentro de estilo. Y si pudiera simplemente colapsar este menú principal por un segundo, observe que tenemos tres elementos principales, tres menús desplegables principales. Y así cuando ampliamos el menú principal, podemos seguir adelante y seleccionar la tipografía. Déjame desplazarme hacia arriba y cambiemos la fuente a Montserrat. A mí me gusta Montserrat. Entrar. Y creo que se ve mejor. Haré clic en cualquier lugar fuera de la caja para deshacerme de ella. Entonces en algún lugar ahí. Y al pasar el cursor, notarás que el color aquí es verde, el color del texto es verde. Queremos cambiar eso a este amarillo. Entonces déjame solo ver si puedo agarrar un bonito amarillo aquí. Ahí lo tenemos. Por lo que necesitamos actuar. También necesita tener ese color amarillo. Por lo que seleccionaré este amarillo y copiaré. Después ve dentro activo y pega ahí dentro. Entonces ahora es amarillo en hover. Y cuando está activo también es amarillo. Entonces permítanme actualizar eso. Y vamos a previsualizar los cambios. Entonces ahí lo tenemos. Entonces vamos a dar clic en Inicio. Y ahora que está activo, como puedes ver, es amarillo. Entonces así es como crear la barra de navegación. Un poco más tarde cuando estaremos creando la funcionalidad de búsqueda para el sitio web, agregaremos la barra de búsqueda aquí mismo, pero no te preocupes por eso por ahora. Lo siguiente que queremos hacer es diseñar la carpeta que después de tau pueda crear los contenidos principales de la página web. Entonces entrando aquí, déjame actualizar esta barra de navegación para que podamos decir los cambios. Entonces sigamos adelante y creamos una carpeta en la siguiente lección, nos vemos en breve. Just 16. Diseñar el pie de pie: Bienvenido de nuevo. Entonces sigamos. Ya hemos creado los sellos de barra de navegación para crear la carpeta, para crear la foto hará exactamente lo mismo que hicimos con la barra de navegación. Entonces ahora que tenemos nuestra, nuestra barra de navegación guardada, haré clic en este menú de hamburguesas y Salir a Dashboard. Y voy a ir y apariencia Elementor cabecera y poner un constructor una vez más. Y por supuesto puedes ver nuestra barra de navegación listada aquí ahora. Por lo que voy a decir añadir nuevo. Esta vez es un tipo de carpeta de curso de plantilla es para la visualización en toda la página web. Podemos editarlo todos los roles. Todos, cualquier persona en cualquier fila. El template es Elementor de ancho completo, no hay barra lateral aquí. Disposición de contenido para trigo estirado. Entonces desactivemos estos valores predeterminados. Por favor, las secciones de encuesta aquí. Y luego digamos Editar con Elementor o cabalgar. Y ahora que estamos editando la carpeta, por supuesto ahora la barra de navegación no es editable porque está apareciendo porque es parte de la página web. Pero no estamos en la zona donde estamos editando la napa, así que no podemos seleccionar estos y empezar a arrastrarlo con, simplemente no se puede hacer eso. Ahora sólo la carpeta es editable. Y así voy a hacer clic en el signo más aquí y añadir, digamos agregar esto por ahora. Y arrastraré estos puntos demasiado malos en alguna parte. Haga clic en este signo más, y agreguemos nuestro logotipo aquí. Voy a hacer clic en eso. Y esta vez quiero recoger estas luces, logo, insertar medios. Y por supuesto ahora no se puede ver la primera mitad del logo porque es ancho. Por lo que queremos darle a esta carpeta un color de fondo. Por lo que haciendo clic en esa sección media aquí mismo. Y yendo al fondo estilo, tipo de fondo. Haga clic en esta casilla aquí, y démosle un color oscuro. A lo mejor en algún lugar ahí, un color que coincida con estos grises oscuros. Esto no es negro puro. Por, claro, puedes darle cualquier color que quieras. Ahora que tenemos eso, vamos a darle a este logo algo de espacio en la parte superior y en la inferior. Entonces mientras esto todavía está seleccionado, solo haré clic derecho y editaré sección de nuevo. Voy a ir a Avanzado, y voy a ir al relleno, quitarle estos vinculación y darle un relleno superior de 50 y un relleno inferior o 50 000, ¿no? Por lo que ahora tenemos alguna bonita habitación en la parte superior y la inferior. A continuación, vamos, vamos a añadir algo de texto aquí, algún texto descriptivo. Entonces arrastraré estas sábanas ahí dentro. Y digamos algo así como descargas gratuitas para, bien, Y mientras todavía estamos aquí, vamos al color del texto de estilo. Vamos a arrastrar eso todo el camino hasta allí. Haga clic en cualquier lugar fuera de ese cuadro para deshacerse de él y haga clic en Topografía para que podamos cambiar la familia de fuentes a Montserrat así. Y quiero cambiar la tipografía. peso cambiará el peso de la fuente a algo así como ochocientos. Ochocientos. Se ve bien. Y volvamos al contenido. Y pongámoslo en el medio, así. Llegar. Siguiente. Hagamos clic en este minúsculo icono aquí mismo para sacar a la luz los elementos. Y vamos a arrastrar algún editor de texto ahí dentro. Y mientras aún está activo, vayamos dentro de estilo, cambiemos este color a blanco. Y pongámoslo en el medio así. Ahora piensa que tal vez vamos a añadir algunos iconos de redes sociales aquí mismo. Entonces agreguemos click en eso. Y luego aquí dentro, escriba redes sociales. Arrastremos esto ahí dentro. Impresionante. Pero ahora hay dos grandes, Vamos a reducir el tamaño mientras aún está seleccionado. Vayamos al tamaño de estilo. Creo que me gusta ese punto de ahí mismo, y quiero, quiero empujarlo hacia la izquierda. Entonces vayamos al contenido y empujémoslo a la izquierda así. Actualizar eso. Y a la derecha, Vamos a añadir tal vez una lista de enlaces. Entonces entraré aquí y clic en eso para volver a subir los elementos. Y aquí dentro, escribiré menos. Sí, digamos que puedo enumerar y arrastremos ahí la lista de iconos. Y por defecto tiene tres artículos. Entonces empecemos con el primer elemento aquí y renombrarlo puede ser algo así como una categoría de productos digitales como logotipos. ¿ Verdad? Número dos, digamos algo mentira. Revistas. Digamos que también vendemos plantillas de Elementor y podemos seguir agregando más elementos aquí ya que por favor decimos algo así como gradientes. Actualizar eso. Y ahora entremos aquí y stylet. Bajo estilo, Vamos a deletrearlo primero los textos. Ahora mismo digamos ese color a blanco. Vamos a colapsar eso por un segundo. Entra icono y cambia el color para que sea amarillo. Copiamos un todavia lo tienen en mi portapapeles. Pero sólo se puede seleccionar manualmente. Pero sólo se puede ajustar manualmente. Por lo que ahí lo tenemos. Es amarillo en estado normal, pero en el hover queremos que sea blanco. Entonces, sin embargo, está cambiando a cuello blanco. Digamos en Hoover, los textos que cambias ese amarillo. Entonces al hover cambia a ese amarillo. Impresionante. Si bien aún está seleccionada, alinémoslo a la derecha, así. Y vamos a tirar de esto todo el camino hasta el final. Y vamos a actualizar eso. Vista previa de los cambios. Perfecto. Este es un pie de página muy sencillo. Por supuesto, podemos hacerlo mucho mejor, y eso depende realmente de ti. El punto principal aquí es entender cómo armar el sistema, pero afinar todo y hacer que todo se vea súper impresionante. Todo depende de ti en tu creatividad. Pero claro que podemos mejorar un poco esto. Yo quiero empujar esto porque veo estos textos parece estar demasiado cerca de este logo. Yo en primer lugar quiero arrastrar esto más hacia la izquierda, hacia la derecha así. Y arrastra esto un poco. Pero quiero seleccionar esta columna aquí específicamente. Al ir dentro del margen avanzado, eliminemos ese margen. Y para el margen izquierdo, aumentémoslo a algo como tirar cualquiera, Probemos eso. Actualización, que los cambios de vista previa. Sí, creo que ahora mismo se ve mucho mejor, centralizado y todo parece estar posicionado correctamente. Es así como crear nuestra carpeta y napa, lo siguiente que queremos crear nuestros contenidos principales, como en estas páginas. Y queremos empezar con la sección de héroes. El héroe sección E, el área que ves en el momento en que abras una página de aterrizaje como esta, tiene algo de texto e imagen, no tendrá nuestra barra de búsqueda en la sección de héroes. Entonces sigamos adelante y creamos la sección de héroes en la siguiente lección, nos vemos en breve. 17. Diseñar la sección de héroes: Bueno, bienvenido de nuevo. Entonces ahora que tenemos nuestra barra de navegación y pie de página listos, es momento de empezar a crear el contenido principal de las páginas web y comenzaremos con la página de inicio. Por lo que no volveré a ir a este menú de hamburguesas y Salir a Dashboard. Y vayamos por dentro de las páginas. Y ahora, como mencionamos, queremos empezar con la página de inicio, así que edita. Muy bien, así que saltando hacia el lado derecho, por aquí debajo de Ajustes, ve a plantilla. Y vamos a seleccionar Elementor ancho completo. Y luego vamos a hacer clic en el icono de Astra aquí mismo para cambiar algunos ajustes de Astro. Y al igual que hicimos con la barra de navegación y el pie de página, queremos decir que no hay barra lateral. Disposición de contenido Elementor, ancho completo, disposición de contenido para anchura estirada. Y no queremos usar los valores predeterminados, los encabezados primarios, y todos estos otros elementos que vienen con Astra. Queremos crear la nuestra propia con Elementor. Entonces por eso estamos inhabilitando todos estos. Y digamos Actualización. Y ahora que está actualizado, Vamos a seguir adelante y haga clic en editar con Elementor porque lo estaremos diseñando visualmente en la frontera. Perfecto. Por lo que ahora te darás cuenta de que tenemos espacio entre la Napa y la carpeta. Y podemos empezar a poblar la página con los diferentes tipos de elementos que queremos. Y simplemente cambiando a uno de estos sitios web de referencia aquí, estamos empezando con la sección de héroes, que tiene, déjame sólo ir a la página de inicio de Creative Market por un segundo. Por lo que notarás aquí en Creative Market tienen este bonito texto que resume de qué se trata toda la página y todo el negocio. Y tienen una imagen como ejemplo de algunos de los contenidos que puedes encontrar en la página web. Entonces vamos a crear esta sección de héroes muy rápidamente. Y se ve más o menos igual que la sección de héroes de página de préstamos de río gráfica. Por lo que volviendo dentro de nuestra página del proyecto, diré Agregar Nuevo. Y por supuesto necesitamos dos columnas. En esta columna. Adelante y sumamos. Hagamos clic en el icono más justo ahí y arrastremos un encabezado de texto allí. Digamos algo así como descargas ilimitadas. Así. Vamos dentro de estilo y cambiemos el color ahí mismo a algo así como 40. 40. 40. Sí. Y mientras aún está seleccionada, sigamos adelante y cambiemos la familia de fuentes a Montserrat. Y quiero darle un peso de fuente de 800. Y quiero aumentar en, sigamos adelante y aumentemos el tamaño, el tamaño de la fuente, hasta ese punto. A continuación, vamos a dar clic a este icono aquí mismo para que aparezcan los elementos y arrastre un editor de texto allí. Y por supuesto puedes personalizar estos textos para leer lo que quieras decir. Entonces para bien, así que permítanme simplemente quitar esta última frase ahí mismo. Actualizar eso. Adelante y agreguemos un botón. Entonces arrastraré un botón justo debajo de ese texto. Y aquí dentro, haré clic en este botón más para agregar un elemento de imagen. Haciendo click dentro aquí es ir adelante y buscar una bonita imagen para tener como nuestra imagen de sección de héroe. Entonces creo que podemos ir con algo como esto. Abrir ese medio de inserción. Y ya está empezando a tomar forma. Pero claro, al igual que hicimos con la Napa, sigamos adelante y cambiemos este color verde para que coincida con el tema de nuestro sitio web. Por lo que seleccionando este estilo de botón. Iré a color debajo de botón. Color. Y vamos a darle ese 404040. Y propio Hoover, ¿quién quería ser eso? ¿ Amarillo? Todavía lo tengo en mi portapapeles. Entonces en sin embargo es amarillo, estado normal, es negro. Pero ahora queremos cambiar lo que dicen los textos. Entonces, mientras aún está activo, vamos a entrar dentro del contenido y seleccionar el área de texto aquí y digamos explotar descargas. Sí. Y podemos seguir adelante y agregar un icono justo antes que él. Por lo que todavía estaba bajo el botón Contenido. Seleccionemos biblioteca de iconos. Y digamos, Sí, algo así. Creo que esto me gusta. Inserta eso. Y ahora tenemos estos hermosos ícono justo antes del texto. Y he notado que no hemos cambiado el texto a Montserrat, así que volveré a seleccionar el botón. Ir dentro de estilo, tipografía, font-family, Montserrat para la uniformidad. Igual que eso. Y también quieren aumentar un poco el relleno. Entonces mientras seguimos bajo estilo, me desplazaré hacia abajo e iré al relleno. Elimina este enlace, y eso destruirá el botón por un segundo. Pero lo que queremos hacer es darle un relleno de 45 a la izquierda. Eso es por 50. 45. Y a la derecha, 45. Para la parte superior. Démosle un 20. Y el fondo también. Correcto, Así que ahora tenemos un bonito relleno por todos lados que dice actualizar eso. Y reconstruyámoslo cambia. Necesitamos un poco de espaciado aquí por encima del encabezamiento. Entonces vamos adentro aquí y seleccionemos la columna en sí. Y bajo Avanzado, Vamos a darle el relleno superior. Quitemos el eslabón en el relleno. Vamos a darle un relleno superior de 16. Actualizar eso. Y vamos a previsualizar los cambios. Impresionante. Entonces vamos a seleccionar la imagen y vamos a darle algunas esquinas redondeadas sólo para que no tenga estos bordes afilados como ese. Por lo que mientras está seleccionado, iré al estilo border-radius. Démosle algo así como 20. Actualizar eso. Y vamos a previsualizar los cambios. Sí, se ve mucho mejor. Entonces creo que ahora la sección de héroes está lista. Recuerda el objetivo aquí no es crear sitio web muy bonito por el momento, estamos tratando de entender cómo crear el sistema en sí que permita un cliente venir a la página web, explorar los productos que tenemos. Haga clic en un producto, abra la descripción de una sola página del producto donde tengan toda la información sobre ese producto en particular y puedan comprar o descargar. Eso es lo que realmente queremos entender. Entonces sigamos adelante y creamos los productos que se mostrarán debajo de la sección de héroes. Y lo haremos en la siguiente lección. Entonces te veré en breve. 18. Crea las categorías de productos: Bienvenido de nuevo. Nuestra sección de héroes ya está lista. Salgamos al tablero. Por lo que haciendo clic en ese menú de hamburguesas Salir a Y asegurémonos de que hemos salido completamente del, de acuerdo, así que ahora que estamos dentro del tablero, queremos entender cómo estaremos trabajando con nuestros productos a medida que avanzamos. Pero ahora mismo, mi suposición es que estarán vendiendo diferentes tipos de productos digitales. Entonces, por ejemplo, si eres diseñador gráfico, tal vez quieras vender logotipos, plantillas de volantes, plantillas de póster, plantilla de perfil de empresa. Podría estar vendiendo elementos de diseño web y elementos de diseño gráfico. Por lo que esas son diferentes formas de categorizar los diferentes productos digitales que podrías vender. Entonces, ¿cómo se hace eso? Porque si pudiéramos saltar rápidamente dentro de Creative Market, por ejemplo, como ya hemos visto, categorizan sus productos en plantillas Canva, maquetas de producto, plantillas de Instagram en todas estas categorías. Entonces volviendo a nuestra página aquí mismo, Vamos dentro de los posts. Voy a dar clic en publicaciones. Estamos creando nuestros productos digitales como posts. Y a medida que avanzamos, entenderás que WordPress te permite crear diferentes tipos de contenido de diferentes tipos de formas. En una de las formas de crear contenido para tu sitio web es creándolo como post. Por lo que su producto digital puede crearse como un post. Si publicas artículos, los publicas como publicaciones de WordPress. Se puede crear un podcast y publicar episodios de podcasts como publicaciones de WordPress. Por lo que en este momento queremos publicar nuestros productos digitales como publicaciones de WordPress. Y llegarás a entender por qué eso es muy poderoso, porque eso es lo que nos permitirá poder abrir el post en el front-end con Elementor y diseñarlo visualmente de una manera hermosa para llegar a una bonita página de una sola página, el guión mostró una bonita pantalla de productos digitales y todo eso. Por lo que antes de crear cualquier producto digital aquí, queremos crear las categorías. Entonces haga clic en categorías. Y por supuesto que conformaré mis propias categorías. Ahora por defecto, siempre hay una categoría sin categoría. Todo contenido que no tenga categoría va dentro de la categoría sin categoría. No se puede eliminar esta categoría. Entonces vamos a crear los nuestros propios. Por lo que voy a empezar con logotipos. Hit Enter revistas. Yo diré Elementor. Digamos que esas son las tres categorías de productos que quiero vender en este sitio web. Pero por supuesto tendrás tus propias categorías. Ahora que tenemos nuestras categorías definidas y podemos sumar más, estamos listos para empezar a crear nuestros productos digitales. Entonces vamos a crear nuestros primeros productos digitales. En la siguiente lección, nos vemos en breve. 19. Diseño de una página de descripción de productos: Bienvenido de nuevo. Ya es hora de crear tu primer producto digital. Y como mencioné en la última lección, vamos a crear tus productos digitales como publicaciones de WordPress. Entonces para crear tus primeros productos digitales, mientras seguimos bajo publicaciones, digamos Agregar Nuevo o correcto, así que vamos a darle un nombre. Algo así como quiero crear un producto que irá a la categoría Elementor. Recuerda una de las categorías que creamos fue Elementor. Por lo que tengo algunas plantillas elementales que ya preparé de antemano. Y quiero crear productos para que esa categoría empiece con. Entonces digamos culturista, plantillas. Plantilla. Y por supuesto, como de costumbre, empezaré por entrar en la configuración de Astro y establecer esto en ninguna barra lateral. Diseño de contenido, ancho completo estirado, luego deshabilitar estos cinco elementos justo ahí y luego el pie de página. Y luego vayamos dentro de la configuración donde procedimientos bajo Plantilla cambien los valores predeterminados, plantillas a Elementor ancho completo y publicado allí. Vamos a publicar eso. Y nuestra ortografía aquí está mal, así que permítanme simplemente corregir su actualización eso. Y con esos ajustes, Vamos a seguir adelante y diseñarlo en el front end usando Elementor override. Entonces aquí estamos. Lo vamos a diseñar aquí mismo. Y solo para mostrarte el equivalente de lo que estamos diseñando en una plataforma diferente. Vayamos al Mercado Creativo. Y abramos uno de los productos. Haré clic en este paquete de fuentes para abrirlo. Y ahora esta es la única página de producto que estamos diseñando. Estamos diseñando una página que tiene todos los detalles sobre ese producto específico en el que has hecho clic. Por lo general, encontrarás en la mayoría de los sitios web que hay una imagen del producto en sí. Y en el lado derecho, típicamente encontrarás que tienes el botón de pago y una breve descripción de qué tipo de producto es. Y abajo, probablemente muestras de qué pasaría si van dentro de río gráfico. Abramos uno de los productos aquí. Vayamos adentro. Déjame abrir este producto. Lo mismo, un río gráfico. Tenemos esta imagen. Después tenemos el botón Agregar al carrito y el botón Comprar ahora, una breve descripción del producto M a continuación aquí. Ahora tenemos todas las descripciones y enlaces a enlaces importantes relacionados con estos productos. Entonces lo que estamos tratando de hacer se logra lo mismo. Si pudiera empezar por crear una columna doble. Aquí, vamos a añadir un elemento de imagen. Y pinchemos aquí para seleccionar una imagen. Y debido a que aquí no tenemos una imagen de producto, vamos a subir los productos de la carpeta. Recuerda, mencioné que puedes encontrar esta carpeta de activos del proyecto en la siguiente descripción. Descárgalo. Allí encontrarás todas estas imágenes. Y las imágenes que necesito en este momento son 12. Solo subamos todas las imágenes porque las estaremos usando en el futuro. Así. También le gustó esta imagen. Insertar medios. Y así es como se ve. Entonces déjame solo aumentar un poco el tamaño. Y de este lado, haré clic en el signo más aquí y arrastraré. Escribamos primero el encabezamiento. Y para el rubro, Vamos a darle al producto el nombre que le dimos en el backend, que era plantilla de culturista o RI. Y hagámoslo uno. Actualizar eso. Entonces déjame solo hacer clic en eso. Te darás cuenta de que tenemos uno todo el camino para odiar busca y estos son encabezamientos, encabezando niveles. Uno es el encabezamiento más grande en HTML, mientras que HCX es el más pequeño y menos importante en la jerarquía, una regla general es tener un H1 en cada página web. Y que uno necesita tener la palabra clave para esa página web en particular con el fin de clasificar en motores de búsqueda como Google y Bing. Debido a que esta es una página de producto, necesitamos tener esta plantilla de culturista como una que diga a los motores de búsqueda que esta página web se trata de esto. Y si bien esto sigue seleccionado, voy a ir dentro de estilo para cambiar el color. Yo le daré esos 40, 40, 40. Vamos a cambiar la familia tipográfica a Montserrat. Y vamos a darle un peso de fuente de 800. Quiero seleccionar esta columna aquí, solo para que podamos agregar algo de relleno en la parte superior y empujar estos bonos de plantilla body builder hacia abajo. Por lo que mientras la columna sigue seleccionada, iré por dentro avanzado. Elimina ese eslabón ahí mismo y dale un margen superior de relleno superior de 50. Está bien, así que eso es un buen espaciado ahí arriba. Y ahora haz clic en eso y vamos a arrastrar alguna breve descripción aquí justo debajo de ese texto. Y haz clic en ese ícono aquí mismo para que aparezcan los elementos. Y arrastremos un botón justo debajo de ahí. Por ahora, este es un botón de soporte de lugar reemplazará este botón con el botón de descarga o compra real. Entonces solo lo estamos dejando ahí por ahora. Por lo que esto desaparecerá en algún momento de futuras lecciones. Entonces cambiemos este texto para descargar. Dale un D mayúscula, actualiza eso. Y ahora nota que la imagen y el texto están demasiado unidos, por lo que necesitamos un poco de espacio entre estas dos columnas, seleccionando la sección que está sosteniendo las dos columnas. Queremos decir bajo Layout, columnas gap, Digamos ancho, Digamos más amplio. Actualizar eso. Y vamos a previsualizar los cambios o escribir súper impresionante, ahora está empezando a tomar forma. Cambiemos este verde para rimar con el resto de la página web. Entonces seleccionando ese botón ahí mismo. Vayamos dentro de estilo. Démosle ese color amarillo. Actualiza eso ahora para consistencia, siempre, siempre que estés usando algún amarillo aquí, asegúrate de que sea el mismo amarillo. Así que solo copias el código en algún lugar y en cualquier lugar que quieras colocar el amarillo, usa ese mismo código. Entonces ahora mismo así es como se ve en el hover. Queremos que sea negro. Entonces vamos adentro hover color. Así es como nos veríamos. Si bien todavía estamos aquí. Vamos al relleno y rompamos eso. Entonces vamos a darle un relleno izquierdo de 45. 45. Y eso es 450 otra vez. 45. Piensa que tal vez vamos a darle a esto un 15. 15. El likey que son ahora. Y vamos a seleccionar la imagen. A mí me gusta tener esquinas redondeadas. Por lo que seleccionaré la imagen, coincidiré Estilo, y bajaré border-radius y le daré un radio de borde de 20. Sí, eso me gusta a la ligera. Actualizar eso. Y vamos a previsualizar los cambios. O bien, está empezando a tomar forma. Entonces si, por ejemplo, tu negocio está vendiendo libros electrónicos o cursos, claro que esta será la imagen de tus cursos. Necesitas que sea convincente y hermoso. Lo siguiente que queremos hacer es agregar alguna descripción a continuación aquí. Entonces vamos a crear un, vamos a hacer de nuevo una columna doble, y vamos a darle un selecto esa sección en sí, ir a Avanzado, romper este enlace de margen aquí mismo. Y vamos a darle un margen superior de 50 para que podamos separarlo de esta otra sección. Entonces démosle un 50. Y ahora hay esta habitación entre ellos. Entonces aquí, vamos a hacer clic en el signo más allá y arrastrar eso ahí dentro. Y quiero seleccionar eso, y quiero cambiarlo a. Plantillas, este schon. Entonces esta es la descripción. Por supuesto, cambiemos ese color por el color que nos gusta por consistencia, dando click en cualquier parte para deshacernos de eso. Y luego ir dentro de la topografía, font-family, cámbiala a Monterrey hacia fuera. Y vamos a darle tal vez ese tamaño. Vamos a arrastrar eso todo el camino hasta probablemente ese punto y verás por qué en breve. Entonces seleccionando eso de nuevo, quiero darle un peso de fuente de 800. Y luego justo debajo de ella. Adelante. Hagamos clic en eso para que aparezcan elementos y agreguemos alguna descripción aquí. Simplemente copiaré todo esto y lo duplicaré ahí mismo. Justo como un ejemplo de tu descripción de tu producto, pero necesita ser detalle. Permítanme que actualice eso. Entonces eso es lo que nos provees aquí. De acuerdo, lo siguiente que queremos hacer es copiar este botón. Copiar eso. Haga clic en cualquier lugar dentro de este editor de texto y pegue. Actualicemos eso y previsualicemos los cambios. Desplazemos hacia abajo. Entonces eso es lo que tenemos, pero aquí mismo, no hay espacio entre estos elementos. Entonces aumentemos ese espaciado de ahí abajo. Entonces esa es esta sección. Seleccionaré la sección, iré al margen inferior y le daré tal vez algo así como 90. Por lo que ahora hemos aumentado el espaciado de 90 píxeles en la parte inferior de esta sección, justo antes de donde se reúne con una carpeta. Entonces vamos a previsualizar los cambios. Está bien, así que ahora tenemos esa bonita brecha ahí mismo. Pero no hemos terminado. Tenemos que añadir algunos artículos más allí. Cuando necesitamos agregar artículos probablemente relacionados, como productos relacionados y algunas descripciones de productos aquí. Por lo que volviendo dentro de aquí, me gustaría entrar aquí y hacer clic en el signo más aquí. Escribiré lista. Arrastre esa lista de iconos dentro de allí. Y para aumentar el espaciado entre estas dos columnas aquí, seleccionaré la sección en sí. Ir a Layout. Las columnas se ensanchan más. Los necesito muy amplios. Y ahora aquí es donde proporcionamos la descripción del producto en breve, por ejemplo, cosas como tamaño de archivo, digamos algo así como formatos JSON de 2.52.5 MB o RI. Veamos qué otras cosas quisiéramos. ¿ Algo así como? Vamos a duplicar eso, Vamos a añadir otra descripción. Por lo que esta podría ser versión o escribir algo de ese tipo. Y por supuesto, digamos a estos botones que sean consistentes con un sitio web. Y no me gusta este color amarillo. Es cremoso de 2. Queremos el botón negro, pero amarillo propio se cierne. Entonces vamos a cambiarlos. Yo quiero copiar ese amarillo que va dentro aquí en estado flotante, pegarlo ahí dentro, y luego volver a la normalidad y cambiar eso para que así me guste. Eso es mucho mejor. Dejemos eso es amarillo, y dejemos eso como negro. Por lo que seleccionando de nuevo esta. Adelante y digamos estilo. Para el ícono. Cambiemos eso por el amarillo. Acabamos de copiar. Pegado así. Déjame darte un color hover. Está bien. Vayamos a los textos. También le dan ese efecto hover. Ahora hazlo ese mismo amarillo para la consistencia. Entonces revisemos los cambios. El único producto aquí mismo está tomando forma. Tenemos una imagen. El cliente puede leer la breve descripción de lo que quieras decirles aquí mismo y haciendo ir adelante y comprar. Recuerda dijimos que vamos a reemplazar este botón el botón de compra real o comprar ahora o agregar al carrito. Si se trata de productos gratuitos, vamos a tener un botón de descarga aquí mismo. Y por supuesto aquí mismo el cliente puede leer más detalles sobre el producto en sí y tener una visión general rápida de los datos importantes sobre ese producto aquí mismo. Y pueden seguir adelante y descargarlo o por una vez más. Por lo que queremos que sea lo más fácil posible para que el cliente compre. Por eso tenemos estos botones por todas partes. No queremos tenerlos hay que desplazarse hasta la parte superior para buscar el botón de descarga. Entonces si se desplazaron a algún punto donde no pueden ver el botón de descarga, es necesario tener otro botón Descargar o por botón. Y tenemos la carpeta. Una vez que creemos más productos tendrá productos relacionados justo debajo de estos botón Descargar. No vamos a tener eso ahora. Pero así es como crear la página única del producto. Ahora, todo lo que necesitamos hacer para tener productos para mostrar en un sitio web es crear más productos como estos. Por lo que quiero crear más productos digitales como este. Digamos cómo hacer eso en la siguiente lección. 20. Crea una página de página de página de descripción de productos: Bienvenido de nuevo. En la última lección, vimos cómo diseñar estas páginas de descripción única del producto. Ahora, todo lo que necesitamos hacer para tener productos para mostrar en un sitio web es crear más productos como estos. Por lo que quiero crear más productos digitales como este en el back-end. Entonces volviendo aquí, diré ese menú de hamburguesas Salir a Dashboard. Y nuestro legado completamente desde aquí. Por lo que nuestro cuerpo construye una plantilla, está listo. Ahora, todo lo que necesitamos hacer es crear muchos más productos aquí. Ahí estará listado aquí mismo, y podremos mostrarlos en el front end. Déjame solo hacer clic. Podrás enumerarlos debajo de la sección de héroes aquí mismo. Entonces volviendo aquí, voy a decir Añadir Nuevo y repetiré el mismo proceso que hice para la plantilla de culturista. Por lo que diré Agregar Nuevo. Y llamaré a estos productos algo así como plantilla de camarero. Iré dentro de ajustes, plantilla, Elementor, ancho completo, e iré dentro de los ajustes de Astro. Una vez más, sin barra lateral. Ancho completo estirado. Estos, Abel, todos estos, todo el camino al título. Y pie de página luego publicó eso. A ahora que se publica, sigamos adelante y diseñémoslo en el front-end con Elementor. Muy bien, Así que aquí estamos. Si tan solo pudiera abrir una nueva pestaña e ir dentro del tablero, quiero mostrarles algo muy rápido. Vámonos dentro de poste. Y ahora tenemos dos productos. Por supuesto. Aquí estamos tratando de diseñar la plantilla de mesero, ¿verdad? Pero ya creamos esto. Entonces si abrimos con Elementor, diré Editar con Elementor. Y aquí tenemos el único producto que ya creamos. Nos gusta cómo se ve. Y este nuevo producto se verá exactamente igual que este otro producto, solo que los detalles serán diferentes, la imagen será diferente, pero el diseño seguirá siendo el mismo. Por lo que realmente no debemos perder tiempo reconstruyendo lo que ya construimos. ¿ Hay alguna manera de simplemente reutilizar lo que ya hemos creado? Aquí mismo en otra página. Sí, eso es muy posible. Y eso es lo que vamos a hacer. Pero antes de que hagamos eso, agudizemos un poco esta página. Redujamos este ritmo aquí mismo seleccionando esta sección. Ve por dentro avanzado. Recuerda que habíamos agregado algún margen superior. Queremos reducir eso a algo como Swanee, así. Y actualicemos eso y previsualicemos los cambios. Ahora, eso es más parecido, pero quiero aumentar el espaciado aquí arriba porque parece estar demasiado cerca de la parte superior. Por lo que seleccionaré esta sección avanzada, quitaré ese enlace y le daré quizá un margen superior de 30. En algún lugar ahí. Actualizar eso. Y vamos a previsualizar los cambios. A mí me gusta donde se encuentra ahora. Por lo que incluso hay espaciado entre esta parte y esta parte, por lo que se ve uniformemente espaciado. A mucho más presentable. Ahora que estamos satisfechos con la plantilla en sí, Volvamos dentro de estas páginas donde se encuentra. Y mientras estamos ahora dentro aquí, haz clic en este icono de flecha justo aquí para Guardar. Y haga clic en Guardar como plantilla. Vamos a darle un nombre como página de producto individual. A continuación, golpea, Entrar o haga clic en Guardar. Ahora lo tenemos aquí. Está disponible para que lo utilicemos en cualquier otra página que queramos. Entonces déjenme ahora cerrar el espacio porque ya terminamos con esta plantilla de culturista. Sólo queríamos decir eso. Yo lo cerraré. Cerraré esa página de vista previa. Cierra eso. Déjenme cerrar todas estas otras páginas. Y ahora nos queda esta página donde estamos creando la segunda plantilla, que es la plantilla ponderada. Entonces si solo puedo refrescar la página pulsando Control R. Para refrescar la página. Ahora con una actualización de página, haré clic en este diminuto icono aquí mismo para agregar plantilla. Y saldrá esta ventana. Abriré mis plantillas y ahora encontrarás que está disponible la única página de producto que acabamos de guardar. Entonces haga clic, Inserte y diga Sí. Todo bien. Por lo que ahora hemos poblado nuestros segundos productos digitales con la plantilla que podemos editar. Y podemos reutilizar la misma plantilla por todas partes ya que creamos más productos digitales. Entonces permítanme actualizar eso. Y déjame cambiar esto por igual mesero. Entonces plantilla camarero. Entonces cambia eso a plantilla ponderada también. Actualizar eso. Y voy a hacer clic en la imagen misma. Seleccione la imagen. Y vamos a seleccionar esta segunda imagen para representar ese producto en particular. Por lo que se trata de una, una plantilla elemental para tal sitio web. Actualicemos eso. Y vamos a previsualizar los cambios. Y ahí lo tenemos. Nuestro segundo producto digital está listo. Entonces volviendo dentro de nuestro editor aquí mismo, ahora que estamos satisfechos con esa página en particular, Vayamos a este menú de hamburguesas Salir a Dashboard. Ahora, salga completamente de aquí. Y ahora tenemos estas dos plantillas. Por lo que ahora repetiré lo mismo por unos productos más, unos seis o siete de ellos. Por lo que tenemos un número sustancial de productos con los que trabajar. Y debido a que este es el mismo trabajo repetitivo, solo adelantaré rápidamente esta sección y espero que también te tomes algún tiempo para crear más productos digitales usando la plantilla que acabamos de guardar. Entonces te veré después de haber creado todos los productos digitales. Entonces aquí estamos. Acabo de crear seis productos la misma forma que creamos el primero a un. ahora que tenemos estos seis productos digitales, Vamos al front end y veamos qué tenemos. Entonces iré por dentro de las páginas. Y queremos ver cómo se ve nuestra página de inicio porque las próximas lecciones que vienen, veremos cómo mostrar esos productos probablemente. Por lo que simplemente cambiando rápidamente a Creative Market, queríamos mostrar esos productos de esta manera. Entonces, ¿cómo hacemos eso? A ver cómo hacer eso en la siguiente lección, nos vemos en breve. 21. Muestra Muestra de productos digitales en una categoría: Bienvenido de nuevo. En la última lección, creamos nuestros productos digitales. En esta lección, queremos ver cómo mostrarlos en el front-end para que los clientes puedan explorarlos. Entonces, ¿cómo hacemos eso? ¿ Cómo exhibimos nuestros productos de una manera presentable como esta? Adelante y hagamos eso. Entonces volviendo dentro de nuestro tablero, Vamos a entrar aquí. Primero que nada, veamos la página. Por lo que voy a hacer clic derecho y abrir el enlace en una nueva pestaña para que podamos ver qué tenemos actualmente. Así es la página. No tenemos nada después de que la sección de héroes es la carpeta. Y queremos algo como esto o algo así. De lo que tenemos en cerdo gratis o lo que tenemos en el mercado Envato. Por lo que volviendo adentro aquí, queremos venir y decir Editar con Elementor. Porque recuerda que creamos esta página con Elementor. Para que podamos subir aquí y decir Editar con Elementor. Y eso abrirá al editor Elementor. Muy bien, Así que aquí estamos. Ahora podemos empezar a sumar contenidos justo debajo de la sección de héroes. Entonces, comencemos agregando una sección de ancho completo, una sola columna. Y vamos a añadir un margen en la parte superior para separarte de la sección de héroes. Por lo que haciendo clic en eso, iré adentro avanzado. Quita ese eslabón y dale un margen superior de 50 o a la derecha. Entonces ahora tenemos ese bonito espacio y un consejo rápido que acabo de recordar mencionar aquí, cuando pasas el cursor sobre esta columna o esta sección o cualquier otro elemento que puedas editar aquí. Necesita mostrar un pop-up rápido que tenga algunos atajos rápidos. Y lo haces yendo dentro de este menú de hamburguesas, preferencias de usuario. Manijas de edición. Cambie eso a sí y diga Actualización. Y te mostraré lo que eso hace. Por lo que ahora cuando pasas por encima de esa columna, trae a la luz estas otras opciones que pueden permitirte tomar acciones rápidamente. Por ejemplo, si quiero duplicar estos, todo lo que necesito hacer es hacer clic allí. Y ahora tenemos dos columnas. Yo quiero duplicar esta sección. Todo lo que necesito hacer es hacer clic en eso, y ahí lo tenemos. Entonces ahora mientras estamos aquí adentro, déjame borrar esa columna porque sólo necesitamos una. Haré clic en el signo más ahí dentro. Y aquí dentro, buscaré la codicia. Y no tenemos una avaricia post y queremos mostrar nuestros productos como una avaricia. Si miras esto, esto parece una avaricia. Por lo que volviendo aquí, necesitamos un plugin que amplíe el poder de Elementor. Recuerda, mencioné antes que tenemos plugins que amplían el poder de Elementor. Entonces otro plugin que hace eso es complementos esenciales para Elementor, nos dará la opción de agregar una codicia. Entonces volvamos dentro de nuestro panel de control. Plugins, agregar nuevos. Y aquí quiero escribir complementos esenciales para Elementor. Cualquiera debe ser el primero. Por lo que instalaré ahora. Adelante y activarlo. Seleccionemos Avanzado y seleccionemos Siguiente. Básicamente lo que es esto, es que si seleccionas Básico, tendrás menos de esas características habilitadas. Pero si seleccionas avanzado, tendrás más de las características que queremos habilitadas, una de ellas siendo avaricia, la opción de cuadrícula. Entonces queremos aquí la opción avanzada, digamos a continuación, y esto es lo que quise decir. Por lo que al elegir básico, habrías tenido muy pocos de estos seleccionados. A estas alturas que habíamos seleccionado avanzado, tenemos más de estas características comprobadas y una de ellas es post greet, que es lo que estábamos buscando. Entonces diré a continuación, a continuación, continuación, a continuación, Dani robó todas esas otras cosas. Después Termina. Entonces ahora que tenemos complementos esenciales para elemental instalados, vamos al front end. Y en primer lugar, permítanme actualizar esa página. Y luego golpearé Control R para refrescar la página para que podamos tener acceso a complementos esenciales para Elementor. Y ahora que se instalan complementos esenciales para elemental, déjame colapsar eso y todos estos otros paneles aquí mismo. Y ahora notarás complementos esenciales es uno de los, uno de los paneles de aquí. Entonces voy a escribir avaricia. Y esta vez traerá hasta post, lo haríamos, arrastraré ese post gradientes a la única columna aquí. Y lo momentáneo dejarlo caer. Mostraremos los productos que acabamos de crear. Actualicemos eso. Y ahora lo siguiente que queremos hacer es trabajar en esta pantalla. ¿ Cómo hacemos que se vea presentable así? Entonces volviendo aquí, vamos a seleccionar esta codicia. Y si bien esto es seleccionado y es el elemento activo aquí, ahora podemos empezar a hacer cambios a cómo se muestra Luke. Entonces, antes que nada, colapsemos esa consulta. Y te darás cuenta que tenemos tres paneles aquí mismo. Por lo que el primer panel es sobre de dónde vienen los datos. Entonces recuerda que teníamos categorías por defecto. Está mostrando los productos que se encuentran en la categoría sin categoría. Entonces si volvemos adentro aquí y miramos las categorías de publicaciones. Recuerda que creamos estas tres categorías y luego tuvimos la categoría sin categoría. Y si vamos dentro de todo post, recuerda mientras creábamos estos productos, no les dimos una categoría de producto en, por lo que todos automáticamente manera justa en la categoría sin categoría. Entonces ahora cuando vamos al front end, por eso que por defecto, aquí se muestran. Entonces lo que tenemos que hacer es porque estos son productos elementales y tenemos una categoría elementor, puede volver dentro de todos los posts. Y ahora podemos establecer la categoría para cada producto. Te mostraré dos métodos y cómo establecer la categoría. Por lo que el primer método es ir dentro editar en cualquiera de los productos. Y aquí en el lado derecho debajo configuración, justo debajo de la plantilla. Recuerda dijimos la plantilla a Elementor ancho completo, unos paneles debajo plantilla facilidad categorías. Si haces clic en eso, revelará todas las categorías que están disponibles. Desmarque el sin categoría y configúrelo en Elementor porque se trata de una plantilla elemental. Actualizar eso. Y ahora salgamos de aquí. Y ahora notarás que ha cambiado a categoría Elementor. El segundo método es hacerlo justo aquí con el método de edición rápida. Edición rápida. Al hacer clic en eso, aparecerá todas las opciones que puedes editar. Entonces una de ellas serán las categorías. Así que desmarca eso y comprueba Elementor, luego actualiza. Y repitamos eso por lo demás. Entonces solo editaré rápidamente ese Elementor y comprobaré eso. Actualizar eso. Y ahora todos ellos están en la categoría Elementor. Entonces ahora volviendo a nuestra página aquí, primero actualizaré y luego actualizaré la página pulsando Control R. Así que ahora con una actualización de página, Vamos a seleccionar de nuevo la cuadrícula haciendo clic en cualquier lugar dentro de ella. Y ahora dentro de categorías, tecleemos Elementor. Y ahora va a sacar ese elemental ahí mismo. Entonces ahora estamos muy seguros de que todas estas son plantillas elementales. No son plantillas de ninguna otra categoría. Entonces lo siguiente que queremos hacer es ir dentro de la configuración de diseño. Y no necesitamos todos estos detalles. Entonces hagamos un cambio a eso. En primer lugar, actualizaré esta página o derecha. Y no quiero mostrar la fecha, el nombre del autor, un avatar. Para que eso se deshaga de todas esas cosas debajo del botón Read More. Quiero mostrar el botón Read More, pero necesitaba decir View Template. Y tampoco quiero mostrar el extracto. Esos detalles estarán disponibles cuando hagan clic en estos. Abre la página de una sola página, la única página de producto que creamos anteriormente. Entonces actualicemos esa página. Y ahora necesitamos tener una imagen para cada producto que hemos creado. Entonces, ¿cómo obtenemos las imágenes aquí? Volvamos a nuestra lista de productos. A menos que vaya dentro de cada producto y establezca una imagen destacada. Entonces por ejemplo, plantilla de salud de la vida. Entonces, en primer lugar, quiero ver qué producto era este. Por lo que voy a ver eso en una nueva pestaña. Y es ésta o esta señora. Entonces entraremos y editaremos esa página. Y debajo de la configuración, me desplazaré hasta la imagen destacada y haré clic en Establecer imagen destacada. Y, uh, así que creo que fue esa dama eran estos, esa imagen de este aquí Set Featured Image. Y ahí lo tenemos. Actualizar eso. Volvamos atrás. Demos clic derecho y veamos qué producto este era este tipo de aquí. Entonces solo quiero editar eso. Bajo ajustes. Desplazemos todo el camino hasta Imagen Destacada. Haga clic en eso. Y era este tipo de aquí. Repetiré lo mismo para el resto de los productos, configurando la imagen destacada. Entonces déjenme adelantar rápidamente esta sección. Y ahora solo he estado cada configurando la imagen destacada para todos estos productos. Vayamos al front end y actualicemos esta página por si no has guardado tus cambios, actualicemos, luego pulsa Control R. Todo bien, Así que aquí estamos. Las cosas están empezando a verse mejor ahora en el día. Vamos a seguir adelante y seleccionar la cuadrícula. Y con él seleccionado, vamos a colapsar la consulta y expandir la configuración de diseño. Necesitamos tener tres columnas. Prefiero tres columnas. Y volvamos a la consulta y digamos que necesitamos seis productos por página por ahora. Eso lo cambiaremos en breve, pero digamos seis productos por página en exhibición. Por lo que ahora tenemos una cuadrícula de seis productos. Y ahora vamos a colapsar la consulta nuevo y expandir la configuración de diseño. Ahora tenemos tres columnas, seis productos. Cambiemos estos a h3. Las etiquetas del título serán odia tres, porque lo que queremos hacer es agregar un H2. Antes de esto. Primero actualizaré eso. Y vamos a hacer clic en eso y arrastrar un encabezado de título hasta allí. Pongámoslo en el medio. Y déjame simplemente llamarlo plantillas elementales porque esta es una categoría de plantillas, elementos MAR de plantillas. Por supuesto, vamos a darle estilo a eso. Cambiaré la familia tipográfica a Montserrat. Reduciré un poco el tamaño y aumentaré la forma de fuente a 800. Actualizar eso. Y ahora vamos a previsualizar los cambios en el estado. Desplazemos hacia abajo y veamos qué tenemos. Al menos se ve mucho mejor que lo que teníamos. Y por supuesto, vamos a hacer que se vea mucho más presentable a medida que avancemos. Estamos empezando ahora mismo. Por lo que volviendo dentro de aquí, mientras esto todavía está seleccionado, queremos ir dentro de estilo. Y ahora déjame colapsar al estilo Post Codicia por un momento para que puedas ver todos los paneles que tenemos. Por lo que tenemos el estilo de miniaturas. Entonces esta imagen, meta estilo, eso significa los elementos que calentamos que estamos aquí. Meta posición, calotipo, epigrafía y espaciado. Empecemos con el estilo de botón Read More. Este año. Queremos cambiarlo a blanco. Pero ahora el fondo necesita ser de 40, 40, 40. Como de costumbre. Y luego quitemos eso. Vamos a darle un relleno izquierdo de 20, relleno derecho de 20, 10. Y entonces vamos a darle un radio de frontera de cinco. Hagámoslo una actualización yum eso. Pero ahora reduzcamos esto a cinco. Relleno superior e inferior. O montar un pago que. Contraer el estilo de botón Leer más y abrir el estilo de miniatura. Démosle un radio de frontera de 20. Así. Para el estilo post GREP. También le demos un radio de borde de 20 porque ahora mismo en este momento ves que todavía va fuera de la imagen que tiene una esquina redondeada. Entonces démosle también a eso un Tony. Y ahora eso está oculto. Actualizar eso. A continuación, Vamos a colapsar eso y vamos al interior de la topografía y el espaciado. Y alineemos el texto al centro. Quitemos este enlace. Y para el margen inferior, aumentémoslo un poco para que podamos espaciarlo, tal vez 10. Vamos a colapsar el espaciado de color y tipografía y volver al interior del estilo de botón Read More para que podamos empujarlo hacia el medio. Entonces vamos a romper el enlace en el margen, y vamos a aumentar el margen izquierdo hasta el centro. Usa tu ojo para juzgar dónde está el punto medio. Piensa que ese es un buen lugar. Actualizar eso. Y luego vamos a previsualizar los cambios. Todo bien, Así que ahora nuestros productos están correctamente en exhibición, pero tenemos que hacer algo con el botón. Empujarlo a esto hacia la derecha. Entonces, ¿dónde está? Actualicemos eso a la vista los cambios. Muy bien, Ya casi estamos ahí, así que aumentemos mucho más. Digamos un 100. Entonces aquí mismo, bueno, estamos en la página de edición. Se ve desalineado, pero en la página real, Vamos a previsualizar. Ahora es casi probablemente una línea. Creo que por ahora eso es casi satisfactorio, pero vamos a seguir adelante y darle tal vez un 110. Entonces en mis intentos de ponerlo bocoteada en el medio, he ido adelante y le he dado un margen de un 100 a la derecha y un 100 a la izquierda. Pero por ahora vamos a previsualizar los cambios. Y veo que necesitamos hacer algo con el relleno de este lado. Entonces volvamos aquí. Podríamos reducir el margen a la derecha. Ahora aumentemos un poco el margen a la derecha. A lo mejor uno o cinco. Actualizar eso. Y vamos a previsualizar los cambios o paseos. Y ahora creo que está en medio. No sé qué valores te van a funcionar aquí, pero estos son los valores que me están funcionando. Así que adelante y prueba diferentes valores hasta que lo hagas bien. Muy bien, Así que ahí lo tenemos. Recuerda decimos que DC no se trata de crear un sitio web muy bonito por ahora. Se trata de mostrarte cómo crear el sistema en sí. Estoy bastante seguro de que todos los que están tomando esta clase ahora mismo vamos a llegar a un sitio web de aspecto diferente, pero el sistema subyacente será el mismo. El sistema que te permite mostrar productos de esta manera, pero venderás tus productos de manera diferente, tu página y los colores que usarás. Todo eso será diferente. Por lo que nuestro objetivo aquí es aprender a crear correctamente un sistema que le dé al cliente un buen recorrido del cliente. Vienen a tu sitio web, exploran tus productos, y cuando hacen clic en el producto, por ejemplo, si hago clic en esto, Vamos a ver Dónde se llevarán a esta página. Creamos estas páginas antes y ahora podemos leer detalles sobre este producto. Y si nos gusta el producto, podemos seguir adelante y descargarlo. Entonces ese es el tipo de sistema en el que nos estamos centrando e intentaremos construir. Entonces así es como mostrar los productos en tu página web. A continuación, queremos ver cómo agregar otra categoría de la misma forma que agregamos el elemento de la categoría plantillas. Hagámoslo en la siguiente lección. Te veré en breve. 22. Muestra una categoría de productos digitales: Bienvenido de nuevo. En la lección anterior, mostramos la categoría de plantillas elementales. Por lo que ahora queremos añadir otra categoría, y elegí la categoría de revistas. Entonces antes de crear, Vamos a seleccionar esto. Yo quiero hacer un ligero cambio a esto. Yo quiero mostrar sólo cuatro columnas, para que podamos tener una fila. Entonces mientras esto está seleccionado, Vamos a ir dentro de la configuración de diseño, digamos por. Entonces digamos en primer lugar show para productos. Por lo que ahora sólo se mostrarán cuatro productos. Y vamos a colapsar el ángulo de consulta dentro de los ajustes de diseño como digamos, cuatro columnas que mostrarán todas ellas en una fila. Entonces déjame solo actualizar eso. No te dejes engañar por un reloj viendo aquí mismo. Si previsualizamos los cambios en el front end, va a ser una fila. Está bien, así que ahí lo tenemos, sólo una fila de cuatro columnas. Por lo que ahora queremos añadir otra fila de otra categoría. Entonces solo para corregir el spot, Vamos a refrescar la página. Y ahí lo tenemos. Entonces una cosa genial de Elementor, como mostré un poco antes, es que se pueden duplicar elementos, por lo que podemos duplicar esa fila así. Y ahora tenemos dos filas. Entonces si actualizo eso y previsualizo los cambios, ahora tenemos dos filas. Entonces todo lo que necesitamos hacer es cambiar los detalles de esta área en particular. Entonces cambiemos eso por revistas, plantillas de revistas. Y ahora todo lo que necesitamos hacer es cambiar la fuente de estos datos. Por lo que cambiamos la categoría de la que se están sacando los datos. Entonces vamos a cerrar Elementor porque estas no son plantillas elementales y vamos a seleccionar revista. Por lo que la revista de mecanografía, exhibirá revistas. Y por supuesto, porque aún no tenemos revistas, dirá que no se encontraron publicaciones porque recuerda que creamos estos productos digitales bajo la plantilla elemental. Por lo que volviendo dentro del tablero, tenemos que ir debajo de los posts y añadir nuevos. que podamos crear unas cuantas plantillas de revistas como productos digitales, y luego podremos mostrarlas en el front end. Entonces, por ejemplo, empecemos con, vayamos adentro antes de darle un nombre, vayamos dentro de esta imagen destacada. Y echemos un vistazo a algunas de las plantillas de revistas que tenemos. Quiero subir unas plantillas de revistas que había creado antes. Por lo que importaré todas estas imágenes y las encontrarás en la siguiente descripción en la carpeta. Al igual que la carga de descanso. Adelante y escojamos éste. Pondré eso como la imagen destacada. Y veo que el nombre es masa corporal. Así conjunto imagen destacada. Llamaré a este cuerpo masa. Plantilla de masa corporal. Bueno, llamémoslo Revista. Y por supuesto ahora bajo la configuración, Vamos a decir valores predeterminados, plantilla, Elementor ancho completo. Desplazémonos hacia abajo y categorizémoslo como revistas. Y aquí arriba en la configuración de Astra. Cambiemos eso a ninguna barra lateral. Estiramiento de ancho completo. Seamos capaces esos. Y ahora estamos bien para irnos. Vamos a publicar eso. Entonces ahora vamos al frente. De acuerdo, y ahora estamos en el front end de los productos de la revista. Entonces lo que tenemos que hacer es usar la plantilla que usamos antes para las plantillas elementales. Entonces vayamos adentro, agreguemos plantilla. Vayamos a mis plantillas e insertemos esto. De acuerdo, Así que ahí lo tenemos. Por supuesto que lo primero que tenemos que hacer es seleccionar la imagen y cambiarla a la imagen actual del producto. Y esto es todo. Entonces insertemos medios y esa es nuestra imagen de producto. Hagámoslo un poco más pequeño hasta ese punto. Y cambiemos el nombre. Creo que fue revista de masa corporal. Probablemente eso. Seleccionaré eso y luego reemplazaré eso. Y ahí lo tenemos. Hagamos una vista previa de los cambios. De acuerdo, así es como se ve. Por supuesto, puedes hacer que estos luzcan mucho más bellos que, de lo que hace ahora mismo. Así que adelante y hazte tanto más agradable de mirar. Por lo que volviendo dentro de aquí, voy a ir y hacer clic en ese menú de hamburguesas y sale de dashboard. Ahora salga completamente de ahí. Y ahora la revista body mass es uno de los productos digitales. Entonces repetiré que para tal vez unos productos más, la misma manera que lo hicimos con los elementos son plantillas. Entonces sumaré a Mu. Antes de darle un nombre, entraré dentro de Ajustes y luego cambiaré la plantilla al elemento 0 4 con no, eso no es una plantilla elemental, Es una revista. Y sigamos adelante y seleccionemos una imagen para ello. Vamos a elegir código Revista Panteón, set imagen destacada. Entonces eso es fraude. Revista Código Panteón. Y luego dentro de esa configuración de Astro, no olvides decir que no hay barra lateral. Para ancho estirado estos Abel estos cinco. Y luego la carpeta, para luego publicar eso. Y luego podríamos ir al frente. De acuerdo, Así que hagamos lo que acabamos de hacer con los otros productos. Coincidir Añadir plantilla, Añadir plantilla, mis plantillas, insertar esa plantilla. Y ahí lo tenemos. Por lo que seleccionando la imagen. Vamos a seguir adelante y establecer nuestra imagen destacada. Compañero. Insertar medios. Piensa que fue hasta ese punto. Actualiza eso por qué no lo empujamos todo el camino hasta ahí y dejamos caer un poco estos. Entonces lo haré más grande. Selecciona esta columna aquí mismo. Acude a avanzado, a pesar de éste, 150, como si estuvieran hasta ese punto y digamos actualizar. Hagamos una vista previa de los cambios anulados. Pero ahora necesitamos cambiar este nombre de culturista revista código culturistaPantheon. Entonces actualicemos eso. Y vamos a previsualizar los cambios. De acuerdo, Así que ahí están nuestros productos digitales, Ahí está nuestra plantilla de revista luciendo bastante similar al resto. Y ahora volvamos a entrar aquí. Y debido a que tenemos nuestros cambios guardados, Salir a Dashboard. Y lo haré un par de veces más y crearé algunos productos digitales más. Pero para evitar que estas sean demasiado monótonas, solo adelantaré rápidamente esta sección. Entonces te veré después de crear los productos. Por lo que ahora acabo de terminar de crear estos productos digitales de revistas. Tenemos cinco de ellos. Entonces quiero cambiar al front end y ver qué tenemos o cómo se ven en el momento. Entonces yendo por aquí a nuestra página de inicio y refrescando la página golpeando Control R. Así que vamos a desplazarnos hacia abajo. Y aquí tenemos nuestra nueva categoría Plantilla de revista. Pero claro, como puedes ver, los botones se ven un poco raros. Entonces retrocedamos y alinémoslos adecuadamente. Entonces Edita con Elementor aquí arriba. Entonces, vamos a desplazarnos hacia abajo. Empecemos con esto. Entonces seleccionando eso, Vamos adentro estilo, Estilo botón Read More. Y vamos a reducir el margen del lado izquierdo a tal vez 50. Actualicemos eso. Hagamos lo mismo para esta sección. Selecciona eso, ve dentro de estilo. Read More estilo de botón. Vamos a darle a esto un 50 o escribir actualización que. Y vamos a previsualizar los cambios. ¿ Verdad? Entonces, empujémoslo un poco a la derecha. Entonces tal vez 60, 65, o 70. Ahora digamos 60. Seleccionemos eso. Estilo de sitio yendo. Leer más botón 16. Actualizar eso. Y vamos a previsualizar los cambios. Correcto, por lo que se ven impresionantes en este momento. Por lo que desde arriba tenemos la barra de navegación. Entonces tenemos nuestra sección de héroes. Entonces aquí están nuestros productos en diferentes categorías. Y tenemos nuestro pie de página. Pero aumentemos el espaciado justo aquí debajo de esta sección. Por lo que selecciona la sección que va dentro avanzado. Y vamos a darle un margen inferior de 90 como el otro. Entonces ahora tenemos un espacio de 90 píxeles entre esta sección aquí mismo y el pie de página. Así que actualice eso. Y vamos a previsualizar los cambios. Por lo que desplazándose hacia abajo. Impresionante. Entonces ahora tenemos ese bonito espaciado ahí abajo, pero aún no terminamos con esta página. En una lección posterior, estaremos agregando un formulario de inscripción en alguna parte de esta página para que podamos capturar correos electrónicos de los usuarios para poder mantenernos en contacto con ellos, les informamos de nuevas subidas y tal tipos de cosas. Entonces por ahora, así es como crear y mostrar los diferentes productos como categorías de productos en la página de destino. Creo que ya terminamos con esto por ahora. Lo siguiente que queremos hacer es crear la página de descargas. Entonces déjame desplazarme hacia afuera. Queremos crear esta página de descargas y ahí es donde ahora se mostrarán todos los productos. Entonces vamos a crear la página de descargas en la siguiente lección. Te veré en breve. 23. Configura la página del elemento como página de inicio: Bienvenido de nuevo. Ahora, ya hemos creado nuestra landing page o nuestra homepage. Pero ahora si miras la URL en la barra de direcciones aquí, notarás que tiene estas extensiones casa. Y por si acaso olvidé mencionarlo, utilicé mi nombre de dominio para crear estos sitio web demo. Pero notarás que estamos en la página de inicio. Pero tiene estas extensiones después del dominio. Entonces lo que queremos es no tener estas casas para que sea polvo www dot tu website.com o dot cualquier extensión pero sin slash nada. Así que sólo para mostrarte exactamente lo que quiero decir, Si pudiera simplemente saltar a gratis pic.com en la página de destino, la URL es gratis PQ.com, No es gratis pic.com slash home. ¿ Cómo configuramos eso en WordPress? Porque lo que pasa es si no configuramos una página de inicio por defecto, déjame, déjame, por ejemplo, quitar esa casa y luego golpear Enter. Se llevará a una página rara que tiene la página por defecto de WordPress like. Esto no se ve bien. Queremos que la gente sea llevada a la página que diseñamos con Elementor. Entonces, ¿cómo hacemos eso? Así que saltando dentro de nuestro tablero de instrumentos, vamos dentro de Ajustes y haga clic en lectura. Una de las opciones aquí serán las pantallas de tu página de inicio. Y por defecto, se establecerá en sus últimas publicaciones. Entonces cambia eso a una página estática. Y desde este menú desplegable aquí, obtendremos una lista de todas las páginas que creamos y podremos establecer la página de inicio como nuestra página de inicio. Ahora con eso dicho y la configuración guardada, volvamos al front-end. Solo tienes que seleccionar eso, y ahora vamos a golpear Enter. Ahí, lo tenemos. Ahora cuando la gente escribe nuestra URL base, se llevará a la página de inicio que diseñamos con Elementor. Entonces así es como configurarlo. En la siguiente lección, quiero mostrarles cómo establecer los enlaces de parámetros y cuáles son los enlaces primarios. Vamos a averiguarlo. 24. Ayúdame a enseñar a los estudiantes a 10,000: Hola mi amigo. En primer lugar, solo quiero decir muchas gracias por acompañarme en esta clase y elegir aprender de mí. Y también quiero decir felicitaciones por llegar tan lejos en la clase. El hecho de que hayas llegado tan lejos en la clase significa que estás ganando valor de la clase. Y así te agradezco mucho y espero que estés disfrutando de la clase en sí. Dicho esto, necesito tu ayuda. Tengo la misión de enseñar al menos a 10 mil empresarios como tú a usar elementary para construir sus propios sitios web o landing pages para vender sus productos. Y aquí te mostramos cómo puedes ayudar. Se ve cuando un nuevo alumno se une a una clase en Skillshare y luego le gusta esa clase y deja una reseña. Ayuda a otros alumnos a saber qué esperar de la clase. Y cuando una clase está recibiendo muchas críticas de los estudiantes, Skillshare dice: Oye, ¿sabes qué? Esta clase está recibiendo mucho compromiso y muchas críticas por parte de los estudiantes. Por lo que debe ser de ayuda. Por lo que debe ser útil. Y así empujémoslo hacia arriba en la biblioteca para que sea más descubrible por los nuevos estudiantes. Por lo que el algoritmo Skillshare empuja esa clase hacia arriba y la hace más visible, más descubrible para los nuevos estudiantes. Porque ha estado recibiendo críticas positivas. Y ahí es donde entran ustedes. Por favor, únete a mí en esta misión y me ayudó enseñar al menos a 10 mil estudiantes cómo usar Elementor, cómo construir hermosas landing pages, sitios web funcionando dejando una reseña en esta clase y haciéndoles saber qué esperar de esta clase. Sólo te tomará unos dos minutos y ya está. Pero tu reseña contribuirá en gran medida a ayudar a los nuevos alumnos, los futuros estudiantes, a saber qué esperar de la clase. Clase cumple con tus expectativas. ¿ Superó tus expectativas? Si tienes alguna pregunta, recuerda, siempre puedes dejarlas en el área de discusión debajo de este video y yo podré ayudarte. Siempre respondo a cada pregunta o comentario que los alumnos dejan en cualquiera de mis clases. Y con eso dicho, sólo quiero decir disfrutar de la clase y nos vemos en la siguiente lección. Paz. 25. Diseñar la página de las descargas: Bienvenido de nuevo. En la última lección, vimos cómo crear y mostrar nuestros productos en categorías en nuestra página de inicio así. Por lo que ahora en esta lección queremos ver cómo mostrar nuestros productos en la página de descargas. Y la página de descargas es la página que mostrará todos los diferentes tipos de productos que tenemos. Por lo que se puede pensar en estos como la biblioteca. Por lo que la página de aterrizaje aquí le dan a sus visitantes un adelanto furtivo de lo que deberían esperar. Y cuando hacen clic en la página de descargas, se supone que debes encontrar todos nuestros productos. Por lo tanto, haga clic en descargar y ver cómo se ve la página en este momento. Entonces así es como se ve nuestra página. Esta es una plantilla predeterminada de WordPress. Entonces lo que tenemos que hacer es editar esta página web con Elementor. Por lo que necesitamos construirlo visualmente con Elementor. Por lo que tenemos un atajo aquí, editar página, podemos hacer clic en esto. El tablero de páginas, descargas, luego Editar. Y aquí estamos. Entonces lo primero que tenemos que hacer es ir dentro de la configuración de Astro para que ya esté activa. Y debajo de la barra lateral, digamos que no hay disposición de contenido de barra lateral para el ancho. Vamos estos Abel, estos cinco y luego el sexto aquí. Y actualizar eso. También vamos a asegurarnos de que dentro de los ajustes, nuestra plantilla se establece Elementor placa de ancho completo que también. Y ahora que nuestra página está actualizada, vamos a editar con Elementor. Y aquí lo tenemos. Entonces lo que queremos hacer en esta página se muestran los productos como una galería filtrable. Y te mostraré cómo hacer eso. Entonces lo que tenemos que hacer es seleccionar una sección de una sola columna de ancho completo. Así. Seleccionemos la sección. Y por dentro avanzado. Quita ese eslabón allá arriba, y démosle un margen superior de 50. O bien. Haga clic en el signo más ahí dentro. Arrastremos un encabezado por dentro. Y cambiemos esto por algo así como Explorer descarga en mientras aún está seleccionado. Ve al interior de estilo. Cambiemos el color a como topografía coincide, cambiemos la familia de fuentes a Montserrat. Da click afuera ahí para deshacerte de eso. Y luego mientras seguimos siendo insights, yo epigrafía, cambiemos el peso de la fuente a 800. Y vamos a aumentar el tamaño de esta fuente a tal vez ese punto. En algún lugar afuera. Haga clic en algún lugar fuera, vaya dentro contenido y pongámoslo en el medio. Entonces justo debajo de ahí. Seleccione eso. Hagamos clic en ese minúsculo icono, y arrastremos algunos textos justo debajo del encabezado. Y esto podría ser algo así como lo correcto. Y luego vayamos dentro de estilo y empujémoslo al centro. Y ahora tenemos una bonita y breve descripción de lo que estamos a punto de poner aquí abajo. Entonces lo siguiente que queremos hacer ahora es agregar nuestra galería filtrable debajo de este epígrafe, este texto. Así que vamos a seguir adelante y hacer clic en este diminuto icono aquí mismo para sacar a la luz los elementos. Y quiero escribir filtro filtrable galería. Es uno de los elementos traídos por complementos esenciales para Elementor. Entonces, arrastrémoslo y soltémoslo justo debajo cuando aparezca esa línea azul. Y ahí lo tenemos. Entonces por supuesto estos son tenedores de lugar. Ahora nos toca editar estos y convertirlos en productos. Entonces, antes que nada, actualicemos eso. Y vamos a previsualizar los cambios. Entonces así será nuestra página . Cuando alguien hace clic. Icono de zoom aquí mismo. Se supone que saca la imagen para que puedan tener un poco de vista del producto y puedan desplazarse por todos los diferentes productos. Escapemos de eso. Y cuando hagan clic en este icono de enlace aquí mismo, habrá que llevar al producto de una sola página de estos productos en particular. Entonces veamos cómo hacer eso. Y antes de agregar los propios productos, agreguemos algún margen justo debajo aquí para tener algún espaciado agradable entre los dos elementos. Entonces, entremos aquí. Selecciona una sección que esté reteniendo todo este contenido. Y ahora queremos sumar algún margen por debajo de él mientras aún está seleccionado. Margen avanzado inferior. Démosle un día de 90. Es que 90 píxeles espaciado entre esta sección y el pie de página. Entonces actualicemos eso y previsualicemos los cambios. Está bien, así que me gusta cómo se ve. Volvamos atrás y editemos los productos. Al volver aquí, seleccionaré en cualquier lugar dentro de aquí. Y ahora el eliminar activo es galería filtrable. Entonces déjenme colapsar primero los ajustes. Y notarás que tenemos unos cuatro paneles. Entonces, empecemos con ajustes. Ajustes internos. Esto determina cuántos elementos desea mostrar. Por lo que actualmente se establece en seis. Podemos ponerlo en 12, por ejemplo, digamos 12. Podemos ajustarlo a 12, pero claro tendremos que crear 12 productos para poder mostrarlos. Por lo que actualmente tienen seis marcador de posición verán cómo crear todos estos productos. A continuación, vamos a colapsar los ajustes e ir dentro de los controles filtrables. Por lo que ahora los controles filtrables son nuestras categorías. Entonces recuerda que teníamos un logotipo, logotipo, categoría elemental, y categoría de revistas. Entonces suben aquí y son nuestros controles para determinar lo que está a la vista, lo que es visible en este momento. Por lo que bajo controles filtrables, vamos aquí al elemento de galería. Haga clic en eso, y cambiemos ese elemento de galería a elementor. De acuerdo, así que vamos a hacer clic en eso para colapsarlo y vamos a duplicarlo. Por lo que ahora tenemos dos controles filtrables. Vamos a hacer clic en eso y darle otro logotipo de categoría. Vamos a colapsar eso. Y ahora te darás cuenta que tenemos dos categorías aquí arriba. Añadamos una revista más que y hagamos una vista previa de los cambios. Correcto, así que ahí lo tenemos. Ahora, como mencioné, al hacer clic en alguno de estos artículos, los productos que están en esa categoría serán visibles aquí mismo, y los demás estarán ocultos. Por lo que cuando hacemos clic en Elementor, sólo los productos que están en la categoría elemental se mostrarán al hacer clic en logo. El mismo caso aplica cuando hacemos clic en todos, entonces todos los productos de todas las categorías serán visibles. Entonces vamos a crear ahora los productos. Por lo que seguiré adelante y colapsaré los controles filtrables y ampliaré los elementos de la galería. Esos son nuestros productos y fuera. Y como pueden ver, tenemos seis marcador de posición que ahora podemos editar con nuestro propio contenido. El primer elemento aquí, notarás que tenemos nombre de control. Eso es para preguntar qué control filtrable está controlando este artículo. Y así nuestros controles son estas categorías que acabamos de crear aquí. En los controles filtrables. Estos son nuestros controles. Entonces déjenme colapsar eso, digamos colapso elemental, esos artículos de galería. El primer elemento será una plantilla elemental. Entonces voy a hacer clic en eso. Está controlado por control Elementor. Y se llama plantilla culturista. ¿ Lo recuerdas? Y me desplazaré hacia abajo y verás donde podemos cambiar la imagen. Así que da click ahí. Y creo que esta era la imagen. Escoge esa imagen e inserta medios. Y ahí lo tenemos. Ahí está nuestro producto. Entonces repetiré lo mismo para todos los productos. Voy a colapsar esta plantilla de culturista y ampliar el segundo producto, que también es una plantilla elemental. Entonces es control es Elementor. Es su nombre es, sólo voy a hacer un nombre para que podamos decir tiempo. Teníamos una plantilla de mesero, por cierto, plantilla de mesero. Y puedes cambiar esta breve descripción que está apareciendo aquí mismo. Bajemos por aquí y cambiemos esa miniatura. Entonces démosle esta imagen aquí mismo. Insertar medios. Y ahí está nuestro segundo producto. Vámonos a los terceros productos. Desplazaré hacia arriba y lo recordaré. Ahora, para que este enlace funcione, aquí es donde se agrega el enlace, así que descarga o algo de ese tipo. Y ahora cuando alguien haga clic en este enlace, serán llevados a esta URL. Y si quieres que este enlace se abra en una pestaña diferente, haz clic aquí en esta rueda COG y di abrir una nueva ventana. Actualicemos eso. Y vamos a previsualizar los cambios. Por lo que ahí lo tenemos. Cuando alguien hace clic en este enlace, nota la URL que acabamos de agregar hace un momento. Se abrirá en una nueva pestaña. Todavía está intacta una página. Y eso es porque decimos abrir nueva ventana. Si desmarcamos eso y actualizamos eso y previsualizamos los cambios. Si hacemos clic en eso, se carga en la misma página y perdemos todo en lo que estábamos trabajando. Entonces volvamos aquí y creemos un tercer producto. Desplazaré hacia arriba y colapsaré el segundo producto. Ampliar el producto PRD. Sigue siendo un producto elemental. Entonces me desplazaré hacia abajo y cambiaré la miniatura. Entonces, vamos a seleccionar eso. Muy bien, Impresionante. Ahora seguiré adelante y crearé aquí tres productos más y añadiré algunos más después de eso. Y debido a que todo esto es el mismo trabajo repetitivo que ya hemos hecho aquí, adelantaré con celeridad esta sección. Tómate un momento y crea todos estos otros productos. Y nos reunamos después de que terminemos con eso. Entonces vámonos. Y así aquí estamos. Ya estoy de vuelta. Acabo de crear algunos productos más aquí. Como puedes ver, tenemos revistas y logotipos agregados, por lo que podemos tener algunos artículos bajo estas categorías. Por lo que repitió lo mismo que hicimos por estos dos productos. Acabo de entrar. Por ejemplo, este logotipo, logo sencillo. Asigné los logotipos de nombre de control porque controles filtrables. Uno de los controles hay logotipos, por lo que se supone que son logotipos. El nombre en los controles filtrables debe ser el mismo que el nombre que le das al control aquí. Por lo que bajo el logo simple, el nombre de control es logotipos. Y le di un nombre, alguna descripción, y seleccioné una imagen para ello. Si tuviera un enlace, lo añadiría aquí. Entonces hice exactamente ese mismo método para todos estos diferentes productos aquí. Y eso es lo que ven aquí. Entonces actualicemos eso y previsualicemos los cambios. Muy bien, Así que aquí estamos en la página. Déjame desplazarme hacia abajo para que podamos ver lo que tenemos. Y la página se ve hermosa. Me gusta cómo se ve porque el usuario puede venir a la página, tener una visión general de los diferentes productos que tenemos. Y pueden verlos por categoría. Entonces si quieren ver solo plantillas elementales, pueden hacer clic en eso y los productos serán filtrados por esa categoría. Entonces si quieren ver solo logotipos, verán solo los productos del logo que tienes revistas también. No cambié esta categoría aquí. Esto es, este es un elemento, una plantilla. Pero obtienes el simulacro. Entonces otra cosa que queremos volver dentro de todo, vemos todos los productos de todas las categorías que hemos dicho aquí. Y por supuesto volver aquí, colapsando eso y expandiendo los controles filtrables. Recuerda siempre podemos duplicar estas categorías aquí arriba y añadir, y añadir otras nuevas. Entonces digamos gradientes. Y vamos a actualizar eso. Por lo que ahora seríamos capaces de colapsar los controles filtrables, ir dentro de los elementos de la galería, duplicar cualquiera de los productos de aquí. Y ahora usa gradientes como uno de los controles ahí. Y cuando alguien haga clic en gradientes, solo verán productos de la categoría de gradientes. Y puedes arrastrar estos productos y reorganizarlos exactamente de la manera que quieras en tu página para que no tengas que apegarte a cómo se organizan aquí. Y a medida que los reorganizamos, el cambio está surtiendo efecto en tiempo real. Entonces si queremos mover esto al tercer puesto aquí, solo puedes venir aquí y arrastrar el primer logo a la tercera ranura. Y ahí está. Entonces actualicemos eso. Y repasemos los cambios una vez más. Ahora que aquí tenemos los productos y se muestran de manera muy adecuada. ¿ Cómo los vinculamos a las páginas individuales de descripción del producto que creamos para ellos? Por ejemplo, teníamos una plantilla de camarero. Entonces, cuando hacemos clic en este enlace, se supone que debemos ser llevados al camino de la página de descripción de la plantilla. Entonces, ¿cómo llegamos y de qué página estoy hablando? Entonces déjenme abrir primero los puestos. Y llamemos a la baja a plantilla de mesero. Haré clic con el botón derecho Ver y abrir enlace en nueva pestaña. Y vayamos a esa ficha. Entonces aquí es donde se supone que nos lleve ese enlace. Entonces lo que necesitamos es esto vinculado a esta plantilla. Entonces lo que tenemos que hacer es copiar así este enlace. Entra dentro de esta página aquí. Y debido a que esta es nuestra plantilla, la plantilla a la que queremos enlazar, es la plantilla ponderada. Vamos a buscarlo. Esto es todo. Entonces vamos a expandirlo y desplazarnos hacia abajo. Justo debajo de la imagen donde teníamos este enlace. Quita eso y pega nuestro enlace ahí dentro. Digamos que abran en una nueva ventana y actualicemos eso. Entonces ahora si previsualizamos los cambios, si nos desplazamos hacia abajo para esperar una plantilla y hacer clic en el enlace. Ahora, se abrirá en una nueva pestaña. Y nos llevará a la página que tiene más detalles sobre plantilla ponderada. Entonces espero que ahora estés empezando a conectar los puntos y ver cómo se está dando forma al viaje del cliente. Entonces vamos a la página de inicio, desplazamos hacia abajo. Podemos ver productos en diferentes categorías, ¿verdad? Y cuando entramos a la página de descargas, podemos ver más productos y las diferentes categorías de productos disponibles en esta página, disponibles en esta web. Y podemos seguir adelante y seleccionar un producto para ver más. Lee más sobre el producto y si nos gusta, podemos seguir adelante y terminar de comprarlo. Entonces descarga. Entonces ese es el viaje del cliente y así es cómo crear esta galería filtrable en particular. Por lo que seleccionando una vez más esta galería filtrable. Y vamos a desplazarnos hacia abajo, crezcamos hacia afuera y vayamos dentro del contenido. Vamos a colapsar galería e ir dentro de ajustes. Y como mencioné antes, podemos determinar cuántos productos queremos mostrar en un momento dado. Por lo que en este momento se los dijimos a 12. Por eso en este momento podemos ver 12 productos. Entonces podemos decir, por ejemplo, un producto. Entonces si dices un pergamino hacia abajo, sólo la ayuda es visible. Digamos que seis. Y ahora sólo seis productos son visibles. Entonces, ¿cómo ves el resto de los productos? Vamos a colapsar los ajustes e ir hacia abajo al botón Cargar más. Demos clic en el botón Cargar más y cambiémoslo a sí. Por lo que ahora tenemos mucho más botón aquí abajo de la galería. Actualicemos eso. Y podemos establecer cuántas imágenes más queremos mostrar cada vez que hacemos clic en Cargar más. Por lo que cada vez que hacemos clic en Cargar Más, se cargará seis más. Y podemos cambiar el número dos, tal vez un 0, 10, y cargará diez plantillas más. También podemos cambiar el texto en sí para ver más. Y vamos a actualizar eso. Y cuando ya no hay más imágenes y alguien hace clic en el botón y ya no hay más imágenes. Este es el mensaje que todos reciben. Y también podemos cambiar el tamaño del botón. Tenemos tanto control sobre esto. También podemos ir dentro de estilo, estilo general colapsado, ir al botón Cargar más, desplazarse hacia abajo. Y aquí podemos cambiar su color. Por ejemplo, podemos darle ese color amarillo si queremos. Pero prefiero tenerlo como ese color. Y en el hover ahora puede tener ese color amarillo así. Entonces también podemos aumentar el espaciado entre él y las imágenes aquí arrastrando eso hasta que estemos satisfechos. A mí me gusta donde se encuentra ahora. Entonces actualicemos eso y previsualicemos los cambios. Muy bien, así que vamos a desplazarnos hacia abajo como vemos nuestros productos. Y aquí está nuestro botón Cargar más. Recuerda que el último escenario que hemos dicho fue tener sólo seis productos mostrando en cualquier pueblo dado. Pero si hacemos clic en Ver más, como pueden ver, se cargan seis más. Si decimos Ver más, se carga uno más. Entonces ahora ya no es visible porque ya no hay más productos que ver. Y eso es un, así es como crear la página de descargas agregando una galería filtrable para comer. Y en la Galería Filter Blur podemos agregar diferentes categorías de productos. Y los usuarios pueden ver los diferentes productos acuerdo a las categorías que les hayas asignado. Y pueden seleccionar un producto y ver su imagen, o ir a ese producto y ver más detalles antes de decidir si quieren comprarlo. Así que así como eso. En la siguiente lección, veremos cómo crear la página de contacto. Y para ser más específicos, queremos ver cómo utilizar cómo crear un formulario de WordPress para que los usuarios puedan enviarnos un correo electrónico con preguntas o comentarios sobre nuestros servicios. ¿ Cómo recibimos y capturamos correos electrónicos y mensajes de los usuarios en nuestra página web? Veamos cómo hacer eso en la siguiente lección. Te veré en breve. 26. Diseñar la página de contacto: Bienvenido de nuevo. En la última lección, diseñamos la página de descargas y vimos cómo crear estas galerías filtrables. Ahora queremos ver cómo crear la página de contacto. Entonces déjame abrirla para ver qué tenemos. Como de costumbre, tenemos la plantilla normal de WordPress. Por lo que queremos ver cómo crear un formulario que los usuarios puedan sentir y enviarnos un correo electrónico con comentarios o una pregunta o comentario sobre nuestros servicios. Empezar a diseñar esta página de contacto. Podemos ir dentro del tablero y hacer clic en Editar debajo de las páginas. O simplemente podemos usar este atajo, haga clic en Editar página. Y iremos directamente a la página de edición aquí mismo. Entonces, como de costumbre, en Configuración, vamos a plantilla, y vamos a cambiar eso a Elementor ancho completo. Y vayamos dentro de los ajustes de Astros. Barra lateral, sin barra lateral. Disposición de contenido, ancho completo estirado. Vamos a deshabilitar todas estas hacia allá, y luego la carpeta. Y vamos a actualizar eso. Ahora que está actualizado, Vamos a editar con Elementor. Y aquí lo tenemos. Por lo que típicamente en una página de contacto, lo que tienes es tu número de teléfono, iconos de redes sociales, y un formulario con diferentes campos como el correo electrónico y su mensaje. Entonces, ¿cómo hacemos eso? Adelante y agarremos una sección de doble columna. Y como de costumbre, vamos a darle un margen superior de 50. Entonces, eliminemos ese enlace. Mantengámonos fuera de 50 para que tengamos algo de espaciado aquí arriba. Y luego aquí dentro, lo que queremos hacer es agregar un código corto. Entonces vamos a seleccionar ese icono allá arriba para exponer los elementos y escribir código corto. Muy bien, así que arrastremos el código corto ahí dentro. Y en el momento en que lo liberemos, fíjate ahora aquí tenemos ingresa tu código. Por lo que necesitamos agarrar un código de nuestro back-end, nuestro dashboard. Y ese código es lo que será nuestra forma. Entonces sigamos adelante y agarremos ese código corto en el back-end. Pero no tenemos un código corto. ¿ Por qué? Porque ni siquiera tienen la forma misma. No hemos creado un formulario. Entonces, empecemos por crear un formulario. Pero aún no podemos crear un formulario. Por qué no tenemos el plugin. Entonces comencemos instalando el plugin que creará nuestro formulario. Entonces vamos a Plugins, Añadir Nuevo. Ahora hay muchos plug-ins de forma en el mercado, pero el que realmente amo se llama formulador. Ni siquiera sé si tienen un programa de afiliados. Yo no los comercializo. Simplemente me encanta hablar de productos que se usan ahí para mí es gratis y muy potente. Entonces sigamos adelante y tecleemos formulador. Y es el primero de WPA AMU dev. Así que instálalo ahora o monta. Vamos a activar. Perfecto. Y ahora es uno de nuestros plugins instalados. Entonces para acceder a ella, Vamos a desplazarnos todo el camino hacia abajo en este menú de la izquierda. Y debería estar en algún lugar casi al fondo. Pase el cursor sobre, simplemente haga clic en formulador. Y esta es la página de aterrizaje donde nos dirigimos. Entonces solo cerraré estos mensajes están aquí arriba. Y esto es, aquí es básicamente donde se obtiene un resumen de todas las formas de misiones, polos de misiones, quiz de misiones porque se pueden crear formas, encuestas y cuestionarios, y muchas cosas más. Por lo que no profundizaré en formulador y en qué puede hacer. Vamos a seguir adelante y crear una forma. Y la forma que queremos, podemos empezar con una pizarra en blanco y crear el formulario. Nuestro, es nuestro yo o podemos usar plantillas prefabricadas. Por lo que tenemos un Contáctanos boletín de registro, inicio de sesión, formulario de registro. Necesitamos un formulario Contáctenos. Entonces, hagamos clic en eso y digamos Continuar. Y vamos a darle un nombre. Formulario de contacto. Digamos Crear. Y ahí lo tenemos. Entonces aquí está nuestra forma. Aquí está el nombre que le dimos, formulario de contacto y siempre podemos cambiarlo desde aquí. Por lo que podemos cambiarlo para contactarnos. Y si hacemos clic en este icono de rueda dentada aquí mismo, notarás que el primer elemento aquí es copiar código corto. Y este es un código corto que se copiará para llevar al frente, pero llegaremos a eso. Vamos, vamos a explorar lo que tenemos en nuestro formulario. Entonces aquí está la forma. El formulario en sí tiene el nombre, correo electrónico, número de teléfono, y mensaje. Y si previsualizo eso, Así es exactamente como se ve la forma. El nombre, dirección de correo electrónico, número de teléfono, mensaje, y luego enviar mensaje. Entonces FirstName, mensaje de número de teléfono de correo electrónico, y luego enviar el botón de mensaje. Y podemos reorganizar estos. Podemos simplemente agarrar esto y arrastrarlo y soltarlo justo al lado de cuando esa línea azul aparezca en el lado derecho ahí, dejarla ahí, y ahora estarán en una línea. Entonces vamos a previsualizar eso. Y ahora así se ven. Y podemos conseguir leer el overfill, por ejemplo, si no quieres el número de teléfono, solo podemos eliminar ese campo. Y ahora nos queda el nombre y la dirección de correo electrónico. Vamos a previsualizar eso. Y eso es lo que tenemos. Entonces publiquemos nuestro formulario. Y ahora porque está publicado, lo primero que obtenemos es este popup con nuestro código corto. Entonces vamos a copiar ese código corto y vamos a recibir este mensaje. Este código corto con este número 392 es el mismo código corto al que podemos acceder haciendo clic en este código aquí y haciendo clic en Copiar código corto es el mismo código corto. Ahora si cambiamos el front-end donde estamos editando nuestro contacto, recuerda que dejamos caer este elemento de código corto aquí y nos presentaron este campo. Ahora podemos pegar ese código corto ahí y luego aplicar. Está bien, así que sigamos adelante y pinchemos Actualizar. Y vamos a previsualizar los cambios. Perfecto, Así que así se ve nuestra forma en este momento. Añadamos algún margen justo debajo de él. Entonces seleccionando esta sección, yendo dentro avanzado, Vamos a darle un 90 a continuación. Y ahora tenemos ese espacio aquí abajo. Actualicemos eso y previsualicemos los cambios. Sí, eso se ve bien. Ahora por supuesto, necesitamos cambiar este color para que coincida con el tema del sitio web. Entonces sigamos adelante y editemos el color de fondo del botón. Pero ahora no podemos editar mal aquí dentro y un mentor porque la forma no fue creada con Elementor. Recuerda lo que acabamos de hacer es pegar aquí el código corto. Lo creamos usando cuatro minutos. Entonces lo que tenemos que hacer es ir debajo los campos, aparecer, Hay aparición. Así que haga clic en apariencia. Y aquí es donde podemos editar cómo bucles el formulario. Entonces, en primer lugar, el estilo de diseño aquí se puede cambiar de los valores predeterminados, que es lo que tenemos aquí. Dos planos, sin fronteras. Entonces deshazte de esas fronteras afiladas. Y este es el que me gusta, así que actualizaré eso. Pero también hay unos cuantos más dependiendo de tu gusto. Por lo que desplazándose hacia abajo bajo los colores, aquí es donde podemos cambiar los colores de los diferentes elementos de nuestra forma, incluido el botón. Entonces volvamos aquí bajo colores. Escojamos Custom, y eso revelará más opciones. Y estos son los diferentes elementos que conforman las formas con las que alimentamos formulados. Por lo que el último elemento aquí en la lista es enviar botón. Y como puedes ver, el color está actualmente en azul. Entonces, vamos a hacer clic en eso. Y aquí vamos a cambiar eso a 40, 40, 40. Y en el hover, queremos darle ese amarillo. Entonces déjame arrastrar esto y tratar de darle un amarillo. Sí, creo que eso me gusta. Sólo copiaré este amarillo. Y dentro de foco pegado ahí dentro. Porque en foco queremos que siga siendo así de amarillo. Presione Entrar. Entonces en sin embargo, es amarillo y desenfocado cuando está activo, es amarillo. Y vamos a actualizar eso. Y ahora que está actualizado, vayamos dentro de nuestra página de Elementor, seleccionemos el elemento de código corto y aplicamos. Para que podamos aplicar esos nuevos cambios de color. Y luego vamos a previsualizar los cambios. De acuerdo, Así que me gusta lo que estoy viendo. Por lo que ahora en hover, el botón es amarillo en estado normal, rima con el resto de la página web. Entonces agreguemos algún mensaje aquí solo para hablar con los visitantes. Entonces, arrastrémoslo y digamos. Entonces. Al entrar, es ir dentro de estilo, color, dentro de la tipografía. Adelante y cambiemos eso a Montserrat. Y cambiemos el peso de la fuente a 800. Y me gusta a lo grande. Entonces hagámoslo grande aquí, así. Y luego vamos a hacer clic en este icono para mostrar los elementos. Y arrastremos algo de texto ahí. Muy bien, Así que algo de ese tipo. Ahora aumentemos el espaciado entre estos dos. Por lo que seleccionando esta sección y yendo dentro de las columnas de diseño más anchas. Y luego aquí abajo, podemos agregar un número telefónico solo podamos duplicar esto. Entonces solo seleccionaré eso. Y luego arrastrémoslo debajo de este texto. Y mientras aún está seleccionado, vamos adentro aquí y reduzcamos el tamaño. Démosle ese color amarillo. Pero recuerda, usa el mismo tono de amarillo o cualquier color que estés usando. Usa el mismo código de color. No se limiten a arrastrar así los amarillos. Es bueno asegurarse de que estás usando colores específicos de marca para tu marca o derecha, así que actualiza eso. A lo mejor podríamos añadir un correo electrónico. Entonces voy a hacer clic en eso, tal vez arrastre otros textos aquí mismo. Y así podría ser la dirección de correo electrónico. Actualizar eso. Y ahora vamos a previsualizar los cambios. Y esa es nuestra página de contacto. Déjame simplemente desplazarme hacia abajo. Disminuya el espaciado entre estos dos. Entonces disminuyamos el espaciado aquí mismo. Volviendo aquí, seleccionaré el texto aquí y eliminaré este margen aquí. Y para el margen inferior, Empecemos a reducirlo manualmente así hasta que estemos satisfechos. Entonces actualiza eso. Analicemos los cambios. Entonces eso se ve mucho mejor. A agradable Página Contáctanos. Y por supuesto, es redundante agregar iconos de redes sociales aquí porque ya los tenemos en el pie de página. Por lo que la página Contáctenos tiene todos los detalles que un cliente necesitaría para ponerse en contacto con nosotros. Es así como diseñar la página Contáctenos. En la siguiente lección, quería hablar de la página del blog. Entonces hagámoslo en breve. 27. Ejercicio: diseña la página del blog: Hola, y bienvenidos de nuevo a otra lección impresionante. En la última lección, creamos esta página Contáctanos. Ahora es el momento de hablar de esta página del blog. ¿ Cómo mostramos nuestra publicación de blog? Y ahora, como de costumbre, nuestro blog en este momento tiene la plantilla predeterminada de WordPress. Por lo que necesitamos diseñarlo con Elementor. Pero, ¿cómo lo diseñamos? Entonces te habrías dado cuenta, pasé de la cara de descargas a la página de contacto y salté la página del blog. Entonces eso fue intencional. Quería darte una oportunidad en este punto de hacer algo por tu cuenta, para diseñar esta página de blog. ¿ Recuerdas cómo creamos nuestros productos digitales? Estos productos digitales, entramos dentro nuestras publicaciones y decimos Añadir nuevo. Y aquí dentro le daremos un producto y nombre y estableceremos todas las configuraciones del lado derecho, luego adelante y editarlo en el front-end con Elementor. Entonces así creamos nuestros productos digitales. Y recuerda que dijimos, crear un producto digital es lo mismo que crear una entrada de blog o crear un podcast. Y todos esos diferentes tipos de contenido se crean como publicaciones de WordPress. Por lo tanto, agrega nuevo. Y recuerda también creamos categorías para los diferentes productos. Entonces ahora si agregamos artículos como entradas de blog, artículos como publicaciones de WordPress, aquí, también necesitamos darles categorías. Entonces si escribimos un artículo sobre inteligencia artificial, podemos tener una categoría sobre inteligencia artificial. Entonces ese es el método para crear la entrada del blog. Ahora, para mostrarlos en el front end. Recuerda de la misma forma en que mostramos estos productos aquí en esta página. Creamos estas avaricia y luego desactivamos algunos de los elementos como metadatos, el autor, y extracto. Tendrás que asegurarte de que la información que desactivamos desde la cuadrícula de estos productos sea visible, esté habilitada en la entrada del blog. Entonces ese es un reto rápido para que aceptes. Sé que suena un poco complicado ahora, pero a estas alturas creo que has ganado más confianza después de ver todas esas lecciones. Y siempre puedes volver a la lección en la que creamos esta cuadrícula y ver cómo hacerlo porque es el mismo método. Espero que disfruten de este reto. Hazme saber qué piensas al respecto. Si experimentas algún problema o problema, avísame lo que piensas en la discusión. Sigamos adelante la discusión. Entonces así es como vas a crear una página de blog. Y una vez que hayas terminado con la página del blog, Ya es hora de hablar de cómo incorporar un botón de descarga real que realmente pueda descargar un producto. A ver que en las próximas lecciones, nos vemos en breve. 28. Exploración del complemento EDD: Y bienvenido de nuevo. Espero que te hayas tomado algún tiempo para crear la página del blog. Y sobre todo, espero que hayan disfrutado del reto. Vimos cómo crear la página de contacto y todas estas otras páginas. Por lo que ahora mismo queremos trabajar en el sistema de pago. Queremos agregar un botón de pago a estos productos, pero para ello, necesitamos instalar un plugin de terceros llamado Descargas digitales fáciles. Entonces vayamos dentro de nuestro Dashboard. Y vayamos directamente dentro de los plugins, agregamos mu. Y aquí, buscaré descargas digitales fáciles. Deberías ser el primer producto por descargas digitales fácilmente con más de 50000 instalaciones. Voy a instalar ahora. Vamos a activar. Está bien, así que ahora está activado. Y para acceder a ella, Vamos adentro descargas. Y por supuesto que aún no tenemos ningún producto digital creado, que es lo que estamos a punto de hacer. Pero antes de que hagamos eso, quiero ir dentro de ajustes. Como puedes ver, tenemos muchas opciones diferentes, incluyendo agregar nuevas. Podemos crear categorías para los diferentes productos lo harán. Etiquetas, historial de pagos, clientes, códigos de descuento. Podemos ver informes. Quiero que vayamos dentro de la configuración para tener una visión general de las diferentes configuraciones. Entonces aquí estamos. Como puedes ver, por defecto, el momento en que instalamos descargas fáciles de instalar, el plugin también generó algunas páginas por defecto que necesita para permitir a los clientes realizar pagos, y eso es la página de pago, esa página de confirmación de compra. Error de transacción si un cliente está tratando de pagar y el pago ha fallado, allí se mostrará esta página y el historial de compras. Y por supuesto, todos estos otros ajustes. Tenemos ajustes de moneda. Y puedes seguir adelante y seleccionar el tipo de moneda en la que quieres aceptar pagos. Después yendo dentro de los pagos, tenemos diferentes tipos de pagos, raya, PayPal, Amazon, y todos estos otros. Incluso tenemos pagos de prueba. Puedes hacer tus pruebas antes de que se ponga en marcha. Debajo de los pagos, tenemos diferentes configuraciones anidadas con la pestaña. Correos electrónicos. Tenemos diferente plantilla de correo electrónico y podemos editar los recibos de compra, notificaciones de venta nuevas, todos estos son diferentes tipos de correos electrónicos que podemos configurar, pero este es un curso completo por sí solo. No podemos cubrir todo lo relacionado con la gestión de tus productos digitales en este curso. Y también podemos cambiar algunos de los estilos de los elementos en el front end, como el estilo de botón predeterminado. Podemos cambiarlo de botón a texto plano y verás el botón en la parte delantera. Podemos cambiar el color del botón si quieres. Y por supuesto, muchos más ajustes anidados dentro de aquí. Pero claro, como ya he mencionado, no vamos a entrar en todos esos. Entonces ahora que tenemos alguna información básica sobre productos de descargas digitales, en la siguiente lección, Veamos cómo usar el plugin para gestionar estos productos que creamos como publicaciones de WordPress. Entonces hagámoslo en la siguiente lección. Te veré en breve. 29. Conexión el complemento de EDD a PayPal: Las descargas digitales fáciles han hecho que sea muy sencillo conectarse a tu cuenta PayPal. Entonces si pudiéramos volcar dentro de la pestaña de PayPal justo aquí, todo lo que necesitamos hacer es hacer clic en este botón que está convenientemente ubicado justo aquí. Entonces voy a seguir adelante y hacer clic en eso. Y estos pop-up aparecerán aquí, tratando de conectarnos con el papel. Por lo que definitivamente necesitas tener una cuenta de paypal. Y por supuesto, si no tienes una cuenta PayPal, aquí es donde crearás una nueva cuenta. Por lo que solo importaré el correo que usé para mi PayPal. Y luego calor a continuación. M porque ya tengo soy cuenta. Como puedes ver, el mensaje dice que he sido redirigido a la página de inicio de sesión. Por lo que solo seguiré adelante e ingresaré a mi cuenta PayPal. Y se integrarán las dos cuentas. Entonces sigamos adelante y digamos estar de acuerdo y conectarlo. Eso es todo. Ahora, hemos integrado con éxito PayPal con descargas digitales fáciles. Y aquí estamos. Voila. Por lo que ahora nuestro plugin de descargas digitales está listo para aceptar pagos en la página web. 30. Gestionar productos digitales utilizando el complemento de EDD: Bienvenido de nuevo. Ahora que hemos tenido una visión general del plugin de descargas digitales fáciles, Vamos a seguir adelante y usarlo para gestionar nuestros productos digitales. Por lo que yendo dentro de las descargas, haré clic en Agregar Nuevo. Y como de costumbre, necesitamos darle un nombre a estas descargas. Y el nombre debe ser el nombre del producto que se supone que representa en la lista de productos para los que creamos podría simplemente hacer clic derecho todas las publicaciones y abrir este enlace en una nueva pestaña para que podamos Échale un vistazo. Déjame simplemente abrirla. Estos productos tienen nombres, por ejemplo, la plantilla de culturista. Entonces lo que necesito hacer es copiar plantilla de culturista. Y luego volvamos dentro de nuestros productos. Y peguemos el nombre ahí dentro. Porque ahora estamos creando un botón de descarga para estos productos. Entonces volviendo aquí, así que para la descripción, lo que tenemos que hacer es entrar aquí y vamos a hacer clic derecho esto y abrir enlace en nuevas pestañas o podemos ver el front end. Y ahora esa descripción necesita ser tomada de esta sola página de descripción del producto. Entonces vamos así estoy asumiendo aquí que tendrías alguna descripción de tu producto. Esa es la misma descripción. Nos pondríamos al máximo su copia eso y lo pondríamos aquí. Así que pegarlo ahí dentro. Y esto será muy útil para los motores de búsqueda porque Si bien esto es lo que verán los clientes en tu página, lo que aparecerá en los resultados de los motores de búsqueda es esta descripción que está en el botón de descargas digitales fáciles que estás creando. Entonces ese texto es este texto aquí mismo. Por lo que desplazándose hacia abajo. Por supuesto ahora aquí podemos establecer el precio. Lo dejaré en 0 porque esta es una descarga gratuita. Y abajo ahí tenemos algunas configuraciones más aquí podemos establecer el nombre de ese archivo de descarga. Entonces démosle el mismo nombre porque asumiría que has hecho tu plantilla igual. Entonces plantilla culturista, MM, la URL del producto cuando el cliente paga, esta es la URL que obtendrán con el fin de acceder al producto. Entonces te mostraré cómo crear ese enlace. Pero sólo para explorar estas otras áreas aquí, como se puede ver en el lado derecho, tenemos un área para categorías. Podemos añadir una nueva categoría desde aquí o hacer clic aquí. Y recuerda cómo creamos categorías para nuestros posts. Por lo que necesitamos crear la misma categoría. Por lo que yendo dentro de la pestaña de mensajes, dentro de las categorías, teníamos Elementor, logotipos y revistas. Por lo que necesitamos las mismas categorías. Entonces en lugar de salir de esta página e ir aquí, vamos a crear las categorías. Bueno, todavía estamos aquí. Agregar nuevo. Vamos a darle un nombre Elementor. Y vamos a golpear Enter y comprobar eso. Vamos a crear otro. Golpea Enter y revisa revistas de logotipos que entraría. Ahora porque se trata de una plantilla elemental, desmarquemos eso y comprobemos la categoría Elementor. Entonces publicémoslo o cabalguemos. Por lo que ahora se publica nuestro botón. Entonces lo que tenemos que hacer es desplazarnos hacia abajo. Y del lado derecho aquí abajo, Agregar al carrito días un código corto de compra. Copia ese enlace en el recuadro. Y vayamos dentro de nuestros productos aquí bajo posts. Por lo que todos los mensajes. Y vamos a crecer todo el camino hacia abajo, la plantilla de culturista y editar con Elementor. Por lo que sólo voy a hacer clic derecho y abrir enlace en nueva pestaña. Y aquí estamos. Entonces recuerda en lecciones anteriores mencioné este botón cambiaría con el tiempo ha llegado para que lo reemplacemos. Entonces lo seleccionaré y lo eliminaré. Dentro de aquí, escribiré código corto. Código corto. Arrastre un código corto elementos justo ahí hasta ese punto. Y recuerda este corto código que acabamos de copiar de aquí. Vuelve aquí y pega ahí dentro. Y ahora tenemos nuestro botón de compra. Actualizar eso. Y vamos a previsualizar los cambios o montar. Por lo que ahí lo tenemos. Por lo que podemos hacer lo mismo por esta parte. Elimina eso, y puedo simplemente duplicarlo, arrástrelo y soltarlo. Cambia la actualización que Let's be realmente. Y ahí lo tenemos. Entonces si hago clic en Compra , agrega el producto a un carrito. Y ahora podemos echar un vistazo. Por lo que si hago clic en Checkout será llevado a la página de pago. Y nuestro producto está listado ahí con un precio y el total requerirá para pagar. Y justo debajo, se proporcionaron tres campos de entrada donde se supone que debemos sentir en nuestros detalles. Por lo que sólo usaré algunos detalles falsos aquí. Y click Gratis Descarga y compra está confirmada. Por lo que ahora aquí están los detalles de nuestro producto y podemos hacer clic en los productos para descargarlo. Pero ahora cuando hago clic en él, mira lo que pasa. Tomaría en las picas, lo siento, este archivo no se pudo descargar. Entonces, ¿cuál es el problema? Porque no hemos dicho a WordPress dónde conseguir estos productos. Recuerda que teníamos estos campos donde íbamos a ingresar la URL al baño de producto. El motivo. Entonces veamos cómo agregar el enlace del producto en la siguiente lección, nos vemos en breve. Está bien. 31. Agregar un enlace de descarga directa a un producto digital: Y bienvenido de nuevo. Por lo que ya es hora de agregar el enlace que permitirá a los clientes descargar los productos. Entonces para hacer eso, necesitaremos tener una cuenta de Dropbox. Y la razón es que no quieres almacenar tus productos digitales en tu servidor WordPress porque eso realmente ralentizará tu sitio web. En circunstancias normales al agregar imágenes a su sitio web, las agrega a la biblioteca. Nosotros los añadiríamos aquí mismo, y eso podemos hacer. Pero el problema es que ralentizará tu sitio web porque ahora estás empezando a agregar archivos descargables que probablemente sean más grandes que las imágenes a tu sitio web. Y WordPress necesita cargar todos esos materiales. Entonces esa es la razón por la que necesitamos una plataforma de almacenamiento de terceros desde la que solo necesitamos escoger el enlace. Y prefiero Dropbox. Por lo que ya abrí mi cuenta de Dropbox aquí. Y estoy dentro de una carpeta donde tengo algunas plantillas elementales. Y la forma de conseguir el enlace es primer lugar, comprimir tus productos. Por ejemplo, si se trata de una plantilla de logotipo en cada formato de fila, por ejemplo, formato Adobe Illustrator o Photoshop. O si se trata de una plantilla elemental en formato JSON, asegúrate de tener ese producto y luego comprimirlo. Entonces, cualquiera que sea el producto digital que estés vendiendo, necesitas tenerlo con cremallera. Una vez que esté comprimido, solo arrastraré este producto a mi carpeta de Dropbox. Supongamos que esta es una carpeta que has asignado para este tipo de productos y una plantilla de mentor. Entonces lo dejaré caer ahí. Dale un momento para subir. Y ahora está subido. Entonces digamos por ejemplo, este es el producto que quiero poner en esa página. Entonces copiaré el enlace. Y ahora se copia el enlace, como se puede ver en este mensaje aquí. Vuelve aquí, digital y editemos estos productos digitales. Y me desplazaré hacia abajo todo el camino hasta donde necesitamos el enlace. Voy a pegar el enlace ahí dentro. Y luego vayamos todo el camino hasta el inicio del enlace. Sustituir la WWW por DL para su descarga. Y después de Dropbox, reemplaza eso por contenido de usuario. Entonces ahora es D2L Dropbox, usuario contents.com, y luego tu producto el que convierte este enlace en un enlace de descarga directa sin el DL y el contenido del usuario. El enlace predeterminado simplemente básicamente abre ese producto en Dropbox. Pero lo que necesitamos es cuando alguien hace clic en el enlace, solo quieres un pop up preguntándole si quiere descargar el producto. Entonces con nuestro enlace listo, sigamos adelante y golpeemos Update. Está bien, recuerda que estamos usando este enlace de productos aquí mismo. Entonces déjame copiarlo para asegurarme de que estamos usando el correcto. Se trata de plantillas de culturista. Entonces entremos aquí y digamos Editar con Elementor. Y pasemos a esa pestaña. Está bien, así que aquí está nuestro botón. Yo sólo quiero asegurarme de que sea el mismo botón. Entonces pega eso ahí dentro. Sí, sigue siendo el mismo botón. Actualicemos eso. Vamos a dar click Actualizar aquí abajo. Entonces vamos a previsualizar los cambios. Por lo que esta vez cuando haces clic Compra gratuita agregada al carrito, así que checkout. Adelante a ver si podemos descargar nuestro producto. Muy bien, vamos con las credenciales predeterminadas aquí. Y aquí están nuestros detalles de producto. Entonces, vamos a dar clic en el enlace. Y ahora nos presenta esta opción aquí. Por lo que puedo decir Guardar Archivo. El archivo comienza a descargarse aquí arriba. Y podemos seguir adelante y abrirla. Entonces así es como agregar el enlace. Todo lo que necesitas hacer es básicamente agregar tus productos y asegurarte de que estén con cremallera. Agrega tus productos a Dropbox, y luego ve a tu producto específico y copia el enlace. Una vez que hayas copiado el enlace, entra dentro de tu producto, pegado ahí, y luego reemplaza la WWW por df para su descarga. Después de Dropbox, contenido de usuario, contenido de usuario. Y ahora link está listo. Después agarra el código corto y colócalo en el front-end de tu página aquí mismo. Y ahora tu botón está listo. Entonces con eso, así es como agregar el botón de compra a tus productos. Y eso marca el final de esta lección. Espero que lo hayan disfrutado. Te veré en la siguiente lección. 32. Agregar un forma de registrarse CTA a la página de inicio: Bienvenidos a esta lección. Ya casi terminamos con un sitio web, pero hay algunas cosas más que debemos hacer para mejorar la experiencia del usuario en nuestro sitio web. Y uno de esos seres es que necesitamos agregar un formulario de registro para capturar correos electrónicos de los usuarios para que podamos mantenernos en contacto con ellos. Recuerda mencioné que añadiríamos un formulario de registro aquí mismo en la página de inicio o en la página de destino. Entonces ahora sigamos adelante y hagamos eso. Como de costumbre, seguiré adelante y pincharé editar con Elementor para que podamos contestar el modo de edición. Y aquí nos desplazamos hacia abajo. Por lo que quiero poner esa forma entre estas dos categorías de plantillas. Entonces eso es en algún lugar de aquí. Voy a dar click en Plus. Por lo que podemos agregarla aquí. Y voy a seguir adelante y dar click más y añadir estos sección de ancho completo. Y vamos a separarlo de esta sección aquí arriba. Entonces vamos a seleccionar que ir dentro avanzado, quitar ese enlace, y vamos a darle un margen de 50 en la parte superior. Por lo que ahí lo tenemos. Si bien la sesión todavía está seleccionada, vamos dentro de estilo y vamos a darle una imagen de fondo. Por lo que imagen de fondo, seleccione ese icono de pincel. Y aquí dentro, esta vez no le estamos dando un color de fondo, sólo le estamos dando una imagen. Por lo que seleccionaré una imagen aquí. Por supuesto, hay que buscar una bonita imagen que represente los productos que se están vendiendo. Creo que usaré esto. Insertar medios. ¿ Verdad? Si bien seguimos aquí. Para la posición, digamos centro, centro adjuntos, scroll, repita, digamos no-repita. Y para el tamaño, digamos tapar. Vamos a probar cliente. Vamos sólo con un 100 por ciento para que llene toda la sección de izquierda a derecha. Y ahora por supuesto, necesitamos agregar algún contenido aquí para aumentar su altura. El alto de este apartado se determinará por los contenidos en su interior. Entonces, antes que nada, duplicemos esta columna. Ahora tenemos dos columnas, y arrastraré esto un poco, redimensionarlo. Y aquí quiero agregar un código corto. Entonces arrastraré ese código corto ahí dentro. Y ahora por supuesto ahora tenemos que agarrar un código corto del backend. Recuerda cómo creamos el contacto desde en la página de contacto, estamos usando formulador para crear otro formulario que lo hará, traerá a esta página. Entonces volvamos al back-end y creemos un formulario usando fórmulas. Pero antes de eso, haz clic en Actualizar. Correcto, así que vamos a previsualizar eso por ahora. Desplazarse hacia abajo. Entonces aquí es donde estará nuestra forma. Entonces vayamos dentro del tablero, desplázate hacia abajo. Abrir coordinador UP. Y como cabría esperar, ya tenemos un formulario, nuestro formulario Contáctenos. Ahora queremos crear uno nuevo. Por lo que seguiré adelante y pegaré Crear. En esto, quiero un formulario de registro de newsletter. Por lo que voy a hacer clic en eso y decir Continuar. Vamos a llamarlo, inscríbase. Crea eso. Y por defecto ya está poblado con dos campos, nombre y dirección de correo electrónico, luego el botón de suscripción. Entonces sigamos adelante y previsualemos eso antes de publicarlo. Muy bien, para que los usuarios puedan ingresar su nombre y dirección de correo electrónico, luego suscribirse a nuestra lista de correo. Y podemos estar enviándoles un correo electrónico con cualquier información que consideremos importante para ellos. Entonces porque estamos satisfechos con nuestra forma, Vamos a publicarla. Está bien, seguiré adelante y copiaré ese código corto. Y vamos al frente. Y aquí adentro. Si bien esto está seleccionado, Vamos a pegarlo ahí. Correcto, Así que ya empieza a aparecer. Vamos a golpear Actualización y cambios de privilegio. Entonces es solo para ver lo que necesitamos mejorar. Entonces desplazándose hacia abajo, Así se ve. Pero ahora porque el fondo es un poco, BZ no pudo distinguir la forma del fondo. Entonces hagamos algo al respecto. Por lo que saltando por aquí, seleccionaré esta sección e iré dentro de estilo colapsado fondo en, ir dentro de la superposición de fondo. Porque queremos agregar una superposición. Haga clic en ese tipo de fondo. Vamos a darle un color, tal vez negro. Y eso simplemente oscurecería en el fondo para que la forma sea más visible. También podemos aumentar la opacidad, tal vez hasta ese punto. Actualicemos eso y previsualicemos los cambios. Desplazarse hacia abajo. ¿Verdad? Por lo que ahora la forma es más visible esta vez. Añadamos algún texto descriptivo al lado izquierdo. Por lo que seleccionaré eso para agregar un encabezado de texto. Entonces tal vez aquí podamos decir plantillas libres sentido directo a tu bandeja de entrada. Por supuesto, vamos a cambiar el color ahí, dale un blanco por ahora. Y luego cambiemos la familia tipográfica a Montserrat. Y quiero darle un peso de fuente de 800 y aumentar un poco el tamaño. A lo mejor hasta ese punto. Volveré a hacer clic en este ícono para exponer los elementos y arrastraré algún texto ahí, algún texto descriptivo. Y aquí podemos decirle a los usuarios lo que ellos, qué acción necesitan tomar para obtener estas plantillas gratuitas. Entonces, está bien, Entonces eso tiene sentido. Esto es bastante tentador porque recuerden lo que estamos creando es un llamado a la acción. A CTA, queremos que los clientes o clientes potenciales tomen medidas. Y la acción facilidad enviándonos su correo electrónico a nosotros, pero no pueden darnos su correo electrónico si no tenemos nada valioso que darles. Entonces creo que esta es una buena manera de capturar correos electrónicos de los usuarios. Entonces ahora vamos a agregar algo de margen en la parte superior aquí, igual que tenemos un poco de espaciado agradable por debajo. Por lo que seleccionando la sección, entraré dentro acolchado avanzado. Démosle tal vez un 50. Actualicemos y previsualicemos los cambios. Pero antes de privilegiar los cambios, permítanme simplemente seleccionar eso, ir dentro del estilo y cambiemos el color a blanco. Y luego actualizar eso. Muy bien, vamos a previsualizar los cambios. Impresionante. A mí me gusta un llamado a la acción, pero claro que necesitamos hacer algo con estos colores azules aquí. Entonces hagamos algo al respecto. Saltando dentro del tablero. Ve dentro de la apariencia. Como de costumbre. En primer lugar, elijamos el diseño plano. Y luego vamos al interior Colores, Personalizado, desplázate hacia abajo hasta el botón. Y démosle ese color amarillo. Ahora recuerda, necesitas usar el mismo tono consistente de amarillo. Pero por ahora solo arrastraré estos para encontrar un bonito amarillo con el que podamos trabajar por ahora. Entonces creo que eso es satisfactorio. En el hover. Queremos que sea blanco. Y en el enfoque. A lo mejor blanco también. Por ahora. Porque es blanco, es x no pueden ser esposas. Hagamos que falte en el hover. Dicho debe ser negro porque el fondo del botón será blanco. Entonces actualicemos eso. Y vamos a previsualizar los cambios. Entonces así es como se ve ahora. Con esos cambios, Vayamos al frente. Seleccionemos el formulario en sí y hacemos clic en Aplicar. O cabalgar ahí dentro lo tenemos. Entonces vamos a previsualizar los cambios. Desplazarse hacia abajo o hacia la derecha. Entonces creo que eso se ve presentable. Podemos trabajar con eso. Por supuesto, puedes hacerlo mucho mejor. Definitivamente. Dos cosas más. Yo quiero hacer, nuestro cambio, este color de fuente aquí mismo, como puedes ver, se ve un poco gris. No es el blanco afilado. Por lo que los colores de la etiqueta necesitan ser blancos. Ya veremos cómo hacer eso. Y también quiero equilibrar estos acolchado en la parte superior aquí con el relleno en la parte inferior, como se puede ver, estos pequeños espacios aquí y arriba. Por lo que necesitamos asegurarnos de que esto esté correctamente alineado. Entonces volviendo adentro aquí, seleccionaré una sección y le daremos un relleno inferior de tal vez, intentemos 10, y probemos 15. Por lo que eso debería aumentar el espaciado de abajo aquí. Actualizar eso. Analicemos los cambios. Cómo ahora se ve mucho mejor. Entonces hagamos algo con estas etiquetas volviendo dentro de nuestro editor formulador, sigamos adelante y expandamos los conceptos básicos de campo. Y bajo los conceptos básicos de relleno tenemos la etiqueta. Entonces selecciona la etiqueta ahí y dale tal vez ese color amarillo. Necesidad de empujar eso hacia arriba. Y entonces vayamos a buscar eso todavía. Creo que iré con eso. Y copiaré ese código por si acaso necesito volver a usarlo, actualiza eso. Podemos dejar el asterisco como rosa. Este es el asterisco. Se ve de color rojo. Realmente no se puede decir que es rosa. Y ahora porque tenemos estos cambios, vayamos dentro de nuestra vista, nuestro espacio de trabajo Elementor. Seleccionemos el formulario y aplicamos los cambios porque ya los actualizamos aquí. Desplácese hacia abajo. Analicemos los cambios. Muy bien, Así que nuestro teléfono se ve mucho mejor ahora. Entonces con ese tiempo ahora para pasar a la siguiente cosa importante que tenemos que hacer antes de terminar nuestra página web. Y eso es para hacer que el sitio web responda en diferentes dispositivos, diferentes tamaños de pantalla. Veamos cómo hacer que el sitio web se vea presentable en smartphones, tabletas, porque ya se ve bien en el escritorio. Eso haremos en la siguiente lección. Te veré en breve. 33. Hacer que la navar sea responsable: Bienvenido de nuevo. Ya casi terminamos con nuestro sitio web de descargas digitales. Ahora queremos hacer que las páginas web respondan en diferentes tamaños de dispositivo. Y entonces lo que queremos hacer es empezar desde arriba, ir hacia abajo, hacer que cada elemento receptivo y lucir bien en los diferentes tamaños de dispositivo. Y usaremos estos homepage como ejemplo. Y luego usarás esos mismos principios y habilidades para hacer que el resto de las páginas respondan. Entonces sin Western más tiempo, Empecemos con la barra de navegación y que sea sensible. Entonces entrando aquí y rondando sobre eso, haré clic en nav para que podamos entrar al modo de edición de nav o cabalgar aquí estamos. Por lo que ahora tenemos nuestra barra de navegación editable. Lo que queremos hacer es hacer clic en este icono del modo responsive aquí abajo, y eso revela estas barras responsive. Lo que queremos hacer es saltar dentro de la vista móvil, móvil. Y así se verá el menú. Por lo que típicamente lo que queremos es tener nuestro logo en un lado y nuestro menú de hamburguesas en el otro lado. Entonces ahora, porque estos dos elementos están dentro de la misma sección, que es esta sección azul. Por el momento, el logotipo en las pantallas móviles ocupa el 100% del ancho. Queremos que ocupe tal vez la mitad de la semana, y este menú de hamburguesas ocupará la otra mitad. Entonces lo que hacemos es seleccionar esta columna. Está sosteniendo el logo y bajo diseños, ancho de columna, Vamos a darle un 50 por ciento. Y ahora como se puede ver por el contorno, está ocupando el 50% del ancho de la sección. Y te darás cuenta que tengo esta columna extra en el medio aquí. Se supone que tenemos una barra de búsqueda aquí, pero hablaremos de la barra de búsqueda y funcionalidad de búsqueda en la siguiente lección. Entonces por ahora, solo quiero deshacerme de v. Así que ahora nos quedan con dos columnas en solo para estar seguros, déjame volver al modo escritorio. Y esas son las dos columnas con las que se quedan. Entonces arrastrando eso en primer lugar para cambiar el tamaño un logotipo y seleccionando el menú. Iré dentro de la disposición y lo empujaré hacia el lado derecho. Así. Porque nos deshicimos de la columna extra que estaba entre aquí, tuvimos que hacer estos ajustes. Ahora volviendo al lado este vista móvil, tenemos estas dos columnas. Esto ya es del 50 por ciento. Seleccionemos esto. Y bajo Ancho de columna Layout, también le demos un 50 por ciento. Está bien, así que ahora ambos están en la misma línea. Pero lo que queremos hacer es seleccionar ese menú y debajo de Layout, desplácese hacia abajo y busque responsive. Y empujémoslo hacia el lado derecho. Ahora está en el extremo derecho de la pantalla. Actualicemos eso y hagamos una vista previa de los cambios. O bien. Entonces ahora no tenemos nada más que podamos ver aquí porque estamos, ahora mismo estamos previendo el menú así que para ver cómo se ve en las pantallas móviles, Vamos a tocar Control Shift I en el teclado. Control Turno I para traer arriba las DevTools. Y ahora que hemos sacado las DevTools, vamos a hacer clic en estos ícono del modo responsive aquí arriba que cambiará al modo responsive. Y ahora como puedes ver aquí arriba, tenemos diferentes opciones para imitar dispositivos reales. Por ejemplo, bajo este menú desplegable, tenemos diferentes tipos de teléfonos. Galaxy, iPhone 11, 12, todo este tipo de dispositivos. Entonces en este momento, así es como se ve el sitio web en Galaxy S 20, linux. Y si hacemos clic en el menú desplegable, así se ve el menú desplegable. Por supuesto, puedes hacer mucho más para mejorar ese menú, pero solo lo dejaré así. Creo que estoy satisfecho con cómo se ve. Entonces haré clic en eso para salir del modo responsive, y luego haré clic en eso para cerrar las DevTools. Volvamos aquí y veamos cómo se ve en la tableta. Entonces así es como se ve el sitio web en tablet. Y creo que también me gusta. Entonces y en el escritorio, así se ve. Por lo que volviendo dentro de nuestro panel de control, ahora que estamos satisfechos con nuestra barra de navegación receptiva. Vamos por dentro de las páginas, todas las páginas. Para que podamos previsualizar la barra de navegación en una página web real. Entonces veamos la página de inicio. Haré clic con el botón derecho Ver y abrir enlace en nueva pestaña. Cambiemos esa pestaña y ahora pulsemos Control Shift I. Así podremos abrir las DevTools y entremos en modo de diseño responsive. Y ahora con nuestro contenido, así se ve nuestro menú. Creo que me gusta cómo se ve el menú y cómo el navbar Luke's. Entonces en la siguiente lección, hagamos que el resto de la página sea sensible porque como puedes ver, aquí no se ve muy sensible. Necesitas hacer algún trabajo en ello. Entonces veamos cómo hacer que contenido real de la página sea sensible. En la siguiente lección, nos vemos en breve. 34. Hacer que la página de página de inicio: Bienvenido de nuevo. En la última lección, hicimos que la barra de navegación respondiera en diferentes tamaños de dispositivo. En esta ocasión queremos hacer que el contenido principal de la página web sea sensible también en diferentes dispositivos. Por lo tanto, permítanme salir este modo de diseño responsive haciendo clic en eso. Y luego déjame cerrar las DevTools. Entonces vamos a editar con Elementor o cabalgar. Entonces aquí estamos. Como de costumbre. Empecemos haciendo clic en el icono del modo responsive allá abajo. Y entonces ahora revela esta barra. Empecemos con una pantalla móvil. Entonces haga clic en eso. Aquí estamos. Por lo que comenzaré seleccionando la columna que está sosteniendo el bloque de texto. Entonces déjame simplemente volver al modo de escritorio. Esta columna que está sosteniendo estos textblock es la misma columna aquí. Por lo que seleccionándolo, quiero ir adentro avanzado. Vamos a darle un relleno de 20. Por lo que eso trae un espaciado uniforme en todo el contenido desde los bordes. Y por supuesto, necesitamos reducir el tamaño de esta fuente, seleccionando la fuente aquí, descargas ilimitadas, ir dentro de la topografía, agarrar eso y empezar a arrastrar. Creo que me gusta de esa talla. Volveré dentro del contenido e iré al alineamiento, lo alinearé en el centro, así. Actualizar eso. Por supuesto, vamos a hacer clic en el botón. Y mientras aún está seleccionada, ve a Alineación y alinea su centro. Actualizar eso. Entonces echemos un vistazo a cómo se ve la sección de héroes. Vista previa de los cambios. Por supuesto , abrirá la página en modo escritorio. Control turno I para abrir herramientas web y entrar en modo de diseño. Entonces creo que me gusta ahora mismo la sección de héroes , se ve mucho mejor. Podemos aumentar el relleno en la imagen, en la imagen de la sección héroe. Entonces volviendo aquí, Vamos a seleccionar la columna que sostiene la imagen. Entra dentro acolchado avanzado sin romper ese enlace. Y ahora tenemos ese bonito espaciado desde el borde. Actualizar eso. Y vamos a previsualizar los cambios. Anular. Por lo que ahí lo tenemos. Pero ahora esto debería estar alineado al centro también. Entonces seleccionaré eso. Ve al interior de estilo. Alinearlo al centro así. A continuación, pasemos a las plantillas y veamos cómo se ven. Entonces, en primer lugar, actualizando eso y previsualizando los cambios. Desplazemos hacia abajo. Tenemos que hacer algunos ajustes en el botón. Hagamos algo al respecto. Muy bien, y luego el pie de página. Por lo que volviendo aquí, primero que nada quiero seleccionar esa sección que está sosteniendo estas plantillas avanzadas. Démosle también ese relleno de 20, así. Entonces, desplazémonos hacia abajo y veamos qué tiene instalada la otra categoría. O RI. Entonces vamos a previsualizar los cambios. De acuerdo, así que hagamos algo con estos botones. Por lo que volviendo aquí, bueno, las plantillas elementales, codicia sigue seleccionada. Voy a ir dentro de estilo. Read More estilo de botón. Y quiero romper ese relleno. Y vamos a configurar los ajustes para la vista móvil. Entonces aquí queremos decir tal vez, tal vez digamos izquierda 20 y derecha 20, top cinco y bottom cinco. Y vamos a actualizar eso. Hagamos una vista previa de los cambios. Por lo que desplazándose hacia abajo. Por lo que necesitamos empujarlo a la derecha sólo un poquito. Entonces vayamos dentro de margen. Entonces vamos, vamos a darle tal vez un margen izquierdo de 70. Actualizar eso. Y vamos a previsualizar los cambios. Parece que el valor de 70 píxeles lo está empujando del carrito. Por lo que obviamente necesitamos hacer algo sobre el margen correcto. Intentemos darle algo así como 90. 90. Y hagamos del margen izquierdo un 90 también . Y vamos a actualizarlos. Hagamos una vista previa de los cambios. Desplazarse hacia abajo. casi estamos ahí ahora mirando la posición del botón en relación al texto aquí arriba, el botón está en el medio, pero necesitamos aumentar el relleno en el texto mismo. Entonces, entremos aquí. A ver si podemos aumentar el relleno del lado izquierdo, tal vez 25. Actualicemos eso y previsualicemos los cambios. Y recuerda, esto es simplemente imitando dispositivos. Al final, tendrás que probar el sitio web en un dispositivo real. Por lo que si tienes un teléfono inteligente, puedes abrir el sitio web en tu smartphone y ver cómo se ve. Porque esa es la mejor manera de probarlo. Pero dicho eso, creo que por ahora, estoy satisfecho con eso. Ve por ello, solo vuelve a este lugar y ve con qué valores terminarás. Muy bien, así que ahora los botones de plantilla elemental están correctamente alineados. Entonces para las plantillas de la revista, no necesitamos averiguar cómo intentar volver a posicionar el botón, todo lo que necesitamos hacer es copiar el estilo en el elemento de plantillas porque todo sobre estas dos rejillas es lo mismo a la hora de estilizar. Entonces volvamos aquí. Por lo que pinchando en cualquier lugar dentro de esta cuadrícula que está sosteniendo las plantillas elementales, voy a copiar. Entonces me desplazaré hacia abajo y seleccionaré esta cuadrícula que está sosteniendo las plantillas de revista seleccione en cualquier lugar, haga clic derecho y pegue estilo. Por lo que ahora como puedes ver, los botones han sido empujados hacia el medio. Y quiero seleccionar la columna que los está sosteniendo. Y recuerda esta otra columna aquí tenía un relleno de 20. Es por eso que estos parecen tener el espaciado aquí. Entonces entraré aquí, seleccionaré esta columna yendo por dentro avanzado, le daré un relleno de 20 o derecho. Entonces actualicemos esa anulación. Entonces como puedes ver, aún necesitamos hacer bastante trabajo en estos botones. Entonces les dejo eso, tómese un tiempo y posicione todo correctamente. Pero básicamente así es como posicionar todo correctamente en el contenido principal. Entonces lo siguiente que queremos hacer responsive es, acuerdo, hagamos algo sobre el relleno en esto. Vayamos adentro aquí. Yo me desplazaré hacia arriba. Selecciona esta columna que está sosteniendo. Ahora vamos a seleccionar la sección en sí. Entra avanzado, y vamos a mantener todo un relleno de 20. Por lo que ahora todo el contenido tiene un espaciado de 20 a su alrededor desde el borde. Eso me gusta. Entonces actualicemos eso. Y lo siguiente que vamos a hacer es el pie de página. Entonces en la siguiente lección, hagamos que la comida o respondan a medida que nos dirigimos hacia la finalización de esta clase. Entonces te veré en breve. 35. Hacer que el pie de pie: Bienvenido de nuevo. Por lo que en las dos últimas lecciones, hemos hecho que la barra de navegación sea receptiva y el contenido principal del cuerpo sea el tiempo de respuesta ahora para que la comida sea receptiva sin perder tiempo alguno. Vamos dentro de la carpeta Elementor. Entonces aquí estamos. Vamos a hacer clic en modo responsive. Y empecemos con pantallas móviles. El logo parece estar bien, pero lo que queremos hacer es seleccionar la sección en sí. Y como pueden ver, estoy obstruido por la barra de navegación aquí para poder seleccionar la sección. Entonces todo lo que necesito hacer es golpear Control I para que traiga al navegante. Y ahora puedo seleccionar la sección en sí. Entonces, antes que nada, lo que quiero hacer es ir adentro avanzado y darle ese relleno de 20 todos lados. Así. Y me gusta el logo en el medio así. Sigamos adelante y pongamos los iconos sociales en el medio también. Redujamos el tamaño de este título. Por lo que va dentro de estilo. Por lo que puede ser en una línea como esa. Y por último, sigamos adelante y seleccionemos el, seleccione los Enlaces Rápidos. Y yendo al interior de estilo. Pongámoslos en el medio así y actualicemos. Así se ve la foto. Por lo que volviendo dentro de nuestras páginas, quiero seguir adelante y abrir nuestra página de inicio para que podamos verlo de arriba a abajo y verlo ahora en modo responsive. Así que haga clic con el botón derecho Ver, abrir enlace en nueva pestaña. Y vayamos a esa ficha. De acuerdo, así que voy a presionar Control I para que podamos cambiar al DevTools y luego al modo responsive. Por lo que haciendo clic en eso. Por lo que desplazándose hacia abajo. In, Así es como se ve nuestra página web en los smartphones. Tómate tu tiempo para darle sabor y asegúrate de que se vea súper impresionante. ¿ Qué aspecto tiene en otros dispositivos como el iPad? Entonces así es como se ve en el iPad. Hagamos algo con los bordes aquí. Como puedes ver, necesitamos algo de relleno en los bordes, pero de lo contrario todo lo demás parece estar justo en el blanco. Entonces porque ya estamos editando el pie de página, voy a cambiar al área de pie de página y hacer clic en tablet. Y así se ve en la tableta. Déjenme cerrar estos. Por lo que seleccionando de nuevo la sección en sí. Por lo que una vez más, necesito abrir el navegador, seleccionar una sección en modo tableta. También queremos darle un relleno de 20 todos los redondos. Está bien, así que como puedes ver ahora tenemos ese espaciado por todas partes, que se ve impresionante. Y ahora cambiaré a esta pestaña y cerraré esto. Salgamos del modo responsive y cerremos eso. Entonces editemos con Elementor. Así que cambiemos al modo responsive, y vayamos directamente dentro del modo tablet. Por lo que una vez más, no puedo seleccionar esta sección. Entonces Control I. Y ahora seleccionando la sección de héroes, porque es la sección más alta, iré por dentro avanzado y un relleno de 20 todo round. Vamos a mover eso en C. Así que sí, creo que se ve bien en este momento, pero necesitamos reducir el tamaño de este título aquí. Entonces seleccionando eso, entraré dentro de la topografía y reduciré así ese tamaño. Entonces vamos a escoger esta sección avanzada. Démosle otros 20. Así. Hagamos lo mismo para este apartado, avanzado. Igual para esta sección finalmente. Y actualicemos ahí. Vista previa de los cambios. Muy bien, así que eso es lo que parece en el modo de escritorio. Golpeando Control Shift I para que aparezcan las DevTools, vaya dentro del modo responsive. Y ahora veámoslo en un iPad. Por lo que actualmente está configurado en iPad. Empecemos a desplazarnos. Y se ve increíble en la tableta también. Pero ahora por supuesto, necesitarás hacer algo estos botones aquí y ver si podemos alinearlos correctamente. Por supuesto, asumiría que seguirás adelante y usarás las mismas habilidades has usado para hacer que la página de destino receptiva y que la otra página también sea receptiva. Pero como ya hicimos que la barra de navegación respondiera, no necesitas hacer eso en cada página porque ya está respondiendo en cada página. Entonces lo que queda es el contenido principal del cuerpo en todas estas otras páginas. Hasta el momento tienes un negocio de descargas digitales totalmente funcionando. Ahora puedes subir tus plantillas de productos digitales y contarle a la gente sobre ellas. Las personas pueden acudir a tu sitio web, explorar esos productos, esas plantillas, y descargar las que quieran usar. Al concluir en la siguiente y última lección, quiero hablar de la funcionalidad de búsqueda porque aún no hemos tocado eso. Y es importante tenerlo en cualquier sitio web que tenga productos que la gente podría venir en busca. Entonces hagámoslo en la siguiente lección. Te veré en breve.