Cómo Crear Una Página Web Profesional en 5 minutos? Tutorial Completo (2025)

la presencia online cada vez será más importante y sí para tener una buena presencia online es crucial tener una buena página web antes tener una página web era complejo costoso Incluso se requerían habilidades muy específicas Como por ejemplo la de la programación pero ahora ahora en esta época es más fácil que nunca podemos construir una página web superbonita funcional y que cumpla un propósito en tan solo 5 minutos y esto es precisamente lo que veremos en el vídeo de hoy me gustaría enseñaros Cómo diseñar Cómo construir vuestra propia página web profesional funcional preciosa útil en tan solo 5 minutos y sí como ya sabéis yo tengo algunas nociones de esto pero no soy ni mucho menos un experto por esa misma razón veremos Este vídeo acompañados de un auténtico maestro mi diseñador de predilección Humberto Hola adre es un verdadero placer estar contigo aquí hoy y me llena mucho de alegría poder echarle una mano a tu comunidad y ayudarles con su primera página web sobre todo hoy en día que es tan importante tener presencia digital para destacar en el mundo online te aseguro que cuando termines este video vas a ser todo un experto en diseño web Humberto es un auténtico genio un auténtico genio porque no es un simple diseñador que descarga una plantilla de internet le hace unos retoques y la envía a alguien no lo que él hace es a aplicar la teoría por ejemplo de color la teoría de branding y lo junta con el propósito la misión la personalidad de la empresa o el cliente o incluso los valores que puede tener construyendo así una auténtica marca que deja huella que deja rastro es un placer tener a Humberto aquí Así que vamos con la primera pregunta Humberto nos podrías responder Cuál es el primer paso para construir una página web efectiva bonita profesional en tan solo 5 minutos para construir tu primer sitio web necesitarás principalmente dos cosas el Hosting o servidor y El dominio si no entiendes Mucho de esta palabrería de qué rayos es un servidor qué rayos es un Hosting No te preocupes adre yo te vamos a guiar paso a paso para que el proceso se te haga muy sencillo piensa que construir una web es como construir una casa vale para construir una casa necesitas el terreno para construir nuestra web vamos a necesitar un lugar en donde alojar la esto sería el Hosting o el servidor es el lugar en donde guardamos nuestra web en el internet y El dominio vendría siendo como la dirección de la casa es esto que nosotros ponemos en los buscadores cuando queremos acceder a un sitio web gracias a este vídeo podréis hacer dos cosas número uno os regalo de forma totalmente gratuita mi plantilla una plantilla preparada por un auténtico experto diseñador un auténtico crack como es Humberto podéis descargarla y aplicarla a vuestra marca personal negocio empresa vuestra página web lo que quiera que sea que tengáis como propósito o número dos una vez ya la descarguéis podéis evidentemente modificarla con todo lo que aprendáis gracias al seguimiento a los consejos a las técnicas que os enseñará Humberto y cómo lo podemos hacer lo podemos hacer a la perfección con hostinger hostinger es la plataforma de predilección que yo recomiendo Por qué por tres simples motivos número uno es económica es accesible a todo el mundo y es muy fácil de usar porque con hostinger No simplemente puedes crear tu propio dominio y a tener el Hosting de tu página web que se conoce sino que también tiene un constructor de Inteligencia artificial con el que podrás diseñar no solo en cuestión de horas sino en cuestión de minutos tu propia página web y es exactamente la metodología que Seguiremos en este vídeo simplemente qué es lo que tenemos que hacer ir al link de la descripción en este vídeo y vamos aquí como podéis ver en pantalla escogemos el plan business que tiene todas las funcionalidades de Inteligencia artificial que necesita haremos para este vídeo escribís el código adria para beneficiaros de este increíble descuento esta increíble oferta ya podéis beneficiar de ese descuento Y tenemos hostinger por tan solo 3,49 euros al mes lo que me parece una absoluta barbaridad Y ahora sí vamos al siguiente paso cómo empezamos a diseñar una página web empezar Es realmente sencillo en la descripción vas a tener un link en donde podrás acceder a Hosting y basta simplemente con elegir el plan que mejor se adapte a tus necesidades también vas a tener que elegir tu dominio y aquí te doy el primer tip elige un dominio que sea relevante para tu negocio que sea lo más corto posible y que sea fácil de recordar piensa que un dominio es lo primero que viene a la mente a la hora de entrar en una web a la hora de tu usuario poder ubicarte Así que tiene que ser muy relevante si ya tienes una cuenta en hostinger estamos más que preparados para empezar Pero antes me gustaría charlar un par de cosas que creo que son importantes vale la primera es la identidad visual el cómo nos vemos piensa que los colores la tipografía el tratamiento que le hacemos a las fotos son herramientas sumamente poderosas digamos que la diferenciación visual nos permite crear conexiones con la audiencia y sobre todo nos permite diferenciar nos permite destacar y créame que esto es muy importante lo otro es la identidad verbal qué decimos cómo lo decimos todo esto es importante cómo nos expresamos Qué palabras utilizamos un ejercicio que a mí me ayuda mucho en el día a día con mis clientes es imaginarme su marca como si fuera una persona si fuera una persona cómo hablaría cómo se vestiría Cómo luciría eh cómo sería tener una charla con ella eh antes de empezar quiero que anotes todas estas cosas que hagas este pequeño ejercicio porque créeme que va a ser muy importante para comenzar nuestra web vale Humberto ahora ya disponemos de la teoría que nos permite construir una página web excelente con un buen diseño y que sobre todo empiece ya a construir esas bases de nuestra marca Cómo sería la estructura para que nosotros tengamos sobre todo una página web funcional que cumpla con un propósito pues esta es una excelente preguntaa antes de siquiera comenzar a diseñar una web Necesitamos saber cuál es su objetivo qué queremos hacer queremos vender un producto queremos destacar como como marca personal queremos hacernos conocer Cuál es el objetivo de esta web Así que te pregunto adrea qué objetivo quieres con este proyecto qué te gustaría destacar Necesito una página web s sencilla con una pequeña landing que tenga una pequeña descripción de qué es lo que hago Cuál es mi misión los distintos proyectos que tengo y un espacio una landic adicional donde por ejemplo pueda contar el sobre mí mi historia para que la gente pueda conocerme un poco más y además sería increíble poder tener otra landing destinada a la newsletter una newsletter en la que las personas pueden dejar su email y pueden evidentemente entrar en mi círculo privado de forma gratuita en la que van a recibir emails semanales con muchísimo valor e incluso porque no También estaría bien una sección de Blog Para yo poder ir escribiendo esos pensamientos que me gustaría compartir de forma pública creo que así quedaría fenomenal vale perfecto eh siempre cuando hago una web cuando diseño una web me intento poner en la cabeza de un usuario Vale cuando un usuario entra primero Probablemente lo primero que se pregunte es vale Adrián Quién es Entonces es una información que tienen que conseguir muy fácil también pueden preguntarse Qué productos vende o cómo me puede ayudar Entonces qué te parece si hacemos un pequeño boceto vamos a la computadora y dibujamos una pequeña estructura que yo creo que puede funcionar Vamos allá vale lo primero quería sería lo lo que universalmente se hace para una web el header vale acá va nuestro logo nuestro menú de navegación y generalmente también ponemos un cta también quiero poner un Hero section Esta es la parte más importante porque de alguna forma va el título principal de la web y generalmente también va una foto que sea muy llamativa acá pues utilizaré una de adriá también quiero hacer una sección de cómo adria puede ayudarte vale poner algunas características claves para que el usuario pueda conseguir rápidamente esa información creo que es bastante importante otra cosa que Quiero agregar obviamente son los servicios y los productos quiero que esté muy detallado cada servicio que brinda también quiero meter Pues un pequeño botón para que vayan a una forma de contacto otra sección que Quiero agregar obviamente son los testimonios adria ha trabajado con muchas personas que tienen testimonios interesantes para decir y es interesante que las personas tengan esa información quiero hacer también una llamada a la acción para la newsletter de Adrián voy a poner un pequeño formulario para captar el email también podemos eh poner por qué no un blog vale una sección de Blog En donde podemos Pues ahí poner artículos que las personas puedan eh estudiar acerca de la comunicación y obviamente pues un footer vale donde podemos Pues los términos legales que son páginas importantes y bueno est sería un poco la estructura de nuestra página web genial Humberto ahora ya tenemos el diseño y tenemos la estructura empecemos a diseñar la página web Cómo funciona la herramienta de hostinger Y por qué consideras tú como profesional que es tan buena Ya estamos listos para empezar Así que vamos a intentar hacer una página web en tiempo récord Vamos allá lo primero que tenemos que hacer es ir acá y Añadir un nuevo sitio web acá nos va a salir la opción para activar el constructor de páginas web de Hosting Es una herramienta impulsada por Inteligencia artificial acá podemos elegir el tipo de página yo por mi parte voy a intentarlo con landing pch a ver qué me genera y obiamente el nombre de la marca acá pues adrias sola pastor de acuerdo acá le vamos a dar la descripción del sitio web Trata de ser lo más descriptivo posible yo voy a utilizar una descripción que ya tenía previamente acá podemos Añadir algunos ajustes de personalización como la paleta de color podemos poner nuestros colores o incluso podemos elegir una paleta preestablecida por el sistema yo por mi parte quiero elegir mis propios colores para esto te recomiendo esta herramienta que es espectacular se llama adob color que te permite elegir colores y copiar el código hexadecimal para utilizarlo en nuestras páginas web así que bueno yo voy a setear mi paleta de color para esta página web quiero que sea elegante Así que voy a elegir colores oscuros y un color morado como para destacar podemos Ya empezar a crear nuestra página web Le damos acá a crear sitio o incluso puedes utilizar una de las plantillas vale pero nosotros queremos utilizar el constructor desde cero así que ya me está generando Y fíjate Me da algo pues bastante competente incluso me da acá pues el tema de los servicios no y una pregunta Humberto yo puedo modificar esta plantilla que me ha dado la Inteligencia artificial es decir la puedo hacer un poco más personalizada eso es una excelente pregunta adria Y pues sí claro que sí acá Fíjate que nosotros podemos incluso nos creó una página aquí podemos eso modificarlo simplemente vamos acá y vamos a editar sitio Vale Voy a explicarte un poco la interfaz acá tenemos pues la posibilidad de Añadir el eventos tenemos de todo acá es el menú de sitio web AC creamos nuevas páginas podemos Añadir una nueva página Y fíjate que nos da pues bastantes como templates no y bueno acá pues nos crea otra página y podemos modificarla eh También podemos ir a la parte de los estilos vale acá vamos a utilizar lo que son los colores las fuentes muy importante para a la hora de personalizar lo que sería la web esto es todas las herramientas con Inteligencia artificial generador de imágenes de copy Podemos agregar una tienda online incluso y acá pues algunas opciones extra como la configuración de seo el multilenguado baje Hay un montón para jugar vamos a empezar utilizando pues una tipografía elegante vale vamos a ir reiniciar acá Todos los estilos Y fíjate como me transforma toda mi mis títulos de tipografía de acuerdo acá Esto me da como un pequeño grid en donde yo puedo poner los elementos donde yo quiera esto es impresionantemente útil a la hora de de trabajar va Yo voy a acá a editar mi sección y puedo hacerlo en imagen tenía video podemos hacerlo imagen y también podemos seleccionar color que esto es lo que yo quiero vale porque quiero seleccionar eh un color plano para mi web voy a seleccionar un gris que sea bonito no tan oscuro y puedo seleccionar pues podemos mover la opacidad podemos cambiar el color acá yo creo que esto para empezar está bastante bien Podemos editar el texto obviamente Fíjate que cada uno de los elementos pues tiene diferentes cosas para editarlo yo acá pues vamos a poner Adri es experto en comunicación eso es lo que vamos a hacer podemos duplicar este elemento vamos a mover esto acá para que no nos estorbe y vamos a poner espectro en comunicación podemos editar cualquier cosa del texto fíjate que acá pues vamos lo que quiero hacer es que esté alineado a la izquierda fíjate eso lo podemos conseguir eh acá podemos modificar de todo pero lo que estoy buscando lo podemos conseguir acá lo mismo vamos a hacer con este e incluso podemos cambiarle el color al texto para llamar aún más la atención por lo menos yo voy a agarrar esto voy a eh seleccionarlo todo voy a aumentarlo un poco de tamaño y voy a ponerle este color de de resalte que tenemos vale que es nuestro color morado selecciono mi texto y puedo utilizar cualquier color que quiera ya tenemos un encabezado Pues que se ve interesante también puedo ponerlo en negrita para que llame aún más la atención puedo acá fíjate que acá yo puedo editar la altura de mi sección por si quiero Añadir más elementos Entonces vamos a empezar a componer un poco eh acá pues vamos a agarrar este texto vamos a ampliarlo un poquito y Bueno voy a voy a editar el texto voy a agarrar un pequeño copy que ya yo tengo definido voy a aumentar un poquito el tamaño y ya podemos poner nuestro copia excelente Vamos comiendo un poquito que todo se vea bien tratando de dejar espacios que se vea como muy limpio Fíjate que el grid nos permite poner los elementos donde sea este texto lo voy a utilizar porque Se nos olvidó poner el nombre de Adrián Entonces sí que me gustaría tener esto acá en chiquitito vamos a poner acá pues para que sepan Quién es Soy adrea sola pastor so vamos a dejarlo eh algo importante cuando tú creas páginas web es la jerarquía Fíjate que hay elementos eh de diferentes tamaños porque yo intento pues guiar la atención vamos ahora a agregar un iconos de redes sociales vale Yo creo que es importante tener en esta sección Pues si quieren ir a las redes sociales de adria Pues que puedan hacerlo vale aquí Puedes configurar los links vamos a ponerlo en blanco para que resalte y ya Lo tendríamos algo importante podemos algo importante en la web es el tema de la interacción acá podemos editar nuestro botón y podemos obviamente eh cambiar lo que sería lo que dice eh nuestro botón acá vamos a poner trabaja conmigo esa va a ser Nuestra llamada la acción y podemos aquí poner el link Pues a una dirección web o a otras páginas acá podemos cambiar el estilo de nuestro botón Y fíjate tenemos la lo que sería el over Fíjate que cuando ponemos el el mouse encima del botón no No pasa nada pero cuando yo cambio Esto vale Voy a ponerle otro color de relleno Ahora sí vale esto es importante para que el usuario sepa eh Cómo interaccion ahora le voy a cambiar el color de texto para que resalte para que se vea y fíjate ya tenemos un estado over esto es muy importante para la interacción También tenemos una sección de animación podemos digamos que cambiarlo en diferentes estilos de animación Esto está interesante vale Siempre hay que tener cuidado con las animaciones no abusar de ellas voy a editar esto también para poner un un hover State también que se llaman cuando las personas estén por encima y ahora vamos a agregar una imagen vamos a agregar una imagen de Adrián podemos venir acá agregar nuestro módulo de imágenes y obviamente podemos cambiar todo esto Humberto tú sabes si podemos generar imágenes con la Inteligencia artificial eso es una excelente pregunta De hecho sí sí que podemos fíjate que acá podemos generar imagen a través de Inteligencia artificial podemos elegir los estilos y Bueno podemos generar lo que queramos pero en este caso Yo quiero una foto de ad eso va ser muy difícil generarlo por Inteligencia artificial así que bueno aquí Tenemos un montón de cosas para jugar con las imágenes podemos incluso meter imágenes dentro de formas Pero bueno yo quiero de momento vamos a seleccionar una imagen de adriá Yo acá puedo seleccionar reemplazar imagen acá pues se van a guardar todas mis imágenes todas las imágenes que haga con Inteligencia artificial incluso tenemos una galería gratis eh que podemos explorar yo voy a arrastrar mi foto de Adri aca eh sin fondo y ya tenemos para jugar Fíjate que como que me la recorta yo esto simplemente lo ajusto y ya tendríamos nuestra foto podemos ponerlos incluso delante o detrás del texto y ajustar la sección algo para darle un toque más llamativo voy acá a elegir una forma voy a elegir un color pues un poquito más clarito para que resalte en el fondo vale No tan clarito y lo voy a cambiar a un círculo y lo voy a poner detrás de adria como para que sea un punto de enfoque vale para que lo primero que las personas vean cuando entran a la web sea la foto de adriá o ente tengo que traer el texto para adelante para que no me lo tape voy a oscurecerlo un poquito más y fíjate que ya tendríamos una primera sección bastante llamativa o sea todo bastante funcional incluso Podemos agregar una pequeña imagen extra para darle como un un toque de personalización vamos a agregar acá un símbolo Pues de como un sello de experto en comunicación y ya tendremos una primera sección pues bastante bastante interesante Fíjate que también podemos modificar lo que es el header basta con darle acá editar encabezado y Tenemos un montón de opciones podemos cambiar el logo el menú de navegación o sea tenemos mucho mucho por hacer eh yo lo primero que quiero hacer es hacer una llamada a la acción yo quiero que haya un botón Y fíjate que esto lo podemos hacer aquí activando esto ya tenemos nuestro botón de acuerdo obviamente puedo cambiar el logo yo acá voy a reemplazar un pequeño logo que hice voy a arrastrarlo acá y podemos poner nuestro logo personalizado vale seleccionamos nuestro logo y Bueno fíjate que está muy chiquito de paso el fondo no es el adecuado Pues yo aquí aumento el tamaño y ahora voy a cambiar el estilo del fondo para que podamos ver el logo Yo quiero que sea un un un negro oscuro para que resalte con la sección ahí ya tendríamos nuestro logo obviamente Tendremos que cambiar lo que sería ahora el menú de navegación no que no se ve yo esto vengo acá lo coloco un un color que se ve un color blanco y para el hover para los elementos interactivos ponemos nuestro morado para que destaque y se vea cuando está seleccionado ahora vamos a setear mi cta mi llamada la acción yo esto quiero que sea para la newsletter de adriá Así que vamos a sarlo acá en mi newsletter fíjate que acá pues podemos elegir lo que sería Hacia dónde se dirige puede ser una página puede ser un URL y bueno vamos a cambiar el color en este caso Yo quiero que sea un color blanco para que se diferencie del color que ya tenemos en el otro botón y bueno obviamente podemos cambiar el texto acá podemos cambiar el tamaño del texto voy aumentarle un par de puntos para que llame la atención y puedo incluso ponerle en bt de acuerdo y sí que me gustaría que el hover State estuviera con nuestro morado vale para que resalte aún más y ya Lo tendríamos fíjate qué fácil tenemos ya una sección principal y por ejemplo aquí me interesaría crear una nueva sección Sería posible eso Humberto Sí claro que sí Podemos agregar una sección nueva fíjate que acá tenemos la opción de Añadir sección Y fíjate que hay un montón de templates que podemos utilizar eh es que un montón puedes elegir yo por lo menos voy a buscar uno acerca de servicios acerca de vamos a vamos a hacer la sección que teníamos pensado de Cómo podemos ayudarte y yo creo que esta nos puede ayudar vale Y bueno podemos lo mismo de siempre podemos elegir nuestro fondo podemos personalizar absolutamente todo acá sí que quiero elegir un fondo diferente para que se sepa que es otra sección y bueno puedo cambiar mi mi texto vamos a elegir Pues un traten de elegir títulos que llamen la atención acá me gusta siempre hacer esta distinción entre los textos para tener palabras claves que llamen la atención y bueno simplemente acá puedes ir reemplazando lo que sería tu copy vale vamos a acelerar un poquito el proceso para Para no perder el [Música] tiempo Acá voy a agregar unos iconos personalizados voy a marcar mis tres iconos para darle un poquito más de personalidad Y fíjate pues teníamos nuestros iconos acá yo puedo ajustarlos vale puedo ponerlo en el lugar donde yo quiera en la grid y buen lo voy a duplicar vale podemos duplicar los elementos y una vez duplicados podemos reemplazarlo voy a reemplazarlo por mis dos iconos y ya fíjate que tenemos una sección eh bien diferente acá pues obviamente quiero cargar mi propia imagen voy a elegir esta imagen Te voy a enseñar un truco que siempre llama la atención voy a poner esta imagen acá y voy a elegir una forma vamos a aplicar el mismo truco de del header pero con un color un poquito más claro Fíjate que ya tenemos nuestra nuestra segunda sección vamos con la parte de los servicios que yo creo que es la más importante una vez más voy a cambiar el color de fondo para distinguirlo de otra sección y bueno trabajamos en lo que sería nuestro copy elegimos los colores trabajamos un poco en la composición asegúrate de tener un copy que sea bastante convincente y todo esto obviamente es 100% personalizable Yo acá en este caso cas Recuerda que estoy utilizando colores oscuros eh Me gusta ese look elegante que que quiero darle a la web vale Y también voy a setear algunos botones para ahorrarme algo de trabajo Voy a duplicar este y voy a colocarlos acá encima de la de la Card vale de la tarjeta para que sea llamativo entonces simplemente lo duplico y esto tengo pensado que vaya a mi formulario de contacto vamos a eliminar esta sección que realmente pues no no me interesa vamos a agregar en esta parte la parte de los testimonios Fíjate que ya la Inteligencia artificial pues me la generó entonces bueno eh vamos a repetir lo que hemos hecho simplemente vamos a personalizar esta sección vamos a adelantar un poquito este proceso que ya todo lo que hemos hecho aquí ya lo sabes Así que vamos a adelantar y personalizar un poquito vale ya tenemos acá la opinión de nuestros clientes Yo también aquí quiero hacer una cta una llamada a la acción para nuestra newsletter fíjate que yo puedo utilizar imágenes como fondos de sección eh acá vamos a a utilizar por lo menos una una de de stock podemos agarrar acá Buscar email y podemos seleccionar la imagen que mejor nos convenga en este caso yo voy a agarrar esta yo creo que está interesante y podemos ajustarla al tamaño algo interesante que podemos hacer vale en estilos es hacer redondear las esquinas a mí me gusta eso porque le da como un look muy moderno y también podemos aumentar la opacidad de superposición vale necesitamos que sea un poco oscuro para que se lea lo que colocamos encima de acuerdo ya con esto podemos Añadir pues la sección de texto en este caso pues eh será una llamada la acción a la newsletter vamos a poner una un título que sea potente modificamos nuestro texto vamos a disminuir un poquito el tamaño y cambiamos los colores como siempre en negrita y que me gusta siempre Resaltar algunas palabras que sean clave perfecto vamos a agregar un texto un pequeño texto acá luego centrado abajo vamos añadimos un texto vamos a cambiarlo la párrafo vale No quiero un título sino un párrafo y copiamos acá mi copia vamos a cambiar el color para que se vea y ya Lo tendríamos vamos a centrarlo y lo centramos en la composición perfecto y ahora vamos a Añadir un formulario de contacto vale Yo puedo aquí agregar un formulario de contacto pero la verdad es que solo me interesa el email de acuerdo podemos editarlo acá podemos ponerle el nombre y vamos a eliminar los campos que no necesitamos simplemente vamos a dejar el del el del email lo ajustamos y obviamente podemos cambiar Pues el nombre del del contacto acá Podemos agregar nuestro email y y bueno vamos a traducir estas etiquetas para que estén el español vamos a traducir todo esto esp que se traduce eh en tiempo real eh tenemos el mensaje de requerido vale Este campo es requerido y también Si hay errores esto es muy importante a la hora de que haya un error especificar Cuál es el error esto es super importantísimo podemos obviamente personalizar nuestro botón e incluso podemos setear un mensaje para cuando después se llene el el formulario vale podemos incluso dirigirlos a otra página pero nosotros vamos a dejar el mensaje de momento y bueno configuramos el hover de nuestro botón que quede como el resto de nuestra página web la consistencia es super importante a la hora de crear una página web como te comentaba Humberto me encantaría poder tener una sección de Blog por si puedo escribir mis propios artículos y compartirlo con más personas Sería posible con el constructor de Inteligencia artificial hay esa posibilidad Pues fíjate que sí adria sí que podemos vamos a eliminar esta sección que no nos hace falta y vamos acá y fíjate que podemos Añadir un blog nos crea un blog en cuestión de segundos podemos editar las publicaciones y podemos configurar cada aspecto de nuestro blog fíjate que acá nosotros podemos poner las columnas que queramos podemos cambiar los estilos eh Fíjate que nuestro nuestra web viene siendo oscura no Entonces voy a poner el color de texto que sea claro puedo cambiar el color de fondo obviamente y adaptarlo a mi diseño acá pues bueno lo típico lo que venimos haciendo todo el tiempo vamos a cambiar los títulos vamos a adaptarlo a nuestra sección Y fíjate que en cuestión ya ni siquiera de minutos en cuestión de segundos tenemos un blog que podemos modificar y podemos escribir lo que queramos todo esto impulsado por la Inteligencia artificial es la verdad pues interesante Vamos a ponerle negrita para destaque ya tendríamos nuestro blog vamos con la última sección vale que es el footer yo voy a eliminar todos estos elementos Quiero un footer que sea sumamente sencillito el footer es muy importante porque acá vamos a poner lo que son nuestras páginas legales eh que eso no se debe skipear nunca nunca debemos nunca debemos saltarnos las páginas legales en un sitio web Yo aquí voy a poner pues tu logo vamos a replicar el logo que tenemos acá que es muy sencillito y te voy a enseñar un truquito para hacer nuestros links Yo acá Fíjate que puedo agarrar este texto voy a ampliarlo un poquito a centrarlo esto voy a traducirlo Vale Voy a centrarlo y a traducirlo vamos a poner siempre eh todos los derechos reservados perfecto y acá fíjate que yo puedo escribir vale vamos a escribir nuestras tres páginas principales son los avisos legales los términos y condiciones y las políticas de privacidad son tres páginas que siempre tienen que estar en cada una de nuestras web Fíjate que esto de momento es un texto plano Pero lo que sí nosotros podemos hacer es que este texto sea linkable tenga un enlace cómo lo hacemos sencillo vamos acá editamos el texto y presionamos el este vínculo podemos eh sarlo a cualquier página que nosotros queramos y vamos a hacerlo con nuestros tres enlaces Y fíjate que ya tenemos una página web super funcional y esto Humberto es responsive reacciona bien va a ser ágil eso es una excelente pregunta Y claro que sí fíjate que tenemos este simbolito acá que nos permite componer en celular Fíjate que nos muestra un preview la versión Y hay como algunos elementos que no están bien pero no te preocupes que lo arreglamos enseguida Fíjate que lo único que tenemos que hacer es que estando en esta vista agarramos nuestros elementos y lo componemos como queremos que se vea yo voy a agarrar estos elementos acá AC lo voy a ordenar bastante bien fíjate que todo se me se me desorden la sección está muy larga pues no pasa nada podemos venir acá vamos armándolo vamos componiendo como nos gustaría que se viera fíjate que acá podemos incluso cambiar el tamaño de los elementos yo voy a cambiar esto acá para ponerlo al lado de mi botón y voy a agarrar mi imagen voy a agarrar mi mi icono y bueno la forma puedo ampliarla de tamaño y ponerla detrás y agarrar mi sección Y fíjate que por arte de magia Ya todo es responsible fíjate que yo lo cambio escritorio móvil y me lo mantiene y ya tendríamos un sitio con sí básicamente tenemos que hacer eso con todo el resto de la sección también quiero enseñarte un último truco que es eh las opciones de visualización fíjate que acá e Tengo este este icono que me permite manejar la visibilidad de mis elementos dependiendo si estoy en escritorio o en móvil vale esto es muy útil porque imagínate Por lo menos Tengo esto Fíjate que aquí se ve feo entonces yo lo que puedo hacer es crear dos menús uno para móvil y uno para escritorio entonces lo que hago es asegurarme de que uno esté visible para móvil y el otro esté visible para escritorio y Fíjate que desaparecerá cuando esté en mi sección voy a guardar y ya podemos ver lo que es nuestro sitio [Música] web obviamente también lo podemos ver en responsive Y fíjate que está todo [Música] perfecto basta con darle a publicar vale para terminar basta con darle a publicar Fíjate que aquí podemos conectar nuestro dominio y ya tienes tu sitio web listo para salir sé que fue muy agotador sé que vimos mucha información en muy poquito tiempo Lo bueno es que bueno puedes regresar el video para ver todas las herramientas con detalle y además tienes una web en menos de 20 minutos ya funcional llamativa lista para salir al mundo así que ya no tienes ninguna excusa para no crear tu propia página web para que tengas esa presencia digital de verdad ha sido un placer estar acá contigo hoy Espero que este video sea de mucha utilidad y que se te haga muy sencillo crear tu primera página web y para recapitular recuerda que en la descripción tienes la posibilidad de descargar esta increíble plantilla de forma totalmente gratuita una plantilla que la podrás utilizar para tu negocio marca personal proyecto web lo que sea que necesites y podrás modificarla con todo lo que nos ha compartido Humberto y con el código que tenéis también en la descripción podréis obtener un increíble descuento inédito en hostinger y también mencionar que os dejo en la descripción todos los datos de Humberto Instagram página web y también la página web de Academia gráfica un lugar donde tú podrás aprender a desarrollar la habilidad tan rentable que es la del diseño web y poder poder crear diseños atractivos que puedan atraer a visitantes y convertirlos en clientes para tu proyecto negocio lo que sea que tengas como Misión y propósito Muchísimas gracias Humberto por ayudarme en este increíble vídeo me parece un absoluta barbaridad Gracias por ser el mejor diseñador de habla hispana y hasta aquí el vídeo de hoy Gracias a vosotros por seguir Este vídeo Espero que os haya resultado super útil que hayáis aprendido un montón y que ahora no solo podáis implementar este conocimiento que habéis aprendido a vuestra página web sino por qué no aprender esta increíble habilidad Y eso es todo Me gustaría enviaros beso cálido abrazo y nos vemos en el próximo vídeo adiós