Cómo construir un sitio web para un restaurante con WordPress + Elementor (plugins gratuitos)

1. 2 Introducción: Y bienvenido de nuevo a otra increíble clase de diseño web de Wordpress conmigo, Ken Messa Si es la primera vez que me ves, he estado enseñando a la gente a construir hermosas páginas de destino y sitios web que funcionan completamente con Wordpress y complementos gratuitos de Wordpress. Y en esta clase, te estaré mostrando cómo construir un sitio web de restaurante completamente funcional desde cero usando Wordpress Elementor y otros complementos gratuitos No necesitarás pagar nada para tener tu sitio web en funcionamiento. cuando terminemos esta clase, tendrás un sitio web que podrás empezar a usar inmediato para recibir pedidos y reservas para tu restaurante. Y todo el sistema de pedidos y reservas se integrará con una aplicación de teléfono móvil gratuita que podrás descargar desde la tienda de aplicaciones o la playstore y comenzar a recibir pedidos cuando los clientes hagan sus pedidos en el sitio web que estás construyendo en este momento Pero antes de llegar lejos, quiero contarte un poco sobre mí. Hace unos cinco años, me encontré en la necesidad de un sitio web para exhibir y vender mis servicios de diseño gráfico. Llevaba algunos años trabajando como diseñadora gráfica, pero quería trabajar por cuenta propia. Así que quería construir un sitio web a través del cual pudiera vender mis plantillas y servicios de diseño gráfico como en stock gratuito de peek o shadow Fue entonces cuando me topé con Elementor y fui prensa me di cuenta de que podía construir mi propio sitio web y así decidí probarlo Pero poco sabía que este descubrimiento no sólo llenaría mis necesidades personales, sino que también pondría en marcha un capítulo completamente nuevo en mi carrera. Después de ver algunos tutoriales de elementos y crear mi propio sitio web, sucedió algo mágico. Las solicitudes comenzaron a llegar de personas que me pedían que construyera sitios web para ellos. Y así pasé algunos años trabajando para clientes de diseño web, construyendo varios sitios web para varias empresas. Avancemos rápido hasta hoy, y aquí estoy, ya no estoy asumiendo proyectos de clientes, sino dedicando mi tiempo a compartir mi experiencia elemental con todos ustedes Y como ya he mencionado, una vez más, estaremos cubriendo todo lo que necesitas saber Para construir un sitio web integral con Wordpress. Desde crear una página de inicio acogedora, hasta mostrar su menú, hasta compartir la historia de sus restaurantes E incluso incorporando un sistema de pedidos y reservas en pleno funcionamiento para que puedas empezar a tomar pedidos. inmediato, nos sumergiremos en los aspectos prácticos de Wordpress y Elementor Y te guiaré paso a paso mientras damos vida a la presencia online de tu restaurante. Al final de este curso, tendrás las habilidades para no solo construir un sitio web de restaurante, sino también las habilidades para usar la prensa web para construir una amplia gama de sitios web. Porque sé que algunos de ustedes podrían estar exactamente donde estaba antes de saber cómo construir sitios web. Quieres saber cómo construir sitios web por ti mismo en lugar de pagarle a la gente cientos o miles de dólares para que lo hagan. Porque probablemente tengas varias ideas para diferentes sitios web y plataformas online, pero no sabes cómo hacerlo tú mismo. Algunos de ustedes podrían incluso querer entrar en el negocio del diseño web y recibir pago para construir sitios web para los clientes. Entonces, para cuando terminemos esta clase, tendrás una base firme adecuada sobre cómo construir cualquier sitio web que quieras. Esta clase es para ti. Y por cierto, esta clase es un cumplimiento a una solicitud hecha por una de mis alumnas, Bridget Xi Gritarle a Bridget por hacer esa petición. Si alguien más tiene una idea para un sitio web que quiera que construyamos en la siguiente clase, continúe y suéltelo en la pestaña de discusión debajo de este reproductor de video. No puedo esperar a ver qué vas a crear. Entonces, si estás tan emocionada como yo, te veré en la siguiente lección. 2. Demostración del proyecto: Ahora queremos echar un vistazo a nuestro proyecto de clase. Una de las mejores formas de aprender una habilidad es construyendo algo. Esto es lo que vamos a estar construyendo, este sitio web aquí mismo. Solo quiero llevarte a un breve recorrido por el sitio web. Mientras preparaba esta clase, seguí adelante y construí este sitio web con anticipación. Lo construí por una razón para que tengamos algo ver mientras construimos cuando estamos construyendo la sección de héroes aquí mismo, podemos echar un vistazo a esto y luego pasar a Wordpress y comenzar a construirlo. Al mirar lo que estamos construyendo, tenemos un punto de referencia. Otros cursos o clases pueden tener un enfoque en el que solo lo estés superando. Sólo estás construyendo algo de la nada. No sabes exactamente lo que estás construyendo en esta clase. Tendremos la oportunidad de volver a este sitio web de referencia, echar un vistazo a la sección que estamos construyendo, su estilo y volver a nuestro editor Esta es la sección de héroes, y si la vuelvo a cargar, notarás cómo está bien animada Cada elemento está animado incluyendo la imagen de fondo. Y cuando empecemos a desplazarnos, notarás que tenemos un encabezado pegajoso que permanece en la parte superior independientemente de dónde estemos en el sitio web, lo cual es una característica genial No quieres que tu barra Nab esté oculta cuando estás desplazándote Cada elemento aquí está animado. Si lo vuelvo a cargar, vamos a desplazarnos hasta el fondo, hasta el fondo Vamos a ver cómo hacer todo eso. Creo que le da vida a tu sitio web para que no sea solo un sitio web estático. La otra cosa que quiero mostrarles es que estos botones aquí mismo abren el sistema de pedidos y reservas. Si hacemos clic en este menú abierto y ordenamos, abrirá el menú y te mostraré cómo construir este sistema. Un cliente puede venir aquí y elegir, tal vez solo quiera un poco de café. Seleccionarán el café y podrán compartir algunas instrucciones especiales. Quiero que tuviera. A lo mejor voy con dos invitados, seremos tres de nosotros. Podemos agregar eso al carrito. Y ya estaba haciendo algunas pruebas con él. Por eso tengo dos artículos en mi tarjeta. Déjame quitarle esta pizza. El cliente puede proporcionar todos estos detalles aquí. Método de pedido, pick up, está bien. Ahorre ese tiempo disponible lo antes posible. Podemos editar eso. Ya los había configurado mientras lo probaba y por eso ya están guardados nuestro método de pago. Aquí, será efectivo o tarjeta en el mostrador de recogida, Guarde eso. Y ahora estamos listos para hacer nuestro pedido. Si hago clic, por favor recoja un pedido. Estoy haciendo mi pedido ahora en mi teléfono, aquí mismo. Esta es la app de la que te estaba hablando. Vas a tener esta app si estás operando el sitio web del restaurante. Aquí está la orden pendiente. Y tengo un botón verde aquí para aceptar el pedido. Pero también debería poder llamar a la persona y confirmar con ella. A lo mejor si quiero que paguen antes de que aceptemos el pedido, podamos hacerlo. Si acepto aquí, estoy obligado a proporcionar el tiempo de entrega o tiempo de espera tal vez 30 minutos, tiempo de recogida, Eso significa que deben venir a por ello después de 30 minutos. Ahora, porque he aceptado ese pedido, esto es lo que verá el cliente en la plataforma. Pedido confirmado de recogida en 30 minutos. Déjame cerrar eso. También tenemos las reservas de mesa, número de personas, tal vez tres personas fecha mañana hora. Digamos que venimos a las 10:30 A.M. tenemos una reunión, a lo mejor tenemos algunos comentarios especiales. , a continuación, ¿te gustaría ordenar con anticipación y tener lista tu comida favorita a tu llegada? Sí, ordena ahora, así puedo hacer mi pedido. Tal vez café, instrucciones especiales. Vamos a ser tres de nosotros agregar al carrito, y luego podemos ir al carrito y repetir las mismas instrucciones aquí mismo. Reservación de mesa. Guarde eso. No, espera. Reserva de mesa y orden. Tamaño de la mesa tres personas, 1030. Guarde ese método de pago en efectivo. Ahora podemos hacer nuestro pedido. Una vez más hay un mensaje en la aplicación. Y recuerda que esta app es 100% gratuita. Regresaré y veré la orden pendiente y puedo presionar aceptar aquí, el botón verde. Puedo seguir adelante y aceptarlo. Ahora, aquí en la pantalla, el cliente verá que su pedido, su reservación ha sido confirmada. Vamos a cerrar eso. Ahora como nos desplazamos por aquí , por supuesto, veremos cómo construir cada una de las secciones de esta página. Tenemos un pequeño menú aquí, estamos mostrando algunos de los alimentos que tenemos. Y te voy a mostrar cómo construir este menú usando un plug in muy impresionante. Este es el mismo botón para cargar ese menú para permitir al cliente realizar un pedido. Este es el mismo botón de reservación para hacer una reservación. Ahora a estos se les llama llamado a la acción. Cada landing page necesita tener llamadas a la acción, porque ese es el propósito de una landing page. Para conseguir que el usuario realice una acción. En este caso se trata de hacer un pedido o hacer una reserva. Y aquí tenemos una galería. Podemos dar clic en Abrir Galería. Se abrirá en una nueva pestaña, y te mostraré cómo hacerlo. Seremos redirigidos a la página de la galería aquí. Tendremos imágenes de diferentes actividades. Podemos verlos en diferentes categorías, personal, mesas de cocina, o todas. Ahí vamos. Tenemos la página acerca de, Básicamente, se trata de maquetación. Veremos cómo construir esta página también. Tiene los mismos botones de llamada a la acción porque son importantes. Tenemos un formulario de suscripción al boletín aquí si quieren mantenerse al día con lo que está pasando con el restaurante. Por supuesto, permítame cambiar a la página de contacto de Contacto. Pueden ponerse en contacto con la dirección o administrador del sitio web. Este es solo un sitio web básico, pero tiene todo lo que necesitas en el sitio web de un restaurante para administrar tu negocio con éxito. Tengo dos metas con esto. Quiero ayudarte a construir un sitio web real que puedas usar para tu restaurante si este es tu objetivo. Pero también te va a equipar con las habilidades para construir sitios web Wordpress. Vas a entender el flujo de trabajo de Wordpress y elemental para construir sitios web. Eso es solo una visión general rápida del proyecto en el que trabajaremos. Y una vez que hayas completado tu proyecto, no olvides tomar una captura de pantalla de tu landing page y compartirla con el resto de la comunidad aquí mismo. Simplemente vaya directamente debajo de este reproductor de video a la pestaña Proyectos y Recursos. He aquí un ejemplo de una de mis clases anteriores. Esta es la pestaña Proyectos y Recursos. Y aquí hay ejemplos de algunos de los proyectos que los estudiantes publicaron aquí mismo. Así que siéntete libre de tomar una captura de pantalla de tu landing page y compartirla con la comunidad. Obtén algunos comentarios de tus compañeros y de tu profesor. Y creo que al hacer eso todos podremos crecer juntos. Entonces, si estás listo y emocionado por comenzar, pasemos a hablar sobre comprar un dominio y alojamiento para tu sitio web, porque tu sitio web necesita residir en algún lugar en línea. Te veré en breve. 3. Compra alojamiento y nombre de dominio: Bienvenido de nuevo. Ahora ya has visto lo que vamos a construir. Es hora de hablar sobre dónde se va a alojar tu sitio web. Cada sitio web que visita o ve en línea se almacena en algún lugar de un servidor. Es por eso que el sitio web está disponible para personas de cualquier parte del mundo. Si hago clic en un enlace que me lleve a su restaurante, las páginas web del restaurante se van a cargar desde ese servidor que es proporcionado por su proveedor de alojamiento web. Es el hogar de tu sitio web. Estoy aquí mismo en el sitio web de WordPress.org, y estoy específicamente en la página de alojamiento Wordpress tiene sus servidores web recomendados. Adelante, lee esta página. Es WordPress.org slash hosting. Como puedes ver, tenemos tres webhost recomendados por WordPress.org Tenemos Bluehost, tenemos Dream Host, y tenemos WordPress.com Si abrimos Bluehost, aquí estamos Bluehost cuenta con hosting Wordpress. Déjame simplemente hacer clic en eso, o tal vez subir aquí. Wordpress, Alojamiento Wordpress. Aquí está el precio de los diferentes planes que tiene Blue Host. Esto es 5.4 $5. Al mes te proporciona 40 GB de almacenamiento SSD y puedes alojar tres sitios web. Bajo este plan de alojamiento, puede tener tres sitios web diferentes bajo el mismo plan de alojamiento. Sigamos adelante y miremos a Dream Host. Vayamos al hosting Wordpress, inmejorable Hosting Wordpress. Veamos los precios, 2.95 salta a más características y especificaciones de texto Número de sitios web aquí puede obtener uno por 8.95 puede obtener sitios ilimitados Puedes tener sitios web ilimitados en ese servicio de hosting para estos otros, es solo uno. Sólo tienes que seguir adelante y pasar por todos estos a continuación. Echemos un vistazo a la tercera opción que dan es WordPress.com Ahora no confundas con WordPress.org WordPress.com es una plataforma que te permite construir un sitio web encima de él, y se encarga de que dan es WordPress.com Ahora no confundas WordPress.com con WordPress.org WordPress.com es una plataforma que te permite construir un sitio web encima de él, y se encarga de tu alojamiento. Alberga tus sitios web por ti. WordPress.org es la organización que proporciona el Wordpress que descargas a tu proveedor de alojamiento web Por ejemplo, si estás construyendo un sitio web en Bluehost, tienes que descargar e instalar Wordpress Lo obtienes de WordPress.org Si vamos a la página principal, puedes ver obtener Ahora bien, si quería construir Wordpress en mi host local que está aquí mismo en mi máquina solo para fines de desarrollo, para experimentar, antes de encontrar un proveedor de alojamiento web, puedo descargar Wordpress aquí mismo. Pero si quiero construir un sitio web y lanzarlo en línea, tengo que tener un proveedor de alojamiento web. Y cuando compre un plan, el proveedor de alojamiento web me dará acceso al panel. Cada proveedor de alojamiento web te proporciona un panel. Y es dentro del panel donde instalarás Wordpress, y te voy a mostrar cómo hacerlo. También tenemos un servicio que no está listado por Werepress.org porque recuerda que estas son Pero hay muchos otros servidores web que son muy increíbles. Personalmente, tengo algunos sitios web alojados con nombre Chip. Ahora vayamos al alojamiento compartido. Muy bien, así que si recién estás comenzando y solo estás probando tu sitio web, este es el plan que uso cuando apenas estoy comenzando una idea de negocio y quiero probar las aguas. Stella plus 2.98 mensuales. En primer lugar, obtienes un nombre de dominio gratis, sitio web ilimitado. Entonces eso significa que puedes tener Mike.com Puedes tener Ferguson.com Nuevo sitio web de gimnasio.com Puedes tener varios sitios web Supongamos que esos son solo sitios web que estás probando. No es necesario tener planes de alojamiento separados para probar ideas. Simplemente puedes probarlos todos bajo un plan de hosting por el que estás pagando 2.98 por mes Entonces. Una vez que uno de ellos realmente arranca y comienza a funcionar muy bien, ahora puedes obtener un hosting dedicado para ello por separado Eso es lo que hago. Esto es lo que yo recomendaría personalmente. Pero eres libre de elegir cualquier otro proveedor de alojamiento web que quieras de estos otros. Eso es todo acerca del alojamiento web. Hubiera tenido una lección separada sobre la compra de un dominio. Pero comprar un dominio es bastante sencillo. Acabas de llegar a Name Chip. Y no tengo ninguna afiliación con Name Chip. No voy a sacar dinero de ellos. Es solo el servicio que utilizo personalmente. Puedes venir a dominios, búsqueda de nombre de dominio y buscar tu nombre. Digamos Bebistra.com Si presiono Enter, me va a dar diferentes opciones y sus precios Y puedo agregar al carrito y comprar el dominio que quiera. Puedes conseguir dominios muy baratos aquí. Solo sé creativo con tus nombres de dominio si el que quieres es demasiado caro, como Betbstra.com como puedes ver, es un nombre de dominio premium y cuesta 34 Eso es mucho dinero. Pero digamos, como puedes ver, este no es un dominio premium. Es solo 10.28 Sé creativo y busca formas de obtener un nombre de dominio barato con el que puedas vivir Básicamente, eso se trata de comprar alojamiento web y un nombre de dominio para tu sitio web. En la siguiente lección, hablemos de cómo instalar Wordpress dentro de tu panel una vez que compres tu alojamiento web y un nombre de dominio. Te veré en breve. 4. Instala WordPress: Bienvenida. Ahora es el momento de instalar Wordpress dentro de nuestro panel. Ahora, independientemente de qué publicación web decidiste usar, si no estás usando chip de nombre, la instalación de Wordpress es más o menos la misma. Tenemos que acceder al panel y luego iniciar sesión en nuestro panel e instalar Wordpress ahí para que pueda acceder a mi panel. Dentro de chip de nombre, necesito primero que nada, iniciar sesión en mi chip de nombre, iniciar sesión. Ahora solo inicia sesión en tu publicación web. Necesito verificar esto. Déjame verificar muy rápido. Todo bien. Presentar eso. Aquí estamos. Iré directamente a mi lista de hosting. Esa es una lista de los diferentes paquetes de hosting. Como pueden ver, compré solo uno. Iré al panel de. La razón por la que inicié sesión en mi cuenta de chip de nombre fue para poder iniciar sesión en mi panel haciendo clic en este. Su proveedor de alojamiento web podría proporcionarle una manera de ir a la página de inicio de sesión de su panel C para que no tenga que pasar por su cuenta de host web. Pero así es como lo he hecho. Ahora volviendo a mi panel, independientemente de su proveedor de alojamiento web, su panel C tendrá la mayoría de estas características aquí mismo. Y una de esas características es este Wordpress. Va a estar bajo el instalador de Sftaculus Apps. Haré clic en Wordpress y seré redirigido al servicio de Softaculus Como puedes ver, este es softaculus será llevado directamente a la página de resumen de Wordpress Ahora estas son mis instalaciones actuales. Como pueden ver, tengo una instalación de Wordpress bajo este dominio. Podemos instalar uno nuevo. Voy a seguir adelante e instalar. Ahora tengo un par de nombres de dominio, uno de ellos es VFX Port.com y este es el que voy a usar desde el menú desplegable Si tienes un certificado SSL, puedes elegir HTTPS y me gusta tener este prefijo de WWW. Da click afuera, comprobará y confirmará que tienes un certificado SSL. Como puedes ver, esta es la versión de Wordpress que tenemos actualmente. Por supuesto, voy a dejar este espacio en blanco porque no quiero que mi nombre de dominio tenga una extensión de wwwfport.com Simplemente va a ser vifport.com A continuación, vamos a darle un nombre a nuestro sitio web Le voy a dar restaurante. Vamos a darle un breve eslogan o descripción. Las mejores comidas de la ciudad. Estas son las credenciales de inicio de sesión que usarás para iniciar sesión directamente en tu panel de Wordpress si no quieres pasar por el panel C. Entonces todo lo que necesitas hacer es ir a tu inicio de sesión de dominio y serás llevado a la página de inicio de sesión. Y entonces eso es un correo electrónico admin predeterminado generado por espectaculares En este correo electrónico de administración, estarás recibiendo cualquier alerta o notificación del sistema, de tu proveedor de alojamiento web con respecto a tu sitio web, tal vez alertas de seguridad o cualquier cosa por el estilo. Dejaré todo lo demás intacto, pero podemos abrir la pestaña avanzada y si quieres hacer una copia de seguridad de tu sitio web de vez en cuando, deja eso. Por defecto, se puede decir tal vez una vez a la semana, respaldo de rotación, tal vez dos copias. Eso significa que en un momento dado siempre tendrás dos copias de tu sitio web, una versión anterior y la versión más respaldada previamente. Con eso, también quiero comprobar estos. Estos son plug ins que se preinstalarán con tu Wordpress. No necesito ninguno de ellos porque hay mejores alternativas una vez que comenzamos a instalar enchufes y luego puede proporcionar un correo electrónico para recibir una notificación una vez que termine su instalación. Pero esto no es una masa es una instalación opcional. Ahí lo tenemos, ahora tenemos instalado Wordpress. Como puedes ver, este es nuestro dominio, esta es nuestra URL administrativa. Esto nos llevará al tablero de Wordpress. Si hago clic en eso, ahí lo tenemos. Ahora hemos instalado Wordpress con éxito. Como puedes ver, esta es la versión 6.4 0.2 y ahora estamos listos para comenzar con el sitio web. Te veré en la siguiente lección. 5. Instala Elementor: Ahora es el momento de instalar Elementor porque estamos construyendo el sitio web con él. Vayamos directamente a los enchufes. Comenzaré haciendo clic en plugins para que podamos ser redirigidos a la lista de plugins ya instalados Quiero seleccionar ambos marcando esa casilla aquí. Eliminar Aplicar. No los necesitamos. Ahora tenemos una pizarra en blanco. Voy a seguir adelante y agregar. Seremos redirigidos al Wordpress. Enchufe directorio aquí, buscaré elemento, claro, es el primero por elemento.com con más de 5 millones de instalaciones activas instaladas Ahora bien, si eres nuevo en Elementor, como puedes ver, tenemos otros plugins que se crean para extender el poder de Elementor Se trata de empresas de terceros como WP Developer Unlimited, WP Royal. Se trata de desarrolladores de terceros que han creado más elementos para agregar a tu plugin Elementor de forma gratuita Y vamos a estar usando varios de estos plugins medida que avanzamos con elementor instalado Seguiré adelante y presionaré Activar y seré redirigido al asistente de configuración de elementor Ahora bien, si quieres disfrutar de algunos de estos beneficios, puedes seguir adelante y crear una cuenta con elemento.com Pero no necesitas crear una cuenta para usar elementor, solo voy a seguir adelante y Se puede optar por continuar con el tema hola, que fue creado específicamente por elemento, por el equipo de elemento para trabajar con elementor Pero vamos a estar usando un tema de Wordpress mucho mejor llamado astra. Y lo estaremos instalando en la siguiente lección. Yo seguiré adelante y me saltaré eso. Este es el nombre que le dimos a nuestro sitio web cuando lo estábamos creando. No necesitamos cambiarlo, pero si quieres, puedes cambiarlo ahora mismo. Yo sólo voy a golpear a continuación. Puedes agregar un logo ahora mismo si quieres, pero lo haremos más adelante. Me saltaré ahora. Ya terminamos. Puedes editar un lienzo en blanco con el editor elemental, o puedes elegir una plantilla diseñada profesionalmente o importar plantillas que ya hayas creado en un proyecto diferente. Pero también podemos darle a Skip o cerrar esta ventana. Déjame presionar Skip, pero aún así seremos redirigidos a una página elementor en blanco Su editor, como puedes ver, elemental se está cargando. Ahora esta es una página en blanco. Vamos a eliminarlo. Pero por ahora, echemos un vistazo a lo que tenemos aquí. Desbloquea el poder del elemento I. Esto nos proporciona características de IA. A medida que construimos nuestro sitio web, podemos aprovechar las funciones de IA. Sigamos adelante y digamos continuar. Aquí vamos. Como mencioné, esta es sólo una página en blanco. Vayamos aquí y digamos salida. Si decimos salida porque no hemos publicado esta página, nos podrían decir, podríamos preguntarnos si realmente queremos salir. Ahora, aquí mismo, podemos elegir dónde queremos que nos redirijan cada vez que hagamos clic en este botón de salida Y me gusta que me redirijan al dashboard de WP porque ese es el único lugar al que me gustaría ir Sí, dejémoslo, porque no queremos guardar los cambios. Nos han redirigido al panel de Wordpress cada vez que a partir de ahora cuando pulsamos el botón de salida en, nuestro editor será redirigido al tablero, que es lo que queremos Ahora como puedes ver, tenemos Elementor y plantillas. Estos dos se agregaron a esta lista después de instalar Elementor Si vamos a elementor aquí tenemos integraciones, funcionalidades avanzadas Realmente no necesitas tocar ninguna de estas configuraciones. Personalmente, no hago cambios en ninguna de estas configuraciones. Yo solo sigo adelante y empiezo directamente. Así es como instalar el elemento. En la siguiente lección, veamos cómo instalar el tema Astra. Te veré en breve. 6. Instala un tema de WordPress: Ahora es el momento de instalar un tema de Wordpress. Cada vez que quieras trabajar en cualquier proyecto de Wordpress, necesitas tener un tema instalado. Ahora lo hacemos entrando dentro de temas de apariencia. Por defecto, cada vez que instales Wordpress, tendrá un tema preinstalado y el tema tendrá el nombre del año en el que instalaste Wordpress. Este año tenemos al 2024 como tema activo. El año pasado tuvimos 2023, y el año anterior a ese tuvimos 2022. Pero estos no son los que vamos a usar. Vamos adentro agregamos nuevo tema y seremos llevados al directorio de temas. Al igual que nos llevaron al directorio plug in. Como mencioné, el tema de Astra es nuestro tema de ir a. Simplemente viene con algunas características muy bonitas que realmente disfruto usando. Y verás por qué Astra ya está instalado, pero aún no está activo. Haga clic en activar. Ahí vamos. Como ahora está activado. Empieza con plantilla lista para usar, bla, bla, bla. No, vamos a cerrar eso porque vamos a construir todo desde cero. No vamos a usar plantillas pre hechas. Bien, ahora como puedes ver, Active es el tema de Astra. Básicamente, así es como instalar un tema de Wordpress. En la siguiente lección, comencemos a trabajar en la página principal. Te veré en breve. 7. Descripción general del espacio de trabajo en Elementor: Ahora que hemos instalado nuestro tema y hemos instalado Elementor, tengamos una visión general rápida del espacio de trabajo de Elementor Vamos directamente al interior de Pages. Esta es la lista de todas las páginas web que tenemos. Ahora, cuando instalamos Wordpress, venía con dos páginas web preinstaladas. El borrador de la política de privacidad, como puedes ver, es un borrador y una página web de muestra va a seleccionar esos dos, ir a este menú desplegable y pasar a la basura. En otras palabras, elimínelos. Ahora nos quedamos con una página de elemento de muestra que se generó durante el asistente de configuración de Elenta Esta es una buena página para usar para ver la visión general del espacio de trabajo elemental. Ahora para ir al Editor de Elementos, tenemos dos opciones. Podemos hacer clic en Editar con Elementa aquí mismo, o podemos ir a Editar aquí Encontrarás la misma edición con la opción elementor. Simplemente voy a hacer clic en esto, será redirigido al front-end donde ahora podemos echar un vistazo al espacio de trabajo elemental aquí mismo Aquí es donde está nuestro sitio web. Lo que sea que construyamos estará aquí mismo. Esto es como nuestra caja de herramientas. Tiene todo lo que necesitamos. Estos son elementos que podemos arrastrar a nuestro sitio web para utilizarlos. Por eso se llama Elementor. Nos proporciona elementos. Ahora tenemos paneles que contienen diferentes elementos. Si los derrumbo a todos, permítanme cerrar eso. Estos son todos los paneles que Elemento nos proporciona. Si los expandimos, este es un elemento contenedor porque elemento año pasado cambió a un sistema basado en contenedores de construcción de sus páginas web. Y veremos cómo usar estos contenedores. Si colapso eso, tenemos el panel básico. Este tiene los elementos más utilizados que puedes encontrar en cualquier sitio web. Tenemos un elemento de rumbo. Si lo arrastramos ahí mismo, como puedes ver, ese es un encabezado y podemos hacer doble clic y editarlo. Déjame cerrar eso. Tenemos un editor de texto, un botón, un divisor, tenemos un espaciador. Veremos cómo usar la mayoría de estos. Si colapsamos el panel básico y expandimos el panel pro, notarás que estos elementos tienen un pequeño candado en la esquina superior derecha. Eso básicamente significa que estos no son gratuitos. No se puede arrastrar y ponerlo aquí. Cuando intentas arrastrarlo, trae a colación este pop up para decirte que actualices. Ahora lo bueno de elementor es recordar cuando estábamos instalando elementor, vimos otros enchufes de terceros que proporcionan elementos extra No tienes que preocuparte de que no tengas acceso a estos pro elementos. Aún puedes acceder a elementos que pueden hacer la mayoría de estas cosas instalando los complementos relacionados con elementos de terceros que vimos cuando estábamos instalando elementor Y ya veremos cómo hacerlo porque dijimos que vamos a usar algunos de esos enchufes de terceros. Si colapso el panel pro, tenemos el panel general. Esto de aquí tiene cosas gratis, puedes arrastrar y soltar cosas aquí. Déjame colapsar eso, déjame volver aquí. Por supuesto, vamos a echar un vistazo a todos estos y ya van a ver cómo los usamos. Ahora te has dado cuenta si, por ejemplo, arrastro esto aquí, esto cambia a la configuración del elemento específico que acabas de soltar o al elemento que has seleccionado actualmente en tu espacio de trabajo. Si seleccionamos, este sigue siendo un encabezado de edición porque este es un encabezado. Si selecciono esto, recuerda que este era un carrusel de imágenes, esto cambia para editar carrusel de imágenes Eso significa que estos ajustes son para este carrusel de imágenes específico Si duplico esto haciendo clic derecho y duplicando y selecciono estos ajustes son para este carrusel de imágenes específico Si selecciono, estos ajustes son para este carrusel de imágenes específico Ahora cuando tengamos estos ajustes mostrados aquí y queramos agregar más elementos, simplemente podemos hacer clic en este icono y eso volverá a abrir la lista de elementos. Y puedes arrastrar lo que quieras para arrastrar ahí dentro. Observe que esto ha cambiado al botón Editar porque acabamos de soltar el botón. Es el elemento activo ahora mismo, otra cosa que quiero que veamos es un Navigator. Si golpeo control, tenemos un Navigator aquí mismo. Esto es básicamente una visión general de lo que tenemos aquí mismo en este espacio. Como puede ver, tenemos tres contenedores. Tenemos este contenedor, aquí hay otro contenedor, y aquí hay otro contenedor. Se trata de tres contenedores. En el tercer contenedor, tenemos un carrusel de imágenes y un botón Como puedes ver, el carrusel de imágenes y el botón. En este segundo contenedor, solo tenemos una celda carro de imagen. Si colapso eso y expando eso, tenemos una celda carro de imagen. Aquí tenemos dos elementos de encabezamiento. Si colapso eso y expando ese contenedor, tenemos dos elementos de rumbo. Ese es el Navegante. Y puedes simplemente, puedes cerrar ese control. Puedes hacerlo en cualquier lugar de la pantalla. Y flotará a lo largo de tu pantalla para que puedas ver otras partes. Aquí, déjeme ponerlo ahí mismo y cerrar eso abajo. Aquí tenemos el icono del modo responsivo. Este es el botón donde estamos acostumbrados para hacer que nuestro sitio web sea receptivo en diferentes tamaños de dispositivo. Aquí tenemos un historial, una lista de cambios que hemos realizado en nuestro sitio web. Y podemos seleccionar un punto en el tiempo y volver a eso. Eso cambia el estado de tu sitio web al estado en el que estaba cuando habías hecho ese cambio. Elimina todos los cambios que vinieron después de eso. Esa es una manera de poder deshacer muchos cambios que has hecho con los que no estás satisfecho. Podemos volver al momento de inicio de la edición y el sitio web está vacío porque así se veía en ese momento y veremos para qué sirven todos estos otros. Básicamente, eso es solo una rápida visión general del espacio de trabajo elemental a medida que avanzamos, a medida que trabajamos en las diferentes páginas web, diferentes secciones, te acostumbrarás a usar todas estas herramientas en la siguiente lección. Ahora comencemos con la sección de héroes. Te veré en breve. 8. Sección de héroes - Imagen de fondo: Ahora acabamos de tener una visión general rápida del espacio de trabajo elemental, pero ya no necesitamos esta página. Yo sólo voy a seguir adelante y darle ese menú de hamburguesas y luego salir. Vamos a decir dejar porque no necesitamos guardar los cambios. Allí se redirigirá al tablero como lo dijimos antes. Ahora volvamos a las páginas ahora. Podemos eliminar esto porque no lo necesitamos. Ahora agreguemos una nueva página haciendo clic en ese botón. Y vamos a darle un nombre. Llamemos a eso la página de inicio. Ahora vamos a ir a la plantilla y elegir elementor ancho completo Vamos dentro de Astra Settings, porque estamos configurando la página y la apariencia de la página está determinada por el tema que estés usando. Vayamos a los ajustes de Astra. Estos son los ajustes de Wordpress, pero estos son los ajustes de Astra. Lo que queremos es ancho completo aquí mismo. No te preocupes por estos ajustes. Solo se aplican cuando el diseño se establece en normal o estrecho. No nos importan estos porque lo hemos establecido en ancho completo. El mismo caso se aplica a la barra lateral. No queremos que nuestra página web tenga una barra lateral, configuramos en ninguna barra lateral. Entonces vamos al interior de elementos deshabilitados. No queremos el encabezado o pie de página de Astra, vamos a construir nuestros propios encabezados y pies de página deshabilitamos eso Y que solo podemos dejar eso intacto o simplemente podemos desactivarlo, pero realmente no importa. Aquí, publicó, Publicado. Ahora la página está lista. Ahora podemos seguir adelante y presionar Editar con Elementor y seremos redirigidos al front end donde ya podemos empezar a construirlo Ahora recuerda una cosa que dijiste es que elementor ahora usa un sistema basado en contenedores de diseño web Vamos a usar contenedores para construir nuestras diferentes secciones. Si pulsas este ícono más aquí, tendrá algunas estructuras pre hechas que puedes usar. Vamos a ir con este para la sección de héroes, si me cambio aquí, esto es lo que construí ayer mientras preparaba esto. Esta de aquí es la sección de héroes. Cada landing page debe tener una sección de héroe llamativa con tres elementos principales. Un encabezado que resume de qué se trata la página web y de qué se trata tu sitio web o negocio Una breve descripción exponiendo en el encabezado, botones de llamada a la acción Esas son las tres cosas que necesitas tener en tu sección de héroes. Lo que queremos hacer es antes que nada tener esta imagen de fondo en nuestra sección de héroes y luego agregar un encabezado con ese texto y los botones. Comencemos con la imagen de fondo en esta lección. Cambiando de nuevo aquí, esto es lo que tenemos. Y si seleccioné esto dice editar contenedor, eso significa que estamos editando todo este contenedor. Entraremos en estilo, tipo de fondo, seleccionaremos eso. Y debajo de imagen, vamos a subir una imagen para usarla como nuestra imagen de fondo. Diré subir archivos, Seleccionar archivos serán redirigidos a esta carpeta llamada Website Assets Te proporcionaré esto como una carpeta zip para que puedas seguir junto con estas imágenes que preparé específicamente para esta clase. Mira justo debajo de este reproductor de video en la pestaña Proyectos y Recursos. Haz doble clic en eso y quiero usar esta imagen de sección de héroe. Es 1920 por 108 píxeles, eso es Full HD. Voy a hacer doble clic en eso, y ahora está activo. Diré que seleccione. Ahora se agrega. Si bien todavía tenemos el contenedor seleccionado, tenemos que venir y decir repetir. No repita, para que esta imagen no se repita. También queremos que se cubra. Para llenar todo el contenedor, necesitamos volver al interior del diseño, cambiar esta altura a VH y decir 100. Ahora llena todo el espacio así como así. Lo segundo que queremos hacer es agregar esta superposición oscura porque la nuestra es muy brillante. Si bien esto todavía está seleccionado, coincidamos el estilo, contrayamos el fondo y luego expandamos el fondo, superponga, Tipo de fondo, seleccione color. Esta vez queremos arrastrar esto al rincón más oscuro. Podemos incrementar la intensidad del negro en la medida que queramos. Lo dejaré en ese 0.77 Pero siéntete libre de jugar con la oscuridad y decir actualización Ahora esto nos da la oportunidad de conocer estos cambios de vista previa. Si queremos ver lo que tenemos, podemos previsualizar los cambios y eso abrirá una nueva pestaña que podamos ver. Ahora tenemos una imagen de fondo muy bonita en nuestra sección de héroes. Así es como agregar una imagen de fondo. En la siguiente lección, veamos cómo agregar este texto. Te veré en breve. 9. Sección de héroes - Texto: Ahora es el momento de agregar el texto de la sección héroe. Empecemos por el rubro, Comidas sabrosas. Y sólo voy a copiar todos estos porque apenas me gusta la redacción que usamos. Si vuelvo aquí, volvamos con nuestro editor. Ahora recuerda agregar más elementos. Todo lo que tenemos que hacer es hacer clic en ese icono ahí arriba y revelará los paneles. Y queremos agregar un encabezado. Arrastraré y soltaré un encabezado ahí mismo. Como puedes ver, está alineado a la izquierda por defecto, así podemos alinearlo en el medio, así como así. Ahora podemos cambiar este texto. Quiero usar las sabrosas comidas. Voy a copiar eso. Comidas Sabrosas, Haga doble clic aquí y peguela ahí. Ahora la razón por la que no he hecho doble clic en esto y lo pegué aquí es porque vendrá con cualquier formato que tuviera en el lugar del que lo copiaste ¿No quieres eso? Déjame deshacer eso. Porque como puedes ver, mira todo el formateo, Esto es todo CSS y no quieres esto. Si hago esto, si lo pegas aquí, no viene con el formato que tenía. Muy bien, lo siguiente que queremos hacer es agregar un editor de texto que es básicamente un párrafo. Como puedes ver, esto ha cambiado a editor de texto porque ese es el elemento activo. En primer lugar, podemos ir dentro de estilo y alinearlo al centro, así como así. Ahora notarás que es gris. Si bien todavía estamos bajo estilo, podemos decir texto color blanco. Déjame cambiar aquí. Sabrosa comida de clase mundial. Déjame copiar ese control C, y puedo simplemente duplicar esto. Si bien esto todavía está seleccionado, puedo hacer clic derecho en Duplicar. Y ahora tenemos dos. Puedo seleccionar esto, entrar aquí, y pegar eso ahí, actualizar eso. Ahora claro, te darás cuenta aquí en la sección de héroe final, todo está alineado en el medio verticalmente. La distancia entre aquí y aquí es similar a la distancia entre aquí y el fondo. Eso queremos en este sistema basado en contenedores. Cuando seleccionamos el contenedor en sí y vamos a layout, ahora podemos justificar el contenido. Podemos decir que lo queremos en el centro. Como puede ver, esta línea corta en el medio. Actualmente, por defecto esto se establece en la parte superior. Como puedes ver, la larga línea corta en la parte superior. Podemos colocarlo en la parte inferior, media o superior. Lo queremos en el medio, así como así. Lo siguiente que queremos hacer ahora es darle estilo a nuestro texto. En primer lugar, comencemos con clase mundial, adentramos en estilo. Vamos a la tipografía. En primer lugar, vamos al color del texto, cámbielo a blanco. Ampliar esa tipografía. Por cierto, si quieres deshacerte de algún pop up como este, da click en cualquier parte de aquí, tipografía, queremos cambiar No recuerdo el nombre de ese frente. Déjame garabar hacia abajo. Es esto. Eso no es todo, pero ya podemos usar eso. Podemos aumentar el tamaño a tal vez ese punto. Hagamos algunos cambios en las comidas sabrosas. Selecciona ese estilo, cámbialo al color que quieras. Voy a cambiar ese color dorado, ese es amarillo en alguna parte de ahí. Ese es el código. Ahora recuerda, una vez que configuras este código, siempre es bueno seguir siendo consistente. cualquier lugar donde uses este color amarillento, simplemente copia este código y lo pegas en esa otra configuración Ahora que hemos decidido que este es nuestro color de fuente para el encabezado, tal vez algo menos chillido en algún lugar de ahí Ahora volvamos al tamaño de la tipografía. También queremos cambiar la familia de fuentes a Montserrat, mi fuente favorita Cambiemos los pesos de fuente a negro. Eso es un audaz muy audaz. Ahora aumentemos aún más el tamaño, tal vez hasta ese punto. Ahora te darás cuenta aquí que tenemos demasiado espacio. Si bien esto todavía está seleccionado, podemos ir a romper el margen avanzado. Y luego en la parte superior, vamos a reducir el margen hasta algún lugar ahí. Hagamos también lo mismo para el fondo, que podamos acercar la descripción, actualizar eso. Revisemos ahora los cambios. Eso es lo que tenemos. Echemos un vistazo a nuestra referencia. Creo que estamos bastante cerca de la referencia. De hecho, esto me gusta aún más. Ahora así es como agregar el texto en la siguiente lección. Veamos cómo agregar y darle estilo a los botones. Te veré en breve. 10. Sección de héroes - Buttons: Ahora es el momento de agregar los botones volviendo al interior de nuestro editor. Vamos a entrar aquí y seleccionar un botón y soltarlo ahí mismo. Ahora te darás cuenta, claro que en nuestra referencia están en el medio y lado a lado. ¿Cómo lo hacemos? Porque si simplemente duplicamos esto, estará debajo de ese botón. Recuerda, este es un sistema basado en contenedores, podemos usar un contenedor. Lo bueno de los contenedores es que podemos elegir la dirección de los elementos dentro del contenedor. Si entro aquí y selecciono un contenedor y lo pongo justo debajo de ese texto en el contenedor, ahora podemos estos dos elementos ahora me dejan simplemente arrastrar esto y ponerlo ambos dentro de este contenedor. Si selecciono eso, como pueden ver este es el contenedor Ed, ambos están dentro. Ahora, como tenemos el contenedor activo aquí bajo dirección, podemos decir que no queremos que bajen las direcciones para ser de izquierda a derecha. Voila. Y recuerden, también podemos justificar el contenido. Ahora podemos ponerlos a la izquierda, la derecha, o al centro. Mira la larga línea golpeando justo en el medio. Si seleccionamos eso, los hemos puesto en el medio. Ahora vamos a seguir adelante y estilizarlos. Si selecciono este primer botón, antes que nada podemos cambiar lo que dice. ¿Qué dice? Abrir menú y ordenar. Sigamos adelante y digamos menú abierto y orden. Seleccionemos el segundo. Reservaciones de mesa. Reservaciones de mesa. Ahí vamos. Seleccionando este primer botón, puedes ir al estilo. Queremos darle el color dorado. Recuerda que queremos seguir siendo consistentes. Escogeremos este color dorado aquí seleccionando ese estilo de texto. Después copie este control o simplemente haga clic derecho y copie. Después selecciona esto Ir dentro de estilo y el botón de control de color V. Pégalo ahí. Y ahí vamos. Para este, creo que es blanco, negro con fuente negra. Seleccionaré este estilo botón color blanco. Y la fuente es negra. Texto color negro, así como así. Para este, el color del texto también es negro. Ahora notarás que tenemos bastante espaciado aquí desde el borde hasta el texto. También tenemos esas esquinas redondeadas para el radio del borde. Para las esquinas redondeadas, solo podemos darle un radio de borde de 50, así como así. Hagamos lo mismo por este 50. Ahora aumentemos ese espaciado. Y eso es todo sobre el acolchado. Rompamos ese enlace de la izquierda, podemos darle digamos 60 a la derecha. 60, inferior 20 y superior 20. Repetimos lo mismo para esto. Vamos a romper eso. En primer lugar, vamos a darle 602,060.20 actualización que previsualizar los cambios y La sección de héroes ahora está empezando a tomar forma. En la siguiente lección, agreguemos un encabezado. Este es el encabezado. Está compuesto por el logotipo y la barra de navegación, o la barra de navegación. Te veré en la siguiente lección. 11. Cabecera - añade el logotipo: Ahora es el momento de agregar el encabezado o la sección de navegación. Lo primero que queremos hacer es agregar el logo volviendo a nuestra estación de trabajo. Sigamos adelante y salgamos de aquí. Ahora, no estamos agregando el encabezado aquí dentro de la página de inicio que estábamos editando. Vamos a salir de aquí porque vamos a estar usando un plug in diferente para construir el encabezado. Bien, ahora salgamos. Y ahora estamos dentro del tablero. Vamos dentro de plug ins, agreguemos nuevos, digamos Elementor Recuerda que decimos que tenemos desarrolladores de terceros que han creado increíbles complementos Elementor que nos permitirán usar algunas características increíbles que no están disponibles con una versión gratuita de element Uno de ellos es el elemento Element agrega. Como puedes ver, cuenta con más de 1 millón de instalaciones activas, un testimonio de lo popular que es. También vamos a usar efectos de encabezado pegajoso para el elemento, pero llegaremos a eso. En primer lugar, sigamos adelante y activemos el elemento Skit element Add que agrega este menú a esta lista Podemos seguir adelante y decir encabezado, pie de página seleccionar. Eso será redirigido a este asistente de configuración. Lo que queremos es seleccionar aquí la configuración avanzada, ya que agrega algunos widgets más que actualmente están activados. Si vamos con Básico, diré Avanzado si elijo, como pueden ver esto apagado, digo Avanzado, esto se activa automáticamente. Y también lo son otros escenarios más aquí abajo. Avanzado. A continuación, digamos siguiente paso, siguiente paso puedes compartir datos de diagnóstico no sensibles. A continuación, siguiente paso, guardar esos cambios. Ahora estamos bien. Ahora vamos al interior del encabezado pie de página. Ahora como puedes ver, no tenemos ningún encabezado o pie de página creado Diré agregar nuevo, voy a llamar a esto, solo puedes darle cualquier nombre y no tienes que teclearlo de la manera en que lo he escrito Sólo puedes decir mi encabezado. Realmente no importa. Simplemente me gusta este estuche de camello. Es un encabezado. Cuando estemos construyendo el pie de página elegiremos pie de página. Pero ahora mismo es un encabezado y queremos que sea visible en todo el sitio. Estas otras opciones solo están disponibles en la versión premium. Digamos que queremos que esté activo cuando estés haciendo algún mantenimiento. Y quieres que tu menú no sea visible. Puedes activarlo, pero ahora mismo queremos que esté disponible, visible en la página web. Una vez que hayamos hecho eso, podemos ir directamente a comenzar a editarlo. Pero solo quiero guardarlo primero que nada, para que lo veas aquí mismo. Cuando construimos otro pie o cabecera, aquí habrá una lista. Ahora podemos seguir adelante y decir Editar. Surgirá el mismo pop up. Editar contenido. Aquí estamos. Por supuesto, debido a que este es el constructor elemental, todavía tiene el mismo constructor, pero ahora estamos en un área completamente diferente del sitio web. No estamos en la página de inicio, estamos en el editor de encabezado. Ahora sigamos adelante y agreguemos sección y esta vez queremos agregar esta estructura que tiene dos contenedores dentro de ella. Se trata de un contenedor exterior con dos contenedores en su interior porque por supuesto como pueden ver tenemos el Loco a la izquierda y la barra de navegación a la derecha. Esos son dos contenedores. En primer lugar, podemos seleccionar este contenedor y decir 50% que queríamos ocupar tal vez 30% Asegurarse de que esto se establece en porcentaje no píxeles o Ms porcentaje 30% Eso significa que deben ser 70% seleccionar este porcentaje, 70% ocupan el 100% del espacio que tienen. Con eso, permítame seleccionar ese letrero o simplemente haga clic en este para que aparezca los elementos y la imagen. Voy a seguir adelante y subir desde nuestra carpeta Activos. Aquí está el logo que preparé. Abre Seleccionar, y ahí vamos. No es necesario establecer estos ajustes del con manualmente seleccionando eso, ingresándolos aquí. También puedes simplemente venir aquí y arrastrar y cambiar el tamaño a tu gusto. Actualiza eso. Revisemos los cambios. Ahí está nuestro logo, claro, se ve raro porque aquí mismo está sobre un fondo oscuro, pero aquí está sobre un fondo blanco básicamente. Así es como agregar tu logo a tu sitio web. Pero antes de irnos, volvamos aquí y seleccionemos el elemento de imagen que es el logo aquí. Queremos que sea un enlace, URL personalizada, y yo lo haré el enlace de mi sitio web. Ahora, por supuesto, copiarás tu URL. Copia eso y pegarlo aquí. Actualiza eso, previsualiza los cambios. Ahí vamos. Ahora, cuando se ciernen sobre él, se puede hacer clic en él Cuando alguien haga clic en él, serán llevados a la página principal. Pero no hemos establecido nuestra página de inicio. Nos han redirigido a la página de inicio predeterminada proporcionada por Wordpress, lo que me lleva a darme cuenta de que olvidamos configurar esa página de inicio muy rápidamente Cambiemos a esta página de vista previa y vayamos a Herramientas del tablero. Sin ajustes La página de inicio de lectura muestra una página estática que es la página de inicio que creamos, guardar los cambios. Ahora si vuelvo aquí y refresco con control R y luego previsualizo los cambios. Si pasamos el cursor sobre esto y hacemos clic en él, porque hemos dicho que nuestra página de inicio será redirigida a la página de inicio que hemos construido Y eso es lo que queremos. Básicamente, así es como agregar el logotipo y hacer que se pueda hacer clic en él Redirige a alguien de vuelta a casa. En la siguiente lección, veamos cómo agregar la barra de navegación. Te veré en breve. 12. Cabecera - añade una barra de navegación: Ya es el momento de agregar la barra de nav. Volviendo a nuestro editor, déjame cerrar esta barra de navegación y esta parte, ahora nos quedamos con esto. Esta es la página de vista previa. Volviendo aquí, sigamos adelante y digamos aquí, vamos a escribir nav. Te darás cuenta aquí tenemos menú de navegación, pero tiene un candado porque este viene con el panel pro de elemento. Pero ahora una de las razones por las que agregamos elementos kit luz fue porque tiene un menú de nav gratuito. Por eso mencioné que los plug ins de terceros creados para elementor son muy impresionantes Permiten tener acceso gratuito a funciones que de otro modo tendrías que pagar para usar con element. Arrastraré este menú de navegación de elementos ahí mismo y como puedes ver no aparece nada aquí porque es el elemento activo. Esto cambia al menú de navegador del kit Edit elements porque estamos editando ese elemento. Pero una cosa que notarás en el menú de selección de contenido es que no tenemos ningún menú listado aquí. Lo que significa que tenemos que ir a crear un menú. Déjame actualizar eso. Ahora quiero venir aquí a esta página de vista previa. No obstante, ese derecho se filtre el enlace abierto en nueva pestaña porque quiero dejar esto intacto e ir al tablero para que podamos crear un menú. Y luego vendremos a mostrar ese menú aquí. Volviendo a los menús de apariencia del tablero, podemos darle un nombre, mi menú, así como así. Hagámoslo el menú principal, Menú Crear. Básicamente, el menú es una lista de los elementos que desea mostrar como la barra A. Estos son los elementos del menú, la casa sobre, la galería y el contacto. En esencia, estas son páginas web lo que nos dice que necesitamos crear un par de páginas como puedes ver aquí mismo, déjame cerrar esto. Gestor de contraseñas, como puedes ver aquí mismo, agrega elementos del menú. Los elementos del menú pueden ser páginas web, yo colapso que también pueden ser publicaciones. Por ejemplo, si tienes una entrada de blog o un artículo, puedes convertirla en un elemento del menú. Pueden ser enlaces personalizados. Pueden ser categorías, lo que quieras, pero queremos usar páginas como elementos del menú. Déjame seleccionar eso por ahora. Agregar al menú. Ahora como puedes ver, lo hemos agregado al menú. Déjame guardar el menú. Ahora si volvemos aquí y damos clic derecho a recargar. Recargar esta página, este editor. Si selecciono el elemento nav, una vez más vaya a abrir este menú desplegable. Ahora tenemos mi menú. Porque tenemos un menú creado. Ahora está mostrando solo la página de inicio, porque solo tenemos un elemento del menú. Actualicemos eso. Volviendo aquí, necesitamos agregar más elementos del menú. Iré dentro de las páginas, colocaré el cursor sobre eso y luego agregaré una nueva página Simplemente haré clic derecho en Abrir enlace en una nueva pestaña. Abrir enlace en nueva pestaña. Abrir enlace en nueva pestaña. Estas son tres pestañas del creador de la página. Voy a llamar a eso acerca de la página. Por ahora, vamos a seguir adelante y publicar sin hacer ninguna configuración. Esta es la galería ph. Entremos aquí y digamos que los contactos publican. Ahora si cierro todas estas nuevas páginas y vengo aquí y refresco. Ahora tenemos tres elementos más que podemos ver todos. Voy a añadir estos tres. Agregar al menú. Ahora tenemos tres, puedes arrastrar elementos así y guardar menú. Déjame decir ese menú, cierra eso. Ahora si volvemos al editor y controlamos R, como puedes ver, ahora tenemos todos estos elementos del menú. Ahora, necesitan estar a la derecha. Mientras se selecciona esto, podemos decir posición horizontal del menú, ¿verdad? Actualiza eso. Revisemos los cambios. Ahí vamos. Ahora una cosa que notarás esto es que estos están muy espaciados y parecen estar más cerca de los bordes. Volviendo aquí, lo que podemos hacer es, recuerden que estamos tratando con contenedores. Ahora bien, si seleccionamos este contenedor exterior que los sostiene y decimos ancho completo o lo hacemos porcentaje, 80% claro, vamos darle también los porcentajes correctos a estos dos contenedores. Seleccionando esto, vamos a darle tal vez 25% Deberías ocupar el 25% del espacio, y esto debería ocupar el 75% restante que empuja el menú hasta el final. Pero ahora esto es demasiado grande. Seleccionaré el elemento de imagen en sí, seleccionaré eso. Esto cambia a Editar imagen, y ahora bajo estilo, podemos darle a esto tal vez un ancho del 50% de ese espacio, 50% Volviendo al interior del contenido, vamos a darle una actualización de alineación izquierda que. Revisemos los cambios. Ahí vamos. Muy bien, ahora volviendo al interior de las páginas, solo queremos ver cómo se ve la página de inicio. Entonces seleccionaré Ver, y eso es lo que tenemos. Ahora claro, te darás cuenta aquí en nuestro sitio web de referencia, no tenemos ese fondo feo blanco. ¿Cómo logramos este trasfondo transparente? Cuando te desplazas, se vuelve negro. ¿Cómo logramos eso? Eso es lo que vamos a hacer en la siguiente lección. Te veré en breve. 13. Cabecera transparente y pegajosa: Ahora es el momento de hacer que nuestro encabezado pegajoso y transparente. Justo como aquí. Ahora mismo, se ve increíble sin ese fondo blanco feo. A ver cómo se hace eso. Volviendo a nuestro espacio de trabajo aquí mismo, vayamos al tablero que queremos instalar. Solo cierra todo el Bien, déjame justo ahora aquí, déjame ir al tablero de instrumentos. Agregar nuevos plugins enchufables, añadir nuevos que queremos instalar. Una vez más solo escribe Elementor. Traerá todas las adiciones relacionadas con Elementor. El que necesitamos son los efectos de encabezado pegajoso para elementor Como su nombre indica, proporciona efectos de encabezado pegajosos para tus encabezados activen eso, ahora está activo. Ahora volviendo a Elements kit header footer, tenemos nuestro header edit con Elementor Si selecciono el contenedor que contiene el encabezado seleccionado, vaya a Avanzado. Si no puedes seleccionar nada aquí, recuerda que siempre puedes presionar control para que aparezca el navegador y ahora puedes seleccionarlo aquí. Puedo seleccionar este contenedor con tan solo seleccionar este. Esto cambia para editar contenedor. Vamos a los efectos de encabezado pegajoso. Vamos a habilitar eso. Cerremos este navegador, actualicemos eso. Bien, solo revisemos los, pero no los cambios en esto. Quiero seleccionar. En primer lugar, se daría cuenta de que estos han sido empujados hasta el borde. Vamos a arreglar eso. Sabía que iba a pasar. Ahora bien, si elegimos esto, si hacemos clic en eso, como pueden ver, todavía no hemos resuelto esto. Si vuelvo aquí, queremos decir actualización de cabecera transparente que previsualice los cambios. Ahora se efectúan los cambios. Si volvemos a la página de inicio, ahora tenemos nuestro encabezado sin ese fondo blanco, pero aquí tenemos algunos problemas. En primer lugar, estos han sido empujados hasta el borde mismo. Otra cosa, si recargamos esta página, notarás algún feo fondo blanco antes de que estos hermosos fondos se carguen Una vez más, seleccionemos eso. Espero que hayas visto que no queremos eso, queremos algo como esto. Vayamos a nuestra referencia. Si vuelvo a cargar esta página, muy agradable, sutil recarga de la Una vez más, exactamente eso es lo que estamos buscando. Volviendo aquí, lo primero que queremos hacer es resolver este problema aquí. Entremos aquí, seleccione este menú, Esta nava vaya al estilo Primero que nada queremos darle a estos elementos del menú el color correcto. Necesitan ir al estilo de elemento de menú, contraer, envoltorio de menú, Expandir elemento de estilo de elemento de menú. El color del texto debe ser blanco. No lo podemos ver por el fondo blanco en el hover. Queremos que sea de oro. Espero que podamos. Si queremos editar esta página ahora mismo, solo podemos subir aquí. Cualquier página que hayas creado con elementor se puede editar subiendo aquí Si es la edición de la página, haga clic en Editar con Elementor Si es el encabezado o pie de página, haga clic en mi encabezado o pie de página editar con Elementor La razón por la que estamos abriendo esto es porque queremos agarrar este color dorado. Seleccionaré esa copia de estilo de texto que incluso pueda cerrarla. Ahora volviendo aquí, recuerden que habíamos seleccionado la barra de nav. Fuimos al estilo de elemento de menú normal. Es blanco sobre hover. Tiene que ser de color dorado al pasar el cursor. Ahora, ¿ese color dorado cuando está activo? Siempre que la página esté activa, también tiene que ser ese color dorado. Actualiza eso. Ahora si tenemos una vista previa de eso, claro que no queremos previsualizar la barra de menús, queremos ir a la página de inicio para verla así. Ahora bien, esto se ve bien. La otra cosa es que tenemos que empujarlos hacia adentro. Ahora recuerda cuando establecemos la transparencia a. Activo. Cuando habilitamos la transparencia, éstas fueron automáticamente empujadas hacia un lado. Ahora lo que podemos hacer, intentemos y seleccionemos. Esto va a diseñarse como puedes ver, está al 80% pero sigue tocando el 100% de la pantalla. Lo que podemos hacer es agregar un nuevo contenedor, agregar un contenedor aquí al costado. Ahora tenemos tres contenedores alineados uno al lado del otro, pero queremos arrastrar estos dos contenedores a este otro contenedor, a ese nuevo contenedor. Ahora ambos están dentro del nuevo contenedor que acabamos de agregar. Ahora vamos a seleccionar el nuevo contenedor y cambiar la dirección de izquierda a derecha. Ahora está de izquierda a derecha, pero ahora está al 100% Queremos que sea 80% porcentaje, 80% ancho. En primer lugar, digamos ancho completo, luego porcentaje 80% Como puedes ver ahora está ocupando el 80% del ancho. Por supuesto, ahora podemos alinearlo dentro de este contenedor exterior seleccionando el contenedor exterior e yendo aquí y alineando lo que esté dentro al centro, así como así. Ahora esto está en el centro del contenedor exterior. Espero que entiendas a estas alturas los contenedores, estos siguen ocupando los porcentajes que les dimos. Y eso es exactamente lo que necesitábamos. Actualizando esa vista previa, los cambios. Ahora se puede ver bien situado, yendo a la página principal, precisamente lo que la necesitamos. Pero ahora un problema más. Recargar esta página. Todavía hay ese problema con ese fondo blanco. Lo que podemos hacer es editar esta edición de fondo con elementor la propia página de inicio, no el encabezado Bien, vamos a seleccionar este contenedor exterior. Y como pueden ver, no puedo seleccionarlo. Si golpeo control, yo, traeré a colación el Navegante. Y ahora puedo seleccionar el contenedor. Ahora está seleccionado. Ir a Efectos Avanzados de Movimiento. Queremos que se desvanezca. Así como así. Actualiza eso. Ahora vamos a revisar los cambios. Eso es exactamente lo que necesitábamos una vez más. Ahora carguemos esto. Exactamente. Eso nos lleva al final de la pegajosa cabeza de efectos de la barra de navbar Ya terminamos con la sección de héroes. Lo siguiente que queremos hacer es empezar a trabajar en la sección del cuerpo. Te veré en breve. 14. Fondo de encabezado pegajoso: Ahora es el momento de trabajar en la sección del cuerpo, cambiando a nuestro sitio web de referencia aquí como puedes ver, tenemos esta bonita imagen, algún texto de encabezado, algún botón de descripción. Esta sección de tres columnas. Básicamente lo que queremos hacer es ante todo, crear estas áreas básicas. Después en la siguiente lección, estaremos trabajando en este menú. En la lección que sigue, crearemos la galería. Sigamos adelante y comencemos con las partes básicas, como esta sección. Volviendo a nuestra área de trabajo, terminamos con un encabezado. Pero antes de irnos, recuerda si miras esto, tiene un fondo negro. Cuando empezamos a desplazarnos, mira el logo, se encoge Eso es algo que olvidé mostrarte. Si seleccionamos el contenedor aquí y entramos en Avanzado. Si seleccionamos el contenedor aquí y entramos en Avanzado, vamos a ir a Efectos de encabezado pegajoso, color de fondo, el color al que queremos cambiar. Una vez que empecemos a desplazarnos, queremos que sea negra Queremos encoger el logo. También vamos a reducir el encabezado al 70% de su tamaño, porque mirando nuestra referencia aquí, se está reduciendo Vamos a encogerlo al 70% Y podemos reducir el logo a tal vez, digamos que el 60% actualice eso. A ver si lo que tenemos aquí, carguemos eso. Bien, ahora no tenemos suficiente contenido aquí abajo para desplazarnos más allá de eso. Sigamos adelante y editemos esta página con elementor para que podamos ver si podemos desplazarnos más Desplazándose hacia abajo, sigamos adelante y agreguemos un contenedor de doble columna mientras aún está seleccionado Vamos dentro de Avanzado. Vamos a romper este margen aquí arriba y darle un margen superior de 100. Así podremos crear algún espacio entre esta sección y la sección héroe 100. Ahora tenemos ese espacio, actualice eso. Ahora si tenemos una vista previa de esto, podemos desplazarnos. Como pueden ver, eso es lo que tenemos. Ahora bien, esto no está correctamente alineado. Volvamos a la configuración del encabezado. Seleccionemos el contenedor que contiene el logotipo, este contenedor aquí. Vamos a alinearlo al centro verticalmente como lo has visto moverse. Hagamos lo mismo con la barra de navegación. Vamos a alinear en el centro, como esa actualización. Ahora si cargamos la página de inicio y nos desplazamos. Como puede ver, tenemos un encabezado pegajoso de aspecto agradable. Ahora con eso hecho, creo que podemos llamar a esto una lección y pasar a la siguiente lección, donde ahora seguiremos trabajando en las secciones básicas. Ya voy a ver. 15. Sección del cuerpo - Básico 1: Recordarás en la lección anterior, agregamos una sección y le dimos un margen de 100. De ahí es de donde seguimos. Diré editar con Elementor, pero antes de editar con Elementor, solo quiero cerrar este encabezado Déjame simplemente salir al tablero de instrumentos. Dejémoslo ahí mismo. Ahora, cambiemos a esta pestaña. Cierra esta. Edita con Elementor. Aquí vamos. Aquí está la sección que agregamos a la izquierda. Quiero deshacerme de este navegante. Hay una herramienta práctica que olvidé habilitar que siempre me parece muy útil haciendo clic en ese menú de hamburguesas. Vayamos a Preferencias del usuario Manijas de edición. Ahora, cuando flote sobre estas esquinas, no notarás que nada cambia Pero si habilitamos esos manejadores de edición, trae algunas herramientas muy útiles que hacen que tu trabajo sea mucho más rápido. En lugar de hacer clic derecho sobre esto e ir a eliminar, simplemente puedo pasar el cursor sobre él y eliminarlo de inmediato Y haz eso, puede que no parezca mucho, pero una vez que empieces a usar el elemento una y otra vez, te darás cuenta de que es muy útil con eso fuera del camino, haré clic aquí y diré que quiero arrastrar un elemento de imagen aquí mismo aquí dentro. Queremos que estemos comiendo sano. En lugar de agregar un nuevo elemento de encabezado, puedo simplemente duplicar esto al pasar el mouse sobre eso. Y luego eso. Después arrastra esto y suéltalo ahí. Déjame copiar esto. Por supuesto, estarás escribiendo porque no tienes ningún lugar para copiar y pegar eso. Ahora, por supuesto, esto es demasiado grande. Si bien todavía está seleccionado, iré al estilo. En primer lugar, cámbiala a cualquier color oscuro que quieras. Digamos 111, está bien. Da click ahí para deshacerte de eso, Entonces, tipografía. Utilicemos nuestro en algún lugar ahí. Vamos al contenido a la izquierda, alinéelo, vamos a tipografía de estilo Reduzca la altura de la línea, no está demasiado espaciada. Ahora te darás cuenta de que este tiene la configuración de margen que teníamos en esto. Recuerda, reducimos el margen en la parte superior e inferior mientras aún está seleccionado. Vayamos a avanzado. Volvamos esos a cero, así como así. Otra cosa que queremos hacer es seleccionar este contenedor para la justificación. Pongámoslo en el centro verticalmente. Sigamos adelante y seleccionemos ese elemento de imagen. Pongamos una bonita imagen ahí dentro. Se utilizó una imagen vertical. Esto es. Sí, voy a hacer doble clic en la imagen dos. Por supuesto que puedes usar la imagen que quieras usar. Seleccione eso. Ahí vamos. Ahora esto tiene esquinas afiladas y esta tiene esquinas redondeadas. Si bien esto todavía está seleccionado, iré al radio de borde de estilo 20, así como así. También hagamos clic en esto y arrastremos un editor de texto o un párrafo debajo del encabezado. Por supuesto, recuerda que necesitamos un botón aquí mismo. En lugar de rehacer un botón y darle estilo, en lugar de agregar un botón aquí mismo y darle estilo de nuevo, podemos simplemente venir aquí y duplicar esto y arrastrarlo aquí Entonces mientras todavía está seleccionado, podemos cambiar eso para leer más, actualizar eso. Ahora bien, si quieres un poco más espaciado entre la imagen y el texto, solo tienes que seleccionar el contenedor que está conteniendo los dos contenedores que están conteniendo el contenido diferente, este contenedor y huecos, podemos decir 50, Eso es un hueco de 50 entre estos dos contenedores. Actualiza eso. Revisemos los cambios. Ahí vamos. Está empezando a tomar forma. La siguiente parte que estamos creando es esta Y S. Esto es algo que podemos hacer muy rápido. Vamos a entrar aquí. Por supuesto, podemos simplemente duplicar eso porque ya tiene un bonito margen en la parte superior. No queremos volver a empezar a configurar. Element te permite no repetirte. Una vez que creas un elemento, puedes seguir duplicándolo y cambiándolo. Ahora que hemos duplicado esto, tiene ese margen. Pero obtenemos, vamos a deshacernos de este contenedor de imagen. Ahora nos quedamos justo con esto. Por supuesto, podemos hacerlo al 100% y el layout al 100% Como puedes ver, es más pequeño. Seleccionando este encabezamiento, antes que nada, pongámoslo en el centro. Vamos a la tipografía. Vamos a darle tal vez algo como 50. Después vuelve al contenido. ¿Por qué? Seleccionemos este editor de texto. Ir a style middle align. Ese mismo caso aplica al botón, selecciónelo y la alineación del contenido. Espera, aquí no tenemos botón. Tenemos la sección de tres columnas. Cierra eso. En primer lugar, actualicemos eso. Aquí dentro. Podemos agregar un contenedor justo debajo del editor de texto. Eso es un contenedor dentro del contenedor. Podemos agregar tres contenedores más, Eso es un contenedor dentro del contenedor. Podemos agregar un cuadro de iconos así como así. Ahora, antes de darle estilo, solo quiero mostrarles por qué añadimos que flotando sobre el contenedor que contiene el contenedor, el cuadro de iconos Duplicemos eso una vez más. Ahora tenemos tres contenedores dentro de este contenedor. Todo lo que tenemos que hacer es seleccionar el contenedor que los sostiene y cambiar la dirección de izquierda a derecha así. Pero ahora lo que queremos es seleccionar esto y darle estilo. Entra al estilo. En primer lugar, queremos que el color sea, no tengo ese amarillo seleccionado. Iré a seleccionar esta copia de estilo de botón. Seleccione este icono de estilo, Pegar al pasar el cursor. Queremos que sea negra. Entonces digamos que era 111, así como así. También podemos ahora ir al color del título tipográfico, Vamos a mantenerlo ese color Vamos a mantenerlo ese También podemos agregar el espaciado entre los dos. Y ahí vamos. Ahora te toca a ti cambiar el contenido de esto. Podemos cambiar este icono yendo a Contenido, seleccionándolo. Entonces tal vez eligiendo ¿qué elegiremos? Insertar. Ahora podemos eliminar estos dos, luego duplicar esto dos veces, actualizar eso. Ahora ya puedes llegar a esto y cambiar este ícono a tal vez por algo más como pimienta y ahorrar dinero o algo por el estilo. Actualización. Vista previa de los cambios. Ahí lo tenemos. Creo que nos detendremos ahí mismo para esta lección solo para que no la hagamos demasiado larga. Y continuaremos en la siguiente lección. Te veré en breve. 16. Sección del cuerpo - Básico 2: Bienvenido de nuevo. Ahora es el momento de continuar desde donde lo dejamos. Recuerda si cambiamos a aquí, ahora estamos creando esta sección. Esto es muy fácil. A estas alturas ya debes poder crearlo, pero sigamos adelante y hagamos eso. Volviendo a nuestro editor de, vamos a duplicar esta sección solo para asegurarnos de que tenemos algún margen uniforme en la parte superior. Te darás cuenta aquí tenemos un bonito acolchado en la parte superior y en la parte inferior. Vamos a agregar un poco de relleno aquí mismo, seleccionando este contenedor avanzado. Rompamos este relleno predeterminado en la parte superior. Vamos a darle 50, Ahora vamos a darle 100, claro. Primero que nada eliminemos eso, volviendo atrás y seleccionando esta sección, una vez más para el fondo. También vamos a darle 100 mientras todavía está seleccionado, vamos a ir al estilo, tipo de fondo, darle un color, tal vez gris así. ¿Qué más tenemos? También tenemos ese texto. Recuerda que no queremos repetirnos. Podemos simplemente duplicar esto, arrastrarlo hacia abajo, y ponerlo justo encima de Y S. Ahora, mientras aún esté seleccionado, iré al margen avanzado. Reduzca el margen inferior así como así. Esta palabra es deliciosa. Copia eso mientras aún esté seleccionado. Contenido, pega eso delicioso. También copiemos esto. Control de color amarillo o color dorado C. Selecciona ese estilo de color de texto, pega eso ahí. Esto dice comidas saludables para todos. Copia eso, Selecciona esta Y S. Pégala ahí. Esto es lorem ipsum. Entonces eso está bien. Creo que nuestros encabezamientos son un poco demasiado grandes. Si no me equivoco, vamos a reducirlos a algo así como 40. Ahora digamos 45. 45 está bien. Seleccione esto también. Volver al 45, creo. Ahora estamos bien. Actualiza que ahora en la lección después del siguiente vamos a estar trabajando en el menú. Podemos mostrar así, pero antes de llegar ahí, vamos a crear esta sección porque se ve muy similar a esta. Lo único que tenemos que hacer es agregar esta imagen de fondo volviendo aquí. Duplicemos eso. Sigamos adelante y seleccionemos mientras aún esté seleccionado, Ir al estilo. Esta vez no es color, es la imagen que estamos agregando los archivos de subida de imagen spaghetti. Veamos, ¿dónde está esa imagen? Podemos agregar cualquier imagen. Creo que ya está, imagen 35. Ahí vamos. Seleccione eso. Impresionante. Ahora podemos venir aquí a posicionar y decir centro superior. Podemos decir que no se repita. Y podemos hacer que cubra así. Pero otra cosa que no te he mostrado es cuando estás desplazándote, puedes arreglarlo en un solo lugar para que cuando alguien esté desplazándose, esté desplazándose por Ese es un bonito efecto. Se me olvidó poner en esta página web de referencia. Cambiemos esto también a blanco, este texto a blanco también. Actualiza eso. También finalmente seleccionemos el contenedor exterior una vez más, y vayamos a la superposición de fondo y cambiemos el color a negro. Aumentemos la intensidad para hacer estallar el texto. Actualiza eso. Ahora podemos agregar otro llamado a la acción. Duplica esa copia, arrástrala. Dejémoslo ahí mismo, alineado al centro. Esto dice reservas de mesa, actualice eso. Revisemos los cambios. Desplazamiento hacia abajo. Ahí vamos. Como puedes ver, tiene este bonito pergamino que muestra toda la imagen a medida que te desplazas por ella. Lo cual me gusta mucho ahora volviendo a nuestra referencia, como mencioné en la siguiente, vamos a estar creando esto. En la lección. Después de eso, vamos a estar creando la galería antes de pasar a otras partes. Te veré en la siguiente lección. No vayas a ningún lado. 17. Fuentes globales: Ahora bien, en esta lección, se suponía que debíamos trabajar en este menú. Pero recuerdo que no pusimos las fuentes globales. Ahora mira lo que tenemos aquí en nuestra página web. Esto es lo que miramos, la fuente que tenemos en la página web de referencia. Se trata de una Montserrat, que es la fuente que prefiero para los sitios web Ahora para el que estamos creando, tiene la fuente Roboto predeterminada que viene con el elemento Queremos cambiar eso a Montserrat. Volviendo aquí, podemos ir a cada elemento. Cambiando la fuente a Monterat. Al seleccionar el elemento, ir a tipografía de estilo, ahora escribiendo monat, y eso ha cambiado Pero eso sería demasiado tedioso porque implica ir y repetir lo mismo Pero por suerte, Elementor proporciona una manera de establecer fuentes globales que una vez que las establezca, cada vez que agregue cualquier elemento basado en texto, tendrá la fuente que ha configurado en esta configuración del sitio del menú de hamburguesas Como puedes ver, tenemos colores globales y fuentes globales. Puedo configurar la fuente primaria para que sea la fuente que quiera. Esto ha cambiado para Montserrat. Haga clic en cualquier lugar de allí. Haré lo mismo por todos ellos porque me gusta que sean Montserrat Da click ahí, finalmente, Montserrat Actualicemos eso. Volvamos al editor. Ahora, cada fondo es Montserrat, excepto estos elegantes fondos que establecemos explícitamente Como puedes ver, todos nuestros fondos son ahora monerat. Si agregamos un editor de texto por ejemplo aquí abajo , seguirá siendo Montserrat Permítanme borrar eso. Eso solo fue establecer los fondos globales y ahora ya sabes cómo hacerlo. Te veré en la siguiente lección cuando estemos creando ese menú. Nos vemos en breve. 18. Menú de comida: Ahora es el momento de crear un menú de comida, tal como lo tenemos aquí. Este menú de comida solo sirve con el propósito de exhibir algunos de los alimentos que tienes. Porque recuerda, cuando un cliente está en tu restaurante y realmente quiere ordenar, hará clic en este botón y verá el menú real. Esperemos a ver, aquí vamos. Este es el menú real en el que pueden hacer clic y hacer su pedido. Esto es para fines de exhibición, es para estética en su sitio web. Sigamos adelante y hagamos eso. Lo que tenemos que hacer es instalar un enchufe. Vamos a Plugins. Agregar nuevo. Buscaré menú de comida. Menú de comida. Aquí vamos por Radius Theme. Cuenta ahora con 3,000 instalaciones activas. Aquí hay muchas opciones y puedes jugar con todas ellas. Pero el que me gustó es este tema Radius. Para el propósito específico que acabo de describir, mostrando un bonito menú de cuatro elementos. Sigamos adelante e instalemos. Ahora como puedes ver, es compatible con esta versión de prensa. Algunos de ellos no están probados. Voy a seguir adelante y activado. Aquí vamos, algunas descripciones. Pero lo que queremos hacer es ir a todos los alimentos. Por supuesto, no tenemos ningún alimento, así que podemos agregar comida o comida. Volvamos al sitio aquí. Diré pollo a la parrilla. Y puedes darle una descripción larga aquí, pero no necesitamos poner esta descripción larga aquí porque no vamos a usar este enchufe para hacer nuestros pedidos. Vamos a usar un enchufe diferente para el pedido y el sistema de menú real. Lo que podemos hacer aquí es brindar una breve descripción de que es este pollo suficiente para dos personas. Colóquelo aquí. La razón por la que no estamos usando este plug in para el sistema de pedidos y todo eso es porque, por ejemplo, en este sitio web de referencia, si hacemos clic en este pollo a la parrilla para ser redirigido a la página donde se supone que debemos hacer nuestro pedido, es feo Mira esto, ni siquiera sé cómo editar esto, porque no está creado con Elementor Tenemos que editarlo con Wordpress, Gutenberg. Y no queremos hacer eso. Queremos este menú que se está cargando aquí mismo, donde sea que esté el botón. No necesitamos esa descripción, pero necesitamos esta breve descripción para fines visuales. Sigamos adelante y lo pongamos en una categoría. Agregar nueva categoría. Podemos llamar a este almuerzo o a la categoría que quieras que sea. Una vez que hayas escrito eso, presiona Enter, podemos agregar una función Esta imagen de aquí mismo, pollo a la parrilla. Creo que ya está. Establecer imagen destacada. Ahora publiquemos eso. Voy a seguir adelante y crear tres alimentos más. Adelantaré rápidamente esta sección, agregaré más comida. Como pueden ver, he creado tres comidas de muestra y ahora queremos mostrarlas en nuestra página aquí mismo. Los estamos mostrando justo debajo de esta sección gris. Déjame levantarme, déjame duplicar éste, así como así. Y luego arrástralo y ponlo justo debajo de ahí. Como pueden ver, tiene alguna descripción de texto, nuestro menú, voy a copiar eso. Estos cambios a nuestro menú, luego los eliminaré. De hecho, así como así. Ahora vamos a dejar aquí este contenedor. Ahora, de vuelta aquí, vayamos al generador de código corto, agreguemos nuevo post. Ahora vamos a darle un nombre página de inicio menú que. También vamos a darle un diseño seleccionar el tipo de diseño que queremos darle. Vamos con eso. Vamos con categoría por categoría. Sí, vamos con esa grilla de Mason ahora. Puedes ir y jugar con todos estos ajustes, pero lo más importante es que sepas cómo mostrarlo. Entonces una vez que lo hayas mostrado, puedes regresar y cambiar algunas cosas aquí. Regrese a la página, vuelva a cargarla y vea cómo se ha visto afectada por los cambios con esos ajustes de diseño Sigamos adelante y publiquemos. Ahora que está publicado, escojamos esta copia de código corto. Vamos a la parte delantera. Aquí, voy a seleccionar un código corto, un elemento de código corto, y arrastrarlo al contenedor. Aquí voy a pegar el código corto que acabamos de copiar. Actualiza eso. Apliquemos el desplazamiento hacia abajo. Vamos a previsualizar los cambios. Desplazarse hacia abajo, así es como se ve nuestro menú. Como pueden ver, es diferente a lo que tengo aquí porque seleccioné un diseño diferente. Déjame seleccionar eso. Actualiza eso. Si desea actualizar esta página, seleccione esta. Después aplicaremos los cambios que hayamos hecho aquí en el back end, desplazándonos hacia abajo, ahora parece lo que tenemos Seguirá pareciendo que se está cargando cuando estés en esta página de edición. Pero al previsualizar los cambios, ellos habrán entrado en vigor. Bien, así que ahí vamos. Ahora, claro que te darás cuenta aquí en nuestra página web de referencia tenemos este menú. Podemos simplemente duplicar esto. Bajemos y pongamos eso justo debajo. Ahora lo queremos justo abajo. Bien, vamos a desplazarnos hacia arriba. Pongámoslo aquí por ahora. Entonces quiero llevar este contenedor y ponerlo encima del botón. A veces es un poco complicado colocar elementos donde quieras ponerlos. Seleccionando este botón, puedo ponerlo en el centro de la distancia aquí es demasiado pequeño. Mientras esté seleccionada, vaya a Margen avanzado, arriba. Digamos 50. Entonces cambiemos también el contenido del menú abierto. Abrir menú, no te preocupes por estos botones, los vamos a reemplazar. Estos son solo marcadores de posición porque vamos a obtener estos botones de la conexión real que vamos a usar para el sistema de menú real Estos son solo marcadores de posición, previsualiza los cambios desplazándose hacia abajo . Ahí vamos. Tenemos un buen menú. Digamos también, como puedes ver aquí mismo, este platillo del cañón es un, es un poco más corto que este otro. Creo que eso tiene que ver con la imagen que usamos. Cambiemos esa imagen. Si usas imágenes que son exactamente del mismo tamaño, van a ser del mismo tamaño que yo hice aquí. Todas estas imágenes son cuadradas. Los preparo como imágenes al cuadrado del mismo tamaño. Si una de las imágenes que subes es más corta que la otra, ahí es cuando vas a tener estos artefactos así. Permítanme sustituir esta imagen otro tipo de imagen que sea del mismo tamaño. Como se puede ver, 1234. Estas son las imágenes que utilicé. Permítanme seleccionar ese conjunto de imagen destacada, actualizar eso. Vamos a refrescar esta página. Refrescalo. Ahí vamos. Ahora es lo mismo, asegúrate de que tus imágenes sean del mismo tamaño exacto para que puedan mostrarse sin esa diferencia de tamaño. Así es como crear este menú de visualización. Pero una cosa más que quiero hacer es desactivar este enlace. Creo que vi, creo que está en algún lugar de aquí. Enlace de detalle a la página de detalles. Desactiva eso. Actualicemos eso. Ahora. Si recargamos esta página, no tiene un enlace Esto es bueno solo para fines de visualización porque la funcionalidad real estará en este botón. Así es como crear ese menú. Fue un poco más largo que el resto de las lecciones, pero fue un buen reto para nosotros En la siguiente lección, vamos a crear esta galería aquí mismo antes de pasar a la siguiente parte. Te veré en breve. 19. Galería: Ahora veamos cómo crear esta galería aquí mismo. Si has tomado alguna de mis clases anteriores, claro que sabes cómo crear esta galería. Pero si buscas un repaso, sigamos adelante y hagamos eso Pasando a nuestra página, aquí estamos. Queremos volver al editor. Sigamos adelante y dupliquemos esta sección. Vamos a arrastrar y ponerlo debajo esta sección de fondo de imagen. Por supuesto, deshagámonos de este menú. Dejemos ese botón ahí mismo, porque aquí tenemos un botón para abrir galería. Digamos solo galería. Ahora aquí estamos agregando la galería. Para ello, necesitamos agregar un elemento más o enchufe relacionado Volvamos aquí y digamos plugins, añadimos nuevo elementor. Se llama Adds esenciales para el elemento. Como puede ver, cuenta con 2 millones de instalaciones activas. Vamos a activar eso. Vamos con Avanzado a continuación. Avanzado básicamente solo significa que más de estos widgets estarán disponibles para nosotros en el front-end. A continuación, la que estamos buscando es esta galería filtrable A continuación podemos decir siguiente. Aquí. Siguiente. No, gracias. Ahora ya terminamos con la instalación. Ahora volviendo al front-end aquí mismo y refrescando la página con control R. Siempre que agregues un complemento adicional relacionado con elemental, se agrega aquí mismo. Si colapsamos todos estos paneles, recuerde que agregamos el elemento K, kit de elementos. Aquí están los paneles para el kit de elementos y ahora hemos agregado complementos esenciales. Esto es solo para mostrarte dónde puedes encontrarlos todos. Estos son elementos gratuitos que puedes agregar, pero claro que también tienen elementos premium. Pero la galería filtrable que estamos buscando está aquí Si nos desplazamos hacia abajo, podemos arrastrar esto y soltarlo ahí. Ahí vamos, mientras todavía está seleccionado. Ahora esto cambia a Editar Galería Filtrable. En primer lugar, son suficientes seis elementos para mostrar. Veamos qué más Controles filtrables, esos son estos artículos aquí arriba como puedes ver, tenemos mesas, personal, cocina Estas son como categorías de imágenes que tienes. Categorías de fotos, tal vez fotos de personal, tal vez los diferentes tipos de comida que tienes. Tal vez un viaje. Cualquiera que sea la categoría que quieras que se coloquen tus fotos. Volviendo aquí, podemos crear controles filtrables Solo usaré las que había usado mesas. Estamos contando elemento, categorizar estas imágenes por esto. El segundo aquí puede ser personal y el tercero aquí puede ser lo que fue esta premisas. Actualizar que ¿qué hay de malo en esto? Bien, mientras esto todavía está seleccionado. Ahora podemos crear los elementos de la galería y esas son las imágenes individuales como puedes ver aquí, tenemos el elemento de galería uno. Si selecciono eso, le puedo dar el control. El nombre de control aquí es el nombre de la categoría aquí arriba. Si decimos que esto es tablas, esta imagen solo se mostrará cuando seleccionemos el control de tablas. Déjame deshacerme de ese texto porque no me gusta el texto, pero puedes quedártelo si quieres. También elimino el botón de enlace. Así como así, nos quedamos con un botón de caja de luz. Esto solo lo trae a colación para que puedas verlo en un modo aislado. Nos deshacemos de eso. Ahora sigamos adelante y seleccionemos una imagen para esa sección. Puedes elegir cualquiera. Esta es la tabla dos, por ejemplo. Seleccione eso. Ahí vamos. Ahora ese es el elemento uno de la galería. Podemos llamarlo tal vez mesa uno. Sea creativo con estos artículos. A lo mejor, oh espera, esto debería ser personal, este es quizás el chef. Vamos a deshacernos de eso. Deshagámonos del botón de enlace y seleccionemos al chef. Bien, seleccionemos a este tipo. Selecciona eso, y ahí vamos. Voy a abrir el elemento tres de la galería. En primer lugar, vamos a seleccionar, lo mejor estamos hablando de las premisas. Entonces vamos a la cocina abierta, Esa es una imagen de la cocina. Eliminemos estos textos. Quitar el enlace, decir que esto es controlado por las premisas. Solo debe mostrarse cuando es el control de locales lo que es local activo. Llamemos a esta actualización de cocina. Voy a seguir adelante y repetir lo mismo para estos tres, pero voy a adelantar rápidamente esta sección. Acabo de terminar de crear los tres restantes. Si tenemos una vista previa de la página, bajemos a la sección. Aquí estamos. Si seleccionamos tablas, muestra la tabla uno y la tabla diez. Si mostramos al personal va a tener a la chef Kate, la mesera, y Alex el barman, claro, por ejemplo, para Alex, el nombre del artículo es Alex, y el bartender cae bajo este editor de texto aquí mismo Ahora notarás aquí en nuestra referencia tenemos esquinas redondeadas. Así que sigamos adelante y diseñemos esto. Si bien todavía está seleccionado, iré dentro de estilo, iré al radio del borde del artículo. Vamos a darle 20 ahora están redondeados. Actualiza eso. Si vamos a la página de vista previa, ahora están redondeados. Ahí vamos. Puedes seguir adelante y jugar con todas estas otras configuraciones. Ahora que ya sabes cómo agregar esta galería filtrable, queremos que esta lección sea breve Pero realmente hemos cubierto los bits más importantes, las partes más importantes. Sigue adelante y juega con todos estos ajustes y mira si puedes mejorar tu galería de filtros. Eso es todo por esta lección. En la siguiente lección, veamos cómo crear este pie de página. Te veré en breve. 20. El pie de página: Ahora estamos a punto de crear este pie de página sin perder más tiempo. Vamos a ponernos manos a la obra cambiando a nuestro sitio web. Ahora, por supuesto, de la forma en que creamos el encabezado por separado de la página de inicio, vamos a construir el pie de página por separado usando element ski light. Es hora de salir de aquí, pero antes de salir, sigamos adelante y digamos actualización. Ahora podemos salir. Bien, vamos al elemento skit header footer. Ahora digamos añadir nuevo, ya sabes el taladro mi pie. Por supuesto que estos cambios al pie de página deben estar activos y sigamos adelante y editemos el contenido. Aquí estamos. Ahora por supuesto vamos a agregar sección de tres columnas. Sigamos adelante y agreguemos eso aquí. Quiero agregar un elemento de imagen. Podemos poner el logo aquí. Seleccionaré ese logo aquí. Vamos a agregar íconos sociales. Y me gustan estos de Elements Kit. Estos otros son del equipo Element, pero estos son de Elements Kit. Los dejaré ahí mismo. Como puedes ver, están posicionados en la parte superior. Si selecciono el contenedor que los contiene, puedo cambiar la justificación a centrar así. Yo puedo hacer lo mismo aquí por el logo, pero eso ni siquiera es visible. Ahora, como puedes ver aquí mismo, tenemos una imagen de fondo, ya sabemos cómo hacerlo. Selecciona el contenedor, vamos a estilo, tipo de fondo, luego seleccionemos una imagen. Queremos asegurarnos de seleccionar una imagen grande, Una gran. Sí, 19 1920 por 1080. Bien, seleccione eso. Ahí vamos. Como de costumbre, understa posición, tal vez centro o tal vez top center Digamos adjunto predeterminado, Repetir, Repetir. Digamos que cubre la superposición de fondo. Vamos a darle ese color negro. Vamos a hacerlo más oscuro, así como así. Ahora claro, eso significa que no podemos ver los iconos sociales, seleccionando los elementos, estos cambios para editar íconos sociales. Y tenemos Facebook, Twitter y Linked in. Puedes agregar otro si quieres, pero vamos a apegarnos a tres Facebook. Ahora vamos al color en circunstancias normales, el color. Entonces queremos escoger ese color dorado. Quiero editar página con elementor, Seleccione estos textos, Ir al estilo, seleccione ese control amarillo C para copiar cerrar eso Entra aquí, pegarlo. Ahora es amarillo, pero de hecho ese es el color del texto. Lo quiero color de fondo blanco. Esto es lo que queremos que tenga ese fondo amarillo exactamente en hover De hecho, en lo normal, quiero que el texto sea negro así. Al flotar, queremos que el fondo sea blanco, así como así Repetimos lo mismo para Twitter. Es negro por defecto, pero el fondo es dorado. Y hover, el fondo tiene que ser blanco. Ahora vamos a hacer también vinculados en el debe ser negro, debe ser dorado en espera, blanco. Actualiza eso, por supuesto, aquí es donde pondrás los enlaces a las diferentes plataformas sociales directamente a tu perfil en esa plataforma. Pégalo aquí. Para Linked in para Twitter, lo pegas aquí mismo. Y para Facebook, pasemos al estilo. También puedes alinearlos a la derecha. También puedes seleccionar el logotipo en el pie de página y reducir su tamaño, tal vez hasta ese punto. Y alinéelo a la izquierda. Ahora justo aquí. Sigamos adelante y agreguemos un texto encabezado Comidas, Como ninguna otra copia que. Pégalo ahí dentro. Cambiemos el color frontal a blanco. Vamos a la tipografía. Hagámoslo negro. Vamos a alinearlo en el medio. Y creo que estamos bien ahora. Entonces también necesitamos agregar un párrafo de texto o editor de texto. Vamos a colocarlo ahí mismo, estilo, color centro, blanco. Actualiza eso. Ahora claro que tenemos algo de relleno arriba y abajo aquí. Relleno aquí y relleno allá abajo, seleccionando el pie de página en sí, acolchado avanzado. Vamos a darle tal vez 100 y aquí, 100. Actualiza eso. Seleccionemos también este contenedor que sostiene el texto. Alineemos todo en el centro verticalmente. Vamos a reducir esto. Seleccione este texto, avanzó un margen inferior para que todo quede correctamente alineado. Seleccionando este contenedor, una vez más, podemos establecer un hueco, tal vez 40, eso es 440. Actualiza eso, vamos a previsualizarlo. Impresionante, ese es nuestro pie de página. Podemos hacer esto un poco más oscuro, volviendo aquí, superposición de fondo, más oscuro así. Hagamos también este logotipo, un enlace, enlace a URL personalizada. Copia eso, vamos a pegarlo ahí, actualizar eso. Impresionante. Y ahora cuando hagamos clic en esto, el logotipo será redirigido a la página principal Hay una cosa que necesito que notes a medida nos acercamos a la parte inferior de la página, desplazándonos hasta ellos Exactamente, se ve muy bien Pero lo que quería que notaran es que no pusimos margen para que el fondo de esta sección tuviera alguna separación aquí. Ahora necesitamos editar esta página de inicio, editar con elementor. Ahora, desplazándose todo el camino hasta la parte inferior, esta sección aquí mismo que está sosteniendo toda la selección que avanzó, Tiene un margen superior de 100 Démosle también un margen inferior de 100. Actualiza esa vista previa de que todo está espaciado uniformemente. Bien, desplazándose hacia abajo, exactamente. Ahora tenemos un buen espaciado ahí mismo. Así es como crear el pie de página con kit de elementos. Espero que disfrutes esa lección. En la siguiente lección, vamos a establecer la imagen destacada. Te veré en breve. 21. Crea una imagen destacada: Queremos hacer algo muy rápido, y eso es establecer una imagen destacada para nuestra landing page. Todo esto es parte del SEO. Para Wordpress, que es algo muy importante. Puedes tener un sitio web que es muy bonito. Pero si no haces el SEO correcto, el sitio web ni siquiera será visible para Google y otros buscadores. Necesitas establecer una imagen destacada. Volviendo aquí, todo lo que tenemos que hacer es ir a las páginas. Selecciona la página, queremos establecer una imagen destacada para editarla. Y aquí mismo notarás que tenemos conjunto de imágenes destacadas, imagen destacada queremos ser, esta puede ser una bonita imagen destacada por cierto. Establezca eso como la imagen destacada y actualice eso. Ahora cuando alguien busca en Google nuestro restaurante por su nombre, si aparece en los resultados de búsqueda de Google o siendo resultados de búsqueda, mostrará esta imagen destacada Por supuesto, eso es mejor que solo mostrar un breve texto describiendo de qué se trata nuestro restaurante. Ahora bien, si quieres conocer más sobre por qué las imágenes destacadas son importantes y cómo configurar y optimizar tu sitio web para SEO. Tengo una clase completa aquí mismo sobre compartir habilidades, mostrándote todo lo que necesitas saber sobre Wordpress SEO. Consulta mi perfil y busca una clase con respecto a Wordpress SEO. Pero básicamente, así es como configurar tu imagen destacada. En la siguiente lección, veamos cómo crear la página Acerca de. Te veré en breve. 22. Página Acerca de: Ahora es el momento de crear la página Acerca de. Volviendo a nuestro tablero de instrumentos. En primer lugar, permítanme cerrar todas estas otras cosas en las que estábamos trabajando. Ahora aquí estamos y esta es la página acerca de. Quiero entrar. Observe cuando pasa el cursor sobre casa, tiene editar con elementor, pero estos otros no editan con Y eso es porque aún no hemos empezado a editarlos con elemento. Nosotros los acabamos de crear y no fuimos al front end a editarlos, Pero una vez que empecemos a editarlos con elementor, cuando vuelvas ahí, tendrá esa opción Estamos aquí, lo estamos editando. Recuerda que no establecemos aquí los ajustes básicos que establecemos para la página de inicio. Vayamos al valor por defecto. Vamos a la plantilla y digamos elementor ancho completo. Entremos también a los ajustes de astra. Decir ancho completo, barra lateral, sin barra lateral. Deshabilitemos a estos otros. Actualiza eso, increíble. Ahora vamos a editar con elementor. Lo que queremos hacer es si puedo previsualizar eso, luego ir a la página principal. Quiero que editemos con Elementor. Queremos reutilizar algunas de estas partes que están en la página de inicio. Por ejemplo, si me desplazo, podemos escoger esto. Sólo puedo venir y decir click derecho copiar. Si vuelvo aquí dentro de esta caja, puedo decir Paste. Esa es una forma de re, usar elementos. Otra forma de reutilizar elementos es seleccionar este clic derecho y decir guardar como plantillas. Si guardo como plantilla, puedo llamarlo sección de fondo de imagen, por ejemplo. Ahora se guarda dentro de mis plantillas. Ahora si vengo aquí, permítanme simplemente borrar eso. Si vengo aquí para agregar plantilla y voy dentro de mis plantillas, puedo decir insertar. Me dirá que anulará todo lo que yo había creado aquí. Diré que aplique. Ahí vamos. La razón por la que quería que escogiéramos esto es para que podamos crear algo como esto. En primer lugar, seleccionaré esto y como pueden ver, no puedo controlar el contenedor. Y recuerden que tenía un margen superior de 100, de 100 de donde lo recogimos en la página principal. Queremos quitar este margen para que suba. Observe que tampoco tenemos todas estas cosas. Déjame simplemente deshacerme de eso, eso, pero quiero conservar esta breve descripción. Creo que se ve mejor. En déjame seleccionar el propio contenedor y añadir un poco de relleno en la parte superior. Hagámoslo 200. Bien, antes que nada hagamos que sea cero, luego eliminemos el enlace. Así que somos capaces de editar solo una celda a la vez. Quiero que esto sea 200, digamos 180, eso es mil 800 en la parte inferior Digamos 50. Bien, sobre seleccionar ese texto, Pegar eso. Y entonces podemos tener tal vez solo una breve descripción aquí, así como así. Actualiza eso. A continuación, escojamos nuestra historia. Agreguemos esta sección. Agreguemos un margen de 100. Duplicar eso. Arrastremos y pongamos eso ahí. Cámbialo a ese color negro, 111 por consistencia. Escojamos también este texto. Vuelve aquí. Editor de texto. Vamos a pegar eso ahí dentro. Al pegarlo, usa control shift V en lugar de control V. Si lo pega con control V, tendrá cualquier formato que tuviera anteriormente Entonces mientras todavía está seleccionado. Vamos a alinearlo en el medio. ¿Qué más tenemos? Tenemos dos imágenes justo debajo de esto, pero aún dentro de ese contenedor podemos agregar un contenedor y luego dos contenedores dentro duplicados. Ahora van de arriba a abajo. Seleccionemos el exterior. Asegurémonos de que sea de izquierda a derecha. Así como así. Ahora en aquí podemos agregar una imagen, seleccione una imagen aquí de su historia. Puede seleccionar eso. Vamos a darle esas esquinas redondeadas dentro del radio de borde de estilo 20. Ahora vamos a duplicar eso. Vamos a deshacernos de esto. Cambiemos esto. Yo solo voy a seguir adelante y usar una de estas imágenes, pero necesitas subir una bonita. Ahí vamos, Actualización. Revisemos los cambios. Impresionante. Ahora por supuesto te darás cuenta si actualizamos esta página, tiene ese salto al recargar Y queremos que tenga ese control de carga gradual seleccione los efectos de movimiento avanzados del contenedor, digamos que se desvanecen, actualicen eso. Vamos a previsualizar los cambios así como así. A continuación vamos a agregar esta sección como ya has adivinado. Podemos elegirlo de la página de inicio porque creamos algo que se ve así. Ya lo guardamos como plantilla. Al entrar aquí, esto es todo. Insertar, Aplicar. Si nos desplazamos, ahí vamos. Bien, así que la familia importa, copia eso, selecciona eso, pegarlo, dirigido por Olivia y Lucas. Pega eso ahí dentro. Copia eso, selecciona esto, pega eso ahí dentro. Y claro, este es un marcador de posición, vamos a tener los botones reales usaremos aquí. Dejemos eso ahí. Impresionante. Sigamos adelante y creamos esta sección. Queremos una sección de doble columna. Si bien esto todavía está seleccionado, iré al margen avanzado 100 en la parte superior. Agreguemos una imagen aquí mismo. Todo bien. Está a la derecha. A la izquierda, podemos tener ese texto. Y el editor de texto, este es Lucas, esto es sólo un texto marcador de posición, Lucas 111 El tipo de letra es negro y probablemente tiene un tamaño de 45. Ahora por supuesto, seleccionaré este contenedor que lo sostiene, y luego alinearé todo verticalmente en el centro. Selecciona una imagen de Lucas. Aquí estamos, abierto. Vamos. Impresionante. Vamos a darle estilo al radio de borde 20 para darle esa esquina redondeada. Entonces seleccionemos este contenedor aquí en el diseño. Vamos a darle un espaciado entre columnas de tal vez 40. Impresionante. Ahora vamos a duplicar eso. Ahora está duplicado. Podemos arrastrar eso y ponerlo del otro lado. Cambiemos esto a nuestra derecha aquí, ¿dónde está una buena imagen? Conoce a Olivia, porque este sirviente está dirigido por Lucas y Olivia. Seleccione eso. Ahí vamos, esta es Olivia. Actualiza esa vista previa de los cambios. Ahí vamos. Super impresionante. Ya casi terminamos con la página acerca de. Por supuesto, necesitamos crear esta sección de suscripción al boletín, pero esto debería ser una lección por sí solo. Hagámoslo en la siguiente lección. Te veré en breve. 23. Formulario de suscripción al boletín informativo: Ahora es el momento de crear este formulario de registro de carta de noticias volviendo al interior de nuestro editor. Por ahora vamos a salir de este lugar. Así podremos ir al back end el dashboard e instalar mi plugin de formulario favorito para Wordpress, que se llama Forminator Vamos a la salida del tablero. Vamos a Plugins Agregar nuevo aquí. Vamos a teclear Forminador. Ahí vamos, por WP MU dev con 500,000 instalaciones instalamos eso. Este es uno de los mejores plugins de forma en el Plug de Wordpress en Reposit Activate Ahora aquí estamos. Lo encontrarás ubicado casi al final de este menú. Si hago clic Forminator será llevado al tablero del enchufe. Aquí estamos. Como puedes ver, podemos crear un formulario, crear cualquier tipo de formulario, o puedes crear polos, encuestas de opinión o algo así Vamos, quiero que creamos un boletín. Formulario de inscripción, Continuar. Esa es una plantilla que hemos usado. Regístrate formulario, crea eso. Ahora, claro, como puedes ver aquí mismo en nuestra referencia, estos están uno al lado del otro. El nombre y el correo electrónico pueden elegir esto y arrastrarlo y ponerlo justo al lado del nombre. Si lo previsualizamos, así es como se ve. Aquí está el botón Suscribir. Aquí vamos. cambiar lo que dice haciendo clic en él y decir tal vez únete a nosotros o algo así, Aplica. Ahora dice únete a nosotros. Únete a nosotros. Bien, ahora es el momento de darle estilo a la forma. Si presiono Publicar, tenemos un código corto. Y recuerda cómo mostrar un código corto en el front-end. Si vengo a esta página aquí y digo editar con elementor desplazándose hacia abajo justo debajo de esto, vamos a duplicar De hecho, necesitamos a los dos. Déjame simplemente deshacerme de la imagen. Necesitamos los dos contenedores, y déjame deshacerme de todo eso. Ahora tenemos estos dos contenedores En este contenedor, pongamos un elemento de código corto, dejémoslo ahí dentro. Ahora, volviendo al tablero, copia este código corto y pégalo. Seleccione esto y luego pegarlo aquí. Ahí vamos. Actualiza eso. Revisemos los cambios. Desplazamiento, ahí vamos. Consigamos también el último ejemplar que entra aquí. Déjame duplicar esto. Suelta eso ahí. ¿Qué hice controles para deshacer? Tomemos eso y voy a pegar eso. Déjame escoger también el texto, editor de texto ahí dentro. Voy a pegar eso, actualizar eso. Revisemos los cambios. Impresionante. Ahora vamos a agregar también algún margen abajo aquí en este contenedor avanzado fondo 100 actualizar eso. Revisemos los cambios desplazándose hacia abajo. Algún bonito acolchado ahí mismo. Ahora sigamos adelante y diseñemos esto para que se vea mejor así dentro de nuestro tablero. Si cerramos eso, tenemos después de campos, tenemos apariencia aquí. Puedes elegir diferentes apariencias para tu forma. A mí me gusta el atrevido, pero quiero cambiar estos colores, colores. Usemos custom en lugar de custom default. Lo primero que quiero cambiar es el botón Enviar. Quiero que sea este color dorado volviendo a entrar aquí. Déjame seleccionar ese estilo, copiar ese código. Volviendo aquí, seleccione pegarlo ahí. Ahora es ese color al flotar, quiero que sea 111 en foco, aunque esto no es muy importante 111 vista, ahí vamos. Ahora hagamos que estos rincones sean menos gritos. Entrada oscura y área de texto para el color del borde, quiero cambiarlo a este gris claro encendido, quiero cambiarlo a este gris ligeramente oscuro On Focus que ligeramente gris oscuro. Eso está bien. Vista previa, Ahí vamos. Impresionante. Pero ahora queremos darles algunas esquinas redondeadas. Están muy afilados. En primer lugar, actualicemos eso. Ahora formintor nos proporciona una manera agregar más CSS personalizado a nuestros formularios si no tenemos la capacidad hacer esos cambios usando estas características aquí dentro, podemos usar CSS personalizado para futuras ediciones Por ejemplo, notaste que este es un campo de entrada. Podemos definir cómo queremos que nuestros campos de entrada se comporten en su apariencia en la configuración CSS. Podemos entrar aquí y decir para las entradas seleccionar entradas. Ahora bien, este es el selector para todas las entradas. Queremos que el radio fronterizo cinco. Queremos que el radio del borde de los campos de entrada tenga una esquina redondeada de cinco píxeles. Si tenemos una vista previa de esto ahora, tienen una esquina redondeada de cinco picelsf decimos, por ejemplo 50 Como se puede ver, ahora es más o menos redondeado. Actualicemos eso. Revisemos los cambios. Queremos que sea 550 es demasiada actualización que. Ahora también queremos hacer lo mismo para el botón, pero si miras aquí, no tenemos una selección de botón. A estos se les llama selectores. No tenemos una selección de botón. Lo que podemos hacer es ir al front end. En primer lugar, permítame seleccionar este código corto y hacer clic en Aplicar. Solo para aplicar lo que hicimos en el dashboard en el back end, desplazándonos hacia abajo. Ahora como puede ver, los cambios han entrado en vigor. Si tenemos una vista previa de eso, desplazándonos hacia abajo, ahí vamos Ahora puedo venir clic derecho en este botón, y luego inspeccionar. En cualquier navegador, encontrarás un elemento de inspección. Ahora como puedes ver, cuando hacemos clic en Inspeccionar, básicamente sacó a colación todo el código incluyendo el selector dado al botón. Ahora si miras aquí, puedes ver que el botón es amarillo. Es muy fácil decir que este es el botón. Tiene un color de fondo amarillo y se llama el botón formintor Enviar Si seleccionamos eso con el control de puntos C y volvemos aquí, podemos usarlo como nuestro selector. Soporte de pasta, apertura y cierre. Ahora podemos decir radio de borde cinco píxeles. Ahora si tenemos una vista previa de eso, ahora tiene esos píxeles. Actualiza eso. Ahora claro, se ve un poco feo con todo este espacio que queda aquí. ¿Por qué no lo estiramos hasta el final y lo ponemos en el medio Ahora que ya lo tenemos seleccionado, podemos agregar 100% Esa no es la ortografía del ancho. Si lo previsualizamos ahora, tiene ese ancho de 100% Actualizar eso. Bien, así que ahora si volvemos a esta página y mientras ésta todavía está seleccionada, podemos aplicar lo que acabamos de hacer en el back end. Ahora bien, si tenemos una vista previa de los cambios, permítame cerrar eso. Vamos a arrastrarnos hacia abajo y ahí vamos. Así es como construir el formulario de suscripción al boletín formintor En la siguiente lección, queremos trabajar en la página de la galería. Te veré en breve. No vayas demasiado lejos. 24. Página de galería: Ahora es el momento de crear la página de la galería. Vamos a abrirla antes de crear la página de la galería. Aquí está. notar que no creamos este icono aquí mismo, arriba aquí en la página acerca de. Déjame buscar, arrastremos un icono ahí mismo. Esto es muy fácil, estas dos gafas, O podemos tener estas dos más oscuras. Insertar. Y claro vamos a cambiar el color a, déjame escoger ese color de este botón. Copia eso y pegarlo ahí. Al hover, podemos hacerlo 111 por consistencia. Así como así. Actualiza eso. Revisemos los cambios. Ahí vamos. Por supuesto, si vuelvo a cargar esta página, esta está animada pero esto simplemente se carga muy rígidamente No te preocupes, vamos a trabajar en las animaciones para el resto de los elementos del sitio web. Porque si miras nuestra página aquí, vuelve a cargar el sitio web de referencia, Todo está animado Vamos a trabajar en eso, no te preocupes, volviendo aquí. Ahora tenemos nuestro icono y estamos listos para trabajar en la galería. Déjame cambiar a la galería. Como pueden ver, tenemos aquí esta galería de nombres que se ve fea en la cabecera. Eso es porque esta es la página en bruto que creamos, al igual que la página acerca de. Aún no lo hemos editado con elementor y no hemos establecido esas configuraciones básicas en el back end Por eso es solo la página predeterminada de Astra Wordpress. Si decimos editar la página se llevará directamente de vuelta al back end donde podremos establecer ajustes básicos como el elementor de plantilla El ancho completo puede ir dentro de los ajustes de Astra. Podemos decir de ancho completo, sin barra lateral. Y claro que deshabilitemos estos. Actualiza eso. Muy bien, ahora si decimos editar con elementor, ahora es una página elementor Sigamos adelante y deshagámonos de eso. Porque queremos usar esta sección de página superior, podemos convertirla en una plantilla o simplemente copiarla en cualquier otra página que queramos usarla. Escribiré click y copiaré. entrar en nuestra galería, puedo decir pegar, pero solo diré también guardar como plantillas para que podamos paginar para guardar eso porque también lo vamos a usar en la página de contacto. No queremos tener que volver a copiarlo. Ahí vamos. Cambia esto a galería Impresionante. Lo siguiente que queremos hacer es dejarme actualizar eso. Vista previa, los cambios, ahí vamos. Lo siguiente que queremos hacer es ir a la página principal, porque queremos copiar esa edición de Galería con elementor Podemos desplazarnos hasta el fondo aquí. Queremos copiar toda esta sección, clic derecho copiar. Vuelve aquí, haz clic derecho en pegar. Ahí vamos, porque ya lo habíamos diseñado. Ya se ve bien. Pero ahora esta es una galería única. Lo que hagamos aquí no afectará a la galería en la página de inicio. Déjame cerrar la página de inicio. Vuelve aquí ahora mismo. Para ahorrar tiempo, aquí no voy a añadir más imágenes. Pero si colapsamos la página de configuración en los elementos de la galería, puedes agregar más imágenes aquí duplicando esto entrando Y tal vez etiquetándolo como tabla ocho, seleccionando una imagen diferente. Déjame recoger aquí una imagen aleatoria. Bien, déjame seleccionar eso. Y ahora para ahorrar tiempo, sólo voy a duplicar y, y, y luego los aleatomizaré Llavero ahí mismo, mesa diez, Alex actualiza eso. Ahora, habíamos agregado un botón separado aquí mismo para abrir esta página de la galería. Voy a cerrar eso y actualizar la página. De hecho, permítanme antes que nada volver a la página principal y editar con elementor Vamos a desplazarnos hasta el fondo. Ahora bien, este botón de aquí no tiene un enlace, y queremos que sea redirigido a la página de la galería Voy a copiar eso. Ve aquí mientras se selecciona esto, voy a pegar eso ahí dentro. Y claro, la página de la galería tiene la extensión de la actualización de galería de la galería que yo sé que. Porque si vas aquí al tablero y vas a las páginas, si miras la galería edición rápida, la babosa es galería, eso significa el dominio, esta babosa También puedes echar un vistazo rápido a eso dejame decir consejo editar. Si vas a la URL, te darás cuenta aquí que es VF export.com slash Así es como esta galería. Si quieres abrirlo en una pestaña separada, abre esta rueda dentada abierta en nueva ventana, Actualiza Si tengo una vista previa de la página de inicio ahora y me desplazo hasta la parte inferior. Si hago clic en Abrir Galería, abrirá la página de la galería en la que estamos trabajando ahora. Déjame cerrar eso porque queremos volver a la página de la galería en la que estamos trabajando Ahora necesitamos eliminar este botón porque estaba destinado a la página de inicio. La galería en sí viene con un botón Cargar más. Si colapso la configuración Cargar más botón, se cargará ahí mismo. Si haces clic en cargar, mostrará cuantas más imágenes tengas. Creo que teníamos más imágenes. Oh, déjame cerrar esa versión de eso que se supone que tenemos que estar aquí. Si voy a la galería de colapso, los artículos cargan más botón, aparecerá aquí. Y si hacemos clic en Cargar más, cargará el resto de las imágenes. Pero ahora necesitamos darle estilo yendo dentro de estilo. En primer lugar, actualicemos eso. Vamos a refrescar esta página control R para que podamos verlo. Muy bien, ahora selecciona esta galería y vamos al botón de carga de estilo más. En primer lugar, el espaciado superior, vamos a darle 50. Vamos a darle ese relleno. Vamos a liberar eso. 60 izquierda, 60 derecha a 20 abajo. Vamos a darle también ese radio de borde de 50 actualización que también queremos darle ese color dorado. Si volvemos aquí, podemos seleccionar copiar, pegarlo ahí. Y al hover queremos que esté en uno. Por consistencia actualizar eso, vamos a revisar los cambios. Impresionante. Porque copiamos la propia galería de la página principal. Tiene el margen que habíamos establecido en la página principal. Por eso ya no necesitamos agregar más. Si cargamos más, podemos ver más imágenes. Eso es peso. Tenemos que cambiar estos textos. Digamos que nuestra historia en imágenes actualiza eso. Así es como se ve. Como mencioné, vamos a trabajar en los efectos de movimiento. Así es como crear la página de la galería. En la siguiente lección, vamos a estar trabajando en la página de contacto. Ya casi llegamos al final, chicos. Enhorabuena por lo lejos que has llegado. Te veré en breve. 25. Página de contacto: Ahora es el momento de crear la página de contacto. Cambiando a la página de contacto, vamos a repetir los mismos pasos que tomamos en la página de edición de la página de la galería. Si puedo regresar muy rápido. Ahora mismo, como puedes ver tenemos este es el encabezado por defecto por. Este es el valor predeterminado al entrar ahora dentro de estos ajustes aquí mismo, si vamos a la configuración de Astra, es por eso que estábamos deshabilitando el encabezado y el pie Ahora si deshabilitamos esos dos y actualizamos la página, si vemos la página, bien, ahora todavía tenemos este encabezado de contacto que creo que es un encabezado de Wordpress. En absoluto. Derecha. De todas formas, vamos cambiar la plantilla a elementor full width astra queremos que sea ancho completo aquí, sin barra lateral También deshabilitemos el área de banner y actualicemos. Bien, edita con elementor, claro. Ahora sigamos adelante y agreguemos esa plantilla que creamos, la parte superior de la página, insertar, Aplicar. Puedes cambiar esta imagen de fondo aquí y esto no afectará a las otras páginas que hemos usado esta plantilla en contenedor de control, me gusta este flotando alrededor del estilo contenedor. Seleccionemos eso. Déjame seleccionar esto, cerrar eso. Este es el contacto. Contáctanos, actualízalo ahora, porque estamos creando un formulario. Vayamos aquí. Contacto al sitio web de referencia. Impresionante. Debido a que estamos creando esta forma, por supuesto que necesitamos usar formato. Volviendo aquí dentro del tablero. Volvamos, vamos a Formulador Formularios. Digamos Crear un formulario de Contacto. Continuar para crear eso. Tiene algunos campos predeterminados aquí. Vista previa, Este es un campo de entrada. Campo de entrada. Campo de entrada, y esta es un área de texto. ¿Recuerdas cuando vinimos aquí a la apariencia cuándo habilitar CSS? Teníamos el selector para el área de texto, pero solo trabajamos con input cuando estábamos creando la suscripción al boletín. También usaremos esto si es necesario. Volviendo a Fields Preview, hecho, se supone que debemos volver a la apariencia. Vayamos a Bold. Vamos al botón Colors Submit, Se supone que debemos darle ese amarillo. Una vez más, copia eso. Vamos a pegarlo. Se supone que hay 11111. Ahí vamos. Para el área de texto de entrada, queremos tener ese borde gris claro activado. Queremos tener este color un poco más oscuro. El mismo caso aplica para entonces el error está bien. Vista previa ahora eso es mucho mejor. Cierra eso, claro. Recuerda que dijimos que puedes reorganizar esto si quieres, por ejemplo, que el primer nombre y el correo electrónico estén en la misma línea Siempre se puede hacer eso. Tienes mucha flexibilidad. Ahora tenemos nuestro código corto. Voy a copiar ese código corto, luego volveré a, esta es la página sobre y ya terminamos con ella. Volveré a la página de contacto, digamos agregar. Y quiero que agreguemos una doble columna. Sección, selecciono eso, agreguemos ese margen superior de 100. Entonces aquí, agreguemos un código corto, un elemento de código corto. Vamos a pegar ese código corto ahí mismo, Actualiza eso. Revisemos los cambios. Ahí vamos. Ahora agreguemos ese margen en la parte inferior, seleccionando este contenedor, actualicemos eso, vamos a previsualizar los cambios. Sí, hay un buen espaciado ahí. Ahora también necesitamos ser consistentes y darle esas esquinas redondeadas. Así que volviendo aquí, claro, ahora como adivinarías, vamos dentro de apariencia CSS personalizado. Seleccionemos el área de texto, radio del borde cinco píxeles. Déjame copiar eso. Digamos que la entrada también necesita tener un radio de borde de cinco alféizares de pico Vista previa de eso. Impresionante. Y ahora el botón, no recuerdo el nombre del botón, el nombre seleccionado, era Forminador Enviar Copia que cinco X. Recuerda que también deberíamos darle a esto un ancho de 100% de previsualización que. Ahí vamos, actualicemos eso. Hecho. Ahora si vamos aquí y seleccionamos este código corto y aplicamos lo que acabamos de hacer en el back end, ahora es visible. Vamos a previsualizar eso y cerrar esto. Ahí está nuestra forma luciendo muy impresionante. Ahora claro, lo único que queda es que nos encantaría saber de ti encabezado de texto pegar eso, eso es una suma bajante. Solo tomemos un editor de texto. Seleccionemos este contenedor que los sostiene y los justifiquemos en el centro. Deberían tener 40. Sí, esa es Monserrat, pero queremos que sea negra. El color también debería ser 111 A. Y ahora notarás que tenemos este acordeón aquí Entonces agreguemos un acordeón y creo que voy a usar esto por kit de elementos Precisamente. Cuenta con tres campos. Por defecto, ampliaré eso y diré correo electrónico diré correo a restaurant.com Consultas, pregunta en restaurant.com Esta separación es demasiado grande, así que mantendré presionado el turno y presionaré Enter solo para empujarla a la siguiente línea Seleccione los dos. Amplía esto y vamos a darles algunas balas. Eso se convierte en una bala. No, quiero que sean dos balas. Bien, colapsar eso. Ampliar el segundo teléfono. Más 254-12-3458 254-12-3458 más 1008002373. 254-12-3458 más 1008002373. Ahora podemos hacer que estos tal vez sean audaces. Ahora vamos a colapsar eso y eliminar este. Acepta, así como así. Puse esto de nuevo aquí y sostuve el turno presionado para empujarlo a la siguiente línea, Así como así. Ahora puedes hacerlos más grandes o más pequeños si quieres. Vamos a expandir esto. Puedes cambiar el color aquí si quieres. Veamos, encabezando tres, ese es un buen tamaño. Seleccionemos también este contenedor y fijemos el hueco 40. Actualiza eso. Revisemos los cambios. Ahí vamos. Nuestra página de contacto ya está lista. Podemos colapsar este acordeón. Ahora estamos listos para pasar al siguiente paso, que es que queremos agregar los efectos de movimiento en las diferentes páginas y luego hacer que las páginas respondan en diferentes tamaños de dispositivos, Smartphones, tabletas. Ya se ve bien en un escritorio, así que estamos trabajando en esos dos dispositivos. Entonces te veré en la siguiente lección. 26. Añade efectos de movimiento: Ahora es el momento de agregar efectos de movimiento a todos estos elementos. Si vuelvo a cargar esta página, como pueden ver este encabezado está animado mientras este solo se carga de una manera muy rígida Veamos eso otra vez. Como puedes ver, lo que queremos hacer es animar estos para que luzcan artísticos Comencemos con esta página, en realidad volviendo todo el camino a la edición de la página de inicio. Mientras todavía estamos aquí, podemos decir, de hecho, seleccionemos este contenedor que tiene el texto vaya a Efectos de movimiento avanzados. Digamos que se desvanece. A mí me gusta rebotar a la izquierda, así como así Este otro rebotando a la derecha. Efectos de movimiento avanzados, rebotando a la derecha, actualicen eso. Revisemos los cambios. Eso es mucho mejor como puedes ver. Bien, ahora volvamos a la página de la galería. Éste de aquí. Digamos editar con Elementor Bien, si seleccionamos este primer elemento, podemos ir a Advanced Motion Effects. Podemos decir, se puede jugar con todos los demás, pero a mí me gusta rebotar, seguido de este otro también rebotando Intentemos otra cosa. Acercar a la izquierda No, no me gusta hacer zoom a la izquierda, deslizarme hacia la derecha. Este otro se desliza hacia la izquierda. Y entonces éste rebotará. Actualicemos eso y veamos. Sí, eso me gusta. Por supuesto, esto no es visible y esto forma parte de la galería. Simplemente rebotará en arriba junto con la galería. Vamos a la página acerca de. Déjame cerrar sobre. Estos rubros deben ser amarillos. Creo que son mejores amarillos. Si abro las pestañas acabo de cerrar, si selecciono esta copia dorada creo que se ve mejor de esa manera. El mismo caso aplica a esta actualización que ahora de vuelta a la página de contacto actualización que cierro eso. Y ahora tenemos el about page select. Esta Can avanzó. Vamos a los efectos de movimiento. Rebotando, bien. Así como así. Básicamente, sólo voy a seguir jugando con los efectos de movimiento. Creo que ahora tienes el simulacro. Solo avanzaré rápidamente en este lugar mientras me estoy volviendo creativo con los efectos de movimiento, pero sé creativo, prueba todos estos efectos de movimiento que tenemos aquí y mira qué se te ocurre. No necesariamente tienes que hacer lo que yo estoy haciendo. Deslizándose hacia arriba. Finalmente chicos, he terminado de agregar mis propios efectos de movimiento. Espero que te hayas tomado algún tiempo y hayas agregado creativamente algunos buenos efectos de movimiento Como puedes ver el mío una vez más, déjame refrescar esto. Ahí vamos. Así es como vamos. Exactamente. Lo he hecho a través de todas las páginas. Así es como agregar efectos de movimiento a tu sitio web. Ahora, en la siguiente lección, antes de hacer que el sitio web receptivo en diferentes dispositivos, sigamos adelante y agreguemos la función de menú. Te veré en breve. 27. Configuración del sistema de pedidos: Ahora es el momento de agregar el sistema de pedidos, el sistema de pedido de menús. Vamos a estar usando un plugin increíble de Oracle llamado Gloria Food. Ahora bien, este plugin es increíble porque incluso te proporciona una app a través de la cual puedes recibir pedidos de los clientes. Vamos a ver el poder de este taponamiento. Vamos, volviendo aquí, quiero ir a plugins. Agregar aquí, voy a buscar para ordenar menú. Buscamos Gloria Food. Aquí vamos. Este enchufe de Gloria Food es lo que queremos. Eso se lo ha dicho, vamos a activarlo. Impresionante. Entonces aquí lo tenemos, y aquí está, dando clic aquí. Me alegro de que estemos dando los diferentes pasos que debemos dar para configurarlo. Necesitarás crear una cuenta de Gloria Food. Como esto sugiere, ya había creado una cuenta de Gloria Food mientras trabajaba en este sitio web de muestra. Si solo puedo iniciar sesión en Gloria Food, déjame arrastrar esto y ponerlo aquí. Así se verá tu interfaz. Puedes crear los alimentos que quieras. Como te mostré en el resumen del proyecto, puedes crear los alimentos que quieras, pero primero tienes que pasar por estos pasos, tienes que hacerlo, tienes que proporcionar los conceptos básicos del restaurante, los servicios y los horarios de apertura. Pago y pago de impuestos, impuestos y toma de órdenes legales, menú, todos estos detalles. Y luego podrás disfrutar de este sistema automatizado. Esto también ayudará a la app que vas a descargar de la playstore o la app store para saber quién es y qué órdenes están sucediendo Déjame cerrar sesión de este perfil cerrar sesión porque voy a ser redirigido para crear una nueva cuenta Porque este es un nombre de dominio diferente. Lo que quiero hacer es conectarme a Gloria Food. Empecemos por crear una cuenta de Gloria Food. Mi restaurante Dinero. Al principio lo llamo Mr. Dinero Comida. Vamos a llamarlo. Ahora vamos. Voy a usar uno de mis correos electrónicos. A lo mejor este nombre, digamos claro que voy a crear una contraseña. Estoy usando un administrador de contraseñas, voy a usar esa contraseña. No lo estoy configurando para clientes. Crea una cuenta, puedes compartir datos enchufables no sensibles o puedes decidir no compartirlos Después selecciona qué opciones quieres configurar. Como puedes ver, tienes todas estas opciones excepto una sola opción aquí. Esto no es realmente, realmente importante o necesario, pero también puedes decidir pagar por eso continuar. Quiero mostrarte por qué este enchufe es simplemente increíble. Lo descubrí recientemente y creo que es simplemente increíble. Tiene más de lo que necesitas. Ahora necesitarás ir al administrador de Gloria Food para poder configurar tu perfil de restaurante. Después de terminar la configuración, puede volver y agregar los widgets en su sitio web. Ahora estamos redirigidos a la cuenta Gloria Food. Como mencioné, es una compañía Oracle. Es propiedad de Oracle. Ya tenemos algunos de los detalles precargados. Ahora voy a cambiar mi país a Kenia porque ahí es donde estoy radicado D Nairobi. Proporcione detalles precisos porque eso es importante. Este es un negocio que estás estableciendo. También necesito proporcionar el número de teléfono, nombre de la calle y número. Digamos Avenida Moy. Como puedes ver, automáticamente va a Moy Avenue en Nairobi en tiempo real Ahí vamos a continuación. No, gracias. No digas estos detalles. Hágale saber a los clientes su ubicación exacta. Ahora puedo mostrar en el mapa precisamente donde estoy en la avenida Moy Digamos casa justo ahí al lado. Sitio web del restaurante. ¿Tienes un sitio web real? Sí, vamos a usar VFX port.com Vamos a proporcionar eso a Ahora, la cocina que voy a estar ofreciendo muestran más. Por supuesto, puedes elegir entre todos los. Siempre puedes editar todos estos. Incluso puedes eliminar cualquiera que hayas seleccionado aquí y agregar el tuyo propio. Yo solo agregaré Desayuno Mexicano, Americano. Tenemos espectáculo chino más chino, indio, Kb Sushi. Muy bien, a continuación, los restaurantes más exitosos seleccionan de una a tres cocinas Oh, espera, déjame quitarme el kebab. Déjame quitarle el indio y el sushi. Déjame también quitar el desayuno. Ahora digamos mexicano-americano y chino. A continuación, por favor valide su dirección de correo electrónico. Tengo que abrir mi correo electrónico, Ir aquí y validar. Validar la dirección de correo electrónico. Ahora estoy en mi otra pantalla. Todo bien. Entonces, cuando estoy de vuelta aquí, se valida automáticamente. A continuación, ¿ofreces recogida en tu ubicación? Sí, mi restaurante ofrece servicio de recogida. Sí o no. ¿Ofrecemos entrega? Nosotros lo hacemos. A continuación, comience a agregar zonas de entrega. Lo tengo. Agregar otra zona de entrega. Al hacer clic en eso, ahora puede cambiar el tamaño de esto para expandir su radio Lo tengo. Vamos a expandir el radio a la mayor parte del CBD de Nairobi. Todo bien. Digamos que CBD cantidad mínima del pedido que quieres hacer. Tal vez 2000 gastos de envío, tal vez 100 chelines. Tenemos que convertirlos en chelín. Vamos a cambiar la moneda. Cierra eso. ¿Reserva de mesa? Sí, ofrecemos reservas de mesa. Voy a ir con la configuración por defecto aquí. Cene en el pedido? Sí. Cuando alguien llega al lugar, puede ordenar de inmediato. ¿Ofrecen pedidos? Sí. A continuación, cómo funciona para tus clientes, permite a los clientes ordenar alimentos y bebidas cuando estén en tu ubicación. Todo bien. A continuación, cuando estés abierto, agrega horas. Yo solo iré con el valor predeterminado, pero asegúrate de establecer tus horas de trabajo. Veamos las excepciones. Si tienes vacaciones y todo lo que permite a los clientes solicitar un tiempo de cumplimiento específico, Sí, puedes decir tiempo mínimo de anticipación, 1 hora, tiempo máximo de anticipación, cuatro días. No pueden esperar recibir una entrega antes termine 1 hora y no pueden esperar recibir su pedido si lo quieren después de cuatro días y todo eso. Creo que esto se explica por sí mismo. Yo sólo continuaré a continuación. Ahora puedes aplicar impuestos. Diré que los precios del menú ya incluyen impuestos porque cargaré los precios de mi menú con los impuestos. Impuestos precargados a las ventas por tarifa de entrega. Si quieres agregar impuestos a la tarifa de envío, tal vez 16% o algo por el estilo. Formas de pago, si, acepto entrega cenar en pick up. También puedes aceptar tarjetas si quieres, pero creo que el efectivo es increíble. Siguiente nombre de la empresa, ingresa tus datos oficiales para que tu cliente sepa dónde está comprando. Mi registro de empresa de bistró. Permítanme añadir esos detalles. 00200 País, Kenia. Todo bien. A continuación mis términos y condiciones generales podemos crear a partir de la plantilla. Crear, eso está precargado. También podemos crear la política de privacidad crear a partir de esta plantilla. A continuación, ahora es el momento de instalar una app. 28. Aplicación móvil para el sistema de pedidos: Instalación de aplicaciones. Siguiente smartphone. Si tienes una tableta, selecciona tableta, ingresaré mi número a continuación. Impresionante. Ahora me han enviado un SMS con un enlace para descargar esto. Déjame solo esperarlo. Acabo de recibir el mensaje. Ahora puedo dar click en ese enlace para ir y descargar la app. Me han redirigido a la tienda de aplicaciones. Ahora claro, esto es lo que estás viendo. Si estás siguiendo, has recibido un SMS y puedes continuar y descargarlo ahora porque ya había descargado una aplicación antes. Yo sólo voy a seguir adelante y abrirla a continuación. Ahora bien, no sé qué me va a decir porque tenía lo descargué usando un número de teléfono diferente. Todo bien. Entonces necesito cerrar sesión para poder iniciar sesión con un correo electrónico diferente. Bien, entonces ahora dice que he conectado con éxito la app. En el momento en que abras la aplicación, se conectará automáticamente para que pueda golpear a continuación. Impresionante. Esa es solo la app que hace todo ese ruido. Y puede proporcionar este número del supervisor de pedidos en la red del restaurante. Como puedes ver, te enviará un pedido de prueba para que puedas ver qué vas recibir cuando los clientes ordenen a través de tu servicio. Todo bien. Esto es opcional así que solo puedo golpear a continuación. Entonces ahora que tenemos eso, tienes tu restaurante configurado. Ahora volviendo a nuestra página de inicio, veamos qué tenemos. Si vuelvo al tablero aquí y refresco ahora este es el asistente de configuración que se suponía que debíamos seguir. Si digo configurar perfil de restaurante, claro, ya lo hicimos. Esto abrirá eso. Sí, ya está todo arreglado. ¿Por qué está repitiendo esto? Y ya lo hemos hecho. Solo pasemos por los escalones. No, no necesito proporcionarlo. Vamos a la configuración del menú. Voy a ir directamente al menú configurado aquí. Puedes configurar el menú del restaurante en el futuro. Puedes cambiarlo a continuación, todo lo que ingreses o cambies se guarda en tiempo real. Sí. Siguiente por supuesto, podrás encontrar todos personaliza tu hamburguesa. Se pueden agregar diferentes artículos diferentes. Puedes agregar opciones adicionales a todos estos diferentes alimentos y los diferentes tamaños de alimentos que tienes. Bien. Omita esto a continuación. Todo bien. Entonces ahora si volvemos aquí, ¿terminamos? No, todavía no. Así que volviendo aquí, sí, ya tenemos un sitio web. Todo bien. Así que vamos repasar por estos pasos una vez más. Sí, ofrecemos pedidos. Ahora vamos a tener que pasar por todos estos pasos una vez más, creo que solo los estamos cruzando. Sí. Todos los ajustes que establecemos inicialmente están bien. Métodos de pago. Eso está bien. Como puedes ver, tenemos estos ticks confirmando todo. Siguiente, Tomando órdenes. ¿Quieres que insertemos tu menú? No, esto es opcional porque se te cobrará cuando decidas subirlo. Aquí puedes crear manualmente, no hay archivos subidos. Esto es opcional. Dejémoslo así. Publicación, ventas móviles, pagos, pago en línea, eso es un servicio de pago. Vamos a recargar esta página. Configurar restaurante. Descartemos a todos estos otros. Ahora bien, esto es un poco raro porque cuando estaba configurando el sitio web de referencia, pasé por los mismos pasos dentro del tablero de Gloria Food. Y esto se comprobó después de que pasé por todos esos pasos. Pero ahora mismo, parece que me faltan uno o dos detalles en la configuración, Pero para ahorrar tiempo, no creo que vaya a pasar más tiempo tratando de averiguar qué detalle me he perdido, pero por ahora tenemos todos los detalles que necesitamos para agregar un botón de pedido en nuestra página web. Como parte de tu tarea, ve a Youtube y busca el canal oficial de Gloria Food. Y descubre cómo configurar cada detalle en tu cuenta de Gloria Food Panel de control de Gloria Food para que lo revisen. Pero como mencioné, tenemos todos los detalles que necesitamos. Y en la siguiente lección, vamos a estar agregando los botones de pedido y los botones de reservas en nuestras páginas. Entonces te veré en la siguiente lección. 29. Sistema de pedidos de buttons: Ahora ya casi terminamos con esto. Vayamos a la configuración. Ahora tenemos estos dos botones. Si copio esto, veamos si podemos exhibir en algún lugar aquí en la parte delantera. Esta es la página acerca de. Déjame cerrar eso. Vayamos a la página principal aquí mismo. Edita con elementor, déjame hacer la Gloria Aquí estamos. Vamos a agregar un código corto ahí mismo. Voy a pegar ese código corto ahí mismo. Este es el código corto que recibimos de Gloria Food. Ahí está. Ahora, si actualizamos esa página y hacemos clic en Vista previa. Si le damos clic, ¿ podemos cargar el menú? Bistro Yami? Por supuesto, estos son los alimentos que seleccionamos. Recuerda, siempre puedes volver atrás y crear esos alimentos. Puedes hacer un pedido de brócoli. Puedes seleccionar lo que quieras aquí, Mayo, ajo, mostaza. Si tienes instrucciones especiales, tengo mucha hambre. Y puedes seleccionar la cantidad. A continuación, agregue al carrito. Ahora una vez que se agrega a la tarjeta, puedes ir a la tarjeta y proporcionar tus datos aquí. Si sigues estos pasos aquí, recibirás el pedido en tu teléfono. Tendrás la opción de aceptar de inmediato. Ahora la cosa es que, una vez que recibas un pedido, también verás una alerta ahí mismo diciendo orden por primera vez. Es posible que desee confirmar con este cliente llamando antes de aceptar ese pedido en su teléfono. Al hacer clic en Aceptar, puedes llamar al cliente porque su número de teléfono estará ahí mismo, mostrado en su pedido. Por supuesto, como puedes ver en tu teléfono ahora mismo, puedes ver el número de teléfono una vez que los llamas y confirmar si quieres decirles que paguen antes de que hagan un pedido, puedes avisarlos en tu llamada telefónica. Y luego si pagan 50% o 100% ahora puedes aceptar el pedido en tu app. Espero que eso tenga sentido. hecho de que no puedas aceptar pagos en línea no significa que no puedas llamar a un cliente que haya realizado un pedido y pedirle pague antes de que puedas aceptar su pedido en tu app. Creo que es un sistema muy bueno. Si tuvieras que pagar a un desarrollador web para crear un sistema como este, sería muy caro. Pero aquí tienes un sitio web que está funcionando completamente y también tienes una aplicación, una aplicación para teléfonos móviles que funciona completamente. Ese es un excelente sistema para tener para página web de tu restaurante. Déjame cerrar esto. Básicamente. Así es como hacer eso. Oh, espera. Antes de irnos, quiero que le demos estilo a esto. En primer lugar, seleccionaré esto, iré al estilo, copiaré este código, luego volveré a este lugar. Personaliza. Podremos personalizar este botón ahora para el color que podemos seleccionar este y cambiarlo a X y luego pegar nuestro código ahí mismo. Bien, no podemos pegarlo. No sé por qué. E09 cien 48 948 exactamente 48 948 exactamente . Ahora podemos, también podemos agregar algo de ese radio fronterizo. Eran 50, como pueden ver. Ahora está redondeado. Podemos darle ese relleno de digamos 20, digamos. También puedes cambiar el texto. Lo que dice el texto, establece, menú y orden. Ahora si actualizamos esta página. Ahí vamos. Ahora recuerda que mencioné que estos son marcadores de posición, así que estos son los botones reales que usaremos aquí Ahora una cosa que notarás es que también tenemos estos elementos elementos de Gloria Food. En lugar de usar este botón de back-end, podemos simplemente arrastrar este botón de ordenar aquí mismo. Seleccionamos esa copia, seleccionamos estilo de pegar. Ahora vamos a borrar eso. Ahora aquí tenemos nuestro botón de actualización abierta. Si tenemos una vista previa de los cambios, si ahora usamos este botón, está funcionando completamente porque es un botón elemental de Gloria Food. Volviendo aquí, también podemos seleccionar una tabla de reservas. Reservación. Seleccione esa copia, selecciónela, haga clic con el botón derecho, Pegar estilo, elimine esa actualización. Vamos a previsualizar los cambios. Ahora veamos las reservas ahora. Aquí estamos. Simplemente podemos seguir y hacer nuestro pedido. Ahora bien, estos botones son los mismos que he usado aquí mismo. Se trata de reservas de mesa. Podemos duplicar esto. No sé qué pongo aquí en el sitio web original. Déjame ir a casa. Justo aquí, teníamos reservas de mesa. Sí, iré aquí y duplicaré esto. Llevarla, dejarla caer ahí mismo. Seleccione esa copia, selecciónela , haga clic derecho, Pegar estilo, luego eliminaré la inferior. Revisemos los cambios. Puedes repetir estos botones de Llamado a la Acción en todo el sitio web porque siempre es muy importante tener un llamado a la acción. Ahora para el menú abierto, creo que aquí tenía este de aquí, duplicado en una landing page. Es necesario llamar a las personas a la acción, y las llamas a la acción agregando botones en lugares estratégicos. Seleccionaré esta copia, seleccionaré este estilo de pegar, luego eliminaré esta. Alguien verá estas pocas comidas aquí. Y luego harán clic en Menú y ordenarán. Actualiza eso. Vayamos aquí y veamos eso en menú de acción y orden. Ahí vamos otra vez. Ahora una cosa más que acabo de recordar. Este botón debería llevar a la página Acerca de. Si selecciono eso, puede decir su URL Acerca de. Entonces podemos abrirlo en una nueva pestaña, actualizar que vamos a revisar los cambios. Bien, si alguien quiere leer más sobre por qué estás comiendo de manera saludable, puede hacer clic en eso e ir a la página Acerca de. Lo que sea que quieras poner ahí. Recuerda que aquí se supone que tenemos ese botón de Reservas de Mesa. Sólo tienes que seguir adelante y editar esta página. Simplemente puedes copiar. Puedes venir aquí y decir copiar y luego ir y pegar ese botón aquí mismo. Ese es un ejercicio rápido para ti, no es muy difícil, así que solo sigue adelante y pruébalo. Y creo que eso es todo lo que tenía para el sistema de pedidos ahora. Creo que es el momento de hacer que el sitio web sea receptivo en diferentes dispositivos. En la siguiente lección, veamos cómo hacer eso. 30. Encabezado receptivo: Ahora estamos a punto de terminar la clase. El sitio web ya se ve increíble. Terminamos de trabajar en el sistema de pedidos, el sistema de reservas, pero necesitamos que el sitio web se vea increíble en diferentes dispositivos. Ya se ve bien en las computadoras de escritorio, pero tenemos que asegurarnos de que se vea bien en teléfonos móviles y tabletas Para empezar, vamos a presionar Control Shift. Controla Shift en tu teclado. Solo para sacar a colación las herramientas de desarrollo de tu navegador. Estoy usando Chrome ahora. Así se ve en Samsung Galaxy. Ahora mirando esto, como pueden ver aquí está nuestro menú. Si hago clic, se ve muy feo. Bien, aquí es un poco complicado trabajar con esto. Permítanme referirme a responsive para que podamos ampliar esto y volver atrás. Básicamente, así es como se ve, como puedes ver. Aquí está mi menú, Togo, aquí está mi logo. El sitio web no se ve muy impresionante. Lo primero que queremos hacer es hacer que el encabezado responda, la barra Nap y el logo cambiando aquí. Quiero pasar el cursor sobre esto y decir mi encabezado. Eso nos llevará al lugar donde podamos editar el encabezado. Aquí estamos ahora, antes que nada, voy a darle a este icono de modo responsivo y después voy a cambiar a teléfonos móviles. Como puedes ver, recuerda que están dentro de este contenedor, eso está dentro de este otro contenedor. En este contenedor, ambos están ocupando el 100% del ancho. Si nos fijamos en este pequeño contenedor que sostiene el logo, es 100% y este 100% ¿Qué pasa si elegimos el logo, volvemos dentro de la disposición y decimos porcentaje y dejamos que ocupe el 30% También seleccionemos esto ahora, debería ocupar el espacio restante. Creo que 70% escoge células por ciento. Como puede ver, el 70% no se está alimentando. Si lo hago más pequeño, lo empujará hasta donde encaje. Piensa 60 algo. Seleccionemos esto. En primer lugar, eso debería ocupar el 100% Bien, solo actualicemos eso por un segundo. Permítanme seleccionar este contenedor que sostiene a los dos avanzados. Rompamos los márgenes y el relleno. Permítanme seleccionar contenedor que contiene el menú. A ver si el 64% está bien. Eso me parece bien. Bien, así que ahí vamos. Ahora si volvemos aquí y actualizamos esta página y cambiamos a Samsung Galaxy ocho. Refresquemos eso una vez más. Bien, parece que hemos afectado este control. Este contenedor que contiene estos dos contenedores necesita ocupar 100% actualizar eso. Ahora si volvemos aquí y controlamos el turno R para refrescar duro. Oh espera, creo que es por este texto de aquí mismo como pueden ver. Primero que nada volvamos a la página de inicio. Vamos a cambiar al teléfono móvil. Déjame seleccionar ese estilo tipografía, Vamos a hacerlo más pequeño, actualizar eso, luego vamos a revisar la página Impresionante. Sí, era el tamaño del texto lo que lo hacía ocupar la mitad porque el texto se desbordaba afuera También podemos hacer esto más pequeño. No puedo seleccionar esto. Déjame refrescarme porque. El encabezado no ha tenido efecto en este editor. Bien, volvamos a cambiar al modo responsivo una vez más. Ahora como puedes ver, se ve increíble. Y puedo seleccionar esto, la clase mundial puede hacerla más pequeña también. Podemos aumentar, oh espera el margen, ajustes sobre esto. En las sabrosas comidas podemos restablecer eso, podemos volver aquí y aumentar el tamaño, pero también disminuir la altura de la línea. Actualiza eso. Bien, ahora sigamos adelante y cambiemos a la configuración del encabezado. Seleccionando este elemento. El elemento. Vamos dentro del envoltorio del menú. Antes de ir a cualquier parte, cambiemos la hamburguesa, el estilo de la hamburguesa Como pueden ver, tenemos la hamburguesa y cerrar esta es la hamburguesa tog, el Togo cerrado Primero que nada cambiemos ese tipo de fondo. Hagámoslo de color. Vamos a darle ese amarillo, ese oro seleccionando esa copia, eso igual que al flotar En primer lugar, tampoco queremos que tenga frontera alguna. Queremos que el fondo cambie a blanco así. Pero ahora queremos que el color del icono sea negro. Estas líneas internas actualizan eso. Ahora si volvemos aquí y restablecemos esto. Refresca eso. Ahí vamos. Ahora vamos a ampliar este menú. Para el envoltorio de menú. Oh, espera, se supone que ahora tenemos este porcentaje. Podemos aumentarlo o disminuirlo, porque no queremos que ocupe toda la pantalla. Ahora podemos agregar un logotipo móvil. Volviendo al contenido logotipo del menú móvil. Vamos a agregar nuestro logo por ahí. Ahí vamos. Ahora si le damos clic, tiene ese logo, pero se ve estirado. Así que volviendo al estilo, ancho del logotipo del menú móvil puede reducir el ancho o aumentarlo . Y la altura. Creo que me gusta como ese envoltorio de menú. Hagámoslo móvil. Envoltura de menú, fondo negro. Contraer el envoltorio del menú. Estilo de elemento de menú. Cambiémoslo a blanco Al flotar, debería tener ese color dorado cuando esté activo, también debería tener ese color dorado Ahora vamos a finalizar con la hamburguesa cerrada de Togo. Tenemos el Togo cerrado, el color del icono debe permanecer negro. Pero ahora la hamburguesa, el tipo de fondo, ese color dorado ¿Podemos alinearlo? Observación rápida, aquí mismo. Mientras editaba este video, me di cuenta en lugar de intentar alinear esto a la izquierda, lo que deberíamos haber hecho es aumentar el ancho de este envoltorio de menú para que puedan alinearse de izquierda a derecha, así como esto. Así que ve al ancho del envoltorio de menú. Y aumentemos esto con, hasta ese momento ahora están uno al lado del otro. De hecho, vamos a hacerlo un poco más amplio hasta ese punto. Entonces actualicemos. Como mencioné, estoy grabando esta actualización mientras edito esta lección. Eso significa que ya había grabado el resto de esta lección y las lecciones restantes y el menú se envolvieron. Las lecciones restantes seguirán siendo este tamaño y con esta desalineada Pero no te preocupes. Al menos ahora ya sabes qué hacer. Bien, no podemos alinearlo a la izquierda. Digamos que actualice, Refresca ese clicando que se abre el menú. Ahora claro, esto no está ahí en el sitio web final que ve el usuario. Esto es para ti como administrador, por eso está abstrayendo esto Básicamente, así es como configurar el encabezado para que responda a diferentes dispositivos. Voy a cambiar al modo tablet. Por supuesto, como puedes ver, no se ve tan impresionante. Espera, cambiemos a tablet. Justo aquí en la configuración del encabezado, quiero seleccionar este contenedor, también darle el 100% Ahora esos quedarán ahí. Actualización. Ahora tenemos que repetir los mismos ajustes para la versión tablet. Empecemos con el logotipo del menú móvil. Redujamos el ancho. Creo que esa es una buena talla. Esto se ve bien, pero hagámoslo negro. Queremos ir al envoltorio del menú y hacerlo negro. Entonces elementos del menú estilo color debe ser blanco. Al flotar, debería ser ese oro. Así como así. Actualización. Vista previa. Bien, vamos a previsualizar aquí mismo. Vamos a asegurarnos de que lo estamos viendo en el ipad mini. Ahí vamos. Por lo que podemos aumentar el tamaño del logotipo ligeramente. Si selecciono el elemento de imagen, puedes aumentar el ancho, tal vez hasta ese punto, actualizar eso. Entonces podemos refrescar esto y ver cómo se ve exactamente. Creo que me gusta la forma en que se ve ahora. Así es como hacer que el encabezado responda en diferentes dispositivos. En la siguiente lección, hagamos que el resto de la página responda. Te veré en breve. 31. Página de inicio receptiva: Ahora acabamos de terminar de hacer que el encabezado sea receptivo. Voy a cerrar a este editor. Ahora nos quedamos con la página de inicio. Recuerda que esta es la página de inicio. Ahora voy a golpear el control R para refrescar esta página para reflejar el nuevo encabezado. Bien, ahí vamos. Ahora cambiemos al modo de respuesta. Vamos a cambiar al modo tablet. Así se ve el sitio web en las tabletas. Si selecciono los textos pueden ir dentro de estilo, reducir el tamaño así. Creo que así se ve increíble. También quiero seleccionar el contenedor que contiene todo esto. Ir a Avanzado, y luego mientras esto esté vinculado, dale un relleno de 20 vueltas. Impresionante. A continuación, pasemos a esto. Quiero s, vamos a seleccionar esto, ir a tipografía de estilo Hagámoslo 40 de tamaño. Redujamos el tamaño a 1.1 También podemos reducir esta brecha a 30. Digamos 20 una ronda. Podemos darle un relleno de 20. Seleccione este contenedor, vaya a avanzado 20 todo redondo. Creo que se ve increíble, tal como es. Pero queremos hacer esto 40 por uniformidad. Repitamos lo mismo aquí, 20 todos redondos ahora derecha e izquierda, pero 100 arriba y abajo, 2,200 100 por debajo de 20, izquierda Ahora mismo 100 top así. Repitamos lo mismo aquí. Avanzado 20 todo redondo. Avast, quita eso. Enlace 2,120 100, 20 actualización completa que previsualiza los cambios Creo que se ve increíble en la tableta. Ahora bien, si cambiamos a pantallas móviles, así es como se ve. Creo que ya se ve bien con la configuración de la tableta recién aplicada por encima de la configuración del teléfono móvil. Volviendo aquí, cambiemos a Samsung Galaxy. Así se ve en un Samsung. Creo que se ve increíble. Pero ahora no hemos trabajado en la foto, así que sigamos adelante y hagamos eso. Creo que se ve increíble. Ahora, por supuesto, haremos la foto por separado. Sí, hagamos la foto por separado. Llamemos a esto una lección. Te veré en breve. 32. Footer receptivo: Como ya te has dado cuenta, la landing page ahora se ve increíble, excepción de la comida. Ahora hagamos algo con respecto al cambio de comida. No vayamos ahí. Simplemente haga clic derecho aquí y abra nueva pestaña de vinculación para abrir la página de destino en una nueva pestaña. Ahora claro, pasemos el cursor sobre esto y hagamos clic en Mis Alimentos, porque ahora queremos trabajar en la comida Porque ya terminamos con esto, voy a cerrarlo. Esa es nuestra vista de dispositivo. Aquí está nuestra foto, lista para la edición responsiva. Seleccionando el modo de respuesta, cambiemos al modo tablet, y así es como se ve. En primer lugar, quiero seleccionar el logo y hacerlo al 100% también quiero seleccionar el contenedor que los sostiene todos y darle 100, top 20 lado 120. Actualiza eso. Piensa que se ve bien en las pantallas móviles. Déjame hacer eso un poco más pequeño para que quede así. Así es como se ve en las tabletas. Pasemos a pantallas móviles. Así es como actualizar eso. Pero tenemos que seleccionar estos y ponerlos en el medio. Actualiza eso. Ahora bien, si cambiamos a esta actualización, comencemos desde lo más alto. Esa es la cima. Desplazamiento hacia abajo. Bien, podemos poner esto en el medio, pero también podemos dejarlo ahí. Pero debido a que estos otros están en el medio, también deberían estar centrados junto con el botón. Eso vamos a hacer todo el camino hasta el pie. Todo se ve bien, pero ahora estamos abajo con el pie. Pero antes de que terminemos, permítanme decir solo avance. Haga clic en el logotipo para ir a la página de inicio, luego edite con elementor cambie a teléfono móvil y luego desplácese hacia abajo aquí para seleccionar el texto, alinearlo al centro Este texto también se alinea con el centro. Y el botón también va al centro. Todo lo demás está alineado al centro. Si adelanto ese turno de control, yo, creo que ahora se ve increíble. Así es como hacer que el pie de página sea receptivo. Y también hemos hecho ese ajuste a la página de inicio por uniformidad. Y este es el final de esta lección. Ahora como un ejercicio rápido, porque ya has visto cómo hemos podido hacer que la página de inicio, la página de destino sean receptivas y el encabezado y pie de página. Ahora quiero darte un ejercicio rápido. Depende de usted hacer que el resto de las páginas receptivas usando los mismos principios que hemos utilizado para hacer que la página de inicio sea receptiva. Ese es un ejercicio rápido en el que puedes participar y ver si puedes finalizar este sitio web Ya hemos hecho las partes más duras, ahora esta es solo la parte fácil. Así que adelante y termina la galería acerca de las páginas de contacto y galería. Dicho esto, tengo algunas cosas cruciales que debo señalar. Entonces te veré en la lección final. 33. Reflexiones finales: Quiero tomarme un momento y felicitarte por terminar esta clase si aún estás aquí. Después de todas esas lecciones, significa que eres muy serio acerca de aprender a construir sitios web con Wordpress o que realmente te tomas en serio el sitio web de tu restaurante. El hecho de que estés aquí significa que has terminado de construir tu sitio web. Y solo quiero darte las gracias por elegir aprender de mí. Por supuesto, si es tu primera vez que me ves, tengo muchas más clases que puedes tomar solo visitar mi perfil aquí mismo sobre compartir habilidades. Aprenderás a construir otro tipo de sitios web y podrás mejorar tus habilidades de Wordpress drásticamente Dicho esto, también quiero señalar que el sitio web que construimos no es SEO. Optimizado. Seo significa optimización de motores de búsqueda. Y eso significa hacer tu sitio web sea visible para los motores de búsqueda como Google. Y siendo cuando la gente va a Google y busca sitios web de restaurantes cercanos a ellos, tu sitio web debería poder aparecer en los resultados de búsqueda. De lo contrario, simplemente serás invisible y no obtendrás el tráfico que necesitas para hacer crecer tu negocio. Y así necesitas aprender a hacer que tu sitio web sea visible para los motores de búsqueda. La buena noticia es que tengo un curso o clase integral aquí mismo sobre compartir habilidades que puedes ver para aprender a optimizar tu sitio web. Cubrimos todo lo que necesitas saber sobre Wordpress, SEO. Y eso significa que para cuando termines la clase, habrás optimizado tu sitio web. Una cosa más, solo quiero pedirte un favor rápido, que tardará menos de 1 minuto. Tomará unos 40 segundos. ¿Te tomarías un momento y dejarías una reseña de esta clase? Por favor, hágame saber qué piensa de la clase. ¿Qué te gustó de ello? También estarás dejando que otros estudiantes potenciales sepan qué esperar de esta clase. Otra cosa que sucede cuando dejas una revisión es que el algoritmo skillshare mira las diferentes reseñas que quedan para cada clase y determina si la clase debe mostrarse a más estudiantes Estarás ayudando a esta clase a ser más visible para más futuros estudiantes que buscan este tipo de contenido que significará el mundo para mí. Simplemente revisa debajo de este reproductor de video, hay un botón de revisión o comentario que deja tus comentarios. Déjame saber cómo me desempeñé y realmente, realmente lo agradeceré. De lo contrario, esto marca el final de esto.