Crea una tienda en línea lista para la producción con Elementor y WooCommerce

1. Introduccion: Y bienvenido de nuevo a otra increíble clase de Wordpress y elemental conmigo, Ken. Este es especial porque te voy a mostrar cómo construir tu propio sitio web de comercio electrónico listo para la producción con WordPress, Elementor WooCommerce y otras herramientas gratuitas u otros complementos gratuitos Así que no hay plugins pagados, no se requiere codificación. Y si es la primera vez que me ves, como he mencionado, mi nombre es Ken, y soy diseñador gráfico y diseñador web con más de diez años de experiencia utilizando diferentes herramientas de diseño, entre ellas WordPress. Ahora, también incursiono como instructor de diseño web y desarrollo web en Skillshare y mi canal de YouTube Durante los últimos cinco años, he estado enseñando a miles de estudiantes como tú cómo construir sitios web increíbles usando WordPress y su creador de arrastrar y soltar más popular Elementor Elementor es un increíble creador de sitios web de arrastrar y soltar que te permite construir cualquier tipo de sitio web que puedas imaginar sin ninguna habilidad de codificación Y en esta clase, te voy a mostrar cómo usar Elementor para construir una increíble tienda en línea de la que puedas estar orgulloso de una tienda en línea puedas exhibir a tus amigos Y si quieres una tienda online, puedes lanzar inmediatamente después de la clase. Pero, ¿para quién es esta clase? Esta clase está diseñada para principiantes de Wordpress que quieran construir rápidamente una tienda en línea mientras también aprenden a usar las diversas herramientas gratuitas, complementos disponibles en el ecosistema de Wordpress. Solo eres un aficionado que comienza tu viaje en WordPress o un emprendedor o un aspirante a diseñador web que quiere aprender a usar Wordpress para construir cualquier tipo de sitios web Esta clase va a sentar las bases perfectas que necesitas para convertirte en un experto en Wordpress. Y así como pueden ver, esta es una clase práctica basada en proyectos. Y así al final, vas a terminar con un sitio web Wordpress que podrás lanzar de inmediato y empezar a generar ingresos. Y entonces, ¿esto suena como la clase que has estado buscando? Si es así, ¿en qué estamos perdiendo el tiempo? Sigamos adelante y miremos el sitio web que vas a construir a lo largo de la clase. Hagámoslo en la siguiente lección. Te veré corto. 2. Proyecto de clase: Entonces ahora echemos un vistazo al proyecto de clase, el sitio web que vas a construir a lo largo de la clase. Entonces aquí estamos en esta página de aterrizaje ficticia. Como pueden ver, tenemos este texto multicolor. Vamos a ver cómo hacerlo usando CSS personalizado. Como puedes ver, tenemos esta bonita sección de héroe con el bloque de texto y la imagen de héroe y la bonita imagen de fondo. Desplazándose hacia abajo, tenemos este icono necesita ser animado. Si vuelvo a cargar esta página, déjame recargarla. Así como así. Desplazándose hacia abajo, tenemos esa sección destacada Desplazamiento hacia abajo. Volveremos a los productos para verlos en breve. Pero aquí tenemos una bonita sección de llamado a la acción. Puedes poner cualquier tipo de imagen que quieras aquí, y son características o puntos clave y luego un botón de llamada a la acción. Entonces tenemos este otro botón de llamada a la acción. Solo uso texto ficticio por todas partes. Este no es un sitio web real. Este es el sitio web que construí mientras grababa la clase. Entonces estás viendo con qué terminarás. Aquí hay una bonita foto simple con algo de texto Lorem Ipsum y algunos enlaces a las distintas páginas y un formulario de registro de lista de correo. Y aquí mismo, podemos venir y seleccionar un producto, por ejemplo, esta GPU. Déjeme abrir eso. Ahí vamos. Entonces ahora, esta es la página única del producto, y podemos leer todos los detalles al respecto. Estos son los puntos clave, las características clave de esta GPU y la descripción más detallada del producto aquí mismo. Entonces a continuación aquí, tenemos un producto relacionado. Y otros productos relacionados. Ya veremos cómo hacer todo esto. Volviendo aquí, puedes seguir adelante y pagar con papal inmediatamente, o si quieres seguir comprando, puedes seguir comprando antes de pagar con papel Pero digamos que estamos listos para pagar, digamos agregar a la tarjeta, y ahora nuestro producto ha sido agregado a la tarjeta. Déjame ver la tarjeta. Cuenta con varios productos que había agregado como forma de probar el sitio web. Pero ahora digamos que estás listo para pagar o puedes eliminar ciertos productos que no quieres comprar. Y eso se ha quitado y se puede deshacer. Entonces podemos proceder a la caja. Aquí mismo, el cliente necesita completar sus datos, incluido el envío y todo, y aquí hay un resumen de cuánto se supone que debe pagar, unos 3.8 millones. Tienen la opción de pagar a través de paypal. Pueden pagar a través de tarjetas de débito o crédito. Pueden pagar usando Apple Pay o Google Pay. Y antes de que puedan realizar algún pago, tienen que estar de acuerdo con los términos y condiciones. También hay otro cheque que trato de pagar si intento completar el pago, aquí me van a dar estas alertas para recordarme que necesito rellenar todos estos datos antes de poder permitirme realizar el pago. Esa es una buena manera de verificar que la persona haya proporcionado los detalles que necesitas de ella. Y ahora podemos ir a la página de la tienda. Yo lo había abierto. Aquí vamos. Simplemente puede hacer clic en la página de la Tienda. Y ahora aquí están todos los productos listados. Y si busco tal vez GPU, tenemos esta búsqueda Ajax que busca el producto sin refrescar la página. También podemos presionar Enter para ser llevados a la página de resultados de búsqueda que contiene todas las GPU, y podemos seleccionar la GPU que queramos Entonces, como puedes ver, este es un sitio web completo que está listo para aceptar el pago. El cliente realmente puede realizar el pago a este sitio web porque ya estamos conectados a PayPal. Si realizo el pago a este sitio web ahora mismo, el dinero irá a mi cuenta PayPal. Entonces este es el proyecto en el que vas a trabajar a lo largo de la clase, y para cuando terminemos, tendrás un sitio web listo para entrar en vivo en línea. Entonces espero que esto te excite porque estoy muy emocionado de mostrarte cómo construirlo. Entonces, sin perder más tiempo, sigamos adelante y aprendamos sobre WBPresshsting, porque cada sitio web necesita un alojamiento web Pero, ¿qué es un alojamiento web? 3. Alojamiento web de WordPress: Ahora, para que puedas construir un sitio web de Webpress que puedas lanzar, necesitarás alojamiento web y un nombre de dominio Pero tal vez se esté preguntando qué es el alojamiento web y qué es un nombre de dominio Para ayudarte con eso, preparé un breve explicador. Entonces aquí vamos. Ahora, cada sitio web que visita se almacena en algún lugar en línea en un servidor que siempre está disponible para Internet. Es por eso que puedes acceder a un sitio web que está en los Países Bajos o Estados Unidos o México porque está almacenado en un servidor que siempre está conectado a Internet. Entonces eso significa que cada vez que haces clic en un enlace que te lleva a un sitio web específico, por ejemplo, gratis Peek, digamos, freepek.com Lo que hizo el navegador fue que envió una solicitud para esta página específica, y se puede acceder a esta página específica a través de esta dirección o esta URL. Y así cuando envió la solicitud, esa solicitud fue recibida por el servidor que está almacenando el sitio web pico gratuito, y el sitio web pico gratuito está compuesto por muchas páginas web Pero debido a que esta página web está representada por este nombre de dominio específico, ese servidor devolverá una respuesta con la página que solicitó. Entonces ese servidor es lo que te proporciona un proveedor de alojamiento web. Su proveedor de alojamiento web le proporciona espacio de almacenamiento para su sitio web y se asegura de que su sitio web esté disponible para cualquiera que quiera visitarlo. Ahora, la otra cosa que necesitarás es un nombre de dominio. Freepik.com es un nombre de dominio, y este nombre de dominio específico es exclusivo Así que nadie más puede tener este mismo freepik.com. De la misma manera, nadie más puede tener tu número de teléfono. Tu número de teléfono es único y se utiliza para llegar solo a ti, a nadie más. Por lo tanto, su sitio web necesita tener un nombre de dominio único, y la gente usará ese nombre de dominio para acceder a su sitio web. Entonces ahora, volviendo aquí, estoy en wordpress.org. Este es el sitio web oficial de Wordpress. Aquí es donde puedes descargar Wordpress. Si quieres desarrollar tu sitio web sin conexión, puedes instalar WordPress en tu sistema y trabajar sin Internet y construir tu sitio web. Pero lo que nos interesa es la página de hosting. Wordpress tiene una lista de servidores web recomendados, y te recomiendo que te tomes un momento y leas esta página. Como puedes ver, cuentan con tres hosts web principales recomendados, Blue Host. Dreamhst y Pero esto no significa que estos sean los únicos servidores web que puedes usar para tu sitio web Wordpress. Hay otros servidores web que son igual de buenos, si no mejores que estos tres. Entonces estas son solo recomendaciones de Wordpress. Pero aquí descubrirás leyendo esto que hay cientos de miles de servidores web por que hay cientos de miles de ahí, la gran mayoría de los cuales cumplen con los requisitos mínimos de Wordpress. Wordpress decidió simplemente hacer tu trabajo más fácil y decidió darte los tres primeros que te recomiendan. Ahora personalmente, he usado Bluehost y hace mucho tiempo cuando empecé a usar Wordpress, probé wordpress.com, y no debes confundir wordpress.com confundir WordPress.org es la plataforma que está dirigida por la Fundación Wordpress porque recuerda Wordpress es opensource, y wordpress.org existe para brindarte recordar con la descarga de Wordpress y todo lo que necesitas saber sobre Wordpress y todo lo que necesitas Pero ahora, cuando se trata de hosting, hay un servicio dedicado llamado wordpress.com. Déjame abrirla. Esta es una plataforma que te proporciona herramientas y hosting para construir tu sitio web. Son como semanas. Si has visto semanas, sabes que cuando estás construyendo un sitio web en Weeks, no necesitas pensar en dónde conseguir hosting porque ellos alojan el sitio web por ti. Simplemente te dan las herramientas para comenzar a construir tu sitio web de inmediato. Por supuesto, tiene sus limitaciones de la misma manera que Wix tiene sus limitaciones cuando lo comparas con instalar Wordpress tú mismo en un servidor Cuando instalas WordPress en algún servidor, tienes más control para hacer muchas más cosas sobre las que no tienes control cuando estás usando un servicio alojado como wordpress.com Pero claro, es un lugar agradable que puedes probar si quieres. Ahora, a nivel personal, uso NameCIP especialmente cuando solo estoy experimentando con algunas ideas antes de comprometerme a comprar un alojamiento web dedicado para esa Y ahí lo tienes. Entonces ahora que entiendes lo que es un proveedor de alojamiento web, qué hacen, y por qué los necesitas, adelante y toma alojamiento web y el nombre de dominio porque vas a necesitar eso antes de poder pasar al siguiente paso donde vamos a instalar prensa web a través del panel C. Te veré en breve. 4. Instalar WordPress: Entonces ahora que has comprado tu alojamiento web y el nombre de dominio, es momento de instalar WordPress. Y para instalar WordPress, necesitarás iniciar sesión en tu panel C. Y la forma más rápida de iniciar sesión en tu panel C es ir a través de tu cuenta de host web. Como pueden ver, estoy justo aquí en el chip de nombre cuenta de inicio de sesión. Así que solo voy a seguir adelante e ingresar mis datos y luego iniciar sesión. Por motivos de seguridad, me van a pedir un código de seguridad. Estoy usando una aplicación de autenticación. Sí. Vamos. Ahí vamos. Entonces ahora, voy a ir directamente a la lista de hosting. Y voy a encontrar mi alojamiento web aquí. Como pueden ver, tengo que ir al panel C que me redirigirá al panel C. Y si optas por ir con un servicio de hosting compartido como yo, tu panel C se verá algo parecido a esto. Puede que no sea idéntico, pero la mayoría de las cosas aquí estarán en su panel C. Y lo que estamos buscando es la sección de instalación de aplicaciones Softacul Como pueden ver, debajo de él, tenemos Wpress y otros CMSs Entonces iré a Worpress. Y ahora, si me desplazo hacia abajo aquí encontraré todas las instalaciones de Wordpress que tengo. Como pueden ver, la única instalación que tengo en este momento es nuestra página web de referencia. Como pueden ver, este es el señor MoneyBags.net, y eso es todo. Así podremos instalar una nueva instancia de Wordpress para construir un nuevo sitio web. Entonces voy a decir instalar ahora, y se te reunirá con este formulario que tienes que rellenar y luego instalar WordPress. Así que sigamos adelante y comencemos seleccionando nuestro protocolo aquí. Me gusta ir con HdTPSW punto. A lo mejor voy a ir con VFX pod. Y si hago clic afuera, comprobará si tengo un certificado SSL en ese nombre de dominio. Como puedes ver, todo está bien. Si no tienes un certificado SSL, esto te mostrará un error. Te diré que no se encontró ningún certificado SSL, y los certificados SSL suelen ser gratuitos hoy en día. Así que pídele a tu proveedor de alojamiento web que te proporcione tu certificado SSL gratuito. Entonces la URL del sitio web será www.vfxpod.com Si agregas algún nombre aquí, tu página de inicio, esta página de inicio tendrá una carpeta extra, como carpeta. Y no quieres eso. Solo quieres que tu página de inicio sea tu nombre de dominio base. Así que no agregues nada aquí. A continuación, vamos a darle un nombre a nuestro sitio web. Le voy a dar el nombre de tienda en línea. Compra cualquier cosa de nosotros. Sí, déjame ir con esto. Y estas son las credenciales que usarás para iniciar sesión tu sitio web de Wordpress en caso de que tengas logo y no quieras iniciar sesión a través del panel C. A continuación, tenemos algunos plugins que puedes preinstalar con tu sitio web Wordpress, pero no tienes que instalarlos porque hay mejores alternativas que puedes instalar desde dentro del directorio de plugins de WordPress. Entonces, dejémoslos fuera. Podemos ir a Opciones Avanzadas, y aquí podemos decidir mantener una copia de seguridad de nuestro sitio web. Pero normalmente no me quedo con esto porque nunca lo uso. Utilizo un plugin dentro de WordPress para crear mis copias de seguridad y descargar las copias de seguridad o enviarlas a mi Google Drive automáticamente cada semana. Entonces te voy a enseñar cómo hacer eso. No te preocupes. Todo bien. Aquí puedes decidir si quieres que tu Wordpress actualice automáticamente cuando haya se actualice automáticamente cuando haya una nueva versión de WordPress, o puedes optar por actualizar solo a versiones menores, simplemente dejaré eso en su defecto. Así que asegúrate de guardar estas credenciales en alguna parte. Así que voy a abrir mi libreta de texto. Puedo copiar esto y ponerlo ahí, luego copiar la contraseña, Enter, ahí mismo. Ya conoces tu correo de administración, así puedes ponerlo ahí mismo. Así que una vez que hagamos eso, podemos ir y decir instalar WordPress. No salgas de esta página hasta que esté hecha. Y ahí lo tenemos. Enhorabuena. Acabas de instalar WordPress por primera vez, si es tu primera vez. Y ahora tenemos dos URLs aquí mismo. Esta es tu página de inicio. Entonces, si hago clic derecho y lo abro en una nueva pestaña, como puedes ver, aquí está el nombre de dominio, tuyo por supuesto será el nombre de dominio que compraste. Y ahora esto es lo que tenemos. Este es solo el tema básico de WordPress. Y si vuelvo aquí, también tenemos una URL de Admin. Esto nos llevará al área de administración de nuestro sitio web. Entonces hago clic en eso como puedes ver, dice dashboard, tienda online. El nombre de nuestro sitio web, tienda en línea. Y aquí estamos. Así que acabamos de instalar Wordpress. Enhorabuena. Este es un gran paso para ti si es tu primera vez usando Wordpress. Ahora, en la siguiente lección, veamos cómo instalar un tema de WordPress. Te veré en breve. 5. Instalar un tema: Entonces ahora que hemos instalado WordPress, es el momento de instalar un tema de Wordpress. Sigamos adelante e instalamos mi tema favorito de todos los tiempos, y su nombre es Astra. Entonces iré a temas de apariencia y te darás cuenta porque en 2025, el tema activo es 2025. año pasado, el tema activo, cada vez que instalaste WordPress fue 2024, y el año anterior, por supuesto, 2023. Ahora, voy a decir Agregar nuevo porque no quieres usar estos temas predeterminados de WordPress. Y ahora, como pueden ver, tenemos este tema llamado Astra. Entonces voy a seguir adelante e instalar Astro, y voy a seguir adelante y activarlo. Ahí vamos. Como puedes ver aquí, nos están diciendo que podemos empezar con sus plantillas de inicio, pero solo voy a descartar esto Ahora es el tema activo. Voy a seleccionar el tema 2023 y eliminarlo. Seleccione el tema 2024 y bórrelo también. Y ahora voy a dejar 2025 instalado, pero no el tema activo. Este será el tema de respaldo en caso de que este tema se rompa por algún motivo. Nuestro sitio web seguirá teniendo estructura porque tendrá un tema de respaldo Por lo que siempre es recomendable tener instalado un tema de reserva Entonces ahora Astra es el tema activo, y ahora estamos listos para comenzar a construir nuestro sitio web. Pero como vamos a usar un elementor para construir un sitio web, en la siguiente lección, veamos cómo instalar un elementor. Te veré en breve. 6. Instala el complemento de Elementor: Así que ahora es el momento de que instales tu primer plugin de WordPress. Sigamos adelante e instalemos elemento. Entonces iré a plugins. De hecho, déjame simplemente hacer clic en plugins para ir a los plugins ya instalados porque Wordpress viene con estos dos plugins preinstalados siempre. Así que solo seleccionaré ambos marcando esta casilla de verificación superior Haga clic en eso y luego diga eliminar, aplicar, Entrar. No los necesitamos, así puedo ir y decir Agregar Nuevo. Y ahora estamos llevando al directorio Plug in de Wordpress. Ahora bien, esto solo está tirando del directorio real de plug-ins de Wordpress. Si escribo enlace y abro Enlace en Nueva pestaña. Como puedes ver, estamos llevando a wordpress.org, y estamos llevados a la página Plugins También tenemos la página del tema, bloques de página de patrones y todo eso. Aquí es donde Wordpress enumera más de 59,000 plugins gratuitos que puedes instalar Entonces ahora, volviendo aquí, Wordpress tira de todos esos plugins y los trae aquí para permitirte instalarlos con un solo clic en lugar de ir aquí y descargarlos. Entonces si hago clic en eso, como pueden ver, tengo que descargar desde aquí y volver aquí y subirlo. En lugar de eso, solo puedo instalar directamente. Entonces busquemos a Elementor. sitios web Elementor. Aquí vamos. Más de 10 millones de instalaciones activas por Elementor, así que voy a decir instalar ahora Y como siempre les digo a mis alumnos, como pueden ver, hay muchos otros plugins relacionados con elementor desarrollados por desarrolladores de terceros que no trabajan con o trabajan en Elementor Se trata de empresas de terceros que crean plug-ins que agregan más funciones a la versión gratuita de Elementor Te permiten obtener más funciones, más elementos que puedes usar en tu sitio web de forma gratuita. Entonces déjenme decir activar. Y, por supuesto, veremos cómo usar algunas de ellas. Diré activar. Y ahora elementor está activado. En algún momento atrás, había un asistente que siempre aparecía cada vez que instalas un elementor por primera vez No sé por qué no ha surgido. Por si acaso surge, solo tienes que pasar por ese mago. Entonces ahora que has instalado elementor, como puedes ver, tenemos estas plantillas y un lamenter Estos no estaban aquí antes de instalar un lamenter porque son elementor elementos del menú Te permiten hacer ajustes y modificar lo que quieras dentro un lamenter para que funcione para Pero nunca cambio estos ajustes. Simplemente voy a construir mis sitios web. Ahora que tenemos Elementor instalado, aparece como el único plugin instalado porque recuerda, hemos eliminado los otros dos Vamos a instalar más plugins aquí a medida que construimos nuestro sitio web, y así es como instalar un plugin de WordPress. Entonces, en la siguiente lección, echemos un vistazo a la interfaz de usuario elementor porque quiero ponerte al día sobre cómo navegar por el editor elemental Entonces te veré en breve. 7. Interfaz de usuario de Elementor: Es hora de mirar la interfaz de usuario elementor. Y para ello, naveguemos hasta las páginas. Estas son todas nuestras páginas web. Entonces, como puede ver, cuando instalamos Worps, vino con dos páginas de muestra, un borrador, política de privacidad y una página de muestra Podemos usar esta página para mirar el editor de elementos. Entonces voy a decir editar. Y no te preocupes. Ahora mismo sólo estamos mirando al editor. No te preocupes por cómo crear una página web y todo eso. Te voy a enseñar cómo hacer eso. Déjame cerrar esto. ¿Qué es esto? También cerremos eso y aquello. Ed, aquí estamos. Entonces esto es un poco diferente a lo que teníamos en mi curso anterior, en mi clase anterior. Sigue siendo la misma interfaz de usuario. En la clase anterior, no teníamos aquí a este mago, que parece hacer lista de las cosas que podemos hacer muy rápido, pero no vamos a hacer eso porque vamos a hacer todas estas cosas manualmente. Entonces déjame cerrar eso. Muy bien, así que eso es una lista de verificación Se puede acceder a él desde aquí. Lo tengo. Ahora bien, lo primero notarás es esta estructura. Anteriormente, se llamaba el navegante. Ahora se llama la estructura, y solo te da una visión general de la estructura de la página. Entonces, si tenemos mucho contenido aquí y solo queremos tener una vista de pájaro de la página, esto nos ayudará a ver todo lo que existe en la página. Y también es bueno ayudarnos a llegar a partes específicas de la página muy rápidamente. Ejemplo, si hago clic derecho en esto y lo duplico un par de veces duplicado, como puedes ver, también está duplicando aquí en la estructura en tiempo real, haz clic derecho en Duplicar Y ahora puedo ampliar esto. Bien, vamos a expandir el primero para mostrar lo que hay dentro. Entonces tenemos el contenedor, que es el contenedor rosa. Tenemos el editor de texto, que es un elemento diferente. Ahora, si selecciono el contenedor, esto cambia a Editar contenedor. Si selecciono editor de texto, esto cambia para editar editor de texto. Es decir, cualquiera que sea el elemento que hayas seleccionado activamente aquí en la página, sus ajustes aparecerán aquí y podrás ir y modificar todos esos ajustes Entonces, si selecciono este tercero, creo que, como pueden ver en la estructura, tenemos el tercer contenedor seleccionado. El mismo caso se aplica a lo que esté dentro del editor de texto. Selecciona el editor de texto, y aquí podemos ajustar los ajustes del elemento específico que actualmente se selecciona aquí Así que ahora para casi todos los editores, salvo algunas excepciones, siempre tendrás estas tres pestañas. Ahí está la pestaña de contenido, la pestaña de estilo y la pestaña avanzada. Cada elemento. Entonces, si selecciono un contenedor en lugar de un elemento editor de texto, contenedor, como puedes ver, también tiene tres pestañas. Pero ahora aquí está la pestaña de diseño en lugar de la pestaña de contenido. Aquí en la pestaña de contenido, aquí es donde agregamos cualquier contenido que queramos agregar. Por ejemplo, ¿qué tipo de contenido espera un editor de texto? Es texto. Entonces aquí podemos agregar el texto que queramos. Queremos exactamente. Y como escribimos, sucede aquí en tiempo real, como puedes ver. Ahora bien, si quiero agregar un elemento diferente, no un editor de texto, todo lo que necesito hacer es hacer clic en este botón de elemento de anuncio y puedo agregar diferentes tipos de elementos. Entonces, permítanme ahora eliminar todos estos. Déjame escribir click y eliminar o simplemente pasar el cursor sobre cualquiera de ellos y borrar eso Ahora nos quedamos con este sencillo. Déjame seleccionar el elemento editor de texto, y también déjame eliminar que voy a hacer clic derecho en este y eliminarlo. Ahora solo tenemos el contenedor. Si quieres agregar algo al contenedor, podemos dar click en este más o en este elemento de agregar. Así que déjame hacer clic en esto. Revelará todos los elementos disponibles para nosotros. Ahora bien, si colapso, diseño básico todos estos paneles, notarás que son paneles que contienen diferentes tipos de elementos que podemos arrastrar y soltar aquí para diseñar nuestro sitio web. Pero algunos de ellos están en la versión pro de elementor, así que no podemos usarlos. Si no es utilizable, tiene este pequeño candado en la parte superior derecha. Si es utilizable, si es gratis, no tendrá eso. Entonces ya vimos al editor de texto. Ahora bien, si colapso el básico, podemos mirar el layout. Como pueden ver, tenemos contenedor y rejilla. Prefiero trabajar con contenedores, y verás por qué. Usaremos contenedores a lo largo de la clase. Entonces, si arrastro y suelto un contenedor aquí dentro de esta caja, va justo debajo del primer contenedor. Y si golpeo Control I, puedo sacar a colación la estructura para ver la estructura actual. Si amplío esto, no tiene nada adentro porque no hemos puesto nada dentro. Entonces déjame borrar eso. Podemos trabajar solo con éste porque también está vacío. Ahora, como vamos a trabajar con contenedores, no te preocupes, te explicaré cómo funcionan los contenedores, pero déjame colapsar eso. Ahora, veamos cómo agregar otro elemento. Ya viste el editor de texto. Si lo dejo caer ahí, puedes agregar tu texto aquí. Si quieres cambiar el color o la apariencia del estilo, ahora es cuando vas al estilo. Por ejemplo, no lo queremos a la izquierda. Lo queremos en el medio. Entonces seleccionaré la alineación central, y ahora está alineada con el centro. Estos son requisitos básicos de editor de texto que todo editor de texto debe tener. Si vamos al avance, Oh, también podemos cambiar el color. Entonces ahora mismo es gris. Podemos cambiarlo a rojo. Entonces, si vamos a avanzar, ahí es donde obtendremos ajustes como margin, layout settings. Entonces, si colapso el diseño, tenemos muchos grupos de ajustes. Con el layout, obtenemos márgenes y relleno y alineamos el elemento en sí y orden y tamaño. Todas estas cosas, veremos cómo usarlas. Volviendo aquí para agregar otro elemento, agreguemos un elemento de imagen. ¿Qué tipo de contenido espera un elemento de imagen una imagen? Entonces, debajo de la pestaña de contenido, estaremos esperando una imagen en lugar de texto. Así que selecciona el elemento de imagen y los cambios para editar la imagen. Ahora podemos seleccionar una imagen de nuestra biblioteca. Podemos ir a la mediateca si ya hemos subido imágenes, o si no las tenemos, podemos ir a subir imágenes y seleccionar archivos desde nuestro ordenador. Entonces voy a hacer doble clic en eso como ejemplo. Y ahora ahí vamos. Entonces ya está preseleccionado, voy a decir seleccionar. Y ahora la imagen aparece aquí. Y podemos pasar a darle estilo. Podemos darle un ancho máximo de tal vez 100%. Podemos darle una altura del 100% en lugar de 500 píxeles. Podemos aumentar el ancho manualmente. Ahora que hemos establecido el ancho máximo, sube al 100% y muchas otras cosas que veremos cómo hacer. Tan rápido resumen. Ahora bien, si colapso todos estos otros, como pueden ver, también tenemos esta pestaña general que proporciona elementos generales que podemos agregar como un testimonio. Y a medida que agregamos todos esos elementos, recuerden, porque los estamos agregando dentro de este contenedor, todos están debajo del contenedor en la estructura si colapso eso. Pero ahora si agrego otro contenedor, al agregar permítanme simplemente colapsar eso. Para agregar otro contenedor aquí, podemos ir a PAS y disposición y volver aquí. Entonces podemos elegir Flexbox. Y me encanta usar estructuras Flexbox. Entonces no vamos a usar cuadrículas, vamos a trabajar con Flexbox Y estas son solo estructuras prefabricadas para ayudarte a configurar rápidamente tal vez una sección de doble columna o una sección de columna única, una sección de cuatro secciones y ese tipo de cosas. Entonces actualmente, lo que tenemos aquí es este tipo o es este tipo de estructura. Si selecciono esta doble estructura, como pueden ver, tenemos dos divisiones dentro de aquí. Si selecciono este, como pueden ver, este lado es más largo. Así que son solo estructuras prefabricadas para ayudarnos a construir rápidamente nuestro sitio web Entonces, si quiero agregar un contenedor aquí, solo puedo arrastrarlo y soltarlo ahí, y ahora es un contenedor dentro de otro contenedor. Y puedo añadir un elemento como digamos, enlace en bio minimalista, y ahí vamos. Entonces ese es un elemento entero que podemos editar y cambiar. Entonces básicamente, así es como agregar elementos. Lo siguiente que quiero que veamos es ¿cuáles son estos ajustes? Entonces, si queremos salir al tablero, podemos salir a Wordpress pero aquí hay otras configuraciones que son muy importantes. Recuerdas cuando quería duplicar el contenedor, tuve que dejarme simplemente hacer clic aquí. Tuve que hacer clic derecho y duplicar. Esos son dos pasos para hacer una cosa. Si quiero duplicar este contenedor, tengo que darle click derecho y duplicarlo, y aparecerá abajo aquí. Permítanme simplemente borrar eso. Si quiero eliminar, tengo que hacer clic derecho y eliminar. Pero si vengo aquí, puedo decir preferencias de usuario, mostrar opciones de edición rápida. Eso significa que si ahora vuelo el cursor sobre cualquiera de estos elementos, tendré atajos rápidos a algunas de las cosas más comunes que quieres hacer con un elemento como duplicarlo Entonces si vengo aquí y clic en eso, automáticamente, está duplicado. Si vengo aquí y vuelvo a hacerlo, eso es solo un clic para hacer una duplicación. Los manejadores de edición o las opciones de edición son muy cruciales. Asegúrate de tenerlos activados. Estos otros, también puedes mirar la historia de las cosas que has hecho, y puedes retroceder en el tiempo. Se puede volver a un punto en el tiempo en el que el sitio web se veía de cierta manera. Por ejemplo, digamos que has cometido errores y quieres quitar las cosas para deshacer algunas de las cosas que has hecho. Se puede volver atrás para decir la vez que agregamos la imagen, y así es como se veía el elemento image cuando la agregamos. También podemos remontarnos al mismo principio y esto es lo que teníamos. Y también podemos volver a la edición iniciada, y esto es lo que teníamos cuando empezamos. Así podrás saltar rápidamente a cualquier punto de tu sesión de edición. Pero una vez que cierras Elementor y vuelvas, no encontrarás esto Esto es sólo para esta sesión de edición. A continuación, echemos un vistazo a esto. Estos son los ajustes de página que estableceremos dentro del panel de administración de WordPress, así que no los estableceremos aquí. Si queremos previsualizar nuestra página, solo antes que nada, necesitamos publicarla. Y podemos dar click aquí para previsualizar los cambios. Y así es como se ve la página, y este es nuestro contenido. Entonces si hacemos cambios aquí, digamos, vamos a duplicar este duplicado derecho. Ahora tenemos que hacerlo. Si lo publico, notarás que esto automáticamente se cargará, recargará Y ahora tenemos esas dos frases. También podemos guardar esto como plantilla, lo que sea que tengamos en la página. Podemos guardar como plantilla y darle un nombre. Entonces veremos cómo hacer todas esas cosas con el paso del tiempo. Creo que ahora mismo sabes todo lo que necesitas saber sobre la interfaz de usuario. Cuando lleguemos a editar el sitio web para que sea responsive en diferentes dispositivos como una tableta, podremos hacerlo usando estas herramientas. Entonces, por ahora, esas son las configuraciones que necesitas entender para poder usar la interfaz de usuario elemental y navegar a medida que construyes tu página. Entonces, en la siguiente lección, ahora construyamos nuestra página de inicio, y comenzaremos con la barra nerviosa. Te veré en breve. 8. Instalar el complemento ElementsKit: Entonces ahora tienes una visión general aproximada de la interfaz de usuario elemental. Es hora de comenzar con la construcción real de la página de inicio y comenzaremos con la barra nerviosa. Entonces quiero salir al área de administración de WordPress. También quiero cerrar esto. Y de hecho, voy a separar esto. Voy a dejarla como su propia ventana. Ahora, permítanme cambiar aquí. Y déjame salir. Déjame irme porque esta no es una página que nos vamos a quedar. De hecho, voy a seleccionar todos ellos, pasar a la basura y aplicar. Entonces ahora no tenemos ninguna página web. Para que podamos crear ano, necesitaremos usar otro complemento relacionado con elementales llamado elements kit Light. Entonces sigamos adelante e instalémoslo. Plugins, añadir nuevos. Y si escribo elementor, aquí estamos. Cuenta con más de 1 millón de instalaciones de Xpeed Studio. Elementos kit elementor agregar ons y plantillas. Instalar, activar, y ahora tenemos kit de elementos de luz. Entonces una vez que lo instalemos, también aparecerá aquí. Y lo que tenemos que hacer es ir al encabezado y pie de página. Y ahora tenemos que pasar por este asistente de configuración. Entonces, para empezar, escojamos Avanzado aquí. Y al elegir Avanzado aquí, solo significa que habrá más elementos disponibles para nosotros en el front-end mientras editamos nuestras páginas. Entonces, por ejemplo, si miras estos widgets aquí, creo que esto se activará una vez que hagamos clic en Avanzado. Como puedes ver, ahora va a estar disponible automáticamente para nosotros en el front end. Recuerda al editor, estábamos arrastrando elementos a la página desde la izquierda Estos elementos estarán disponibles para nosotros. Cuando seleccionamos Avanzado, varios de estos elementos que no fueron verificaron varios de estos elementos que no fueron revisados originalmente. Y ahora pasemos al siguiente paso. Aquí puedes proporcionarles tu correo electrónico para que te envíen ofertas y descuentos y todo eso. Pero sólo voy a hacer clic en Siguiente. Siguiente paso, puedes compartir datos de diagnóstico no sensibles. Entonces voy a hacer clic en Siguiente paso. A continuación, Guardar cambios. Y ahí vamos. Entonces ahora podemos ir a encabezado y Potter. Y aquí es donde construiremos nuestro encabezado, AKA, nuestro Navbar Entonces lo haremos en la siguiente lección. Te veré en breve. 9. Comprender los contenedores: Entonces ahora estamos listos para comenzar a construir el encabezado. Y recuerden, fuimos al kit de elementos encabezado y pie de página. Yo sólo voy a seguir adelante y decir Agregar nuevo, y voy a decir encabezado. Sí, el tipo es encabezado. Cuando estemos construyendo la foto, también vendremos aquí y diremos Foto, pero ahora mismo es el encabezado, y queremos que esté disponible que se muestre en todo el sitio. Si quieres tener condiciones en qué página mostrarlo, tendrás que usar la versión pro, pero esto es suficiente para mí. Entonces queremos que esté activo. Ahora, podemos simplemente guardar los cambios y luego volver y decir editar contenido, o simplemente podemos decir editar contenido e ir directamente al front-end para editarlo. Pero yo sólo quiero decir esto primero. Para demostrarle que se enumera aquí. Y ahora si digo editar, obtendremos el mismo pop up y puedo decir editar contenido será redirigido al front-end donde ahora podemos construir nuestro encabezado Y aquí estamos. Entonces ahora, pensé que antes de empezar a construir realmente el encabezado, debería explicar cómo funcionan los contenedores. Después veremos cómo construir el encabezado en la siguiente lección. Así que muy rápido, quiero empezar de cero sin ningún contenedor aquí. Entonces tenemos una pizarra en blanco. Ahora si selecciono eso, vamos a tener Flexbox, y quiero comenzar con esta columna de dirección Y por dirección, queremos decir, como se puede ver bajo maquetación, tenemos dirección aquí. El contenedor puede tener un diseño horizontal o vertical o un diseño fila inversa o un diseño de columna inversa. Lo que eso significa es cualquier contenido que esté dentro de aquí, cualquier contenido que tengamos dentro del contenedor se organizará en la dirección que hemos seleccionado aquí. Entonces si, por ejemplo, ahora que tenemos el contenedor aquí, si voy a agregar y agregar un encabezado, como pueden ver, el encabezado está dentro del contenedor. Si vuelvo a entrar aquí una vez más y agrego, digamos , un botón, vuelve aquí y agrego, digamos, por ejemplo, ahora mismo, vamos con esos dos. Si selecciono el contenedor, que es donde se supone que debemos establecer la dirección del contenido dentro, actualmente, cada elemento está dispuesto verticalmente. Entonces, si agregamos otro elemento como una imagen, se colocará justo debajo del elemento más bajo del grupo. Si vuelvo aquí, esa es una dirección de vertical. Pero si quiero que las cosas corran de izquierda a derecha, seleccionaré esto. Y ahora, como pueden ver, tenemos el encabezado, el botón y la imagen. Y esto es muy poderoso porque eso es lo nos va a permitir lograr este objetivo, como pueden ver, imagínese aquí tenemos dos columnas una, dos. Esas son dos columnas, una columna para una imagen y una columna para el bloque de texto. Entonces este contenedor aquí que sostiene el bloque de texto es en realidad vertical. Pero el contenedor que sostiene el bloque de texto y la imagen es horizontal. Espero que entiendas ese punto. Entonces ahora volviendo a nuestro ejemplo aquí. Lo que tenemos dentro de este contenedor son solo elementos. Estos no son contenedores. Estos son elementos. Este es un texto un elemento de encabezado. Este es un elemento botón, y este es un elemento de imagen. Si queremos tener un sistema de contenedores complejo como este, necesitamos usar contenedores dentro de los contenedores. Así que vamos a quitar todo aquí. Simplemente seleccionaré eso y eliminaré ese eliminar. Ahora nos quedamos con un contenedor una vez más. Si voy aquí a plus, puedo agregar un contenedor ahí dentro. Ahora, como pueden ver, es un contenedor dentro de un contenedor. Con este contenedor, también podemos establecer la dirección. Pero antes de llegar a la dirección, podemos decir, vamos a poner otro contenedor dentro porque asumiendo este contenedor aquí, es el contenedor que está sujetando todo aquí. Se debe dividir en dos, así podemos agregar dos contenedores más, uno. Ahora bien, si duplicamos esto, permítanme volver aquí, las preferencias del usuario y decir mostrar opciones de edición rápida. Ahora bien, si duplico esto en un contenedor, déjame colapsar esto. Tenemos dos contenedores dentro este contenedor que está dentro de este contenedor. Pero estos dos contenedores están apilados uno encima del otro como se puede ver uno, dos, pero queremos que estén uno al lado del otro, uno, dos. Entonces seleccionamos un contenedor que esté sosteniendo esos dos, que es esto, o podemos ir aquí y seleccionar esto y cambiar la dirección aquí para decir uno, dos, entonces es horizontal. Recuerda, este contenedor está dentro de este contenedor. Ahora podemos hacer esto al 100% de ancho. Bien, no nos adelantemos. Entonces como pueden ver, dentro de estos contenedores, ahora podemos agregar un encabezado. Por ejemplo, ese encabezado, puede volver aquí y agregar un editor y volver aquí y agregar un botón cuando aparezca esa línea rosa. Entonces aquí dentro, podemos agregar un elemento de imagen. Y ahora, si publico y previsualizo, tenemos un diseño de contenedor lado a lado. Entonces esa fue solo una rápida introducción a los contenedores para que puedas ver el poder de usarlos al diseñar tus páginas. Te da mucha flexibilidad para llegar a diseños muy complejos. Entonces creo que aquí vamos a terminar esta lección. No queremos que sea demasiado largo. En la siguiente lección, empecemos ahora a poner estos contenedores en uso real. Entonces te veré en breve. 10. Agrega un logotipo: Entonces, ahora que entiendes los contenedores, es el momento de construir nuestro encabezado. Y lo primero que queremos hacer es agregar el logotipo de nuestro sitio web. Así que déjame cerrar esto, volver aquí. Recuerda, estábamos editando nuestro encabezado, y por eso dice encabezado aquí arriba. Entonces solo quiero seguir adelante y borrar todo para que podamos empezar de cero. Ahora, quiero navegar a nuestro sitio web de muestra aquí, para que podamos ver la estructura que estamos tratando de lograr. Tenemos un logo aquí, tenemos la barra de búsqueda, tenemos los elementos del menú, y tenemos un botón de tarjeta. Pero vamos a empezar con un contenedor de dirección. Así que volviendo aquí, seleccionemos Flexbox y seleccionemos esto Entonces con eso, esto no es un contenedor. Esto es sólo para mostrarnos dónde se contendrá el contenido dentro de este contenedor. Aquí no habrá ningún contenido. Pero necesitamos agregar un contenedor. Entonces voy a entrar aquí y decir contenedor y agregarlo ahí mismo. Ahora, como puedes ver en nuestro sitio web de referencia, tenemos esta brecha aquí a la derecha y a la izquierda, lo que significa que hay un contenedor contiene solo el contenido de la barra nu, y no tiene un ancho del 100%. Y esto es a lo que me refiero. Por lo que actualmente tenemos este contenedor exterior que está sujetando todo. Quiero que lo hagamos al 100% de ancho. No entran 1,000. Entonces ahora es 100% de ancho, el contenedor exterior rosa. Y como aún no hemos establecido el ancho del contenedor interior, también está ocupando todo el espacio disponible en el contenedor que lo sostiene. Entonces lo que podemos hacer es seleccionar el contenedor interior y decir que queremos que ocupe sólo el 80% del contenedor exterior. Pero ahora fíjense que está alineado a la izquierda. Para que podamos venir aquí. Podemos seleccionar el contenedor exterior. Actualmente lo que se selecciona es el contenedor interior. Entonces seleccionaré el contenedor exterior, y esto es otra cosa genial de la estructura. Te permite seleccionar algo si no puedes seleccionarlo en la página. Ahora he seleccionado el contenedor exterior, y ahora con ese seleccionado, puedo venir aquí para alinear los elementos al centro. Cuando hago clic en eso, mira esto, mira el contenedor interior. Si selecciono centro, hemos alineado todo lo que está contenido dentro de este contenedor exterior con el centro. Publiquemos eso. Y ahora volvamos a cambiar a nuestra imagen de referencia. Recuerda, dijimos que tenemos una columna para el logo. Tenemos uno para la barra de búsqueda, y podemos hacerlos separados por ahora. Así que vamos a crear tres contenedores dentro de este contenedor. Entonces voy a decir añadir. Entonces voy a arrastrar un contenedor ahí dentro. Y para facilitarnos las cosas, no voy a tener que volver atrás y copiar otro contenedor. Puedo simplemente duplicar esto dos veces, uno, dos, y ahora están apilados uno encima del otro. Entonces seleccionaremos el que los esté sosteniendo a todos. Si te resulta difícil seleccionarlo, solo usa la estructura. Y ahora queremos arreglar todos estos de manera horizontal. Entonces voy a ir aquí dirección, y ahora tenemos tres contenedores. Déjame publicar eso. Entonces ahora, no hace falta decir que aquí dentro, vamos a poner un elemento de imagen, así voy a arrastrar un elemento de imagen, y voy a ir a elegir la imagen que quiero usar. Habíamos subido solo una imagen, así que iré a subir archivos, seleccionar archivos. Y como siempre con todas mis clases, proporcionaré esta carpeta Assets que contiene todas las imágenes que puedes usar como muestra de productos para seguir en esta clase. Los preparé para que fueran muy ligeros en KBs, ni siquiera tienen MB de tamaño Y eso es otra cosa que debes tener en cuenta. Mantenga sus imágenes lo más ligeras posible para permitir que su sitio web se cargue primero. Entonces como pueden ver, tenemos un logo aquí que preparé para ustedes como muestra. Haré doble clic en ese logotipo. Y recuerda, te he dicho que encontrarás esa carpeta de Activos debajo de este video. Solo busca el enlace debajo del reproductor de video. Ahora ya está cargado. Diré que seleccione. Y ahí vamos. Se agrega nuestro logo. Ahora bien, fíjate que tenemos el logo es pequeño aquí, así que podemos arrastrar. Podemos pasar el cursor por aquí y cuando aparezca esa flecha de doble cara, podemos arrastrarla o podemos introducir manualmente el tamaño que queramos Entonces quiero ingresar eso manualmente. Seleccionaré el contenedor que contiene el logo, y lo haré 20% del ancho de este. Este contenedor que está conteniendo los tres, 20% estará ocupado por el logotipo. Tal vez el 30% pueda estar ocupado por los elementos del menú, la barra nerviosa y el botón, y luego la barra de búsqueda. A lo mejor podamos hacer este 40%. Ahora, dejémoslo a los 30. Entonces esto puede ocupar 50. Voy a seleccionar eso y decir 50, para que sea 50, 30, 20 para hacer el 100% de este contenedor. Y recuerden, este contenedor está ocupando 80% del contenedor más exterior Entonces así es como agregar tu logo. En la siguiente lección, veamos cómo agregar tu menú de nervios. Este menú de navegación. Entonces te veré en breve. 11. Añadir un menú de navegación: Entonces ahora es el momento de agregar el menú de nervios. Entonces, ¿cómo hacemos eso? Volvamos a nuestra área de trabajo. Ahí vamos. Permítanme publicar esto antes de seguir adelante, y vamos a previsualizar los cambios. Entonces eso es lo que tenemos ahora mismo. Así que recuerda que instalamos kit de elementos. Entonces si vengo aquí y tipo nervio, te darás cuenta que tenemos elementos kit menú de nervios, y también tenemos menú de nervios. Esto está disponible con elemento de Pro. Pero una cosa acerca de los complementos relacionados con elementos elementales como kit de elementos es que nos dan estos elementos extra gratuitos que de otro modo hubiéramos tenido que pagar para acceder. Entonces voy a arrastrar el menú de nervios del kit de elementos, y lo dejaré caer ahí. Y ahora cuando lo dejamos caer, sigue siendo el elemento activo. Por eso dice Edit elements kit nerviosos menú porque ese es el elemento. Y ahora la primera opción aquí es seleccionar menú. Entonces necesitamos seleccionar un menú para mostrar porque en esencia, este es un menú. Y para mostrar un menú, primero necesitamos crearlo dentro de Wordpress, área de administración. Entonces, antes de que vayamos lejos, déjenme decir publicar. Vendré aquí y quiero salir a Wordpress, pero en vez de dejar este editor, quiero escribir link y abrir Link en Nueva pestaña, y luego tomaré esta nueva pestaña e iré al área de administración. Esto sigue intacto. Entonces volviendo al área de administración, digamos menús de apariencia. Entonces aquí estamos. Podemos crear nuestro menú a continuación. Así que permítanme cerrar esta notificación. Como puede ver, podemos agregar elementos de menú, y los elementos del menú pueden ser páginas. Pueden ser publicaciones como una entrada de blog, como artículos. Pueden ser enlaces personalizados. Solo podemos usar enlace directo, categorías de productos o categorías de otro tipo de contenido. Pero queremos páginas como nuestros elementos de menú, lo que significa que necesitamos crear algunas páginas. Entonces yendo a páginas, en lugar de cerrar este lugar, solo voy a ir a páginas, enlace derecho en Anuncio nuevo y Abrir enlace en Nueva Pestaña. Aquí vamos. Entonces ahora podemos darle un nombre a esta página. Digamos contacto. Como pueden ver, esa es la página que tenemos aquí. No estamos tratando de crear muchas páginas aquí. Esto es para mostrarte cómo construir una tienda online. Una vez que aprendas a construir la página de inicio o esta única página de contacto, puedes construir una página A us, una página de política de privacidad, página de términos de servicio, puedes crear todos esos tipos de páginas. Entonces ahora mismo vamos a crear esta página de contacto. No estamos tratando de cambiar ninguna configuración aquí por ahora. Sólo queremos publicarlo. Entonces seguiré adelante y publicaré eso. Y ahora, volviendo aquí, recuerden, nunca salimos de este lugar. Si refresco o recargo esta página, tenemos la página de contacto aquí, pero es de calificación. No podemos usarlo. Eso es porque necesitamos crear un menú. Vamos a darle un nombre. Déjeme darle el nombre de mi menú. Y luego vamos a convertirlo en el menú principal y crear menú. Mira esta zona. Ahora está activo porque tenemos un menú al que podemos agregar elementos. Contacto, agregar al menú. Se agrega al menú. Guardar menú. Ahí vamos. Entonces ahora, déjame cerrar esto porque ya terminamos con ello. Si vuelvo aquí, recuerda que teníamos esto abierto y lo habíamos publicado. Si vuelvo a cargar la página, si selecciono de nuevo el elemento nervioso, el menú del kit de elementos nerviosos y vengo aquí, recuerden, hemos creado un menú llamado Mi Menú Mi Menú. Entonces ahora lo hemos seleccionado, como puedes ver, está mostrando los elementos del menú que tiene, y eso es solo una página. Así que la posición horizontal del menú, digamos, escribe para cambiar de lado. Déjame cerrar eso. Ahora se posiciona en el lado derecho. Publicar. Vamos a previsualizar los cambios. Ahí vamos. Así que aquí está nuestra página de contacto. Volviendo aquí, podemos crear más páginas. Déjame volver aquí. Sólo vamos a crear unas cuantas páginas más. Pase el cursor sobre esto y luego haga clic con el botón derecho en Agregar nuevo. O en lugar de pasar el mouse y hacer clic con el botón derecho, simplemente puede pasar el cursor y presionar el botón central del mouse Se abrirá en una nueva pestaña. Así que vamos a crear dos páginas. Déjame llamar a esto hogar. Publicar, publicar, publicar. Y llamemos a esto sobre publicar, publicar. Cierra eso, y eso. Y ahora volvamos a cargar esta página. Y agreguemos el home y a punto de menú. Déjame llevarlos a casa y ponerlo ahí mismo y sobre solo para asegurarme de que los arreglamos correctamente, guarda el menú. Y ahora volviendo al frente, todo lo que necesito hacer es hacer clic en Vista previa de cambios una vez más. Recargará esta página con los nuevos cambios. También podemos simplemente hacer clic derecho y volver a cargar esta página para que podamos ver los nuevos elementos del menú en nuestro editor también. Entonces ahí vamos. Lo siguiente que quiero hacer al finalizar aquí es cambiar los colores. Vamos con estos colores de tienda. Ahora, te darás cuenta aquí arriba, tengo esta herramienta, esta extensión cromada llamada RGB Color Picker Yo puedo seleccionar eso. Se puede instalar. Es gratis. Entonces puedo decir escoge color. Y si pongo el cursor sobre esto, puedo escoger un color de píxel. Aquí vamos. Yo selecciono esa alfombra, selecciono este menú de nervios. Y luego porque es el elemento activo, voy a ir a estilo, colapso del envoltorio de menú, elemento de menú porque estos son elementos de menú. Como puedes ver en el estilo del elemento del menú, el color del texto del elemento, actualmente es negro, y al pasar el cursor, es gris, y por eso se vuelve gris cuando pasamos el cursor Coloca el cursor, queremos que sea de ese color. Entonces ahora, cuando cierro el cursor, es el mismo color de marca que el logotipo de nuestra marca Y cuando la página está activa, se supone que también debe ser ese color. Si publico, previsualice los cambios, ahora, si paso el cursor sobre cualquiera de estos elementos del menú, están cambiando de color Y si la página activa es la página Acerca de, si selecciono sobre como puedes ver, esta es la página A, y está activa, entonces es naranja. Entonces así es como crear el menú de nervios. En la siguiente lección, veamos cómo agregar un favicon, porque actualmente, como puedes ver, solo tenemos este marcador de posición de icono genérico Si nos fijamos en Name chips favicon, ellos tienen el logo Entonces, ¿cómo agregamos eso? A ver cómo se hace eso. En la siguiente lección. Nos vemos en breve. 12. Añade un favicon: Ahora es el momento de agregar un fabricon a nuestro sitio web. Hay dos formas de llegar al lugar donde se puede configurar el fabcon Una forma es ir a la apariencia, personalizar y nos llevarán al editor front-end del tema, que es Astra. Aquí es donde estableces la configuración de Astra. Otra forma de llegar aquí es si ya estoy en el front end, solo puedo ir a personalizar. Entonces nos llevarán al mismo lugar. Entonces ahora cerrando eso, volveré a aquí porque ya teníamos esto e iremos a la identidad del sitio, seleccionaré el icono del sitio. Entonces hay diferentes formas de llegar al mismo lugar. Entonces iré a la carpeta Activos, y ya había creado un favicon para ti Y estoy pensando que debería haber hecho lo contrario de este color porque este azul es oscuro. Debería haber sido blanco y la línea azul. Pero no hay problema. Vamos con él. Ahí vamos. Así que selecciona Y ahora, como puedes ver, lo hemos configurado como el icono del sitio. Ahora, déjame ver si puedo seleccionar uno diferente porque no me gusta esto. Déjame ver si puedo encontrar Déjame usar este zapato como nuestro fabricon por ahora Pero lo más importante es que entiendas cómo agregar el favicon Entonces seleccionaré ese zapato como el favicon porque es más brillante y digo seleccionar. Ahora, mira esto. Ahora, como pueden ver, es lo suficientemente brillante como para ser visto publicar. Ahora, cuando estás en el editor elemental, aunque refresques la página, el fabricon no será visible porque estás en el modo de edición Pero si previsualiza, no estás en modo de edición, el fabricon aparecerá porque esta es una página de vista previa real Entonces así es como configurar un fabricon para tu sitio web de WordPress La siguiente lección, veamos cómo decirle a WordPress qué página es nuestra página de inicio porque cuando la gente hace clic en este logotipo, este logotipo, se supone que nos lleva a esta página de inicio, la página base, de hecho, me olvidé de hacer eso. Si mientras está seleccionado, iré a Vincular y diré URL personalizada y pegaré nuestra URL base. Este será YOURBSRL su sitio web.com y decir publicar esto Voy a ir ahí. Y ahora, si pongo el cursor sobre él, puedes ver que se puede hacer clic Si le hago clic, debería llevarnos a casa. Esta es la página que actualmente está establecida como la página principal, pero esta no es nuestra página de inicio. Esta es una cuadrícula de publicaciones de blog o artículos que se habrían enumerado aquí. Entonces, ¿cómo configuramos la página de inicio? Veamos eso en la siguiente lección. 13. Configurar página de inicio: Entonces ahora es el momento de establecer nuestra página de inicio como la página principal porque ahora mismo, si voy a Inicio, recuerda, esta es una página que creamos. Si miras la URL, será nuestro dominio.com slash HOME porque esa es una página que creamos Recuerda, páginas. Tenemos una página de inicio, pero queremos que la configuración sea si el usuario va a esta página, no debería tener este slash nada. Entonces, ¿cómo configuramos eso? Volviendo aquí, iré a la lectura de Ajustes. Y ahora, tu página de inicio muestra una página estática, y la página estática es home. Guardar cambios. Y ahora, volviendo a la portada, y ahora si selecciono home, como pueden ver ahora, si alguien encuentra vifxpd.com en cualquier lugar como enlace y hace clic en él, serán llevados a esta página específicamente, que es vifxpt.com ordmain.com , que es vifxpt.com ordmain.com Ahora, por supuesto, a partir de la siguiente lección, en realidad vamos a empezar a construirla. Y recuerda, teníamos una sección de héroes, comenzaremos con la sección de héroes. Entonces así es como hacer una página específica, la página principal porque podemos establecer cualquiera de estas páginas como la página principal. Y otra cosa que necesito que hagamos ahora mismo mientras trabajamos en el sitio web es desalentar a los motores de búsqueda de indexar este Eso simplemente significa que los motores de búsqueda como Google y Bing no enviarán sus arañas para rastrear e indexar este sitio web porque está en construcción porque los motores de búsqueda suelen enviar pequeños trozos de código por todo Internet para buscar nuevos sitios web con el fin de indexar y organizar el sitio web dentro de su base de datos y poder servirlo en los resultados de búsqueda. Pero no estamos preparados para que Google y Ben sepan que nuestro sitio web existe porque eso va a afectar a nuestro SEO ahora mismo. Por lo que queremos desalentar a los motores de búsqueda de indexar nuestro sitio. Eso le dice a las arañas de Google y a los robots automatizados de Google, Oye, ni siquiera mires este sitio web por ahora Ni siquiera echemos un vistazo a este sitio web por ahora. No guardes ninguna de sus páginas para mostrarlas a gente cuando buscan algo similar a lo que estamos haciendo. Solo deja este sitio web por ahora. Una vez que hayamos terminado de construir el sitio web, vendremos a verificar esto. Así que guarda los cambios. Impresionante. Entonces ahora que hemos configurado nuestra página de inicio, es momento de comenzar a construirla. Y claro, comenzaremos con la sección de héroes. Esta es nuestra página de inicio. Si cambio a nuestro sitio web de muestra o referencia, esta es la sección de héroes. Entonces veamos cómo crear algo como esto. Te veré en breve. 14. Bloque de texto principal: Entonces ahora es el momento de crear la sección de héroe y comenzaremos con el bloque de texto. Así que volviendo a nuestro sitio web, ahora mismo, solo podemos hacer clic en Editar con Elementor Lo que podemos hacer es ir a Editar página porque actualmente no es una página elementor Es solo una página de Wordpress Astra. Podemos dar click en Editar con Elementor, y ahora eso la convertirá en una página elementor Pero antes de hacer eso, podemos venir aquí. Tenemos que venir aquí y cambiar la plantilla a elemento ancho completo. Queremos que sea una página de ancho completo porque nota esto ahora, estos son los ajustes de Worpes También tenemos que ir dentro de los ajustes de Astra. Recuerda, nuestro tema es Astra. Entonces aquí, diseño de contenedores, iré con ancho completo. No cambies ninguno de estos porque solo se aplican cuando el diseño se establece en estrecho o normal, estrecho o normal, pero hemos seleccionado ancho completo. Así que ignora eso. Ampliar esto. No queremos una barra lateral, así que no hay barra lateral. Ignora esto porque solo se aplica cuando el diseño está establecido en normal, no hemos seleccionado ninguna barra lateral. Desactivar elementos. Esto nos permitirá desactivar algunos de los elementos que vimos cuando esta página seguía siendo una página de WordPress Astra, no una página elemental. Déjame mostrarte un ejemplo antes de convertirlo en una página elemental. Voy a dejar eso ahí y volver aquí páginas. Si selecciono Ver, podemos enlazar y abrir Enlace en Nueva Pestaña. Ahora tenemos este A y este pie de página de Astra. Volviendo aquí, podemos deshabilitar que el encabezado, que es este y el pie de página, que es este. También eliminemos el área del banner. Entonces guarda. Ahora, esos son los ajustes para la página de inicio. Si edito esta página, solo quiero mostrarles lo que acabamos hacer volviendo aquí y deshabilitar elementos. Si deshabilitamos el encabezado y lo guardamos y vemos la página, no va a esperar. ¿Qué está pasando aquí? Desactivar encabezado, desactivar área de banner. Hagámoslo también. A ver. Oh, necesitamos antes que nada, convertirlo en elemento de ancho completo, pero antes de cambiarlo, vamos a previsualizarlo. Muy bien, sí. Entonces está surtiendo efecto. Hemos desactivado el área de banner, el encabezado. Y ahora, como pueden ver, todavía tenemos el pie de página. Si venimos aquí y decimos deshabilitar pie de página y guardar eso y previsualizar los cambios una vez más. Ahora, todo se ha ido, listo para convertirse en una página elemental, pero aún no es una página elemental porque no la hemos editado con elemental, pero esa es la página At. Cierre todas las instancias de la página acerca de. Ahora, volviendo aquí, espero que entiendas lo que estábamos haciendo con esto. Ahora que está guardada, podemos convertirla en una página elemental. Y aquí estamos. Entonces ahora, recuerda que creamos el encabezado o la barra nerviosa en un editor separado en una parte diferente usando elementos kit luz. Entonces ahora no es editable. No podemos editarlo aquí. Pero lo que podemos hacer es agregar un flexbox para que podamos comenzar a crear la sección de héroes Eso es todo lo que necesitamos de todos modos. Así que permítanme agregar este contenedor de dirección. Y como de costumbre, quiero agregar otro contenedor dentro del mismo. Y recuerda lo que hicimos con el encabezado. Quiero que esto tenga el 100% de ancho. Entonces con porcentaje, 100 y ahora está ocupando el 100%, y el contenedor interior debería ocupar el 80% de ese contenedor exterior. Está a la izquierda, así que volvamos al contenedor exterior y alineemos todo dentro de él en el centro. Eso significará que nuestro contenido también ocupará el mismo espacio que el encabezado en ancho. Publiquemos eso. Y como siempre, ahora agreguemos también otro contenedor en su interior. Y duplicarlo. Ahora tenemos dos. Ahora escojamos el exterior y cambiemos la dirección, y ahora tenemos una sección de héroe de doble columna. Aquí, podemos agregar nuestra imagen, imagen héroe, y podemos continuar para seleccionar. Oh, espera, sí, podemos pasar a seleccionar la imagen del héroe. Esto se suponía que iba a ser una lección separada. Entonces déjame deshacer eso. Déjame venir aquí y agregar el bloque de texto. Entonces un encabezado volvamos aquí, agreguemos un editor de texto, colóquelo justo debajo de ahí, y bajemos aquí y agreguemos un botón. Publica eso. Vamos a previsualizar los cambios, y eso es lo que tenemos. Entonces lo primero que tenemos que hacer es seleccionar el texto. Y claro, vas a escribir tu propio texto aquí, pero voy a copiar lo que tengo aquí. Así que libres tres modelos D. Copia eso. Mientras se selecciona esta, pegaré aquí. No pegues texto directamente aquí. Si bien es posible, va a venir con cualquier preformato que tuviera desde donde lo copiaste Entonces tal vez no quieras el preformato que tenía del lugar donde lo copiaste Entonces hazlo. Suprímase eso. Entonces quieres pegarlo aquí, y eso te permitirá aplicar un nuevo estilo como mejor te parezca. Entonces voy a dejar eso ahí. Yo seleccionaré esto. Yo solo fui a JAGPT y le pedí a ChAGPT que presentara algún texto Este era un sitio web diferente. Por eso lo ves teniendo archivos digitales. Estaba creando un sitio web de descargas digitales. Pero estamos trabajando en un sitio web de productos físicos. Seleccionaré este texto, doble clic en eso y pegaré eso ahí dentro. Ahora no se muestra porque si lo selecciono, ahora verán que el cambio surta efecto. No sé cuál es el problema ahí, pero si lo publico, refrescar eso, puedo seleccionar esto, ir al estilo, al estilo de edición , a la tipografía, podemos cambiar esto a Montserrat, que es lo que Y podemos cambiar el peso a 900 negro, que es muy grueso. Entonces también podemos aumentar el tamaño a nuestro gusto, tal vez hasta ese punto. Y quiero que esto sea para leer algo así como Por productos increíbles a precios asequibles. O simplemente productos increíbles a precios asequibles y volver al estilo. Tipografía, podemos reducir la altura de la línea. A lo mejor hasta ese punto, podemos hacer click afuera, seleccionar el color del texto, hacerlo negro así. También puedes seleccionar esto y cambiar el estilo como tipografía Hagámoslo también Montserrat. Montserrat. Si selecciono este botón, puedo cambiar el texto, todos los productos todos los productos. Y podemos cambiar el color de fondo, pero quiero usar los colores de la marca. Entonces iré a mi picker de color aquí y escojo color, seleccionaré los pixeles azules, copiado, selecciono esto, vaya a estilo, botón, tipo de fondo Color. Y voy a pegar eso ahí, y ahora toma el color de nuestra marca. Muy bonito. Ahora, me gustan mis botones con más relleno a la izquierda y a la derecha, así que voy a romper este acolchado, darle un relleno izquierdo de 50, acolchado derecho de 50. Digamos 15 aquí. Y aquí 15. Y también me gusta darle un radio de borde que sea redondo, así que 50. O simplemente podemos dejarlo a tal vez a las diez. Diez está bien, y voy a previsualizar eso. Ahí vamos. También podemos hacer este color. Seleccionaré este azul, copia, Control C, mientras este esté seleccionado, seleccione esto, vaya al estilo, pegue el color del texto. Sí, vamos a hacerlo así de azul. Ahora, tal vez te estés preguntando, ¿ cómo hice esto rojo? Yo usé lo que llamamos CSS. Yo quería mostrarte cómo hacer eso más tarde. Tendremos una sección sobre CSS, CSS personalizado, pero podemos agregarlo aquí mismo solo para que tengamos algo que se vea bien. Productos increíbles a o asequibles. Asequible. Ahora bien, si quieres que la palabra sea asequible, un color diferente, podemos usar un elemento HTML llamado span. Entonces voy a tener estos dos corchetes, luego escriba span dentro de minúsculas Span. Y luego al final, tendré otro lapso. Pero esta vez antes de la palabra span, necesita tener una barra, luego span Eso le dice a elementor y Wordpress, Oye, quiero hacer algo con este texto específico Es como un selector. Es como si estuvieras seleccionando es como seleccionar esta palabra específica y decirle a Wordpress, quiero hacer algo con este bit de texto que he seleccionado. Entonces, si vamos al primer corchete de span y decimos estilo es igual, podemos usar comillas dobles. Entonces el aspecto del texto que queremos cambiar es el color. Podemos cambiar otras cosas aparte del color, pero por ahora queremos cambiar el color. Entonces le voy a dar una columna. En un espacio, después seleccionaré este color. Iré a mi color pick color y me dejaré ir al copiado. Y si vengo aquí después de la columna, la pego ahí, ahora tomará este color. Entonces le estamos diciendo a Wordpress y elemento, Oye, quiero hacer algo con este texto que está rodeado por el elemento span, tan simple como eso. ¿Y qué es lo que queremos hacer? Queremos establecer un color específico. Entonces lo configuramos dándole un estilo que es igual al color que queremos publicar ahí. Entonces eso es todo sobre el bloque de texto por ahora. Podríamos volver más tarde para refinarlo. Volveremos a diferentes partes para refinarlo, pero eso es lo que tenemos. Vamos a previsualizar los cambios, y me encanta. Ahí vamos. Entonces en la siguiente lección, veamos cómo trabajar en estos botones porque como pueden ver, tengo dos botones. Te veré en breve. 15. Botones destacados: Entonces ahora es el momento de agregar dos botones a nuestra sección de héroes. Entonces, ¿cómo logré eso? Como ya puedes adivinar, este es un contenedor que los sostiene a los dos, y es un contenedor de dirección horizontal. Así que volviendo al interior de nuestro trabajo, ahora mismo, tenemos un solo elemento de botón. Entonces si voy aquí, contenedor, dejo caer el contenedor ahí, puedo seleccionar esto y dejarlo caer ahí. Y ahora puedo duplicarlo, seleccionar el contenedor que los sostiene. Y luego cambiar a horizontal. Con este seleccionado, de hecho, sí, con este seleccionado, puedo ir al estilo, color, y vamos al picker de color aquí, escoge color F 15 a 24, pegarlo ahí. Ahí vamos. Publicar. Ahora, hay muchas más cosas que puedes hacer con un botón. Por ejemplo, si decimos en Hover, podemos darle una animación Así que hover animación, podemos decir que amo a Bob. Bob. Eso solo hace que parezca estar flotando en el aire. Este no tiene ninguno. Entonces si selecciono eso, vaya a efectos de hover, puedo hacerlo Bob también Publicar. Entonces eso es todo por ahora. Al trabajar con botones, puedes jugar con todas estas otras configuraciones, que son sencillas, pueden jugar con todas estas otras configuraciones y ver qué hacen. Entonces déjame publicar eso y previsualizar los cambios, y ahí vamos. En la siguiente lección, veamos cómo agregar la imagen de héroe. Te veré en breve. 16. Imagen principal: Entonces ahora es el momento de agregar la imagen de la sección héroe. Volvamos a nuestro editor. Y como habíamos hecho antes, ahora vamos a arrastrar la imagen ahí dentro. Y vamos a seleccionar nuestra imagen desde la computadora. Entonces iré a Subir archivos, e iremos a nuestra carpeta, y esta es la imagen de la sección héroe que había seleccionado. Seleccione. Y ahí vamos. Si publico y previsualizo los cambios, notarás algo. Entonces, si cambio a nuestro sitio web de referencia, notarás que estos están correctamente alineados verticalmente para que este bloque esté en algún lugar a mitad de la altura de este. Pero en nuestro sitio web, esto parece estar elevado a la cima. Entonces, para alinearlo al medio, entramos aquí y seleccionamos el contenedor que está sosteniendo el bloque de texto. Desea seleccionar el contenedor que sostiene el bloque de texto. Y aquí abajo, justifica el contenido, digamos, centrar verticalmente. Publica eso. Y ahora esto se recargará Y ahora eso es lo que tenemos. Pero ahora, claro, tal vez te estés preguntando, ¿qué pasa con estos antecedentes? Porque esto está agregando un toque agradable a la sección de héroes para que no se vea demasiado simple. Ahora mismo, es demasiado claro. Entonces a la gente le gusta claro así, para que puedas dejarlo así. Pero te voy a proporcionar la imagen de fondo de la sección héroe. Entonces así es como agregar la imagen de la sección héroe. Pensé que teníamos algunas cosas más que editar ahí. Por eso quería que fuera una lección por sí solo, pero no creo que tengamos que hacer ningún cambio por ahora. Entonces, en la siguiente lección, veamos cómo agregar esta imagen de fondo. Te veré en breve. 17. Imagen de fondo principal: Entonces ahora veamos cómo agregar esta imagen de fondo de sección de héroe. Entonces volviendo a nuestro editor, vendré aquí y seleccionaré todo el contenedor que contiene la sección de héroes. Entonces seleccionando eso, si puedes seleccionarlo, ve al control I y selecciona el contenedor más exterior A continuación, pasemos a estilo, fondo, seleccionemos Clásico, y aquí es donde podemos elegir la imagen que queramos elegir, subir archivos, seleccionar. Vayamos a nuestra carpeta. Yo había preparado esta imagen aquí. Si hago clic derecho en él y lo abro, se abre en una nueva pestaña en mi otra ventana. Como puedes ver, está emplumado. Utilicé un software en línea para emplearlo solo para asegurarme de que no tenga esos bordes duros. Entonces, si hago doble clic en él y digo seleccionar, como pueden ver, se ha agregado, pero hay un problema. No se puede ver la parte inferior. Entonces, antes que nada, vamos a cerrar este plugin porque es un plug pagado en el que elementor quiere que compres Cierra esa resolución completa, posiciona centro centro, así como así. Adjunto digamos que queremos que se arregle para que cuando nos desplazemos, quede estático ahí mismo. Tan arreglado. Repetir, no repetir. No queremos que se repita. Y para el tamaño de la pantalla, lo queremos como cubierta. Publica eso. Y ahora si tenemos vista previa de los cambios, ahí vamos. Entonces ahora te darás cuenta aquí tenemos este espacio y no se ve tan bien. Entonces vamos a trabajar en eso, no te preocupes, pero lo más importante era que supieras agregar eso. Seleccione este contenedor principal, vaya a Avanzado, aumente el relleno inferior a tal vez 20, tal vez 50. Y entonces aquí 50 publican eso. Y ahora, si tenemos una vista previa de los cambios, sí, ahora está empezando a tomar forma. Entonces básicamente, así es como agregar la imagen de fondo. Y por si acaso te estás preguntando cómo puedo editar estas imágenes. Y de hecho, había levantado lo que solía editar. Aquí es donde creé el logo, y solo estoy usando freepiek En FreePK, puedes ir aquí y decir logotipo de comercio electrónico, y bajo filtros, puedes venir y decir editable en línea y verificar esto abierto con el Y si seleccionas, por ejemplo, esto, puedes decir editar. Abrirá el editor de peek gratuito, y puedes cambiarlo a tu tienda, y luego tienes un logotipo, luego puedes exportarlo Se puede exportar como un PNG sin fondo. Pero cubrí cómo editar imágenes con herramientas gratuitas en línea en una clase integral que publiqué hace algún tiempo. Puedes ir a comprobarlo. Es un curso muy agradable, completo donde no tienes que gastar dinero para editar tus imágenes. En la siguiente lección, empecemos ahora con la sección del cuerpo. Te veré en breve. 18. Perfecciona el encabezado: Entonces ahora es el momento de comenzar a trabajar en la sección del cuerpo. Déjame ir aquí. Queremos empezar a trabajar en la sección del cuerpo, y queremos comenzar con este icono. Pero antes de hacer eso, siento que tenemos que ordenar la zona superior aquí porque se ve fea por ahora. Entonces podemos ir a editar este encabezado pasando el cursor sobre esto y diciendo, encabezado Eso nos llevará al editor de cabecera del kit elements, donde creamos esto. Así que todavía tengo esta página de inicio intacta, pero ahora hemos cambiado el encabezado aquí solo para que podamos editarlo muy rápidamente. Y aquí estamos. Entonces lo primero que quiero hacer es romper todo el relleno en casi todos los contenedores de aquí. Entonces seleccionaré aquí este contenedor grande e iré a Avanzado. Voy a romper ahí el acolchado, y como pueden ver, todo se ha movido ligeramente. Eso es porque cada vez que añades un elemento o contenedor, viene con algún relleno predefinido. Y así solo queremos eliminar eso para reducir el espacio que está ocupando. Déjame cerrar eso. A continuación, seleccionaré este contenedor que sostiene el logotipo. Pero como puedes ver, porque hemos roto el relleno predeterminado, ahora es la misma altura que el contenedor out, así que no puedo seleccionarlo solo. Entonces Control I y ahora amplíe esto. Quiero este contenedor aquí. Todo bien. Así que también voy a romper el acolchado sobre eso. Yo quiero hacer lo mismo en esto. Y eso. A continuación, quiero seleccionar el texto avanzado, y quiero romper el margen para poder editar celdas individuales. Y quiero reducir el margen inferior hasta tal vez 35, negativo 35 y el margen superior por la misma cantidad, negativo 35. Ahí vamos. Por ahora quiero quitar esto. Vamos a quitar eso. Te voy a mostrar por qué porque ahí es donde vamos a tener la barra de búsqueda, y vamos a añadir la barra de búsqueda varias lecciones después. Entonces voy a seleccionar esto porque esto era 20% del ancho, esto puede ocupar 80% y ser empujado hasta el final así. Y ahora, mientras este todavía está seleccionado, el contenedor, necesitamos disponer los artículos dentro de él en el centro así. Y creo que tenemos algo mejor. Vamos a previsualizar los cambios. Y ahora, si voy a la página principal, al menos ahora no hay demasiado espacio ahí. Entonces ahora, de hecho, nos olvidamos de agregar el botón al final aquí, así que solo voy a ir al botón Plus. Puedo agregar un botón arrastrándolo y estilizándolo por todas partes, o puedo ir aquí y seleccionar tal vez esto, seleccionarlo, correctamente copiar, ir aquí Seleccione el elemento nervioso y pegue. Lo pegará debajo del elemento nervioso. Después seleccionaré el contenedor que los sostiene y cambiaré así la dirección. Y ahora los ítems tienen ahora porque hemos cambiado la dirección, no podemos cambiar la justificación de alineación aquí, podemos cambiar la alineación para poner los ítems en el centro. Pero aquí queremos ponerlos al final para justificarlos hasta el final. Este puede ser el corte. Y podemos cambiar el icono a tarjeta. Puedes elegir cualquier tarjeta que quieras aquí. A lo mejor esto, inserte. No. Déjame cambiar eso. Prefiero tal vez esto. Insertar, publicar. Ahora, si tenemos una vista previa de los cambios, ahí vamos. Entonces ahora si digo tienda online, ahí vamos. Creo que es un encabezado mucho mejor que antes. Entonces creo que no deberíamos hacer esta lección demasiado larga. Esta fue una lección donde se suponía que íbamos a empezar a trabajar en la sección del cuerpo, pero teníamos que hacerlo. Entonces terminemos aquí. Y en la siguiente lección, comencemos agregando esa sección de iconos. Nos vemos en breve. 19. Sección de iconos: Entonces sigamos adelante y agreguemos este ícono. Entonces volviendo aquí, antes que nada, quiero controlar Shift R. Eso es duro refrescante. Sí, así que aquí estamos. Yo solo quería que los cambios que hicimos en la cabeza surtan efecto aquí incluso en el editor de la página principal. Entonces ahora que hemos terminado con esto por ahora, solo voy a cerrarlo y cerrar esa vista previa. Este también es otro editor jefe. Cierra eso, algo de limpieza. Déjame cerrar Otacul. Todo bien. Entonces ahora sigamos adelante y digamos que agreguemos también una sección de dirección. Más. Entonces voy a Dentro básico, tenemos icono. Así que voy a dejar caer ahí el icono. Seleccionaré dentro para elegir el icono, tal vez una flecha apuntando hacia abajo. Sí, tal vez esto. Insertar, algo así. Estilo. Vamos a cambiar el color. Puede hacerlo negro. Hazlo del color que quieras. Podemos aumentar el tamaño. Podemos rotarlo, pero no quiero rotarlo. Déjame que sea 25, 25, 25. Ese es un bonito negro que me gusta. En Hover, podemos hacerlo de este color. Entonces seleccionaré esto, voy a estilo, Control C copy, seleccionaré esto en hover o tal vez antes de hover, podemos hacerlo de ese color Y al hover, puede ser 25, 25, 25, negro o tal vez este azul Publica eso y si lo previsualizamos, ahí vamos. Pero vamos a empujarlo un poco hacia abajo o hacia arriba. Sí, vamos a empujarlo un poco hacia arriba. Entonces voy a ir al margen y reducir el margen superior, tal vez a 30. Y luego quiero colapsar el diseño y expandir los efectos de movimiento para darle una animación cuando entra, rebotar, rebotar así, publicar, previsualizar. Así como así. Esa es una buena manera llamar la atención de alguien para mostrarle, Oye, empieza a desplazarte Vamos a empujarlo un poco hacia abajo, así que expanda el diseño. Hagamos que esto tal vez sea negativo 20. Publicar. A ver eso. O tal vez incluso vamos a alejarlo de ahí. Así que vamos a hacer 30. Ponlo fuera de la sección de héroes. Sí, así que pongámoslo ahí mismo. Y así es como agregar tu icono a tu trabajo. En la siguiente lección, veamos cómo agregar esto fijo. Sí, veamos cómo agregar esta sección porque vamos a agregar estos productos destacados después de instalar Woo Comer, así que no podemos hacer esto en este momento. Entonces veamos cómo hacer esto en la siguiente lección. No vayas a ningún lado. 20. Sección de CTA: Entonces veamos cómo crear esta sección de CtA. CtA significa llamado a la acción. Tienes un buen encabezado, una descripción, algunos puntos clave y un llamado a la acción. Y ahora volvamos a nuestro editor, volviendo aquí. Entonces lo estamos poniendo aquí abajo, así que voy a decir añadir. Y de hecho, en lugar de recrearlo, ¿por qué no usamos una de las características más impresionantes de Elementor Te permite no repetirte, por lo que puedes duplicar una sección haciendo clic en esa. Y ahora, claro, quiero ponerlo justo debajo de esta sección de iconos, así que solo puedo arrastrarlo y colocarlo debajo de eso. Exactamente, así como así. Y ahora, lo que quiero hacer es cambiar, antes que nada, seleccionar el propio contenedor, ir al estilo, quitar la imagen de fondo. A continuación, voy a arrastrar este contenedor hasta el final. Si no puedes hacer eso, como puedes ver, ahora en realidad no está funcionando. Sólo puedes ir a controlar. déjame colapsar eso y aquello y aquello. Este es el contenedor del que estamos hablando, como pueden ver, al entrar aquí, tenemos dos contenedores. Puedo arrastrar esto y ponerlo ahí abajo. Entonces ahora la hemos colocado después de la imagen solo para hacerlas alternas. Ahora, selecciona esto yendo aquí para reemplazarlo con una zapatilla. Así que vamos a reemplazarlo por un producto diferente. Digamos que esta bici abierta. Ahora deberías poner ahí imágenes creativas si este es un sitio web real que estás construyendo como tienda de comercio electrónico, así como así. Y ahora podemos mientras aún se selecciona la imagen, voy a ir al estilo. A ver. ¿Podemos cambiar así el radio fronterizo 20? Permítanme cambiar esta sección. Explora nuestras zapatillas premium. Así que explora nuestra prima Dentro del lapso, tenemos asequible, así que cambiaré eso a súper bicicletas, y eliminemos los precios al final. Puedo reducir el tamaño tipografía tal vez hasta ese spot publicar Entonces aquí estamos. Yo sólo quiero deshacerme de uno de los botones. Y llamemos a esto Shop Bikes. Eso es un llamado a la acción. Así que ahora también podemos agregar una lista de iconos aquí. Entonces voy a decir más icono. Lista de iconos. Dejémoslo justo debajo de esa descripción. Y como puedes ver, es una lista de iconos. Y voy a cambiar esto al artículo número uno, colapso de calidad premium que bicicleta más rápida jamás o bicicletas precios asequibles. Entonces ahí vamos. Tenemos la lista. Como puedes ver, la fuente es diferente, y eso es porque no es Montserrat Entonces voy a ir al texto, tipografía cambia esto a Montserrat. Ahí vamos. Ahora, notarás que los botones no están bastante alineados con el resto del texto, y eso es porque, como mencioné, cada contenedor tiene relleno predeterminado alrededor. Entonces si selecciono el contenedor, vaya a Avanzar y romper que ahora no hay relleno predeterminado y se ve bien. Seleccione esta opción para reducir el margen inferior. Rompe eso para editar la celda inferior y selecciónelo para aumentar el margen inferior. Ahora, otra cosa que podemos hacer mientras se selecciona esto es volver aquí, icono y cambiar el color a Quiero seleccionar este color. Control C, vuelve aquí, selecciónalo. Icono pegarlo ahí. Y al flotar, quiero que sea así de azul. Así que selecciona este estilo. Este azul, copia, selecciona este icono de estilo, pasa el cursor. Pegar. Entonces a medida que flotamos sobre él, cambia de color así Vamos a previsualizar los cambios. Y aquí estamos. Me está gustando. Entonces así es como agregar esa sección. Por supuesto, se puede jugar con la altura de la línea, como puede ver, están casi tocando, pero me gustan las líneas bastante cercanas. Me gusta la altura de la línea. Bien, ese es un buen tamaño. Sí. Entonces, en la siguiente lección, veamos cómo crear esta sección de fondo fijo justo debajo de esta. Te veré en breve. 21. Sección de fondo fijo: Entonces ahora es el momento de crear esta sección de fondo fijo. Entonces veamos cómo hacer eso bastante rápido. Debería ser muy fácil. Entonces volviendo a nuestro editor, aquí estamos. Sólo voy a duplicar eso justo debajo de él, y me voy a deshacer de este contenedor. Ahora nos quedamos con un solo contenedor. Seleccionaré esto y eliminaré porque no lo necesitamos. Como pueden ver, aquí solo tenemos un encabezado, una descripción, y un llamado a la acción. Entonces antes que nada, seleccionando esto, yendo al estilo, ponlo en el medio, alinéelo al centro, este estilo, alinéelo al centro, botón Comprar bicicleta. Centro. Bien, seleccionemos el contenedor en sí y justificemos. Evite usar contenedores innecesariamente. Así que sólo podemos arrastrar este botón y ponerlo ahí mismo en el medio y retirar el contenedor. No necesitas un contenedor para poner eso ahí. Pero si seleccionamos este contenedor que lo sostiene todo, podemos ir al estilo, al fondo. Ahora vamos a seleccionar una imagen aquí. ¿Cuál vamos a seleccionar? Digamos que estos chicos estamos vendiendo herramientas, bicicletas, autos, juguetes, tres cosas imprimibles en D. Ahora, hemos establecido el fondo como imagen, pero también queremos establecer el color de fondo como negro. Espera. No, se supone que debemos establecer la superposición de fondo. Tipo de fondo, selecciónalo, selecciona color y dale negro, tono negro. Pero ahora queremos aumentar la intensidad de esa superposición, hacerla más oscura. También queremos volver a los antecedentes. Hacerlo centro fijo. No repetir. Asegúrate de que esté arreglado. Por eso somos capaces de desplazarnos y dejarlo justo donde está. Quiero cambiar esto a blanco. Y fíjate si lo cambiamos a color de texto blanco. El naranja aún permanece porque eso está establecido por este código span aquí. También seleccionaré este botón. De hecho, quiero usar ese color naranja, así que seleccionaré este Control C, seleccionaré este, coloree y pegue eso. Al flotar, quiero que sea blanco y el texto negro. Normal, el texto debería ser simplemente blanco así. Y también quiero aumentar el acolchado en este contenedor exterior. Avanzado, rompa eso para el fondo, vamos a darle 50 y para el top 50. Selecciona el texto, dale también un color blanco y publícalo. Ahora bien, este espaciado es demasiado pequeño, así que seleccionaré el contenedor, margen superior tal vez 100 o 150. Oh, eso son mil 500. Bien, así que publica eso. Y vamos a previsualizar los cambios. Entonces ahí vamos. Entonces así es como agregar la sección de fondo fijo. En la siguiente lección, veamos cómo crear el pie de página. Vamos a ver cómo crear esto un poco más tarde. Oh, no, en la siguiente lección, veamos cómo crear esta sección. Entonces te veré en breve. 22. Crea el pie de página: Entonces, ¿por qué no seguimos adelante y creamos el pie de página? Entonces, sin perder el tiempo, cambiemos a nuestro editor aquí mismo. Y como de costumbre, recuerden, la misma manera que construimos el encabezado por separado del cuerpo, vamos a construir el pie de página por separado del cuerpo. Así que volvamos a entrar aquí. Ahora, de hecho, hemos terminado con la página de inicio por ahora. Así que solo voy a salir a WordPress. Asegúrate de que esté publicado. Has publicado todos tus cambios, y salgamos por completo. Y ahora, ya conoces el simulacro. Vamos a kit de elementos, encabezado pie de página. Agregar Nueva plantilla, pie de página, seleccione pie de página aquí. Y vayamos directamente a Editar contenido. Lo guardará automáticamente aquí en el panel de administración. Bien, así que aquí estamos. Entonces iré a Flexbox, seleccionaré eso, agregaré otro contenedor dentro Quiero con el 100%. Y para ello, queremos que sea del 80%. Ahora, para este exterior, podemos alinearlo al centro. Aquí, podemos agregar un contenedor. Duplicarlo tres veces, seleccionar este, cambiar la dirección aquí, y ahora tenemos un lugar podemos poner nuestra imagen de logotipo, seleccionar el logo en la mediateca, seleccionar eso Podemos agregar un editor de texto justo debajo de él. Estilo. Ahora bien, una cosa que olvidé mencionar es cómo establecer fuentes globales para que no tengas que seguir editando teléfonos cuando añades un editor de texto. Y lo haces yendo a la configuración del sitio, fuentes globales. Fuente primaria, hagamos esa rata monstruosa. Haga clic en Fuera secundaria Montserrat. Puedes elegir la fuente que quieras. Haga clic fuera del texto. Montserrat. Selecciona exterior y acentúa, también, lo mismo. Volver a guardar los cambios en el editor. Ahora, como pueden ver, automáticamente es Montserrat, y eso no lo cambiamos Y si agrego un nuevo editor de texto, vendrá como Montserrat Entonces eso es todo. Lo siguiente que queremos hacer es agregar un encabezamiento aquí. Dejemos caer un rumbo aquí y hagamos que tenga tres años. Digamos enlaces útiles. Y justo debajo de él, podemos agregar un contenedor. Eso tiene dos elementos en su interior. Lista de iconos. Dejemos caer ahí una lista de iconos y la dupliquemos, y seleccionamos el contenedor, podemos convertirlo en una doble columna. Y también podemos espaciar estos dos. Podemos poner espacio entre ellos. Eso significa empujar esto hasta el final, espacio entre así o digamos espacio alrededor del espacio alrededor. Pero no me gusta que esto esté desalineado. Así que el espacio entre así. Ahora, notarás que esto está alineado muy por encima del logotipo. Podemos seleccionar el propio contenedor, ir a la parte superior acolchada avanzada, digamos 30. Digamos 40. Selecciona ese estilo, tipografía Hagámoslo 900 o tal vez 800. Vamos a hacer clic afuera. Quiero cambiar el color a 25 25, 25. 25 25, 25, o tal vez este azul. No me gusta ese negro por ahora. Así que elige color, selecciona eso, ve aquí. Ahora, como pueden ver, tenemos a estos dos aquí, publiquen. Si vuelvo aquí antes como esto guarda, quiero venir y decir, editar con Elementor porque lo que quiero hacer es copiar el estilo que ponemos en la otra lista de iconos antes Si me desplace hacia abajo y selecciono esto, copia de fuga derecha, puede venir aquí y seleccionar este estilo de pasta de fuga correcto, seleccionar fuga correcta, estilo de pasta. Y ahora todo lo que tenemos que hacer es cambiar lo que dice cada ítem. A lo mejor en casa porque estos son enlaces. Podemos llamar a esta tienda al podemos seleccionar esta tal vez política de privacidad. Términos de uso. Y tal vez Política de cookies. Tal vez Política de cookies. Sí, así como así. Publicar. Ahora, se dará cuenta aquí que estos dos están demasiado cerca. De hecho, quiero que esto sea un poco más ancho que esto. Entonces voy a poner esto o tal vez dejémoslo ahí. Pero para esto, porque es el que va a tener el formulario de registro, vamos a hacerlo 50% o tal vez 40%. Vamos a hacer esto 30%. Y hagamos estos 30% para hacer 100. Podemos seleccionar esto y aumentar el espaciado entre los tres contenedores, los huecos 30 publican. Tengo ganas de seleccionar este contenedor e ir a avanzado, margen izquierdo. Aumentemos así el margen de la izquierda. Aquí, podemos decir únete a nosotros hoy. Entonces podemos tener una breve descripción aquí. Oh, espera. ¿Dónde está eso que nos acompañe hoy? Quiero duplicar esto, dejarlo ahí y decir Únete a nosotros hoy. Entonces aquí es donde vamos a poner un chimpancé de correo electrónico. Por ahora, vamos a usar esto como marcador de posición, la forma de chimpancé macho Así como así, podemos darle estilo. Para obtener los mejores descuentos, ofertas, y las últimas noticias de nosotros o simplemente y ofertas y ofertas. Entonces ahora, si selecciono el formulario, podemos ir a estilizar y cambiar los colores. Podemos darle el color que queramos. Entonces déjame seleccionar este azul. Copia, Control C, vuelve aquí, pega. ¿Qué es esto? Bueno, eso es tipografía Queremos el botón. Tipo de fondo. Sí, pega eso. Ahora, eso es azul, o podemos hacerlo de este naranja, que sea el color que quieras, digamos publicar También podemos decir redes sociales, íconos. Dejemos caer ahí los íconos de las redes sociales y alinéelos tal vez de este lado, publique. Y no me gusta que estos dos estén desalineados. Entonces seleccionaré esta copia de clic derecho, para que podamos copiar el estilo. Aplicamos aquí, clic derecho pegar estilo. Entonces ahora, bien, también se copia el ancho del 30%. Queríamos que fuera 40, pero ahora tiene ese margen superior así. Publicar. Vamos a previsualizar los cambios. A mí me gusta, pero este espaciado es demasiado. Volvamos aquí y seleccionemos esto. Margen inferior reducir. Publicar, previsualizar los cambios. Ahí vamos. Entonces ahora, esto aún no es un enlace. Entonces seleccionándolo, enlace URL personalizada. Vamos a copiar nuestra página de inicio. Y publicar. Vista previa de los cambios. Y ahora, si seleccionas esto o haces clic en este y te desplazas hasta el fondo, tenemos nuestra carpeta. Ahora bien, una cosa necesitamos agregar el margen aquí. Entonces seleccionando esto, vamos a top de margen avanzado. Vamos a darle 100 o 150. Publicar esto se recargará. Vete a casa. Vamos a desplazarnos hasta la parte inferior. Ahora tenemos un bonito espaciado uniforme. Entonces así es como crear una foto desde cero sin usar plantillas. Esto fue apresurado, pero al menos entiendes el concepto porque es lo mismo que construir el encabezado o la sección de héroe. Solo necesitas saber cómo trabajar con contenedores. Y ahora que hemos terminado con una foto, en la siguiente lección, veamos cómo hacer que toda la página sea receptiva. En otras palabras, hagamos que se vea hermoso en otros dispositivos aparte de la PC porque en este momento se ve bien en el escritorio. Acerca de las tabletas? ¿Qué pasa con los smartphones? Entonces, si alguien está navegando en su teléfono inteligente. Veamos cómo hacerlo en breve. 23. Encabezado responsivo: Entonces veamos cómo hacer que esta página receptiva en diferentes dispositivos. Pero antes que nada, veamos cómo se ve por defecto en diferentes dispositivos. Así que pulsa Control Shift I en tu teclado. Espera, Control Shift E en tu teclado. Eso sacará a colación la consola. Y ahora tenemos diferentes herramientas aquí las podemos utilizar para simplemente trabajar en esta página web. Te darás cuenta aquí que tenemos esta barra de herramientas del dispositivo Tgal. Vamos a hacer clic en eso. Eso sacará a colación algunos simuladores para diferentes dispositivos Como puedes ver en este menú desplegable, tenemos diferentes tamaños de dispositivo. Entonces, si digo iPhone 14 Max, así es como se ve el sitio web por defecto en un iPhone 14. Vamos a desplazarnos hasta el fondo. No se ve tan mal, pero se puede mejorar. Veamos cómo se ve en una tableta. Digamos iPad Pro. Así se ve en un iPad. Creo que se ve bien en un iPad, pero el encabezado no se ve tan bien. Entonces, ¿por qué no empezamos con el encabezado? Entonces voy a cerrar eso, pasar el cursor sobre eso, y luego encabezado para que podamos editarlo. Y aquí estamos. Entonces lo primero que me gusta hacer es cambiar al modo tablet. En primer lugar, permítanme ser muy explícito sobre este 100%. Control I, quiero este que lo esté guardando todo. Entonces el 90%, no píxeles, por ciento. Alrededor del 98%. Sí, eso me gusta. El 98% tiene razón. Entonces ahora vamos a seleccionar el contenedor logo y hacerlo 20%. Y este otro 80%. No píxeles. Publiquemos eso. Y ahora notarás los cambios que habíamos establecido o los ajustes que habíamos configurado en modo escritorio siguen vigentes aquí, y por eso esto todavía tiene el margen del modo escritorio. Entonces si lo selecciono, Todo bien. Solo quiero seleccionar el del kit de elementos. Cierra eso. G aquí. Como puedes ver, tiene esos ajustes de margen que establecemos en el modo escritorio. Queremos romper esa publicación que. Revisemos los cambios. Ahora Control Shift I para cambiar al modo tablet y me gusta como se ve. Ya se ve bien, y ahora te darás cuenta aquí cuando hagamos clic en el menú de hamburguesas, necesitamos un logo aquí. Volvamos a entrar aquí. Haga clic en eso. Como puedes ver, podemos ir al contenido, a la configuración del menú móvil, al logotipo del menú móvil. Agreguemos nuestro logo como de costumbre. Y ahora el logo aparece en el menú del móvil, pero es demasiado amplio. Quiero que sea un poco estrecho. Entonces, mientras aún esté seleccionado, iré al estilo. Menú móvil. Espera, sí, envoltorio de menú con digamos porcentaje, y lo quiero en algún lugar justo antes de que ese icono de go colapse, en algún lugar de ahí Publica eso. Si cierro eso y cambiemos al modo móvil. Entonces así es como se ve en modo móvil. Ahora bien, no creo que se vea bien así. Se ve demasiado enrevesado, demasiadas cosas en el encabezado Entonces lo que me gusta hacer a veces, no siempre, cuando tengo algo extra como este botón, me gusta crear un menú móvil separado o encabezado móvil. Así que volviendo aquí, puedo duplicar esto. Y ahora, esto solo se mostrará en tablet y escritorio, pero también tendremos una separada para móviles. Entonces lo hacemos seleccionando el contenedor que está sosteniendo todo el encabezado, vamos a avanzado, colapsar diseño, responsive. Queremos ocultar esto en tablet y escritorio. Sólo se mostrará en el móvil. Eso significa que es el único encabezado que aparecerá en el móvil. Y si voy a este otro, queremos ocultarlo en el móvil porque debería aparecer en escritorio y tableta. Entonces entrando en el diseño de colapso avanzado, receptivo, esconderse en el móvil, publicar eso. Ahora bien, si me cambio al móvil, notarán que esto va a ser calificado así, y esto se volverá activo. Ahora es calificación fuera. Este es el activo. Y ahora solo quiero deshacerme de ese botón porque no me gusta ahí. Y quiero darle a este contenedor de botones 50% del ancho y este otro 50%, así que están uno al lado del otro. Entonces seleccionando esto, asegúrate de que sea el contenedor del logo. Vamos a darle el 50% así. Seleccionemos este otro. Vamos a darle el 50%. Como puede ver, por el relleno y margen en los contenedores de salida, necesitamos hacerlo más estrecho Así que déjame bajar a tal vez 44%. En realidad el 40%. Y ahora voy a seleccionar este contenedor que está conteniendo esos dos contenedores, y veamos, espacio entre ellos. Sí, para que podamos separar todo y poner espacio entre ellos. Publica eso. Y ahora esto se ha vuelto a cargar Entonces ahora, como pueden ver, este es el encabezado móvil. Pero quiero decir, este es el encabezado de la tableta. Y si cambiamos al móvil, tal vez iPhone o Samsung Galaxy S 20, ultra, como pueden ver, estamos usando el otro encabezado. Eso me encanta. Ahora, creo que necesitamos hacer que esto tal vez 60% reduzca el ancho del contenedor exterior. Vamos a fijarlo en 98%. Publica porque quiero empujar un poco este ícono de la hamburguesa hacia adentro Sí, así como así. Hagámoslo 96%. Así como así. Eso me encanta. Ahora, si hago clic en el icono de Hamburguesa. Bien, entonces el logo está oculto aquí arriba porque en el menú del móvil, este botón de go se ha derrumbado hacia abajo Así que vamos a rectificar eso. Eso es lo mismo aquí si hago clic en esto, como pueden ver. Entonces en el móvil, queremos que el ancho sea más ancho, así como así. Publica eso y vengamos aquí. Voy a recargar Ahora si hacemos clic en eso, sí, así que ahora se ve bien. Ahora bien, este es el menú del editor de Wordpress. Es el hombre esta misma cabecera aquí con todos estos ajustes. Así que no te preocupes por eso. Ahí está ese botón de go, y el logo está detrás de ahí. Entonces, básicamente, así es como hacer que el encabezado sea receptivo en diferentes dispositivos. En la siguiente lección, veamos cómo hacer que el resto de la página sea receptiva. No vayas demasiado lejos. De hecho, toma un vaso de agua y vuelve. 24. Actualización de encabezado adaptable: Tenemos un encabezado responsive. Es momento de hacer que el resto de la página sea receptiva. Pero antes de hacer eso, solo recuerdo que no cubrimos cómo editar este menú, este menú móvil. Entonces como puedes ver, antes que nada, los efectos de desplazamiento son todos buenos, pero ¿y si quieres cambiar el color de este botón de go Y además, ¿y si quieres cambiar el color de este menú de hamburguesas? Entonces, seleccione el elemento de menú. Por lo que dice Editar elementos kit nervio menú. Mientras que dentro de estilo, vamos a ir al menú Hamburguesa. Color de icono de hamburguesa. Esas son estas líneas que están dentro del botón. Ahora mismo, tienen ese color. Cuando rondemos, queremos que se pongan blancos. Así sucesivamente hover, color de icono de hamburguesa. Blanco. Entonces en hover, ahora es blanco Si quieres cambiar el fondo, aquí es donde lo cambias. Por ejemplo, digamos, quiero que sea de este color, este color naranja. Déjame elegir este color pick color. Escojamos ahí un píxel naranja. Seleccione eso. Ahora bien, si vamos a fondo, colorea , pega eso ahí dentro. Si pongo el cursor sobre esto, ahora es ese color. Y parece tener un borde azul. Entonces, ¿tiene frontera? Ninguno. Sí, así como así. Pero entonces otra vez, no pones el dedo sobre tu teléfono móvil Entonces eso no tiene sentido. Pero de todos modos, así es como manejar tus colores. A continuación, si hago clic en él ahora, haciendo clic en él, se cambia de color a azul. ¿Existe un estado activo? Déjame publicar eso y ver qué está haciendo estallar. Vista previa de los cambios. Todo bien. Entonces cuando haces clic en eso, sí, así que ahora se ve bien. Cuando está activo, es naranja. Ahora, ese es el menú de hamburguesas. Pero cuando hacemos clic en esto, a esto se le llama el icono de go. Entonces ahí está el togo de Hamburguesa y hay un go cerrado. De eso estamos hablando. Color de icono de hamburguesa. En circunstancias normales, podemos dejarlo en ese color. Pero en Hover, claro, no hay estado estacionario en los teléfonos móviles, pero solo quiero cambiarme a esa naranja Bien, ese es el Oh, si. Lo siento, ese es el icono. También tenemos los antecedentes. Pega eso. Todo bien. Y luego para el tipo de borde, ninguno. Así como así. Publica eso. Y ahora quiero actualizar o recargar esta página también para todo lo que hemos hecho sea visible también en nuestro editor, no solo el producto final aquí Entonces ahora está surtiendo efecto, y eso es lo que quería mostrarle por ahora. Así que ahora podemos pasar a la salida. De hecho, sólo puedo cerrar eso y luego salir ahí y allá. Y si vengo aquí, simplemente haga clic en eso para que podamos comenzar a editar la propia página. Aquí vamos. Entonces ahora hemos cambiado a la página en sí, Control Shift I Ahora, notas que no hemos hecho esas actualizaciones en el menú de la tableta y el escritorio, pero al menos entiendes cómo editar los colores del menú, los colores menú de la hamburguesa. Entonces esa es una tarea. Sigue y haz lo mismo aquí. Yo quería que entendieras cómo hacerlo. 25. Página responsiva: Entonces ahora, antes que nada, vayamos a la página principal. Todo bien. Entonces ahora vamos a editar con Elementor. Ahí vamos. Así que cambia al modo tablet. En modo tablet, también seleccionemos esto y seamos muy explícitos. este momento tiene la configuración de escritorio del 100%, pero me gusta ser muy explícito sobre mis valores. Aquí, también está usando el valor por defecto. Entonces déjame hacer esto 96%. Sí, me encanta esa publicación. Pero acabo de recordar, no me gusta ponerlos uno al lado del otro cuando está en la tableta. Me gusta hacer cada uno de estos al 100% y cambiarlos a un modo stack. Entonces ahora que esto es del 96% de ancho, puedo hacer este 100% de ancho también. Y esto al 100%. Y ahora, si voy a este contenedor exterior y cambio de dirección, esto es 100%, y esto es 100%. Entonces ahora todo lo que necesito hacer es seleccionar esto, ir al estilo, alinear eso al centro, ir aquí, estilo, alinearlo al centro, seleccionar este contenedor, alinear todo al centro así. Publicar. Ahora podemos revertir esto o dejarlo así. Algunas personas prefieren la imagen antes que el texto. Y así la manera de lograrlo para poner la imagen antes que el texto es simplemente revertir. Ahora se dirige hacia abajo. Todo en el contenedor va hacia abajo. Podemos decir, no, vamos a invertir el orden, así como así. Pero como dije, quiero que sea así. Y puedo reducir el tamaño de esta cabecera tipografía reducir eso a tal vez ese tamaño, publicar Entonces me desplazaré hacia abajo. A mí me gusta donde está eso, pero podemos hacerlo tal vez también 96%. Permítanme reducir el tamaño de ese rubro. Y la altura de la línea hasta ese punto. También puedes hacer lo mismo. Si quieres las imágenes, si quieres que cada uno de estos contenedores ocupe el 100%, puedes hacerlo. Voy a hacer algo diferente. Seleccionaré esto e invertiré esto, lo pondré ahí. Voy a dejar eso exactamente donde está, pero puedo hacer esto más pequeño, así como así, publicar Vamos a previsualizar los cambios. Ahora turno I, Control Shift I, y cambiemos a estos dispositivos. Echémosle un vistazo en el iPad Pro. Entonces así es como se ve en el iPad Pro, desplazándose hacia abajo. Sí, creo que se ve bien. Ahora es el momento de trabajar en el alfarero receptivo. Entonces básicamente, sé que no hemos hecho un trabajo perfecto. Todavía hay margen de mejora, pero, claro, esto es solo para mostrarte cómo hacerlo. Depende de ti hacer que se vea increíble. Pero aunque ese sea el caso, déjame hacer esto un poco más grande. No me gusta cómo se ve. Seleccione eso. Tipografía. Aumentemos el tamaño hasta tal vez ese punto. Y si cambiamos a nuestra tableta, creo que se verá mucho mejor. Pero ahora aumentemos la altura de la línea. Bien, así que vamos a publicar eso y vamos a previsualizar los cambios Creo que ahora se ve increíble. Entonces te veré en el siguiente vaso mientras trabajamos en un pie de página responsive. Nos vemos en breve. 26. Pie de página responsivo: A ahora es el momento de trabajar en el pie de página. Hagámoslo receptivo. Volviendo aquí. Ahora una cosa que notarás es que no hemos trabajado en hacer esto responsive en el móvil, y eso es porque usarás los mismos principios que hemos usado en la tableta. Por ejemplo, para este rubro, necesitamos entrar aquí y hacerlo más pequeño. Creo que eso es lindo. Simplemente la forma en que se ve ya es agradable. Podemos tomar esto y alinearlo al centro y al estilo. Haz lo mismo para éste. O podemos saber porque queremos dejar esta lista alineada a la izquierda, solo dejemos todo alineado a la izquierda. Ahora, una cosa que puedo hacer aquí es seleccionar el contenedor que contiene el cuadro de texto avanzado. Y no rompamos este vínculo. Solo agreguemos un acolchado de 20 en todos los lados. Sólo estamos agregando algo de espacio, algo de mesada en los costados. Para que puedas hacer lo mismo para esto, selecciona esto. Avanzado 20 uniformemente todo redondo. Entonces solo sigue adelante y termina esto porque ahora queremos ir a la foto. Voy a publicar esto. O bien, déjeme hacer esto muy rápido. Déjame hacerlo rápido adelante esta parte, 20, y ahí vamos. Publicar. Bien, cambiando a ese teléfono. Se ve increíble. Entonces ahora cambiemos al pie de página. De hecho, así que ahora vamos a cambiar a esta vista previa. Ir a la página principal. Editar Pie de página. De hecho, podríamos haber hecho lo mismo aquí con solo salir de esto, cerrarlo abajo, e ir aquí, pie de página. Pero de todos modos, no te preocupes. Así que vamos a cerrar todos estos otros. Seleccionando el pie de página, cambiando al modo tablet , por supuesto, seamos explícitos sobre esto siendo 100%. Aquí se aplica el mismo caso. El 96%, y eso lo permitiré. Debo permitir ese relleno, relleno predeterminado porque siento que aquí hay demasiado espacio. Vamos a verlo en la parte delantera en lugar de adivinar. Controle Shift I y cambiemos al modo tablet. iPad pro. Y ahora quiero que vayamos a la página principal para que podamos ver la alineación. De esto es de lo que estoy hablando. Este espacio no es tan grande como el espacio para fotos, por lo que necesitamos quitar el relleno. Sobre eso, esto es lo que tiene más contenido. Podemos hacerlo más amplio. Entonces ancho 40, digamos 50, alrededor de 50. ¿Y qué pasa con el 60? O otra cosa que podemos hacer es lo que hicimos antes. Podemos hacer esto al 100% de ancho. 100% Control I para sacar a colación la estructura. Seleccionemos el contenedor que contiene estos tres contenedores, regresemos aquí, y quiero que la dirección sea hacia abajo así. Podemos seleccionar el logo e ir a establecer el ancho, tal vez hasta ese punto, seleccionar este estilo, alinearnos al centro. Hagamos que esto ocupe 100% Ahora, tiene que recuerdes que establecemos algún margen en el escritorio, así que vamos a romper eso. Y recuerda, este es el modo tablet. Entonces, cualesquiera que sean los cambios que estamos haciendo aquí solo están afectando el modo tablet, no el escritorio. Y entonces pongamos esto. Podemos poner esto en el centro. Puedes hacer este 50%. Selecciona esto y alinea todo al centro así. Podemos eliminar el margen superior superior relleno cero. Seleccione esto. Seleccionemos esta copia filtrada correcta. Seleccione este estilo correcto de pasta de fugas. Así como así. Seleccione esto. ¿Tiene algún margen inferior? No, ¿qué pasa con esto? Yo creo, ¿establecimos un hueco para esto para el contenedor principal que los sostiene? Sí, creo que pusimos 30, digamos diez o cero porque ahí no quiero demasiado espaciado. Pero para esto, podemos empujarlo un poco hacia abajo, avanzado, margen top 30 publicar. Ahí vamos. Entonces, como puedes ver, lo más importante para que aprendas es cómo usar estas herramientas para hacer cualquier layout que tengas en mente. Y puedes pedir prestada inspiración buscando plantillas de tienda en línea o plantillas de sitios web, y simplemente copia un diseño que te guste Siempre y cuando sepas cómo usar las herramientas, puedes hacer cualquier tipo de sitio web. Entonces voy a cerrar eso. No, en lugar de cerrarlo, control vamos a echarle un vistazo ahora. Control Shift E. Si vamos al fondo, así queda nuestra foto. Estoy satisfecho con ello. Sigue adelante y sigue jugando con los ajustes para ver qué se te ocurre. Sólo puedo copiar este texto. Vayamos al contenido. Copia sí, tal vez podamos tener algo así porque no me gusta cómo se ve esta línea. Control Shift ojo. Sí, algo de ese tipo. Entonces así es como hacer que el pie de página sea receptivo. Ya casi terminamos con las páginas elementales porque cuando estemos trabajando con Woo Cameras, no vamos a estar usando Elementor Pero en la siguiente lección, veamos cómo trabajar con formularios de Wordpress a medida que construimos la página de contacto. Recuerda, tenemos una página de contacto si puedo cambiar a nuestro sitio web de referencia. Sí, entonces esta es nuestra página de contacto. Si vas a tener un sitio web de WordPress, debes entender cómo usar los formularios de Wordpress, permitiendo que las personas se pongan en contacto contigo o se registren en tu lista de correo. Cuando llenen sus datos aquí y envíen mensaje, deberían venir a tu bandeja de entrada. Entonces, ¿cómo se hace eso? Veamos cómo hacerlo, a partir de la siguiente lección. 27. Actualización del pie de página: Me di cuenta de alguna discrepancia aquí mismo. Si me desplazo hasta la parte inferior y estoy en la página de inicio, el pie de página se ve increíble. Si voy a la página A, que creamos simplemente al azar, ahora hay un problema aquí. Entonces no sé qué está pasando exactamente, pero veamos si podemos solucionar problemas Así que vamos a Pie de página. Ahora, una cosa que podemos hacer es abrir este modo incógnito solo para ver cómo se ve Control Shift N, y voy a escribir vfxpod.com. Pégalo ahí y desplazándote hasta la parte inferior, si cambio a la página de contacto Creo que este elemento tiene algunos problemas porque no sé por qué está pasando así. ¿Por qué aparece así en la página de inicio, pero no funciona en estas otras páginas Así que vamos a ver, lista Sí, podemos usar lista de páginas. De hecho, esto es lo que deberíamos haber usado hace mucho tiempo porque se trata de enlaces a páginas web específicas. Así que déjame dejar eso ahí. Elemento del anuncio. Llamémosle hogar a esto. Ahora podemos buscar la página de inicio escribiendo ahí. Y ahí vamos. También podemos agregar otro artículo. Vamos a llamarlo tienda. Pero ahora para la tienda, vamos a tener que instalar Woocomers primero. Así que vamos a vercada otra página que tenemos sobre y contactemos. Entonces sobre y aquí sobre. Si una página no existe, no se mostrará si escribe un nombre aquí. Entonces digamos productos y teclee aquí productos, no va a aparecer porque aún no tenemos una página de producto. Pero debido a que tienes una página de contacto, podemos poner ese contacto ahí. Entonces cambiemos esto para contactar. Y ahora dice contacto. Ahora, vamos a quitar eso y arrastrar esto ahí dentro. Entonces vamos a quitar esto. Simplemente no está funcionando. Inicio. Ahora, sólo voy a duplicar eso, pero para ti, vas a usar las páginas que necesites. Ahora, también voy a seleccionar este contenedor. Espacio de manera uniforme. Solo veamos lo que tenemos aquí. Bien, solo podemos aumentar la brecha entre los dos en lugar de ponerlos demasiado separados. Entonces digamos 40 o 60, 60. Sí. A mí me gusta así. Y ahora notarás que el color es azul, y eso es porque este es el color global establecido por Astra, el tema. Entonces vamos a tener que ir al área personalizada para cambiar este color. Entonces voy a decir publicar. Tenemos que cambiar esto a otras páginas que tengas. Tal vez política de privacidad. ¿Qué páginas tenemos, por cierto? Si puedo simplemente volver rápidamente a las páginas. Sólo tenemos tres. Agreguemos algunas páginas más. Uno, dos, tres, Privacidad publicar. Voy a ir aquí y decir términos de uso, publicar y cookies. Publicar. Puedes incluir tantas páginas como quieras. Pero ahora déjame cerrarlos todos. Refrescar. Ahora tenemos todas esas páginas. Entonces volviendo aquí, seleccionando esto, podemos llamar a esto privacidad y aquí escriba privacidad. Privacidad. Seleccione esas condiciones de uso. Términos. Y por último, Cookies. Galleta. Ahí vamos. Perfecto. Publicar. Y ahora, porque esto es más pequeño, creo que podemos hacerlo más amplio. Entonces seleccionando eso, hagamos que tal vez sea 40% y reduzcamos esto a 20% publicar. Vista previa. Y creo que se ve mejor. Ahora, como mencioné, tenemos que ir a personalizar porque estos son enlaces Astra establece colores automáticos para todos los enlaces, les da un color global porque, como mencioné, un tema es lo que determina la apariencia de tu sitio web, da todos los ajustes predeterminados. Depende de ti ir y cambiarlos. Entonces aquí estamos. Si vamos a colores globales, tintas, podemos cambiar esto a los colores de nuestra marca o podemos seleccionar tal vez ese color. Ahí vamos, pero no está cambiando. No sé por qué. Uh, cambiemos el color del acento. Ahora bien, este es un factor limitante porque ¿y si quiero flotar Si estoy flotando sobre uno de ellos, quería que cambiara de color, pero no puedo Pero eso no es gran cosa. Siempre y cuando esto cambie a una mano, alguien sabe que puede hacer clic. Ahora, cerrando eso, ahí vamos. Así que yendo a casa, vamos a probarlo en las otras páginas. Entonces así es como se ve ahí. Acerca de la página. Así es como se ve. Página de contacto. Impresionante. Se ve bien. Entonces ahora, como mencioné, en la siguiente lección, a partir de la siguiente lección, comencemos a construir nuestra tienda Wocomers. Vamos a crear productos. Entonces vamos a crear la página del producto. Vamos a conectarnos a PayPal y permitir que las personas realicen pagos a tu sitio web que puedas entregarles la mercancía. cuando terminemos, este sitio web va a estar listo para comenzar a recibir dinero. A ver cómo se hace eso. Siguiente lección. 28. Crea un formulario de contacto: Eh, bienvenido de nuevo. Entonces ahora es el momento de que aprendas a trabajar con formularios de Wordpress. Ahora, permítanme cambiar al sitio web de referencia. Como puedes ver aquí en la página de contacto, tenemos un formulario que requiere que el usuario ingrese su nombre, dirección de correo electrónico y su mensaje. Si tienen alguna pregunta, o quieren darnos algún comentario, pueden hacerlo usando este formulario. Entonces, ¿cómo se crea un formulario de Wordpress? Esa es la pregunta más grande. Para ello, necesitaremos un plugin de formulario. Volvamos a nuestro sitio web. Aquí estamos estoy dentro del tablero. Entonces voy a ir a plug ins, Agregar Nuevo. Ahora bien, si tecleo formulario, notarás que tenemos varios plugins de espuma disponibles para nosotros. Pero el que queremos se llama Forminator Forms de WPMU Dev Para mí, este es el mejor plugin de espuma de todos los tiempos. Te proporciona varias funciones gratuitas que de otro modo tendrías que pagar para tener si estás usando otros complementos de espuma. Muy bien, así que sigamos adelante e instalémoslo, y voy a seguir adelante y activarlo. Y de inmediato, la verás aparecer aquí. Así que si solo hago clic nos llevará al plug in dashboard, al dashboard del forminador Y como pueden ver aquí, podemos seguir adelante y crear una espuma o una encuesta. Si quieres realizar encuestas en tu sitio web, puedes recopilar opiniones de los usuarios de forma gratuita Entonces seguiré adelante y crearé y se nos presentarán estas plantillas con que podemos empezar. Pero quiero que usemos un formulario en blanco para que podamos construirlo desde cero. Digamos que esta es la página de contacto. Entonces contacto. Formulario de contacto. Déjame solo formulario de contacto, crea. Y aquí estamos. Entonces ahora aquí es donde se supone que debemos ingresar a nuestros campos, y podemos hacerlo haciendo clic en insertar campos. Estos son los diferentes tipos de campos que podemos agregar a nuestro formulario. Entonces voy a decir que quiero un campo de nombre. También quiero un campo de correo electrónico y un campo de área de texto. Si vuelvo a cambiar aquí, este es un campo de nombre, correo electrónico y un campo de área de texto. Insertar campo. Y como pueden ver ahora, tenemos uno, dos, tres, y este es el botón. Esto se agrega automáticamente. Todo lo que tienes que hacer es cambiar lo que hace o dice. Entonces, antes de que hagamos otra cosa, quiero que hagas clic en Vista previa. Así es como se ve nuestro formulario actualmente. Entonces veamos si podemos actualizarlo un poco. Entonces primero que nada, lo publicaré Y en el momento en que lo publiquemos, se nos da este código corto. Esto es lo que tendremos que pegar en el front end en nuestra página de contacto para mostrar la fam. Entonces déjame cerrar eso. Si voy a páginas y guiño Open Link en Nueva Pestaña y voy aquí a la pestaña, tenemos la página de contacto Entonces voy a decir editar Aún no es una página elemental. Entonces, antes que nada, recuerden, vamos a ir a la plantilla y cambiarla a elementor ancho completo Vayamos también a los ajustes de Astra. Vamos a darle un ancho completo, colapsar eso, expandir la barra lateral, no barra lateral, colapsar eso, y vamos a desactivar estos campos. Guarde eso. Y ahora podemos continuar editando con Elementor. Y aquí vamos. Entonces es una página en blanco, pero tenemos nuestro pie de página y encabezado. 29. Crea la página de contacto: Entonces volviendo a cambiar aquí como pueden ver, tenemos los contactores. Déjame copiar eso. Ahora aquí, claro, permítame agregar ese plus. Pongamos ahí el rumbo. Déjame pegarlo ahí dentro. Permítame también agarrar este texto. Además, no. Vayamos aquí a más editor de texto. Y dejemos eso ahí dentro. Entonces ambos están dentro de este contenedor, pero no tenemos un contenedor que se supone que los sostenga. Así que me olvidé de eso. Entonces agreguemos un contenedor. Está dentro del contenedor exterior, así que podemos arrastrar esto y soltarlo ahí y esto ahí dentro. Entonces ahora, como de costumbre, selecciona esto. Hagámoslo al 100% de la pantalla. Entonces tomemos esto y lo hagamos 80%. Después regresa aquí y alinéalo al centro. Espera, ahí mismo. Muy bien, entonces seleccionando esto alinear al centro, estilo, centro alineado Seleccionando esto, volvamos a la tipografía de estilo. Hagámoslo 900. A mí me gusta muchísimo. Entonces aumenta el tamaño tal vez hasta ese 0.50. Y claro, los colores Vamos a darle este azul. Puedes darle el color que quieras. Así que elige el color. Elige uno de esos píxeles, copiado, selecciona esto. Entra aquí, pega ahí. Ahora también puedo escoger este color. Regresa a este contacto. Podemos agregar ese lapso. Span span. Volviendo aquí. El estilo es igual al color, pega ese color ahí. Publicar. Entonces, permítanme ahora agarrar esta copia. Contenido, pegarlo ahí, seleccionarlo para agregar esos detalles. Publicar. Ahí vamos. Ahora, como pueden ver, esto no es tan amplio como lo que tenemos aquí. Entonces podemos seleccionar esto y aumentar el relleno en los lados, tal vez acolchado a la izquierda, 50, relleno a la derecha, 50 o tal vez 150, y aquí 15250, 250, o digamos 200 Simplemente juega con los valores hasta que estés satisfecho. Esto es 2 mil 500. Perdón por eso. Publicar. 30. Muestra el formulario de contacto: Entonces ahora, recuerden, estamos aquí dentro del formador. Acabamos de crear nuestro formulario, y cuando creamos el formulario, nos dieron un código corto, pero ese pop up desapareció. Entonces, para acceder al código corto, solo sube aquí y copia el código corto. Sí. Entonces volviendo aquí, podemos seleccionar y agregar una nueva sección. O podemos duplicar esto, simplemente duplicar eso. Y vamos a borrar todo aquí. Quitemos el relleno que aplicamos, o simplemente dejémoslo ahí porque en realidad queremos que tenga ese relleno. Pero para poder pegar el código corto, necesitamos buscar el elemento short code. Así que código corto, déjalo ahí. Entonces peguemos el código corto que acabamos de copiar de aquí. Pégalo aquí, y el formulario aparecerá aquí. Así que publica Vista previa. Y ahí lo tenemos. Ahora, como dije, en realidad necesitamos más acolchado en los laterales. Entonces necesitamos aumentar esto a tal vez 300 o 400. Ahora, digamos 300 por 300 publicar. Ahora bien, si vemos esto, Bien, me gusta ese ancho. Así que formar nuestra página de contacto en realidad está empezando a tomar forma. Si nos desplazamos, aquí está nuestra foto. ¿Qué tiene de malo esto? Refrescar. Bien, volveremos a trabajar en esto. No te preocupes. 31. Estiliza el formulario de contacto: Entonces ahora necesitamos darle estilo a esto un poco porque como pueden ver aquí, tengo unos bordes gruesos grises. Esto está ocupando todo el ancho. Entonces, ¿cómo logramos esto? Volviendo aquí y volviendo al formulador, la configuración del formulador Ahora que se agregan nuestros campos, vayamos a la apariencia haciendo clic en esta o aquí abajo apariencia. Entonces apariencia, podemos optar por ir con esto. Esto es lo que elegí para el sitio web de referencia, pero déjame ir con esto por ahora. Y queremos cambiar los colores. Usemos colores personalizados. Para el botón de enviar, quiero que utilicemos este color. Así que volviendo aquí, seleccionando esto, queremos agarrar este código de color, volver aquí. Color de fondo, eso y Oh, espera, lo pegamos aquí, y el color del texto debe ser blanco. Entonces, si lo previsualizamos, así es lo que tenemos. Ahora, recuerden, hemos seleccionado la apariencia sin bordes. Así que tenemos que darle a los campos de entrada y de área de texto algún color de fondo. Así que el color de fondo le puede dar un gris muy tenue, quizá hasta ese punto si lo previsualizo, sí, se puede ver No sé si puedes verlo, pero puedes hacerlo más oscuro si quieres, o usar unos con borde o simplemente elegir un color de borde aquí. Digamos este color, vista previa. No sé por qué no aparece. Et's eligen un oscuro un color diferente solo para previsualizarlo. Bien, no podemos establecer un color de borde porque lo hemos seleccionado sin el borde. Así que vamos a seleccionar esto. Ahora bien, si volvemos aquí y lo previsualizamos, bien. Sí, ahora el color está surtiendo efecto, pero queremos que el color sea un gris tenue Así puede introducir manualmente F 9f9f9 aquí. Vamos a previsualizar los cambios. Eso me gusta. En Ha, el color del borde simplemente debería permanecer así. Cuando está enfocado, el color del borde ahora puede ser este gris más oscuro. Esto es a lo que me refiero. Déjame mostrarte. En Ha, nada cambia, pero cuando está activo, tiene ese color de borde. Actualiza eso. Y ahora, si vamos al editor de contactos, seleccionamos el elemento short code y aplicamos, aplicaremos los cambios que hayamos realizado en el back end. Ahí vamos. Entonces como puedes ver los colores han tenido efecto, y ahora podemos previsualizar para actualizar la vista previa. Ahí vamos. Me encanta lo que tenemos, pero estas esquinas son demasiado afiladas. Me encanta que mis esquinas se vean ligeramente redondeadas así. Así que volvamos a entrar aquí. Y antes de ir demasiado lejos, quiero volver a los campos. Aquí, podemos cambiar estos textos de marcador de posición, todos estos Entonces aquí, el señor Moneybags aplicar puede venir aquí al correo electrónico y decirme en their.com aplicar puede venir aquí al correo electrónico y decirme en their.com, aplicar texto. Empieza a escribir. Aplicar. Actualización, vista previa. Ahí vamos. Por lo que el marcador de posición ha sido actualizado Y si quieres cambiar su color, puedes ir a apariencia, volver a los colores y área de entrada y texto. A ver. Marcador de posición. Entonces hay color y ahí está el color del texto. Entonces marcador de posición es este texto, pero el color del texto es cuando empiezas a escribir Entonces esos son dos tipos diferentes de texto. Para que puedas establecer el color aquí. Se puede decir que el marcador de posición debe ser ese gris tenue. Veamos cómo se ve. Así. O puedes hacerlo más oscuro. A lo mejor así. Entonces para el color del texto, puedes establecer algo oscuro o tal vez eso. Vista previa. Si empiezo a escribir, es muy visible. Actualiza eso. Y ahora, para hacer esas otras ediciones para agregar una esquina redondeada y hacer que este botón ocupe todo el ancho, necesitaremos usar CSS personalizado 32. CSS personalizado de Forminator: Así que volvamos aquí y desplazándonos hacia abajo hasta la parte inferior, tendremos un campo para CSS personalizado, habilitemos eso, y ahora tenemos un campo para ingresar algún código Y el formulador pensó con anticipación e incluso nos proporcionará algunos selectores que podríamos querer usar, por ejemplo, para afectar el área de texto, podemos seleccionar este selector Y lo que sea que pongamos dentro de estos dos corchetes se aplicará al elemento del área de texto. Entonces quiero decir radio de borde de cinco píxeles. Si lo previsualizo, ahora notarás que el área de texto tiene esa esquina redondeada, pero las entradas, estos son campos de entrada. Este es un campo de área de texto. Así que hagamos también lo mismo para los campos de entrada. Así que pon ahí los autos del ratón y Enter, luego ingresa. Entrar. Podemos copiar esto. Pégalo ahí. Vista previa. Y ahora también está redondeado. Quiero decir, ahora mismo, creo que está demasiado descolorido porque deberíamos haber hecho al menos los bordes o el más visibles al menos los bordes o el texto del marcador Entonces déjame actualizar eso antes de seguir adelante y volver aquí a los colores. Creo que el color del borde puede ser más oscuro, que oscuro. Creo que ahora se ve mucho mejor. Puede hacer que se desmaye un poco. Vista previa. Sí. Todo bien. Ahora, notarán que no tenemos selector para el botón, pero durante todos los años que he usado formator el selector para el botón El botón Enviar es siempre formulador siguiendo su convención botón enviar Entrar, botón de formador, Así que sólo voy a copiar eso, pegarlo ahí. Entrar. En primer lugar, vamos a previsualizar los cambios ahí. Y ahora, como pueden ver, también está redondeado. Pero ahora podemos decir ancho 100%, espera. Con 100% de previsualización. Ahí vamos. Ahora se ve mucho mejor. Actualización. Está actualizado, guardado. Volviendo aquí, seleccione el elemento de código corto y aplique. Y ahora, si tenemos una vista previa de los cambios, ahí vamos. Nuestra forma ahora se ve increíble. 33. Página de contacto responsiva: Todo bien. Entonces ahora, ¿por qué no seguimos adelante y lo hacemos receptivo muy rápido Entonces volviendo a esta página, hagamos que esta página sea receptiva. Cambiar al modo tableta. Como puedes ver, el padding que teníamos en modo escritorio todavía se aplica. Entonces seleccionando esta avanzada, queremos hacer esta ruptura que. Solo deja eso ahí exactamente como es. Seleccionando esto también. Vamos a romper eso. Y ahí vamos. Nada más publicar. Entonces si vemos esto, entonces Control Shift I, así es como se ve en un iPad pro. Si cambiamos a un dispositivo móvil como ese, podemos agregar algo de relleno en el lateral, así que cambiando a móvil, seleccionando esto, podemos decir romper eso. Después a la izquierda, 20 a la derecha, 20. A esto se aplica el mismo caso. Romper ese 2020. Seleccionemos esto. Podemos reducir la fuente para que sea una línea, publicar. Aquí vamos. Entonces ahora se ve increíble en un teléfono móvil. Sí. Entonces así es como crear un formulario de Wordpress usando forminator Como mencioné, formator es uno de mis plug ins de Wordpress favoritos en general Y a la hora de crear formularios, formuator es mi forma favorita plug in, sin dudas periodo. En la siguiente lección, comencemos a configurar nuestra tienda WooCommers porque ahora lo que tenemos es la página principal y la página de contacto Ahora queremos montar la tienda. ¿Cómo lo hacemos? cómo hacerlo en la siguiente lección. 34. Configurar WooCommerce: Entonces ahora es el momento de configurar Woo Comers en nuestro sitio web. Así que vamos a ir a plugins, Añadir Nuevo tipo Noll WooComers Y aquí está con más de 8 millones de instalaciones activas, así que instalaré NL. Y vamos a seguir adelante y activarlo. Por lo que abrirá un asistente de configuración por el que pasaremos paso a paso. Entonces aquí estamos. Si quieres compartir datos anónimos, puedes dejar esto encendido para ayudarlos a mejorar su plugin. Puede omitir esta configuración guiada y hacerlo por su cuenta en el tablero o continuar con este asistente de configuración. Ahora, sigamos adelante y saltemos esta configuración guiada. País donde vas a donde se encuentra tu negocio? Así que selecciona tu país. Estoy en Kenia, así que voy a escribir Kenia. Espera, ¿puedo volver? Bien, no necesitamos esa configuración guiada porque así que estoy en Kenia, voy a mi tienda Ahora bien, la razón por la que me he saltado la configuración guiada es para ayudarte a entender cómo configurar WooComas en el tablero Aquí es donde puedes continuar con la configuración. Habríamos pasado por estos mismos pasos. Entonces la primera opción aquí es personalizar nuestra tienda. Y así si hago clic en eso, vamos a ser llevados a una página. No hace falta que hagas esto porque solo quiero mostrarte algo. Vamos a usar este personalizador un poco más tarde para construir nuestras páginas de pago, nuestra página de carrito y todo eso Yo solo quería mostrarte lo que implica el primer paso. Y tienes la opción de elegir plantillas que fueron pre hechas por el equipo de Wocomer o diseñar tu propio tema Y eso es lo que vamos a hacer después. Así que volviendo, como puedes ver, el segundo paso es crear un producto, y eso es lo que vamos a hacer en la siguiente lección. Te veré en breve. 35. Crea un producto de WooCommerce: Así que ahora es el momento de crear nuestro primer producto Wocomers. Como pueden ver, ese es el segundo paso aquí. Ahora, puedo hacer clic en esto y ser llevado al lugar donde vamos a crear un nuevo producto, pero quiero que lo hagamos de la manera que vas a crear el resto de los productos porque esto es parte del mago y no queremos seguir al asistente. Quiero mostrarte cómo crear un producto cuando este mago se haya ido. Entonces productos, vamos a ir a todos los productos. En primer lugar, para ver qué tenemos aquí. Y ahora no tenemos un producto. Entonces digamos crear producto. Vamos a darle un nombre. Puedes pasar por este tour si quieres, pero, claro, te estoy llevando un recorrido prácticamente, así que no necesitas hacer eso. Ahora quiero cambiar a nuestro sitio web de referencia aquí e ir a la tienda y abrir uno de los productos aquí. Digamos este simulacro de impacto. Y quiero que creamos algo así. Entonces como pueden ver, lo primero que necesitamos es un nombre. Entonces, vamos a darle este nombre de taladro de impacto. Así que sólo voy a copiar eso. Por supuesto, para ti, vas a escribir el nombre, el producto real que quieres vender. Y ahora, esta breve descripción aquí, me gusta hacer de esto una viñeta de las características clave de este producto, viñetas y nada más. Esto es lo que llamamos breve descripción. Y entonces esta es la descripción larga. Entonces ahora quiero copiar la descripción larga, que para ti es algo que vas a escribir, pero solo estoy copiando esto para ahorrar tiempo. Entonces, con razón, copia. Volviendo aquí, descripción del producto, ahí es donde colocas esa descripción larga. Y ahora, si nos desplazamos hacia abajo aquí, tenemos la breve descripción del producto. Ahí es donde ponemos esa breve descripción. Voy a copiar eso y pegarlo aquí. Ahora, tenemos todas las herramientas comunes de edición de texto de edición de texto que pueda necesitar. Entonces, si estás escribiendo esto tú mismo, querrás usar este elemento de lista con viñetas Entonces todo lo que tienes que hacer es ingresar tipo new feature, Enter y todo eso. Solo asegúrate de activar eso. Bien, así que hazlo. Ahora también podemos proporcionar los datos del producto. Este es un producto sencillo. También puede ser un producto agrupado. Puede ser un producto afiliado y todo eso. Es un producto en nuestro sitio web que estamos vendiendo. No es un producto virtual. No es una descarga digital. Si fuera descargable, seleccionarías Virtual y descargable Virtual significa tal vez un curso en línea. Descargable, por supuesto, es un archivo que la gente puede descargar después de pagar También puedes establecer la moneda. Vamos a ver cómo cambiar moneda. este momento, se fija a chelines kenianos porque he seleccionado mi ubicación como Kenia porque he seleccionado mi ubicación como Pero puedes cambiar esto a cualquier moneda. Voy a poner ¿qué es eso? Un simulacro. Sí, tal vez 6 mil chelines En descuento, 5,500 chelines. Déjame ver qué más necesitamos por ahora porque hay ciertas cosas que quiero que cubramos en una lección separada diferente. También podemos establecer la cantidad de existencias de seguimiento de inventario para este producto. Así que cada vez que un cliente compra el producto y es un producto físico, sabes que tu stock es ahora menos por uno. En tu tienda. Por lo que el sitio web hará un seguimiento por usted. Se puede cambiar el stock de arranque que se vende individualmente. Algunas de estas cosas son cosas de las que puedes encontrar más información cuando estás aprendiendo más sobre Wocomers Lo que nos interesa en este momento es crear el producto y comprender el flujo de trabajo sobre cómo crear productos y venderlos. Puedes aprender más sobre WooComers viendo tutoriales. Entonces ahora vamos al envío. Voy a saltarme el envío porque no vamos a cubrir el envío ahora mismo. Vamos a los productos vinculados. Vamos a ver eso. No te preocupes. Atributos avanzados. Vamos a saltarnos todo eso. Lo siguiente que queremos hacer es agregar una imagen de producto. Entonces seleccionaré la imagen del producto aquí. Y es el taladro de impacto. Entonces vamos a la carpeta Activos. Este es el taladro, producto de juego abierto. Y ahora vamos a publicarlo por ahora. Para que podamos previsualizar los cambios. Y ahora enhorabuena. Has creado tu primer producto. Ahora bien, si lo miras, está sin categorizar. Es un taladro de impacto. Aquí hay una miga de pan. Es solo un camino para mostrar en qué lugar exactamente en tu sitio web se encuentra esto. Entonces tenemos nuestra breve descripción, luego la descripción larga. Y si los clientes han dejado reseñas, podrás verlas aquí. Los clientes podrán ver las opiniones aquí. Entonces, como puedes ver, esta es una página de producto simple. Si cambio a esto, notarás que también tenemos herramientas de categoría, etiquetas, y la marca aquí es inko Y tenemos esto que también te puede gustar, y este es un simulacro diferente. Pero si alguien está buscando este simulacro, podría interesarle esto. Y también tenemos un producto relacionado, que es un conjunto de llaves, lo que se debe a que todas caen dentro la misma categoría de herramientas ¿Cómo lo hacemos? Veamos eso en la siguiente lección. Ver en breve. 36. Taxonomías de productos: Entonces ahora es el momento de aprender a agregar estas categorías y etiquetas y la marca. Y estas se llaman taxonomías en el mundo Wordpress. taxonomías simplemente te ayudan a organizar tu contenido porque tus productos pueden caer en diferentes categorías Y dentro de esas categorías, podría haber subcategorías de productos De esta manera, los clientes pueden encontrar lo que buscan mucho más rápido. Entonces, ¿cómo hacemos eso? Pasemos a nuestro sitio web. Y sé, claro, que no tenemos el botón de papel en nuestros productos, y lo vamos a hacer en la siguiente lección cuando agreguemos el sistema de pago. Así que volviendo aquí al editor, como puedes ver aquí abajo, tenemos nuestro producto ahora mismo está en la categoría llamada uncategorized. Esta es la categoría predeterminada en WordPress, y nunca puedes eliminar esta categoría porque cuando eliminas otras categorías y productos habían sido asignados a esas categorías, pero los has eliminado por defecto, esos productos ahora se colocarán en la categoría sin categorizar. Por lo que no se puede eliminar la categoría sin categorizar. Ahora, mientras estás creando un producto, puedes ponerlo rápidamente en una categoría diferente haciendo clic en AdnW Por lo que esto cae dentro de la categoría herramientas. Entonces digamos herramientas y Enter. Entonces ahora desmarquemos categorizados y actualicemos eso. Vamos a previsualizar los cambios. Y ahora, como puedes ver, la categoría son las herramientas. Volviendo aquí, también podemos darle una etiqueta. Ahora bien, esto es un simulacro. Entonces, bajo herramientas, podemos tener una subcategoría llamada taladros. Las etiquetas son simplemente etiquetas para mostrar subcategorías dentro de una categoría Entonces digamos, sí, simulacros. Y puedes agregar varias etiquetas a un producto porque no solo es esto un taladro, también es un taladro de impacto. Hay un taladro sin impacto y hay un taladro de impacto, pero todos son taladros Por lo que también se puede decir taladros de impacto. Entonces si voy aquí para actualizar, y previsualizar los cambios. Ahora, como puede ver, nuestro producto tiene etiquetas llamadas taladros y taladros de impacto Si no es un taladro de impacto, no le asignamos la etiqueta o etiqueta de los taladros de impacto . Espero que estés entendiendo esto. Ahora, no sólo es un taladro, sino que es un taladro hecho por una marca específica. A lo mejor un cliente está buscando una marca específica. También tenemos esa opción aquí. Woo Comer stout adelante y dijo: Vamos a proporcionar a las personas con todo lo que necesitan para que su tienda en línea sea robusta y poderosa Entonces agreguemos una nueva marca. Digamos Milwaukee y Enter. Y ahora voy a actualizar eso, y vamos a revisar los cambios. Ahí vamos. Entonces la marca es el trabajo de comidas. A mí me encanta esto. Entonces ahora, volviendo aquí, si miramos el lado izquierdo en el menú, como pueden ver, tenemos categorías, etiquetas y marcas. Para que puedas crear más etiquetas y categorías y marcas de antemano, incluso antes de crear tus productos. Entonces veamos cómo hacerlo porque eso es muy útil, la capacidad de crear tus marcas y todas estas otras taxonomías Así que voy a crear voy a ir a categorías porque hemos actualizado esto. Cierra esto. Ahora, como puedes ver, tenemos dos categorías porque tenemos la categoría original y categorizada y la categoría de herramientas que hemos creado. Recuerda que te dije que no puedes borrar esto. Como puede ver, cuando coloco el cursor sobre esto, tiene una opción de eliminar, pero esta no tiene esa opción Ahora, vamos a crear más categorías. Digamos motos. Digamos computadoras, todo que ver con computadoras, vehículos. Creo que ya es suficiente. Al igual que lo hemos hecho aquí, también podemos ir a marcas y agregar algunas marcas. Vamos a estar vendiendo digamos la herramienta Milwaukee First. ¿Qué más? Total. Estas son diferentes marcas y Video porque vas a estar vendiendo GPU también Digamos Intel. No vendemos GPU solo de Intel, solo de NVDA, AMD. Vaya dinero, también estamos vendiendo ropa , ropa de diseñador. Entonces tenemos todas estas marcas. También podemos agregar etiquetas, pero me gusta agregar etiquetas cuando en realidad estoy editando activamente un producto específico porque ahí es cuando puedo pensar en qué etiqueta quiero darle. Pero claro, puedes escribir cualquier etiqueta que se te ocurra aquí. Entonces con eso, si voy a agregar un nuevo producto, una vez más, puedo dejarme simplemente cambiar aquí. Y si, vamos a crear esta llave inglesa. Y aquí vamos. Así juego de llaves premium. Copia eso. Para ti, vas a escribir el nombre de tu producto. Acabo de usar el mismo texto. Lo pegué en todas partes porque es solo un marcador de posición para ti. Pega eso. Tomemos también las características clave. Pégalos aquí como resumen. Vamos a darle un precio. Este es un juego de sonó premium, así que le voy a dar tal vez 3,500 chelines Se ofrece por 2,900 chelines. Y ahora, si miramos nuestras categorías aquí abajo, notarás que todas las categorías que creamos están disponibles. Este es un juego de llaves. Podemos colocarlo debajo de herramientas. Para las etiquetas del producto. Ahora bien, esto es a lo que me refería cuando dije que me gusta colocar etiquetas cuando estoy editando un producto. Se trata de llaves. Entra en eso. Para la marca, digamos que está hecha por Milwaukee. Vamos a establecer una imagen de producto. Vayamos a nuestro sistema y obtengamos la imagen del producto del set de gama premium. Ahí vamos. Vamos a publicarlo. En el momento en que guardes esto, tendrá este permalink Hablaremos de los enlaces de imprimación más adelante porque esto es muy importante para el SEO. Pero esta va a ser la URL que la gente verá aquí arriba en la barra de direcciones publicar. Revisemos los cambios. Y aquí estamos. Y la gente puede hacer clic en esto para verlo en todo su esplendor. Y como puedes ver, categoría herramientas, llaves de etiqueta, marca Milwaukee Y si bajamos por aquí, automáticamente, cualquier producto de esa categoría se enumerará aquí, pero tendremos un límite de sólo cuatro productos relacionados. Si tuviéramos tres productos más en las herramientas, estarían aquí así como esto. Déjame mostrarte aquí. Aquí tenemos dos productos relacionados en el sitio web de referencia. Entonces, como puedes ver, este es un sistema muy robusto para vender tus productos y permitir que la gente encuentre lo que esté buscando muy rápidamente, una hermosa tienda en línea. Ahora, creo que ahí es a donde vamos a llegar por ahora porque lo siguiente que quiero que veamos es cómo conectar tu tienda WooCommerce al papel para que puedas aceptar pagos. Dijimos, para cuando terminemos esta clase, debes poder vender tus productos en la vida real. Este no es un sitio web de demostración. Esta es una verdadera tienda de comercio electrónico. Te veré en breve. 37. Integración con PayPal y WooCommerce: Doy la bienvenida de nuevo. Ahora es el momento de agregar un sistema de pago a nuestro sitio web de WordPress. En otras palabras, es hora de integrar papel con Woo comers. Pero antes de que vayamos ahí, te darás cuenta aquí en mi página web de referencia, déjame simplemente cambiar aquí. Si voy a dejarme ir a la tienda, y abrir aquí este tractor de juguete. Bien, pensé que esto me había dejado volver aquí. Eso no. Pasemos a este original. Bien, quería mostrarte cómo deshacerte de esto por si acaso estás vendiendo un producto digital Puedes deshacerte de esto porque no puedes vender dos copias de un producto digital. Entonces esto no tiene sentido. Así que déjame volver a cambiar aquí. Aquí tenemos lo mismo. Para que podamos volver al producto en sí. Aquí es donde estábamos editando el juego de renta premium, y podemos decir que se vende individualmente. Es decir, limitar las compras a un artículo por pedido. Actualiza eso, previsualiza los cambios. Y ahora solo tienes anuncio a tarjeta, nada más. Porque si se trata de un producto digital, a lo mejor es un producto descargable, puedes quitarlo Pero no se trata de vender productos digitales. Por lo general, esta es la forma de montar una tienda de Wocomers. Entonces una cosa más, claro, mi sitio web de referencia tiene estas esquinas redondeadas las cuales hacen que la imagen se vea increíble, los productos aquí e incluso en la tienda, los productos tienen estas esquinas redondeadas las cuales la hacen lucir increíble. Pero en el sitio web que tenemos ahora mismo, son muy filosos. Te voy a enseñar cómo cambiar eso. Ahora volviendo aquí, para poder integrar Woo commers con papel, necesitamos agregar un plugin creado por WooCommers para integrarlo Agregar Nuevo. Plug ins añadir nuevo. Voy a escribir WooCommers una vez más, Enter. Y aquí está el enchufe en los pagos WokersPapal. Instala eso ahora. Y vamos a activarlo. Entonces aquí está, ajustes de WokmersPapal. Vayamos a la configuración. Y ahora aquí tenemos esta opción para activar el pago paypal. Entonces haz clic en eso. Estamos vendiendo bienes físicos. Si estás vendiendo bienes virtuales, esto es lo que revisas. Bienes físicos, continúe. Disponible con aplicación adicional. Sí, vamos aquí. Seleccione esto porque nos permitirá aceptar tarjetas de débito y crédito en nuestra página web. Después conéctate a papal. Esto abrirá una ventana para permitirle iniciar sesión en su cuenta PayPal. Como pueden ver, aquí tengo una pestaña payal que ya estaba abierta, pero déjame iniciar sesión Proporcione su correo electrónico y diga lo siguiente. A continuación, inicie sesión. ingresar mi código de seguridad por motivos de seguridad. Estoy usando una aplicación de autenticación. Mantente a salvo. A ver si se va a conectar. Si tu paypal Bien, estás todo listo. Estás vinculado a Woocmers y listo para recibir pagos en tu sitio Volver a WooCommers. Entonces ahora, enhorabuena. Ahora tu WooComers está conectado a tu cuenta paypal, y cada vez que alguien compra algo de tu tienda, el dinero será enviado directamente a tu Entonces vayamos a los métodos de pago. Y solo échale un vistazo. Por lo que también puedes activar esto si quieres aceptar tarjetas de crédito y débito. Pero antes de hacer eso, volvamos aquí y recarguemos esta página y veamos si vamos a llegar ahora aquí estamos, paguemos con PayPal Y si alguien hace clic, esto se abrirá. Bien, algo salió mal. Creo que es porque está tratando de iniciar sesión en mi propia cuenta de pago, lo cual no es posible Pero entonces otra vez, volviendo aquí, podemos activar los pagos con tarjeta de crédito y débito y guardar eso completado, volviendo aquí, si refresco la página, si decimos agregar a la tarjeta, Bien, ya se había agregado a la tarjeta cuando hicimos clic en Pagar con papel Entonces no hay problema porque no puede completar pago sin antes agregar el producto a la tarjeta. Pero ahora, si vamos a ver la tarjeta, como puedes ver, nuestro producto está listado aquí, y tenemos la opción de proceder a la salida. Si alguien quiere comprar más de este producto, hemos limitado la cantidad de estas personas que pueden comprar. Volvamos a solo volvamos. Debido a que aún no hemos establecido una página de tienda, tenemos que buscar manualmente diferentes productos. Quiero agregar esto a la tarjeta. Y eso es lo que debería suceder cuando aún no hayas agregado un producto a tu tarjeta. Se ha agregado a tu tarjeta. Ahora bien, si vamos a Ver Tarjeta, como puedes ver, porque esto no tiene límite a cuántos puedes comprar, puedes agregar dos, y esto se multiplicará por dos si actualizamos la tarjeta a 11,000 Ahí vamos. Y ahora si procedemos al pago, el cliente deberá rellenar estos datos. Los que están en rojo son obligatorios, incluyendo su ubicación de envío. Y también les hemos proporcionado estas opciones. Pueden usar tarjetas de débito o crédito. Si seleccionan esto, el botón cambiará a eso. Y si intentan pagar, en primer lugar, se les dará esta notificación para rellenar estos datos. Entonces creo que hemos cubierto casi todo lo que quería que cubramos. Ahora bien, si vamos aquí, cuando seleccionamos esto, apareció este botón. Pero si venimos aquí, podemos agregar una descripción de lo que queremos cuando la gente seleccione esta casilla. Entonces vamos a ver. También puedes usar tus tarjetas de débito o crédito. Haga clic en el botón de abajo. Guardar los cambios. Guarde eso. Y ahora, si vamos aquí y refrescamos la página, veamos qué obtenemos. Aquí estamos. También puedes usar tu tarjeta de débito o crédito. Haga clic en el botón de abajo. Exactamente. Creo que básicamente así es como configurar tus pagos. Por supuesto, aquí hay muchas más opciones sobre lo que debes hacer. A ver. Configuración de WooComers. Vayamos a la configuración. Bien, si vamos a bajo General, realmente no quiero que nos detengamos demasiado en esta parte porque aquí hay tantos escenarios que harían esta lección demasiado larga Pero siempre y cuando haya conectado sus wcmers al papel, y esté mostrando sus productos, y pueda agregar productos a su carrito, y la gente pueda ir al carrito y pagar eso es todo lo que necesita para comenzar Entonces puedes ver más tutoriales entendiendo lo que hacen todos estos ajustes. Pero veamos si podemos encontrar algo extra para cambiar, como la moneda. Recuerden, íbamos a cambiar moneda, diré USD. 38. Configuración de WooCommerce: Bien, puedes establecer dónde se establecen las comas y los puntos Puedes establecer tus descuentos de cupones. Puede habilitar las tasas impositivas y los cálculos. Puedes habilitar ubicaciones donde vendes o donde no vas a enviar. Puedes establecer todas estas cosas que creo que son bastante obvias. Déjame guardar los cambios. Sólo nos estamos apresurando. Sólo estamos amando a través. Vayamos a los productos. Creo que aquí tenemos algunas cosas más importantes de las que hablar. Tenemos algunas cosas que podemos ver aquí. Redirigir a la página de la tarjeta después de la adición exitosa. Eso significa que cada vez que alguien hace clic, volvamos a Sé que la página de la tienda debe ser barra SHOP Si entro en eso. Sí, vamos a ver cómo agregar esta tienda al menú. Pero si agrego un producto a la tarjeta, recuerda, estos ya están agregados a la tarjeta, así que no puedo agregarlo. Voy a recibir un mensaje de error. Así. Pero cuando agregas un producto a la tarjeta, tal vez quieras agregar más productos a la tarjeta. No desea ser redirigido a la página del carrito tan pronto como agregue solo un producto a la página de la tarjeta a la tarjeta Así que no habilites esto. Uh, vamos a ver. ¿Qué más? ¿Puedes establecer tus unidades de peso y habilitar reseñas de productos? Sí. Las opiniones solo pueden ser dejadas por propietarios verificados. Quiero que solo las personas que hayan comprado y usado mi producto dejen reseñas. Y mostrar la etiqueta de propietario verificado en cualquier reseña que deje un cliente, demuestre que se trata de un propietario verificado, alguien que compró el producto. Habilita la clasificación por estrellas. Las calificaciones por estrellas deben ser requeridas, no opcionales. Antes de que alguien pueda dejar una reseña, tiene que dar una calificación de estrellas. Creo que esos son muy buenos escenarios importantes. Aquí, cuando instalamos WooComers, automáticamente creó una página llamada Shop Shop Y así es como supe que va la página de la tienda es Shop. Así que asegúrate de que eso es lo que se selecciona aquí. Vamos a Si estás vendiendo productos descargables, aquí es donde debes ir Inventario. A ver eso. Otra cosa que quiero que tengamos en cuenta aquí es, volvamos a lo general Habilitar Ajax agregar a botones de tarjeta en archivos. Cuando decimos Ajax enable Ajax add to card, nos referimos a que cuando añadimos a la tarjeta, no refresquemos toda esta página. Simplemente agregue a la tarjeta y deje que la persona continúe comprando. Entonces, si hago clic en Agregar al carrito, solo conseguiremos un pequeño mensajero, Agregar al carrito marque. Se ha agregado. Eso es lo que queremos decir con activar los botones Ajax Agregar al carrito. Si lo desactivo, guarda los cambios y vuelve a la tienda. Vamos a la página del carrito, que no he agregado el enlace de aquí. Vayamos al carrito. Ahora, déjeme quitar eso del carrito. Y ahora volvamos a la página de la tienda. Creo que fue la llave inglesa. Si agregamos al carrito, se recarga toda la página de la tienda Entonces eso es lo que estábamos evitando. Entonces, ahí vamos. Guarde eso. Pagos de envío, estábamos dentro de los pagos. ¿Qué hay dentro de Advanced? Puedes configurar todos los correos electrónicos que los clientes recibirán automáticamente cuando compren un producto, puedes editarlos. Pero como mencioné, no queremos que esta lección sea demasiado larga. Ahora tiene una base sólida crear un producto WooComers y agregar todas las taxonomías y descripciones de productos relacionados y también integrar Ahora, una última cosa que quiero que veamos es Dentro de aquí, también puedes, como mencioné, cuando estés viendo un producto, por ejemplo, esta gama, tiene productos relacionados. Esos son productos que comparten la misma taxonomía. Pero también puedes recomendarte ciertos productos tú mismo. Lo haces manualmente cuando estás editando un producto, así podrías venir aquí y decir productos vinculados y buscar un producto. Digamos ¿qué productos tenemos aquí? Ahora voy a usar los productos que hemos creado porque es un ejemplo, Impact, empieza a escribir Impact drill. Entonces es posible que desee aumentar la venta. Entonces tal vez este sea un tipo de GPU más caro, así que puedes venderla cuando alguien esté viendo la página del producto de esta GPU más barata Así que actualice eso. Y ahora si tenemos vista previa de los cambios y nos desplazamos hacia abajo, Ahora bien, la suposición aquí es que este es un tipo más caro del mismo producto aquí, porque estás upselling, espero que entiendas esa analogía Ahora con eso, quiero decir felicitaciones. Ahora tienes una tienda que puede aceptar pagos. Ya puedes empezar a vender tus productos. En la siguiente lección, veamos cómo trabajar dentro de la página de la tienda. Sí, hablemos de la página de la tienda. Te veré en breve. 39. Página de la tienda: Quiero que hablemos de la página de la tienda. Entonces si puedo cambiar a tienda, aquí estamos. Ahora, una cosa que notarás es que si me desplazo hacia abajo, tenemos este pie justo aquí. Entonces podemos comenzar quitando esto. Pero antes de hacer eso, vamos a cerrar todas estas otras cosas. También quiero cerrar PayPal. Entonces volvamos al tablero. Déjame cerrar eso también. Volviendo al tablero, vamos a las páginas. Y como mencioné, cuando instalamos Woo comers, automáticamente generó algunas páginas para nosotros que son relevantes como la página de la tarjeta, la página de pago, la página de mi cuenta, la página de la tienda Así que vayamos a la página de la tienda y editemos. Ahora bien, si vamos aquí a la configuración de Astro, deshabilitemos los elementos, deshabilitemos estos y digamos guardar. Ahora si vemos la página, deberíamos haberla visto. Ahí vamos. El pie de página de Astra se ha ido porque tenemos nuestro propio pie de página. Ahora, siento que debería agregar algunos productos más aquí porque quiero que esta página sea un poco más larga. Entonces podría adelantar esta parte a medida que creo algunos productos más, te sugiero que hagas lo mismo, luego volveré en breve. Entonces estoy haciendo un avance rápido en esta parte. Así que acabo de terminar de crear estos productos adicionales, así que permítanme cerrarlos ahora. Y ahora, si refresco la página de la tienda, ahora tenemos varios productos. Ahora podemos ir a personalizar. Y ahora eso nos llevará a los ajustes de front-end Astra. Como mencioné, cuando haces clic en Personalizar, te llevan a la configuración de Astro. Y Astro será lo suficientemente inteligente como para ir automáticamente a la configuración de la página específica que estés viendo. Entonces ahora mismo porque estás en la página de la tienda, nos ha llevado al lugar donde podemos editar el diseño de la tienda. Entonces podemos cambiar a este diseño uno. Y ahora se ve un poco diferente. No es una diferencia tan grande. Todo bien. También puedes limitar la cantidad de productos que deseas por página. Entonces ahora tenemos ocho. Si tuviéramos 13 productos, obtendríamos automáticamente lo que llamamos paginación Entonces déjame mostrarte en este sitio original aquí. Si cambiamos a la página de la tienda, porque tengo más de 12 productos en mi página, podemos pasar a la página dos. Y ver más productos ahí. Tantas páginas como Wo Camers necesite para mostrar sus productos. Así podrás limitar la cantidad de productos que muestres por página. ¿Qué más tenemos que mirar? Mostrar productos, mostrar categorías, mostrar estos son ajustes con los que puedes jugar más adelante. Siempre y cuando tengas una tienda que muestre tus productos, eso es todo lo que necesitas por ahora. ¿Qué más es el diseño de la barra lateral? No, nuestra página no tiene barra lateral, así que eso no es relevante para nosotros. Área de título de productos. No sé qué es eso, y creo que es una tarea que puedes trabajar en ti mismo. Vamos a encenderlo para ver qué trae a colación. Creo que eso lo agrega . No veo qué otros cambios agrega. A mí me gusta así. Entonces ahora, notarás que aquí también podemos cambiar los colores. Entonces, antes que nada, déjame hacer clic en Publicar para guardar los cambios que hicimos, luego volver. También podemos ir a la página de un solo producto para editarlo si cambiamos ahí y tal vez abrimos este producto. Y notarás algunos de estos ajustes aquí. Este diseño del contenedor y el diseño de la barra lateral estilo contenedor son los mismos ajustes que establecemos aquí. Entonces, si vamos a productos, abramos este taxi de juguete. Esos mismos ajustes están aquí abajo, diseño de contenedor, pero no toco esto porque me encanta la forma en que se ve la página sin tocarla. Entonces veamos lo que tengo de mis productos aquí. Me tomé un tiempo para perfeccionar realmente cómo quería que se viera. Entonces eso es lo que tenemos. Esto es CSS personalizado. Te voy a enseñar cómo hacer eso, pero en una lección posterior. Entonces volviendo a nuestra página de tienda, ¿podemos volver ahí sin salir del editor? No, así que personaliza. Creo que hemos cubierto todo lo que quería que cubramos en la página de la tienda. Excepto una cosa. Recuerdo los colores. Entonces volviendo a lo global, pasemos a los colores globales. Aquí es donde puedes cambiar los colores generales de tus páginas, las páginas que no has editado con elemento. Esta no es una página elemental. Entonces, por ejemplo, veamos qué cambia el acento, enlaces. Eso no cambia. ¿Qué pasa con el acento? Bien, así que ahí vamos. Ahora, queremos usar este color. Entonces voy a elegir el selector de color, elegir color e ir a arrebatar un pixel ahí, copiar ese Vamos a pegarlo ahí dentro. Ahora, esto tendrá el color de nuestro sitio web. Cambiemos los enlaces. Démosle ese blanco. Bien, esto es tan limitante. Por eso necesitamos CSS personalizado, porque ahora como puedes ver, estos botones, no puedo ver en ningún lado para cambiar el color de este texto de botón. Espera. ¿ Me estás diciendo que no puedo cambiar los colores de los botones? Volvamos. Bien, entonces aquí estamos los botones. ¿Podemos cambiar el color del texto? Sí. Queremos que sea blanco así. Muy bien, podemos establecer el color de fondo. ¿Podemos cambiar ese color de fondo desde aquí? Oh, bien. Entonces esos otros eran los colores generales, pero ahora somos muy específicos sobre qué elemento vamos a establecer. En el otro lugar, estábamos configurando el color general del tema. Pero aquí, somos muy específicos sobre el elemento, el botón. Color de borde, no necesitamos jugar con el color del borde. Pero ahora quiero que usemos ese mismo color que había seleccionado aquí solo para mantener la consistencia de la marca. Color de fondo. Pégalo ahí dentro. En Hova, puedes darle este color azul. Así que elige el color. Pixel azul. Entonces, el color de fondo en Hover debería ser ese azul, así. Consistencia de marca. Bien, entonces déjame cerrar eso. Y ahora creo que ya terminamos con la página de la tienda. Una cosa más antes de irnos. Vamos a agregarlo también al encabezado. Seguimos olvidando eso. Entonces, si voy a este lugar, cursor sobre eso y encabeza De hecho, ni siquiera necesitamos ir ahí. Así que déjame parar eso y volver. Pero aquí dentro, vayamos a los menús de apariencia porque necesitamos agregarlo como elemento del menú. Tienda, agregar al menú. Y ahora vamos a arrastrarlo justo después de aproximadamente o suelo mantener mis páginas sobre al pie, no los encabezados. Pero en fin, dejémoslo ahí. Algunas personas prefieren que se quede en la cima. Entonces si volvemos aquí y recargaremos el enlace derecho, ahora tenemos la página de la tienda, y porque es la página activa, es de este color Y de hecho, siento que estos colores deberían ser consistentes con el color de una marca. Ahora bien, este es un sitio web muy básico. Tienes todo el tiempo del mundo para que se vea exactamente de la manera que quieres. Elemento del menú. Vamos al color del texto del artículo. Elige el color. Quiero este azul. Copia eso, pegarlo ahí, publicar. Vista previa de los cambios. Ahora se ve así. Vamos a la página de la tienda. Y algo que olvidé es quitar la página principal. Retirar y guardar. Ven aquí, vuelve a cargar la página Y a estas alturas, es bastante obvio cuando quieres ir a la página de inicio, solo tienes que hacer clic en el logotipo. Entonces, si hacemos clic en el logotipo, nos llevarán a la página principal. Ahora, desde que creamos nuestros productos, recuerde que mencioné en una lección anterior que agregaríamos productos destacados a nuestra página de inicio para permitir que la gente vea rápidamente el producto destacado. Entonces, ¿cómo hacemos eso? Veamos eso en la siguiente lección. Ver breve. 40. Productos destacados de la página de inicio: Como mencionamos en una lección anterior, queremos ver cómo agregar esta sección de productos destacados a nuestra página de destino. Entonces cambiando a nuestro editor aquí mismo, se supone que debemos agregarlo justo debajo de esta flecha. Entonces editaré con Elementor para que podamos editar la página. Y aquí vamos. Entonces solo quiero duplicar esto así que ahora tenemos un contenedor extra justo debajo. Suprimir eso. Y agreguemos un contenedor para contener los productos destacados. Como es habitual, hagamos esto al 100% con y hagamos el contenedor interior, 80% del espacio. Entonces volvamos al exterior y lo pongamos en el medio. Ahora bien, si quieres exhibir grid de productos Wu comers, si vamos aquí a plus y decimos, Wu, notarás que estos no son elementos libres No podemos arrastrarlos y colocarlos aquí mismo. Pero eso no es problema. Si cambiamos a una página que había abierto con anticipación, Woo Camers nos proporciona códigos cortos para mostrar nuestros productos de diferentes maneras y mostrar el carrito, la página de pago, todos estos Recuerda cuando queríamos mostrar la página de contacto, si me cambio a la página de contacto aquí, usamos el código corto que forminator nos proporcionó para mostrar el formulario que creamos en el back end Puede hacer lo mismo aquí con los productos Woo comers. Entonces aquí, digamos categoría de producto. Estoy buscando productos destacados. No puedo ver productos destacados. Digamos productos. Volviendo aquí, seleccionaré esto y diré código corto, para que podamos agregar un elemento de código corto y soltarlo ahí. Entonces voy a pegar eso ahí. Y aquí estamos. Ahora, tenemos demasiados productos exhibidos. Entonces aquí, puedo crear un espacio y decir, limitar es igual, digamos, cuatro. Y ahora sólo mostrará un límite de cuatro productos. Publica eso. Ahora el problema con este elemento es que no nos proporciona una forma de editar estos elementos a menos que me haya perdido algo aquí. No proporciona una forma de editar estos productos. Veamos qué tengo en mi página web de referencia. Así es como se ve eso en mi sitio web de referencia, pero así es como se ve en nuestro sitio web. En primer lugar, permítanme seleccionar el contenedor aquí y crear algo de espacio, margen inferior de 100 publicar y ahora si previsualizamos los cambios, desplazándonos hacia abajo, ahí vamos Bien. Entonces ahora no quería que los botones se vieran tan amplios. Y sí, así que esto es lo que quería. Pero creo que podemos hacer esto. Creo que usé 60% en el otro sitio web. Para asegurarse de que no ocupe demasiado espacio aquí. Sí, algo así, algo más compacto. Y no me gusta este efecto hover aquí, así que tendremos que cambiar esto aquí Pasemos a los botones globales. El color del texto en Hover también debe ser blanco. Eso significa que si flojo, queda blanco. Publicar esos cambios. Y dejemos este lugar. Y ahora, ahí vamos. Vamos a crear algo de espacio aquí. No me gusta ese margen superior. Entonces margen superior de digamos 100 publicar. Y ahora vamos a previsualizar los cambios. Ahí vamos. Oh, tenemos que agregar alguna rúbrica ahí. Entonces si duplico eso arrástrelo ahí arriba. Ven aquí y duplica eso, arrástralo ahí. Y si, vamos a borrar esto. Y quiero darle estilo y ponerlo en el centro. Toma este centro, selecciónalo contenido. Permítanme decir productos destacados. Creo que hay un código corto para los productos destacados. No sé por qué los códigos cortos de categoría de productos. No sé por qué no puedo encontrar un código corto para eso. Veamos si efectivamente existe. Permítanme decir subrayado destacado. Productos destacados de subrayado. No, WooComers no proporciona eso, pero puedes crear una categoría llamada productos destacados Y mostrar esa categoría. Así categoría de producto. Todo bien. Finalmente lo deshice. Finalmente podré construir la categoría de producto que quiero. Entonces vas a usar la categoría de guión bajo del producto, luego especifica el número de categoría, luego cuántos productos quieres mostrar Entonces volviendo aquí, todo lo que necesitas hacer es ir a categorías y abrir una categoría específica. Por ejemplo, ahora mismo, he abierto herramientas, entonces herramientas, digamos, edita, y una vez que lo digas, mira tu barra de direcciones y mira la categoría y el ID de etiqueta, que es 18 para mí solo para la categoría de herramientas. Entonces volviendo aquí, entonces categoría 18 y luego limitarlos a cuatro. Pero recuerden, solo tenemos dos herramientas que creamos. No creo que haya colocado los otros productos en el otro taladro en la categoría de herramientas. Ni siquiera tengo otro simulacro. Entonces solo tenemos dos simulacros. Pero si, por ejemplo, rápidamente edito esto y cambio la categoría a herramientas. Herramientas también y actualizar eso. Entonces también cambia esta categoría futurista e bike herramientas, actualízala Ahora tenemos cuatro productos en la categoría de herramientas. Si vuelvo aquí y aplico esto para aplicar cualquier cambio que hayamos hecho en el back end, ahora deberíamos tener cuatro productos en esa categoría. Aunque tuviéramos diez porque ya especificamos queremos un límite de cuatro, sólo vamos a ver cuatro aquí. Publicar. Hubo una intensa solución de problemas ahora al menos he aprendido a construir mis propios códigos cortos de categoría de productos. Estoy muy contento de haber tenido ese reto, y también me has visto solucionar esto en tiempo real Entonces ahora, aquí vamos. Esto me encanta, hombre. Estoy sintiendo esto. Estos productos son demasiado caros, pero no hay problema. Establezca el precio correcto. A continuación, último consejo rápido que quiero mostrarte es, si vas a la tienda, y abres No, no abramos un producto. Bien, vamos a abrirlo, y vamos a agregarlo a la tarjeta. Creo que ya lo habíamos agregado. Ahí vamos. Entonces vamos a la tarjeta. Entonces obviamente, quería mostrarte que obviamente también puedes editar esta página yendo al personalizador, serás redirigido automáticamente al Bien, para que puedas cambiar el texto del botón de la tarjeta, puedes decir, agregar a la canasta o algo así, luego habilitar las ventas cruzadas. No he jugado con eso. También puedes ir si vamos a proceder a la compra, ahora, también puedes eliminar algunos de los campos que no necesitas aquí, así que vas a pagar. El nombre de la empresa es opcional. La línea de dirección dos se puede ocultar. No es necesario mostrar la línea de dirección dos. También puede ocultar el nombre de la empresa. Si no quieres ver si no quieres que el cliente muestre el nombre de la empresa, se requiere el campo Teléfono, tal vez. Puede ser opcional u oculto. Resalte los campos obligatorios con un asterisco. Ahí vas. Puedes enlazar a tu página de política de privacidad. Yo seleccionaré eso. Puedes vincularte a tus términos de uso. Y ahora esto permitirá a los clientes leer y aceptar aquí sus términos y condiciones antes de comprar a su empresa. Tan cerca eso. Y ahí vamos. Entonces creo que ya es suficiente. Por ahora, al menos hemos actualizado nuestra página de inicio con la categoría que queramos. Ahora recuerda, si quieres una categoría diferente llamada productos destacados destacados, irás a categorías y dirás productos destacados, Enter. Y ahora aquí estamos, y necesitas asignar esta categoría a diversos productos que deseas hacer los productos destacados. Y entonces, claro, ahora si editamos estos productos destacados, como puedes ver, su ID es el número 45. Entonces, si vas aquí al front end, la categoría aquí será la categoría 45. Entonces espero que entiendas cómo jugar con los códigos cortos ahora. Entonces así por ahora, te veré en la siguiente lección cuando estemos hablando de agregar esta barra de búsqueda en la parte superior, porque queremos que la gente pueda buscar GPU o algo así Como puedes ver, tenemos esta búsqueda automática Ajax search. Y si presiono Enter, podremos ir a ver resultados de búsqueda que solo tengan GPU. Entonces, ¿cómo hacemos eso? Veamos cómo agregar eso en la siguiente lección. 41. Búsqueda de productos en WooCommerce: Ahora queremos trabajar en esta barra de búsqueda. Permítanme volver a nuestro editor o a nuestro sitio web, y permítanme simplemente previsualizar e ir al front-end. Para agregar una barra de búsqueda, necesitamos usar un complemento muy agradable llamado Ivory search. Así que vamos a enchufar, Agregar Nuevo. Y aquí dentro, voy a buscar marfil. Y aquí estamos Vinod Dalvivory búsqueda. Entonces instala eso y vamos a activarlo. Vamos a saltarnos esto. Y aquí estamos, Ivor investiga Vayamos a la configuración. Y por defecto, se nos dan varios formularios de búsqueda. Y el que queremos es Ajax formulario de búsqueda para Wocmers. Entonces como ya puedes adivinar, ya tenemos este código corto que podemos usar para mostrarlo en el front end. Entonces voy a copiar ese Control C. Déjame cerrar. Espera, estamos exactamente donde queremos estar. Así que abre el editor de encabezado. Entonces déjame cerrar eso. Obviamente, solo vas aquí ho sobre esto y luego encabezado Así que déjame cerrar eso de todos modos. ¿Qué es esto? Cierra eso. Y ahora aquí estamos. Recuerda, originalmente teníamos tres columnas. O sea, teníamos tres contenedores, pero eliminé uno y mencioné que luego volveríamos y lo agregaríamos. Así que duplicaré eso. Entonces ahora tenemos tres, y voy a borrar todo desde adentro aquí. Después voy a añadir un código corto. Y luego deja caer ese código corto ahí mismo, como puedes ver el código corto que acabamos de pedir prestado aquí Entonces mientras esto todavía está seleccionado, voy a entrar en Ancho avanzado. Vamos a darle un ancho personalizado de tal vez 80% y publicarlo y previsualizar los cambios. Entonces así es como se ve en este momento. Y me gusta, por cierto, pero no dijimos explícitamente qué ancho deberían ocupar. Así que vamos a hacerlo tal vez el 40%. Esto es 20, si no me equivoco, 40 más 20, 60, así que esto debería ser del 40%. Publiquemos y veamos qué tenemos cambiando aquí. Bien, no hay diferencia. A ver si podemos hacer que este 30% publique y vea lo que tenemos. Todo bien. Ojo de control para seleccionar el contenedor que los sostiene este contenedor, y queremos asegurarnos de que estos estén espaciados uniformemente entre ellos, así como así. Publica ese espacio entre cada contenedor. Y ahora creo que está bien posicionada. Me encanta donde está. Entonces yendo a la página principal, ahí vamos. Entonces, ahora podemos buscar un producto. Digamos que tenemos llave premium. Así que solo busquemos llave inglesa. Automáticamente hará una búsqueda y nos mostrará. Esto es lo que queremos decir con Ajax. Recuerda, te dije que hicieras lo que esperabas que hiciera sin recargar la página Entonces es hacer la búsqueda sin recargar esta página para permitirnos ver si esto es lo que estamos buscando Bien, déjame buscar GPU, GPU. Sí, si hay varios productos por el nombre o que tienen el nombre que estás buscando, se mostrará la página de resultados de búsqueda. Pero si solo existe un producto que tenga el nombre que estás buscando, solo mostrará ese producto directamente. Va a ir a la página de un solo producto. Entonces, si busco tractor, porque no tenemos ningún otro tractor en el sitio web, solo nos llevará al único producto con el nombre Tractor. Pero como tenemos más de una GPU, si busco GPU, nos mostrará la página de resultados de búsqueda que podamos elegir la GPU específica que queremos elegir. Entonces, básicamente, así es como agregar una funcionalidad de búsqueda más robusta y poderosa a su sitio web WooComers para permitir a los clientes obtener lo que quieran encontrar A ver. Me gusta mucho esta búsqueda. ¿Qué más agregamos? Una bicicleta. A mí me gusta este Ajax. Mira que te da todas las descripciones, y puedes decidir si esto es lo que quieres de antemano. Entonces eso es algo muy bueno. Debido a que solo tenemos una bicicleta, será llevada a la única página que tenga la bicicleta en ella. Y recuerda que cambiamos las categorías. Entonces sí, creo que ese es un lugar increíble para terminar esta lección. En la siguiente lección, veamos ahora cómo usar CSS personalizado para agregar algunas esquinas redondeadas alrededor de las imágenes del producto. Y recuerda, si volvemos a nuestro sitio web de referencia, esta barra de búsqueda tiene algunas esquinas redondeadas y el icono de aquí se ve mucho mejor. Creo que podemos mejorar esto. A algunas personas les gusta con esquinas afiladas como esta, puedes dejarlo así. Pero veamos cómo hacerlo en la siguiente lección. 42. Esquinas redondeadas de miniaturas de productos individuales: Yo así que ahora veamos cómo usar CSS personalizado para cambiar el estilo de los diferentes elementos que no podemos editar con los plugins que usamos para crearlos. Woo Commerce no nos proporciona una manera de editar sus propias imágenes de productos y darle esquinas redondeadas. La búsqueda en marfil no nos da la posibilidad de hacer esto. Oh, espera. Si voy a Diseño, ¿nos da esa opción, por cierto? Diseño. Si digo personalizador de formularios de búsqueda, se abrirá el personalizador como se puede ver, estas son las tres opciones que tenemos Este es el cargador, como viste aquí cuando automáticamente está buscando algo. Entonces como puedes ver, no tiene un lugar para establecer qué tan redondeadas son las esquinas. Puedes cambiar lo que esto dice, buscar productos. Sí, busca productos. Y agreguemos un punto extra aquí para que sea una elipse. Y también puedes decidir eliminar este ícono si quieres, lo cual creo que es muy genial. Pero antes de hacer eso, solo quería mostrarte cómo logré este objetivo usando CSS personalizado. Entonces ahora publiquemos eso. Y ahora, yendo a la parte delantera, sé que ya estamos aquí, y si vuelvo a este punto, ya estamos aquí. Pero recuerda, para llegar ahí, solo tienes que ir a personalizar. Y va a abrir el mismo lugar porque lo que queremos es este CSS adicional. Aquí es donde podemos agregar CSS adicionales. Atrás y atrás, CSS adicional. Podemos agregar CSS aquí de la misma manera que lo agregamos formulario de contacto. Si voy a editar, cuando fuimos a apariencia, fuimos a CSS personalizado y agregamos algunos CSS personalizados para afectar cómo se ve el formulario en el front-end. Entonces podemos hacer lo mismo por cualquier otra cosa aquí. Entonces ahora, para seleccionar esta imagen, necesitaremos usar Control Shift I para abrir la consola, y quiero salir del diseño responsive. Y cuando selecciono este inspector, puedo pasar el cursor sobre diferentes elementos HTML, incluida la imagen Y si lo selecciono, nos proporcionará el selector de imagen. Este es el selector de imágenes, y podemos probar qué efecto tendrá nuestro código CSS en él agregándolo aquí a su CSS. Entonces si digo radio de borde de cinco píxeles. Ahora tiene cinco píxeles. ¿Y qué pasa con 20? Porque eso es lo que quiero. Así se verá. Entonces todo lo que tengo que hacer es copiar este selector. Copia del enlace derecho. Esto no tiene ningún efecto en su sitio web. Eso es solo para probar mientras trabajas. Pero cuando vuelvas a cargar esta página sin la consola, los cambios que habías hecho aquí no surtirán efecto Entonces ahora entrando aquí y pegando ese selector y agregando nuestros corchetes, puedo decir radio de borde Es ahora, déjame simplemente eliminar este radio de borde que usamos para probar para que puedas ver el código real que surtirá efecto, 20 píxeles. Ahora, ahí vamos. Termina con un semiclón, publica eso. Ahora bien, si cierro la consola, y permítanme simplemente dar clic derecho y abrir este enlace en una nueva pestaña y abrir esta. Ahora hemos ido a la página de la tienda, pero si abro algún producto aquí, tendré esas esquinas redondeadas. Lo configuramos en este producto específico para bicicletas, pero se aplica a cada producto. Bien, lo siguiente que quiero que hagamos es mirar la página de la tienda Esto es muy gracioso porque en esta lección, quería que miremos cómo hacer que la barra de búsqueda tenga esquinas redondeadas, pero hemos terminado haciendo lo que estaba planeando para la siguiente lección. Hagamos las dos ahora. 43. Barra de búsqueda para esquinas redondeadas: Así que volviendo aquí a nuestro editor, Control Shift I para abrir la consola. Podemos hacer lo mismo seleccionar este inspector y seleccionar la barra de búsqueda. Ahí vamos. Aquí está su selector. Si voy ahí y digo radio de borde, tabulador 20 pixeles. Como puedes ver, ha cambiado en tiempo real. También puedo hacer lo mismo para el icono, seleccionar el área verde. Y ahora este es el icono, como pueden ver, seleccionaré así todo el selector, correctamente Copiar vamos a pegarlo ahí, y me olvidé de hacer lo mismo para esto. Pero de todos modos, no hay problema. Radio de borde. Déjame copiar eso y pegarlo ahí. Como pueden ver, está surtiendo efecto, pero aquí mismo no hemos hecho lo mismo con esto. Entonces seleccionando esto y volviendo aquí. Aquí estamos. Esto es. Copia. Eliminemos esto porque no nos está ayudando. Así que ahora ha vuelto a la normalidad. Pero ahora si voy aquí y pego eso los corchetes, radio de borde de 20, ahí vamos. Entonces ahora tiene esa esquina redondeada. Pero ahora podemos agregar un margen a la izquierda pestaña, dos puntos, margen izquierdo en este icono. Queremos agregar un margen para alejarlo un poco. Entonces digamos diez células pe. Como puedes ver, lo hemos movido por diez píxeles. Semi colon. Podemos mover este margen pestaña derecha cinco px Todo bien, no está teniendo efecto, pero no hay problema. Vamos a cerrar que publicarlo. Y ahora si cierro eso abajo, no hace falta cerrarlo, pero ahora si recargo esto, así que ahora así es lo que parece Por último, hagamos la página de la tienda. 44. Esquinas redondeadas en miniatura de la página de la tienda: Así que volviendo aquí y seleccionando la tienda porque ya publicamos los cambios. Ahora Control Shift I. Ahora también vamos a seleccionar el inspector y seleccionar esta imagen. Como puedes ver, este es el selector. Correcto copiar Vamos a pegarlo ahí dentro. Corchetes, corchetes. Copia eso. Coloquemos eso ahí dentro. Ahora tienen esa bonita esquina redondeada. Así que publica esos cambios. Vamos a cerrar a este inspector. Y ahora, si voy aquí y refresco la página, Muy bien. Refresco duro. Yo solo Control RD, pero ahora Control Shift R. Bien, no sé qué está pasando Déjame ir a la página principal. Desplazamiento hacia abajo. ¿Por qué esto no ha entrado en vigor? Creo que necesitamos un plugin de almacenamiento en caché, pero Control Shift R una vez más. Ir a la página de la tienda. Podría hacerme instalar un complemento de almacenamiento en caché, y estaba planeando mostrarte cómo usar un complemento de almacenamiento en caché en la siguiente lección Pero ahora, ¿y si voy a agregar nuevo plug in? Todo bien. Volvamos a entrar aquí. Control Shift E. Refrescar duro aquí mismo en esta página para ver si los cambios han entrado en vigor. Si entran en vigor en esta página, entonces significará que probablemente tengamos un problema de almacenamiento en caché Es decir, el navegador ya ha almacenado el navegador guarda una copia de cada página que cuando alguien navega a esa página, se le pueda servir rápidamente sin tener que volver a cargar esa página desde el servidor Y así nos van a servir la página que tenía estas esquinas afiladas, a pesar de que hemos hecho cambios en esa página. Entonces esta es la página que está en el servidor, pero esta es la página que está guardada por las cookies en nuestro navegador. Y por eso seguimos viendo esto incluso cuando nos refrescamos. Controle nuestro Control Shift R para refrescar duro. Ahora, probemos con un enchufe de almacenamiento en caché. Entonces aquí, iré al caché de velocidad de la luz e instalaré eso. Y vamos a activarlo. Bien, ahora, pasa el cursor sobre esto y purga todo. Bien, así que hemos purgado todos. Entonces, si escribo link y abro Link en Nueva pestaña y voy a la página principal, veamos qué tenemos. Exactamente. Ahora los cambios han tenido efecto porque nos hemos deshecho de la caché local que estaba almacenada en el navegador. Entonces si vamos a la página de la tienda, ahora todo tiene ese bonito rincón redondeado. Me encanta este ejercicio de solución de problemas porque enfrentarás muchos problemas y problemas mientras trabajas en tus sitios web, y necesitarás poder solucionar problemas y averiguar cuál es el problema Entonces me alegro de que hayas podido verme luchar con esto. Y eso marca el final de la construcción de tu sitio web. Ahora tienes un sitio web WordPress completamente funcional, tienda de comercio electrónico, y puedes vender tus productos a cualquier persona en todo el mundo. Pero claro, hay muchas más cosas que seguirás aprendiendo a medida que construyas tu sitio web y lo hagas más robusto. Ahora, en las próximas lecciones, que son lecciones extra, vas a aprender algunas de las cosas más importantes para que tu sitio web sea mucho mejor, mucho más potente, mucho más confiable. Estamos hablando de seguridad. Estamos hablando de enlace permanente. Entonces estamos hablando de una de las cosas que se suponía que debía cubrir en las lecciones de bonificación es el almacenamiento en caché Acabas de aprender sobre el almacenamiento en caché. Entonces, en las lecciones extra, vamos a equiparte con aún más consejos y trucos para convertirte en un Gurú de WordPress. Te veré en breve. 45. Sitio web en caché: Así que ahora veamos consejos y trucos adicionales para convertirte en un Gurú de Wordpress. Pero claro, estos son solo consejos y trucos básicos. Aún necesitarás profundizar en Wordpress para entender cómo usar los diferentes complementos disponibles. Recuerda, tenemos más de 59.000 plugins gratuitos en el directorio de plugins de Wordpress WordPress Eso significa que incluso hoy, estoy aprendiendo cosas nuevas sobre Wordpress y tú también deberías. Pero ahora uno de los consejos, como mencioné es el almacenamiento en caché Y ahora, si volvemos al tablero, déjame cerrar todas estas otras partes hacia abajo. Así que vamos a Agregar nuevo. Y voy a escribir Cache, Enter. Entonces, como puedes ver, tenemos varios complementos de almacenamiento en caché. Muchos de ellos son muy populares. Y como pueden ver, la velocidad de la luz es una de ellas, y ya la agregamos. Entonces puedes agregar cualquiera de estos otros si quieres. WP Optimize también es muy impresionante, pero tenemos que elegir uno. No necesitamos tener dos de ellos. Y cada vez que hagas cambios en tu sitio web, solo ven y di purgar todo. Eso es todo lo que hago cuando estoy trabajando en mi sitio web de Wbress No entro para cambiar todas estas otras configuraciones, pero puedes ir a YouTube y buscar un tutorial sobre cómo maximizar en todas estas otras configuraciones para optimizar aún más tu sitio web. Pero como mencioné, cuando haces cambios, y en la parte delantera, las cosas no se comportan como se supone que deben comportarse Puedes purgar todos, y lo más probable es que los cambios surtan efecto si hubieran sido causados por la versión guardada localmente de la página que se está portando mal Eso eliminará toda la caché almacenada en su navegador, todas las páginas almacenadas en su navegador y recargará la página que tenga los nuevos cambios desde el servidor Ese es el número uno. Quiero terminar esta lección aquí mismo porque en la siguiente lección, quiero que hablemos de enlaces de perma Te veré en breve. 46. Enlaces permanentes: Hablemos de enlaces de perma. Quiero ir y tal vez abrir este producto. Bien, así dice taladro de impacto del producto. Pero ahora los enlaces permalinks se aplican principalmente a las publicaciones de Wordpress. Artículos artículos son un tipo de post en Wordpress. Así que déjame volver aquí y crear un nuevo post. A lo mejor, digamos, sí añadir nuevo post. Y como mencioné, un ejemplo de un post es un artículo, un artículo de noticias 0R un post de blog Entonces, cómo comprar en línea. A lo mejor esta es una entrada de blog que estás escribiendo para tus visitantes. Entonces voy a publicar eso. Ahí vamos. Entonces si veo el post, si nos fijamos en este 200503 2029, como comprar en linea, esta es la URL para este post en concreto Déjame volver aquí al tablero e ir a la configuración Permalink Hay diferentes formas de mostrar la URL de lo que estás viendo. Como puedes ver, aquí tenemos el producto Impact. Contamos con nuestro dominio, taladro de impacto de producto. Esto es muy amigable con el SEO. Cuando las arañas de Google o Bing están rastreando Internet en busca de nuevo contenido, también miran cómo se estructura la URL para los diferentes productos, diferentes páginas, diferentes cada parte de su sitio web de WordPress que tiene un Los bots de Google mirarán la estructura de la URL, y darán marcas más bajas a ciertas URL por cómo están estructuradas Por lo tanto, debes tener mucho desconfiar de cómo están estructuradas tus URL, que es donde entran los enlaces de perma Estas son las diferentes formas de estructurar tus publicaciones. Y como pueden ver, actualmente tenemos esta fecha y luego la muestra, y eso es exactamente lo que tenemos aquí. La mejor manera amigable con SEO de mostrar tus URL es el nombre de la publicación. Tan simple como eso. Guardar cambios. Bien, vamos a pagarle a todos Impresionante. Ahora bien, si arrastro esto y vuelvo a cargar esta página, solo recargarla Echemos un vistazo a la URL. Bien, ahora, volvamos a casa, y vamos a publicar Cómo comprar en línea. Digamos que ves. Entonces ahora, es solo tu dominio recorta el nombre de la entrada del blog Esta URL es muy amigable con el SEO, y recibirá mayores calificaciones de los motores de búsqueda cuando estén indexando tu sitio web Así que asegúrate de que tus enlaces prima estén establecidos para el nombre de la publicación. Y luego guardar los cambios. Creo que ya guardamos los cambios. Por supuesto, estos son solo consejos y trucos que estoy compartiendo muy poco profundo Si quieres más detalles, puedes ir y leer más sobre los enlaces prima. Puedes leer sobre el almacenamiento en caché de sitios web y todo lo demás de lo que voy a hablar Creo que este es un buen lugar para terminar con esto. A continuación, hablemos sobre seguridad de tu sitio web Wordpress. Te veré en breve. 47. Seguridad de sitio web: Echemos un vistazo a la seguridad de WordPress. Vamos a enchufar, Agregar Nuevo. Esto es lo que me encanta de Wordpress. Todo lo que quieras agregar a tu sitio web de Wordpress ya está creado como un plug in por alguien. Para que no tengas que pagar dinero extra a alguien para agregar funciones a tu sitio web. Entonces, vamos a escribir seguridad. Tenemos varios plugins de seguridad. Muchos de ellos son muy populares. Puedes elegir cualquiera de ellos. Yo uso una seguridad muy simple. Entonces voy a instalar eso pero puedes usar Wordfence Security Jet PAC, que es propiedad de Automatic, que es la compañía que creó Woo coomers Bien, sigamos adelante y activémoslo. Bienvenido a la seguridad realmente simple. SSL, verifiqué si tengo un certificado SSL y se ha detectado muy bien. Digamos activar. ¿Qué es esto? Sí, enviará un correo electrónico de prueba para confirmar que el correo electrónico está configurado correctamente en mi sitio. Permitamos que RSS nos envíe notificaciones, guardemos y continúe. Veamos este escaneo de vulnerabilidades, mezcla de inicio de sesión de correo electrónico instantáneo. Permitamos que los configure automáticamente. Si quieres añadir esas Cookie pop ups que te preguntan, ¿aceptas la Política de cookies de este sitio web, bla, bla, bla Estos son los plugins que puedes agregar automáticamente. Están hechos por la misma compañía. Entonces se puede decir instalar, pero no voy a instalar estos porque esto para mi es solo un sitio web ficticio Puedes conocer más sobre esto. Tienen tutoriales sobre cómo hacer esto. Instalar. Y ahora ya podemos terminar. No necesitamos estas características profesionales de ellos. Quizá los necesitemos, pero por ahora no tenemos el dinero para comprarlos. Entonces SSL ya está activado, y tenemos alerta sobre todas las cosas que hay que hacer en tu sitio web para que sea segura. Entonces veamos 31 habilitado. Esto es algo que tienes que hacer con tu redirección de acceso HT. Ahora bien, estas son algunas de las cosas que puedes usar Chat GPT o un tutorial de YouTube para aprender Estas no son cosas en las que vas a detenerte. Su sitio utiliza elemental. Esto puede requerir algunas de estas cosas no son apremiantes. No son muy urgentes. Hemos detectado roles de administrador donde los nombres de inicio de sesión y para mostrar son los mismos. Entonces lo que tenemos que hacer es acudir a los usuarios, o usuarios. Déjame escribir enlace Openink en Nueva Pestaña. Vamos al único usuario que existe, que eres tú y eres el Admin. Y aquí necesitas establecer tu apodo Mr. Moneybags, y ahora puedes usarlo como vamos a actualizar el perfil Se supone que no debes mostrar el nombre que te fue asignado. El nombre de usuario que te fue asignado, este nombre de usuario que Wordpress te asignó cuando instalaste WordPress. No lo exhiba en público. Se puede utilizar para iniciar sesión en su área de administración y destruir su sitio web o robar cosas. Así que establece un apodo y usa el apodo como nombre público en tu publicación. Entonces, por ejemplo, si vamos a un ¿dónde está ese post que creamos? Como puedes ver, el post actualmente tiene mi nombre de usuario real, el nombre de usuario admin. Pero ahora, si recargo esto, ahora lo dice el señor Moneybags. La gente no puede adivinar ese nombre de usuario aleatorio que me dio WordPress. Para que puedas pasar por algunas de estas otras cosas. No voy a pasar tiempo configurando todo porque esto es solo para demostrarte que usas una seguridad realmente simple para tu seguridad y aprender a usarla. Cada pedacito de alerta aquí tiene más información del sitio web oficial del plugin. Así que adelante y repasa todas estas cosas y mira cómo puedes mejorar tu sitio web, hacerlo más seguro. Usa Chat GPT si no entiendes cosas como HTCs y cómo solucionarlo, Bien. Creo que este es un buen lugar para terminar con esto. En la siguiente lección. Veamos cómo hacer una copia tu sitio web porque si algo le pasa a tu sitio web en este momento y tienes que reinstalar Wordpress, podrías perderlo todo Pero si tienes una copia de seguridad almacenada en algún lugar de Google Drive o en tu máquina, pasa cualquier cosa, tendrás una copia de seguridad. Veamos cómo hacerlo en la siguiente lección. Nos vemos en breve. 48. Respalda tu sitio web: Hablemos de hacer copias de seguridad de tu sitio web. Entonces, como de costumbre, vamos a ir a los plugins. Agregar Nuevo. Entonces, aquí dentro, busquemos copias de seguridad. Entonces, como puedes ver, tenemos udraftPlus y otros increíbles complementos de respaldo de Wordpress Pero me encanta updraft plus porque es muy fácil y directo Entonces vamos a activarlo. Y ahora vamos a presionar iniciar aquí todos los ajustes. Todo bien. Entonces aquí te van a llevar a un recorrido por el plugin. Esto es lo que haces clic para hacer una copia de seguridad, pero pasemos a la siguiente. Aquí puedes elegir cuántos archivos quieres conservar en cualquier momento. Aquí es donde puedes elegir dónde quieres enviar una copia de una copia de seguridad de tu sitio web. Para que puedas conectarte a tu Google Drive. Puedes utilizar estos otros servicios. Rara vez uso esto. Tengo uno de mis sitios web conectado a Google Drive, y automáticamente envía una copia de una copia de seguridad de mi sitio web de ese sitio web a Google Drive. Pero no hace falta que te metas con todos estos ajustes aquí. Lo único que tienes que hacer es venir aquí y hacer clic en Copia de seguridad ahora. Nada más. Y luego, como puedes ver, incluye tu base de datos, se va a incluir e incluir tus archivos. Eso son posts, plugins, productos, todo. Y si quieres que la copia de seguridad solo se elimine manualmente, puedes hacer clic en esto, y eso significa que tendrás que eliminar esa copia de seguridad manualmente tú mismo. Así que vamos a hacer copias de seguridad ahora. Podría tomar un momento. Ed aquí estamos. Nuestra copia de seguridad está lista. Como puedes ver, hacemos una copia de seguridad de nuestra base de datos, plug-ins, temas, subidas y otros. Y entonces lo que debes hacer es dar click a cada una de ellas, la base de datos, descargarla a tu computadora. Empezó. Descargar plugins. Descarga todos los plug-ins que hayas instalado. Vamos a descargar los temas, subir y otros. Dales un momento. Así que ahora descarga temas. Ahí vamos. Descarga todas las subidas. En otras palabras, si subiste alguna imagen a tu sitio web, como imágenes de productos, y luego otras. Y eso significa que cuando restaure esta copia de la copia de seguridad, su sitio web se verá exactamente así. Se verá exactamente así. Entonces déjame mostrarte cómo finalizar esto. Entonces ahí estamos. Yo sólo abriré el Flex la. Aquí están mis archivos de esta copia de seguridad aquí todo el camino hasta aquí. Los cortaré, Control X, click derecho Nueva carpeta, tienda online versión un punto oh. Después pegarlos todos ahí. Los guardaré ahí. Ahora puedes tomar esta carpeta y ponerla en algún lugar tal vez en tu disco duro externo o en algún lugar tu disco duro donde estén a salvo. Entonces ahora, si volvemos al interior de la tienda en línea, dashboard, y vamos a updraft si queremos restaurar ese sitio web, solo puedo eliminar esto, borrar eso Así que ahora lo hemos borrado manualmente. Eso está bien. Vamos a refrescar eso. Entonces como mencioné, si por casualidad pierdes tu sitio web y ahora tienes una instalación completamente nueva de Wordpress, ahora puedes venir y subir archivos de respaldo, seleccionar, ir exactamente a donde pones esos archivos, versión de tienda online que y luego abrir y se subirán aquí. Y una vez que estén subidos, tendrán esa opción para restaurar. Lo viste antes antes de que yo borrara la copia de seguridad que existía aquí. Esto, después de que se haya subido, se verá exactamente como la copia de seguridad que acabamos de eliminar. Entonces no vamos a esperar a que esto termine de subir. Ahora entiendes cómo hacer una copia de seguridad de tu sitio web y por qué es crucial. En la siguiente lección, asegurémonos de que nuestros correos electrónicos estén saliendo a los usuarios cuando tomen una acción y a nosotros cuando algo sucede en nuestro sitio web, tal vez alertas de seguridad del complemento RSS o envíos de formularios, envíos forminadores, ATC Veamos cómo hacerlo en la siguiente lección. Nos vemos en breve. 49. Entrega de correo electrónico: Así que ahora hablemos de entregabilidad de correo electrónico en tu sitio web Porque recuerden cuando fuimos a RSS, donde está RSS Security. Y aquí estamos. Así que veamos la validación completa del correo electrónico y habilitemos las notificaciones para asegurarnos de que recibirás advertencias de seguridad. Entonces veamos esto. Validación de correo electrónico, notificaciones aquí, validación de correo electrónico. Estás usando una función donde correo electrónico es una parte esencial de la funcionalidad. Por favor, valide que puedes enviar correos electrónicos en tu servidor. Entonces veamos descartar todas las notificaciones. No. Queremos recibir notificaciones, eliminar todos los datos sobre la eliminación del plugin. No cambiemos nada de eso, pero enviemos esto para ver si podemos enviar correos electrónicos. Muy bien, validación de correo electrónico, correo electrónico enviado, por favor revise su correo. Ahora ve a tu panel C. Como pueden ver, ya había abierto mi panel C y me desplazé hasta las cuentas de correo electrónico. Uno de los correos electrónicos que se creó automáticamente para ti cuando estabas instalando Wordpress fue por defecto, admin en tu sitio web.com Entonces el sitio web en el que estamos aquí es VFXspot. Entonces este correo electrónico de verificación. Y aquí estamos. Entonces creo que esto se ha enviado hoy o ¿lo ha hecho? Por favor, verifica tu correo electrónico para usar ciertas funciones o una seguridad realmente simple. En primer lugar, verifiquemos eso. No veo ninguna notificación aquí, lo que me dice es que el correo verifica tu correo electrónico. Todo bien. Entonces creo que este es el correo electrónico que enviaron cuando lo instalamos. Creo que está funcionando correctamente, pero no queremos adivinar esto. Así que vamos a instalar SMTP, pero solo espera un poco Estas son notificaciones de cosas que necesitamos hacer. Recuerda, te dije que la seguridad realmente simple es un sistema de seguridad robusto, y estas son cosas por las que necesitarás pasar una por una para ver cómo puedes ordenarlas. Pero ahora, volvamos aquí y digamos plugins, agreguemos nuevos. Queremos estar seguros de que se enviarán correos electrónicos. Entonces SMTP, este es un plugin gratuito. WP mail SMTP by WPForms instalado ahora. Nuestros correos fueron enviados para verificar que está funcionando, pero solo quiero asegurarme pero esto es solo para estar seguros. Bienvenido a WP Mail SMTP setup. Solo volvamos al tablero. No necesitamos pasar por el asistente de configuración porque lo que queremos es venir aquí. Estos simplemente están bien si los dejas en el valor predeterminado. Tienda en línea, este es el nombre del nombre. Cuando la gente reciba tu correo electrónico, tus clientes, se leerá desde tienda en línea o el nombre de la marca que le diste a tu sitio web, tienda en línea. También puedes cambiarlo a tu nombre. Ken. Fuerza a partir del nombre. Si otros complementos han establecido un nombre diferente, puede obligar a todo el sitio web a usar este nombre de nombre. Necesitamos verificar esto para asegurarnos de que incluso los mensajes rebotados no se pierdan Y ahora aquí al mailer, vamos a usar SMTP, y vamos a usar detalles de nuestro servidor web Por eso abrimos esto. Este es el correo electrónico que estamos usando, así que iremos a administrarlo. Y esto es algo con lo que también puedes pedirle a tu servidor web que te ayude. Ahora vamos a generar una contraseña aquí. Entonces, antes que nada, permítame seleccionar el dominio. Bien, ya está seleccionado. Generar. Ahora, voy a elegir esta contraseña, copiarla. Lo pondré en algún lugar de mi libreta. Lo pondré en un bloc de notas en alguna parte para que pueda agarrarlo desde ahí. Y eso es todo. Así que actualice la configuración del correo electrónico. Ahora ya hemos dado esto. ¿Cuál usamos? Fue VfxPod Entonces le hemos dado una contraseña a esto, lo cual es muy importante. Conecte los dispositivos. Vayamos a Conectar dispositivos. Necesitamos estos detalles. Entonces volviendo aquí, el host SMTP será este el nombre de dominio que usaste Pongámoslo ahí mismo. Vamos a usar SSL porque tenemos un certificado SSL. Esto es 465 automáticamente. Entonces el nombre de usuario SMTP aquí, el correo electrónico que usamos, y la contraseña es la contraseña que acabamos de poner en nuestro bloc Así que voy a pegar eso ahí dentro. Y ahora sólo voy a guardar los ajustes. Todo bien. Ahora, con eso, veamos si va a funcionar si nuestros correos electrónicos realmente están funcionando. Herramientas, creo que bajo herramientas tenemos mandar un correo de prueba, si. Así que déjame enviar un correo de prueba a nuestro correo electrónico de Admin. Éxito. El correo electrónico de prueba se envió correctamente. Por favor revise su bandeja de entrada para asegurarse de que fue entregada. Entonces ahora nuestros correos electrónicos están funcionando. Pero hay una cosa que necesito que tengas en cuenta. Utilizamos formuator. Entonces, si acudimos al formulador para ver nuestro formulario de contacto, quiero mostrarte cómo editar el comportamiento del correo electrónico de tus formularios Cuando se envía el formulario, ¿qué sucede? Así que vamos a las notificaciones por correo electrónico. 50. Notificaciones por correo electrónico de Forminator: Las notificaciones por correo electrónico que tenemos. Ahora bien, esta es la configuración de este formulario específico, este formulario de contacto. Si tienes otro formulario y otro formulario, tienes que entrar en cada uno de los formularios para establecer estos ajustes. Entonces notificaciones por correo electrónico, si abrimos esto, cuando el usuario envía el formulario, vayamos al front end muy rápidamente Contacto, déjame cerrar estos otros. Cuando el usuario rellena su nombre, dirección de correo electrónico y escribe algo y envía el mensaje, ¿qué debería pasar? Este correo electrónico será enviado al Administrador porque ellos enviaron este formulario para que se le envíe. Por lo que está etiquetado como correo electrónico Admin. Esto es solo una etiqueta para ti. Esto es solo una etiqueta para el tablero para ayudarte a saber qué correo electrónico es este porque el segundo correo que vamos a enviar va al cliente. Correo electrónico del cliente. Sujeto, podemos establecer el tema a Ahora bien, déjame cerrar esto porque no quiero confundirte por ahora Así que volviendo aquí, vamos a crear el correo electrónico que el usuario recibirá cuando te envíe este formulario. Pero ahora vamos a trabajar en lo que verás en tu bandeja de entrada. Esto es lo que verán. Verás que tienes un nuevo envío de formulario de sitio web. Todos los campos, esto es solo un marcador para todos estos tres campos y los detalles que guardan, los valores que fueron ingresados por el usuario También puedes decidir algo diferente, tal vez entrar. Puedes decir si dices insertar formularios, puedes decir que puedes ser nombre muy específico, el nombre que compartieron. Se puede decir el texto. Se trata de un área de texto detalles, lo que escribieron aquí. Y su dirección IP y todas estas otras cosas, pero no necesitas todas esas. Pero para resumir, estos todos los campos significan todos estos tres campos y todos los datos que tenían Muy bien, gracias. Deshazte de eso. Este mensaje fue enviado desde URL del sitio solo significa que va a mostrar la exportación de VF, y te mostraré exactamente a lo que me refiero Ahora, cuando llegamos al tema, también tenemos algunos otros marcadores de posición, como puedes ver, nombre aquí significa cualquier nombre que compartieran aquí Si ponen a Kennedy como yo, en tu correo electrónico, este asunto va a leer nuevo formulario de ingreso ID de envío, el ID de ese formulario para el nombre del formulario, el nombre que le diste al formulario y le dimos el nombre formulario de contacto como puedes ver aquí. Entonces necesitas tener nombres descriptivos para cada formulario que crees. Cuando veamos formulario de contacto en nuestro correo electrónico para formulario de contacto, sabremos que fue enviado desde la página de contacto. Si tenemos otro formulario en otra página y tiene un nombre diferente, será esa otra forma. También puedes cambiar los destinatarios aquí. Se pueden insertar más destinatarios. Puedes dar tu propio correo electrónico personal, tal vez ratones en protonmil.com También recibirás una copia del mismo correo electrónico como notificación. Ahora, para el usuario, es más o menos lo mismo. Esto es lo que recibirá el cliente. Esto es solo una etiqueta para que sepas cuál es esta condición. Pero ahora lo que verán es el tema. Este es el tema. Verán esto una copia del formulario que has enviado. Y aquí dentro, puedes escribir lo que sea. Aquí están los datos que enviaste a través del formulario de contacto en nuestro sitio web. Todo bien. Entrar, solo puede decir todos los campos del formulario. Gracias por llegar a nosotros. nos pondremos en contacto Pronto nos pondremos en contacto contigo destinatarios. Entonces aquí la persona a recibir es el correo electrónico que envió en este campo, correo electrónico, dirección de correo electrónico. Entonces agrega esa actualización. Ahora déjame enviar este Ken Kyoko, déjame proporcionar ese correo electrónico y luego solo un correo electrónico de prueba Enviar mensaje. Bien. Y siempre puedes ir a los colores personalizados en cuatro Mintor para cambiar esto Ahora bien, si volvemos a nuestro correo electrónico aquí y si actualizo, veamos si recibo, hemos estado desconectados. Entonces yendo hacia atrás, y si abro ese correo, revisa el correo electrónico. Exactamente. Entonces, antes que nada, este es el correo electrónico de prueba que enviamos con SMTP Congreso, el correo electrónico se envió con éxito, y ahora si vamos a este formulario, tiene un nuevo envío de formulario de sitio web. Volvamos a nuestro sitio web, y estos son todos los campos. Si volvemos aquí, tienes un nuevo envío de formulario de sitio web, todos los campos. Tirará todos los campos que se llenaron y los mostrará aquí. Este mensaje fue enviado desde la URL del sitio. Sitio URRL Déjame verificar si he recibido ese mismo correo electrónico en mi bandeja de entrada. Como puedes ver, también he recibido de Tienda Online, he recibido una copia del formulario que enviaste. Y si vuelvo aquí, cierra ese correo electrónico del cliente, una copia del formulario que enviaste. Si lo abro, aquí están los detalles que envió a través del formulario en nuestra página web. Aquí están los detalles exactamente lo que dijimos todos los campos. Porque dijimos enviarlo al correo electrónico que se insertó en el campo de dirección de correo electrónico. Entonces así es como asegurarse de que sus correos electrónicos estén siendo enviados a las personas que deben verlos. Esto también se aplicará a todas sus transacciones de Wocomers. Cuando las personas realizan pagos o las transacciones fallan, recibirás todas esas notificaciones. Creo que este es un buen lugar para terminar con esto. Déjame ver dónde estamos ahora mismo. Bien, sí. Así que ahora hemos terminado con la entregabilidad de correo electrónico. Tengamos una charla rápida sobre SEO. Te veré en breve. 51. Optimización para los motores de búsqueda: Hablemos de optimización de motores de búsqueda. Hay varias cosas que tenemos que hacer para que nuestro sitio web sea visible para los motores de búsqueda como Google y Bing. Ahora mismo, si lanzas tu sitio web, será invisible para todos esos buscadores. Entonces déjame cerrar estas otras áreas abajo. Déjame cerrar eso. Actualiza eso. Y una de las razones por las que no vamos a ser visibles para los motores de búsqueda es algo que hicimos deliberadamente. Recordarás hace algunas lecciones, fuimos a ajustes, lectura, y desalentamos los motores de búsqueda de indexar nuestro sitio porque estaba en construcción Ahora estamos listos para lanzar nuestro sitio web. Entonces, antes que nada, desanimemos a No, animemos a los motores de búsqueda a indexar este sitio web Ahí vamos. Ahora, como pueden ver, nuestra tienda sigue llegando pronto. Entonces, si vamos a aquí, una vez que estemos listos para lanzar el sitio web, podremos ir en vivo. Así que vamos a ir a vivir. Pero antes de que nos vayamos a vivir, tendrás que, antes que nada, hacer todo el SEO. Sólo quiero mostrarte cómo salir en vivo. No quería olvidar que la tienda sigue llegando pronto. Entonces, una vez que hagas la parte de SEO, puedes ir en vivo. Entonces déjame guardar los cambios, asumiendo que mi sitio web ahora está optimizado para motores de búsqueda. Ahora, el SEO es un tema completo por sí solo, y debería ser un curso completo por sí solo. Y lo bueno es que ya publiqué una clase sobre SEO, WordPress SEO para principiantes completos. Lo publiqué en Skillshare, donde también tengo otros increíbles cursos de Wordpress y elementales Puedes ir a comprobarlo ahora mismo. Es un curso completo paso a paso sobre cómo optimizar tu sitio web, todas las diferentes partes que necesitas mirar y configurar para asegurarte de que no te pierdas en la página 500 de los resultados de búsqueda de Google. Entonces sin decirlo, no vamos a seguir hablando de SEO. Consulta ese curso o simplemente ve a YouTube y busca más cursos o tutoriales de SEO. Tengo algunas reflexiones finales que quiero compartir contigo en la siguiente lección, así que vamos a terminarla. Nos vemos en breve. No vayas a ningún lado. 52. Reflexiones finales: Y eso es una envoltura. Enhorabuena. Ahora tienes un sitio web de comercio electrónico completamente funcional construido con Wordpress, elementor, WooCommers y otras herramientas de Wordpress, herramientas gratuitas Espero que esta clase te haya dado la confianza para diseñar y crear y lanzar tu propio sitio web de comercio electrónico en 2025. Y si ese no era tu objetivo, espero que la clase te haya dado la confianza para convertirte en un mejor diseñador web de Wordpress. Ahora bien, ¿cuáles son los siguientes pasos? Bueno, antes que nada, me encantaría ver lo que has podido construir. Vaya a la pestaña Proyectos y Recursos justo debajo este reproductor de video y haga clic en el botón Enviar proyecto. Puede tomar una captura de pantalla de su página de destino, su página de inicio, página de su tienda o una sola página de producto y subirla aquí mismo en Skillshare Deja que otros alumnos lo vean, deja que tu maestro lo vea y celebremos juntos tu éxito. Y como siempre, si amabas y disfrutabas esta clase y la encontraras beneficiosa, significaría el mundo para mí si pudieras tomarte menos de un minuto dejar una reseña y dejarme saber cómo fue. Ayudar a otros estudiantes potenciales saber si esta clase es una buena opción para ellos. Ayúdame a saber si estoy impactando con mis clases, o si debo mejorar en algo. Te llevará literalmente menos de un minuto bajar a la pestaña de reseñas justo debajo de este reproductor de video y dejar caer tu reseña ahí, y realmente te lo agradeceré. Ahora bien, si estás planeando lanzar tu sitio web, te recomiendo mucho aprender sobre SEO. Y como mencioné, ya tengo un curso completo sobre WordPresseo Así que asegúrate de revisar mi perfil. Baje y busque una clase con el nombre WorpresSEO simplificado para principiantes, y estoy bastante seguro de que la va a encontrar súper útil antes Siempre, mi nombre es Ken, y es un placer haber tenido la oportunidad de enseñarte a construir este sitio web, y no puedo esperar a ver qué vas a poder crear. Hasta la próxima, mantente creativo. Nos vemos pronto.