Diseño de portafolio universal: de la plantilla Figma a un sitio de WordPress en vivo con Elementor Pro

1. Bienvenido a Figma para WordPress: Construye un portafolio universal con la clase Elementor Pro: Hola a todos. Bienvenido a Universal portfolio website design with element of pro, una clase donde aprenderás a construir un hermoso sitio web de portafolio profesional sin escribir una sola línea de código. Comenzaremos creando una cuenta Figma y abriremos nuestro archivo de diseño Aprenderás a editar texto, intercambiar imágenes y elegir nuevos colores para que coincidan con tu estilo personal. A continuación, avanzaremos en un dominio y configurar el alojamiento de su sitio está en vivo y listo para compartir con el mundo. Después viene la parte divertida instalaremos WordPress y element free y elemento pro y empezaremos a recrear tu diseño Figma usando simples herramientas traganrof, sin necesidad de codificación, pero no nos vamos También aprenderás a agilizar tu sitio en la página SCO para que Google pueda encontrarte y conectar Google Analytics para ver quién visita y en qué están haciendo clic. Hola, soy Akalanka, diseñadora web de Sri Lanka. Mi pasión es compartir mis conocimientos. He hecho que esta clase sea súper amigable para principiantes. Aunque nunca antes uses Figma o Wordpress, te guiaré en cada paso del camino Esta clase es perfecta para principiantes que tienen curiosidad por freelancers de elementp y los creativos que quieren una ¿Alguien listo para convertir su diseño Figma en un sitio web de trabajo en vivo Al final de esta clase, tendrá un sitio web de cartera listo para SCO completamente funcional diseñado por usted y construido con confianza, listo para comenzar la UCI dentro de la clase 2. Introducción a las herramientas que usamos: ventajas, desventajas y alternativas: En esta clase, utilizaremos principalmente tres herramientas Figma, verpus y elemento P. Echemos un vistazo a cada herramienta hace Hay pros y contras y algunas alternativas. Entonces sabes exactamente con qué estás trabajando. En primer lugar, Figma. Figma es nuestra herramienta de diseño. Es donde crearemos el diseño y el estilo visual de tu portafolio. Antes de convertirlo en un sitio web real. Hablemos de prosa. Pigma se ejecuta en tu navegador. No es necesario descargar ni instalar nada. Es gratis para usuarios individuales. Puedes editar tus diseños en vivo con otros. Entonces, si estás trabajando con un cliente o compañero de equipo, pueden dejar al hombre sugerir ediciones o incluso más elementos todo en tiempo real También está repleto de características prácticas como componentes de diseño automático y bibliotecas compartidas que hacen que el diseño sea eficiente incluso para principiantes. Aquí hay algunas desventajas. La interfaz puede ser un poco abrumadora al principio. Hay muchos banners y dos estudiantes, y debido a que está completamente basado en la nube, necesitará una conexión a Internet estable para funcionar sin problemas. Como alternativa hay herramientas como ADovxD e Ikech. Además, puedes usar CanMa. Es una opción amigable para principiantes, pero tiene muchas limitaciones. A continuación, usaremos WordPress. WordPress es nuestra plataforma web, la base que impulsa tu sitio. Es una de las plataformas más populares del mundo. Utilizado por más del 40% de los sitios web. Hablemos de pros. Es de código abierto y gratuito. Obtienes el control total de tu sitio web desde el diseño hasta el SCO hasta el rendimiento. Puede instalar enchufes para agregar casi cualquier característica que se le ocurra. Y es amigable para principiantes, especialmente cuando te emparejaste con un constructor visual como elemento. Ahora, aquí hay algunas desventajas. Necesitarás comprar un dominio y hosting para convertirte en un sitio en vivo. Requiere actualizaciones y copias de seguridad periódicas para que las cosas funcionen sin problemas. Y aunque es flexible, configurarlo puede parecer técnico al principio. Alternativa a Wordpress Wix y al espacio cuadrado Earl en uno creadores de sitios web que son más fáciles de comenzar, pero ofrecen menos control Webflow le brinda más libertad de diseño. Además, para un sitio web sencillo, framer es otra mejor opción. El último elemento del elemento pro de pro es nuestro creador de páginas. La herramienta que te permite convertir este diseño prot VolufigMA en un sitio web de palabras completamente funcional Hablemos de pros. Es extremadamente amigable para principiantes. No se necesita código, solo Dragon Row. Obtendrá un control total del diseño sobre cada parte de su sitio, incluida la vista móvil. Elementor pro incluye widgets avanzados como formularios, deslizadores, intervalo de premios, Testimonios y Con el team builder, puedes diseñar visualmente toda la estructura, encabezados, pies de página y plantillas de bloques de tu sitio visualmente toda la estructura, encabezados, pies de página y plantillas de bloques Element of pro es un pad plug in, así que no es gratis. Además, si decides cambiarte a otro constructor más tarde, tu diseño no se transferirá, necesitarás reconstruir y aunque sea fácil de usar, aún necesitarás dedicar algún tiempo aprendiendo la interfaz y las prácticas básicas. Ahora hablemos de algunas alternativas. Hay constructores como Prix builder, Brave builder, DV oxygen. No sólo eso, tenemos Wordpress editor por defecto Gutenberg En la siguiente lección, saltemos al mundo del diseño. 3. Crea una cuenta en Figma: Hola a todos. Es momento de crear una cuenta Figma Si ya tienes una cuenta Figma, puedes saltarte esta lección Si no solo vas a Google o das clic en la tinta en la sección Recursos. Si vas a Google, busca en Figma, entonces verás este tipo de resultados, simplemente haz clic en el primer resultado Ahora estoy en la landing page de Figma. Si ya tienes una cuenta, puedes hacer clic en Iniciar sesión. Si no, da click en este botón, empieza gratis y aquí, haz click en. Continúa con Google para registrarte con tu cuenta de Gmail. Bien, ahora voy a hacer clic en mi cuenta de Gmail y dar clic en. Continuar. Bien. Ahora solo me inscribo y tenemos algunos detalles que llenar. Primero aquí, tenemos que agregar nuestro nombre, así que agregaré mi nombre, luego dar clic en Continuar. Entonces tengo que seleccionar ¿Qué tipo de trabajo realiza? Entonces aquí, seleccionaré Diseño. Luego haz clic en Continuar. Entonces dice, haz alguno de esos que describa tu trabajo. Aquí, seleccionaré freelancer y tú seleccionas de acuerdo a tu puesto, luego hago clic en Continuar. Entonces tenemos otra pregunta como, ¿con quién colaboras habitualmente? Aquí, seleccionaré como nadie solo yo y haré clic en Continuar, entonces no quiero invitar a nadie. Me saltaré esta parte y aquí, seleccionaré otra luego haga clic en Continuar y aquí, ¿ ha usado el producto IgM antes, agregaré muchas veces Si no estás familiarizado con IgM, simplemente haz clic en y haz clic en Continuar Después seleccionaré este paquete de inicio. En futuras lecciones, explicaré los beneficios de la suscripción de página de Figma. Sin embargo, podemos seguir todas esas lecciones con el paquete gratuito. Doy click en Continuar y aquí, voy a dar click en Eskep ahora aquí está el tablero de Figma. Todos nuestros proyectos se cargarán aquí. Como primer paso, vamos a crear un nuevo archivo Figma para hacer eso hago clic en este nuevo archivo de diseño Bien, aquí está la interfaz figma. En primer lugar, voy a renombrar este archivo Figma. Vamos a renombrarlo como mi primer proyecto. Entrar. Ahora en la siguiente lección, familiaricemos con todos esos paneles e intentemos crear nuestro primer marco o nuestro primer diseño. S en el siguiente 4. Un recorrido por Figma: explorando la interfaz: Hola a todos. Aquí tenemos el portafolio universal Figma archivo Simplemente hago clic en este botón Figma de apertura y creará una copia de nuestro archivo Figma. Si revisamos el archivo Figma, aquí tenemos Portfolio versión femenina y cartera versión masculina. Da click en la versión femenina y haz clic en este botón de reproducción para abrirlo en nueva etiqueta. Entonces aquí está la vista previa, y ver, luego hago clic en este siguiente fotograma, y aquí tenemos la versión masculina del sitio web de portafolio. Y no sólo eso, aquí nos hemos instigado. Istigaset es el lugar que define los colores y la fuente de este sitio web de cartera Ahora te mostraré cómo cambiar los colores de la fuente, el texto y las imágenes. Primero, comencemos con los colores. Piensa si no te gusta este color o si tienes industria diferente o si planeas diseñar un sitio web amplio contra la polio para coach de relaciones, en ese caso, este color no será el adecuado. El color adecuado serán los colores rosa, negro y blanco. Entonces cambiemos los colores. Para cambiar los colores, no necesitamos pasar por todos y cada uno de los elementos. Aquí, podemos seleccionar este elemento de color de paleta de colores. Entonces aquí verá este color de campo y dará clic en el color primario, y aquí verá el icono de edición, haga clic en él, y luego haga clic aquí debajo de la propiedad. Entonces aquí puedes agregar el código de color. Entonces agregaré código de color como hashtag FF 200. El color cambiará a este color naranja. Y si lo comprobamos en el diseño, aquí, todo cambia al color naranja. Ver, Porque en figma, definimos este código de color como variable de color primario o el color primario es tile Cuando lo cambiemos en un solo lugar, afectará a todos los fotogramas. Y ahora cambiemos este color a hígado y color. Simplemente haga clic aquí y hagamos esto como sitio web de coach de relaciones. Así que agreguemos como el color rosa. Color como este. Bien, ahora todo cambia a color rosa, y luego tenemos que cambiar el texto. Entonces el texto en los dos fotogramas es editable, lo que significa que podemos simplemente hacer doble clic en el texto y editarlo Solo edítalo como Zugim punteó así. Entonces en algunos lugares, si solo hacemos doble clic sobre el texto, no va a hacer edición de texto si sucede en Mac, puedes presionar comando y hacer doble clic sobre el texto así. Entonces aquí presiono el comando y doble clic así, y si usas Windows, puedes presionar Control y hacer doble clic. Entonces puedes cambiar esos textos a tu gusto. Así es como podemos cambiar el texto, y no importa el lugar, solo puedes cambiarlo así. Y afectará al diseño, pero si el texto cambia el diseño así, en este caso, esta sección es más pequeña. Entonces en este caso, tenemos que agregarlínea y convertirla en una línea como esta Entonces tenemos que atarse las imágenes. Para ello, sólo podemos seleccionar la imagen como hicimos antes. Si no selecciona pulsamos cuando hacemos el doble clic, podemos presionar Comando o mantener presionado Comando o Control. Podemos presionar Comando en Mac y Control en Ventana, y seleccionará. Después en llenar, tenemos la sección de imagen, solo seleccionarla, y ahora podemos dar click en este botón de subir desde la computadora y se abrirá el navegador de archivos. Bien, aquí sólo voy a seleccionar una imagen. Seleccione este y se agregará. Entonces cuando lo agreguemos, se verá así. Entonces lo que podemos hacer actualmente es cosecha. Deberíamos hacerlo como mejor. Entonces lo que podemos hacer es aumentar este diseño presionando comando mientras usamos la rueda del mouse para aumentar el tamaño así o en Windows, presionar Control y rueda del mouse. Entonces lo que podemos hacer es que podemos dar click aquí y configurarlo tarea de cultivo. Entonces aquí puedes cambiarlo cuando quieras cambiar, así que solo lo voy a agregar así y aquí solo puedo aumentar. Aumentas la imagen, debes presionar Mayús. Si no presionas el turno, se ajustará sin. Dañará el aspecto de la imagen. Así que siempre presiona Shift y ajústalo así. Ajustémonos así y pongámoslo así. Bien. Ahora solo cambiamos la primera imagen y aquí, cambiemos también esta imagen, seleccionemos la imagen. Entonces aquí puedes ver la imagen que seleccionamos, y aquí, pincha sobre la imagen harás doble clic sobre la imagen. Entonces aquí podemos dar click en la imagen y dar click en subir desde computadora. Y aquí, agreguemos esta imagen. Ahora lo que tenemos que hacer es que tenemos que cambiar esto para que encaje, luego aumentar la sección, luego hacer un recorte y aquí no seleccionar esas esquinas azules, seleccionar la imagen, y aquí tenemos final de la hoja de prensa de imagen y ajustarla en consecuencia así. Entonces de esa manera, podemos cambiar las imágenes. Aquí, podemos seguir el mismo paso en falso y cambiar las imágenes, y para el fondo, también podemos cambiarlo Actualmente, no tengo fondo de imagen. No obstante, sólo voy a seleccionar el fondo, y aquí tenemos imagen propiedad de color blanco en el campo. Entonces aquí tenemos que cambiar esta imagen. Da click en la imagen, haz click en subir desde computadora y solo vamos a seleccionar esta, y ahora tenemos que hacerlo como fit y luego recortar no creo que esta imagen sea apta para aqui, luego presiona shift y d así. Entonces podemos ajustarlo como queramos, así se verá así. Y ahora si seleccionamos el marco fot polo y hacemos clic en el icono de visualización, podemos ver los cambios que hicimos así Bien, es bastante simple. En este método, puede cambiar el texto, imágenes y los detalles de esos marcos. Y aún así, estoy en la etapa de desarrollo del expediente. Después de diseñar completamente esto, voy a renombrar esos marcos como aquí, héroe y aquí podemos agregar menú los cambiaré así. Entonces de esa manera, comprenderás fácilmente las secciones en las que estás trabajando actualmente. Además, si tienes un requisito de diseño de sitios web de portafolio para una persona masculina, puedes usar esto no solo eso, ahora tienes un conocimiento básico de Figma, lo que significa que puedes crear tus propias secciones A modo de ejemplo, aquí no tenemos una sección para galería, lo que puedes crear tu propia galería. Entonces te veo en la siguiente lección. 5. Crear un subdominio: Hola a todos. Ahora estoy en nuestra página web de portafolio Universal Figma Design. Puedes consultar este enlace en la sección de recursos. Entonces aquí tenemos dos diseños de portafolio. La primera es para la versión femenina y la segunda para la versión masculina. Entonces voy a usar esta versión de portafolio femenino para diseñar nuestro sitio web. Entonces vamos a diseñar sitio web para Hannah Clark. Para ello, necesitamos tener un host en y dominio. Bien, si planeas comprar un nuevo dominio y alojarte en, puedes eskip esta lección e ir a la siguiente lección En la siguiente lección, te mostraré cómo comprar dominio y servidor de hosting. Sin embargo, si ya tienes un dominio y servidor de alojamiento, en esta lección, te mostraré cómo crear un subdominio y alojar nuestro sitio web en subdominio Entonces comencemos. Ahora estoy en el panel C de mi proveedor de hosting, así que uso Name cheep como proveedor de hosting Entonces aquí dentro, voy a la sección de dominio. En la sección de dominios, simplemente hago clic en los dominios. Ahora aquí, puedo ver todos los dominios que tengo actualmente. Voy a utilizar este dominio personalizado design.us de sitio web para crear un subdominio Entonces, para crear un subdominio, simplemente hago clic en Dominio Creado Ahora aquí voy a ingresar el nombre del subdominio. En mi caso, será hana punto diseño web personalizado US porque cuando creamos subdominio, tenemos que seleccionar el dominio principal Entonces solo copio el diseño de sitio web personalizado dominio de Estados Unidos, y aquí solo agrego Hanna punto y fase el subdominio porque nuestras Psonas o el nombre de coach de negocios Bien. Ahora aquí cuando escribo el nombre de dominio, se puede ver que tenemos un nombre raíz de documento como nuestro nombre de subdominio Y aquí hemos compartido la raíz del documento y tiene la parte del archivo al SDML público Entonces, si tomo esta raíz de documentos compartidos, este Hanad diseño de sitio web personalizado los archivos de Estados Unidos se adaptarán a DML públicos, pero no necesitamos hacer eso, así que no voy a comprobarlo Entonces con la configuración, Hanadt custom website design.us creará dentro de la carpeta SDML pública Cuando pase el cursor sobre el icono de inicio, se puede ver el directorio de documentos que vamos a crear esta carpeta Ahora hago clic en el botón de enviar. Bien, ahora nuestros subdominios se crearon con éxito, y si hacemos clic en esta ruta de carpeta, se abrirá el administrador de archivos y si hacemos clic en este subdominio, se abrirá la vista previa del dominio, pero actualmente tiene un mensaje y necesitamos esperar como de 20 a 30 minutos para que el DNS esté configurado correctamente Entonces, mientras tanto, vamos a crear una carpeta llamada test dot TML en nuestro subdominio recién creado Y vamos a dar clic ahí y dar clic en Editar y editarlo. Entonces aquí, agreguemos texto como este es un subdominio. Hagámoslo como Hola. Este es un subdominio. Entonces ahora hago clic en Concebir cambios, e intentemos repasarlo En realidad, cuando lo repash, nada se nota. Entonces esperemos como 20 minutos y voy a ver después de eso. Bien, esperé como 20 minutos, y ahora aquí está el look del sitio web cuando lo visitamos. Así que aquí está el archivo HTML de punto de texto que creamos. Cuando hacemos clic en cont, podemos ver nuestro mensaje Hola, este es un subdominio, texto que agregamos 6. Compra de un dominio y hosting: Hola a todos. Ahora es el momento de comprar un dominio y alojarlo porque necesitamos el dominio y el host para alojar nuestro sitio web de WordPress. Así que primero menos escoger dominio. Hay un sitio web llamado taldls.com. En este sitio web, podrás ver todas las promociones y ofertas de los proveedores de dominios, y desde aquí, podrás comprar un dominio que seleccione mejor Hostin y conseguir dominio más barato Aquí, verás un filtro. Aquí, buscaré nuestro nombre de dominio como diseño web personalizado, y aquí tengo que dar click en verificar que no eres robot. Bien, aquí tenemos los dominios disponibles, y de este filtro de precios, lo pondré como $1 y veamos qué tipo de dominio tenemos por $1. En aquí, tenemos diseño web personalizado punto S dominio 4099. Nombre Jeep. Entonces voy a elegir este en la nave espacial que podemos conseguir punto dominio XYC por dólar Entonces aquí solo hago clic en Nombre Jeep y se redirigirá al nombre foque Y aquí puedo buscar el nombre de dominio. Así que vamos a copiarlo de aquí y pegarlo. Después haga clic en buscar. No necesitamos el.com. Necesitamos puntos. Entonces aquí podemos ver punto s, en realidad, podemos agregar punto S. Bien. Ahora aquí lo tenemos por dólar 2.98. Simplemente hago clic en agregar a tarjeta y se agregó a la tarjeta. Ahora hago clic en Pagar y aquí puedo agregar el código promocional. Entonces iré aquí y averiguaremos el código promocional. Este especial 99 es el código promocional. Entonces solo lo copio y lo pego aquí, da clic en aplicar. Bien, ahora tengo que ingresar a la cuenta de Name Jeep, en realidad ya tengo una cuenta Jeep con nombre. Si no tienes una, puedes hacer clic en Crear cuenta gratuita y seguir el paso. En mi caso, daré clic en iniciar sesión, y aquí agregaré mi nombre de usuario y contraseña. Bien, acabo de iniciar sesión en la cuenta de Namechp y aquí, agregaré el código promocional, lo copiaré de aquí y lo pegaré así Da click en aplicar, y ahora tenemos el subtotal como 0.99, y voy a desmarcar todas estas cosas, así que elimínala No necesitamos ninguna de esas cosas. Así que ahora puedo hacer clic en Confirmar pedido. Antes de confirmar el pedido, iré a namjb.com, y vamos a refrescarlo. Entonces podemos seleccionar anfitrión haciendo click en este anfitrión y haciendo click en compartido Hostin Y en Name GP, podemos conseguir este paquete iSTlla y I Stellar plus para diseñar y desarrollar nuestro sitio web WordPress En el istllaPackage, tendremos función de correo electrónico y tendremos GB, SSD En el ITLlarPlus tendremos dominio ilimitado. Sin embargo, hay un límite, aunque es ilimitado, nunca es ilimitado. Creo que es solo un gimmick de marketing. Sin embargo, aquí, tenemos buzón ilimitado y tenemos esta función de autobup Esta función de autobup es muy potente, y mi recomendación es elegir esta cuenta de ItellarPlus si vas a usar el nombre servidor barato para el nombre servidor barato Por lo que actualmente hay un acuerdo del Black Friday. Por eso la cantidad es tan baja. Sin embargo, aún así, Namecheap es el proveedor de alojamiento más barato y asequible Y aquí podemos establecer la facturación como mensual o anual. Si lo establecemos como mensual, va a costar tanto. No obstante, lo configuré anualmente, y ahora podemos obtenerlo por 22.80 $0.08 y podemos renovarlo tras año por Así que ahora hago clic en Get start y aquí lo configuramos como nuevo dominio y pulsamos en ya en la tarjeta y nuestro costo total será de 23.80 $0.07 Ahora puedo hacer click en. Agregar al carrito y aquí puedo hacer clic en confirmar pedido. No obstante, ya tengo lágrimas hospedando, así que no necesito este hosting, así que simplemente hago clic en este icono de cláusula y solo necesito dominio. Además, puedes obtener dominio de esos otros proveedores. Y si vamos a este dominio XYZ en nave espacial, podemos buscar el nombre de dominio aquí y continuar con el trabajo Pero para esto, voy a elegir el nombre GIP, y ahora hago clic en Confirmar Pedido y continuar la compra también cosa muy importante antes de que compres el dominio, siempre revisa el texto del dominio Si compras dominio con texto incorrecto o caracteres incorrectos, no representará tu marca. Así que siempre vuelve a revisar el texto de tu dominio. Si buscas dominio como diseño web personalizado, verás que este dominio ya está tomado, lo que significa que podemos obtener este dominio y en lugar de obtener ese dominio, podemos obtener este tipo de dominio. Entonces cuando conseguimos un dominio, siempre tenemos que comprobar el dominio es dominio de nivel superior o para hacer eso, puedes simplemente buscar en Google como si vamos al dominio B punto XYZ, podemos buscar es dominio XYZ dominio de nivel superior. Entonces dice que XYZ es un nombre de dominio de nivel superior, y de esa manera, puedes averiguar el nombre de dominio oeste, pero los nombres de dominio más familiares son.com punto. Punto org. Si es, es punto co punto k, así. Obtener un dominio de nivel superior es realmente importante porque Google y otros motores de búsqueda clasificarán los dominios de nivel superior más fácilmente que solo clasificar algunos dominios de bajo nivel. Entonces te veo después de completar el proceso de compra del dominio. Bien. Ahora aquí tenemos el nombre de dominio, y ahora tenemos que cambiar el DNS para cambiar el DNS, voy a hacer clic en Administrar DNS colgando significa que tenemos que configurar el dominio con el servidor. Y aquí tenemos nombre jefe DNS básico. Lo voy a cambiar por nombre jefe web hosting DNS. Entonces voy a dar click en este savy y cambia. Bien. Ahora lo que tenemos que hacer es ir al panel C. Voy a hospedar en lista, y en la lista de hosting aquí está nuestro anfitrión en. Entonces aquí vamos al panel C, ¿puedo simplemente dar click en él y se redirigirá al panel C. Por lo que no importa qué tipo de dominio o proveedor de hosting elijas. Los paneles A C tienen la misma funcionalidad. Entonces me desplazaré hacia abajo y aquí tenemos sección de dominio, así que simplemente hago clic en él y ahora desde aquí, hago clic en, crear un nuevo dominio. Aquí tenemos es conjunto de dominios, basta con hacer clic en, crear un nuevo dominio, y aquí vamos a agregar el nombre de dominio, copiar el nombre de dominio y pegarlo así. Entonces en el servidor de hosting, creará nuevo fold call custom website design dot. Bien, entonces tendremos un subdominio. Así que ahora hago clic en el botón de enviar. Bien, el dominio se ha creado con éxito. Entonces, si hago clic aquí y voy a la página web, se verá así. A nombre G, tenemos certificado de presl para uno cerca. Entonces cuando hacemos clic aquí, podemos ver la conexión Cece, lo que significa que el certificado SSL está configurado correctamente y además nuestra URL es TTP Bien Entonces ahora, Earl Wood, si no obtuviste esta página, solo espera de cinco a 10 minutos y esta página aparecerá Bien. Ahora lo que tenemos que hacer es instalar WordPress en el dominio. 7. Instala WordPress en tu alojamiento: Hola a todos. Ahora tenemos que instalar WordPress en nuestra página web. Para ello, iré al panel C. En el panel C, verá Softaguls App Installer en Así que simplemente hago clic en él. Cuando haga clic en él, voy a redrectar a esta página, y aquí, voy a dar clic en Instalar en WordPress Cuando haga clic en Instalar, en elegir URL de instalación, seleccionaré como hana dot custom Web Design, US, entonces no voy a agregar ningún directorio, y seleccionaremos la última versión como nuestra versión de WordPress. Y en el ajuste lateral, podemos agregar st ename y descripción del sitio. Pero por ahora, no voy a agregar ninguno, y en la cuenta de Admin, tenemos que agregar el nombre de usuario admin y la contraseña de admin. Y aquí tenemos plug in, voy a deseleccionar cualquiera de ellos, y vamos a agregarlos más tarde. Si quieres, puedes quedártelas. Así que Admin cuenta en admin nombre de usuario, solo voy a agregar nombre de usuario. Puede ser Hannah o Admin Hanna o algo así solo voy a agregar Admin, luego en la contraseña de admin, voy a generar una contraseña y siempre recordarlas, usar un nombre y contraseña. Se requerirá que inicie sesión en el sitio web. Después en Admin email, voy a agregar admin email como este. Después de eso, simplemente hago clic en el botón Instalar. Ahora es comenzar a instalar. Ahora aquí tenemos el sitio web de Wordpress instalado. Entonces, si hago clic en este, puedo ir a Backend y solo podemos acceder a Backend usando nuestro sitio web barra diagonal Bien, instalamos con éxito Wordpress 8. Panel de control limpio de WordPress: Hola a todos. Ahora tenemos que limpiar nuestro panel de WordPress. Entonces comencemos desde arriba. A partir de aquí, tenemos estas opciones de pantalla. Simplemente hago clic en él, y aquí es donde puedo eliminar los elementos de pantalla de este dashboard. Entonces los voy a quitar todos porque no necesito ninguno de ellos por ahora. Entonces ahora voy a dar click en esta opción de pantalla para ocultarla. Y ahora aquí tenemos tablero claro. Entonces aquí vamos a Earl Post. En ERLPost tenemos este post de Hello World. Haré clic en TAASH y lo enviaré a la Papelera. Después voy a TAsh y hago clic en Eliminar de forma permanente. Ahora en categorías, no tenemos categorías, solo tenemos esta categoría predeterminada y en mediateca, veamos, no tenemos ninguna mediateca, no tenemos ninguna mediateca, luego hago clic en las páginas R en las páginas de ER, no necesitamos esta página de muestra o esta página de política de privacidad. Así que solo quítalos a ambos. Luego en la papelera, hagamos clic en Eliminar permanentemente y aquí, haga clic en Eliminar permanentemente. Después en los comandos, veamos, no tenemos ningún comando y en apariencia, da clic sobre ellos. En temas, tenemos tres temas, pero vamos a utilizar Elementor pro para diseñar este sitio web, por lo que instalaremos Hello Elementor Ellos Por ahora, vamos a desactivar Earl o tema inactivo. No necesitamos éste también. Yo futuro, instalaremos halo elemental theme. Por ahora, mantengamos esto como tema principal o ahí está el tema activo. En plugins, clicon instala plug in y aquí no necesitamos este chisme o hedoly Entonces Radio, te dije que uso nombre Jeep en nombre jeep, Light Speed cache instalado automáticamente. Por ahora, lo voy a mantener así. Pero en tu caso, si no ves caché de velocidad de la luz, no te preocupes. En futuras lecciones, aprenderemos a instalar y configurar plugin de caché de velocidad de la luz para mejorar la velocidad de nuestro sitio web y la caché en. Bien, ahora en usuarios o usuarios, solo tiene mi cuenta de usuario. Ahora tenemos sitio web limpio. Entonces, si vamos al tablero, y aquí tenemos el sitio web de World fresco, y en la siguiente lección, comencemos a diseñar. 9. Recorrido por WordPress: Hola a todos. En realidad, me olvido crear el trabajo de WordPress a través del video. Entonces hagámoslo ahora. Entonces primero, voy a cerrar sesión justo por aquí y dar clic en Cerrar sesión Y para iniciar sesión en el sitio web de WordPress, podemos agregar slash después de la URL del sitio web y en wp admin así Entonces llegaremos a esta página de inicio de sesión de Wordpress, y aquí tenemos que agregar el nombre de usuario y contraseña del sitio web de Wordpress que registramos. Después haga clic en Iniciar sesión y ahora estoy en el panel de WordPress. En el panel de WordPress, aquí tenemos este logotipo de Wordpress, y desde aquí, podemos consultar la documentación y conocer más sobre Wordpress entonces tenemos homepage R. Si solo hacemos clic aquí, se redirigirá a la página principal del sitio web. Voy a dar click y luego aquí tenemos sección de comando. Actualmente tenemos cero comandos. WordPress es lo mejor para iniciar sesión, así que por eso tenemos este tipo de sección de comandos. Entonces aquí, tenemos nuevo ícono de menú y sobre el nuevo y luego podemos crear páginas de medios publicitarios y crear usuarios. También en el lado derecho, tendremos detalles sobre nuestro perfil de administrador. Lo coloco y hago clic en este administrador. Bien, aquí tenemos datos personales perfilados. Entonces a partir de aquí, podemos cambiar el color del admin. Entonces como ejemplo, si selecciono este color, cambiará así y este cambiará así, pero me gusta el color por defecto. Y aquí podemos agregar nuestro nombre, apellido y apodo, aquí podemos agregar nuestro correo electrónico. En realidad, el correo electrónico ya se configurará. Entonces la URL del sitio web se establece como URL de nuestro sitio web actual porque somos los súper administradores de este sitio web. Entonces podemos agregar detalles sobre nosotros mismos, y también podemos agregar una foto de perfil. Para agregar la foto de perfil, tenemos que registrarnos con cuenta de Gravata Si solo haces clic aquí, voy a dar clic derecho y dar clic en Abrir nueva ventana y aquí podemos dar click en GT Data ahora y crear nuestra cuenta Gravita Por ahora, voy a mantener lo mismo y aquí podemos cambiar nuestra contraseña, clic en establecer Nueva contraseña y agregar su contraseña aquí, luego dar clic en Actualizar perfil y no lo voy a hacer. Después de hacer eso, cerrarás la sesión y podrás iniciar sesión con una nueva contraseña. Bien, ahora vamos al tablero y a casa. Vamos a hacer clic en Live. Bien. Y en la sección Actualizaciones, si solo hago clic en Actualizaciones, podremos ver los plugins, temas y actualización de la versión de Wordpress. Actualmente, nuestro sitio web está actualizado. Y cuando realices actualizaciones a tu sitio web, siempre obtienes copias de seguridad, y luego tenemos la sección de post. Entonces si hago clic en ErlFost aquí podemos click en AdnwPost y vamos Y aquí podemos agregar el título así y aquí podemos agregar detalles y podemos dar click en Publicar. Pero en el futuro, vamos a hacer esas cosas por ahora. Vamos a conocer la familiaridad de la interfaz. Simplemente voy a hacer clic en Lu y volver y aquí va a mostrar los posts que ya tenemos. Entonces tenemos categorías y y en lecciones futuras, pasaremos por las categorías y en medios, podremos ver las imágenes, videos y documentos que nuestro sitio web tiene en esta sección de medios. Entonces tenemos páginas. En las páginas A, actualmente tenemos página de política de privacidad. Si hago clic en Vista previa, se verá así y si queremos editarlo, simplemente podemos hacer clic en Editar y editar esos detalles como queramos. Pero por ahora, solo pasemos por las Cosas. Nuevamente, iré al tablero después tenemos sección de comandos y mostrará los comandos que obtenemos para nuestro post, luego tenemos la sección de apariencia. Actualmente, en la sección de apariencia, no tenemos muchos detalles porque solo configuramos el equipo predeterminado de Wordpress 2025 y en el futuro, aprenderemos más en la sección de complementos. Tendremos son los plugins que necesitamos para diseñar este sitio web. Como ejemplo, vamos a utilizar Element Pro para diseñar nuestro sitio web. Element o Pro es un plugin. Si hago clic en esto agrego Nuevo plugin y aquí puedo ver los plugins y luego si busco aquí elemento o presentador y apareció este elemento o plugin de creador de sitios web, y aquí dice, actualizado por última vez hace una semana y es capaz con la versión de nuestro sitio web de WordPress Dice design elemento.com, y podemos simplemente dar click sobre este Instalar ahora e instalar el plugin, luego activarlo, y aparecerá este enchufe instalado en A desde aquí, podemos dar click sobre este plugin de subida, y si descargamos el enchufe a nuestra página web, podemos simplemente elegir el archivo e instalarlo. Y aquí podemos dar click en ERLSer y aquí podemos ver a los usuarios de Earl que tenemos en Por lo que actualmente solo tenemos super admin y el rol es administrador. Entonces si hago clic en nuevo usuario. Aquí están los detalles que podemos ingresar. Luego, como rol, podemos seleccionar su administrador, editor, autor o colaborador. Si es editor, el rol de editor no tendrá todos estos detalles y solo podrá editar cosas como páginas, publicar, revisar comentarios y cosas así. Entonces nosotros herramientas. Esta sección de herramientas no es importante por ahora, saltemos esa. Entonces nos hemos fijado. En set in, tenemos sección como redacción general, leemos en discusión y aquí podemos escanear los detalles laterales y hay otra sección como esta. Por ahora, esos no son elementos importantes. En lecciones futuras, aprenderá más sobre estos ajustes y cómo anular esos ajustes si lo desea, puede pasar por el panel de WordPress y encontrar más sobre el tablero. Espero que tengas un entendimiento básico de la palabra prensa y en la siguiente lección, comencemos el diseño. 10. Instalación de Elementor Pro: Hola a todos. Vamos a utilizar Elementor Pro para diseñar nuestro sitio web personalizado porque Elementor es el mejor creador de sitios web de WordPress que existe. Elementor tiene una versión pre, pero tiene características limitadas Comprobemos los planes de Elementor. Para llegar a esta página, haz clic en la sección de tinta sobre recursos o descripción, y redirigirás a esta página. Entonces aquí tenemos unos planes de precios. El plan de precios recomendado es Advanced solo website builder. Con este plan de precios, podemos obtener 118 pre y pro widget y tiene 86 projts, pero con el plan esencial, solo tenemos 57 projets Como si vayamos a la sección de marketing y comercio electrónico, con plan Solo Avanzado, obtendremos pop up Builder. Esta es una característica que vamos a utilizar, y en la marca esencial, no obtenemos muchas características. No obstante, si vas a diseñar más de un sitio web, puedes ir a Plan Avanzado. O si eres freelancer que construye sitio web para tus clientes, puedes adquirir la versión experta. Al elegir este tipo de plan, podremos reemplazar muchos complementos y complementos y ayudará a aumentar la velocidad de carga de la página y optimizar el sitio web en general. Empecemos a instalar Elementor. Para ello, iré al dashboard de nuestro sitio web, y aquí iré a plugins y haré clic en Ad NE. Primero, tenemos que instalar elemento pre plugin. A partir de aquí, buscaré elemento. Entonces aquí tenemos el plugin Elementor website builder. Está desarrollada por elemento.com, y es compatible con nuestra versión de Wordpress Doy clic en Instalar ahora. Bien. Después hago clic en Activar. Todo bien. Ahora hago clic en saltar y saltaré esos pasos o haré clic en este botón Cerrar porque vamos a configurar Elementor pro usando el sitio web de Elementor De nuevo, da click en la URL de la sección de recursos y te redirigirás a esta página y desde aquí, voy a dar click en el botón Por ahora en el sitio web Advance solo , Plan Builder, y aquí tendré que rellenar los detalles. Entonces haré clic en pagar ahora y realizaré el pago. Después de que te hayas registrado correctamente, puedes descargarlo desde aquí haciendo clic en este botón Descargar, o puedes ir al panel de Elementor agregando mid elemento.com Y cuando hagas eso, verás este tipo de ícono de descarga, y luego verás elemento enchufar en Descargar, dar clic en él, luego comenzarás la descarga y ahora tienes el complemento del elemento. Así que ahora vamos a configurar con nuestro sitio web. Después de descargarlo, voy a plugins y hago clic en Ad Plugin. Y aquí puedo dar click en Subir plugin y Marcar aquí para obtener el paquete que descargamos el cFle dragon rob ese archivo C que obtenemos de la página web de Elementor Luego haga clic en Instalar ahora, luego haga clic en Enchufe activo. Bien. Ahora aquí podemos ver elemento enchufar en la sección, y si ves este tipo de mensaje, basta con hacer clic en Conectar y activar y dar clic en Conectar y activar. Bien. Ahora si vamos a licencia, es un estado activo Ahora podemos usar la función elemento pro en nuestro sitio web y podemos diseñar fácilmente este portafolio universal en nuestro sitio web de Elementor 11. Tutorial del editor Elementor: Hola a todos. Conozcamos el editor de elementos. Así que vamos a crear una página. Ahora estoy en nuestro panel de control del sitio web de WordPress, y desde aquí, pasaré el cursor sobre las páginas y haré clic en Agregar nueva página Y aquí voy a añadir título como página de sabor. Entonces aquí tenemos un pop up de plantillas. Lo cerraré, y aquí agregaré página de sabor. Entonces lo que voy a hacer es click en esta edición con botón de elemento. Cuando haga clic en él, redirigiré al editor de elementos. Voy a omitir esto por ahora, y aquí está nuestro editor de elementos, y primero, haré clic en el conjunto de páginas en, y desde el conjunto de páginas en, voy a cambiar el diseño de página a elemento canvas. Así, cuando hagamos eso, nos dará una página en blanco que podremos usar para diseñar nuestro sitio web personalizado. En nuestro lado izquierdo, podemos ver los widgets que podemos usar con elemento pro. Si tienes un elemento de pre versión, no podrás acceder a todos esos widgets. Simplemente puedes arrastrar y soltar cualquiera de esos elementos en el lienzo. El lienzo es esta área en blanco. Por ahora, voy a cerrar esta pestaña de estructura y si comprobamos en esta barra superior, podemos ver en el lado izquierdo, tenemos lado establecido en icono, así que vamos a dar clic en yo clic en él, iremos a la configuración lateral. En esta configuración lateral, podemos cambiar o configurar las opciones de nuestro sitio web principal como ejemplo, si hago clic en el diseño y actualmente el ancho del contenido del tamaño del escritorio es 1140 Si cambiamos esto a 101,060, afectará a todo el sitio web, pero lo mantendré Y si queremos agregar relleno a la parte superior del sitio web, solo podemos desvincular este valor haciendo clic en este ícono de cadena, y aquí podemos configurarlo como 60 y luego vamos a hacer clic en guardar y ahora hago clic en volver a Editor y luego solo arrastremos y soltamos un titular como este y el titular caerá como aquí porque tenemos 60 de relleno superior Entonces, si volvemos a sentarnos y vamos a layouts y hacemos esto como cero, el encabezado será cero. Ahora voy a hacer clic en Guardar cambios y volver al editor. Después haciendo click aquí, podemos ver la estructura del sitio web. Actualmente, solo tenemos un titular. Entonces aquí podemos agregar nodos, basta con hacer clic en nodos y luego si quieres agregar el nodo o pensaste en una sección, simplemente puedes seleccionar la sección. En este caso, seleccionaré este titular y aquí puedo escribir node lie. Esto es para pruebas. Entonces puedo dar click en dejar un nodo y ese nodo aparecerá aquí. Piensa si trabajas con el equipo y tienes pocos diseñadores que trabajen en las páginas. Al agregar este tipo de nodos y cuando tus co-diseñadores iniciarán sesión en el sitio web y comprobarán la página y podrán leer esos nodos y entender muy bien el diseño. Vamos a cerrar esta. Ahora aquí tenemos el nombre de la página. El nombre de la página es página de prueba y actualmente está en borrador. Si hacemos clic en este botón publicado, estará disponible en la página web, pero actualmente es modo borrador. Entonces tenemos este icono, este icono G para acceder a esta configuración de página. Si haces clic aquí y cambias los detalles, esto afectará a todo el sitio. Pero si haces clic aquí y cambias esos detalles, solo afectará la configuración de la página como lo hice antes al cambiar el diseño de la página. Entonces tenemos tres puntos de vista. El primero es de escritorio, segundo es tableta y el tercero es móvil. A modo de ejemplo, si queremos cambiar este tamaño de texto en el móvil, simplemente podemos hacer clic en el texto e ir a Etyle luego cambiar el tamaño de fuente En realidad, tengo que hacer clic en este texto así e ir a Etyle y ahora puedo cambiar su tamaño así Cuando hagamos eso, sólo afectará en el móvil. Si vamos a la versión de escritorio, el texto será el mismo y es el mismo en la versión tablet. Versión móvil, cambia al tamaño que ya configuramos. Ahora vuelvo a la versión de escritorio. Ahora la parte más importante es esta sección rara. Como dije antes, podemos usar estas características pro en el elemento pro y en la versión pre, cosas van a ser bajas vamos eliminar este texto y vamos a crear la sección. El primero eres tú, tenemos que añadir el contenedor. Esa es la forma correcta de crear el sitio web. Voy a dar click en el contenedor y se agregará así de este contenedor, podemos ajustar en detalle. Por ahora, mantengámoslo como predeterminado y luego agregaré otros elementos para hacer eso, haré clic aquí y luego agreguemos el titular y también haga clic en este ícono más y agreguemos editor de texto así. Ahora hago clic en el contenedor y actualmente su dirección es vertical. Tiene una columna, pero si hacemos clic en horizontal , cambiará a la horizontal. Hay muchas opciones que podemos usar para diseñar un sitio web perfecto. Y veamos si queremos cambiar este texto. Podemos dar click en este ícono de lápiz o dar click aquí y dar click en Editar, y luego podemos cambiar el texto desde aquí. Lo voy a cambiar como amarillo Palabra. Y luego hago clic en estilo y voy a cambiar este color de texto a por ahora, cambiémoslo a negro, y cambiaré este tipo por pines de Grappy Pines es mi fuente favorita, y cambiemos su tamaño a 60. Hagámoslo como 60. Entonces lo voy a cambiar a medio. Tal vez lo normal se vea mejor así, y podemos cambiar la altura de la línea así y establecer la alineación para colocar. Bien. Ahora por ahora, eliminemos este editor de texto. Simplemente hago clic aquí, y luego solo puedo presionar el botón Eliminar o simplemente puedo hacer clic derecho y hacer clic en Eliminar, así. Ahora de nuevo, hago clic en el contenedor y agreguemos este Mint alturas 600 y la altura del contenedor se convierten en 600. Después hago clic en este texto y hagamos un centro de línea así que haga clic aquí y hagamos que esto justifique el contenido como centro. Y hagamos esto como medio para hacer eso. Doy click en este centro así. Y ahora aquí tenemos dos líneas. Así que vamos a arreglarlo. Para arreglarlo, iré al Avance, y de antemano, hemos dicho este ancho como ancho personalizado, así podemos dar click en default y hará el ancho completo. Así que hay muchas cosas que hacer, y en futuras lecciones, usaremos todas esas cosas y podrás crear un letrero increíble. Bien. Ahora aquí nuestro sencillo hola mundo toma y ahora si hago clic en este icono de panel de altura, podemos ver la vista real y además podemos dar click aquí para recuperarlo. Y si hago clic en este icono de flecha y hago clic en ver páginas, no se actualizaba. Vamos a hacer clic en publicar e intentemos volver a verla. Bien, yo veo esto. Si queremos otra sección, simplemente podemos dar click aquí y dar click en el contenedor para aquí así o podemos dar click en este icono más y dar clic en Plex Box y seleccionar la estructura. Si quiero agregar cuadrícula de dos columnas, solo podemos dar click aquí y ahora tenemos columna. Entonces podemos hacerlo de forma manual. A modo de ejemplo, vamos a conseguir este contenedor, y hago clic aquí. Entonces vamos a Estyle y déjame agregar el tipo de fondo Así que haz clic en este clásico y cambiemos el color a este color azul y hagamos clic en Layout. Desde Layout, estableceré alturas Mint hagámoslo como 300. Bien. Y esta estructura es un poco de dolor de cabeza, así que para arreglarla, solo la voy a poner así y solo la arrastro al sitio izquierdo y se convertirá en una sección para que podamos verificar fácilmente la estructura de nuestro sitio web. Y a partir de aquí, necesitamos agregar este tipo de dos columnas para hacer eso. Haré clic en este ícono más y solo agregaré un contenedor como este. Ahora tenemos el contenedor dentro del contenedor así que hacemos clic derecho y pulsamos en Dublgate entonces lo que puedo hacer es que puedo hacer clic en el contenedor principal y cambiarlo de dirección a u horizontal y simplemente se convierten en dos Y aquí tenemos una brecha para arreglar esta brecha, voy a cambiar esta brecha a cero, y ahora no tenemos brecha. Por lo que ahora hago clic aquí para seleccionar este contenedor. Ve a tyle, haz clic en Clásico y cambia el color. Vamos a cambiarlo al color de la pantalla y cambiemos este totyle clics Cambiemos a este color de texto. Elemental Editor es un editor realmente simple de usar. Así que simplemente hago clic en publicar o simplemente podemos hacer clic en este icono de vista previa para previsualizar los cambios. Podemos hacer clic en este icono o icono de vista previa y comprobar los cambios de Elger en las lecciones reales y futuras, profundizaremos en el editor elemental y aprenderemos mucho más 12. Configura los colores globales en Elementor: Hola a todos. Ahora lo que tenemos que hacer es instalar el tema para hacerlo sobre la apariencia y hacer clic en el tema. Y aquí, da click en ellos y busca aquí Hola elemento. Aquí está el tema Hello Elementor, da clic en él, y al hacer clic en cont, puede ver hola elementor Ahora haga clic en Instalar. Da clic en activar Bien, ahora está activado, luego hago clic en este tema 2025 y hago clic en Eliminar porque no necesitamos este tema y agradable. Ahora tenemos que configurar la configuración lateral. Para ello, primero voy a ir a las páginas y dar click en las páginas. Y aquí tenemos página por defecto, así que voy a hacer clic en Papelera porque no necesitamos este elemento o diez página, luego voy a Papelera y eliminaré haciendo clic en eliminar de forma permanente pero luego hago clic en en la página y ahora voy a crear la página principal. Aquí voy a añadir el título como home, después hago clic en Editar con elemento. Cuando haga clic en editar con Elementor, se abrirá el lienzo de Elementor y desde aquí, podemos diseñar el sitio web y en configuración de página, podemos cambiar el conjunto de páginas en el título agregar ejercer en futuras lecciones, te mostraré cómo agregar extractos y cómo clasificar nuestra página principal en el buscador Entonces, por ahora, vamos a configurar la configuración del sitio para hacer eso, voy a hacer clic en el icono de configuración del sitio, y aquí podemos agregar colores globales y fuente global. Entonces, si vamos a nuestro sitio web de dfolio universal, tenemos una hoja de Itca En esta hoja Ita, tenemos los colores. Como ejemplo, este es el color primario, y este es el color del texto, y este color blanco son los colores secundarios. Entonces agreguemos esos detalles. Para agregar esos detalles, iré al sitio web y primero haga clic en este color global tenemos los colores del sistema. Cambiemos esos colores del sistema. Primero, tenemos primaria. Vamos a obtener el color primario. Para ello, hago clic en este primer color y doy clic aquí, luego hago clic en este icono de estilo Editar T y copio esta propiedad de color y da clic aquí luego la pego así. El nombre será color primario y luego tenemos este color de texto. Da click aquí, da click en este EdittStyle y copia el color luego en el texto, pega el código de color y color del texto cambia este título a color de texto, y luego tenemos este color blanco Podemos hacerle lo mismo a éste. Este será color secundario y pegará el color así. En realidad, tenemos que agregar hashtag frente al color. Bien. Entonces tenemos este color de acento, pero en este caso, tenemos este ho Su color. Para copiar el código de color Her, tenemos que crear vamos a crear un rectángulo como este y luego dar clic aquí, luego seleccionar el color OA, y ahora podemos dar click en la variable de separación La razón es que actualmente usamos este color cho solo en este cubo de color. Entonces, si solo lo despegamos, la variable será eliminada Así que ahora puedo copiar el código de color desde aquí y venir aquí y colocar el código de color así. Entonces aquí, hagamos este color de poder. Bien. Ahora tenemos los códigos de color de Earl Ahora hago clic en Guardar cambios. Entonces voy a quitar esta. Después volveré, pulsaré en guardar, y ahora podemos dar click aquí para agregar la fuente. Ahora aquí tenemos la misma estructura. En realidad, podemos dar click aquí para llegar a esta sección. Bien, ahora tenemos que agregar texto. En realidad, vamos a eliminar este , y en instigaset, voy a añadir todos esos textos, lo que significa que tenemos que editar el Entonces después de editar el Itigaset, te encontraré en la 13. Configurar la configuración del sitio y las fuentes globales en Elementor: Hola a todos. Ahora intentemos agregar esa tipografía Primero, tenemos encabezado, así que solo voy a sentarme configurando y en primaria, voy a cambiar este texto a encabezado. Entonces solo haz doble clic aquí y cópialo así. Después da click aquí y veamos la tipografía, así que aquí tenemos a Nunito Entonces podemos comprobarlo así que busquemos Nunito talla es 50 con esta bola, y ¿cuál es la altura de la línea La altura de línea es Otto vamos a hacer la altura de línea como 50. Sí, la altura de la línea será de 44. Hagamos la altura de línea ya que la altura de la línea será de 50. Bien. Ahora a continuación tenemos esta fuente de subcabecera es nunito semibolt 26. Hagámoslo así. El segundo w será unidad o 26 semibold seis, seremos semi boold y Einheit será Creo que fueron 30. A ver. Son 33, hagámoslo como 30. Bien. Entonces voy a cambiar este texto a subencabezado, copiar y pegar así Entonces tenemos texto. Texto significa párrafo, copia el texto del párrafo. Es así, entonces tenemos que añadir la fuente. La fuente es abierta sans regular 18 30 centavos abiertos 18 media regular normal, y la línea es 30. Si hay algunos temas, ¿ podemos simplemente eliminarlos viniendo aquí y tenemos acento? Sí, ahora tenemos botones, copia el texto del botón y prefacialo con colores de acento y da click aquí, luego está abierto semi wold 22, tamaño semivolto abierto es 22 y la altura de línea Creo que son 30? No, son 25, linight es Ahora tenemos que agregar los bonos personalizados porque tenemos que agregar la fuente manline Enlace de menú y pegarlo así, luego haga clic aquí y solo agregue abre semivolteighteen, abra semivolteighteen Y qué pasa con Line night es 21. Bien, ahora tenemos fuentes Earl, así que ahora hago clic en Guardar cambios Bien, entonces hago clic aquí para volver atrás y en la mistie podemos ignorarlo porque vamos a usar propiedades de elemento o editor Así que solo ignora los estilos de este tema. Entonces nos hemos puesto en sección, y como primera parte, tenemos identidad de sitio, vamos allá, y aquí tenemos que agregar sit ename y descripción del sitio. Agreguemos el nombre de nuestro sitio. El nombre del sitio es Hannah Clark, así que simplemente copiaré ese texto de aquí y lo pegaré así. Entonces como la descripción del sitio, lo haré vacío. En realidad, esos artículos podemos cambiar cuando hacemos el en la página CO. Aquí tenemos que agregar el icono sit FV, y en nuestra hoja de tigre, solo creo favicon que incluyen primeras letras del nombre de esta Hannah Clark Así que simplemente voy a hacer clic en Exportar y hacerlo JPG y dar clic en Exportar. Haga clic en el FVCon establece el JPEG, haga clic en Exportar Y ahora tenemos que ir al minúsculo PNG. Ahora estamos en tiny png.com, así que tiny PNG es la herramienta de compresión de archivos que ayudará a reducir el tamaño del archivo Entonces aquí tenemos 37 kilobytes, y ahora tenemos 8 kilobytes, clic en el botón JPG para descargarlo y luego vamos aquí y damos clic en Sit favicon y vamos a Entonces justo en ALT, un icono de FV de gas. Ahora vuelve ahora aquí tenemos bases de sujetador. Al configurar ahora, la parte importante es layout, click en layouts on layout, el width content es 1.140 y es el ancho de contenido predeterminado, aunque nuestro diseño Figma tenga un ancho como 1.440, pero en default elemental con este Entonces en contenedor pad adentro, los haré como cero, y los huecos serán de 20 por 20. Entonces aquí adentro, si hacemos clic en esta imagen y presionamos Alt y verificamos la entrada entre lados, son 20, entonces este es el hueco de columna, y vamos a revisar el hueco de fila. El hueco de fila es el hueco de fila es diez, así que hagamos aap es un hueco es diez. Bien. Ahora el diseño de página predeterminado será elemento o ancho completo, no elemento tema o ancho completo. Y el punto de ruptura serán los predeterminados, y ahora haga clic en guardar cambios Bien, vuelve y podemos ignorar otras cosas por ahora. Bien, ahora vuelvo y así es como se ve nuestro sitio web. En realidad, tengo que rebss esta página para comprobar la nueva versión Bien. En la siguiente lección, vamos a diseñar el encabezado. Por ahora, voy a dar click en publicar y publicar la página principal. Entonces iré al panel de WordPress en WP Admin después de su sitio web, RL, luego podemos ir a configurar y al leer, cambiar las pantallas de su página de inicio a una página estática y seleccionar la página principal como luego hacer clic en Guardar cambios. Ahora si visitamos el sitio web, el sitio web se verá así y en la siguiente lección, comencemos a diseñar nuestro sitio web. 14. Diseñar el menú de encabezado: parte 1: Hola a todos. Ahora es el momento de diseñar el sitio web. Voy al sitio web de portafolio Universal, Fake Mobile, y esta es la versión que vamos a diseñar. Entonces aquí no necesitamos este diseño de cuadrícula, así que simplemente voy a hacer clic aquí para ocultarlo. Y ahora aquí tenemos un diseño claro. Entonces como primer paso, tenemos que crear esta sección, esta cabecera. Hagamos eso para hacer voy a nuestro sitio web y vamos a ir al tablero. En el tablero, en realidad no necesitamos este elemento o vista general, así que haz clic en las opciones de pantalla y elimina esto. Bien. Ahora en plantilla, hago clic en Team Builder. En ellos Constructor, tenemos secciones separadas. Así que aquí tenemos encabezado, pie de página, single forced, single page, y cosas así. Entonces, como primer paso, tenemos que crear el encabezado. Por lo que solo hago clic en este ciclo plus. Todo bien. Ahora abre el elemento o editor, y aquí tenemos biblioteca así que en esta biblioteca, podemos encontrar un encabezado de diseños listos, pero no voy a usar ninguno de estos, así que simplemente hago clic en este icono de cerrar, y aquí tenemos el elemento o editor. Así que aquí hago clic en este icono más, y vamos a usar Flexbox, así que simplemente hago clic en Flexbox y el tipo Plex Box será columna directa Bien. Agrega así y doy click en él y en Avance, voy a quitar márgenes y acolchados. Entonces como primer paso, tenemos que agregar este logo para agregarlo, selecciono en él, luego haga clic en Exportar, y aquí lo haré JBG porque el display o el contenido es blanco y no necesitamos fondo transparente Después hago clic en puerto. Y vamos al minúsculo PNG y solo ponlo aquí. Después se optimizó, después hago clic en este botón para descargarlo y vamos aquí. Y como primer paso, tenemos que añadir el logo. Entonces aquí solo podemos agregar logo lateral como este y aquí podemos agregar el logo. Así que simplemente haz clic en cambiar logo de lado, y aquí, haz clic en logo lateral, y luego tenemos que subir la edad de descarga. Y vamos a copiar el título y pegarlo así Hanas. Hagámoslo logo. Siempre, tenemos que añadir la etiqueta ALT. La etiqueta ALT es muy importante en SEO, y si este logotipo no se está cargando o si nos falta, aparecerá la etiqueta ALT u ol. Así que siempre agregue texto significativo etiqueta antigua. Bien, hago clic en Guardar cambios y ahora hago clic en volver a Editor, y nuestro logo acaba de agregar así, pero necesitamos esto del lado izquierdo para hacerlo del lado izquierdo, hago clic en el contenedor y en el layout, voy a agregar esta dirección como horizontal crudo, y solo el contenido y será inicio. Bien, llegó al lado izquierdo. Y ahora averiguaremos los lados intermedios. Entonces aquí tenemos 20 como la cima. Entonces, para obtener estos detalles, solo puede seleccionar el elemento en archivo Figma que desea verificar y presionar ALTO all tag de su teclado y podrá ver el tamaño intermedio Y si queremos ver el tamaño intermedio de estos dos, simplemente da clic así y encuéntralo. Entonces yo diseño de sitio web personalizado, clase completa, puedes encontrar esa información. Entonces agreguemos 20 como top vaya aquí y en contenedor, vaya a avanzar, luego margin top será 20 así. Bien. Entonces lo que tenemos que hacer es agregar el menú. Para agregar el menú, solo podemos hacer clic en Elemento de anuncio y buscar Menú y aquí obtenemos el menú de WordPress solo cópielo y arrástralo aquí. Entonces solo arrástralo aquí y se agregará al contenedor, y tenemos que crear un menú antes de seguir adelante para hacer eso, solo puedo dar click sobre esto. Ir a la pantalla de menú para crear uno, y aquí, podemos crear un menú. Entonces para el nombre del menú, agregaré menú principal y haré clic en Crear Menú. No selecciones ninguna de esas cosas, crea un menú sencillo. Bien. Ahora desde aquí, podemos agregar páginas post o podemos agregar enlaces personalizados. Entonces aquí por aquí, seleccionaré la página principal. En las páginas, tenemos homepage. Yo solo lo agrego, y luego tenemos otro menú como A services y testimonial, vamos a conectarnos Entonces esta es una landing page. En la página de aterrizaje, cuando haga clic en esta A, esta redireccionará a la sección A. Entonces para agregar esto, tenemos que usar este enlace personalizado. En Enlace personalizado, agregaré los enlaces tomar escaleras sobre y como la URL, por ahora, agreguemos Hashtag después de completar todas las secciones y luego podremos configurar el menú, lo que significa que cuando haga clic en sobre él se relacionará con la sección A así. Bien. Ahora da click en agregar a Menú entonces tenemos servicio copiar el texto y aquí, colocar el texto en URL hash tag, click en AddTo Menu, luego aquí el testimonial, cópialo y ven aquí, cópialo y ven aquí, coloca el texto del enlace y Bien. Entonces en vamos a conectarnos, este debería ser botón, así que tenemos que crearlo por separado. Por ahora, voy a añadir esas cosas y dar clic en Guardar Menú. Entonces volvamos aquí y ahora tenemos que publicar esto al detalle. En realidad, antes de publicarlo, hagámoslo como borrador guardado así y publiquémoslo después de crear la sección completa del menú o la sección de encabezado completo. Después hago clic en el icono de recarga para recargar esta página. Bien. Después de que lo vuelva a cargar, solo agregó Entonces ahora hago clic en el menú de WordPress y se selecciona el menú porque solo tenemos un menú, y vamos a ajustar esos detalles. Primero, la maquetación será horizontal y la lectura de posiciones será Ir y no necesitamos ningún puntero, que no sea ninguno, y no tenemos un submenú, y en el menú desplegable móvil, podemos agregar más detalles, pero hagámoslo en la sección de diseño responsive Y ahora tenemos que ir a estilos E. En estilos E, podemos establecer la tipografía. La tipografía debe ser enlaces de menú. ¿Recordaste que creamos tipografía de enlaces de menú en fuentes globales Lo hicimos en la sección de configuración lateral, y al pasar el mouse, hagamos el color del texto como este color primario así O tal vez agreguemos, agreguemos Su color como este color naranja. Y cuando aparezca en naranja en activo, tenemos que establecer el color primario. El color primario será este color verde. Bien. Ahora no necesitamos ningún divisor como este, retírelo, y ahora tenemos que agregar el relleno horizontal para agregarlo Podemos simplemente hacer clic en un menuem así, presionar y pasar el cursor sobre el siguiente elemento del El tamaño intermedio es 36. Hagámoslo el relleno horizontal como 36. Bien. A continuación podemos agregar relleno vertical. Veamos el relleno vertical desde aquí, aquí, veamos el relleno vertical. Es 14. Hagamos esto como 14. Bien. En realidad el patrón horizontal debe ser cero y el espacio bittween será 36, así 36? Sí, son 36. El espacio entre debe ser el 36 y el patrón horizontal debe ser cero, así. Bien. No tenemos un menú desplegable y no tenemos un botón total en la versión de escritorio. En versión móvil, nosotros lo hice. Bien. Ahora tenemos que fijar la alineación. Así que vamos a arreglarlo, haga clic en este contenedor y agreguemos align item como centro así. Bien, entonces lo que tenemos que agregar un botón para agregar este botón vamos a conectar, puedo hacer click en los botones de elemento y búsqueda. Y aquí tenemos un botón, solo arrastra y suelta así. Entonces cae hasta aquí, solo voy a dar click aquí y ponerlo así. Bien, ahora podemos personalizar este botón de acuerdo con el diseño Figma 15. Diseñar el menú de encabezado: parte 2: Bien, ahora tenemos que diseñar este botón. Para ello, selecciona el botón, y vayamos a nuestro diseño Figma y verifiquemos los detalles Entonces el color del botón es el color del campo. ¿Y qué pasa con el texto de botón? El texto del botón es, creo que es menin text. Sí, es texto manualink. Entonces vayamos ahí y primero, cambiemos el texto. El texto será vamos a conectar. Yo sólo lo copio y lo pego así. Entonces por ahora, agreguemos Link como hashtag. Después ve al estilo E en estilo E, la posición del botón será encaje y la tipografía es Entonces no necesitamos sombra de texto, y en color de texto normal es este color primario. No, el color del texto es color secundario porque el color del texto es blanco. Sí, el color del texto es blanco. Por lo que ahora, el tipo de fondo será clásico y el color será este color primario. Y en hover, el color del texto seguirá siendo color secundario, y el color de fondo será este color así Bien, por ahora, no agreguemos ninguna animación. O si queremos, solo podemos agregar como crecer. Entonces, cuando pase el cursor sobre, crecerá así Bien, ahora, ahora tenemos que agregar radio de borde. Entonces veamos el radio fronterizo. Son 30. El radio de esquina es 30. Aquí tenemos radio fronterizo. Hagámoslo 30 así. Después tenemos que añadir el relleno. Hagámoslo cero por ahora, y veamos el relleno, limo el texto, presionemos todo y así, son 30 e izquierda y derecha son 30 y arriba e abajo son 18 Vamos a llegar al top 18. En realidad, tenemos que desvincular el icono de valor. Tenemos que presionar el icono de desvincular valor. Después derecha a 30, abajo es 18, apuesta izquierda ***. Bien. Ahora bien, si vamos al diseño, el conjunto de menús está en lado derecho y este logotipo está en el lado izquierdo. Entonces para hacer eso, tenemos que ir a contenedor, y solo podemos hacerlo ligero. Simplemente podemos hacerlo como espacio entre ellos. Y cuando hacemos eso, el menú está en medio y este botón está en la izquierda. Pero si vamos al diseño original, el tamaño intermedio debería ser 36 de este botón y el menú. Entonces para arreglarlo, tenemos que agregar elemento, y aquí tenemos que agregar contenedor, solo trapo y contenedor de roper así Yo no agregué. Hagámoslo así. Bien. Después avanzar, quitar el margen y los acolchados en maquetación Desvinculemos el valor juntos en las brechas, y la brecha de columna será de 36 Bien. Ahora voy a poner este menú de wordpress dentro de este contenedor así. Vamos a agregarlo así. No, no, yo no agregué, agregué así, y luego hagamos lo mismo con el botón, y debería ser así. Bien. Ahora si hacemos clic en el contenedor, podemos cambiar la dirección a crudo horizontal. Y el contenido justificado será N, y agregamos la columna Gap pass 36. Si lo hacemos cero, será así, deberían ser 36, deberían ser 36, y ahora si lo comprobamos, podemos ver claramente el espacio entre el diseño y solo logramos lo que queremos lograr. Entonces, si vamos aquí, se verá así y vamos a dar click sobre los cambios de vista previa y se abrirá en nueva ventana. Por lo que el sitio web también se verá como el diseño. En este contenedor, haz una línea de pedido como centro así. Bien, ahora nuestra parte de cabecera está terminada. Esta parte, así que ahora lo que puedo hacer es dar clic en Publicar. Cuando hago clic en publicar, tenemos una llamada Power. ¿Dónde quieres mostrar tu plantilla? Doy clic en esta condición de anuncio, y hago que incluya todo el sitio. Quiero ver este menú todo el lado. Entonces ahora podemos agregar más condiciones, pero lo que queremos hacer es mostrarlo en todo el sitio. Después hago clic en Guardar y Cerrar y el menú publicar. Lo podemos ver desde aquí. Bien, ahora voy a ir al panel de WordPress y si vamos al constructor de plantillas y temas aquí podemos ver nuestro pero el nombre es solo elemento o encabezado, Hashtag 226, tenemos que cambiarlo para cambiarlo. Podemos dar click en Editar. Entonces aquí voy a dar click sobre este conjunto de encabezado en, y en el título, voy a cambiar este título a encabezado, encabezado y dar clic en publicar. Entonces si volvemos y lo revisamos, se verá así. Bien. 16. Diseño de la sección principal: parte 1: Hola a todos. Simplemente diseñamos con éxito el encabezado. Entonces ahora tenemos que continuar con el diseño. Ahora tengo que ir a la página principal a la página principal, solo voy a ir a nuestro front end de la página web, y ahora se verá así. Ahora lo que puedo hacer es dar clic en Editar con Elementor. Bien. Ahora en la configuración de la página, tenemos que hacer algunos cambios. Primero, tenemos que cambiar el diseño de la página a elemento de lleno con. Entonces podemos dar click en este título de altura en elemento o completo con diseño de página, el título no se mostrará, pero vamos a hacer clic en este título de altura para ocultar este título Entonces si hago clic en publicar y vamos a refrescar sigue ahí. Creo que esto está en el pie de página para arreglarlo, solo vamos a crear un pie de página vacío, así iré al panel de Wordpress y en Team Builder, haga clic en el icono más de este Footer. Entonces voy a cerrar esto y por ahora, voy a dar click en esta configuración de pie y simplemente cambiar el título a Pie de página, y no voy a agregar nada. Simplemente haga clic en publicar y haga clic en Ad Cdition y estará en todo el sitio Así que ahora hago clic en Guardar y Cerrar. Bien, está salvado. Así que aquí podemos ver el Live sit. Veamos el directo así que ahora ya no veremos el texto del pie de página. Entonces si lo reprimimos aquí, podemos ver que le va a gustar esto Bien. Ahora es el momento de diseñar esta sección de héroes. Para ello, primero tenemos que crear un contenedor. El tamaño del contenedor estará aquí, tenemos 90 y aquí tenemos 500. Debería ser 590, así que vamos aquí, haga clic en Caja PlusConplax, haga clic en columna de dirección luego aquí como la altura media, hagamos que Bien. Ahora cambiar de dirección a fila y justificar el contenido será stat línea de artículo será centro. Bien. Primero, agreguemos esos textos para hacer eso, voy a hacer clic en esto, agregar elemento y dar clic en titular y arrastrar el titular así. Después en el titular, la etiqueta HTML se cambiará a H uno porque este es el titular principal del sitio web. Entonces copiemos este texto así. Entonces solo pasea el texto así. Entonces en su dado, la tipografía será encabezado Aquí, la tipografía es encabezado, y en el contenido, solo esta parte de Hannah Clark debería ser el color primario, el color verde Entonces hagamos el color del texto como negro y aquí, voy a agregar Open tax is SP, A N, span, closed tag, y luego otra vez, open tag slash span Acabo de crear una etiqueta DML. En realidad, tenemos que agregar un ID, así que buscaré set ID igual, y vamos a agregar ID head title da title. Hagámoslo como héroe, título de héroe, solo cópielo. Esto es simple ML y CHS pero avanza en Advance CSS personalizado, solo agrega hashtag y headale así Todo bien. Ahora solo afectó el diseño. Ahora de nuevo, hago clic en agregar elemento y dar clic en agregar titular. Cuando agrego otro titular , también agregó de manera horizontal. Para arreglar esto, haré clic aquí y agregaré el contenedor, y eliminemos todas las cosas de este contenedor. Después voy a arrastrar este título dentro del contenedor arrastrará el siguiente título dentro del contenedor. Luego en el diseño del contenedor, hagamos justificar el centro de contenido y la dirección será columna vertical. La alineación se alineará ítem será inicio y la brecha, veamos la brecha, la brecha es 15, que pro es 15. Bien, ahora tenemos que cambiar este texto a este texto, copiar el texto y cambiar el ritmo del texto, y cambiemos esta etiqueta HTM a H tres. Después una tesela, se dejará la alineación y tipografía es subcabecera y el color es este color de texto Puedes ver esos detalles aquí. Bien, ahora solo voy a duplicar este texto porque no necesito hacerlo o no necesito agregarlo de nuevo. Yo puedo justamente, entonces voy a copiar este texto. Este texto será tipográfico como párrafo y el color del texto será nuestro color de texto Pasa así, luego en estilo, cambiemos esto a párrafo. Ahora este texto es crecer a la izquierda. Solo podemos arreglarlo agregando VR. Entonces si voy al contenido, hagamos este STM Lt como P o párrafo y aquí podemos establecer como hagámoslo así Agreguemos BR así, luego BR así. Bien, hasta ahora tan bien. Sí, entonces tenemos que agregar un botón para agregar el botón. Simplemente voy a hacer clic en agregar elemento y botón de búsqueda y simplemente poner el botón aquí. Entonces tenemos que copiar el texto del botón. Simplemente trabaja conmigo en el texto, y por ahora, hagamos hashtag como enlace en el estilo E. Hagamos posición como entonces la tipografía es botón. Entonces veamos el tipograp un botón, y presionemos el archivo Figma y veamos que su tamaño es de 22 Entonces, hagamos clic en el valor del enlace juntos para desvincularlo y arriba es 22, derecha este 33, arriba es 22, izquierda es 33 Bien. Entonces un radio de esquina será de 60, debemos sumar 60. Entonces el color del texto será color secundario y el color de fondo será este color y sobre el color debería cambiar a gustar esto y la animación crecerá así. Hasta el momento tan bueno. Si verificamos el diseño, podemos ver un espaciado enorme que sucedió debido a la altura de línea de esas tomas. Para solucionarlo, solo podemos hacer clic aquí y ver cómo funciona cuando cambiamos la altura de la línea. Por lo que cambiar esta altura de línea no será una opción. Aquí, podemos cambiar esta línea de altura de línea. Sí. Entonces la nueva altura de línea es 20 en la subcabecera, y aquí podemos cambiar esta altura de línea de tipografía a la línea 35 Bien. Hagamos esos cambios. Por ahora, hagámoslo encabezado, y vayamos a la configuración lateral. En la configuración de tamaño, vaya a teléfonos globales y en encabezado, la altura de línea es 35 y subencabezado, la altura de línea es 26 y haga clic en Concebir cambios y haga clic aquí para volver al editor Ahora bien, si queremos, también podemos cambiar la altura de línea de este párrafo dos para hacer eso, podemos simplemente así. Si quieres, puedes hacerlo. Yo sólo lo haré como 28. Así que vamos a sentarnos a la configuración y los teléfonos globales y altura de la línea de párrafo será 28 y haga clic en Guardar cambios. Da clic en volver a Editor para ir a Bien. Ahora podemos ver aquí es yo espaciado para arreglar esto es espaciado. Podemos agregar margen negativo. Haga clic en el párrafo o en el título, luego haga clic en Avanzar y haga clic en Vincular valor juntos. Luego en la parte superior en valor menos como este. Podemos hacer lo mismo al fondo así. Ahora solo diseñamos esta sección y luego lo que tenemos que hacer es agregar esta imagen. Vamos a agregarlo en la siguiente lección. 17. Diseño de la sección principal: parte 2: Hola a todos. Ahora tenemos que agregar esta imagen de héroe. Empecemos. En primer lugar, tenemos que descargar la imagen. Voy a dar click en la imagen y aquí veremos Exportar, y voy a cambiar la imagen a JPEG y dar clic en Exportar. Bien, entonces ve a minúsculo PNG y agrega imagen al minúsculo PNG. Después da click en este J BG para descargar la versión optimizada. Y ahora aquí tenemos esta imagen. Entonces ahora voy a Elementor y busco aquí imagen. Entonces veremos este elemento de imagen, y solo lo voy a poner así. Entonces aquí está nuestro contenedor de texto, y agrego esta imagen fuera de este contenedor de texto en el contenedor principal. Bien. Ahora doy clic aquí para editar y aquí podemos elegir la imagen y hago clic aquí, luego solo subo la imagen optimizada, y para esta imagen etiquetas ALT, voy a agregar este texto, y como título, agregaré este texto, después hago clic en Silt para agregarlo Bien. Ahora, aquí voy a establecer la resolución de la imagen como completa. Bien, ahora nuestras imágenes se ven así, pero es bonita es pequeña, así que hazla más grande. Podemos seleccionar en este contenedor y ajustarlo con. Hagámoslo con esto. Veamos la peluca desde aquí. Con este 559, solo podemos sumar 559 aquí con fixel y 559 así o podemos agregarlo en porcentaje En realidad, vamos a agregarlo en porcentaje. Hagamos esto ya que el 50, 50% será perfecto. Ahora si revisamos el contenedor, hueco de la columna es de 20. Entonces aquí solo voy a hacer clic en el espacio mordido para alinear esta imagen al lado derecho y este texto se alineará al lado izquierdo Muy bien, hasta ahora tan bien. No obstante, el fondo de este contenedor está aquí, pero la imagen está aquí. Podemos hacer esta imagen abajo, click en la imagen, ir a agregar y establecer alinear yo como N así. A ahora mismo tenemos que diseñar esta sección para hacer eso. Vamos a crear una nueva sección. Haga clic en el icono más, luego seleccione el cuadro plex y la columna de dirección será fila. Entonces averiguaremos la talla. El tamaño es 200, aquí vamos a Minhightts así, luego vamos a Is muere y sobre fondo, simplemente podemos hacer clic en Clásico y cambiar el color de fondo a este color de texto porque aquí el color de fondo es el color Bien. Ahora bien, si revisamos aquí, debería haber un espacio entre esta imagen y el fondo negro. Entonces si lo comprobamos hay gap pasado, para sumar el gap, voy a dar click en este contenedor y en el valor de enlace Avanzado juntos, luego agregar top pass 30 así. Bien. A lo mejor vamos a agregarlo como 20, 20 será el mejor tamaño, y aquí también. Hagámoslo 20 esto. Y aquí podemos hacer lo mismo. Bien, ahora es mucho mejor. Ahora para el siguiente paso, tenemos que sumar esas secciones. Así que vamos a guardar los cambios haciendo clic en guardar rap. Bien, ahora para esta sección de logros, podemos usar widget de contador en elemento de f. entonces iré aquí y buscaré contador. Aquí tenemos el widget de contador. Yo solo lo voy a agregar y ya ves cuando lo agreguemos, hay un efecto de conteo. Vamos a configurarlo. Primero, tenemos que sumar 40 plus, así que solo voy a agregar el número inicial como cero y el número final como 240. Entonces si queremos agregar algo delante de esto, podemos agregarlo o si queremos agregarlo detrás, podemos agregarlo. Entonces tenemos que agregarlo detrás. En realidad comencemos desde el 50. Sí. Ahora, la duración de la animación estará aquí, 2 segundos. Voy a llegar a 1 segundo. Por lo que la animación sucederá en 1 segundo. Entonces estos mil milisegundos medios significan milisegundos. Mil milisegundos significa 1 segundo. Bien. Entonces tenemos que agregar el título. Yo sólo voy a copiar el título. Me gustó esto. Entonces vamos a los estilos E. Antes vamos al estilo en contenedor. En el diseño, vamos a convertirlo en el centro de alineación. Es mucho mejor. Ahora edita el widget de contador y ve a eTyleOtyle title position será después que queramos delante de, podemos agregar así, pero necesitamos y alineación horizontal será centro así, entonces tenemos que sumar Averiguemos la brecha. Creo que son 20. Sí, son 20, vamos a hacerlo como 20. La posición del número será central. La brecha numérica, la brecha del icono más, hagámoslo como cuatro. Sí, es por defecto. Hagámoslo como dos. Bien. Números, podemos cambiar el color del texto a nuestro color secundario, lo que significa blanco y cambiar la tipografía a encabezado En realidad, ya está en encabezado y no necesitamos trazo de texto o sombra de texto en el título. El color del texto será blanco y tipografía será vamos a ver botón, el tamaño del botón tipografía el botón o, y ahora se verá así, y necesitamos tres Yo sólo duplicaré y duplicaré otra vez, duplicaré otra vez Bien. Ahora da clic aquí y vamos a los detalles. Son años de experiencia. A mí me gustó esto, y deberían ser nueve. número final debe ser nueve y el número inicial debe ser cero, y el final será más o Entonces tenemos esta tasa de éxito tasa de éxito, haga clic aquí, cambie este título a tasa de éxito y aquí en presentación y luego la tasa de éxito es 92 92, y comenzaremos con como 30 Sí. Se ve bien. Y ahora tenemos que añadir el último. El último está garantizado para los clientes. Debería ser más de 5 millones. Agreguemos cinco aquí, y hagamos que sea cero. Hagámoslo uno, y aquí tenemos que sumar el dólar, entonces aquí debería estar más así. Bien. Todo bien. Ahora tenemos que alinear esto correctamente para hacer eso, clic en el contenedor y en el diseño, podemos hacer click en este espacio entre y se ajustará en consecuencia. Bien, diseñamos con éxito la sección. Bonito. Ahora tengo otro problema. No es un problema real. Es como una mejora. Entonces, cuando pasamos el cursor sobre este botón, es mejor el color de fondo, pero se debe cambiar el color del texto Entonces, si cambiamos este color de texto a verde oscuro, será mucho mejor en la experiencia del usuario porque los usuarios podrán entenderlo mejor. Ves, tal vez debería ser de color negro. Así, ahora es mucho mejor que antes. Bien, tenemos que hacerlo para esta sección de encabezado. Así que simplemente haz clic en guardar borrador para guardar los cambios, luego haz clic aquí para editar el encabezado. Guardar licencia, luego haga clic aquí y en este estilo en nuestro color de texto estará así de bien. Ahora es mucho mejor. Bien. Ahora también aquí, cambiemos el color del color a esta primaria. Esto debería ser profesional porque esto debería ser profesional, si agregamos mucho texto o muchos colores, eso no va a ser bueno. Bien, ahora hago clic en Editar página para editar la página principal. Bien, ahora tenemos que diseñar la sección A. 18. Diseña la sección Acerca de: Hola a todos. Entonces comencemos a diseñar. Primero, tenemos que crear la sección. Doy clic aquí y hago clic en cuadro de texto y selecciono la fila de dirección del cuadro de texto Después por adelantado quitamos margen y relleno, y si comprobamos aquí, el artículo entre tallas o la sección entre tallas es 1220, así que vamos a Marginus Bien. Como primer paso, tenemos que agregar la imagen, clic aquí y buscar imagen y agregar la imagen así, luego podemos ir aquí, toque doble en la imagen. Haga clic en exportar exportar como JPEG. Si tienes fondo transparente, puedes exportar esto como PNG, pero lo hago con JPEG porque no tengo fondo transparente. Bien, ahora vamos a ir a Tin PNG y Ragan optimizar, luego haga clic en el botón JPEG para descargarlo y haga clic aquí y agnop para subir Entonces copiemos este título y pasemos como Altex. Bien. Conclate acabo de agregar, y ahora tenemos que crear esta sección Para crear esta sección, tenemos que agregar el contenedor porque este contenedor principal sobre sección contenedor principal es una dirección horizontal, pero este texto debe ser vertical. Para ello, daré click aquí y agregaré un contenedor como este. Sólo agrégalo así. Entonces voy a añadir con esto. Hagámoslo como 60 60. Creo que 60 va a funcionar. Todo bien. Entonces voy a dar click aquí para agregar titular. Esto será sobre hanna Clark, así que solo pégalo así. Entonces agreguemos contenido antes de hacer nada. Entonces tenemos que agregar esto, solo copiarlo, pegarlo así. Entonces tenemos que agregar este texto. Así que solo duplica éste y agrega el texto así. Y ahora tenemos que ajustar la tipografía. Si no lo hacemos, el diseño no se verá bien y no podremos editarlo correctamente, haga clic en el primer titular y haga que DA gas fundido H dos, luego un azulejo, sipógrafo será alineación de cabeza laico y el color del texto será color del texto Bien. Entonces aquí, vamos a ver variable es sub encabezado. Simplemente haga clic aquí y haga clic en el subencabezado. Si quieres un tamaño diferente, puedes dar click en este penc lion y cambiar el tamaño Pero en nuestro caso, no necesitamos hacer esto, luego seleccionar el color del texto, para que puedas cambiar el color del texto desde aquí. Bien, y haga clic aquí, luego copie el texto y camine el texto así. Entonces en estilo, tipografía de alineación lef será párrafo y el color será color Bien. Cuando voy al contenido, tengo que cambiar esto a párrafo y esta línea etiqueta HTML debería ser H tres. Así que no te olvides de hacer eso. Es muy importante hacer que nuestra página se posicione en el motor de búsqueda y se trata de en la página SO. En realidad, analizaremos nuestro sitio web COSCO en futuras lecciones Entonces a partir de ahora cuando hagamos esto, nos ayudará a mejorar nuestro sitio web en el futuro. Todo bien. Ahora aquí, agreguemos margen negativo. El top será así. Bien. Y ahora tenemos que hacer este centro. Si comprobamos nuestro diseño Figma, en realidad está alineado correctamente porque tenemos que agregar más datos Ahora, hagamos clic en este contenedor y hagamos que justifique el centro de contenido. Bien, ahora voy a duplicar esta parte, y después tenemos que agregar este texto, copiar el texto y pegarlo aquí, luego hacerlo H tres. Entonces si comprobamos la tipografía, es botón, entonces estilo, tipografía, cámbiala a Entonces tenemos que agregar esta lista para hacer eso, voy a dar click en agregar elemento y lista de búsqueda. Aquí tenemos puedo enumerar. Simplemente lo arrastraré y soltaré así. En realidad, debería estar aquí, luego hago clic con. Antes de editar el contenido, debemos ir al estilo y al texto, hagamos el color del texto como texto aquí la tipografía será párrafo Creo que es párrafo, es párrafo. Ahora voy a copiar uno por uno copia este contenido, aquí tenemos ítems, pégalo así. Entonces para este icono, voy a dar click así y aquí podemos encontrar el mismo icono. Esta es la biblioteca de iconos de pontosom. Aquí podemos encontrar ese mismo icono. Haga clic. Acabo de buscar verificar aquí tenemos la marca de verificación Sólo puedo hacer clic en Instalar. Ahora veamos el tamaño. Es el tamaño es 22 por 22 y el color es color primario. Hagamos esos detalles. Primero, voy a quitar esos dos elementos y aquí en el icono, talla es 22, después la brecha es, veamos la brecha. Gap es cuatro, hacer hueco como cuatro alineación es reg, el color es color primario. Ahora podemos dar click aquí para duplicar el ítem. Ahora hago clic así, luego copia que lleva así. Entonces copia Dubltd esto toma dos, y ahora tenemos que cambiar el tamaño entre medias para hacer eso, voy a ir al estilo Aquí tenemos espacio entre, veamos el espacio intermedio. Es diez, hagámoslo como diez. Muy bien, hasta ahora tan bien. Entonces tenemos que agregar esta cotización o código. Simplemente voy a copiar el código y hacer clic en elemento de anuncio buscar cotización. Ahora aquí tenemos código de bloque solo arrastra y suelta ese elemento. Entonces agregaré la cita y no necesitamos el ícono del tweet o no necesitamos al autor. Bien, la pantalla cambiará a cotización. Vayamos al estilo un estilo. El color del texto será este color de texto y la tipografía será párrafo En realidad, tenemos que cambiar la tipografía. El color del texto será texto y aquí tenemos el comió el color del código coloreará y tenemos que disminuir el tamaño. Así, en realidad necesitamos este tipo de comillas para comillas. Sin embargo, no tenemos ese diseño en elemento de veamos, no tenemos ese diseño, así que agreguemos la cita y podemos hacer la alineación ya que nos gusta mucho mejor el centro de alineación, pero hagamos alineación a la izquierda y una dtyled podamos cambiar la brecha, así haré la brecha como cero Tipografía, cámbiela a párrafo y da clic aquí. Entonces en el estilo E, hazla Italia así. Bien. Ahora se ve bien y en código podemos reducir el tamaño del código. Hagámoslo así. Es demasiado pequeña. La talla cuatro será la mejor talla. Entonces lo que tenemos que hacer es crear esta sección encuéntrame en línea. Para ello, tenemos que usar el layout horizontal. Doy click aquí y en contenedor, solo voy a poner contenedor así. Entonces en avance es duro y la dirección será cruda y justificar que el contenido sea centro. Bien. Ahora solo duplicaré este texto y lo pegaré por dentro así. Entonces vamos a cambiarlo texto a esto y su botón de tamaño, péguelo así en mistyle tipografía es botón. Bien. Y luego tenemos que agregar el ícono de redes sociales. Testamentos iconos sociales. Entonces aquí tengo íconos sociales, agrégalo. Tenemos que agregarlo dentro de este contenedor. En realidad, ya se agregó a ese contenedor, pero este texto debería ser sobre así. Después hago clic en el contenedor y lo hago alinear el centro del artículo así. Bien. Entonces tenemos que averiguar el tamaño intermedio, así que es 15, así podemos agregar fácilmente Gap pass, columna Gap pass 15. Así. Bien, ahora tenemos que ajustar este diseño para hacer eso, vamos a averiguar los detalles. Entonces es 51 por 51 y el radio de orden es 30. Bien, agreguemos esos detalles. Haga clic aquí. Por ahora, mantengamos esos ligones sociales y forma será círculo y las columnas serán alineación automática será centro uno cambio de estilo colores oficiales para emitir aquí cambiar el color primario ya que este color y el color secundario será en realidad color secundario será color blanco así Entonces podemos agregar tamaño como 51 51 es ser. El icono no será el 51. Veamos el tamaño del icono. El tamaño del icono es 21. No agreguemos el tamaño del icono y agreguemos relleno. Si comprobamos el relleno, relleno estará en el fixel 15 así El espacio entre voluntad seis, que sea seis. Qué radio es th en el icono O vamos a cambiarlo color a este color así y el color secundario será este color de texto. Ahora es mucho mejor. Si queremos, podemos aumentar el tamaño del icono. Hagámoslo como 21. Ahora en el contenido, agreguemos primero el icono en el que hemos vinculado. Haga clic en Biblioteca de iconos y busque Enlace en. Aquí hemos vinculado en icono. click en Insertar y aquí el enlace del icono social y en la opción de enlace, podemos agregar open in New Window, lo que significa que cuando el visitante haga clic en el botón, esa persona será redirigida a esta página de redes sociales en Nueva Pestaña. Entonces el segundo ícono, tenemos Facebook y Facebook como segundo Licon actualmente no tenemos Facebook o página de LinkedIn ni nada, así que solo agregaré la página de Facebook URL del sitio web de Facebook, y aquí agregamos Enlace en URL del sitio web, pero en tu caso, deberías agregar URL de página que eres cliente disponible o si haces este sitio web para Business coach en el Coach de negocios, enlaces de redes sociales o si crea este sitio web para autor en los detalles de las redes sociales del autor si lo entiende, entonces tenemos el ícono de YouTube. Pero aquí dentro, tenemos Instagram buscar Instagram y agregar luego ajustaré Instagram R Bien. En realidad, este tamaño, hagamos este tamaño heigen como 22. Debería ser un poco grande, hagámoslo a 24 y cambiemos la almohadilla a. Hagámoslo como solo 222, así. Ahora tenemos esa sección sobre Su animación, vamos a crecer así. Diseñamos con éxito la sección acerca de esta manera. Ahora puedo dar click en Saraft y pasar a la siguiente sección 19. Diseñar la sección de servicios: Hola a todos. Ahora tenemos que diseñar esta sección de servicios. Entonces comencemos. Voy al editor de Elementor y hago clic en Agregar Nuevo contenedor y doy clic en Flexbox y aquí configuro la columna como columna de dirección Bien, ahora tenemos que agregar entre tamaño como uno a uno. Vamos a avanzar y en el margen uno al 20, el margen superior es del uno al 20. Bien. Ahora lo que tenemos que hacer es agregar este texto, simplemente copiar el texto y dar clic aquí, luego agregar el titular. Entonces solo pasea el titular así. Entonces un estilo, hazlo un centro de línea y tipografía será encabezado y el color será el color del texto Entonces tenemos que agregar esta segunda parte o el subtítulo, copiar el texto y aquí en el contenido, mantener la etiqueta HTML como H dos. Ahora duplicaré este encabezado, luego lo haré H tres y lo pegaré así. Entonces un azulejo, la tipografía será sub encabezado así. Veamos el tamaño atractivo, el tamaño atractivo es diez. Hagamos que este contenedor inviten tamaño como diez. El tamaño del cuervo será de diez. En realidad ya son diez Bien, ahora tenemos que agregar esta sección. Para agregar esta sesión, podemos usar grid. Entonces hago clic en agregar elemento y solo busco grid o underlayout, podemos ver la grilla Simplemente lo copiaré y lo pegaré así. Ahora tenemos el diseño de la cuadrícula y aquí, ¿recuerdas en este contenedor, agregamos fila como diez, pero en nuestro diseño Figma, son 30, lo que significa que tenemos que sumar 20 más Entonces para hacer eso, hago clic en la grilla y en Advance link l value y agrego top pass 20 así. Bien. Ahora veamos que tenemos tres columnas. Entonces en diseño, cuadrícula, no tenemos media con redowtline, no necesitamos sin Mantengámonos sin línea por ahora, y la columna será tres y la fila será dos, y las brechas serán, creo que son 20 por 20. Sí, son 20 por 20. Agreguemos brechas como 20 por 20. Bien. Ahora podemos agregar contenido al interior de esta grilla. Para ello, hago clic en este icono más o simplemente puedo arrastrar y soltar un contenedor dentro de esta columna y el margen del contenedor y el relleno serán cero por ahora. Su dirección debe ser verticales. Hagámoslo dirección como vertical y el ificonen hagámoslo. Hagámoslo como centro por ahora. Entonces podemos agregar el contenido. Primero, tenemos este ícono. Da clic en él y haz clic en Exportar. Vamos a exportar como JPG, clic en exportar vector, y en Tiny PNG, solo agregarlo así, luego reducirlo cinco tamaño, luego ven aquí y yo aquí hay una m luego agrego la imagen así y da click en ella, luego trapo y robaré el icono, luego voy a copiar este texto y LTag será este texto cambiar el título a ese texto copiado Ahora tenemos que agregar el título del servicio, copiar el título y dar clic en Plasicon y aquí el titular, la etiqueta HTML del titular será H tres, el ritmo del texto y en su estilo, convertirlo en un centro de línea y la tipografía Creo que es subencabezado. Sí, es subencabezado, entonces ¿qué pasa con el color? El color es el color del texto cambiar el color al color del texto, después duplicarlo así, después voy a mantener la etiqueta HTML como H tres, copiar este texto y esta tipografía de texto es botón En el texto y en mosaico, cambie la tipografía a botón porque es más pequeña Nuevamente, puedo duplicarlo, luego copiaré este texto y pasearé el texto así, luego haré la etiqueta STL a párrafo, luego en estilo, cambiaré la tipografía a párrafo Diseñamos con éxito el primer servicio y veamos el tamaño inten La talla inviteen es de seis y en la parte superior es de 40. Nosotros el fondo inferior es 40. Agreguemos esos detalles. Para ello, hago clic en el contenedor y en el contenedor. Creo que brecha será brecha es diez, no et. Sí, la fila es diez. Bien. Ahora en el vistazo de anuncios podemos agregar relleno para pasar 40, derecha como seis y abajo como 40, izquierda como seis, así. Bien. Después falta. Ahora tenemos que agregar radio de esquina. El radio de esquina es 20. Hagámoslo para hacer ese dile a bordo, hacer el radio de esquina como 20, y ahora tenemos que agregar el tipo de borde, en realidad no tipo de borde, bob shadow, hacer clic en este icono, y veamos los detalles de la sombra Aquí tenemos sombra paralela, por lo que la borrosidad es cuatro y la posición X es cero Encontremos esos detalles. Horizontal será cero, vertical será cero. Desenfoque es desenfoque es cuatro en color, da clic aquí y en aquí, el color es este, clic aquí y en aquí seleccione Css, y cuando seleccionemos Css podemos obtener el RGB chd copiarlo y en solo podemos pegarlo así Ahora es lo mismo que el diseño Figma. Ahora lo que tenemos que hacer es simplemente seleccionar el contenedor y ling, luego duplicar. Entonces otra vez, duplicar. Cuando lo dupliquemos, se llenará la grilla. Ver bastante fácil. Duplicaré esto por tres veces más porque tenemos seis servicios como este. Entonces ahora voy a agregar esos así que agreguemos uno por uno. A continuación, tenemos líderes, copia el texto, página el texto aquí, copia este texto, pega el texto aquí, copia este texto, pasa el texto aquí. Cuando creamos una estructura, podemos simplemente duplicar y diseñar fácilmente el sitio web. Entonces tenemos que cambiar la imagen, click aquí y en Exportar, JPG, dar click en Exportar vector. En realidad, descargaré las imágenes y luego las puedo subir. Es decir, reducir el tamaño y subirlos. Después de eso, sólo tengo que agregarlos a todos y cada uno de los servicios. Todo bien. Ahora iré a Tine BNG y abriré el conjunto de imágenes aquí selecciono imágenes, solo agrego esas imágenes como esta una, dos, tres, cuatro, cinco, seis, tenemos seis imágenes Ahora doy clic en este botón JPG para descargar. Todos ellos. Bien. Ahora aquí, puedo ver que descargar imágenes. Simplemente voy a seleccionar todos ellos y dar clic en esta imagen, dar clic en OtoosImage y solo puedo arrastrar y envolver imágenes Después de que se hayan subido, solo puedo elegir la imagen y hacer clic en Seleccionar. En realidad, tengo que añadir el texto ALT. Siempre agregue texto ALT, solo copie este texto y péguelo como el seleccionado. Y aquí creo que ya copio el texto. Ahora tenemos que cambiar el contenido en esta sección. Primero, usemos el así que simplemente haga clic aquí y las imágenes se cargarán. Aquí está la imagen para esa imagen, tenemos que agregar la etiqueta ALT como hicimos antes y dar clic en Consil entonces tenemos que actualizar el contenido, cambiar el título, después agregar algún título, luego agregar una pequeña descripción como esta y aquí tenemos tres líneas, pero aquí solo tenemos dos líneas Lo que podemos hacer es que solo podemos agregar corchete BR cerrar corchete como este. Cuando hacemos eso, hace un salto de línea en STM, entonces este texto va a continuación Ahora tenemos que cambiar el servicio del programa maestro de mentalidad, solo seleccionarlo, pegar, pegar, seleccionar y pegar estos tanques, copiar y pegar, luego copiar la pequeña descripción y pegarla así Entonces tenemos que hacerlo para el siguiente. Entonces aquí, copia el tanque, pega los tanques, así, selecciónalo, luego aquí, vamos. Simplemente copie el diseño de figma y pegue el diseño. Bien, ahora tenemos un problema. Entonces, cuando revisamos este texto aquí, podemos ver muchas etiquetas. La razón es que simplemente pego eso así, pero no es la forma correcta. Tengo que copiar el texto y pegarlo aquí dentro, no aquí. Si lo pegamos así, este tema no va a suceder. Creo que el resto de este texto va a funcionar bien, y tenemos que agregar estamos aquí para mantener las tres líneas de párrafo y la última, simplemente cambiar el texto y cambiar la imagen, clic en este icono y probar el icono, clic en CLC ahora tenemos este texto en este y tenemos que actuar B aquí Diseñamos con éxito la sección de servicios y en futuras lecciones, podemos probar o podemos agregar algún efecto HA y animación. Por ahora, solo podemos hacer click aquí y dar click en Savedra 20. Cómo agregar botones a la sección de servicios: Tenemos que añadir este botón. Entonces para hacer eso, vamos a Editor elemental y si nos desplazamos hacia arriba aquí, tenemos el mismo botón. Entonces haga clic derecho y haga clic en Copiar. Entonces ven aquí y aquí está la sección en la que queremos agregar el botón, seleccionar el contenedor, dar clic derecho sobre y aquí vamos. Ahora tenemos botón aquí. Así que ve a East tile on East tile. Establece la posición como centro. Bien, ahora solo tenemos que copiar este texto y pasar texto. Así que ve al contenido y pasa el texto así. Entonces para asegurarlo. Vamos a revisar el relleno. Entonces es 22 por 33. Así que vamos aquí y vamos a comprobarlo aquí. También es 22 por 33. Bien. Ahora necesitamos tener un espaciado. Si verificamos claro, el espaciado es de 30. Podemos fácilmente dar click en el botón, ir avanzando al avanzar, eliminar margen y relleno, luego agregar margin top pass 25 porque ya en realidad esto debería ser 20 porque ya obtenemos diez como este espaciado. Bonito. Ahora lo que tenemos que hacer es crear esta sección de revisión. Vamos a crearlo en la siguiente lección. 21. Diseñar la sección de reseñas: Hola a todos. Ahora tenemos que crear esta sección de revisión. Entonces hagámoslo. Voy al editor de elementos, y primero, necesitamos crear el contenedor, dar clic en este icono más y dar clic en Flexbox Entonces aquí hago clic en la columna de daction. Bien, ahora tenemos entre espacios uno a 20, así que vamos a agregarlo, ir a avanzar, eliminar margen predeterminado y relleno y agregar margen superior pase uno a 20. Bien. Entonces vamos al Figma y en el diseño Figma, la altura es de 600 Entonces agreguémoslo, haga clic en el contenedor, y en el diseño, la altura mínima será de 600. Bien. Ahora como primer paso, agreguemos esta imagen de fondo. Para ello, daré click en la imagen así, seleccionaré la imagen, luego haré clic en este botón Exportar. Bien, está abajo y ahora voy a tiny png.com y lo subiremos para reducir el tamaño del archivo Después hago clic en este botón para descargarlo. Ahora lo que voy a hacer es ir a nuestro sitio web elemental y aquí ir a Estyle y click en tipo de fondo como clásico luego dar click en esta Imagen de Joe y simplemente subir la imagen así Después voy a copiar esto en este texto como texto ALT de esta imagen. Entonces agreguémoslo así. Luego haga clic en Ocultar o en la configuración, haga que la imagen posición completa el accesorio central central sea predeterminado, o simplemente haga que sea como arreglar y repetir sin repetir el tamaño, cubierta La exhibición será cubierta así. El apego no es fijo. El accesorio debe ser de desplazamiento y el tamaño de la pantalla será automático o podemos agregar cubierta. Bien ahora tenemos antecedentes. Entonces lo siguiente lo que tenemos que hacer es agregar en este texto. Es bastante fácil. Simplemente podemos hacer click aquí y en el titular así. Entonces solo ve aquí, copia los tanques y paga el texto aquí. Entonces dupliquemos este titular, y ahora copiemos esta toma y peguemos texto así, luego cambiemos la etiqueta HTML a H tres. Y ahora vamos a ir a Etyle y aquí seleccionamos el subtitular, clic en esta tipografía fuente global y configuramos el subencabezado, luego cambiamos de color a este color Y tenemos que hacer los cambios de estilo de este encabezado para hacer ese seleccionado Etyle y hacerlo alineación centro cabecera entonces aquí, color del texto, tenemos que hacer este centro de alineación Y no sólo eso, voy a hacer clic en el contenedor principal y en el diseño el centro de alinear elementos así. Bien, aquí, vamos a ver entre el medio, digo diez. Aquí, parece demasiado cerca, así que vamos a arreglarlo para arreglarlo. Simplemente podemos hacer clic así y hacer clic en esta pensión. Entonces cambiemos la altura de la línea. Hagamos altura de línea ya que se trabajará 50 50, agregarlo como 50, y lo que tenemos que hacer es dar clic aquí y seleccionar el encabezado luego podemos ir a Global Bonds y podemos editar el encabezado y agregar líneas 50 así. Ahora haga clic en Const cambios y haga clic aquí para o vaya al editor Bien. Ahora tenemos que agregar el padInt superior e inferior hacer eso, da clic aquí y dar click en esta sección y luego seleccionar el encabezado y presionar todo para encontrar el tamaño entre, es 70 ¿Y qué pasa con esto? También son 70, haga clic en el contenedor al avanzar en el acolchado superior 70 y la parte inferior será 70. Bien. Ahora lo que tenemos que hacer es crear esas reseñas. Es bastante simple y antes de crearlo, tenemos que agregar el tamaño intermedio. Aquí, entre la talla es 30. A lo mejor podemos agregarlo al margen. Entonces, saltémoslo por ahora. Entonces para agregar reseñas, hago clic en Agregar elemento, y aquí buscaré reseña Bien, aquí tenemos las reseñas. Acabamos de agregar así. Bien, ahora tenemos tres críticas. Por ahora, mantengamos las tres críticas ficticias. Y aquí, veamos, primero, seleccionaré esta casilla de revisión y ahora veremos qué tenemos que ajustar. Entonces, como primera opción, tenemos lados por vista. Aquí, tenemos uno, dos, tres, tres lados, así que simplemente hago clic en tres y deslizo para desplazarme, hagámoslo como uno, no dos, uno. Entonces será scroll después de uno. Bien, ahora nosotros con opción predeterminada y en opción adicional, no necesitamos flechas porque no hay flechas. Si lo deseas, puedes mantener las flechas y reproducción automática, velocidad de reproducción automática 5,000, lo que significa 5,000 milisegundos en segundos, son Bien. Ahora bucle infinito será sí, empuje en cómo va a ser sí, empujar en la interacción será sí. Bien. Y podemos agregar como carga como media de carga. Reviso no está presente en la estructura del sitio web, no se cargará hasta que se muestre en Diseño. Bien, ahora tenemos que ir a EstilSoets. Antes de ir a Estes, agreguemos opiniones reales Agreguemos detalles reales. Primero, eliminaré esos dos artículos y guardaré solo el artículo uno. Y primero aquí, tenemos que elegir la imagen. Para hacer eso, voy a ir aquí y lil esto. Da click en esta imagen, da click en esta imagen, da click en esta seleccionas las tres y luego da click en Exportar tres capas, y se descargó como C. Así que simplemente hago click en ella. Estoy usando Mac. Si está utilizando Windows, simplemente haga clic derecho y extráigalo. Y aquí tenemos la revisión Emages. Entonces vamos a Tiny PNG y agreguemos esas reseñas. Bien. Ahora voy a descargar tres así. Bien. Ahora tengo L de tres opiniones. Usted comprueba esta reseña nombre de la imagen, es solo nombre aleatorio. Así podemos agregar el nombre real de esta persona a estas imágenes. Eso ayudará a clasificar estas imágenes en Google, y también es una forma profesional de mostrar nuestras imágenes. Para ello, simplemente voy a hacer clic aquí y vamos a copiar este nombre, y esta es una buena práctica. Entonces entonces vendré aquí nombre así, y haré lo mismo por el resto de las imágenes. Bien, ahora nuestras imágenes están listas, así que las destaco todas, y vayamos a nuestro sitio web y hagamos clic aquí. Entonces solo arrastraré y soltaré para subir esas imágenes a nuestro sitio web. Y aquí vamos. Ahora aquí, voy a copiar este título y probarlo como ALT y dar clic en CLC ahora tenemos que agregar el nombre, para agregar el nombre, resaltemos y copiemos el nombre Pasado el nombre, entonces tenemos que agregar el título, copiar el título, pegar el título aquí, y la calificación será para ti y puedo no necesitamos icono de redes sociales como este, así que lo eliminaré. Y así enlace estará vacío. Entonces tenemos que agregar este texto y pasar el texto así. Bien, ahora tenemos la primera reseña. Ahora lo que puedo hacer es duplicar esta reseña dos veces más y dar click así, luego primero agreguemos la imagen. Esta debería ser la imagen. Agrega la etiqueta ALT a la imagen. Bien. Ahora aquí, copia el nombre. Así, copia el título así, calificación será cinco y copia este texto así y pega así. Entonces, si quieres calificar como tres, solo puedes agregarlo como tres, pero agregar tres no es bueno para los negocios, así que agreguémoslo como cinco. Bien, ahora tenemos que editar el tercero. Da clic aquí, haz clic en sí y agrégalo así. Después edita el título, agrega el título y pasa el título así. Después haga clic aquí para agregar el título. Este es el nombre. Este es el título. Bien, luego agrega la reseña, agrégala así. Bien, ahora tenemos las tres críticas. Arreglemos ese problema de diseño. Para ello, voy a Estyle en Estyle. Averiguemos el espacio entre ellos. Selecciona una de esta reseña y presiona Alt sobre la siguiente reseña, son 20 derechos de espacio entre 20 y frontera con, hagámoslo cero. No necesitamos frontera. Entonces el radio del borde, veamos que el radio del boder es dos, y luego el patrón superior e inferior es dos y la izquierda y la derecha son nueve Entonces agreguemos esos detalles, el patrón, haga clic aquí, luego aquí, arriba 20, derecha, nueve, abajo 20, izquierda nueve. Bien. Ahora tenemos que añadir el color de fondo. En realidad, podemos agregar color de fondo al encabezado. Mantengámoslo como color predeterminado. Podemos ver un separador. Si quieres, puedes mostrarlo, pero yo no lo voy a mostrar, así que átalo a la altura. Y ahora en el texto ese color del texto será el color del texto y la tipografía lo será Pero veamos la tipografía. Aquí, la tipografía es de sentido abierto semi pared 18. Agreguemos esos detalles. Nosotros el párrafo y familia es opensans 18 wid semivol así, entonces la altura de la línea es 30 entonces Es 30. La altura de la línea es 30. Bien. Entonces el color del texto del título será este color y veamos la tipografía La tipografía es abierta sans regular 16. Vamos a hacerlo. Primero seleccione el párrafo y luego haga clic en este editar ticon tamaño 16 que es normal Innit 30 así. Bien, ahora tenemos que ajustar las imágenes. El tamaño de la imagen, vamos a averiguar el tamaño de la imagen. Entonces es el 92. Ver, el tamaño de la imagen es 92, así que vamos a agregar 92. Bien. Ahora vamos aquí y en realidad vamos aquí. Brechas de radio fronterizo, mantengámoslas. En realidad, tenemos que sumar la brecha. brecha entre la imagen y el texto es de 15, así que agreguémoslo como 15 y no necesitamos agregar radio de borde e icono. Averiguemos el icono. Entonces el tamaño del icono es de 23 por 22. Hagámoslo como 22. No, este ícono es sobre el ícono de redes sociales, no necesitamos agregarlo, así que solo ignóralo. En la calificación, el tamaño es 22, y vamos a averiguar el espaciado de espaciado es vamos a ver, vamos a nueve. Hagámoslo como diez. Sí. Hagámoslo como diez. Bien. Entonces el color es, vamos a averiguar el color. Aquí está el color. Copia el código de color y ve aquí, luego enfrenta el código de color así. Bien. Ahora se ve bastante bien. Aquí, tenemos un problema. Esto no está en la misma línea. Podemos arreglarlo fácilmente eliminando esta brecha. Vamos a reducir la brecha. Entonces, hagamos de Gap más allá de las nueve. Ahora se ve bien. Entonces tenemos en texto, ¿cambiamos el texto de revisión? No, aquí tenemos el conjunto de revisión revisar texto, haga clic en tipografía y el color también será el color del texto como Bien, ahora lo que tenemos que hacer es agregar en esta paginación o el diseño de cambio de esta paginación Para ello, vaya a navegación en navegación. Veamos esta paginación tamaños 15 por 15 y espacios 220. Entonces agreguemos 15 es el tamaño, espacios 220. Entonces el color es color primario un color activo es el color del texto. Ves, bastante bien. ¿Ves? Ahora lo que solo tenemos en realidad, lo que tenemos que hacer es agregar espaciado. Si revisamos este contenedor y aquí, el espaciado bruto es de diez, lo que significa que tenemos que sumar 20 más porque el espaciado entre está aquí 30. Entonces para hacer eso, lo que podemos hacer es ir aquí. Da click aquí y en Advance margin top at dash to 20, y ahora aquí tenemos 30 del tamaño. Bien, ahora lo que tenemos que hacer es hacerlos centrar para hacer eso, click en este contenedor y aquí dijo justificar el contenido como centro. Bien, ahora se ve bastante bien. Así que diseñamos con éxito la sección de vista previa. No obstante, puedo ver aquí es el espaciado, intentemos arreglarlo. No necesitamos este espaciado. Sí, tenemos espaciado en el medio. Et trata de arreglarlo. Vamos a un contenedor. Hagamos con este 100%. Sí, cuando añadimos con este 100%, eso arreglado, y ahora se ve bastante bien. Bien, ahora da clic en guardar injerto para guardar el cambio. 22. Diseñar la sección de contactos: Hola a todos. Ahora tenemos que diseñar este ctaxón para hacer eso Empecemos de cero. Primero, voy a dar clic en este marco y vamos a ir a este diseño de cuadrícula y desmarcar este botón de altura, clic en este botón de mostrar para mostrar la cuadrícula Y aquí tenemos 12 cuadrículas de columnas y seis para esta sección y seis para esta sección. Tenemos que agregar columna que tiene 50% para este texto y 50% para forma. Entonces hagámoslo. Aquí, primero, da clic en el ícono de Li más, luego haga clic en Flexbox, y aquí tenemos que agregar la fila de dirección Y aquí en el diseño avanzado agreguemos 1224 top y un estilo, haga clic en tipo de fondo y cambiemos el color a este color primario. Bien. Ahora tenemos que añadir esos textos. Agreguemos esos textos para hacer eso. Podemos dar click aquí y simplemente agregar el titular así e ir al estilo, cambiar el color del texto a blanco y la tipografía será encabezado y la alineación queda Y sobre el contenido, agreguemos este texto así, luego pegarlo así. Hay que agregar la línea hasta aquí para hacer eso. Solo podemos agregar una etiqueta BR así. Y si ves esta parte superior y la parte inferior de este texto tiene dos tipos, simplemente puedes hacer click aquí y cambiar la altura de la línea. En mi caso, son 50. Si tienes menos de 50 o esto no se ve bien. Puede hacer clic en Administrar teléfonos globales y en aquí, agregar altura de línea y hacer clic en Guardar cambios. Ahora volvamos y aquí siguiente, lo que tenemos que hacer es duplicar este, dar clic en dupligate y cuando lo duplicamos, muestra de esta manera porque seleccionamos pro container Entonces para arreglarlo, hago clic en agregar elemento y agregar nuevo contenedor. Y para este contenedor, eliminaré todos los márgenes y los acolchados y en disposición, agregaré el ancho como 50% Entonces puedo agregar esos artículos dentro de este contenedor así. Bien, ahora tiene 50% de talla. Otro texto. Haga clic aquí y cambiemos el estilo a subencabezado. Vamos a copiar el subencabezado de aquí y pegarlo así Bien. Ahora voy a cambiar esta etiqueta HTML a H tres. Después haz clic derecho y vuelve a duplicar este texto. Entonces agreguemos este texto de párrafo, cópielo y peguéelo así, luego cambiemos la etiqueta STML a párrafo por P, luego en estilo cambiemos la tipografía a párrafo, Entonces lo que tenemos que hacer es agregar estos íconos para hacer eso. Haré clic aquí y buscaré Lista aquí tenemos lista de iconos, así que solo agregaré lista de iconos como esta. Después voy a eliminar los iconos innecesarios y hago clic aquí. Entonces los textos de la lista de iconos serán este texto solo copie ese texto y el icono será esta marca de verificación Solo busca cheque y aquí vamos, aquí vamos. Tenemos esta marca de verificación aquí. Entonces aquí, podemos ver esta misma marca de verificación y luego hacer clic en Bien, no es seguro porque en estilo en icono, el color es este color de fondo Hagámoslo a blanco así. Bien. Ahora agreguemos el contenido de Earl antes de editar cualquier espaciado o estilo Duplica esto por dos veces y pasa los tanques. Entonces tenemos que copiar éste, poner en fase los tanques. Bien. Ahora tenemos que agregar este texto, sólo hay que copiar el texto y duplicar éste y ponerlo abajo así. Entonces pase ese texto. Bien. Ahora lo que tenemos que hacer es agregar tamaño. El primero, tenemos que averiguar la altura completa de esta sección o simplemente podemos agregar 30 como la parte superior e inferior, luego podemos crecer a partir de aquí. Sin embargo, agreguemos Altura mínima, así que hago clic aquí y aquí tenemos la altura mínima como 851, así que hagamos clic en este contenedor principal y en la cadena de disposición Altura mínima a 851 Entonces una línea de artículo será el centro. Bien. Ahora cambiemos este etyHagamos eso, vamos a Etyle y en Etyle averiguaremos qué tipo de estilo hacemos el tamaño del icono es 22 y el espaciado es cuatro, agreguemos esos detalles sobre el tamaño del icono es 22, el hueco es cuatro y alineación quedará en posición vertical, no necesitamos cambiarlo Hagámoslo como cero, y en el menor espacio entre habrá vamos a ver diez. Agreguemos diez como espacio entre, entonces el texto será tipogapy y el color del texto será este color secundario sobre cómo no necesitamos Bien, diseñamos con éxito esta sección ahora tenemos que crear este formulario. Para hacer eso primero, tenemos que crear un contenedor así que vamos a dar clic aquí y dar clic en agregar elemento y aquí solo un contenedor como este. Vamos a agregarlo así, entonces el ancho del contenedor será del 50%. Bien. Ahora, puede cambiar el color de fondo a blanco en cada baldosa. Da click aquí, el color del tipo de fondo será blanco, y además las esquinas serán dos vacías. Por lo que a bordo el radio fronterizo serán dos. Bien. Ahora aquí tenemos que agregar esta t solo apuesta desde aquí y dar clic aquí y agregar titular, luego en el texto, luego cambiar el DML de nuevo a párrafo y un estilo, queda alineación Creo que es y la tipografía será párrafo y el color es este color de texto Ahora tenemos que añadir el relleno. Averiguemos el pading Haz clic aquí y la izquierda y la derecha son 20 y la parte superior inferior es 30, agreguemos esos detalles Para agregar esos detalles, seleccionaré el contenedor. Contenedor en avance en el margen y relleno en la parte superior, es 30, 20, abajo, 30, izquierda 20. Bien, bien. Ahora tenemos que agregar este formulario. Para ello, simplemente daré clic aquí y buscaré el formulario así. Entonces solo y deja caer el formulario así. Ahora tenemos en campos de formulario. Entonces agreguémoslos uno por uno. Primero, tenemos nombre completo. Simplemente copio el texto, y en nombre, el tipo de texto será texto y la etiqueta será nombrada. Simplemente agregue el nombre lugar de soldadura se nombrará con el requerido y haga clic en este ícono requerido. Y aquí voy a dar click en esta etiqueta del espectáculo para ocultar, así las etiquetas no se mostrarán. Por lo que serán solo marcadores de posición. Ahora tenemos correo electrónico solo copia el texto y ve aquí en el correo electrónico, el tipo será correo electrónico, la etiqueta será correo electrónico y el marcador de posición será correo electrónico es campo obligatorio Entonces tenemos mensaje por ahora, lo eliminaré, y ahora hago clic en agregar ítem, y ¿qué tenemos? Tenemos que agregar el teléfono. Así que simplemente copia texto y coloca el texto aquí, entonces el marcador de posición será entonces tenemos que cambiar este tipo a número así, no número, debería ser t TES Bien. A continuación, tenemos que agregar este companm, copiar ese texto, y solo lo duplicaré de aquí, y aquí el tipo será texto y la etiqueta será comp y placeholder será compania Bien, no se requiere, pero se requiere el número de teléfono. Ahora voy a agregar esta etiqueta, solo copie el texto y haga clic en agregar aquí, cambie esto a SMS en el SDMLte así Mantengámoslo así por ahora. Ahora tenemos que agregar esta casilla de verificación para hacer eso. Podemos hacer clic en el elemento del anuncio y cambiarlo a casilla de verificación y etiqueta de casilla de verificación será esta toma ahora tenemos que agregar la opción Ahora, vamos a agregar esas casillas de verificación primero, copiar este texto y pegarlo así. Entonces el siguiente copia este texto, pegarlo así, siguiente, copiar esto, pegarlo así, y luego copiar esta toma, pegarlo así, luego copiar este texto y pegarlo así. Ahora aquí puedes ver el titular no se muestra para arreglarlo, podemos dar click en el elemento del anuncio y configurarlo como HTML. Entonces aquí podemos agregar solo texto HTML. Lo voy a poner sobre esto. De hecho debería ser este objetivo principal para el texto de coaching aquí, agrégalo así. Bien, ahora marque en esta lista inline para que la lista se vea así y vamos a cuidar el diseño después de agregar RFELD luego tenemos que agregar este cuadro de mensaje o las áreas de texto para hacer eso haga clic en agregar Deleon y cambiar texto a área de texto, luego la etiqueta será nodos adicionales Así, entonces lugar vendido será este texto y no es obligatorio. Bien, ahora tenemos formulario completo y el texto del botón debe ser solicitar enviar solicitudes. Así que vayamos aquí y cambiemos el botón enviar para enviar solicitudes. Bien, ahora tenemos que añadir el It 23. Diseño del formulario de contacto: Hola a todos. Ahora tenemos que añadir la Esty, clic en este icono de lápiz para agregarlo. Ahora vamos a Esty.O Style, el hueco de columna, no necesitamos el hueco de columna, sino que necesitamos el hueco de fila Pasemos al elemento de diseño y descubramos la brecha entre filas. Es 15. Agreguemos un hueco como 15. El hueco de columna es si tenemos campos en línea como el nombre aquí y el segundo nombre aquí, tenemos que considerar sobre la brecha entre esos campos horizontales, pero en este caso, no tenemos ese tipo de campo en ningún lado. Digamos 15. Bien, ahora etiqueta es espaciado, podemos ignorar esta parte de etiqueta, y ahora aquí tenemos campo STML Entonces en el campo STML, el espaciado ya se ve bien, entonces el color será en realidad, tenemos que cambiar el color El color es este color, solo copia el código de color y simplemente pasea este código de color así. Entonces en el campo STML, también el ritmo de ese color así La tipografía es párrafo, entonces tenemos que hacer la edición en campos En los campos, los colores de texto este color de texto será este color de texto, luego la tipografía será párrafo y color de fondo, mantén el color de fondo como blanco porque el color de primer plano Bien, ahora tenemos que averiguar el color del borde. Entonces el color del borde es, creo que también es el color que ya teníamos. Entonces este es el color. En realidad, no es ese color. Sólo tienes que copiar este código de color, y vamos aquí. Luego en el color del borde, agrega ese color. Y ahora el ancho del borde, averiguemos los anchos uno y luego el radio del borde será seis Bien. Agreguemos seis como radio de borde. Bastante bien. Ahora ¿qué tenemos que hacer? Ahora tenemos que ir a botón en botón la posición quedará así, luego la tipografía será botón, y el tipo de borde no será ninguno No necesitamos un tipo más atrevido. El color de fondo es este color primario en color hover será este, color hover como Bien. En realidad, tenemos que cambiar el color del texto, así. Bien. Ahora, no necesitamos preocuparnos por el botón anterior porque no tenemos uno. Y el radio del borde del botón será de 60, y averiguaremos que el tamaño es 22, 33. Entonces el radio del borde es 60, y el relleno de texto será el 22 superior, derecho, 33, arriba, 22 inferior, 33 izquierdo, igual que esto. Entonces mensaje. Entonces la tipografía del mensaje será párrafo y el color del mensaje de éxito será vamos a agregar color verdoso Este color será trabajo. Vamos a colorear así, entonces el color será este color rojo. En color de mensaje de línea, mantengámoslo como predeterminado y los pasos, simplemente podemos ignorar los pasos. Y es bastante bueno. Si queremos aumentar el tamaño de esta área de texto, solo podemos ir al contenido y aquí está el área de texto, y aquí podemos agregar ros. Vamos a agregarlo como cinco. Bien. Ahora aquí tenemos que hacer mejor esta casilla de verificación para hacerlo en Etyle tenemos que averiguar el estilo checkbox En realidad, no tenemos estilo checkbox, así que tenemos que mantenerlo así Para agregar estilo checkbox, hemos usado CSS, así que voy a hacer algunas lecciones para agregar CSS en el futuro Por ahora, mantengámoslo así. Ahora nuestro formulario está cumplimentado. Ahora tenemos que configurar el formulario y en futuras lecciones, configuraremos el formulario para recibir mensajes a nuestro panel de WordPress y recibir mensajes a nuestro buzón de correo electrónico. Ahora hago clic aquí y hago clic en Saveaf 24. Diseñar el pie de página: Hola a todos. Ahora tenemos que diseñar la sección de pie de página. Vamos. Aquí, solo guardamos el borrador, y ahora voy al panel de WordPress aquí, volveré a guardar el borrador y asegurarme de que esté guardado correctamente. Bien. Ahora vamos a salir de aquí y vamos al panel de WordPress. A partir de aquí, en las plantillas, haga clic en ellas Builder en ellas Builder. Tenemos este pie de página o simplemente podemos hacer clic aquí y ya creamos el pie de página vacío. Retirarlo y verlo desde cero. Así que ahora puedo hacer clic en esto más gon e ir a Pie de página o dar clic aquí y en nuevo, luego eliminar esto y dar clic aquí y vamos a simplemente cambiar el nombre del título a Pie de página, así. Bien. Ahora lo que tenemos que hacer es hacer clic en este más eigon y hacer clic en el cuadro Complejo, y seremos fila de dirección así Ignorar esta área. No aparecerá en el diseño. Y ahora lo que tenemos que hacer es verificar el tamaño. La altura es 382. Hagámoslo 380. Aquí la altura mínima será de 380. Después un estilo, haga clic en dip de fondo, luego agregue el color de fondo como color de texto. Veamos, el color de fondo es el color del texto. Bien. Ahora solo podemos hacer clic en publicar y aquí, dar clic en agregar condición y configurar todo el sitio y hacer clic en Guardar y cerrar. De esa manera, podemos ver que realmente se aplica al sitio web o no. Ahora voy a ir a la página web y vamos a ver cómo se ve. Da click en telementor editado aún no hicimos el sitio web publicado, así que tenemos que ir al editor para comprobarlo, y aquí vamos Aquí tenemos la sección Puta. Bien, estamos en la pista apretada. Bien, ahora voy a hacer clic en este ícono más y agregaré un contenedor. Y en este contenedor, hagamos margen y relleno como cero. Y aquí tenemos que agregar esta cabeza og, así que simplemente puedo dar click en Exportar y exportarlo como PNG o simplemente podemos crear esta Tipografía, vamos a crear esto en Este es solo un texto simple ahora, así que para hacerlo, iré a Pie de Página y simplemente haga clic aquí y agregaré un titular como este. Después en el estilo e sobre la tipografía, veamos los valores Es Nonito 39 voltios. Vamos No aquí, deberíamos tener 39 y voltio. Bien. Se ve bien. Entonces solo copio este texto y paso el texto aquí, entonces tenemos que cambiarlo de color a blanco secundario, el color secundario así. Bien. Ahora lo que tenemos que hacer es simplemente agregar este texto, copiar el texto y de hecho podemos sobre el contenido, hagamos la etiqueta TML a tres entonces la duplicaré y vamos a hacerla como P o párrafo Después, la fase del texto en el estilo E. Este será texto de párrafo, y el color del texto será predeterminado. Bien. Ahora esa sección es buena. Ahora tenemos que agregar un nuevo contenedor, basta con hacer clic aquí y agregar un contenedor como este y dentro de ese contenedor, tenemos enlace rápido. Copia el texto del enlace rápido y aquí, da clic aquí y agrega un nuevo titular como este, luego agrega los tanques y su tamaño es la alineación de subencabezado será central así Entonces el color es secundario. Entonces tenemos que agregar este menú. Para agregar este menú, tenemos que crear un nuevo menú. Por ahora, publiquemos esos cambios y ahora tenemos que ir al panel de WordPress en el panel de WordPress, en los menús de apariencia, y aquí tenemos el menú principal. Ahora clicon crea un nuevo menú y en este nuevo menú, lo agregaré como menú de pie Así, luego clicon crear menú y para el pie de página, tendremos que agregar esas secciones Por ahora, agreguemos el hashtag como enlace. Aquí, no aquí, tenemos la página de inicio. Simplemente podemos agregarlo al menú y luego ir a la etiqueta hash de URL de enlaces personalizados, y el texto del enlace será primero sobre aquí, primer texto será sobre y hashtag, el segundo texto será servicio, y el tercer texto contendrá contacto, no contenido Contacto, URL hash tag, y luego términos y condiciones como este Entonces privy política de privacidad como esta y agrega hashtag, haz clic en agregar a Bien, nuestro menú de pie de página está completado Ahora hago clic en el menú S y no agrego ninguna de estas cosas. Ahora voy a refrescar aquí la página. Y luego busco aquí menú así y copio la palabra menú pres y la pongo aquí, después selecciono el menú Ya está seleccionada. alineación será centro, y el punto de horneado, voy a hacer punto de interrupción como ninguno porque necesitamos un menú de texto como este Yout será vertical. Hagamos visible este color. Queremos estilo, la tipografía será Mnuulin y el color del texto será de este color Bien, aquí tenemos el menuset y ahora en el contenido, podemos hacer los cambios necesarios Aquí, subrayado no será ninguno. Puntero será ninguno así, entonces icono no tenemos icono. Ahora podemos ir al estilo E. el cursor, hagamos el estilo como sobre color y en activo, hagamos el color primario para el relleno activo y horizontal. A ver. El patrón horizontal será cero, pero tenemos el relleno vertical. Averiguemos el relleno entre esos artículos. Es 15. Agreguemos que el valor es 15. Bien. En realidad no es pading vertical Hacer pading vertical como cero, y el espacio entre ellos debería ser 15, así Bien. Ahora desplegable, no tenemos un desplegable, así que podemos ignorarlo, y ahora se ve bien. Aquí tenemos que averiguar el espacio entre sus 30. Podemos agregar fácilmente click aquí y en brechas, podemos agregar gap raw como 30. Bien. Ahora tenemos esa sección media. Entonces después de eso, solo tenemos que crear esta multa en redes sociales solo copiar el texto, y podemos simplemente duplicar este contenedor porque no necesitamos hacerlo una y otra vez, así lo duplicaré, y en este texto, así lo duplicaré, y en este texto, solo agregaré este eliminar este menú, entonces aquí buscaré social. Bien, aquí tenemos íconos sociales solo agrega adentro aquí y agreguemos el ícono social. En realidad, tiene link en Facebook e Instagram. Entonces Facebook está en medio, así que vamos a adt a medio, y esto no es Twitter Esto debería estar vinculado en. Link y aquí tenemos que añadir la URL. Simplemente agregaré la URL del sitio web de LinkedIn, pero en UAs o en el sitio web real, tienes que agregar la página de LinkedIn o la URL de la página de redes sociales aquí Y el color, no voy a agregar color oficial, voy a agregar Hasm pero podemos agregarlo en el I dies Por ahora, mantengámoslo como color oficial. En Facebook, solo estaremos en la URL de Facebook así. También en la opción de enlace, podemos hacer que se abra en Nueva Ventana. Cuando alguien haga clic en él, se abrirá en Nueva Ventana. Y aquí tenemos que agregar Instagram, clic aquí y buscar el icono Instagram. Insertar y aquí está en la URL de la página de Instagram. Bien, la forma será redondeada o vamos a hacerla círculo y columna será alineación automática debe ser centro. Ahora vamos a averiguar el tamaño, altura y otras cosas. El ancho es 51 por 51 y 15 15 es el tamaño de. Vayamos al estilo y al estilo cambiemos este color oficial para fundir aquí en el color primario, el color secundario será así. El tamaño debe ser 51 51. 51 es demasiado grande. No, la talla no es 51. El tamaño del icono debe ser 21. Hagámoslo 22, 22, así. Relleno, averiguaremos el acolchado. El padn es de 15. Aquí vamos en el paddinSF 15 no EM, hazlo fijador Entonces el espacio intermedio será lo que es seis. Hagamos esto entre y brecha de fila. No necesitamos brecha de fila. Entonces radio de borde, hagámoslo como C ahora podemos agregar cosas de icono hover. Hagamos el color primario como color flotante como este y el segundo color será este color negro así, mira Si queremos, podemos agregar Su animación. Vamos a crecer así y ahora se ve bonita. Bueno. Si se siente demasiado pequeño aumenta el tamaño del icono. Hagámoslo como 26 y esto está bien. Todo bien. Diseñamos con éxito nuestro pie de página. Veamos cómo se verá el pie de página así y en el contenedor principal, podemos agregar esto como espacio entre, así se ajustará de acuerdo al espacio del sitio web, y ahora tenemos que agregar el padding en la parte superior, padding es 30, ¿qué pasa con el padding inferior? Acolchado inferior, hagámoslo como 20. Pero por ahora, agreguemos top acolchado como 30 en realidad. La parte inferior es 30. antemano, hagamos que no sea margen, sumando top 30, bottom o 30. Bien, ahora lo que tenemos que hacer es agregar esta sección de copyright. Entonces veamos el personal. Entonces aquí tenemos una línea. Voy a hacer clic en este icono más y en el divisor de líneas de búsqueda. Aquí tenemos el divisor. Entonces para hacer eso, tenemos que crear un nuevo contenedor, así que da clic aquí y da clic en Flexbox y agregar divisor de columna de dirección porque esta columna es como es horizontal, pero necesitamos vertical Entonces ahora en este estilo, vamos a darle color a este color de texto así. En el diseño, la altura media, no necesitamos la altura media. Entonces ahora tenemos que agregar el divisor. Solo busquemos divisor y arrástralo y rop así. Entonces un estilo, cambiarlo de color a color secundario, y veamos más info, aumente esto y veamos que la altura del divisor es una. De hecho es frontera de todos modos. Bien. Ahora el ancho es uno, el hueco será de 15. Creo que son 15 o 20. Uh, la brecha es 20, así que hagamos que GAP sea gap como cero, y agreguemos 20 al texto. Por ahora, agreguemos 15 como la brecha, pero hagámoslo usando el texto. Para agregar el texto de copyright, agregaré el titular así. Después en este titular, usaremos etiqueta dinámica, daremos clic en etiqueta dinámica y verificaremos la fecha. Aquí tenemos fecha y hora actual y aquí formato de fecha será personalizado y solo necesitamos el aquí, así que me quedaré solo Y descanso. Bien, aquí tenemos el aquí, pero aquí adentro, necesitamos al copyright en y el actual allá y el resto texto. Entonces voy a copiar todos los ts y aquí por adelantado para antes agregaré este texto completo y para antes solo necesitamos esta parte. Yo sólo voy a copiar. Y luego después vamos a necesitar esta parte así. Bien, agregue espaciado en realidad, abramos esto en el editor de texto, y en ese día, podemos ver todos los detalles. Por ahora, sólo voy a copiar el texto, y ahora voy a abrir editor de texto. Acabo de abrir el W three School Editor HTML. Entonces voy a dar click en pruébalo tú mismo, y aquí tenemos la manera de agregar el texto HTML. Entonces en el diseño, cuando añadimos este texto, cambiemos el estilo a Menlink. Creo que es Menú. Bien, es tipografía es manlink ahora aquí, hazlo estilo Menlink y el color del texto será este color, y la alineación será centro así, ese ese Ahora, cuando hago clic en esta Hannah Clark o en la URL del sitio web, debería ser redirigida a esta página de inicio del sitio web, como si fueras diseñador, puedes agregar texto como este. Después de que se reciba, podemos agregar algo así como diseñado por el diseñador XYZ. Y cuando alguien haga clic en este diseñador XYZ, debe ser redirigido a nuestro sitio web, nuestro sitio web de cartera. Entonces copiemos este texto y vayamos a SDMLEditor para Entonces aquí, voy a una etiqueta. Entonces aquí en Baggot AHF, agregaré esta etiqueta de anclaje o la etiqueta A en la sección de recursos Y aquí tenemos que agregar la URL del sitio web. Aquí está la URL del sitio web copiarlo y ponerlo dentro este HF y aquí objetivo igual NU, y luego cerrar la etiqueta A así. ML es bastante simple. Y esto es solo para HTML, puedes aprender más sobre DML en las escuelas W tres Entonces entonces tenemos que agregar el nCAT o enlace a este texto porque esta es nuestra cartera de sitios web de la compañía para hacer eso a AhF igual y cerrarlo Entonces cierra el nCATC así. Entonces aquí en el fs. Vamos a agregarlo HTTP, Ts collalah XY designers.com Esto es solo una URL falsa. Debe ser la URL del sitio web y el objetivo igual nueva media, esto se abrirá en una nueva ventana. Entonces aquí está el código completo que tenemos que agregar después de 2025. Copia el código y aquí en adelante agrega este texto. Bien, ahora se ve así, vamos a probarlo después de agregar otros detalles. Primero, iré a divisor y sobre divisor, la brecha será Co. Y en este texto de copyright, tenemos que agregar 20 como entre tamaño. Para ello, solo podemos hacer clic en este texto de copyright e ir a avanzar en adelantar esas cosas. El pading superior será, el acolchado inferior será de 20 así. Además si quieres amasar este texto en diferente color, puedes agregar ese color En el estilo, el color de fondo será vamos a hacerlo más oscuro así, así, pero voy a mantenerlo color de falla porque tenemos este divisor para dividir esas dos secciones. Ahora vamos a comprobar esto en acción. Simplemente creamos un titular y en el titular, usamos etiqueta dinámica y en la configuración de etiqueta dinámica por adelantado, agregamos antes parte como esto y tenemos que agregar este espacio aquí y después parte como nuestro STM y también en etiqueta dinámica, podemos hacer muchas más cosas Y ahora voy a publicar esta sección y vamos a comprobarlo en el diseño. Entonces iré al sitio web así y aquí tenemos el pie de página entonces si hago clic en esta Sana Clark, se abrirá en Nueva Ventana. Y si hago clic en nuestro sitio web de diseñador, también se abrirá en Nueva Ventana. En realidad, tenemos en realidad hay una compañía llamada diseñadores XYC, pero solo lo entiendo como contenido Dum Bien. Como podemos usar CSS para cambiar esos estilos, pero por ahora, mantengámoslo así. Y ahora nuestro footy está completo y creo que voy a dar click en Editar con Elementor Creo que nuestra versión de escritorio del sitio web está completamente desarrollada, y ahora podemos publicar esto y verificar la vista real. Doy click en publicar y ahora hago clic en este ojo para previsualizar. Bien. Ahora, veamos, aquí vamos. Contamos con un sitio web completamente funcional. Podemos agregar más ESTA para más adelante y aquí tenemos tema. Estos antecedentes deben abarcar toda la sección. Vamos a arreglarlo. Haga clic aquí y un estilo, se cubrirá el tamaño de la pantalla. Debe estar cubierto. Sí, así. Entonces. Ahora da click en publicar y será automáticamente repas Bien, aquí tenemos el encabezado. Podemos agregar animaciones más tarde, y ahora se ve bien. Entonces aquí tenemos la espuma y aquí tenemos el pie de página. Bien, se ve bastante bien. 25. Configuración del correo electrónico: Todos, agreguemos funcionalidad a este formulario. Entonces en este formulario, lo que tenemos que hacer es si nuestro cliente o visitante llenó este formulario, debemos obtener esos datos a nuestro buzón de correo electrónico. Entonces con elemento pro, hay dos formas en las que podemos obtener esos correos electrónicos o esos datos de contacto El primero es que podemos obtenerlo a través de elemento o envío de formulario. Si vamos a esta acción después de enviar, lo que significa que si después de que alguien haga clic en este formulario de solicitud y complete el campo requerido, podemos recopilar el envío y como podemos obtener esos datos vía correo electrónico. Entonces primero, hablemos de la presentación por cobrar. Para ello, voy al dashboard de Wordpress, y en el dashboard de Wordpress, en elemento, podemos ver este envío. Simplemente estás haciendo clic en él, y actualmente no tenemos ningún envío. Entonces probemos este formulario y veamos qué tipo de detalles vamos a obtener. Entonces para hacer eso, voy a la página de formulario y en elemento de Editor, simplemente hago clic en este icono de lápiz y vamos a configurar todos esos elementos. Aquí, solo agregaré envío por cobrar, lo que significa que obtendremos L detalles a esta sección de envío. Luego en el envío por recolección, podemos agregar qué tipo de datos necesitamos recibir. En metadatos, podemos obtener la IP del usuario y el agente de usuario, lo que significa que cuando el visitante complete este formulario y haga clic en Enviar solicitud, podemos obtener la dirección IP de la persona y otros detalles como qué tipo de navegador está usando y cosas así. Entonces tenemos ajuste de pasos. En realidad, no necesitamos la configuración de pasos para este formulario porque solo tenemos un formulario de página única y en opciones adicionales para la validación del formulario, configurarlo como predeterminado del navegador, que significa que si alguien no rellena los formularios requeridos, esa persona recibirá un mensaje. Y en mensaje personalizado, si lo hago encendido, podemos cambiar estos mensajes. Cuando alguien envía solicitudes con éxito, y verá que tu envío fue exitoso, pero hacemos que esto sea más humanizado y fácil de usar. Simplemente podemos agregar algo como que su solicitud haya sido enviada con éxito. Entonces aquí, podemos decir, Hannah, nos pondremos en contacto contigo en breve. Entonces por error, podemos cambiar esos mensajes, también, pero no voy a cambiar ninguno de así que actualmente, guardamos esta página como borrador. Pero para probar esto, hagamos que esta página se publique. Y de esa manera, podemos consultar el sitio web real en la portada así, y luego iré a la sección del formulario, y aquí ingresaré mis datos. Bien, solo llena el ahora voy a dar click en este botón de enviar solicitud y veamos qué va a pasar. Bien, ahora tenemos este mensaje de éxito, y ahora vamos a las presentaciones, y en las presentaciones, voy a reprimir la página Bien, aquí tenemos los emas que pruebo. En realidad, lo pruebo dos veces, así que vamos a revisar la primera. Así que solo hago clic en el botón de ver. Y aquí vamos. Ahora tenemos los detalles, y se pueden ver las piezas de formulario que obtuvimos y aquí tenemos campo de llamada de prueba o CB y se siente como cavar. Entonces este es el campo STML que agregamos, así que simplemente podemos ignorarlo, y sobre información adicional, podemos ver la IP del usuario y el agente de usuario así Entonces, cuando alguien llene este formulario y envíe solicitudes a este coach de negocios, la Hanna obtendrá mucha información en esta página de envío. También, como dije antes, podemos esta información en correo electrónico ese correo electrónico aterrizará en nuestro buzón de correo electrónico. Tratemos de hacer eso también. Para hacerlo, haré clic en este ícono más después de enviar y configurar el correo electrónico. Además, si hago clic en este ícono más y reviso la lista aquí, podemos hacer muchas cosas podemos simplemente configurar Milam, obtener respuesta y un pop up y un convertirlo y hacer muchas más cosas También hay un campo llamado Correo electrónico también, lo que significa cliente o si los visitantes nos envían un correo electrónico, podemos enviar correo electrónico a esa persona porque esa persona en su correo electrónico en este buzón de correo electrónico. Entonces, usando el correo electrónico también, podemos enviar correo electrónico al correo electrónico que se adhiera. Entonces si destomo este correo electrónico y veo aquí, aquí, solo tenemos esta pestaña de correo electrónico, pero cuando agregamos correo electrónico a aquí, tenemos opción de agregar la segunda imagen Ahora vamos a crear una cuenta de correo electrónico y hacer que los correos funcionen. Para ello, iré a Spanel de mi alojamiento web y tiene características de cuenta de correos electrónicos, así me desplazaré hacia abajo o puedo buscar aquí correo electrónico aquí tenemos cuenta de correo electrónico No obstante, si buscamos hacia abajo, podemos ver la sección de correo electrónico. En la sección de correo electrónico, tenemos las cuentas de correo electrónico. Simplemente hago clic en y aquí podemos crear nuevo correo electrónico. Haré clic en este botón Crear. Después de eso, tengo que seleccionar el dominio. Entonces seleccionaré este dominio, y aquí está el nuestro dominio , hnadt diseño de sitio web personalizado .us Simplemente lo selecciono, y aquí tenemos que añadir el nombre de usuario. Entonces voy a crear dos correos electrónicos, uno para destinatario, para que ese correo electrónico lo usemos para enviar correos desde nuestro sitio web. Y el segundo correo electrónico es el correo del receptor. Por lo que el correo electrónico del receptor recibirá el correo electrónico cuando enviemos correos electrónicos a través de nuestro sitio web. Bien, para nombre de usuario el correo electrónico del receptor será hola en hana punto diseño de sitio web personalizado. Entonces esta parte será la URL de tu sitio web, y aquí podemos agregar una contraseña. Podemos generar una contraseña como esta o puedes agregar contraseña personalizada. A asegúrese de escribir esto en alguna parte o asegúrese de recordar esta contraseña porque necesita esta contraseña para iniciar sesión en su cuenta de correo electrónico. Entonces solo voy a crear una contraseña. Bien, solo creo una contraseña y luego puedo hacer clic en este botón Crear, y cuando hago clic en el botón Crear, se crea el correo electrónico. Aquí está el correo electrónico. Y aquí puedo dar clic en este correo electrónico de verificación y marcar la casilla de correo electrónico. que puedas configurar este correo electrónico con tu Gmail o tu cliente de correo electrónico. Entonces de esa manera, recibes el correo electrónico a tu casilla de correo electrónico sin iniciar sesión en el buzón de correo así. Entonces aquí tenemos información sobre nuestro correo electrónico, y utilizaremos esta información para configurar funcionalidad de correo electrónico de nuestro sitio web y configurar SMTP Bien. Ahora voy a ver los correos electrónicos menores. Entonces para hacer eso, voy a hacer clic en Crear y aquí, elegir el dominio, y luego agregaré el nombre de correo electrónico como en cuatro. Entonces este nombre de correo electrónico será un nombre así o mi nombre. Simplemente no agregues este espacio, crea el email así y para este, solo agregaré info info en hanadt custom website design US Bien, entonces lo haré aquí en la contraseña así, luego otra vez, voy a dar clic en Crear. Bien, ahora tenemos Hola email e info en hana custom website design us email. Ahora lo que podemos hacer es ir en el Elementoditor y en el editor Elementor Podemos configurar esta pestaña de correo electrónico. Entonces aquí tenemos que agregar el correo electrónico. Entonces al correo electrónico será hola athnadt diseño de sitio web personalizado US dos será el receptor de correo electrónico y aquí podemos agregar el asunto Aquí, voy a cambiar este tema como nueva consulta de cliente para Hannah Clark sitio web como este. Y en los mensajes, agregaré Earl Fields. Con este código corto de Earl fields, obtendremos los detalles del campo a nuestro buzón de correo electrónico, y luego aquí tenemos que agregar de email from email será Senders email, así que aquí lo creamos como info Aquí está el correo electrónico del remitente. Voy a solo aquí y solo copiaré la dirección de correo electrónico y seamos sinceros así y aquí podemos seleccionar la respuesta al correo electrónico. Así que aquí la respuesta a debe ser el campo de correo electrónico. Campo de correo electrónico de este formulario porque cuando hacemos clic en el botón de respuesta, debemos responder a este visitante que nos envía un correo electrónico. Bien. Luego, para los meta datos, podemos agregar toda esa información. Entonces podemos agregar URL de página de tiempo de día, no necesitamos URL de página, agente de usuario fm de IP, crédito. Y aquí solo agregamos los metadatos de Earl y configuramos el envío como HTML y al correo electrónico, configuremos también el correo electrónico. Entonces como le dije antes, este correo electrónico será enviado al visitante que rellene este formulario. Entonces ese correo electrónico del visitante debe ser ese correo electrónico que ingrese aquí. Entonces, consigamos ese campo de correo electrónico. Entonces hago clic en este campo de formulario y en el correo electrónico, voy a Avanzar, y aquí tenemos ID de campo, shortcde Simplemente lo copio y en el correo electrónico a, solo voy a agregar al correo electrónico así. Entonces aquí tenemos que agregar el asunto y el mensaje. Bien, agreguemos asunto como gracias por comunicarse y en el cuadro de mensaje, no necesitamos los campos de Earl Tenemos que enviar mensaje de agradecimiento y hacerle saber al visitante que Hanna se pondrá en contacto con él o ella. Eliminaré esto y agregaré mensajes como, gracias por contactarte, tu solicitud ha sido recibida con éxito y Hanna está encantada de saber de ti Texto como este aquí, podemos agregar el nombre de la persona. Para ello, iré a campos de formulario y en sección de nombre completo, iré a Avanzar y copiar el código corto. Entonces ven aquí y y agrégalo así y el correo de from será info en, vamos a copiarlo desde aquí. El de correo electrónico será este solo cópielo y aquí estará el del correo electrónico y del nombre será Hannah Clark y la respuesta será Hola en hana punto diseño de sitio web personalizado, y no necesitamos copia al carbón, así que no necesitamos enviar ningún metadato. Entonces ahora tenemos el correo electrónico uno y el correo electrónico dos, así que publicaré esta página. Vamos a verlo en acción. Ahora iré al sitio web y reprimiré el sitio web, y aquí vamos al formulario de contacto y llenemos este formulario y veamos que los correos electrónicos están enviando o no Bien, aquí voy a añadir los detalles del formulario. Bien, ahora voy a hacer clic en Solicitud de consentimiento y veamos qué pasará. Tu solicitud se ha enviado con éxito el mensaje y veamos que realmente aterrizó en el buzón de correo electrónico. Entonces aquí tenemos ese correo electrónico y aquí tenemos una información. Entonces de esa manera, también podemos obtener los correos electrónicos y veamos el correo electrónico que agregó el visitante. En mi caso, este es ese correo electrónico, por lo que el visitante también debe recibir el correo electrónico. Aquí vamos en mi cuenta de correo electrónico. Recibimos el correo electrónico. Recibimos este correo así. No obstante, este correo electrónico está en una línea, por lo que podemos agregar línea de rotura para que esto sea mejor para hacerlo. Voy a ir aquí y en el correo electrónico aquí, voy a añadir solo etiqueta BR así y aquí también añadir la etiqueta BR y aquí sólo podemos añadir la etiqueta BR BR y aquí R así, entonces puedo publicar y ahora nuestro correo electrónico será break para las nuevas líneas. Ahora tenemos correo electrónico de trabajo en caso de que los correos de su sitio web no estén funcionando, le mostraré cómo solucionarlo configurando el enchufe SMTP 26. Resolución de problemas de SMTP: Hola a todos. Si tu formulario no está funcionando y no estás recibiendo los correos electrónicos, vamos a arreglarlo. Entonces para hacer eso primero vamos al panel de Worps y luego vamos a plugins y damos click en At Plugin Ahora, busquemos la llamada plugin SMTP. Simplemente busque SMTP y verá este correo WP SMTP por WPForms, haga clic en Instalar, haga clic en Simplemente voy a hacer clic en Gb al dashboard y vamos a configurarlo manualmente. Así que ahora podemos ver este enchufe SMTP de correo WP aquí. Y en este plugin, podemos configurar los datos SMTP SMTP significa protocolo simple de transferencia de correo. Así que hagámoslo primero en herramientas, puede tener función para enviar mensaje de prueba o correo electrónico de prueba. Simplemente puede agregar la dirección de correo electrónico que desea enviar el correo electrónico, luego hacer clic en SendMail hagámoslo Yo solo agrego el correo y hago clic en Enviar Correo y ojalá esto deba ser enviar el correo porque mi función de correo electrónico funciona correctamente, solo manda así. Y si no recibiste el correo electrónico, puedes ver aquí un mensaje. En cualquier lugar, vayamos a set ins y primero agreguemos el set in, luego intentemos enviar el correo electrónico. Bien, ahora aquí me desplazaré hacia abajo y aquí tengo que agregar el from email. Entonces digo la dirección de correo electrónico desde la que se envían los correos electrónicos. Entonces en mi caso, es info info en hana dot custom website design us and dig this force Fm email check box. Entonces el nombre del baile de graduación será Hannah Clark. Y además, si queremos, podemos fcePom nombre, lo que significa que este nombre será nombre principal o el nombre de fat hana dot diseños personalizados dirección de correo electrónico Bien, solo voy a hacerlo apagado y la ruta de retorno será off y on mailer, voy a tomar este otro SMTP En otros SMTP, tenemos difíciles de configurar. Entonces hagámoslo. Para hacerlo, voy a nuestro panel C, y aquí está nuestra dirección de correo electrónico, desde la dirección de correo electrónico. Así que ahora hago clic en este botón de conectar Dispositivos. En los dispositivos de conexión, podemos conocer esta configuración de administración de clientes de correo. Bien. Ahora vamos con uno por uno. Primero, tenemos que configurar el host SMTP. Así que vamos aquí, y tenemos que agregar este servidor saliente como el host SMTP Entonces solo copia, ven aquí y pegarlo así. Y el cifrado será vamos a ver el cifrado. Es SSL TLS, hagamos TLS. No, hagamos SSL. Bien, entonces pod SMTP vamos a averiguar el pod SMTP. Es 465. Ya se agregó. Vamos a agregar esa olla y aquí tenemos SM TPA usa un nombre y contraseña Entonces el SMTP usa un nombre es la dirección de correo electrónico del correo electrónico. Simplemente ponlo y aquí tienes que agregar la contraseña que usaste para crear esta cuenta de correo electrónico. Y ya te dije que la contraseña es muy importante porque necesitas esa contraseña para acceder a tu buzón de correo electrónico. Entonces solo lo voy a agregar así. Entonces aquí Ilicon guardar configuración. Entonces, si este SSL no funciona, solo selecciona el TLS y utilizo SSL Bien, guarda la configuración y vamos a las herramientas. Después envía el correo electrónico de muestra. Entonces cambio el valor predeterminado, correo electrónico SMTP, configurado en así que envía el correo electrónico y mira qué va a pasar Bien, es un éxito. Entonces aquí vamos, tenemos esos mensajes y vamos a nuestro buzón de correo electrónico, y aquí tenemos el correo electrónico. Prueba este método y ve que funciona uno. Entonces, si no está enviando, aquí se ve un mensaje de error. Puedes usar AIGPD para averiguar el problema o simplemente puedes buscarlo en Google y solucionarlo Bien, ahora no necesitas hacer nada, solo configuras el SMTP y de acuerdo a tus datos de SMTV, este buzón debería funcionar Entonces la mía era una palabra lista. No obstante, volvamos a probarlo, así que voy a llenar esos datos. Ahora solo haz clic en onsen request y veamos qué pasará Bien, recibimos el mensaje y veamos aquí. Aquí, recibimos el mensaje de agradecimiento como este, y así sucesivamente aquí, recibimos el nuevo formulario de consulta del cliente Mensaje del sitio web Hannah Clark. Bien. 27. Cambiar los colores del paseo por alto: Uno ahora bueno para ir y ahora tenemos que arreglar los problemas de respuesta y otros problemas de UIS En primer lugar, cuando pasamos el cursor sobre, los botones obtienen este color naranja y parece que es un poco poco poco profesional y no coincide con el tema del coach de negocios y no coincide con la paleta de colores Vamos a arreglarlo. Para arreglarlo, voy a dar click en Editar con el Elemento y mi plan es cursor solo para que aparezca en el mismo color Hazlo, tenemos que ir uno por uno y arreglarlos así, click en el botón e ir a Estyle en eTyleOh Hagamos este color a este color, el mismo color y el color del texto será blanco así. Ahora puedo dar clic y dar clic en Copiar, y luego en este botón, solo escurrelo y da clic en Pastyle Pero cuando sí cambio el diseño, entonces presionaré Command Is o Control en Windows y solo vamos a cambiarlo haciendo clic aquí y vamos a Estilo en Ho, cambiaré este blanco y cambiaremos este color primario así. Entonces aquí, basta con hacer clic en el formulario y en Buttontyle en realidad tyle tenemos que ir a botón y el color de fondo será este y el color del texto será de color blanco No necesitamos preocuparnos el botón anterior porque no tenemos ninguno, y luego tenemos que arreglarlo aquí, solo haz clic aquí y un estilo, puedo cambiarlo a color hmary y así Ahora se ve tan profesional que antes. Ahora hago clic en CF Bliz y tenemos que arreglar el mismo problema en el encabezado para hacer eso hago clic en este encabezado para editar una parte, y aquí vamos, pulsamos sobre ella, y luego en Es tile en Nova, cambio el color al color predeterminado así Ahora publícalo y luego vamos a dar click aquí y dar click en Pie. Ir a la sección Futa. En FutaSection, tenemos que hacer la misma edición para cambiar el ícono de redes sociales Bien, aquí, da clic aquí y en el icono de Estyle edge over, cámbialo a este color así Después haga clic en publicar y bueno en el siguiente video, arreglemos el problema responsive. 28. Cómo corregir la capacidad de respuesta de la tableta: Hola a todos. Ahora tenemos que sumar la capacidad de respuesta de este sitio web Este sitio web no responde en la tableta o en el móvil. Entonces empecemos a hacer eso. Primero, voy a la versión de escritorio, y comencemos con encabezado así que click en este encabezado para editar Bien, ahora estoy en encabezado, así que ahora voy a dar click en esta tablet versión de Portret, y aquí, primero tenemos que agregar espaciado en la izquierda y derecha Así que eso será pad in. Así que hago clic en Editar contenedor y en Avance, se puede ver aquí ahora vemos la tableta Portrat y aquí está el escritorio Aquí está el móvil. Entonces en tableta, desvincularé este valor Entonces agreguemos 20. No, no, no para top top será cero, derecha 20. L para que me guste esto. Y luego como siguiente paso, el menú no se muestra correctamente. Se muestra como menú de hamburguesas, pero necesitamos esto como un menú normal porque hay un espacio para agregarlo como menú horizontal normal Entonces para arreglarlo, solo podemos cambiar este break pronto mobile. Y de esa manera, el menú aparecerá así. Entonces podemos ir a Eyle y ddt estas cosas como relleno vertical Hagámoslo seis y vamos a reducir el espacio I entre 20 y ahora se verá así en la tableta y puedo dar click en este contenedor, y aquí agrego el hueco de columna como 36. Hagámoslo como 25 Entonces otra vez, vaya al menú y agregue el espacio entre 25. Bien, ahora se ve mucho mejor y la cabeza en la versión tablet se ve bien. Y ahora vamos a ir a esta página principal para hacer eso, primero, voy a publicar esto y luego dar clic en Editar página. Bien, ahora estoy en nuestra página de inicio, así que voy a dar click en esta tableta Porto y aquí tengo que ir a Avanzar y agregar relleno como derecho para vaciar y el izquierdo para vaciar así. A aquí voy a hacer clic en este contenedor, y en el diseño, podemos agregar justificar el centro de contenido. Yo sólo quiero hacer esto al centro. Vamos a probarlo. Haga clic aquí y en Avance debería estar algunos establecidos aquí. Averiguemos que se instaló. Bien, aquí lo tenemos alinea NO versión tablet, vamos a hacer que se alinee como centro así Ahora se ajusta correctamente y no necesitamos cambiar el tamaño de fuente, pero si queremos, también podemos cambiar el tamaño de fuente. Para ello, hagamos clic aquí para editar el encabezado a tiempo para Apple haga clic aquí y luego haga clic en Fuentes globales Man. Antes de hacer eso, solo podemos ajustar esta talla y averiguar la mejor talla. Por lo que 38 será el mejor tamaño para este encabezado. ¿Y qué hay de aquí? Vamos a probarlo. Hagámoslo como 22 va a ser bueno para subencabezado, y ¿y aquí qué pasa? El tamaño del párrafo estará bien. Entonces ahora, de nuevo, hago clic en este titular y cambio la tipografía a encabezado y también cambio esta tipografía a subencabezado Después haga clic en este ícono de fuente Managed Global y en la configuración de fuente global, solo selecciono la versión portrat y haga clic en Encabezado y aquí podemos ver el ícono de la tableta Hagámoslo 38 así. Y aquí tenemos que hacer esto a 220 así y el tamaño del botón será de aproximadamente 18? Sí, 18 va a ser bueno. Y ahora el tamaño del enlace del menú está bien. Ahora hago clic en Guardar cambios y luego clic en volver a Editor para volver al editor. Bien, ahora estoy en la página principal y nuestra sección de héroes se ve así, y voy a dar click aquí. Y si queremos, podemos disminuir el relleno de este botón. Entonces hagámoslo como top twoelve y seremos hagámoslo como top 15, derecho será 15, abajo 15 Izquierda 15. Así. Parece que es demasiado pequeño. ¿Y qué pasa con 20, 15 a 20? No es bueno 20 a 20. Bien. Esto mucho mejor, tenemos que hacer lo mismo aquí, pero aquí se ve bien. Y ahora no necesitamos hacer nada en esta sección, así que voy a dar click en este contenedor principal, y de antemano, podemos agregar la prueba 20 y la prueba izquierda 20, y se ajustará en consecuencia. Y en la sección anterior, solo da clic aquí vamos a agregar relleno Nas 20 y 20 así. Y nuevamente, voy a dar click aquí y ver que se alinea. Hagámoslo centro y se verá así. En realidad, hagamos esto como una sola columna. Entonces actualmente tenemos dos columnas, así que hagámoslo como una sola columna. Para ello, hago clic en este contenedor. En el diseño, cambiemos esta dirección a columna así y ahora se verá así. Ahora voy a dar click en este contenedor secundario y este contenedor será porcentaje y será 100% así. Ahora se ve bastante bien. Ahora se verá así. Podemos hacer lo mismo aquí, pero la sección de héroes ya se ve mejor. Ahora tenemos esta sección. Primero tenemos que sumar los fadins izquierdo y derecho 20, izquierda también serán Bien. Entonces tenemos esta grilla. Así que da clic en la cuadrícula, primero pulsamos en la cuadrícula, y podemos ir al diseño y en fila de cuadrícula y columnas, podemos hacerla como rejilla de dos columnas y las filas serán tres así. Bien, ahora es mucho mejor, tenemos que cambiar este botón, relleno como 2020 a 2020. Bien. Ahora solo arreglamos la sección de servicios dos, y ahora tenemos esta sección de historia de éxito. Así que haz clic aquí y agrega el relleno. Entonces agreguemos hagamos clic en esta calidad de enlace juntos para eliminar el desvanecimiento superior e inferior Ahora a la derecha prueba dos y la prueba izquierda a 20. Bien. Ahora aquí, si queremos, podemos cambiar el recuento de elementos para mostrar así que solo podemos cambiar vista previa de altura como dos y luego dos show base anterior como este Entonces pasemos a la siguiente sección y aquí así que aquí agregamos la altura mínima. Si queremos, podemos eliminar la altura mínima así que pongamos la altura mínima como cero, y luego podemos agregar el desvanecimiento superior como 30 y el desvanecimiento inferior será 30 así Es mucho mejor que antes. Y luego tenemos que arreglar aquí, así voy a dar click en el contenedor principal, y aquí voy a quitar la altura mínima a como cero. A partir de aquí, podemos hacer esto como columna para hacerlo en las dos filas y avanzar, agreguemos la derecha en 20, izquierda como 220. Después haga clic en el contenedor secundario, el contenedor dentro de este contenedor y cambie a porcentaje y hágalo como 100%. Así, podemos hacer lo mismo aquí porcentaje 100%, así. Bien. Ahora se ve bastante bien. Además, tenemos que añadir la almohadilla en la parte superior e inferior. Así que vamos en la parte superior como 30 y la parte inferior como 30 así. Bien, ahora solo arreglamos ese problema también y ahora tenemos que arreglar la sección a. Así que haz clic en Publicar. Bien, ahora haz clic en Con footer para editar la sección de pie de página. Entonces aquí, se ve bien. Entonces hago clic en contenedor principal y mantengamos este relleno superior como 30, y el derecho será 20, abajo será 30, y el derecho será izquierdo será 20 así. Entonces no necesitamos hacer nada. Yo ajusto en consecuencia. En realidad aquí, tenemos que cambiar el color. Entonces en nuestro cambio colores primarios como este. Bien. Ahora aquí no necesitamos hacer nada, y en la sección de derechos de autor se ve bien. Así que ahora hago clic en Publicar. Y ahora vamos a ir a la página principal, simplemente haga clic así y me acreditarán a la página principal. Bien. Ahora aquí, nuestra versión para tablet es completamente funcional y puedes consultar el diseño de este sitio web en la herramienta Responsive checker y averiguarlo en detalle. Solo voy a la herramienta de prueba Responsive y solo copie la URL del sitio web y la página la URL aquí. Haga clic en C check, y aquí podemos ver la vista previa en él escritorio, y podemos averiguar su tamaño con diferentes versiones como esta. Y podemos probar la versión tablet así y en tablet, se verá como 29. Cómo corregir la capacidad de respuesta móvil: Hola a todos. Ahora arreglemos la capacidad de respuesta móvil de este sitio web Si hago clic en Mobile Portre, se verá así, y hagamos esto mejor Primero, comencemos con encabezado, así hago clic en encabezado. Bien. Ahora aquí tenemos este encabezado que usamos para mostrar el menú principal de nuestro sitio web en versión móvil y tablet. Pero en el móvil, debería tener este tipo de menú Hamburguesa, pero con este diseño, no podemos hacer eso Ocultaremos este diseño en uno móvil y creativo. Para hacer eso primero, duplicaré este menú y doy click en este primer menú y voy a Avance avanzado, tendremos sección responsive en sección responsive, podemos ocultarlo en móvil. Esta sección ya no aparecerá en el móvil y ahora tenemos la segunda sección que nos bligate iré a Advance y en responsive, vamos a ocultarlo en escritorio y tablet y mostrarlo en el Ahora bien, si vamos a escritorio, el segundo está desaparecido así. Entonces aquí, voy a dar click en el contenedor y en disposición, tiene dirección como fila. Y en este botón, intentemos hacer clic y eliminar el botón. Después haga clic en este contenedor, y hagamos este contenedor con 60, 60 a 40. Hagámoslo como 30, 20, diez será el mejor tamaño. A lo mejor vamos a hacer 20, 20 a 20, y de esa manera, podemos aumentar el tamaño de este menú. Ahora hago clic en este menú de WordPress y tenemos que crear nuevos Mnutud a esta sección porque solo eliminamos este botón de let's contact del menú del móvil Lo que podemos hacer es que podemos hacer click aquí. Menú es pantalla y va a abrir los hombres, entonces aquí voy a crear un nuevo menú. En el nombre del menú, agreguemos menú móvil y hagamos clic en crear Meno luego tenemos que agregar los elementos del menú. Primero agreguemos el hogar. Entonces vayamos aquí y vayamos a las tabletas entonces tenemos que agregar sobre y servicio luego testimonios En realidad, podemos ir a nuestro diseño Figma. Bien, en nuestro diseño Pigma, podemos copiar esos textos, primero copiar sobre aquí vamos y en enlace personalizado en aproximadamente un hashtag add por ahora, luego tenemos servicios, clic en él y agrega servicios como este, agrega hash tag a aquí Agregar al Menú, luego copia de los Testimonios se pega aquí en la etiqueta hash a la URL Después también agregue let's contact Menú a este menú y agregue hashtag y haga clic en agregar a Menú. Versión de escritorio, agregamos este botón de let's contact como botón separado. Entonces en este caso, tenemos que agregarlo al menú del móvil y dar clic en Guardar Menú. Y aquí voy a dar click en Publicar y luego vamos a la versión móvil, y ahora voy a reprimir esta página nuevamente Bien, ahora vamos a la sección de encabezado. Solo tienes que ir al administrador de WP y aquí en las plantillas sobre ellos Builder, da clic en este encabezado para abrirlo y haz clic en este botón de edición para editar el contenido. Bien, ahora aquí voy a la versión móvil y doy click en el menú y aquí lo cambio a menú móvil. Ahora si revisamos el menú, lo tendremos así, pero podemos arreglarlo para arreglarlo. Cava el ancho completo así, y ahora si lo reviso, se verá así y tiene todos los artículos. Ahora lo que puedo hacer es ir a Etles OneTils. La tipografía será menu olink y el color del texto será este color Y aquí tenemos que ir a desplegable y tenemos que ajustar la configuración desplegable. Entonces aquí el color de prueba será este color y el color de fondo, cambiemos el color de fondo para que me guste esto y hagamos el color de prueba color blanco, y ahora se verá así. Entonces en edge over, mantengamos el valor predeterminado porque en el móvil, el edgeo no es tan importante y no necesitamos border es ¿Y qué pasa con el pading horizontal? Hagámoslo como 20 así, luego pading vertical pongámoslo así y podemos ajustar el dist ahora hagamos distancia así, y ahora hagámosla como dos, así Y ahora vamos al botón Toggle. En Toggle, podemos cambiar el color. Cambiemos realmente el color a color blanco, y el color de fondo será este color primario, y vamos a aumentar su tamaño a 35, 35 será bueno. Y ahora se verá así, y no necesitamos ningún radio de agua. Hagámoslo como el radio del agua como así y sea mucho mejor, y no necesitamos preocuparnos mucho por hora móvil y nuestro menú móvil esté terminado. Ahora puedo dar click en Publicar y vamos a nuestro sitio web, ir al sitio web o podemos comprobarlo desde herramienta Responsive Test y vamos a ir a aquí está el móvil. Aquí está el móvil y vamos a comprobarlo en el móvil, así se verá así, y ahora tenemos que ajustar la sección de héroes para hacerlo. Hago clic en la página de inicio aquí para redirigir a la página principal, luego hago clic en tablero móvil. Aquí esto está demasiado cerca. Así que arréglalo, hago clic en el contenedor principal y en Advance agrego top agregando como vamos como 60 no, solo necesito agregarlo a la parte superior. Agreguemos arriba como 60 y la derecha será 20 y abajo será cero y la izquierda será 220 así. Ahora es mucho mejor. Si queremos, podemos disminuir el tamaño de fuente, pincha aquí y un empate vamos a la tipografía e intentemos cambiarlo a Hagamos que sea 28 es demasiado pequeño Se verá bien. Vamos a llegar a 32 y 34, y el resto de la fuente se mantendrá igual. Haga clic aquí. Da click en Administrar fuente global, luego en encabezado y configura el retrato móvil y hazlo 34 34 así y haz clic en Guardar cambios y voy a mantener el resto del tamaño de fuente como el así cuando lo cambiemos de aquí, su efecto en el diseño global. Por eso usamos las fuentes globales. Bien, ahora se verá mucho mejor y da clic aquí. Si queremos, podemos hacer estas fuentes de ancho completo. Entonces aquí podemos agregar stretch no stretch. Al adelantarse alinearse, úsalo estirar. Está trabajando con estará lleno wo, el se ve bien. Ahora si queremos, podemos hacer este top y este botón de texto. Da click en la imagen y en Avance, da click en este pedido para empezar así. Ahora se verá así y es mucho mejor que antes. Y ahora en esta sección, solo podemos ir a maquetación y cambiar dos columnas así y aquí vamos a poner el roger pass 220 así y aquí, cambiemos esto entre tamaño. El hueco del título, hagámoslo hacer como. Ahora, haga clic derecho en copiar y haga clic derecho en pegar estilo, pegar estilo, pegar estilo como este. Entonces agreguemos un poco de espaciado. Hagámoslo como 30, 30 será mucho mejor. Entonces en el contenedor principal en avance, eso es en los fadins superiores 20, derecha será 220, abajo será 20, izquierda será Se verá así. Entonces aquí tenemos esta imagen y el texto luciendo bien y aquí se ve bien y el móvil solo puede hacer clic en él y vamos a agregar algo de espaciado. Agreguemos espaciado as y el espacio de columna, hagamos que sea un espacio de columna como 15, así. Ahora se verá así y aquí no hace falta que haga nada, y este botón se ve bien. Y aquí tenemos una vista previa de una diapositiva, y aquí no necesitamos hacer nada. Todo se ve bien. Aquí, hagámoslo encabezado. Entonces sí, debería ser encabezado. De esa manera, se ajustará este encabezado. El tipograma debe establecerse como encabezado, y aquí se ve bien Si queremos, podemos quitar algún relleno derecho e izquierdo. Así que vamos a mí. Vamos a poner la ruta superior 30, derecha serán dos pozos, y la parte inferior será 30, izquierda estará bien así. De esa manera, tendremos un poco más de espaciado. Bien. Ahora, la página de inicio se ve bien. Y si quieres, podemos hacer que esos textos se centren así. Depende de ti. Lo voy a mantener en el lado izquierdo de esa manera, será fácilmente legible. Entonces ahora voy a dar clic en Publicar, y después tengo que ir a la sección Pie de página. Da click en Pie de Página y en Pie de Página, no tenemos que hacer muchas cosas, así que simplemente haz click en el contenedor principal, y en el contenedor principal, hagamos OGapas 30, 30 Qué 60. Sí, 60 va a ser mucho mejor, y ahora se verá así. Entonces la sección de derechos de autor se ve bien. Entonces ahora publicaremos esos cambios, y la capacidad de respuesta de nuestro sitio web está completamente diseñada, y en la siguiente lección, tendremos que agregar la animación a este sitio web, y tenemos que agregar funcionalidad a cada uno de cada botón de este sitio web Entonces hagámoslo en la siguiente lección. 30. Vinculación de secciones del sitio web: Hola a todos. Ahora tenemos que vincular esas secciones, lo que significa que cuando hago clic en esta página Acerca de, esto debería ser redireccionado a esta o señalar a esta sección sobre Entonces hagámoslo. Para hacerlo, tenemos que asignar IDs a todas y cada una de las secciones. Para ello, comencemos desde casa. Entonces hago clic en contenedor principal en el hogar y luego voy a Avance. En Advance, agregaré CSS ID de esta manera. Entonces vayamos a la siguiente sesión. La siguiente sección es esta, da clic en ella, y aquí esta será una sesión. Solo voy a agregar ID de CSS sobre. Entonces aquí tenemos sesión de servicio. Voy a agregar baile y voy aquí y agrego Ids Vss. Si tienes dos palabras mis servicios, puedes y Mash servicios como este. En mi caso, son solo servicios y la siguiente sección es testimonio vamos a copiar este texto de aquí y luego dar clic en el contenedor principal y agregar CSS ID como testimonial y agregar siempre en el mismo formato, lo que significa que si agrega mayúscula como primera letra en el hogar en testimonial agregando mayúscula como primera Mantener la consistencia y aquí tenemos contactos. Iré a Avance y agregará esto como contacto. Bien, ahora publico esto, y ahora tenemos que ir a la sección de menú de nuestra página web para hacer eso, solo voy a abrir esta página web en Ventana Nueva, y aquí voy a ir a menús sobre apariencia hombres y aquí tenemos el menú móvil. Comencemos esto desde el menú principal, seleccionemos el menú principal y hagamos clic en este botón Seleccionar. Y la página principal está enlazada a la página principal, y luego tenemos esta página sobre. En una página, tenemos que agregar acerca de ID. Así que vamos a hacer clic en el contenedor principal, y en el contenedor principal, aquí tenemos CSS ID, copiarlo y agregarlo así. Entonces cuando añadimos el ID, debería comenzar con hashtag. Cuando lo agregamos el hizo con la URL de la página de inicio así porque esta sección está dentro de la página principal. Siempre agregue este hashtag acerca de después de la URL de la página de inicio. Voy a copiar la URL de la página de inicio y vamos a ir a servicios y en servicios, hagamos lo mismo la URL del sitio web, luego hashtag, luego vaya aquí, haga clic en aquí. En CSS ID, agrégalo así, entonces tenemos testimonial, ve aquí Seleccionemos el contenedor principal y de antemano copiemos este texto y péguelo así. En realidad, tenemos que copiar esta sección así, luego pegar así, entonces ahora podemos hacer clic en C savenu y mantengamos esto en acción Iré aquí y abriré el sitio web en Nueva Ventana y veamos ahora hago clic cuando hago clic sobre, redirecciona a la sección A y cuando Nlck Css, es redirigir a la sección de servicios Cuando haga clic en testimonial, se redirigirá al testimonial Esta es la forma de vincular nuestro sitio web porque este es el sitio web de una sola página. Bien, ahora tenemos que agregar la misma acción a este contacto, así que para ello, tenemos que sumar esos datos a esto. Vamos a contactar. Pero para hacer eso primero, me desplazaré hacia abajo aquí y daré clic aquí, luego copiaré esto y ahora lo que puedo hacer es dar clic aquí e ir a encabezado. En cabecera, aquí tenemos el menú principal y aquí tenemos el botón. En este enlace de botón, ex al principio copia la URL del sitio web con etiqueta hash y luego agrega la opción ID y enlace, no marque abrir ninguna ventana ni ninguna otra luego haga clic en Publicar. No es necesario verlo, simplemente haga clic en Publicar para publicarlo y luego reprimir la página Ahora da click en su botón de Contacto y se redirigirá así. Este es el camino a ahora, entonces tenemos que agregar acción a este botón de héroe. Así que vayamos a la página principal para editar la página principal y aquí, haga clic en este botón y aquí pasemos la URL y después del hashtag, tenemos que agregar el contacto ya que cuando hacemos clic en este botón, debería volver a erigirlo a este formulario de contacto Ese es el CTA o llamado a acción en aquí ya agregamos el Facebook y LinkedIn y otro perfil social aquí tenemos que agregar la misma URL como esta Agreguemos sí. Entonces ahora está terminado, ahora lo publico y luego si lo reviso en acción, entonces descansa el sitio web y da click en este trabajo conmigo y se relacionará con esta sección. Ahora lo que tenemos que hacer es ir a Menú y seleccionar el Menú Pie de Página. Después tenemos que agregar el mismo enlace del menú al Pie de Página. Aquí está sobre y servicios. Verifiquemos que la identificación de los servicios esté bien. Los servicios lo agregas, esta palabra debe ser exactamente la misma que la palabra link. Si es diferente, el proceso de enlace no va a funcionar, entonces contacta aquí y término y condición y cinco política, tenemos que generar esas dos páginas. Así que ahora hagamos clic en el menú Guardar y luego vayamos al menú móvil y hagamos lo mismo. Bien. Ahora aquí tenemos sobre justamente ese real que podemos agregar desde aquí. Ahora podemos dt en la sección de servicios así, entonces aquí sobre estos servicios. Entonces tenemos testimonio. Agreguemos la sección de Testimonios. Así, entonces conectemos aquí, tenemos que agregarlo actual, y testimonial está bien. Este está bien. Los servicios están bien. ¿Qué pasa está bien? El bueno. Ahora hago clic en Csavmu y también se completa el menú móvil. Ahora podemos comprobarlo en acción. Si hago clic en Conservas se debe alimentar a los servicios. Ahora el proceso lingn es Elgod y como el siguiente y último paso, tenemos que agregar término y condición y estadísticas de política pri C lo hacen en la siguiente lección 31. Cómo generar páginas de Términos y condiciones y Política de privacidad: Hola a todos. Ahora es el momento de generar política de privacidad y términos y condiciones. Para ello, podemos realizar búsquedas en el generador de políticas de privacidad de Google, y obtendremos este tipo de generadores de políticas de privacidad gratuitos, basta con hacer click sobre él, y aquí tenemos que pasar por un formulario sencillo. Entonces primero, hagámoslo paso a paso. Entonces primero, hago clic en esto. ¿Se utilizará su política de privacidad? Será sitio web, después hago clic en Continuar y generar política de privacidad. Y aquí tengo que agregar sitio web UR vamos a copiar la URL del sitio web desde aquí. Entonces tenemos que agregar el nombre del sitio web. Agreguemos el nombre del sitio web, copiemos el nombre del sitio web y lo agreguemos así. Entonces tenemos que ingresar al tipo, así voy a agregar soy un individuo, luego tenemos que ingresar al país. Entonces tenemos que ingresar al Estado y seleccionar tu país. En este caso, sólo voy a seleccionar Estados Unidos y dar clic en siguiente. Entonces aquí solo lee esto. Qué tipo de información personal recopila de los usuarios. En nuestro caso, tenemos un formulario. En ese formulario, hemos seleccionado dirección de correo electrónico, nombre y apellido, número de teléfono y sin perfil en redes sociales. Solo recolectamos esas cosas, luego las seleccionamos, damos clic en el siguiente paso. Si tienes más campos, solo puedes escoger estos otros dos, luego hago clic en el siguiente paso. Aquí tenemos otra pregunta llamada ¿cómo pueden contactarte los usuarios para cualquier duda respecto a tu política de privacidad? Aquí puedes agregar por correo electrónico, visitando o cualquier cosa. En este caso, agregaré por correo electrónico, luego puedo agregar la dirección de correo electrónico. La dirección de correo electrónico será hello at hana dot custom website design us then click on next step, y aquí tenemos dos opciones. Para la primera opción, tenemos a la premium, pero no la necesitamos, así que solo tienes que hacer clic en No, no quiero política de privacidad profesional, solo haz clic en el siguiente paso y aquí tengo que agregar la dirección de correo electrónico. Solo agrego la dirección de correo electrónico, después hago clic en esta generar una. Bien, acabamos de generar la página de Política de Privacidad, así que simplemente puedo dar click en copiar este portapapeles de dos O también recibirás esta copia de esto en tu dirección de correo electrónico. Simplemente voy a hacer clic en Copiar al Portapapeles. Entonces vayamos al panel de control del sitio web y en la página haga clic en la página aquí agregue el título como política de privacidad. Después haga clic en Editar con elemento de. Y aquí hago clic en icono más, texto y cuadro de prensa dirección será dirección columna Y aquí, agreguemos margen de pase, uno, dos, 20. Bien. Después da click aquí y agregaré editor de texto así, luego haré click en este código y luego pasearé el código que generé usando este generador de políticas de privacidad. Y aquí, vamos a Etyle. Hagamos alineación a la izquierda y la tipografía será párrafo, el color será color del texto Como podemos agregar color de enlace. Agreguemos este color verde al color del enlace. Y podemos agregar espaciado entre párrafos. Hagámoslo como 15 y agradable, se verá así, y al final, agreguemos hagamos clic en el contenedor principal, y para el fondo agreguemos 120 así. Después haga clic en Publicar y acabamos de generar la página de política de privacidad y vamos a crear término y condición página dos. Para ello, solo puedo buscar en Google generador de términos y condiciones así, y aquí tenemos algunas sugerencias. Entonces vamos por generador de término y condición, sitio web, y aquí tenemos que agregar. ¿Dónde se utilizará su término y condición? Entonces es sitio web, luego haga clic en Continuar y generar término y condición, y aquí tenemos que agregar URL del sitio web, y aquí tenemos que agregar el nombre del sitio web y aquí ingrese el tipo como soy individual en su caso, si es negocio, en él como información comercial y otra información comercial. En mi conjetura, solo selecciono soy individual y aquí configuro el estado y haga clic en const state y aquí tenemos dudas, los usuarios de C crean cuentas ¿Los usuarios pueden crear y subir contenido? ¿Pueden los usuarios comprar bienes, ofrecen planes de suscripción? Hago como no así. Si algo de esto es cierto, hay que pagar este precio, pero la manera más fácil es usar la IA para generar página de términos y condiciones. Aquí podemos volver a agregar la dirección de correo electrónico. Acabo de agregar la dirección de correo electrónico así, luego haga clic en el siguiente paso y haga clic en siguiente. Aquí tenemos que consultar también ahora y dar clic en. Siguiente paso, después hago clic tendré que agregar la dirección de correo electrónico, agregar la dirección de correo electrónico, luego dar agregar la dirección de correo electrónico, clic en Congenerar, generé el término y las condiciones Ahora copio este texto de términos y condiciones y voy a la página web. Aquí, solo puedo hacer clic en en Nueva Página y en aquí, hacer clic en el conjunto de páginas en el título como término y condiciones. Entonces seguiré así la misma teoría que seguimos antes. Después en avance agregar margen arriba como uno, dos, 20 y el inferior como 12 así. Entonces iré aquí, solo copia esto al portapapeles y aquí recorta este y agregaré el texto edita así, luego ve al código y pégalo así Después un mosaico, hazlo tipografía y la URL del enlace estará en este color Bien. Ahora tenemos el término y la condición y las páginas de política de precios. Ahora publícalos. Bien, ahora vamos a ir a Menú en Futter Menú selecciónelo y haga clic en ocultar y aquí en término y condición y política del Priorato, solo marque desde aquí. O puedes dar click en Visor, y aquí verás el término y condición y PriocPolicy Entonces solo haz clic en agregar al hombre aquí tenemos enlace personalizado ganar artículos, eliminarlos. No los necesitamos. Y aquí vamos, ahora da clic en Guardar Menú y ahora vamos a ir a la página web y verla en acción. Bien. Ahora vamos a hacer clic en la política de privacidad, y aquí vamos. Simplemente reaccionamos a la página de política de privacidad y aquí tenemos el término y condiciones, da clic en término y condiciones y ahora si quieres ir a servicios, simplemente podemos hacer clic en servicios e ir a los servicios. Bien. 32. Agregar animaciones: Todo el mundo. Ahora tenemos que agregar animaciones a nuestro sitio web. Puedes agregar animaciones a todos y cada uno de los textos o puedes agregar animaciones a sección como esta sección a esta imagen. La mejor manera es agregar animación a las secciones porque si agregas demasiadas animaciones, eso afectará la velocidad de carga del sitio web. Agreguemos animaciones a esas secciones. En cabecera, no voy a agregar ninguna animación. Voy a mantener el encabezado por defecto y para esta sección, simplemente hago clic en el contenedor y voy a Avanzar. En Advance, tenemos los efectos de movimiento sobre los efectos de movimiento, tenemos animación de entrada. Así podemos agregar fade in, fade in left, fade in right, y tenemos muchas más cosas de augurio como esta y también roll in Entonces esos no son tan profesionales. En este caso, agregaré desvanecimiento a la izquierda. Así. Aquí podemos agregar la duración de la animación, así que la haré rápida así. Entonces podemos retrasar la animación. Aquí, si agregas 1,000, esta animación sucederá después de 1 segundo, pero no la voy a usar. Entonces aquí tenemos que agregar la animación a esta imagen. Aquí, vamos a los efectos de movimiento, la animación de entrada será pad in así, entonces la velocidad se pasará así. Entonces publica esto y vamos a verlo en acción. Entonces ahora hago clic en los cambios de vista previa y veamos, ahora se animará así Entonces tenemos esta sección, da clic en toda la sección y en Avanzar, ir a efectos de movimiento y aquí agregar desvanecimiento así Ahora vayamos a esta sección y hagamos lo mismo. Aquí en los efectos de movimiento, agrega desvanecimiento a la izquierda así y aquí agrega motion EffxFad Entonces aquí tenemos esas dos secciones. En realidad, agreguemos animación a toda esta sección. Entonces haz clic aquí y en avanzar en movimiento Effex vamos a agregarlo desvaneciéndose Entonces tenemos esta sección y en esta sección, no se ve bien si agregamos animación este fondo. Entonces agreguemos solo para este contenido. Entonces aquí podemos agregar estas animaciones a esta sección de tres vistas, seleccionarla y vamos a ir al efecto de movimiento y aquí adentro, hacer que se desvanezca así, o tal vez vamos a agregarlo como desvanecimiento, No, no. Hazlo como desvanecerse. Y aquí en el diseño actual, no podemos simplemente agregar una animación a esos dos elementos. Entonces para arreglarlo, tendré que crear un nuevo contenedor como este y eliminar las cosas de este contenedor y solo agregar esos dos textos dentro de este contenedor así. Y luego puedo seleccionar todo el contenedor, y en movimiento ewx entonces puedo agregarlo como desmayarse así Bien, ahora tenemos esta sección las secciones y al avanzar, ir a efectos de movimiento y agregar desvanecimiento a la izquierda La duración de la animación será rápida y agreguemos a esta forma así. Bastante bien y tenemos que hacerlo rápido y tenemos que hacer ayuno, éste para hacerlo rápido y rápido aquí así y aquí creo que es rápido. A ver. Es normal, hazlo rápido. ¿Qué pasa con esta sección? Efecto de movimiento, no normal, hazlo rápido y hazlo rápido. Así que siempre trata de mantener la consistencia del sitio web. De esa manera tendrás un flujo único en todo el sitio web así. Bien. Ahora, veamos esto en acción. Entonces aquí vamos. Simplemente hago clic aquí y veamos, Bien, la animación funciona, y cuando me desplace, se animará así. Para el pie, no voy a agregar ninguna animación. Entonces solo agrega animación Enranc a estas secciones, y estas animaciones también funcionarán tanto en versiones móviles como en tabletas 33. Cómo configurar matemáticas de clasificación para la optimización de SEO dentro de la página: Hola a todos. Ahora es el momento de hacer el SCO on page. Podemos usar el enchufe Rank MAT para optimizar nuestro sitio web SCO. Así que vamos a Plug INS y en Plugins, haga clic en en Plugin. Nuestro enfoque es que si alguien busca nuestro sitio web o busca el nombre de nuestra empresa en Google, nuestro sitio web debe mostrarse en el primer resultado de Google o cualquier otro motor de búsqueda. Así que en Plug Is, voy a dar clic en buscar Plugins, y voy a buscar aquí Rank MAT presentador Bien. Aquí tenemos Rank Entonces, ahora solo hago clic en Instalar Ahora, luego dar clic en Activar. Bien. Ahora vamos a esta página de configuración y aquí tenemos que conectar el perfil de rango Max con Google. Simplemente hago clic en Conectar cuenta. Y aquí tenemos lugar para iniciar sesión o si no tienes cuenta de Rank Math, puedes dar click en Regístrate ahora y regístrate o crea una cuenta gratuita de Rank Math. Entonces aquí voy a usar Google. Si tienes código de Facebook, WordPress, puedes usarlos o puedes usar solo la dirección de correo electrónico para registrarte. En mi caso, ya tengo cuenta Rank Math, así que hago clic en este botón de inicio de sesión, y aquí elegiré la opción de Gmail. Bien. Ahora aquí, seleccionaré mi Gmail y aquí haré clic en activar ahora. Ahora vamos a este asistente de configuración y aquí voy a elegir esta opción fácil porque no somos profesionales en SOT la opción fácil nos ayudará a configurar este plugin fácilmente sin ningún conocimiento profundo sobre SEO. Bien, ahora hago clic en Start Wizard, y aquí tengo que seleccionar el tipo de sitio web. En mi caso, esta será cartera personal. Y aquí aparece el nombre de nuestro sitio web, y me saltaré este sitio web, nombre alterno, y el nombre de la organización de la persona será Hannah Clark si seleccionas esto como pequeña empresa, tendrás que agregar más cosas en mi caso. En nuestro caso, debe ser cartera personal. Bien, aquí tenemos que agregar logo para Google, el tamaño del registro debe ser uno a bien por uno para soldar. Actualmente este es el logo, pero no es e cuadrado Entonces lo que podemos hacer es crear un logotipo cuadrado. Para hacer eso, iré a nuestro FigMafle Bien. Ahora aquí, solo voy a crear un marco, simplemente haga clic aquí y haga clic así y ahora tengo que hacerlo también por uno bien. Entonces simplemente copiaré este texto y vendré aquí y lo pegaré así. Ahora voy a aumentar el tamaño como presionar Comando o Control y usando la rueda del mouse así, entonces disminuiré este tamaño de fuente así. Bien. Ahora lo que podemos hacer es seguramente podemos hacer este centro alineado así y hacerlo centro y si quiero, puedo cambiar este color blanco a este color oscuro. Hagámoslo rápido aquí y en el color de relleno, solo seleccione el color primario y este color de texto, seleccionémoslo como color secundario. Esto es mucho mejor. Ahora voy a renombrar esto como NC y ahora en Explorar, seleccione el tipo pasar JPG y haga clic en Explorar. Yo descargué. Ahora vamos aquí. Haga clic en agregar archivo de carga y haga clic aquí, luego simplemente descargue o simplemente cargue el archivo descargado. Bien. Y aquí, agreguemos la etiqueta ALT y hagamos clic en usar este archivo, y ahora nuestro logo para Google se verá así, y ahora tenemos que agregar la imagen predeterminada para compartir en redes sociales. Por lo que su tamaño debe ser de 1206 cientos 30. Así que vamos a crear otro marco. Vamos aquí y haga clic en este marco y haga clic en aquí. Entonces aquí, vamos a conocer el tamaño de la imagen 1,200 630. Bien, para la web, 1206 30. Bien. El social predeterminado aquí en imagen significa que si alguien comparte nuestro sitio web en redes sociales como Facebook, mostrará un avance de nuestro sitio web. Así que la vista previa predeterminada no se verá bien. Entonces en este rango matemático, podemos agregar una vista previa que tenga una vista única y una vista personalizada, y será mucho profesional. Entonces a esta sección, solo seleccionaré esta sección de héroe y presionaré Comando C o Control C para copiarlo y pegarlo así entonces solo lo haré centro y ahora voy a cambiar esto como vista previa social. Ahora voy a dar clic en Exportar y exportarlo como JBG y dar clic en el botón Exportar vista previa social para descargarlo y aquí podemos reducir este tamaño de archivo Para hacer eso, iré a minúsculo png.com y simplemente dragón soga así Bien. Da clic en descargar para descargar y aquí vamos y damos clic en agregar Subir Archivo y simplemente subir el archivo así. Entonces aquí podemos agregar ALT D y dar click en usar este archivo para subir el archivo. Ahora, cuando alguien comparta este enlace de sitio web en redes sociales, la vista previa se verá así. Ahora hago clic en Guardar y continuar y aquí, nuevo, tengo que conectar los servicios de Google. Es para Google Search Console y otros servicios de Google como Google Analytics. Hagámoslo ahora mismo. Cuando lo hagamos, selecciona la cuenta GML que planeas usar para Google Search Console Da clic en este botón de conectar servicios de Google. Aquí, seleccionaré la dirección de Gmail y haré clic en Continuar. Y aquí, da clic en Continuar. Ahora aquí podemos conectar la Consola de Búsqueda de Google y Google Analytic Hola, a todos Mientras creo esta lección, cortes de energía ocurren después de instalar por completo y configurar las matemáticas de rango No obstante, intentémoslo de nuevo, y vayamos a las configuraciones y te mostraré paso a paso lo que hice Entonces déjame ir al lugar que paramos. Completamos esta parte. Después terminamos esta parte. Bien, aquí ya conectó la consola de búsqueda y Google Analytics, pero volvamos a hacerlo. Por ahora, haré clic en este botón de reconexión y aquí seleccionaré el correo electrónico para dar acceso Creo que ya completaste esta parte. Bien, ahora lo harás en esta página. Entonces aquí, actualmente, esto no es clicable, pero esperemos unos minutos hasta que haga clic Bien, aquí, puedes ver tu sitio web y otros sitios web que asignen con esta cuenta GML Entonces aquí solo selecciono mi sitio web, que es y diseño de sitio web personalizado. Y aquí tenemos que habilitar esta pestaña de estado del índice, por lo que actualmente está habilitada. Sin embargo, aún así, no puedo hacer clic en él si este botón no está habilitado, lo que significa este círculo en este lado, simplemente haga clic en él y habilite después de que se pueda hacer clic Así que pasemos a la página de Analytics en la página de Analytics, aquí, seleccione mis analíticas. Y aquí, ya creé la propiedad. En realidad, grabo este video dos hielo y las dos de esa vez, ocurrió este corte de energía, y esta es la tercera vez Así que aquí, simplemente haga clic en crear nueva propiedad GA four. Y aquí puedes ver esta ventana emergente, y dice, ¿ Estás seguro de que quieres crear una nueva propiedad GA four? Simplemente haga clic en Bien y creará una propiedad GA four o Google Analytics. Entonces aquí, aquí, creó una nueva propiedad, y aquí, seleccione el flujo de datos como sitio web. Y aquí tenemos que instalar este código de Analytics con nuestro sitio web para hacerlo, simplemente puedes hacer clic en esta casilla de verificación y hacer que instale el código de edición. Y este Analytics es Google Analytics que utilicé para rastrear los visitantes de nuestro sitio web y los detalles del tráfico del sitio web. Entonces, si quieres excluir usuario de inicio de sesión, lo que significa que si estás ingresando a este sitio web e intentas acceder a las páginas, serás visto como visitante. Pero si marca esto, no verá que está como visitante. Si no lo quieres, solo marca esto, pero por ahora, no lo voy a tomar, y aquí, esto todavía no está habilitado Accens es para blog en sitios web Entonces, mientras esta consola de búsqueda y analítica se configuran, intentemos visitar Google Search Console y verla propiedad. Para que puedas hacer clic en este botón Más información conocer más sobre cómo funciona esta Google Search Console y cómo configurarla. En mi conjetura, solo voy a resaltar este texto y con razón, luego dar clic en buscar en Google. Y aquí agregaré Google Search Console Login. Y aquí está la página de inicio de sesión, haga clic en ella. Y aquí tenemos que seleccionar la dirección de Gmail que configuramos con nuestra página web. Das click en él y aquí tenemos este sitio web, URL, solo haz clic en él, y luego vamos a ir a resumen sobre Ovie, no tenemos ningún resultado, así que espera una semana a semana o a veces ese tráfico llegará a tu sitio web y verás resultado en Google Search Console e irás a sitemap en sitemaps, si ves este sitemap enviado, vas, pero si no lo ves el complemento Rang Map creará un mapa del sitio para su sitio web Podemos simplemente agregar ese mapa del sitio y hagámoslo después de completar la configuración. Y ahora vayamos a Google Analytics y veamos que funciona. Por lo que sólo voy a hacer clic en buscar esto, y aquí voy a añadir GA, Google Analytics Go Google Analytics login. Agreguemos Gour Login y hagamos clic en este resultado. Aquí, nuevamente, tengo que seleccionar al usuario. Bien. Aquí está la página de Google Analytics que configuré, en mi caso está lista configurada, pero en tu caso, no verás este tipo de analíticas. Si no ves esto, solo espera 30 minutos y verás este texto. Veamos la página de análisis que creé en mi último intento. Verás este tipo de señal. Por lo que aquí no verás ningún usuario activo, por lo que solo puedes verificar el trabajo del código de Google Analytics en tu sitio web yendo a ventana IncoPNto y visitar Entonces vamos a revisar la actividad. Entonces aquí, si aún no ves la actividad, simplemente haz clic en este botón y solo toma esta antigua, solo haz cosas como esta y luego vete a casa. En casa, si aún no lo ves, solo espera y tranquiliza al sitio web así Si usas caso enchufando en mi caso, utilizo este cache de velocidad de la luz Así que ve a caché y haz clic en Perch A y luego inténtalo de nuevo así y mira si funciona Entonces vayamos a los reportes sobre reportes. Podemos crear nuestra instantánea de olla. Entonces usando esta sección, podemos ver los detalles sobre el comportamiento del usuario. Entonces aquí tenemos tres opciones. En nuestro caso, debemos seleccionar este primero, comportamiento del usuario uno, y puedes hacer clic en plantilla de Vista previa y ver el aspecto de la misma. Entonces aquí se verá así. Así que solo haz clic en, elige esta plantilla. Y cuando configures tu Google Analytics para correctamente, verás el resultado ahí. Entonces en mi caso, vamos al primero que ya instalé, y aquí están los detalles. Entonces vamos a tres reportajes, se puede ver este tipo de detalles. Después de configurar esto con éxito, podemos hacer clic en Guardar y continuar con el reporte de correo electrónico, lo desmarcaré porque no necesito informe por correo electrónico, y si todavía no se puede hacer clic y está deshabilitado, solo espere unos minutos o haga clic en este Guardar y continuar y podremos hacerlo Después voy a dar click en volver al tablero. Y aquí, si no ves el mapa del sitio así, solo tienes que actualizarlo unas cuantas veces y si aún no lo ves, puedes ir a la configuración GRA en configuración general, puedes ir a la configuración GRA hacer clic en Analytics, y aquí puedes tomar esta habilitación de esta pestaña de estado del índice así, y luego puedes hacer clic en esta configuración del mapa del sitio, y aquí está el sitio web UR, URL del mapa del sitio web. Así que solo haz clic derecho y haz clic en Copiar dirección de enlace e ir aquí. Entonces solo agrégalo así. Y aquí está la URL de nuestro sitio web, y aquí está la URL del mapa del sitio, simplemente haga clic en enviar después de enviarlo, puede ver el mapa del sitio sub enviado aquí, y enviar este mapa del sitio le ayudará a indexar su sitio web rápidamente en Google. Bien. Ahora repasemos las características de Rang Math SO Vayamos al tablero en el tablero, no tenemos nada que hacer y la IA de contenido es una función premium. En este caso, utilizamos la versión gratuita de rank Math, y la página de análisis no es necesaria porque podemos verificar los análisis en Google Analytics y la página de análisis también es compatible con la versión paga. Y aquí, vamos a dar clic en configuración general. Entonces en esta configuración general, solo mantén los valores predeterminados, no cambies los valores. Entonces vamos a título y meta aquí. Siempre haz este meta índice de Robots. Entonces, si haces clic en este no Index, tu sitio web no indexará en Google, así que no marques este. Siempre índice de tick. Después en carácter separador, puedes cambiarlo si quieres. Voy a mantener el valor por defecto y aquí puedes tomar si quieres capitalizar el titular que muestran en Google Después en el SEO local, ya subimos esos detalles mientras configuramos el plugin Frank Math. Y aquí podemos agregar la URL de la página de Facebook, y aquí podemos agregar perfil adicional en vivo Enlace TIN o perfil de Instagram. Entonces, si tienes perfil de LinkedIn, solo puedes agregar tu perfil in.com, y si también tienes vamos a ver, cuenta de Twitter, solo say.com, como este slash Así, puedes agregar perfiles adicionales. Cuando agregas más de uno, solo puedes agregarlos en nueva línea como esta. Bien. Entonces homepage en homepage, tenemos que dar click en esta Editar página home to Edit O homepage, Google ranking preview para hacer eso, voy a hacer clic derecho aquí haga clic en Abrir enlace en Nueva Pestaña. Bien, ahora estoy en la página principal, y este es el editor de Wordpress. Y aquí lo que podemos hacer es dar click en esta barra de Opciones y aquí, seleccionar este mapa de rango. Bien, ahora tenemos que agregar la palabra clave focus. Como ya te dije antes, ya lo hice. Es por eso que la palabra clave focus ya está ahí, así que la eliminaré y solo agregaré la palabra clave focus así. Y luego aquí está la vista previa en Google y aquí está la reseña en redes sociales y aquí está la vista previa de Facebook, aquí está la vista previa de Twitter. ¿Recordaste que agregamos esta imagen en miniatura para redes sociales y aquí da clic en General y aquí esta será la vista previa de Google y podremos cambiar esta vista previa editando el título Actualmente, nuestro título es Hannah Clark ins como Clark, solo lo cambio y podemos agregar este título y asegurarnos de que tu título solo tenga 60 caracteres porque en Google, solo muestra los primeros 60 caracteres. Después de la descripción, podemos agregar esta descripción, y para la descripción o la descripción del resultado de búsqueda, agregar siempre la palabra clave principal. En este caso, la palabra clave principal es Hanna Clark. Diablos, soy Anna Clark. Estás listo para convertir a tu hijo así a esta descripción, solo agrega 160 caracteres porque si agregas más de 60 caracteres, no se mostrará en el Google. Entonces aquí, se verá así, y lo cerraré. Y en set ins, la palabra clave focus es esta, y aquí tenemos problemas, y después de completarla, simplemente puedes hacer clic en guardar y se guardará en tu página. Después de que lo guardemos, podemos ir a aquí, aquí, tenemos autor, solo mantenlo predeterminado porque no tenemos autores aquí, tal vez deshabilitarlo será Bueno porque este sitio web no tiene autores y solo aquí, mantén el detesto predeterminado, y si quieres ver el título de tu post de manera diferente, puedes agregar ese texto aquí, pero mantenerlos es por defecto es la manera fácil y páginas, si quieres cambiar la revisión de tu página en el resultado de Google, puedes cambiar esos detalles, pero lo mantendré como predeterminado. Y si haces clic aquí, puedes ver las condiciones o shortcde que puedes agregar, pero no cambiemos nada de Y en categorías, no tenemos categorías y no tenemos etiquetas, solo manténgalas por defecto. Haga clic en Guardar cambios si realiza algún cambio. Entonces la configuración del mapa del sitio, ya estamos enviando el mapa del sitio, y luego el ítem importante es este Analizador SCO. Así que revisa el scoe SCO de tu sitio web y puedes hacer clic en este analizador SO de reinicio o hacer clic en este analizador SO para analizar estos datos Y si ves SosCoe inferior, puedes ir aquí y en prioridad, si no habilitaste las actualizaciones automáticas, simplemente haz clic en habilitar actualizaciones automáticas, y aquí tenemos U descripción básica U y H una etiqueta H dos etiqueta Entonces si no lo ves así, como ejemplo, aquí tienes demasiados H dos titulares, lo que puedes hacer es ir a la página de inicio imagina si tienes dos etiquetas H una o si no tienes ninguna etiqueta H una, tener demasiadas etiquetas H dos para arreglarlo, puedes ir a la página principal. Simplemente voy a hacer clic en Editar con Eleanor en esta página de inicio Bien. Ahora aquí, veamos los números de los titulares. En mi caso, esta etiqueta HTML es H one, lo que significa que tenemos una etiqueta H one para el sitio web. Así que la página web solo tiene una H una etiqueta o una etiqueta titular una etiqueta. Y aquí, esto es en H tres, y aquí, esto es gratis. Puedes cambiar esas cosas. Entonces, si recuerdas, cuando diseñamos este sitio web, te dije que siempre asignaras la etiqueta HTML porque esta es una mejor práctica de SEO. Y aquí, si comprobamos éste, es H dos y éste es H tres, y este es un párrafo. En gas, si tienes mucho H dos etiquetas, solo agrega dos etiquetas para los titulares de la sección y haz otras como párrafo cuatro H tres, H cuatro, H cinco o H seis etiqueta. Espero que lo entiendas y después de hacer esos cambios, haz clic en publicar, luego puedes dar click en este analizador de fresart y siempre tratar de mantener este al menos 80 o 80 más Aquí puedes verificar las quemaduras y aquí dice que no tengo líneas de etiqueta laterales, así que simplemente podemos hacer clic aquí y dar clic en abrir Nueva pestaña, y aquí tenemos dos números Aquí digo palabras clave de enfoque. Hay dos páginas sin palabras clave de enfoque todavía, solo escribe click y ábrela en ventana y en personalizador, podemos ir a identidad lateral, y aquí podemos agregar tagline Ya agregué el tagline puedo agregar tagline aquí. Entonces, sobre este mensaje, hay dos páginas sin enfoque, sin palabra clave de enfoque. Entonces, si revisamos esas dos páginas, tenemos política de privacidad y término y condición. Así que no necesitamos agregar la palabra clave focus a estas dos páginas porque no necesitamos clasificarlas en Google, así podemos ignorar este problema. Y aquí tenemos el título del anfitrión que faltan las palabras clave de enfoque. Simplemente haga clic en él y está en la página principal, y también conocemos este mensaje porque cambiamos el título y la descripción de la página de inicio a través de Rank Man, y no necesitamos cambiar este título desde aquí. Bien. Después de hacer todos los cambios, haré clic en Reiniciar SO Analyzer y luego ver el SO SCO. Aún así, muestro este mismo resultado, pero este SCO es bastante bueno para clasificar nuestro sitio web en el buscador. Entonces así es como podemos usar Rank Math para hacer en la página SCO en nuestro sitio web. 34. Cómo configurar el plugin para caché LiteSpeed para una velocidad más rápida del sitio web: Hola a todos. Ahora aumentemos la velocidad de la página web en ESCO. Para ello, primero, vayamos a la velocidad de la página de Google por dentro. Solo voy a Google y busco en Google PageSpeed, y aquí tenemos PageSpeed Da click en él, y aquí podemos agregar la URL de nuestro sitio web, página la URL del sitio web y hacer clic en Analizar. Bien, en el móvil, su rendimiento es 74, y veamos el escritorio, escritorio es 92, y este es un rendimiento bastante bueno. No obstante, vamos a mejorar esto mejor. Para hacer eso vamos al panel de WordPress y vamos a enchufar y agregar plugin. Y vamos a usar el plugin de caché Light Speed. En los plugins de búsqueda buscaré caché Light Speed. Aquí tenemos el caché de Velocidad de la Luz, da clic en Instalar Ahora, luego haz clic en Activar. El plugin se activó con éxito y podemos ver aquí Lightspeed, plugin de caché, icono, y aquí, tenemos caché Light Speed Simplemente voy a ir al tablero en el tablero, tenemos este tipo de diseño. Primero, voy a dar click en este servicio de habilitar quicdt Cloud, click en y lo haré a esta página y aquí tendré que crear una cuenta Por lo que sólo voy a hacer clic en la opción de Google y registrarme con Google. Primero, tengo que dar click en este botón para llegar a un acuerdo, después hago clic en la cuenta de Gmail para registrarme y aquí, voy a dar click en esta configuración de tinta de acabado y volver a Wordpress entonces ya puedo ver este tipo de ventana, y aquí voy a hacer click en página velocidad disco a fps y veamos resultado. Tomará algún tiempo. Ahora digamos antes del 91 después del 91, voy a hacer clic en este botón de pash gratis para verificar el tiempo de carga de la página esto es realmente muy bueno la velocidad de la página es co y aquí es un tiempo de carga de página aquí, carga D dentro de 0.58 segundos luego vamos uno por uno y configuramos la puñalada Primero, voy a ir a preset. En preset, podemos configurar o aplicar preset por defecto, simplemente haciendo clic en este aplicar preset pero no voy a hacer eso. Me saltaré esta pestaña y vamos a ir a general sobre general, iré al conjunto general en y aquí actualmente el modo invitado está apagado, lo haré encendido y voy a mantener la optimización de invitado apagada y para la IP del servidor, voy a hacer clic en esta verificar mi IP pública y aquí está la IP. Yo sólo lo voy a copiar, entonces lo voy a pegar aquí así. Después apagaré la notificación. Al afinar, voy a mantener los detalles predeterminados, y ahora dar clic en Guardar cambios. Bien, ahora tenemos esta pestaña de caché. Vamos a la pestaña Caché. Bien, ahora tenemos que configurar esas tabulaciones. Así que aquí habilite la caché y deshabilite la caché iniciada en los usuarios o hágala apagada y guarde otros elementos. Entonces aquí haz Cash mobile on, y eso es todo. Da clic en Savchange y cuando realices cambios, siempre intenta revisar tu sitio web en ventana de incógnito porque esos ajustes pueden romper Así que siempre trata de revisar tu sitio web en ventana de incógnito. Y en DTL, voy a mantener el depósito y en perch mantener la exclusión de depósito si tienes una URL o página específica que no quieres usar el almacenamiento en caché, puedes agregar esa URL aquí, y por ahora, la saltaré, y el resto de pestaña será un EIS, mantener el objeto predeterminado, conservar los datos predeterminados y navegador la exclusión de depósito si tienes una URL o página específica que no quieres usar el almacenamiento en caché, puedes agregar esa URL aquí, y por ahora, la saltaré, y el resto de pestaña será un EIS, mantener el objeto predeterminado, conservar los datos predeterminados y navegador . Haga clic en la caché del navegador en y en Avance solo haga un valor predeterminado y luego haga clic en Guardar cambios. Bien. Ahora de nuevo, haz clic aquí percha, luego revisa tu sitio web en ventana de incógnito Escribe esto y mira si se rompe en él funciona perfectamente. Y luego tenemos CDN. En CDN, podemos configurar tarifa rápida de Cloud o Cloud, pero en este caso, no voy a hacerlo, entonces tenemos optimización de imagen Optimización de imagen, haz clic en esta solicitud de optimización para enviar y haz esto hasta que veas el cuadro Ti aquí. Actualmente, es 7%, y si lo vuelvo a intentar, dice que tienes imagen esperando a ser tirada, así que intenta hacerlo en el día siguiente, hazlo hasta optimizar completamente tus imágenes. Y en la configuración de optimización de imagen, da clic en este Auto solicitar Cron Al hacer esto, la función Cron optimizará automáticamente tus imágenes, por lo que no necesitas hacer clic en esta una y otra vez Aquí formato de imagen de próxima generación, hazla web P, y esto preserva los datos EXIV XMP de optimizar imágenes originales, hacerlo en no copia de seguridad y luego bajar y para este ítem, solo hazlo encendido y haz clic en Guardar cambios Entonces tenemos optimización de página Bien, como te dije antes, cuando trabajas en este plugin, siempre, da clic en la perche Earl después de realizar algún cambio, especialmente en la optimización de la página Después revisa el sitio web en la ventana de incógnito, y si hay algún problema, puedes solucionarlos de inmediato deshaciendo cambios que realices en el caché de velocidad de la luz Bien, aquí tenemos el CSS minify y CSS combinados estarán en este CSS en línea, lo hacemos al cargar CSS y hacer esto luego encendido y la optimización de visualización de fuentes será predeterminada Después haga clic en Guardar cambios y haga clic en la percha A. Luego vaya a Incoto Window y represione la página, el sitio web y verifique con breakof No está funcionando para débiles aquí tenemos Las estrellas no se muestran, vamos a arreglarlo en la siguiente lección. Ahora vamos a ir a la configuración de Js en la configuración de Js, Js minify estará en Js combinar y mantener otras cosas por defecto, luego haga clic en guardar cambios y purgar todos, luego haga clic aquí, luego verifíquelo aquí, vea, ajuste, funcionando bien sin funcionar bien, funcionando bien sin funcionar bien, y luego vaya a la tabla del equipo de SDM minify, aquí, elimine o PrisMog y guarde los cambios, luego haga clic en instar a todos ahora en configuración de medios aquí, luego haga clic en instar a todos ahora un marcador de posición receptivo y puede cambiar el color del marcador de respuesta Voy a mantener el color por defecto. Haz esta carga perezosa en la que marco. Actualmente, no tenemos ningún I frame en nuestro sitio web. No obstante, hazlo y agrega en tamaños, hazlo aquí con calidad de imagen de Wordpress, hazlo 83, y si agregas esto como 50 o algo menos que 83 82, la calidad de imagen será radio significativamente, no hagas eso. Bien, entonces tenemos este Ike default y aquí excluimos. Si hay un medio o si hay alguna imagen que quieres excluir de la carga perezosa, solo puedes agregar esa imagen. Las imágenes y el contenido de carga perezosa se cargarán cuando el visitante desplace el sitio web a esa sección. Como ejemplo aquí, si me desplazo hacia abajo, esta imagen no se cargará hasta que vea esta sección así. Entonces tenemos esta localización y Gravatacas sobre el caso Gravata Eso es todo, luego e afinación, solo mantén la configuración predeterminada. Entonces CSS también mantener la configuración de depósito entonces tenemos base de datos base de datos base de datos, podemos borrar revisiones forzadas y caduca y otros archivos basura, registro basura que creó en la base de datos. Simplemente puedes hacer clic en este limpiador si no necesitas este autoborrador y otras cosas, o simplemente puedes hacer clic uno por uno para eliminarlos. En la optimización de la base de datos, solo mantén el depósito en. Entonces aquí tenemos crawler, pero no necesitamos hacer nada ahí dentro y la caja de herramientas también en la caja de herramientas, hay nada que hacer por nosotros, y esto es todo lo que podemos hacer en el plugin de caché de velocidad de la luz Ahora vamos a reprimir esta página velocidad disco y el tiempo de carga de la página Reprimimos esta página speed disco y veamos qué pasará Entonces podemos probar esto en la velocidad de la página por dentro, y aquí la velocidad de página ICO es de 90, pero no hicimos ninguna mejora. Creo que la razón es que este plugin ya está instalado en el sitio web. Ese puede ser el as, pero aumentamos el tiempo de carga de la página. Aquí, sigue siendo 74 y aquí está el 96, y esta es una actuación bastante buena. Y aquí está cómo mejorar tu sitio web es la velocidad y te veo en la siguiente lección. 35. Solucionar el problema de mostrar emojis en tu sitio web: Aquí tenemos este tema. Cuando salimos de nuestro sitio web, los íconos de las estrellas no se muestran, así que vamos a arreglarlo. Para arreglarlo, iré a plugins y haré clic en adn y buscaré Código ISNIP e instalaré este plugin de código WP Bien, solo está instalado, y luego iré a Install, plugin y aquí activaré el código WP, plugin light. Y aquí ahora puedo agregar código, así que no es necesario codificarlo. Voy a proporcionar el código, así que simplemente haga clic en el código esto aquí y haga clic en Agregar Nuevo. Entonces desde aquí, haz clic en en Custom Snip y selecciona PHP Snip y aquí voy a dar un código solo revisa la sección de recursos y solo pon este código así y luego haz clic en este activo y haz clic en Guardar Snip Antes de hacer clic en él, simplemente no agregues ninguna otra cosa solo agrega este código te pincho. Si agregas otras cosas, tu sitio web se romperá. Después haga clic en Guardar SNIP Bien. Ahora bien si voy a codificar este nip, aquí, puedo ver que este activo está pinzado editemos esto y agreguemos algo de título a esto es nip quedará claro cuando alguien intente revisar nuestro sitio web, solo voy a agregar este texto y dar clic en Actualizar para actualizarlo Ahora lo que hago es, voy a elemento y herramientas. Y si tu sitio web es correctamente mostrar estos iconos, no necesitas pasar por esta lección. Y aquí sólo voy a hacer clic en claro archivo y datos. Bien. Después también da clic en este botón de sincronización Biblioteca y luego por aquí y en Velocidad de la Luz, haga clic en purgar A. Entonces abramos este sitio web en ventana de incógnito y veamos si funciona Ahora funciona a la perfección, y ahora tenemos un sitio web completamente diseñado. 36. Proyecto de clase: Hola a todos. Enhorabuena. Diseñó con éxito este sitio web de cartera para coach de negocios, y ahora es el momento de su proyecto de clase. En su proyecto de clase, abra este sitio web de portafolio universal y seleccione el diseño de sitio web de cartera femenino o portafolio en FICMA y cambie el contenido del texto acuerdo con su tipo de cartera. Crea portafolio para ti mismo o para una persona o personaje ficticio que te guste diseñar página web de portafolio, para que pueda ser un coach, empresario, estudio o cualquier persona que te guste Así que solo cambia esos contenidos y crea tu propia versión. Para que puedas cambiar este color de texto de acuerdo a lo que necesites. Entonces aquí, si no te gusta este color primario, simplemente haz clic así y haz clic en este, edita este estilo, y aquí puedes simplemente cambiar ese color. Cuando cambies ese color, hagámoslo de este color rojo. Afectará así a todo el diseño. Así que solo juega y crea tu propia versión del sitio web y compártela en el proyecto de clase de esa manera. Podemos verificarlo y darle nuestros comentarios. Entonces en esta clase, espero que aprendas cosas valiosas, y te veo en la siguiente clase.