Cómo crear un sitio web personal/portafolio

1. Cómo crear un sitio web personal/de portafolio: introducción: ¿ Qué pasa chicos. En el video de hoy, te voy a mostrar cómo hacer un sitio web personal con WordPress. Echemos un vistazo a la página web Te voy a mostrar cómo hacer. Diseñé este para que sea el diseño perfecto de una página para un individuo. Tiene este impresionante efecto de paralaje. También te voy a mostrar cómo cambiar todas las fuentes y sus colores, te voy a mostrar cómo cambiar estos iconos y hacerlos clicables. Te mostraré cómo crear botones que pueden ir a diferentes páginas o pueden saltar a diferentes áreas de tu sitio web. También te mostraré cómo cambiar tu menú aquí arriba, cómo hacer este encabezado transparente y también te mostraré cómo crear este logo de firma para tu sitio web y no necesitas ningún software para hacerlo, puedes hacerlo completamente para gratis, así que eso es realmente genial. También te mostraré cómo cambiar todas estas diferentes secciones para que no tenga que ser solo películas o fotos o diseño web, puedes cambiarlas a lo que quieras. Te mostraré cómo crear una galería de fotos, poner tus videos aquí, enlazar tu Instagram y YouTube y Facebook o cualquier otra red social que tengas. También te mostraré cómo crear estas lista de iconos aquí abajo, así como crear una página de contacto completa donde la gente pueda enviarte e-mails y también tienes un mapa por aquí y la mejor parte es que hice todo este en una plantilla que te estoy dando de forma gratuita. Puedes encontrarlo entrando en la pestaña Proyecto de Clase y buscando debajo de Recursos. Pasé de más de un tema al aire libre para mi página web, pero puedes cambiarlo a lo que quieras. Este diseño de sitio web como súper versátil, y lo tiraré hacia arriba en móvil, en mi teléfono. Así es como luce eso. Impresionante. Esto se ve muy bien en mi teléfono y también te mostraré cómo obtener tu propio nombre de dominio, como lo tengo aquí, y cómo obtener tu propio plan de hosting. Sin más preámbulos, mi nombre es Dale M-c Ma nus, hago sitios web y también te muestro cómo hacerlo paso a paso, siempre que estén listos, empecemos esto. 2. Paso 1: consigue un nombre de dominio y un alojamiento: De acuerdo, así que el paso número uno, es asegurar un nombre de dominio y plan de hosting. Un nombre de dominio es solo el nombre de tu website.com. Un plan de hosting es cubierto por una empresa de hosting. Tienen estos edificios llenos de todos estos servidores, y los servidores iluminan o alquilan espacio en Internet, lo llenan con todas sus fotos y videos y textos y así sucesivamente, después salir a vivir. Sí, podrías hacer un sitio web gratuito, pero vas a estar limitado a las siguientes cosas. No podrás monetizar un sitio web gratuito con anuncios. No podrás instalar plugins útiles. No tienes una cantidad ilimitada de temas que puedes usar para personalizar tu sitio web y no poseerás tu propio nombre de dominio. Será algo así como tu nombre de dominio, .WORDPRESS.COM. El hosting es necesario para tener un sitio web. Empecemos. Vamos a subirnos a hostgator.com. Esta es su página de inicio, así que lo que vamos a hacer es pasar al hosting web. Se puede ver que aquí tienen unos cuantos planes diferentes. El Plan de Hatchling es lo que más recomiendo si apenas estás empezando, y el Plan Baby es si planeas tener un montón de nombres de dominio. Si sabes que quieres tener como diez nombres de dominio diferentes, adelante y consigue el Baby Plan. El Plan de Negocios es realmente sólo si estás tratando de hacer una tonelada de dinero con tu página web, como si estuviera hablando de cientos y miles de dólares y necesitas todo esto de campanas y silbatos extra. Pero por el bien de este tutorial, vamos a seguir adelante y hacer el Plan de incubación. puede ver que es el plan más barato. Adelante y golpeemos comprar ahora, y aquí es donde vas a conseguir tu nombre de dominio. Esta es la parte divertida. Recomiendo encarecidamente mantener su nombre de dominio bajo 15 caracteres, y también recomiendo mantenerlo lo más simple posible. Para esto, voy a estar haciendo un sitio web personal. En realidad ya compré dalemcmanus.com, que es mi nombre. Voy a golpear enter y dirá que no está disponible, porque ya lo tengo. Lo que voy a hacer es mi segundo nombre empieza con una N. Así que sólo voy a meter un N ahí y hacer dalemcmanus.com y Enter y ahí vamos. Te dará un montón de cosas diferentes como, .club, .site, .net. Te recomiendo encarecidamente simplemente pegarte con the.com. Queremos que seas lo más legal posible. Enfriar. Vamos todo el camino hacia abajo y vas a ver que Agregar Protección de Privacidad de Dominio está marcada. Eso es bueno, porque si no tienes esto comprobado, te bombardearán con llamadas de spam de personas que están pidiendo construir tu sitio web y ofrecerte todas estas cosas si les pagas. Es odioso. Cometí este error una vez en el principio cuando hice mi primer sitio web de la historia, y fue terrible. Es decir, mi teléfono probablemente sonó de seis a ocho veces al día con los abogados, por lo que recomiendo encarecidamente agregar esa protección de privacidad de dominio. De acuerdo, a continuación, vamos a bajar y elegir nuestro Plan de Hosting. Elegimos el Plan de Hatchling, que es bueno, y también vamos a elegir el Ciclo de Facturación. Como puedes ver, si haces 36 meses, vas a tener el más barato por mes y en general, 275 al mes si te comprometes a 36 meses. Ahora, 36 meses pueden ser mucho para que alguien se comprometa. Mi siguiente recomendación es hacer los 12 meses porque también estás comprando tu nombre de dominio por 12 meses, tiene más sentido que coincidan y sigue siendo un plan bastante barato. Si lo deseas, solo quieres probarlo por un mes y solo ver si te gusta, tal vez este es tu primer sitio web, entonces puedes seguir adelante y dar clic en un mes. Después de que elijas tu ciclo de facturación, vamos a crear un nombre de usuario. Simplemente haré mi nombre completo, que es dalemcmanus y luego haré un pasador de seguridad. Entonces vamos a llenar nuestra información de facturación. Yo sólo voy a seguir adelante y hacer esto muy rápido. Muy bien, genial. Una vez que eso esté todo lleno, solo bajaremos a agregar servicios adicionales, y a partir de aquí, tienes un Certificado SSL Gratis. Lo que esto significa es, digamos que voy a Apple.com. Esta pequeña cosa de seguridad. Dice conexión para asegurar, su pequeño símbolo de candado aquí. Eso es lo que es. Si estás vendiendo producto en tu página web, como si fuera una tienda de comercio electrónico o algo así, entonces te recomendaría conseguir este Certificado SSL. Está incluido gratis aquí. Tan solo déjalo comprobado. Puedes seguir adelante y desmarcar para proteger tu sitio de hackers, salir, obtener correo electrónico profesional sin marcar. En realidad tengo todo otro video que te muestra cómo hacer esto gratuita y luego también desmarque copia de seguridad tu arduo trabajo. Hay formas de hacer todo esto tú mismo, no necesitas incluirlos en tu paquete. De acuerdo, así que aquí está la parte divertida. Aquí es donde vas a ahorrar algo de dinero. En la sección Cupón, probablemente diga Shared 3600 o algo de ese tipo, adelante y borra eso y solo vamos a poner en createaprowebsite, todo una palabra. De qué va a hacer esto una vez que pegues validar, puedes ver bam, el precio acaba de bajar. En el momento que estoy grabando esto, esto te ahorrará hasta alrededor del 60 por ciento dependiendo de cuánto de un Ciclo de Facturación elijas. Este es mi enlace de afiliación. Si lo usas, te ahorra dinero y me hace un poco para que pueda seguir haciendo esto todo el tiempo y proporcionar más tutoriales. Es un ganar-ganar para todos. Pero si no te gusto y no quieres usarlo, puedes tratar de encontrar uno en otro lugar. Te garantizo que este es el mejor trato que vas a conseguir, porque llamé a Host Gator y elaboré este trato especial puramente para mis espectadores. Repasemos esto realmente rápido. Se puede ver que tenemos nuestro registro de dominio por un año, que bajó de 15 a cinco dólares, lo cual es impresionante. Tenemos nuestro plan de incubación, que originalmente era de $10.95, que bajó a 7.67, entonces nuestro add ons es solo nuestra protección de privacidad, que nuevamente, recomiendo encarecidamente. Pasemos a, lo siento, en realidad llegamos a estar de acuerdo con los términos. Ya has leído y estás de acuerdo, y luego puedes dar clic en checkout ahora. Una vez que eso esté completo, solo va a armar todo para ti. 3. Paso nº2: instalar WordPress: Ahora estamos pasando al paso dos, que es instalar WordPress. Y WordPress es básicamente sólo un constructor de sitios web. En realidad, alimenta alrededor del 30% de Internet, que es una gran cantidad de sitios web malhumorados. Y es bastante fácil de usar. Y te voy a mostrar paso a paso. Entonces vamos a instalarlo. De acuerdo, así que sólo pasa a la pestaña de hosting aquí arriba. Y entonces lo que vamos a hacer es bajar a WordPress, instalación con un solo clic. Así que adelante y haga clic en eso. Muy bien, así que desde aquí solo vamos a escoger donde queremos instalar WordPress. Entonces vamos a ir a seleccionar tu dominio, y yo voy a seleccionar mi dominio. Tenía un montón de opciones ahí. Probablemente sólo tendrás uno. Entonces basta con dar click siguiente. De acuerdo, así que ahora sólo le vamos a dar un título y este sólo será nuestro nombre porque esto no es una empresa. Este es un sitio web personal. Entonces si tuvieras una empresa, podrías poner el nombre ahí. Usuario administrador, solo voy a hacer mi nombre y nombre, apellido. Nuevamente, muchos nombres excesivos para esto es porque es un sitio web personal. Y luego Admin email. Entonces hagamos nuestro correo electrónico. Enfriar. Y entonces sólo aceptaremos los términos. Y luego haz clic en Instalar. Ahora WordPress se está instalando, impresionante. Y boom, así como eso, ya está hecho. Por lo que paso muy importante aquí mismo es guardar los detalles de instalación aquí. Entonces lo que voy a hacer es copiar estos y luego sólo voy a pegarlos donde guarde contraseñas normales y cosas así porque vas a necesitar esta ridícula contraseña, esta S71 yada, yada. Pero para subirnos inicialmente vamos a necesitar esa loca contraseña. Así que asegúrate de guardar eso. Y luego simplemente haga clic en iniciar sesión. Entonces te traen a esta página porque Host Gator tiene que enviar tu nombre de dominio a través de todo el mundo que tiene que conectarse a cada servidor y decir: “Oye, este nombre de dominio existe”, y este proceso se llama propagación. Y dicen que puede tardar hasta unas 24 horas. En realidad nunca he tenido que tomarme tanto tiempo. Normalmente es en algún lugar entre 20 minutos y dos horas. Por lo que en unos 20 minutos, revisa de nuevo. Y si ves una página que se ve así, entonces estás bien para ir y podemos empezar de nuevo con el tutorial. Pero tómalo como un descanso obligatorio, ve a buscar un bocadillo y vuelve pronto. 4. Paso 3: inicia y cambia tu contraseña: Muy bien, así que una vez que estemos en esta página, podemos pasar al paso número tres, que tiene inicio de sesión y cambiar tu contraseña. Porque no queremos tener esa ridícula contraseña loca que guardamos antes. Entonces sigamos adelante y en lugar de hacer clic en el pequeño botón verde que dice admin login, la forma en que debes acostumbrarte a iniciar sesión es subiendo a tu nombre de dominio y haciendo /WP- admin.Al hacer esto, puedes entrar todo el tiempo este pequeño botón verde no va a estar aquí una vez que publiques tu sitio. Entonces, sólo vamos a golpear enter. Ahora podemos iniciar sesión. Por lo que podemos utilizar ya sea su nombre de usuario o su dirección de correo electrónico. Simplemente haré mi nombre de usuario, que era solo Dale entonces haré esa loca contraseña. Guardé la mía, así que solo voy a copiarla y pegarla y luego presionar login. Muy bien, estamos en el panel de WordPress y aquí están pasando muchas cosas, así que hagamos que sea mucho más fácil navegar y lucir un poco más limpio. Entonces solo vamos a descartar esto y vamos a darle a la X en casi todo. Sólo descartemos. Queremos que esto se vea bonito y limpio así. No te quieres asustar si esta es tu primera vez en WordPress. Muy bien, entonces ahora que hemos iniciado sesión y limpiado nuestro panel de control, vamos a cambiar nuestra contraseña. Entonces vamos a bajar a los usuarios y luego ir a todos los usuarios.Entonces solo tienes que hacer clic en tu nombre. Ahora iremos todo el camino hasta el fondo y sí generaremos contraseña y luego solo eliminaremos esa no queremos otra contraseña loca, queremos hacer nuestra propia. Entonces sigamos adelante y solo pongamos la contraseña que quieras poner. Ahora hit actualiza el perfil y ahí tienes. Así es como cambiar tu contraseña y ahora puedes iniciar sesión con eso. Por lo que solo puedes usar tu nombre como nombre usuario y puedes iniciar sesión con tu nueva contraseña en cualquier momento. Y recuerda, haz tu nombre de dominio /WP-admin. Es así como iniciar sesión en WordPress para su sitio. 5. Paso #4: personaliza tu sitio web: Muy bien, así que la mejor parte, paso número cuatro, es personalizar tu sitio web. Entonces primero vamos a conseguir nuestro tema, luego vamos a descargar un par de plugins que nos van a ayudar mucho, y luego a continuación, te voy a dar una plantilla que puedes usar que te va a quitar mucho del arduo trabajo. Entonces solo puedes arrastrar y soltar y reemplazar las imágenes que quieras y reemplazar texto y así sucesivamente. Yo quería que fuera súper fácil para ustedes chicos. Entonces lo primero que vamos a hacer es conseguir nuestro tema. Nuestro tema es realmente sólo va a ser utilizado para nuestro encabezado y nuestro pie de página. Entonces te mostraré lo que quiero decir. Iré a createaprowebsite.com, que es mi página web. Sólo vamos a conseguir el tema puramente para este encabezado aquí arriba, esta parte blanca, y luego el pie de página todo el camino en la parte inferior. Entonces el Page Builder, que es un plugin que vamos a conseguir se llama Elementor. Eso es lo que vamos a usar para diseñar realmente todo nuestro sitio web. Pero el tema que queremos conseguir sólo para ese encabezado. Entonces volvamos atrás y pasemos a la apariencia. Sólo pasemos a los temas. Ahora desde aquí, solo desplázate hacia abajo, y verás este signo más que dice “Añadir nuevo tema” solo tienes que hacer clic en eso. Entonces vamos a ir a “Buscar temas ”, y vamos a teclear “Ocean WP” Entonces lo verás aquí mismo, el que dice, “Sólo hazlo” Simplemente haz clic en “Instalar” y luego haz clic en “ Activar”, así que ahora que eso está activado, también vamos a instalar algunos plugins. El primero va a ser Ocean Extra, que es sólo un poco de añadir, un pequeño bono a nuestro tema Ocean WP. Entonces también vamos a instalar un constructor de páginas llamado Elementor. Elementor es lo que nos va a permitir arrastrar y soltar y simplemente construir visualmente nuestra página. Entonces para hacer esto, vamos a pasar, y vamos a “Plugins” y luego vamos a “Añadir nuevo”. Entonces en la parte superior, probablemente verás este tema recomienda el siguiente plugin, Ocean Extra. Puedes instalarlo desde aquí, o puedes buscarlo en la barra de plugins de búsqueda aquí. Pero vamos a hacer iniciar instalar plugin aquí mismo. Simplemente vamos a hacer instalar. Dirá que está instalando Ocean Extra. Entonces ahora dice plugin activado con éxito. Entonces volvamos a “Plugins” y luego vamos a “Añadir nuevo”. Ahora vamos a conseguir el constructor de páginas Elementor. Entonces vamos a buscar plugins, y solo escribiremos Elementor si deletreo eso bien. Entonces Elementor page builders, el primero aquí, tiene más de un millón de instalaciones activas. Entonces vamos a seguir adelante y dar click en “Instalar ahora” Luego haga clic en “Activar” así que ahora te llevará a esta pequeña página de inicio. Puedes ver tutorial si quieres, pero sólo vamos a salir de eso. No necesitamos eso. Entonces antes de empezar a personalizar realmente nuestro sitio web, te proporcioné una plantilla que vamos a instalar ahora. Entonces desde tu panel de control, verás la pestaña Elementor por aquí. Simplemente sube a “Mis Plantillas” y luego en lugar de hacer “Añadir Nueva Plantilla”, así es en realidad como las creas, pasa a la “Importar Plantillas” arriba en la parte superior, y luego dirá “Elegir Archivo” solo vamos a presionar “Elegir Archivo”, y los míos están en mi escritorio. Pero si los descargas, probablemente estén en tu carpeta de descargas. Así que pasa a plantillas de sitios web personales, y haremos primero el sitio web personal. Entonces tengo la plantilla de sitio web real y luego tengo la plantilla de pie de página. Pero ahora mismo, vamos a hacer la plantilla personal del sitio web y hacer clic en “Abrir” y luego “Importar ahora” Ahora, volvamos a “Importar plantillas” elegir el archivo y también pondremos en ese pie de página, “Abrir” e “Importar ahora”. Ahora tenemos nuestra página web y nuestras plantillas de pie de página aquí. Entonces vamos a repasar y hacer una página de inicio. Así que basta con subir a la “Pages Tab” y luego ir a “Add New”. Entonces desde aquí, solo cierra esta cosa del maravilloso mundo de bloques, solo cierra eso y solo llamemos a esta página de inicio. Entonces, a la derecha, simplemente ve a estos desplegables por aquí y haz clic en “ Atributos de página ” y luego cambia la plantilla predeterminada a Elementor de ancho completo. Esto es realmente importante. Entonces a partir de aquí, entonces sólo sube a “Publicar” y dirá: “¿Estás listo para publicar?” En realidad nadie está mirando nuestro sitio. Esta es sólo nuestra forma de salvarlo. Por lo que solo tienes que hacer click en “Publicar”. Entonces sube a tu nombre en la parte superior izquierda y haz clic en “Visitar sitio” y ábrelo en una nueva ventana. Desde aquí, basta con hacer click en “Personalizar”, y lo que queremos hacer es que ahora acabamos de hacer esta página de la página de inicio, pero nuestro tema, que es Ocean WP, no está reconociendo esto como la página de inicio. Todavía nos está mostrando esta plantilla de post hola mundo, y queremos deshacernos de eso. Por lo que queremos hacer la conexión a nuestra nueva página de inicio que acabamos de crear. Así que baja a la configuración de la página de inicio y luego haz clic en “Una página estática” y luego debajo de la página de inicio, haz clic en el “Botón Seleccionar” y luego simplemente haz clic en “Página de inicio”. Entonces si hubieras hecho clic en “Guardar borrador” en lugar de “Publicar”, probablemente no veas esto aquí. Tienes que hacer clic en publicar para que aparezca esta nueva página de inicio. Entonces ahora que hemos seleccionado la página de inicio, puedes ver que tenemos esta página de ancho completo con la que ahora podemos jugar, y ahora podemos ir a agregarle nuestra plantilla. Entonces a partir de aquí, vuelva a hacer clic en “Publicar”, y luego haga clic en la “X” y vayamos a “Editar página” En realidad voy a cerrar de esta vieja ventana aquí. Entonces a partir de aquí, hagamos “Editar con Elementor”. Entonces aquí está la parte divertida ahora podemos empezar realmente a personalizar. Por lo que la forma en que funciona Elementor es, solo puedes hacer clic en este nuevo botón de sección y luego simplemente seleccionar una estructura. Simplemente seleccionaremos la principal. Si haces clic en este pequeño Cubo de Rubik buscando símbolo aquí arriba, ahora puedes arrastrar en todos estos widgets. Por lo que puedes arrastrar en una imagen si quieres, o encabezamiento, que es solo texto, y luego puedes cambiar el texto. Solo puedo escribir mi nombre, por ejemplo, y luego puedes editarlo, cambiar los colores, todas esas cosas. Pero primero, lo que voy a hacer es añadir nuestra nueva plantilla para que todo esté hecho para ti. Yo sólo quería mostrarte muy rápido cómo funciona todo esto. Entonces primero, pasemos al “Agregar plantilla ”, que es este botón de carpeta pequeña, y luego solo subamos a “Mis Plantillas” Entonces, verás nuestras dos plantillas que importamos. Por lo que haremos el sitio web personal uno y luego solo tienes que hacer clic en el “Botón Insertar”. Entonces dirá: “¿También quieres importar todos los ajustes de documentos?” Basta con hacer click en “Sí”. Ahí vamos, así que ahora tenemos todos nuestros widgets que he creado para ti aquí. Pero arruinó nuestro diseño de página completa. Entonces volvamos atrás y cambiemos eso. Por lo que en el lado izquierdo aquí, verás “Page Layout” todo el camino en la parte inferior. Si no ves esto, está debajo de la pestaña “Configuración”. Simplemente ve a “Elementor Full Width”, y ahora acaba de actualizarse de nuevo. Entonces esto es lo que se supone que tiene que parecer, en realidad vamos a deshacernos de este pequeño título aquí arriba. Vamos a hacer nuestro encabezado, todo eso. Pero primero, vamos a trabajar en estas secciones principales. Entonces tengo aquí todas estas imágenes de muestra para ti, que son todas en blanco y negro. Vamos a cambiarlos a todos. Vamos a cambiar texto y así sucesivamente. Para que como puedes ver, videos, sección de fotos, solo todo lo que necesitas página de contacto. Entonces aquí mismo es en realidad donde va a ir nuestro formulario de contacto. Te mostraré cómo hacer eso más tarde. Entonces vamos hasta la cima y abrimos de nuevo esta pequeña barra lateral. Entonces así es como lo abres y lo cierras. Basta con hacer click en “Actualizar” ahora que tenemos eso importado, y vamos a ir a deshacernos de este pequeño título aquí arriba. Entonces salgamos a estas pequeñas tres líneas, parece una hamburguesa, haga clic en eso, y luego vayamos a “Salir a Dashboard”. Después sube de nuevo a visitar el sitio. No tienes que abrirlo en una ventana nueva esta vez y luego solo tienes que hacer clic en Personalizar. Esta pestaña Personalizar es como personalizamos nuestro tema y luego la edición con la pestaña Elementor es como personalizamos nuestra página principal. Ahora mismo este título aquí forma parte de ese tema, así que queremos deshacernos de eso. Vamos a bajar a la pestaña Opciones generales y luego a partir de aquí vamos al título de la página. Entonces sólo vamos a ir bajo estilo y está en defecto ahora mismo, vamos a cambiar eso a oculto. Ahora se ha ido, lo cual es impresionante. Hagamos click en “Publicar” y luego solo pinchamos en la X y volvamos a editar con Elementor. Sigamos adelante y cambiemos este cuadro principal aquí por uno propio. Si estás siguiendo junto a mí, también proporcioné una carpeta llena de imágenes seguidas para ti, que puedes encontrar yendo a la pestaña de proyectos y buscando bajo recursos. Las únicas que no vienen con son fotos de mí mismo porque esta es mi página web, así que vas a querer poner una foto de ti mismo en esta sección. Para ello basta con hacer clic derecho y luego hacer clic en sección Editar y luego si pasamos al estilo, verás la pestaña de fondo. Si está cerrado, solo ábrela y luego podrás ver las imágenes aquí. Si no tienes nada aquí, probablemente se vea algo como esto y solo puedes hacer clic en “Clásico”, “Tipo de fondo” y luego simplemente ir a la imagen. Subiremos nuestra propia imagen. Desde aquí, tienes tu mediateca, cual no tiene nada en ella ahora mismo. Bueno, en realidad tiene las fotos de muestra que te di, así que puedes quedarte ahí dentro. Tenemos nuestra muestra de cabra por aquí. Volvamos a subir archivos y subamos aquí una foto de nosotros mismos. Mis imágenes, y luego solo voy a seleccionar esta de mí y dar clic en “Abrir”. A continuación, haga clic en “Insertar medios”. Algo a tener en cuenta acerca de poner fotos en tu sitio web es que si hay demasiado alta calidad, podría verse fantástico, pero tu sitio web va a tardar una eternidad en cargarse, lo cual no queremos. Queremos que se cargue dentro de un segundo o dos. Para arreglar esto, lo que puedes hacer es ir a Optimizilla. Aquí vamos optimizilla.com, tiene a este viejo dinosaurio. Simplemente puedes hacer clic en “Subir archivos” y luego seleccionar tu imagen y abrirla y lo que hará el sitio es comprimir tu imagen. Te hará una autocompresión y si te desplazas hacia abajo puedes ver la diferencia. Se ven bastante similares en este momento, si quisiera realmente comprimirlo, podría bajarlo a como un 45 y probablemente veas un poco más de una diferencia, ahí vamos. Se puede ver que está un poco más pixelado pero lo que esto hace es ahorrar mucho espacio en archivos y se cargará mucho más rápido. No voy a ir tanto. Yo diría que un 70 es una compresión bastante buena, en algún lugar alrededor de 70 y luego haga clic en” Aplicar” y luego simplemente descargue esa imagen. Ahora esta imagen en realidad ya comprimí, así que sólo voy a dejar eso en mis descargas. Volvamos a Elementor. Nuevamente, éste ya estaba comprimido, por lo que debería cargarse bien. Qué puedes hacer para cambiar tu posición de tu imagen, puedes ver que estoy en centro-centro en este momento, puedes hacer top-center y va a mover un poco las cosas hacia abajo. Puedes hacer centro de fondo, me pone un poco más alto. Si estoy mirando la página así, elegí centro-centro originalmente porque simplemente se ve la mejor. Entonces tenemos este efecto de paralaje en marcha ahora mismo. Siempre que me desplace la imagen en sí no se mueve. Si querías que se moviera, puedes hacer clic debajo de Adjunto y cambiarlo para desplazarse y eso en realidad ahora se moverá con esa página. Me encanta el efecto de paralaje, así que voy a volver a eso y hacer clic en “Fijo”. También puedes cambiar el tamaño, ahora mismo está configurado para cubrir. Se puede hacer contener, lo cual se ve ridículo porque apenas estás repitiendo la imagen. En mi experiencia, la cobertura es la mejor manera de ir. Ahora si no querías que este bloque de imagen de aquí fuera tan ancho, lo que puedes hacer es pasar a la pestaña de diseño y luego verás la altura, que se establece en altura mínima. Si está por defecto, cámbialo a altura mínima y luego en este momento lo tengo establecido en un 780. Puedes bajar eso a algo así y puedes ver que ahora es mucho más pequeño si quieres ese estilo. Me encanta esa gran primera imagen, es lo que más dice de ti. Soy bastante al aire libre, así que tengo una foto mía al aire libre. Yo sólo voy a volver atrás y cambiar eso a 780, me gustó como era. Ahora te he mostrado cómo editar esa imagen principal. Si querías, o digamos que querías que estas palabras destacaran un poco más, lo que puedes hacer es ir a la pestaña de estilo y luego cerrar la pestaña de fondo y luego ir a la superposición de fondo. Lo que puedes hacer es establecer un color para esto o dar click en el “Clásico”, que es un pincel pequeño. click en “Color” en esta casita aquí y luego lo que puedes hacer es cambiar el color de la superposición. Lo que puedes hacer es ir todo el camino al negro si quieres y entonces la opacidad es lo oscuro o lo claro que quieres que sea. Un uno es como un 100 por ciento y luego un cero es obviamente cero por ciento. Si quisieras, podrías hacer eso. A mí me gusta que esa imagen principal sea cristalina. Ya puedo ver las palabras totalmente bien. Voy a traer esto de vuelta a la superposición de fondo transparente y cerrada. En realidad vamos a hacer eso para estas secciones aquí abajo. Estos ya tienen superposiciones de fondo sobre ellos. Pero para éste, me gustaría. Cambiemos nuestros textos. Bastante simple. Solo tienes que hacer doble clic y puedes editarlo ahí mismo en la página. Podría poner mi nombre y hago todas las gorras, me gusta ser grande y audaz e importante. O puedes cambiarlo por aquí, bajo título o si querías también podrías ponerlo todo a la izquierda o podrías ponerlo a la derecha y así sucesivamente cambiando la alineación. Lo que hay debajo de esto es un divisor. Yo sólo quería este pequeño espacio entre mi nombre y luego lo que hago. El divisor, si haces click en eso, ya veré si puedo desplazarme para conseguir eso en un mejor lugar, ahí vamos. Si haces clic en eso, puedes cambiar el ancho de la misma. Ahora mismo está en 41, puedes hacerlo todo el camino. Puedes convertirla en una línea realmente pequeña si quieres. Yo sólo voy a volver a 41. Se puede cambiar el peso. Yo lo tengo puesto a un dos. Puedes hacerlo realmente grueso si quieres. A mí me gusta la línea delgada. Entonces ahora vamos a reemplazar este texto por cosas geniales que hacemos. Tengo este set a cursiva, por lo que se ve un poco diferente a nuestro rubro principal. Pongamos esto como videógrafo. Tengo antecedentes en video y fotografía. A mí me gusta viajar y hacer algunas películas y esas cosas, así que voy a poner algo de eso en mi página web. Haré camarógrafo, cambiaré esto a fotógrafo. Y entonces por supuesto, lo que estoy haciendo ahora mismo, desarrollador web. Y si no es cursiva, o tal vez quieras cambiarla de cursiva, puedes seleccionarla todo. Y luego sale este pequeño menú y puedes hacer clic en él o deshacer clic en él, si quieres. A mí me gusta cursiva. Entonces si te gustaría cambiar la fuente, como que olvidé esta parte, para el encabezado principal real. Entonces digamos que no quieres esta fuente. Haga doble clic en eso, o en realidad, puede simplemente seleccionar todo el widget en sí haciendo clic en esta herramienta de lápiz. Y luego ve al estilo, y luego ve a la tipografía, y verás de nuevo esta pequeña herramienta de bolígrafo. Haga clic en eso, y podrá cambiar la familia de fuentes a lo que desee. Por lo que lo tengo configurado como predeterminado. Simplemente seleccionaré uno al azar. Hagámoslo. Para que puedas cambiar la fuente, pero voy a volver a la predeterminada. Y luego puedes cambiar el tamaño también. Por lo que se establece en un 60. Se puede hacer enorme, se puede hacer un más pequeño, pensó que 60 era un punto parejo bastante bueno. Y luego tienes tu configuración habitual de edición de texto aquí abajo. Entonces, bajemos y trabajemos en esto sobre mi sección. Entonces, vamos a dar click en esta sección. Entonces la parte complicado aquí es, tienes una sección que es el azul, que es toda la sección. Y luego dentro de esa sección, tienes dos columnas. Y estas dos columnas se establecen a ancho completo. Por lo que puede ser un poco complicado seleccionar realmente uno u otro. Entonces te mostraré un pequeño truco. Si desea seleccionar la sección real, puede hacer clic derecho arriba en el área azul y simplemente haga clic en editar sección. Si quieres seleccionar la columna, verás este pequeño símbolo gris. Se ve como dos columnas. Simplemente puedes hacer clic derecho en eso y hacer clic en Editar columna. Entonces ahora que lo hemos hecho, realmente queremos tener seleccionada la columna, ir al estilo, y luego podemos cambiar el fondo. Entonces, eliminemos este, y sumemos uno nuevo. Entonces, voy a volver a subir archivos, seleccionar archivos, y luego sólo voy a seleccionar esta foto mía. Entonces, de nuevo, estas son las únicas dos fotos que no tienes contigo. Deberías estar poniendo uno de ti mismo. Así que dar click en abrir. Y otra vez, no te olvides de comprimir tus imágenes. Entonces vayamos a insertar medios. Ahí estamos. Y luego a partir de aquí, vamos a dar click en esta columna, por lo que puedes hacer clic en ella o hacer clic derecho y pulsar Editar columna. Vayamos al estilo de nuevo, y cambiaremos ese fondo también. Entonces borra eso. Y vamos a añadir uno nuevo. Acude a subir archivos, selecciona archivos, y luego la sigue a lo largo de las imágenes. Haremos doble clic en eso. Y voy a añadir el de este desierto, me gusta ese desierto. Entonces voy a ir con este tema al aire libre, y voy a hacer una especie de contrastes calientes y fríos. Voy a tener un montón de fotos del desierto mezcladas con fotos de nieve. Entonces a partir de aquí, solo haremos clic en insertar medios. Y puedes ver que esto ahora tiene una superposición de fondo encima. Entonces vamos a cerrar eso. Y si querías editar eso, solo tienes que ir a la superposición de fondo. Y luego puedes cambiar la opacidad. Entonces, podría tenerlo más claro, más oscuro, y así sucesivamente. Y si alguna vez haces algo y estás como, oh porquería, necesito deshacer eso. Simplemente toca control z. y puedes deshacer. Y de nuevo, se puede cambiar el color también de esa superposición. Está bien. Entonces edita este texto de la misma manera, solo puedes hacer doble clic. Si vas al estilo, puedes cambiar la fuente y así sucesivamente y el color del texto. Ya te mostré todo eso. Entonces aquí solo agregas lo que quisieras de ti mismo. Yo sólo voy a dejarlo. Y entonces ahora nuestro botón. Entonces esta es una parte divertida. Entonces si hace clic en el símbolo de la plumilita aquí, o haga clic derecho y haga botón de edición. Nos llevará a donde ahora podemos cambiar el botón. Por lo que escribí ver portafolio aquí. Y puedes poner en cualquier enlace para esto que quieras poner en él. Entonces si tienes un enlace separado a tu portafolio, puedes ponerlo aquí. Tengo esta configuración como ancla, para ir a mi sección de películas o sección de videos que, si presiono el botón, en realidad saltaría hacia abajo a esta sección. Entonces, en realidad voy a dejar eso y te voy a mostrar cómo crear estos anclajes un poco más adelante. Pero aquí es donde pondrías en tu URL. Y si quieres cambiar todo sobre el botón, como el estilo y demás, solo sube al estilo. Se puede cambiar el texto del botón haciendo clic en tipografía. Y puedes cambiar el color del texto, el color de fondo. Por lo que el color del texto se establece automáticamente en blanco. Si quiero cambiar el color de fondo, puedo. Entonces si quiero recordar este color, voy a simplemente copiar eso. Entonces ahora, puedo cambiarlo. Entonces si quiero que sea verde y así sucesivamente. Para los botones, te recomiendo cosas como el naranja. Te recomiendo una especie de azul claro y un verde. Destacan realmente bien, entre todo lo demás. Y tus botones son tu mayor llamada a las acciones en tu página web. Entonces si estás vendiendo algo o quieres que la gente haga clic en tu portafolio, tener estos bonitos botones audaces es una gran idea. Entonces, sólo voy a volver a mi color naranja original. Y entonces cerraré eso. Y luego el color del ratón, si hace clic en la pestaña de desplazamiento, se trata de un naranja más oscuro. Entonces cada vez que lo repaso, se puede ver que lo tengo creciendo y, lo tengo se pone un poco más oscuro. Entonces digamos, quiero que eso sea aún más oscuro. Simplemente bajaré eso así. Y ya puedes ver ahora es una especie de pardo, naranja-ish. Así que cierra eso y luego la animación de hover está configurada para crecer. Para que pudieras hacer lo que quisieras. Digamos que rota, todo el botón girará un poco, para que puedas escoger lo que quieras ahí. Simplemente me gusta el regular crecer, agradable y simple. Y una vez que hayas creado todos estos elementos, no importa si es una sección completa, o simplemente un botón. Lo que puedes hacer es, haz clic derecho aquí y luego solo tienes que hacer clic en duplicar. Y luego puedes arrastrar ese nuevo botón por donde lo desees. Entonces si quisiera ponerlo aquí abajo, podría. Entonces eso es impresionante. Entonces voy a controlar z Deshazte de eso. Está bien. Entonces bajemos y reemplacemos a esta cabra. Tenemos que deshacernos de nuestra muestra de cabra. Entonces si solo haces clic derecho en esta área y haces sección de edición, ve al estilo, elimínalo. Pongamos nuestra nueva. Entonces ve a subir archivos, selecciona archivos. Y voy a seleccionar el desierto dos. A mí me gusta esta imagen épica. En realidad es una foto que saqué, fuera en Perú, de mi amigo Alex parado en las dunas. Entonces eso es genial. Entonces hagamos insertar medios. Y ahí vamos. Esto también es paralaje, por lo que es genial. Va de esta foto de mí y luego, bam a él. Entonces nadie va a saber eso, ese no soy yo. Entonces solo voy a fingir que soy yo. Nuevamente, si quieres hacer esto más pequeño, ve a la pestaña de diseño y luego cambia la altura mínima hacia arriba o hacia abajo, como quieras. Está bien. Entonces, tengo estos iconos aquí dentro. Entonces cambiemos esos. Entonces la forma en que conseguí estos fue otra vez, sube a este Cubo de Rubik símbolo de aspecto. Y estos son solo ícono regular, son cajas de iconos en realidad. Entonces si arrastras eso, así es como creas esos. Entonces cambiemos estos. Entonces vamos a dar click a ese botón o a la derecha. Va a seguir diciéndome, si sé hacer clic derecho, solo tienes que hacer clic. Lo tengo. De todos modos, edita cuadro de iconos y puedes cambiar el texto. Aquí puedes cambiar el pequeño título. Entonces cambiemos esto por películas. Si puedo deletrear eso bien, ahí vamos, películas. Y puedes cambiar el icono. Por lo que sólo voy a dar click en eso. Escribamos en película. Y vamos a conseguir esta pequeña tira de cine. Aquí hay un millón de iconos. En realidad no millones, pero hay mucho. Podrás escoger todo tipo de diferentes. Y también tengo este hover set para especie de ponerse azul y crecer. Entonces si querías cambiar eso, solo tienes que ir al estilo y luego ir a flotar. Y se puede cambiar ese color y la animación. Y si estás en la pestaña normal, puedes cambiar el tamaño del icono, si lo deseas, y el color también debajo del color primario. Entonces cambiemos este por fotos. Y sólo haremos un símbolo de cámara. Y cambiaremos este por diseño web. Y luego cámbialo a una laptop. Ahora bien, si quieres vincular estos a las cosas. Entonces ahora mismo, si se cierne sobre ellos, es como ooh, puedo dar click en eso. Entonces si realmente quieres tenerlo ir a un link, hay un pequeño botón que dice link to, o lo siento, pequeña sección que dice link to. Y puedes simplemente poner en tu URL ahí. Y de nuevo, podrías hacer esto como un botón de salto a otro lugar, lo cual te mostraré pronto. En realidad, no, te voy a mostrar ahora mismo. Entonces hagamos hashtag. Por lo que siempre tienes que hacer hashtag si estás vinculando a una parte diferente de la misma página. Entonces hagamos películas hashtag. Y lo que queremos hacer es sólo tener este salto directo a esta sección. Y queríamos aterrizar casi así. Por lo que en realidad no tienes que establecer eso. Todo lo que tienes que hacer es escoger la sección. Entonces si hago clic derecho en esta zona azul de aquí arriba, y hago sección de edición, lo que vamos a hacer es pasar a avanzada, y aquí es donde vamos a crear un ID de clase. Entonces sólo vamos a llamar a esto películas, sin hashtag. Y lo que esto hace es decir, oye, esta es la sección de cine. Para que cada vez que presionemos ese botón, simplemente se vaya, oh, yo sé lo que es y luego bajar a él. Entonces déjame mostrarte de lo que estoy hablando. Entonces haga clic en actualizar. Y luego cerraré esto y solo te mostraré. Entonces si tuviera que hacer clic en ese botón, boom, ahí vamos. Entonces así es como crear un botón de salto. Realmente genial. Me encantan los diseños de una página. Entonces los botones de salto son como mi mejor amigo. Entonces vamos a abrir esta copia de seguridad y hagamos que las fotos una vayan a #photos y el diseño web irá al diseño #web. Y voy a bajar y cambiar estos también. Entonces sección de fotos, asegúrate de estar en la sección principal, no solo en una de estas columnas o widgets. Sección principal, ir a avanzado, ID de clase, llamémoslo Fotos. Y esto tiene que coincidir perfectamente con lo que pones como ese hashtag. Y bajemos al diseño web, click derecho, avanzado, diseño web. Y mientras estamos aquí, vamos a cambiar de contacto también. Así que haga clic derecho en avanzado y contacte, y solo haga clic en actualizar. Ahora bien, si tuviera que hacer clic en alguno de estos, boom, me lleva abajo. Todos están trabajando. Cambiemos nuestros títulos. Ya no quiero que esto guarde videos. Voy a hacer doble clic en eso y voy a guardar Films. Tengo este set a donde sólo muestra dos videos. Lo que hice para conseguir estos videos es ir al símbolo de ese pequeño Cubo de Rubik, y luego es solo el widget de video y luego los arrastras aquí. Pero ya tengo dos set aquí. Digamos que querías cuatro. Lo que te gustaría hacer es tener dos columnas, la forma en que la tenemos, y estas columnas tienen widgets dentro de ellas. Ahí está la sección principal, una columna, y luego un widget, es éste. Si quisiera, podría hacer clic derecho y duplicar eso. Ahora va a crear uno abajo y yo podría hacer lo mismo aquí. Ahora tengo cuatro y mi página se abre automáticamente para crear ese espacio. Pero quiero dejar sólo dos, así que voy a borrar estos. Yo solo quiero mostrarte cómo hacer eso. Yo me voy a cambiar. Justo antes de cambiar estos videos, voy a cambiar este botón. Voy a dar click en eso o hacer clic con el botón derecho. Entonces quiero asegurarme de que tengo el enlace correcto aquí. Ahora mismo tiene el enlace a mi canal de YouTube. Si tuviera que hacer clic en eso se abrirá en una nueva ventana. Se va a mi Canal de Viajes. Como dije, me gusta hacer videos y me gusta viajar, así que solo los junté e hice este otro canal de YouTube, no tiene muchos suscriptores pero ahora si quieres suscribirte a él, adelante. Volvamos atrás y asegurémonos de que ese enlace esté cambiado.Entonces si queremos cambiar estos videos, basta con hacer clic derecho en “Editar video” y luego poner una nueva URL. Voy a borrar la automática que tienen ahí dentro para mí.Voy a volver a mi canal de YouTube y sólo voy a agarrar un video.Este Perú es mi más popular. Voy a dar click en eso y agarraré la URL en la parte superior. Sólo volvamos y pongamos eso y luego nos vamos. Tiene mi video ahí dentro. Aquí puedes cambiar un montón de los ajustes. Puedes hacer que se reproduzca automáticamente. Puedes deshacerte de los controles del jugador, puedes hacerlo bucle, y así sucesivamente. El tamaño del video dependerá del espacio en el que se encuentre. Digamos que sólo tenía una columna en lugar de dos, y este espacio era el doble de grande. Bajó por aquí. Este video se vería el doble de grande. Es receptivo para encajar en ciertos espacios. Sólo ten eso en cuenta. Cambiemos este. Hagamos clic derecho en el bolígrafo, “Editar video”. Eliminemos eso y vayamos a agarrar otro video. Haré mi video de Nicaragua. Ahí vamos. URL, copia y pongamos eso en. Impresionante. Seguir adelante, fotos, misma cosa. Se puede editar esto de la misma manera. Si queremos cambiar estas fotos. puedes ver ahora tenemos una gran columna grande y la razón es porque esto en realidad es una galería. En lugar de hacer clic en una imagen individual, tengo esta configuración como galería que es su propio widget. Si hacemos click en “Editar galería de imágenes”, podemos editar todo el widget y tenemos cuatro imágenes diferentes aquí. El motivo por el que no he configurado de esta manera es porque si haces click en una, se tirará hacia arriba en esta pequeña caja de luz. Hará más oscuro el resto de tu página web. Se puede hacer clic en las flechas y desplazarse por las imágenes, lo cual es realmente genial. Vayamos a editar esos. Volvamos atrás. “Editar galería de imágenes”. Deja despejar estas imágenes. Dirá, “Reset Gallery”. Sólo diremos: “Eliminar”. Iremos a “Añadir imágenes”. Después iremos a, “Subir imágenes” “Seleccionar archivos”. Agarramos a Machu Picchu, agarraremos la catedral, el desierto, y la cascada. Estas son en realidad todas las imágenes que tomé en mis viajes. Todos ustedes llegan a tener esos.Por favor, no los revendan. Si lo haces al menos dame un trozo del dinero. Asegúrate de que todos estén seleccionados. Se seleccionan los cuatro. Hagamos “Crea una nueva galería”. Después puedes seleccionar qué imagen quieres primero. Simplemente te mostraré que puedes cambiar estos alrededor. Hagamos primero Machu Picchu. Vayamos a la galería interior. Ahí vamos. Ahora tenemos las cuatro imágenes aquí dentro. Ahora si te das cuenta, ¿Qué carajo, por qué esta es más grande que la otra? Está tirado de todo el look. Eso no se ve bien. Arreglemos eso. Si vuelves a “Agregar imágenes” y luego vamos a “Editar galería”. Demos click en esta imagen de cascada. Ese era el que era más grande. En realidad, haga clic en una de estas para que pueda ver el tamaño es de 1920 por 1080, y la cascada es de 2048 por 1365. Cambiemos eso. Vayamos a “Editar imagen”. Vamos a ir a “Relación de aspecto” y vamos a cambiar eso a 1920 para 1080. Entonces lo que vamos a hacer es simplemente arrastrar. Simplemente vas a dar clic en cualquier parte de aquí y arrastrarlo hacia arriba. Ahora eso tiene esa perfecta relación de aspecto de 1920 y luego solo selecciona la esquina y arrastra eso para que sea ancho completo y solo asegúrate de que esté posicionada donde quieras. Sólo diré algo así. Después vuelve a hacer clic en la pequeña herramienta Recortar imagen. Ahora acabamos de recortar nuestra imagen. Vamos a darle a “Guardar”. Hay unos clics para realmente hacer eso. Fue confuso la primera vez que lo hice, así que asegúrate de hacer todos esos pasos. Ahora solo hagamos “Insertar galería” y ahora esa imagen está fija. Por lo que ahora se ve bonito y limpio. Nuevamente, si hacemos clic en estos, sólo podemos pasar por todos ellos. Enfriar. Pasando, siguiente sección, “Diseño de sitios web”. Asegúrate de cambiar este botón. Tengo este set es azul. Es sólo ir a mis contactos. Yo sí conseguí una copia. Digamos, alguien quería que hiciera su sitio web, solo quisiera que eso saltara todo el camino hasta mi página de contacto. De nuevo, te mostraré cómo hacer un formulario de contacto. Asegúrate de editar eso y si queremos, para que veas que todos son individuales. Estas son todas cajas de iconos. Si voy al cubo del pequeño Rubik y originalmente arrastré y caja de iconos y lo que hice fue en lugar de tener, estar arriba y abajo así, hice composición de ojos y me fui y así es como hice que se viera así. También puedes hacer lo correcto si quieres ponerlo en el lado derecho de la pantalla. Pero sólo eliminemos eso. Yo sólo quería mostrarte cómo hice eso. También puedo crear enlaces a todos estos. En este momento solo tengo estos como símbolos solo para mostrarte lo que hago y todas estas. Puedo escribir una pequeña descripción. Pero si quisiera, en realidad podría hacerlos enlazar a diferentes secciones poniendo aquí un enlace. Entonces otra vez en esta columna es justo donde tengo ejemplos de algunos otros sitios web que he hecho que si ustedes son algunos de mis seguidores, eso me ha estado siguiendo por un tiempo, estos son en realidad tutoriales viejos que hice. También puedes cambiarlos con solo hacer clic ahí y luego hacer “Elegir imagen” y poner tus propias imágenes. En realidad ya lo olvidé, no cambié los fondos aquí, así que volvamos a la “sección Cine” y hagamos “Editar sección”, vaya a la “pestaña Estilo”. Sólo cambiemos ese trasfondo. Elimina esa. Hagamos una foto de montaña. Quieres mezclarlo un poco y además tener ese set en Fix, que es nuestro paralaje. Bajemos a la sección de fotos, cambiemos ese fondo para ir al estilo, deshagamos de la muestra de cabra. Después sólo tienes que seleccionar el desierto y hacer “Insertar medios”. Después bajaremos a “Diseño de sitios web” y luego haremos “Editar sección”. Cambia este para que vayamos a “Subir archivos”, seleccione archivos y hagamos el Space one. Haga clic en “Abrir”, “Insertar medios” y ahora tenemos nuestro espacio, que es genial. Entonces, por último, hagamos contacto, “Editar sección”, muestra de cabra y subamos nuestra última. ¿ Qué es lo que aún no seleccionamos? Las dunas. Hagámoslo. A continuación, haga clic en “Insertar medios”. Ahí vamos. Antes de pasar a poner en nuestro formulario de contacto, solo quiero mostrarte si quieres cambiar los colores de todas estas diferentes secciones de título, solo tienes que hacer clic derecho, ir a “Estilo” y luego ir a “Color”. Tengo este conjunto como un gris muy oscuro. El negro completo es algo que no quieres poner en tus sitios web. Negro completo, simplemente no se ve tan profesional como un gris oscuro, por lo que muchas empresas harán gris oscuro. Nuevamente, con un blanco, podrías hacer ya sea un blanco completo o podrías hacer un gris claro apagado y luego podrías cambiar tu título a negro. Eso sólo ha tenido que cambiar esos colores de esas secciones. De nuevo, si quiero hacer algo realmente oscuro, solo hago 1_c, 1_c, 1_c Esto es sólo un gris muy oscuro. 6. Paso nº5: configura tu formulario de contacto: El paso número 5 es configurar nuestro Formulario de Contacto. Para obtener nuestro formulario de contacto, solo actualicemos esto y luego vamos a ir a este pequeño símbolo de hamburguesa y luego ir a Salir a Dashboard. Después baja a Plugins y luego ve a Agregar nuevo y luego solo iremos a Buscar plugins y escribiremos en Formulario de Contacto 7 elementor y luego si bajamos, verás el widget Formulario de Contacto 7 para el constructor de páginas elementor. Esa es la que queremos, así que basta con hacer clic en Instalar ahora y luego hacer clic en Activar. Ahora que uno está activado, vamos a volver a Agregar nuevo, y vamos a conseguir el plugin Formulario de Contacto 7. Uno era sólo el widget para elementor y el otro es el plugin Formulario de Contacto real así que lo hacen Instalar ahora en el plugin Formulario de Contacto 7 y luego activar.Okay cool. Ahora que eso está hecho, solo pasa a este lado izquierdo y verás la sección de contacto. Basta con dar click en Formulario de Contacto y luego verás que tenemos Formularios de Contacto 1, cual está bien así que solo tienes que dar click en eso y puedes cambiar el nombre si quieres así que solo llamaré a este Formulario de Contacto de Dale y a lo que vamos a do es ir a la pestaña Correo y luego desde aquí puedes cambiar la dirección de correo electrónico a la que querías acudir. En este momento se va a mi sitio web creativo Pro Gmail por lo que esto debería poner automáticamente tu correo electrónico en. Pero si no lo hace, adelante y pon tu e-mail y luego sube a la pestaña Mensajes y desde aquí puedes cambiar lo que dicen todos los mensajes para que cada vez que envíen uno con éxito, dirá: “Gracias por tu mensaje ha sido enviado”. No lo sé. Se ha enviado sonidos como Dwight astuto desde la oficina. Es un poco demasiado formal, así que sólo hagámoslo un poco más divertido. Digamos: “Se recibió su mensaje” Señal de exclamación. Wow, no sé deletrear. Ahí vamos. Tu mensaje fue recibido cool, y no se pudo enviar. Se produjo un error al intentar enviar tu mensaje. Por favor inténtalo de nuevo. No queremos que vuelvan a intentarlo más tarde, solo voy a entrar Por favor inténtalo de nuevo. por lo que puedes prácticamente solo editar todos estos como quieras. Una vez que hagas eso, ahora vamos a ahorrar y déjanos entrar realmente y añadirlo a nuestra página. Subiremos a Nuestro nombre y luego vayamos a Visitar sitio y luego iremos a Editar con elementor. Ahora vayamos todo el camino hasta el fondo otra vez y aquí es donde lo vamos a sumar. Entonces Si vas a tus widgets por aquí y te desplazas todo el camino hasta la parte inferior. Ahora deberías ver el Formulario de Contacto del Vacío 7 y solo arrastra eso y luego dirá selecciona Formulario de Contacto y solo seleccionaremos Contacto de Dale o lo que fuera tu Formulario de Contacto. Enfriar. Se acaba de agregar y es transparente por lo que no puedo querer arreglar eso. Yo quería tener fondos blancos aquí en estas líneas. Lo que vamos a hacer es pasar a Style Contact Form y luego vas a ver todas estas pequeñas secciones donde puedes poner algún código corto. Pero vamos a ignorar todos estos excepto el área de texto, CSS, y el texto de tipo Input. Desde aquí se puede ver que tiene esta pequeña sugerencia. Dice El fondo es rojo, dice que eso es lo que se puede poner en cambiar el color del fondo. Si solo sigues lo que dice, es bastante simple así que solo teclea fondo, colon, y digamos solo blanco y luego boom, nuestro fondo es blanco, lo cual es genial. Yo sólo voy a copiar eso y voy a pegar eso también en este, que es el área de texto, que también es donde pones tu mensaje. Ahí va, todo es blanco. Eso realmente no fue ningún código no fue demasiado aterrador. Entonces déjennos dar click en Actualizar para que queremos asegurarnos de que estamos ahorrando de vez cuando y si le gustaría cambiar el color del botón, lo podemos hacer aquí también. Si tan solo desplázate hacia abajo y vas al botón Enviar, también puedes cambiar ese color de fondo así que solo cambiaremos ese real rapido para que te pueda mostrar así que vamos a hacer fondo. Digamos solo rojo, cambiará a rojo. Se puede hacer azul y no se pone azul oscuro. Voy a hacer azul claro y se quedará como azul claro. El azul claro es el predeterminado y luego también puedes hacer el botón de desplazamiento también, que está justo debajo de aquí. Pero de nuevo, voy a dejarlo de la manera que es. Ahora podemos ir por aquí y solo puedes hacer clic derecho en este widget, que es tu lista de iconos y puedes editar tu número de teléfono y tu correo electrónico y tu dirección. Esta lista de iconos puedes cambiar todos los símbolos que puedas cambiar tu número de teléfono y luego cambiarlo a cualquier símbolo que quieras algunos, tal vez quieras el formulario con el cuadrado en él, y así sucesivamente. Funciona como todos los demás iconos y puedes cambiar su color yendo a Estilo y luego yendo a Icon. Pero los voy a dejar como son y luego el mapa, si editamos Google Maps, podemos poner en cualquier dirección así que acabo de poner en Silicon Valley, en realidad no vivas ahí y ni siquiera estuviste ahí. Simplemente suena techie, así que por eso tiré eso ahí dentro. Pero puedes poner en tu dirección de negocio o si ni siquiera quieres esta cosa, solo puedes eliminarla por completo. Aparte del encabezado y el pie de página, este sitio web se ve fantástico. Más o menos todo está funcionando correctamente. Todos los botones están enganchados. Nosotros hemos puesto nuestros anclajes para que cuando lo necesitemos, simplemente podamos hacer click en algo y nos lleve a donde necesitamos ir. 7. Paso 6: añade tu cabeza y pie: Por lo que ahora podemos pasar al paso número seis, que es agregar tu encabezado, y tu pie de página. De acuerdo, así que pasemos a actualizarnos, y lo que vamos a hacer es, vamos al ícono de la pequeña hamburguesa y vamos a, salir al tablero. En realidad, volvamos atrás, vamos a visitar sitio. Perdón por eso, y vamos a pasar a Personalizar. Genial, así que aquí está tu encabezado está súper en blanco y aburrido en este momento. Entonces cambiemos eso. Entonces, Pasemos primero a la barra superior, y vayamos a General, y solo desmarquemos, habilite para barra, esa es esa pequeña barra en la parte superior del encabezado, dice: “Coloca tu contenido aquí”. Nosotros queremos deshacernos de eso, así que eso se ha ido, y volver, y luego vamos a pasar a Header, y luego vamos a pasar a General, y luego puedes cambiar el estilo de tu encabezado. Entonces si quieres, podrías hacer un encabezado transparente, cual creo que voy a ir. Entonces ahora puedes ver que eso se ha ido, es totalmente transparente, y lo que puedes hacer si quieres es bajar a la parte inferior donde dice, ajustes de encabezado transparentes y seleccionar color de fondo, y luego simplemente desplázate hacia abajo y solo escoge cualquier color aleatorio digamos solo negro, que en realidad no voy a escoger pero si vas al pequeño deslizador de opacidad aquí, dice un 100, puedes deslizar eso todo el camino, y ahora puedes cambiar la transparencia, lo cual es realmente genial, pero voy a aclarar esto, solo quiero dejarlo en la transparencia total por defecto. Entonces ahora lo que vamos a hacer es cambiar mi nombre aquí. Entonces, mucha gente pone aquí un logo si tienen una empresa. Lo que realmente voy a hacer es poner una firma aquí pero si tienes un logo que tienes para tu propia marca personal, te mostraré cómo ponerlo aquí también. Todo funciona de la misma manera, pero te voy a mostrar cómo hacer una firma y poner eso. Entonces, para hacer esto, simplemente sube a una nueva pestaña y escribe Sketch.io, y pulsa enter, y luego solo selecciona inglés, o cualquier idioma que hables. Entonces, Te traerán a una página que se ve algo así, y normalmente podrías dibujar aquí con un bolígrafo negro y conseguir una firma, pero queremos que nuestra firma salga de blanco. Entonces lo que voy a hacer primero, es ir a este pequeño panel de capas aquí, y sólo voy a eliminar ese Fondo, así que voy a seleccionar estos tres pequeños puntos y voy a decir borrar. Entonces eso se ha ido. Ahora lo que queremos hacer es ver lo que estamos haciendo. Si escribimos blanco en esto, podremos verlo, pero no quedará tan claro. Entonces vamos a pasar a este pequeño signo más dice Nuevo, y vamos a añadir un fondo de blueprint, pero vamos a terminar borrándolo, no te preocupes. Entonces ahora solo sube al botón de herramientas aquí arriba en la muy superior izquierda, y solo quédese con el bolígrafo de caligrafía, y ya está en blanco, si está en negro, solo puedes seleccionarlo y cambiarlo a blanco. Por lo tanto, solo mantén el bolígrafo predeterminado y solo dibuja tu firma. Yo sólo voy a hacer una firma áspera aquí, tal vez tengas que hacerlo un par de veces. Eso no es lo mejor, pero lo mantendremos. De acuerdo, entonces ahora lo que vamos a hacer es volver al panel de capas, y sólo voy a borrar ese fondo otra vez. Yo sólo lo quería ahí para poder ver lo que estaba haciendo. Entonces, solo borra, y luego ahora que eso está hecho, voy a ir al pequeño icono de exportación, tipo de se ve como un disquete, tu símbolo de guardar estándar, y queremos guardar como PNG. El motivo por el que queremos PNG va a tener este fondo transparente. Entonces, si tienes un JPEG por ejemplo, ese mismo símbolo terminará saliendo con un fondo blanco, así que lo que va a pasar es que solo vamos a tener este gran bloque blanco, que no parece nada. Por lo que un PNG, sin antecedentes en ello va a ser nuestra mejor apuesta. Entonces solo tienes que hacer clic en Guardar PNG, y luego eso irá a tu carpeta Descargas, y lo que también quiero hacer es conseguir una versión negra de mis iniciales, y te mostraré por qué en tan solo un segundo. Entonces, primero pasemos a las capas, y solo eliminemos, todas estas capas que hice para mi firma, y volvamos a las herramientas, y cambiemos nuestro contorno a negro, y si quiero, Puedo subir un poco el tamaño, hacerlo bonito y grueso, y solo voy a crear un DM, para Dale McManus, así como así, y ahora ir a exportar de nuevo y luego guardar como PNG. Enfriar. Entonces ahora podemos salir de esto, y vamos a volver de General, y vamos a ir a Logo, y luego vamos a ir a Seleccionar logo, y vamos a ir a Subir archivos y luego Seleccionar archivos, y luego solo tienes que ir a tus descargas, y luego solo selecciona, tu firma, haz clic en Abrir , está bien, ahí está, y luego haz clic en Seleccionar, y te preguntará si quieres recortar, en realidad no podemos verlo. Había un poco de espacio en el mío, así que solo arrastraré esto en un poquito pero si quieres, también puedes simplemente pulsar el botón de salto de recorte, pero solo voy a recortar ese poquito de final ahí, así que ahora se puede ver que tenemos una firma, y ahí está. Es enorme. Entonces vamos a bajar eso. Entonces, Vayamos a Max Widness, y solo llevemos eso a decir ,188, en algún lugar por ahí, tal vez 180, si quieres estar justo en el punto. Impresionante. Entonces, Ahora si quieres agregar un símbolo aquí arriba donde está este pequeño ícono de página, esto se llama favicon o identidad de sitio. Entonces te mostraré cómo agregar eso realmente rápido, así que regresemos, y luego retrocedamos una vez más, y luego vayamos a Site Identity, y luego aquí es donde puedes poner esa imagen. Por lo que solo podemos bajar a Seleccionar imagen, y luego iré a Subir Archivos, Seleccionar Archivos, y luego conseguiré mis iniciales negras, y luego pulsaré Seleccionar, y luego te pediremos que recortes, y si tú quieras, puedes arrastrar esto hacia abajo. Entonces haré algo así, y luego pegaré a Crop Image, y luego, ahí está mi camino iniciales en la parte superior ahí. Entonces eso es genial, y mientras estamos aquí, también queremos cambiar el título de nuestro sitio y nuestro lema. Entonces en este momento si pasamos sobre esto, dirá, "Dale McManus - Sólo otro sitio web de Wordpress “, eso es aburrido. Queremos que diga”, Dane McManus”. Y podemos poner, Videographer.Fotógrafo.Desarrollador web. Entonces ahora si hacemos click en Publicar, eso cambiará. Entonces volvamos atrás, y si quieres ver cómo se ve esto completamente, solo puedes bajar a Ocultar Controles, y así será, cancelemos estas descargas. Me encanta el encabezado transparente, pero le falta algo. Lo que necesitamos es un menú porque necesitamos botones aquí arriba en la parte superior derecha, donde podamos hacer click sobre ellos y saltar a diferentes partes de nuestra página web. Entonces, lo que vamos a hacer es volver a esta flecha pequeña para abrir nuestro personalizador, y luego simplemente golpear la flecha hacia atrás, flecha hacia atrás otra vez, y luego vamos a ir a Menús. Entonces vamos a crear un nuevo menú. Vamos a dar click en eso y lo llamaremos Menú Primaria y luego dirá ¿dónde quieres que aparezca este menú? Deshabilitamos la Barra Superior, que no queremos. Nosotros queremos al Principal. Simplemente revisa Main y luego desplázate hacia abajo y pulsa el “Next Button”. Ahora agreguemos algunos elementos a ese menú. Haga clic en el botón “Añadir elementos”, y agreguemos algunos enlaces personalizados. Si tuvieras páginas diferentes, digamos, tenías una página separada para contacto que tenía un formulario de contacto en ella, encontrarías tus páginas aquí en este desplegable. Al cual automáticamente vuelve a. Pero voy a cerrar eso y sólo voy a hacer un Enlace Personalizado y desde aquí, voy a poner en un hashtag películas. Porque recuerda que tenía ese ancla en mi sección de videos que se llamaba películas. Nosotros queremos saltar a eso. Yo quiero que el texto diga películas y voy a añadir eso al menú y hagamos otra. Eso son fotos y haremos fotos hashtag. Ups, se me olvidó el hashtag y la p. Añadir a Menú y luego vamos a hacer, ¿qué más tenemos? Diseño web. Haremos diseño web hashtag y luego solo diremos diseño web, Agregar a Menú y luego también haremos contacto y luego haremos enlace texto es contacto, y luego Agregar a Menú y en realidad, hagamos un sobre mí mientras estamos aquí arriba también. Vamos a hacer hashtag sobre. Lo llamaremos About Mí y en realidad tendremos que volver atrás y crear ese ancla para esa sección. No podemos olvidar eso. Simplemente haz Añadir al menú. Enfriar. Ahora, si haces click en esta zona, puedes ver que tenemos estos nuevos botones aquí arriba, lo cual es genial. Si hace clic en “Películas”, boom, salta hacia abajo a Películas. Funciona perfectamente. Ahora bien, si quieres cambiar el aspecto de estos botones, te mostraré cómo hacerlo. Simplemente retrocede y luego retrocede una vez más y entonces en realidad vamos a bajar a Header. En lugar de la sección Menú, vamos a estar en Encabezado, y luego vamos a ir a Menú, que está dentro de la sección Encabezado. Un poco confuso. Pero bajemos y hagamos los colores. Link Color, podemos cambiar eso. Digamos que lo haré morado solo para que veas de qué estoy hablando. Ahora, el texto real ha cambiado a morado. Puedes seleccionar cualquier color que quieras. Digamos, un blanco. Personalmente no creo que el blanco destaque muy bien. En realidad me gustó el valor predeterminado. Voy a dejarlo en defecto. Pero también puedes cambiar el Color de la Cubierta del Enlace. Digamos que lo quería como más naranja. Seleccionaré eso y solo hagamos color un rojizo anaranjado. Ahí vamos, lo cual es bastante guay. Combina un poco mis antecedentes. Voy a dejar eso. Pero ahora que eso está hecho, voy a dar clic en “Publicar” para que podamos salvar nuestro trabajo y vamos a abofetear en nuestro Pie de página. Si vamos todo el camino hacia abajo, sólo termina y solo dice todo este tema de OceanWP de Nick. Nos vamos a deshacer de eso. Volvamos atrás y volveremos de nuevo y luego solo bajamos a Footer Bottom y luego lo que vamos a hacer es simplemente desmarcar Footer Bottom habilitado. Simplemente vamos a deshacernos de todo eso todos juntos y ahí vamos. Regresa y luego vamos a ir a Footer Widgets y aquí es donde vamos a añadir nuestra plantilla que te di. Si vas a Seleccionar plantilla, verás que no hay nada ahí. ¿ Qué carajo? ¿Dónde está nuestra plantilla? Lo importamos. Bueno, es necesario agregarlo a la versión Mi Biblioteca del Panel Temático. Poco confuso. Te mostraré de qué hablo. Simplemente haz clic en “Publicar” si aún no lo has hecho, y luego haz clic en la “X” y luego vuelve al Dashboard y luego verás esta pequeña rueda que dice Theme Panel y si no instalaste Ocean Extra en un principio como lo hicimos, entonces no vas a ver esto. Asegúrate de que eso esté instalado y luego ve a Mi Biblioteca, luego sólo tienes que ir a Agregar nuevo. Simplemente vamos a llamar a este Pie de página, luego vamos a Template y sólo vamos a hacer Elementor Full Widness, igual que hicimos la primera vez. Después haz clic en “Publicar”, luego vamos a ir a Editar con Elementor. Lo que estamos haciendo es solo construir una página separada solo para nuestro Pie de página. Entonces vamos a poner eso en nuestra página principal. En primer lugar, sólo tienes que ir a esta pequeña carpeta y ya importamos esa plantilla antes. Podemos simplemente subir a Mis Plantillas y luego verás el Pie de Página que pusimos antes. Basta con hacer clic en “Insertar” y decir “Sí” queremos poner en todos los ajustes de documentos, y boom, ahí está nuestro Pie de página. Si vuelve a cambiar a este diseño boxy, de nuevo, basta con ir a Diseño de página y luego ir a Elementor Full Width. A continuación, haga clic en “Actualizar”. Ahora, que es de ancho completo, podemos editar esto de la forma en que lo queramos. Lo que podemos hacer es solo dar click en este pequeño botón aquí y cambiar esto a tu nombre si quieres. Se puso a la mía. También puedes cambiar estos botones. Si vamos a este widget, haga clic derecho en “Editar iconos sociales”. Puedes cambiarlos a los tuyos. Actualmente los tengo como mi YouTube, y Facebook, e Instagram. Entonces, antes de irnos, este botón volver a la parte superior, vamos a hacer clic en el botón “Editar”. Como puedes ver, tengo top hashtag. Este será un botón de salto que irá todo el camino de regreso a la cima. Volvamos a nuestro sitio principal y añadamos en este Pie de página. Demos click en “Actualizar” y luego hasta esta pequeña hamburguesa, y luego haga clic en “Salir a Dashboard”. Entonces volvamos a nuestro sitio principal otra vez. Da click en “Personalizar”, luego vamos a desplazarnos todo el camino hasta la parte inferior otra vez para que podamos ver nuestro Pie de página. Volvamos a Footer Widgets y luego volvamos a Seleccionar plantilla otra vez y deberías verla ahí y solo tienes que hacer clic en “Pie de página”. Ahora, nuestro Footer está ahí dentro, pero se ve un poco funky. Vamos a arreglarlo. En primer lugar, nuestro relleno, vamos a asegurarnos de que eso esté establecido en cero en todo el camino. Eso va a apretar un poco las cosas. Después para deshacernos de esta mancha a un costado, solo pinchemos en el “Añadir Contenedor” para deshacernos del contenedor invisible que lo rodea. Ahora es un pie de página de ancho completo. Ahora podemos probar todos estos enlaces si queremos. Vamos a asegurarnos de que este botón funcione, cosa que sí. Si no eliminaste esta sección principal aquí arriba para crear la tuya propia, ya la tenía con un ID de clase llamado Top. Te mostraré lo que quiero decir. Vamos a abrir esto y voy a dar clic en “Publicar”, guardar nuestro trabajo y vamos a golpear la “X”. Iremos a Editar Con Elementor. Lo que podemos hacer es dar click derecho en esta sección, ir a Editar sección, pestaña Avanzado en la parte superior y puedes ver el ID de clase dice “top”. Siempre que toquemos nuestro botón en la parte inferior y nuestro Pie de página, saltará a la cima. Siempre y cuando no eliminaras eso, ya debería ser de esa manera. 8. Paso 7: edita para móvil: Ahora, el paso siete es editar para móviles. Por lo que 52% del tráfico global en línea proviene de un dispositivo móvil, por lo que hay más personas en Internet sus teléfonos que en escritorios, un poco más. Entonces es realmente, realmente importante que editemos este sitio para móviles también. Queremos que sea sensible para teléfonos y tabletas. Entonces lo que vamos a hacer es abrir esta espalda arriba, y sólo vamos a asegurarnos de que todo se vea bien en el móvil. Así que basta con bajar a este pequeño símbolo de Computadora de Escritorio y luego haga clic en Móvil. Entonces ahora podemos mirarlo, podemos desplazarnos hasta abajo. Esto se ve bastante bien. Si quisieras hacer este texto más pequeño, puedes. Por lo que solo puedes hacer click en eso, y luego si vas a Estilo, ve a Tipografía. Para que se puedan ver estos pequeños símbolos. Si estás en modo Escritorio, esta será una configuración diferente a la que hay en el móvil. Entonces si quisieras, puedes cambiar eso por lo que quieras. Vamos a ponerlo en un 50. Entonces cualquier cosa que hagas en un ajuste no se cambiará en otro. Entonces sigamos desplazándonos hacia abajo y asegurémonos de que todo se vea bien. Ignora esta cajita aquí, nadie puede ver eso en realidad. Y esto se ve bastante bien. Entonces nuestro botón está un poco apagado aquí. Si queríamos, podemos hacer click en eso y luego cambiar la alineación a la izquierda, por lo que es un poco en línea. Enfriar. Entonces sigamos bajando, asegurémonos de que todo se vea bien, cosa que sí. ve bien, se ve bien. Nada se ve funky. Si querías, si algo se ve un poco funky, tal vez es demasiado ancho, está ocupando demasiado espacio, lo que puedes hacer es simplemente hacer clic derecho en esa sección, ve a Avanzado y solo dale algo de relleno. Entonces esto tipo de amortiguará las cosas en un poco, así. Por lo que le di un total de 15 en la parte superior e inferior. Digamos que quiero algo de espacio extra aquí, puedo desmarcar este pequeño enlace, y debajo de la parte superior, puedo darle, digamos más de como un 30. Daré al fondo un 30, para que eso le dé un poco más de espacio en la parte superior y la inferior. Entonces así funciona eso en caso de que necesites arreglar algo. Entonces sigamos bajando. Todo se ve bien. Impresionante. Entonces ahora vamos a asegurarnos de que todo se vea bien en tableta. Entonces ve a Tablet. Entonces vamos a comprobarlo dos veces. Todo se ve bastante bien. Honestamente, creo que todo se ve bien. Entonces volvamos a Escritorio. Y antes de que me olvide, volvamos a la sección Acerca de mí y vamos a asegurarnos de que hacemos clic derecho, sección Editar, vamos a Avanzado y luego vamos a Clase ID, y diremos, “sobre”, porque queríamos ese botón en el arriba, así que haz clic en Actualizar. Queríamos que ese botón en la parte superior fuera a nuestra página Acerca. Entonces vamos a asegurarnos de que funcione. Asegúrate de hacer clic en Actualizar y luego bajar a Preview Changes, y ahora estamos en nuestro sitio. Entonces si hacemos click en Acerca de mí, va a nuestra sección Acerca de mí, que es genial. 9. ¡Paso nº. : ¡publica tu sitio web!: Hola chicos. Entonces, por último pero no menos importante, el paso número ocho es publicar tu sitio web. Volvamos al panel de control, y luego de aquí en la parte superior verás que tu sitio actualmente está mostrando una página próximamente. Una vez que esté listo para lanzar, haga clic aquí. Solo sigamos adelante y pinchemos aquí. Entonces así fue como crear un sitio web personal. De verdad espero que ustedes hayan disfrutado de esta clase. Si quieres más consejos y tutoriales de sitios web gratis, e impresionantes, entonces por favor sígueme en Habilidad compartir y checkout mi página de profesor para más clases. Además, las calificaciones y las opiniones van mucho camino para mí como instructor. Pero si eliges no dejar uno, eso está totalmente bien. Gracias por ver crear un sitio web pro y los veré en el siguiente video.