Tutorial de Bootstrap Studio versión 6. 0

1. Introducción: Hola chicos, Hawaii, gracias por aterrizar a este curso en particular. Este curso se trata de Bootstrap Studio. Bootstrap studio es qué? Bootstrap Studio es una aplicación de escritorio donde se puede diseñar un sitio web. Es un sitio web estático y hay una característica donde se puede crear un sitio web dinámico también, pero eso es sólo para el comercio electrónico, por lo que vamos a ver eso también. Así Bootstrap Studio es una aplicación de escritorio que está completamente construida sobre el framework Bootstrap. En este curso, estamos en ver cómo exactamente usar Bootstrap studio para diseñar sitio web sin codificación. Esa es la palabra clave. Sin codificación, un poco de codificación está ahí codificando tu pierna, solo llamando a algo aquí y allá. Pero no es como programación hardcore o codificación hardcode. Sólo tienes que seguirme lo que estoy haciendo y luego está hecho. Podrás diseñar todo. Te mostraré qué exactamente vas a diseñar y lo que aprenderás en este curso. En este curso vamos a ver todo sobre los paneles en el software como panel Studio, panel en línea, qué exactamente estos panel de visión general. Y en este panel de opciones tenemos tres opciones, opciones apariencia y animación. Entonces panel de diseño. He creado un video separado y separado para entender cómo exactamente vamos a ser usado este panel, entonces nos estamos moviendo a un proyecto. De acuerdo, entonces vamos a diseñar pocos proyectos como reanudar una página. Este es un sitio web de una página. Si lo ves es un sitio web completo de una página y podrás personalizar todo esta página de acuerdo a tu conveniencia y de acuerdo a tus necesidades. De acuerdo, Entonces, ¿cómo va a verse exactamente esta página web? Este es mi navegador. Se puede ver una revisión en tiempo real de la página web. Entonces este es tu navegador. Si hace clic en Acerca de Nosotros, puede ver el desplazamiento hacia arriba. Si hace clic en Contacto, se está desplazando hacia arriba. Si hace clic en a quién se acerca en la parte superior. Y en la página de contacto, si ves hay un formulario. Sin codificación. En este curso, vamos a aprender cómo exactamente crear un formulario inteligente en Bootstrap studio. Lo llamamos formulario inteligente, lo que significa que cada vez que el usuario llene este formulario y haga clic en Enviar, llegará a una dirección de correo electrónico en la que haya seleccionado aquella en que dirección de correo electrónico esta debe venir la información del formulario. Esta es una especie de forma dinámica, pero no exactamente dinámica. Lo llamamos smartphone. A continuación, tenemos un sitio web de varias páginas que vamos a diseñar en este curso en particular. Esta es una especie de página web como empresa de tecnología. Entonces tenemos varias páginas por aquí que tenemos formularios. Nuevamente, esta es una forma inteligente. Entonces vamos a crear la página de contacto, todas estas cosas. Y además de eso, todo será móvil sensible. Mira esta barra de navegación, como cuando llego a un tamaño de pantalla más grande, los iconos, los botones de aquí vienen. Si vengo a la pantalla móvil, se están escondiendo dentro de este toggle. Vas a ver cómo exactamente vamos a diseñar una respuesta móvil tu sitio web sin codificar. Después de eso, vamos a crear un diseño de un sistema LMS que está aprendiendo sistema de gestión como múltiples cursos, multi-página tiene opciones están ahí. Vamos a diseñar página de lista de deseos y luego página de registro y todas las demás cosas. Lo más emocionado de aquí es este sitio web de comercio electrónico. Y para ser muy claro en esta área en particular, sitio web de comercio electrónico es un sitio web dinámico completo donde podrás integrarte. El pasarela de pago también es así que veamos la demo de ese sitio web. Esta es nuestra página web de comercio electrónico, que somos, diseñaremos en este curso. Y aquí hay múltiples productos. Y si hago clic en este producto, se puede ver que está llegando a esta página del producto y luego algunas opciones relacionadas son entonces la opción de productos relacionados. Entonces tienes alguna opción de talla para seleccionar. Y si selecciono este tamaño y cambio la cantidad, y si agrego este envoltorio de regalo, todos estos, hagámoslo en el curso. Si y si hago click en Agregar al carrito, se muestra como producto añadido al carrito, puedes hacer click aquí como tarjeta C o bien puedes hacer clic año para ir al carrito y luego podrás ver tu producto está ahí. Y si hago click en Checkout, se puede ver que me está pidiendo que introduzca algunos de mis datos. Si agrego todos los detalles por aquí, si hago clic en Siguiente y se está mostrando pago vía PayPal o tarjeta de débito, tienes dos opciones como PayPal y Stripe. Y también puedes proporcionar algunas opciones llamadas transferencia bancaria, orinar, orinar en la entrega. Y aquí he usado POR una UPI. Entonces todas estas cosas vas a aprender en este curso en particular. Este es un curso apretado muy completo. Y aparte de eso, vamos a ver muchas cosas como la integración de Zoho, la integración atención al cliente, y todas las demás cosas. Sin perder mucho tiempo. Empecemos y te veré en el primer video de este curso. 2. Cómo empezar: En este video, vamos a ver cómo empezar con Bootstrap studio. Al momento de grabar este video, el estudio bootstrap se encuentra en la versión 5.6.4. Esa es la última versión. En este punto de tiempo. Cuando lanzas el bootstrap Studio por primera vez, esto es lo que ves en tu pantalla. Veamos cómo lidiar con esto. Tenemos muy pocas opciones en esta pantalla. En primer lugar es el diseño reciente. Tal y como el nombre sugirió. El diseño de la razón significa los diseños recientes en los que has trabajado. Vamos a venir aquí para que solo puedas hacer clic en él y puedas abrir el proyecto, ahorrando tiempo, nada más. Entonces tutoriales, tienes pocos tutoriales por aquí. Siempre que haga clic en alguna de esta opción, te llevará a la página web, que es un tutorial completamente basado en texto. No es un video tutorial. Por eso estoy haciendo un video sobre él. El nombre del software está ahí bootstrap studio que la versión que es 5.6 para la versión actual, luego tenemos un nuevo botón de diseño por aquí. Entonces tenemos un botón Abrir. Año. Nuevo diseño es cuando se hace clic en el nuevo diseño, cuando el cuadro de diálogo vendrá frente a usted indicando que qué tipo de nuevo diseño lo desea. Si hace clic en Abrir, el explorador de archivos vendrá frente a usted. Y solo puedes seleccionar el proyecto y luego puedes empezar a trabajar en él. Entonces veamos cómo crear un nuevo diseño. Simplemente haciendo clic en un nuevo diseño un cuadro de diálogo vendrá frente a usted. Bootstrap Studio nos da pocos diseños ya hechos. Puedes empezar con eso también, pero todos lo son, estás viendo este video para aprender Bootstrap studio a no usar los diseños ya hechos. Entonces, lo que vamos a hacer, tenemos que asegurarnos de que estén ahí tres opciones. Y hemos seleccionado esto. La primera opción es nombrar tu proyecto. En segundo lugar se asegura de que la plantilla en blanco esté seleccionada. Se puede ver este pequeño círculo, está ahí, círculo azul dentro de ese círculo azul, garrapata blanca está ahí. Significa que esta plantilla está seleccionada. Nombra el proyecto, y luego tienes que asegurarte que versión de Bootstrap studio estamos utilizando. La selección por defecto será 5. En la versión anterior se seleccionan 4.6 widgets. Versión anterior significa 5.6.2 de 5.6.3, la selección predeterminada es Bootstrap cinco. La mayoría de los alumnos se confunden aquí que lo que es este bootstrap cinco y Bootstrap Studio 5.6.4. Así que déjame decirte. Bootstrap es un framework y Bootstrap Studio es un software en el que estamos trabajando. Hemos seleccionado la última versión del framework Bootstrap, es decir 5, en realidad es 5.1, pero la sumergencia no se menciona aquí. Por lo que estamos seleccionando 5, que por defecto se selecciona. Entonces nombraremos a nuestro proyecto cualquier cosa. Vamos a nombrarlo como prueba uno. Y luego haré clic en Crear. Por lo que en cuanto hago click en Crear, ahora estamos en el verdadero estudio bootstrap. Ahora hemos entendido cómo empezar. En el siguiente video, entenderemos la interfaz de usuario de Bootstrap studio. Entonces nos vemos en el siguiente video. 3. Interfaz de usuario: En este video, entenderemos la interfaz de usuario de Bootstrap studio. Empezaremos desde esta esquina. Aquí tenemos dos paneles. Primero uno es un panel de estudio y luego panel en línea, pero no lo llamamos como panel en línea. Simplemente lo llamamos como una subversión del panel Studio. Este es un panel de estudio. En el panel Studio tenemos dos cosas. Uno es estudio y otro está en línea. Qué exactamente Studio IIS. Studio es el lugar donde encontrarás todos los componentes que hay en Bootstrap studio preinstalados. Significa bootstrap Studio viene con pocos componentes y pocos elementos HTML que los componentes y elementos HTML que encontrarás en el panel de estudio que como usuario, la primera carpeta será UI. Como estoy usando Bootstrap studio desde tantos días. Entonces la carpeta de usuario está ahí para mí. Antes. También obtendrás esta carpeta medida que comenzamos a subir los componentes. panel Studio es el lugar donde encontrarás los componentes y los elementos para diseñar tu sitio web. Lo segundo es en línea. El panel en línea es, como los nombres sugeridos, los componentes que no están ahí en el panel Studio. Y quieres que los componentes y los componentes que son creados por otros y subirlo a la comunidad, bootstrap Studio Community que los componentes que encontrarás en panel online y simplemente haz click en Online. Y aquí verás los componentes más tendencias. Entonces tenemos un interruptor de modo oscuro. Creo que este componente nos ayuda a cambiar el sitio web del modo oscuro y del modo de luz. Por lo que estos son algunos componentes de tendencia entonces tenemos pocos componentes de Let Us que son creados por la comunidad. Todas estas cosas están ahí. Este es el panel en línea, y este es un panel de estudio justo debajo del paralelo de estudio, esa es la visión general. Verás el resumen de nuestro sitio web basado en una estructura de nuestro sitio web, verás la visión general de la página web. Una vez que comiencemos a diseñar el sitio web, entenderás cómo usar el panel de visión general de una manera muy eficiente. A la izquierda de nuestra pantalla, tenemos dos paneles que es el estudio y visión general. En el centro, nuevamente tenemos dos paneles. Uno es el escenario, lo que se ve en el centro, esa es la pantalla blanca que se pone en escena. Y justo debajo del escenario tienes el panel del editor. Se puede ver el texto HTML por aquí y un texto de estilo. Oh sí. Solo tienes que hacer clic en cualquier lugar entre esto. Una vez que haga clic allí, verá que el editor de texto está ahora frente a usted. Verás todo el código HTML que Bootstrap studio está escribiendo para ti. En este lugar, este es el estilo en este lugar. Verás todo el CSS que ya está devuelto o quieres escribirlo justo debajo de esta área HTML, tienes los atributos. Una vez que haga clic en esos atributos, verá los atributos sobre usted. Tienes una clave y un valor para ingresar. Solo puedes crear un ID y una clase en este lugar. Así que déjame mostrarte cómo se ve exactamente. En el panel de visión general, seleccionaré esta etiqueta de cuerpo. Una vez que haga clic en la etiqueta body, se puede ver que el panel de atributos está ahí. Puedes llamar a un ID OU, puedes llamar a una clase por aquí. Y también puedes hacer alguna nueva clave y valores. Estos son los CSS que ya está escrito para usted desde el framework Bootstrap. Se pueden ver los colores y todas las demás especificaciones ya están en este lugar en particular. lienzo es el área donde verás el diseño de tu sitio web. Y en la parte superior del área del lienzo, hay algunas opciones. Veamos eso uno por uno. La primera opción es acercar y luego alejar. Puedes acercar y alejar tu lienzo. Entonces tenemos un Flip Canvas. Puedes rotar el lienzo OU. Entonces aquí tenemos la opción Fit to Canvas. Una vez que haga clic en la opción Ajustar al lienzo, el Lienzo se ajustará a esta área en particular. Entonces tenemos pocas Opciones de Vista. Lo que quieres ver como esbozar cuadrícula, mostrar modelos de caja y todas esas cosas. Entonces aquí tenemos un tamaño de la pantalla. El primero es el ancho y el segundo es la altura. Puedes cambiarlo una vez que empieces a diseñar el sitio web, la altura del sitio web cambia acuerdo a la longitud del sitio web, entonces tienes un porcentaje de OU y tienes una flecha pequeña. Oh sí. Una vez que haga clic en la flecha, podrá ver la lista de los dispositivos móviles para ver cómo exactamente un sitio web nos veremos en ese móvil en particular. Entonces tenemos una opción de selección de páginas por aquí. Este es el lugar donde puedes seleccionar la página o puedes crear una nueva página cuando tengas una página múltiple, al menos de la página vendrá en esta área en particular, entonces solo puedes hacer clic en nueva página para crear una nueva página. Tenemos la otra opción también para crear una nueva página. Veremos que también en este video solo después de eso tenemos seis tamaños de pantalla donde podemos ver cómo se ve exactamente en nuestro tamaño de pantalla particular. El primero de aquí es doble XL, es decir, pantalla extra, extra grande. Entonces tenemos pantalla de Excel, que es pantalla extra grande. Entonces tenemos una pantalla grande, la llamamos como LG. Entonces tenemos un tamaño de dispositivo mediano que es MD en Bootstrap studio. Entonces tenemos un tamaño pequeño hay SM. Entonces tenemos tamaño extra pequeño que es acceso. Por lo que tenemos seis tamaños de dispositivo diseñados específicamente para Bootstrap studio. Y en base a los tamaños de este dispositivo, el sistema de red funciona. ¿ Cuál es el sistema de red? Y todo lo veremos en los videos posteriores. Este es el lienzo. El proyecto que usted es seleccionado. El nombre del proyecto viene por aquí, esa es la primera prueba. Y justo después del nombre, si ves alguna marca de estrella, significa que este proyecto aún no se guarda. Asegúrate de guardar el proyecto ya que este es un primer proyecto de prueba, no vamos a hacer nada en eso. Entonces no voy a guardar este proyecto, pero si quieres, puedes guardarlo. Ahora en el lado derecho de nuestra pantalla tenemos dos paneles. Uno es el panel de opción, y uno está diseñado panel. En panel de opciones tenemos tres subpartes. Una es apariencia, una es opciones, y otra es animación. En el panel de apariencia, puede cambiar la apariencia del componente o elemento. Puedes cambiar el diseño, la fuente, el fondo, los bordes, todas las cosas principales. También puede ver cómo se asigna exactamente el margen y el relleno a un componente en particular o a un elemento. Después de eso tenemos panel de opciones. Estás basado en los componentes. Las dos primeras opciones cambiarán. última de las cosas quedarán parecen. Pero si seleccionas el cuerpo, entonces solo estas dos opciones están ahí. Esa es la opción de texto y la Flexbox. Pero a medida que empezamos a diseñar el sitio web, cuando seleccionemos los diferentes componentes o elementos que las opciones cambiarán en base los componentes que hayamos seleccionado en el panel de opciones, obtendremos tantas opciones para modificar los componentes. Entonces tenemos el panel Animación por aquí. Esto se utiliza para animar un componente o elemento en particular. Justo debajo de eso tenemos un panel de diseño donde nuestros recursos proyectados están dispuestos de manera sistemática. Tenemos pocas carpetas en eso. La primera carpeta es página. Si hace clic en esta flecha en particular, puede ver la página index.html está ahí. Siempre que abres un nuevo proyecto en Bootstrap studio, esta es una página por defecto que obtienes y no puedes eliminar esta página. Siempre que creas una nueva página HTML, esa página se encuentra automáticamente dentro de esta carpeta Pages. Después de eso, tenemos una carpeta de estilos donde los archivos SSS y SAS se quedarán dentro de esta carpeta. Entonces JavaScript, todo el archivo JavaScript permanecerá dentro de esta carpeta. Entonces tenemos fuentes. Todas las fuentes se quedarán dentro de esto, y las imágenes se quedarán dentro de esto. También puedes crear una subcarpeta dentro de esta carpeta en particular. Pero no se pueden mover los archivos de una carpeta a otra carpeta. Significa que no puedes mover el archivo CSS de punto al archivo HTML. El archivo STL permanecerá en la carpeta Páginas solo dentro de la carpeta Pages, podrás crear múltiples carpetas y podrás mover el archivo HTML dentro de esas carpetas, que se encuentran dentro de la carpeta Pages. Entonces pgs es una carpeta padre. Y dentro de la carpeta Pages puedes crear múltiples carpetas. Esto es lo que la facilidad del panel de diseño en la parte superior, tenemos pocas opciones por aquí que es nuevo. Podemos crear un nuevo diseño por aquí, luego abrir, crear un nuevo diseño, luego guardar ajustes de exportación de sus configuraciones. ¿ Están ahí, la opción deshacer redo está ahí. También podemos previsualizar nuestra página web mientras estamos diseñando, podemos previsualizar nuestra página web en múltiples dispositivos con solo poner la dirección IP. Ya veremos eso también en los videos posteriores. También está ahí la opción publicada. Puedes publicar el diseño, publicado en el sentido en que puedes exportar el diseño en tu máquina local o directamente, puedes publicar el diseño desde aquí al servidor mediante el uso de la cuenta Cloudflare. Por lo que también veremos que en los videos posteriores. Entonces esto es lo que la interfaz de usuario del estudio bootstrap mientras diseña el sitio web, este es el lugar donde vamos a pasar son la mayor parte del tiempo. Por eso espero que entiendas la interfaz de usuario del estudio bootstrap. Y en el siguiente video veremos cómo importar un componente en proyecto Bootstrap Studio. Nos vemos en el siguiente video. 4. Cómo importar componentes: En este video, veremos cómo importar un componente desde el panel RStudio al escenario o al panel de visión general. En ambos sentidos, veremos que este es el panel de estudio. Y se puede ver la opción de componentes de búsqueda es OEO. Al principio, lo que vamos a hacer, comenzaremos con el navbar. Vamos a importar nuestra barra de navegación por aquí. Por lo que escribiré nav. Por lo que en cuanto escriba NAB, verá pocos componentes por aquí. Eso es nav, navbar, navegación limpia y todo eso cosas. Usaremos el segundo componente que es navbar. ¿ Cómo importar el componente? Es muy simple y simplemente haga clic, mantenga presionado el mouse, haga clic, arrastre y suelte en el lienzo. Arrastre y suelte en el resumen paralelo. Entonces, si estás dejando caer esto en el panel de visión general, tienes que caer sobre la etiqueta del cuerpo. Una vez que tome su mayor puntero o la etiqueta del cuerpo, verá que el contorno azul está ahí. Simplemente toma el puntero del ratón por aquí y suelta el clic del ratón. Una vez que hayas liberado el más clicado, inmediato verás la salida del componente. Este es un componente, la barra de navegación, lo llamamos como un componente porque dentro este componente tenemos varios otros componentes. Uno es navbar, marca navbar por dentro, luego tenemos navbar-toggle ese navbar-collapse. Si abrimos un colapso navbar, nuevamente tenemos un nuevo componente que es nav. Entonces podemos abrir eso también. Entonces veremos un elemento nav. Dentro del elemento nav, estás, tenemos elemento. Este es un elemento de enlace que es una etiqueta. Entonces para ver el código que está escrito por Bootstrap studio, ese es el código HTML. Simplemente haremos click en el panel del editor y podremos ver todo el código que está escrito para nosotros. Se puede ver que esta es la una etiqueta que se selecciona por aquí. Lo que seleccionarás en este panel de visión general, esa línea en particular será seleccionada en esta área del editor de texto. Y cualquier cosa que seleccione, su, ese componente en particular se seleccionará en el panel de visión general. Vamos a seleccionar este cuerpo por aquí. Por lo que una vez que haga clic en el cuerpo, se puede ver que el cuerpo está seleccionado ahora en ambas áreas. Este es el lugar donde se puede ver el código HTML, cómo se escribe exactamente el HTML. puede ver que está escrito de una manera muy profesional. Todas las alineaciones y todas las secciones están escritas muy claramente. Ahora si quieres cambiar algo, solo tienes que seleccionar el componente en base a la selección, las opciones y el panel de apariencia cambiarán y tienes la libertad de realizar los cambios, para hacer la necesidad cambios completos en eso. Así es como importamos el componente en el estudio bootstrap. Es muy sencillo. Simplemente busque el componente, seleccione el componente, arrastre y suelte en el escenario, o arrastre y suelte en el panel de visión general. Hagámoslo una vez más. Después de esto, lo que voy a hacer, acabaré de venir aquí y trataré de importar un nuevo componente. Veamos, unos componentes ya hechos están adentro, acaba de llegar a la interfaz de usuario y en los medios. Veamos qué es exactamente. Tengo una galería de fotos. Selecciona esta galería de fotos. Ahora voy a importar esto desde el escenario. Sólo tomaré mi mayor puntero y vendré por aquí. Verás una línea azul está ahí, y una pequeña flecha también está muerta. Entonces esta es una pequeña flecha. Significa que si dejas caer este componente en particular aquí, ese componente vendrá justo debajo de esta línea azul en particular. Y por encima de la línea azul, el componente que tenemos ys navbar. Justo debajo de la barra de navegación, esta Galería Lightbox. Bienvenida. Se puede ver el nombre también la Galería Lightbox. Significa que muestra que la Galería Lightbox está a punto venir en esta área en particular tan pronto como sueltes el clic del ratón. Así que sueltemos el clic del ratón. Y ahora se puede ver la Galería Lightbox está ahí. En el panel de visión general. Se puede ver que la barra navbar está ahí. Justo debajo de la barra de navegación tienes esta Galería Lightbox. Ahora veamos cómo importar un componente entre dos componentes. Así que vamos a importar este fondo de paralaje justo en medio de esta barra de navegación y una sección. Importar un componente entre dos componentes es difícil en el escenario, pero es fácil desde el panel de visión general, ¿qué tienes que hacer? Sólo llevas ese arrastre de componentes por aquí. Cuando arrastra ese componente, puedes ver ahora el cuerpo está en contorno azul. Significa que si suelto que irá dentro del cuerpo y irá directamente por debajo de la sección lightbox. Pero queremos que este componente se convierta en medio navbar y la sección. Simplemente tomaré mi puntero del ratón más de un año y lo guardaré aquí. Se puede ver una línea horizontal entre la barra de navegación y una sección. Sección es Lightbox Gallery. Cuando veas esta línea horizontal, significa que si suelto este componente aquí, vendrá entre navbar y la Galería Lightbox. Y eso es lo que queremos hacer. Simplemente suelte mi puntero del ratón. Y ahora se puede ver este fondo de paralaje ahora está en medio de la barra de navegación y la Galería Lightbox. Se puede ver que esto es una barra de navegación. Se trata de fondo de paralaje. Y luego tenemos una Galería Lightbox. En esta etapa, se puede ver cómo se encuentra exactamente el sitio web. En el panel de visión general, se puede ver la visión general del sitio web. Ahora puedes ver en los estilos que tienes este CDN se importa. El archivo CSS Lightbox Gallery también está ahí. Espero que entiendas cómo importar los componentes en Bootstrap studio. En el siguiente video, veremos cómo editar los componentes. Entonces nos vemos en el siguiente video. 5. Editando el componente o elemento: De acuerdo, Así que ahora entendimos cómo importar los componentes. Y en este video veremos cómo editar los componentes. Para editar primero los componentes, seleccionaremos el componente. Podemos seleccionarlo ya sea desde el escenario o desde el panel de visión general. Seleccionar el componente en una etapa es simple. Cuando pongo el puntero del ratón sobre cualquier elemento o componente, puedes ver el nombre del componente por aquí. Y también se puede ver un contorno azul, como un borde azul por aquí. Esta es la zona de este rubro en particular. Seleccionaré esto tan pronto como puedas ver, un montón de iconos por aquí. Este primer ícono significa mover. Simplemente haga clic y arrastre a cualquier lugar que desee. Puedes mover el componente, puedes mover este elemento en particular. Entonces tenemos una flecha hacia arriba. Significa seleccionar padre. Tan pronto como haga clic en este ícono en particular. Se puede ver en el resumen paralelo, este es el encabezamiento que hemos seleccionado. Ahora bien, el padre de este rubro en particular es esta fatalidad. Y si hago click en esta flecha llamada Seleccionar padre, puedes ver ahora la oferta está seleccionada. Significa que al hacer clic en esta flecha, seleccionará el padre de ese componente en particular o un elemento. A continuación tenemos editar. Significa que si haces clic en esta edición, puedes editar el texto por aquí. En lugar de esta caja de luz. Lo que puedes hacer, puedes atar foto por aquí y simplemente pulsa Enter key. Y se puede ver ahora es una galería de fotos. Entonces este es el lugar donde se puede editar el componente o el texto. Cualquier cosa. A continuación se duplicará. Si quieres hacer un duplicado de este componente en particular o un texto, puedes duplicarlo. Esta opción es de gran utilidad cuando se quiere duplicar el componente con todo el CSS y estilos y cualesquiera que sean los cambios que hayamos hecho. Y quieres todos esos estilos editados en un nuevo componente, solo puedes duplicarlo. Entonces tienes la opción de altura. Si hace clic en esto, sólo puede ocultar este componente. Se puede ver que el componente todavía está aquí, pero ahora está oculto. Y cómo volver a mostrar ese componente de nuevo. Entonces para eso hay que venir al panel de visión general, haga clic con el botón derecho y haga clic en mostrar. Otro componente está de vuelta de nuevo. Si querías eliminar el componente, simplemente puedes hacer clic en este ícono de eliminar por aquí, y luego puedes eliminar el componente. De la misma manera que va con la imagen. Si seleccionas ese año, puedes ver la opción Mover está ahí. A continuación, seleccione la opción padre. ¿ Hay duplicado es su altura, está ahí, eliminar, está ahí. La opción edit no está ahí porque editar la imagen no es lo que podemos hacer en Bootstrap studio, pero podemos cambiar la imagen. ¿ Cómo cambiar la imagen? O bien haga doble clic por aquí y se puede ver un cuadro de diálogo elegir una imagen vendrá frente a usted y cualesquiera que sean las imágenes que se importen en este proyecto en particular vendrán frente a usted en esta área en particular. Si tienes una estructura de carpetas que las carpetas también vendrán sobre ti. Puede seleccionar cualquiera de estas imágenes. Una vez que seleccione la imagen. Y si haces click en Okay, esa imagen vendrá en este lugar en particular. Nuevamente, solo puedes hacer doble clic y puedes cambiar la imagen. Así es como podemos cambiar la imagen. De la misma manera lo podemos hacer desde el panel de visión general. Simplemente seleccione esta etiqueta de imagen. Y si haces doble clic por aquí lo mismo, elige un cuadro de diálogo de imagen vendrá frente a ti. Estas son las pocas opciones y las técnicas por las que se puede editar el componente o cambiar la imagen y todas esas cosas. Veremos toda esta opción en detalles también en los próximos videos. Y en la siguiente sección, espero que entiendas cómo editar el componente o un elemento en este video. Si no, puedes volver a reproducir este video de nuevo. Este será el final de esta sección. Desde la siguiente sección, veremos el panel de opciones en detalle y entenderemos cómo enganchan el panel de opciones. Entonces nos vemos en la siguiente sección. 6. disposición/composición/diseño: Antes de iniciar este video, tenemos que abrir un diseño que he creado para ti. En ese diseño, estaremos haciendo los cambios y entenderemos el panel de apariencia para eso, hay que encontrar el adjunto, los archivos de recursos en el archivo de recursos. El segundo carpeta son archivos BSS. Dentro de archivos CSS, hay una carpeta más para eso es empezar. Tienes que abrir el primer archivo que está empezando, dot diseño BS. Este es el archivo que he creado un diseño rudo. En este diseño rudo, entenderemos el panel de opciones a partir de opciones de apariencia y animaciones mediante el uso de este diseño. Empecemos con la primera opción en el panel de apariencia. Para eso, tengo que seleccionar cualquier componente. Por lo que vamos a empezar con esta sección. Seleccionaré esta sección. En cuanto seleccione esta sección, veré la apariencia y las opciones dentro de la apariencia. En este video, veremos diseños. En diseños tenemos cuatro opciones, es decir ancho, alto, margen y relleno. Y en todas estas opciones frente a todas estas opciones, tenemos esta flecha. Al hacer clic en esta flecha, verá las sub opciones que es anchura mínima y anchura máxima. Después de eso en altura tenemos altura mínima y altura máxima. En margen, tenemos margen, margen superior, margen derecho, margen inferior izquierdo. En el relleno de nuevo, tenemos relleno, top, relleno, relleno inferior, y relleno a la izquierda. Qué significa exactamente esto. Si cambia el ancho por aquí, el ancho del componente en particular se cambiará. Veamos. He seleccionado esta sección y se puede ver el contorno azul por aquí. Significa que esta es la sección que hemos seleccionado. Si aumento el ancho, se puede ver que el ancho del componente está aumentando. El texto y los botones se mueven hacia el lado derecho. ¿ Por qué? Porque estoy aumentando el ancho. Y el ancho está aumentando solo en el lado derecho. En esta sección particular, no es necesario el ancho que aumenta el ancho. Entonces lo haremos por defecto. Ahora no sabes cuál es el predeterminado número cuatro aquí, tenemos dos opciones. Si has cambiado solo el ancho, entonces solo puedes hacer clic en Restablecer todo, restablecerá todas las opciones en la sección de diseño. O bien simplemente selecciona esto, pulsa el retroceso y pulsa el Enter, y volverá a la anchura original. A partir de aquí, se puede aumentar el ancho. Se puede poner el ancho mínimo de un componente en particular y un ancho máximo de un componente en particular. A continuación, tenemos altura. Similar al ancho. Podemos aumentar la altura. Ahora se puede ver que la altura está aumentando. Ya se puede ver la línea azul viene aquí. Anteriormente estaba en algún lugar aquí. Por lo que de esta manera se puede aumentar la altura de un componente. Del mismo modo, podemos cambiar la altura mínima y la anchura mínima. Veremos estas opciones particulares cuando comenzaremos a diseñar el sitio web. Ahora tenemos margen. Margen. Podemos cambiarlo en las cuatro direcciones, o podemos cambiarlo en una sola vez. La primera opción, eso es sólo margen. Si cambiamos la opción por aquí, se aplicará a la toda la parte superior derecha, inferior izquierda. Veamos. Si lo hago diez, entonces las cuatro sub opciones están obteniendo el margen de diez píxeles. Ahora se puede ver el margen también está ahí. Se puede ver una ligera brecha está ahí significa que se aplica el margen. Si quieres simplemente aplicar a un margen específico, a un área específica. Por lo que solo puedes hacer clic en esta flecha y luego puedes cambiar el valor del margen superior. Digamos que si quieres cambiar el margen superior, entonces solo puedes cambiar el valor del margen superior. Así. Los otros tres permanecerán a 0 y el único que sea margen de par cambiará. Así es como se puede cambiar el margen. misma manera se puede jugar con el relleno. Si desea cambiar el relleno de todas las direcciones a la vez, puede cambiar el valor en la opción de relleno. Simplemente puedes bajar y cambiar el relleno de las opciones individuales. Por defecto, el relleno, la parte superior, parte inferior del relleno es de 50 píxeles y derecha e izquierda es 0. Si quisieras cambiar el relleno derecho y el relleno izquierdo, puedes cambiar el valor sobre u Esto es lo que tenemos en la sección de diseño, ancho, altura, margen y relleno. En el siguiente video veremos la sección de fuentes. Entonces nos vemos en el siguiente video. 7. Fuentes: En este video, veremos la sección de fuentes. Veamos las opciones en esta fuente. Primero tenemos color. Significa que podemos cambiar el color de la fuente. Entonces tenemos tamaño de fuente. Y se puede ver que no hay flecha frente a la palabra color. Significa que no hay sub opciones. Es sólo una opción que es color. Después de eso tenemos tamaño extranjero frente a los sitios extranjeros, tenemos esta flecha. Al hacer clic en esa flecha, verá altura de línea y el espaciado entre líneas. Entonces tenemos familia extranjera. Podemos cambiar los estilos de fuente. Y de nuevo, tenemos la flecha por aquí. Si haces clic en la flecha, puedes ver font-weight y font-style está ahí. Y por fin tenemos alineación. Por lo que tenemos pocas alineaciones por aquí. Primero uno es a la izquierda, luego centro, luego a la derecha, y luego justificar. Veamos uno por uno. Si queremos hacer cambio a la fuente, vamos a seleccionar esta fuente por aquí que se resalta. Y ahora cambiaremos el color de la fuente. Hay pocos presets ya hechos del color dado por Bootstrap y ese color preestablecido ya hecho son solo OU. A partir de ahora, solo se pueden ver cinco colores por aquí, pero son más. Simplemente da click en esta opción más por aquí, esa es la última. Se pueden ver los tres puntos por aquí. Simplemente haga clic en eso. Se pueden ver todos los demás colores en este preset particular. Por lo que solo necesitas hacer click en cualquier color, y eso es todo. El color se cambia ahora, esto era negro, ahora es rojo. Si quieres un color específico que no esté en esta paleta en particular, entonces puedes simplemente hacer click en este botón de color por aquí puedes ver que un color rojo está aquí. Simplemente puedes hacer click sobre esto. Entonces vendrás a esta opción de selector de color particular. Tienes cuatro sub paneles diferentes en ese primero es selecto. Este es el lugar donde se puede seleccionar el color, luego diseñar. Pocas paletas de colores están fácilmente disponibles por aquí. Entonces favoritos, el color favorito que has añadido. Entonces tenemos una biblioteca. Biblioteca son como un solo color con diferenciados. Esto es amarillo. Entonces nos estamos moviendo a rojo, rosa, azul, verde. Todos los colores están fácilmente disponibles por aquí en la biblioteca que vendremos a seleccionar. Aquí tenemos las opciones de selector de color listas para nosotros. En la parte inferior tenemos una línea UE, eso es HUB te line es decir, tenemos todos los colores por aquí. Simplemente arrastra el ratón sobre esta línea en particular. Y el color que quieras, solo sueltas el más punto alrededor de esa zona en particular. Entonces obtendrás los tonos de los colores, o simplemente puedes seleccionar cualquier tono. Este es el punto. Se puede ver una caja por aquí. Esta caja significa que este color particular está seleccionado. Puede seleccionar cualquier color desde aquí. Tienes que asegurarte de qué color quieres. En cuanto moverá el ratón. Desde aquí se puede ver la vista previa en vivo en esta área en particular. Te ayudará a entender qué color quieres y qué color se ve bien a tu diseño. Simplemente seleccionaré este color. Y justo debajo de eso tenemos un canal alfa por aquí que es la opacidad de la fuente. Simplemente puedes reducir la opacidad para hacerla transparente. Y esta es la una opacidad al 100%, y esta es la opacidad del 0%. También puedes jugar con esto. Si quieres seleccionar un color específico que ya está disponible en tu proyecto, entonces tienes herramienta cuentagotas por aquí. Basta con hacer click en la herramienta cuentagotas y verás un cursor diferente que está ahí. Se puede ver un círculo. Y en ese círculo tienes caja. En el centro, tienes la caja roja. Esa caja es el área donde estarás seleccionando el color. Así que una vez que vengas por aquí, se puede ver una caja roja ahora está en esa zona de color azul. Si has usado ese color azul, basta con hacer clic en ese color azul y pluma, la selección se mueve automáticamente a ese color azul en particular. Y si te gustó este color azul, basta con hacer click en Seleccionar y ya está listo. Esta es la forma en que estarás cambiando el color. Estarás seleccionando el color. Después de eso tenemos tamaño extranjero. Si quieres cambiar el tamaño extranjero, entonces solo puedes cambiar el tamaño extranjero desde aquí. Por defecto, el tamaño era de 32, y se puede cambiar el tamaño extraño. Dentro de sitios extranjeros, tenemos dos opciones que es line-height. Si desea cambiar la altura de la línea, también puede cambiar la altura de la línea. Y si querías cambiar el espaciado entre letras, también puedes cambiar el espaciado entre letras. Entonces así es como se puede cambiar el espaciado entre letras. Si desea traer de vuelta estas opciones al estado predeterminado se selecciona y pulsa el retroceso e enter, selecciona retroceso e ingresa, selecciona retroceso e ingresa, selecciona retroceso e ingresa. Y esto ahora está en el tamaño predeterminado. Después de eso, hemos formado familia. Podemos cambiar la fuente de usted. Por defecto, se puede ver la fuente. ¿ Hay algún sistema alfa, algunos extranjeros son, se aplica alguna fuente. Para cambiar la fuente. Basta con hacer clic en esta flecha OU, y verá Agregar opción de fuente. ¿ Hay? Simplemente haga clic en la opción Agregar fuente y el menor de fuente vendrá frente a usted. Hay tantos foros. Puedes buscar el formulario desde año porque hay tantas formas. Por ahora, lo que voy a hacer, acabo de seleccionar cualquier fuente aleatoria que llenaré. Será bueno. Voy a ir con sólo voy a ir con éste. ¿ Y cómo encender este teléfono? Sólo tienes que hacer click en esta casilla de verificación. Una vez que se revise, simplemente haga clic en Guardar. Ahora se importa la fuente. Se puede ver en las fuentes en el panel de diseño, se puede ver la fuente ya está aquí. Anteriormente estaba vacío. Ahora la fuente está ahí. Y ahora queremos cambiar el formulario, seleccionar el componente o elemento, venir a la familia extranjera, click en la flecha, y ahora se puede ver la fuente. Está ahí. Basta con hacer click en esa fuente y boom, se cambia la fuente. la misma manera se puede cambiar el peso de la fuente. Se puede aumentar el peso extraño de normal a negrita. Hay dos opciones, normales y audaces. Y en estilo fuente tienes otras opciones que es normal, cursiva y todas las cosas. Entonces si hago clic en Data Lake, el foro se convertirá en estilo cursiva. Los orales vuelven a la normalidad. Esto es lo que son en familia extranjera. Y ahora alineación. En alineación, tenemos un truco por aquí. Esta alineación ya está centrada, pero aquí se puede ver que la alineación central no está seleccionada. Quieres, si hago clic en la alineación izquierda, la fuente no irá a la alineación izquierda. El motivo detrás de eso es la alineación formada se controla en el panel de opciones. Si voy al panel Opciones, se puede ver que la alineación está centrada. Si la alineación de esa fuente en particular está controlada por el panel Opciones, entonces si realiza algún cambio en la evidencia, no se cambiará. Es muy habitual que cuando estás diseñando el sitio web, si estás cambiando la alineación de la fuente a partir del año, y si la alineación no se está cambiando, no te enfades. Simplemente ve al panel Opciones y cambia la alineación de ti. En la siguiente sección estamos llegando al panel Opciones, pero vamos a completar primero el panel de apariencia año. Entonces así es como la sección de granjas es controlar el primer color Este, se puede cambiar el color, luego el tamaño extraño que familia extranjera, y luego la alineación. Es muy fácil que sin escribir el código podamos encadenar la mayoría de las cosas. Así es como se facilita la sección de formularios. Y en el siguiente video veremos el fondo bajo la epidermis. Entonces nos vemos en el siguiente video. 8. Antecedentes: Y en este video, vamos a ver sobre los antecedentes. En segundo plano tenemos tres opciones principales. primera opción es agregar imagen, luego tenemos añadir gradiente, y al fin tenemos BG. Bg no es más que fondo. La forma corta de fondo es BG agregar gradiente. Y el color bg está específicamente relacionado con los colores solamente. Y añadir imagen en el sentido podemos añadir la imagen en el fondo. Entonces lo que vamos a hacer, en lugar de ir de manera recta, veremos en un lado hacia atrás, significa que primero veremos el color de fondo. Entonces veremos sumar gradiente. Y por fin veremos Agregar Imagen. El color de fondo es tan similar como los colores en la fuente. La única diferencia será que esta opción en particular cambiará. Aplicará un color al fondo del objeto en particular. Qué es exactamente, vamos a ver. Igual que el color. Tenemos un color de tema, que está ahí. Podemos ver aquí. Simplemente haga clic en cualquier fondo. Entonces como esto es como un ligero color rojo, así que trataremos de darle un color negro al fondo. Entonces este es un color negro, pero este no es un negro completo. Se trata de un grados o gris oscuro. Sí, es Está escrito ese gris oscuro. Por lo que una vez que haga clic en ese color, se puede ver ahora el color de fondo está lleno de ese color. Este es el color de fondo. Y de igual manera, si quieres un color diferente, un color específico que no está en esta paleta de colores en particular, entonces solo tienes que hacer click en este selector de color año opcional. En lugar de Diseño, ve a Seleccionar, selecciona un color específico que quieras. Digamos que quiero este color en particular donde el valor de dB rojo es 384041. Y voy a estar usando esto con frecuencia, solo por ejemplo, como lo estaré usando con frecuencia, así que lo pondré en el favorito. Y ahora tengo dos colores en el fracaso. Uno es para el texto y otro es para el fondo. Ahora voy a hacer click en Seleccionar. Eso es todo. Así es como estarás aplicando el color de fondo. Puede preguntarme como ¿y si quisiera darle un color de fondo a toda la página? Sí, sencillo. Selecciona la etiqueta de cuerpo y cambia el color de fondo. Para eso. Te mostraré cómo es exactamente. Selecciono la etiqueta cuerpo, cuerpo en el sentido, esta es una página web completa. Justo desde esta cima. Este final de la página es un cuerpo. Esta etiqueta de cuerpo voy a seleccionar. Vendré al color de fondo, y usaré este color solamente. Sólo voy a hacer click sobre este color. Y eso es todo. cambia el color del cuerpo. Ahora, ¿por qué esta área no está cambiando? El motivo detrás de eso es, ya le tiene un color de fondo. Ahora cómo podemos quitar este color en particular, cómo podemos quitar un color blanco. No tenemos ningún color nulo por aquí. Yo también te mostraré eso. Ahora lo que voy a hacer, seleccionaré esta área en particular, es decir sección, esta está justo debajo de la barra de navegación. Tenemos esta sección. Seleccionaré esta sección. Y ahora se puede ver el color de fondo de la sección de esta sección en particular es Grundy cinco, veinticinco, veinticinco, valores rojo, verde y azul a los veinticinco. Veinticinco veinticinco. Significa que es de color blanco. Haga clic en este selector de color. Vaya a la selección, vaya a Seleccionar. Y ahora esta opacidad es la correcta. Ya te lo dije, esta es la transparencia aquí que es alfa. Bajar ese alfa a 0. Una vez que traigo ese alfa a 0, ahora tiene un color nulo, sin color para esta sección en particular. Se puede ver ahora RGBA que veinticinco, veinticinco, veinticinco, pero el Alfa es 00 en el sentido Z PARA completar un 100% de transparencia. Ahora, si queremos un ingrediente degradado en el sentido mezcla de dos colores, si queremos esa opción en particular, entonces lo que vamos a hacer, usaremos esta opción llamada gradiente. Lo que voy a hacer, en lugar de poner el gradiente por aquí, seleccionaré la segunda sección, es decir el año horizontal del proyecto. Aplicaremos el gradiente. De acuerdo, así que simplemente lo desplazaré hacia abajo. Déjame ver cómo fue exactamente está bien. Se puede ver este color azul por aquí, la línea azul por aquí. Entonces este es el final de la sección. Esta porción en particular, esta porción es lo que es nuestra segunda sección. Nosotros sólo proyectos horizontales. Agregaremos un degradado. Lo que voy a hacer, haré click en Agregar gradiente. cuanto hago click en Agregar degradado, se puede ver el color de fondo no es transparente, es totalmente transparente. ¿ De acuerdo? Ahora la opción Degradado está encendida. Ahora se puede ver en la parte superior tenemos color negro y en la parte inferior de esta zona en particular tenemos color blanco. ¿ Por qué es blanco y negro? Simplemente porque por defecto el color degradado es blanco y negro. Se puede ver que esto es negro y esto es blanco. Bien, veamos las opciones dentro del degradado. La primera opción es el tipo. Tenemos dos tipos de gradiente. Uno es gradiente lineal, que es ahora que acabamos de seleccionar. Y el segundo es un gradiente radial. ¿ Cuál es la diferencia entre gradiente lineal y gradiente radial? Gradiente lineal significa que viaja en línea recta. Se puede ver que el color negro está ahí y el color blanco está aquí. Es de viaje. El color negro está viajando al color blanco en línea recta. Pero esto significa que es un gradiente lineal. gradiente lineal viaja en línea recta, pero el ángulo se puede cambiar desde donde continuamos en el ángulo. Este es el lugar donde podemos cambiar el ángulo. Ahora es por defecto es de 180 grados. Puedo cambiar el ángulo para que puedas ver ahora el color negro es amarillo y el color blanco aún está. Pero de nuevo, está viajando en línea recta. Sólo el ángulo del recorrido es de 148 grados. Vale, esto es 148 grados. Entonces lo llevaremos de vuelta al defecto. Simplemente lo voy a quitar. Entonces este es el ángulo del gradiente. Ahora veamos cómo cambiar el color del degradado. Primero es negro y el segundo es blanco. También puede cambiar el desplazamiento de esta área en particular. Voy a cambiar el offset de esto y se puede ver el color negro está tomando el cuarto extra solo porque en esta zona particular estoy diciendo que el color negro tiene el cuarto extra que se compensa. Le estoy dando el cuarto extra. Esa habitación extra se llama como offset. Esto es lo que estoy haciendo, así que simplemente lo llevaré de vuelta a las esquinas extremas, ambos de los colores en las esquinas extremas. Ahora vamos a cambiar el color. En primer lugar, seleccionaré esto. En cuanto haga click en esto, se puede ver la opción de color está aquí. Ahora. Ahora se puede ver que el color negro está ahí. Significa que este es el color negro. Sólo voy a hacer click sobre este color rojo Oreo, el color de inicio es rojo. Cambiaremos el color. El color rojo no se ve bien. Hay un poco de calor. Entonces en lugar de eso, lo que vamos a hacer, tomaremos un color azul. Entonces este es de un color azul. Se lo podemos llevar el color azul. Vamos a mantenerlo al color fresco. Seleccionaré este color azul, y haré click en seleccionar el primer color es ahora azul. El segundo color volverá a tomar azul, pero cambiaremos la intensidad de ese color. Entonces primero seleccionaré este color azul, luego vendré a seleccionar, y luego lo moveré a la porción más ligera. Ahora, tu yo soy, este es el color que soy seleccionado. Ahora. Voy a hacer clic en seleccionar el color del degradado se ve así y está en forma lineal. Offset es 101%, 100% en ese sentido, ambos están en las esquinas extremas. Esto es compensado. Digamos que estoy llevando este desplazamiento hacia algo aquí. Y voy a hacer click en, Repetir el degradado. Ahora se puede ver el offset. Esto es correcto Exactamente En 50%, como se puede ver, no es 50%. El comienzo del color es éste. De acuerdo, este color azul, el color azul oscuro. El color comienza a partir del año. Se terminó justo exactamente en el 50%. Una vez que llega al 50%, inmediatamente se inicia de nuevo desde este particular color azul. Por lo que está partiendo de este color, color azul, bajando al blanco. Y el oficial tiene 50 años. Tan pronto como se termina el offset contra stock. Es decir, eso es lo que es la opción de repetición. De acuerdo, así que si apago esta opción llamada repetición, entonces el offset tomará el color blanco, este color azul claro. Se le dará el cuarto extra. Y el color azul tomará la lección. De acuerdo, así que vamos a traer esto de vuelta a un 100%. Y luego vamos, este es el gradiente lineal. Degradado lineal significa viajar en línea recta. El color viaja en línea recta. Ahora veamos qué es el gradiente radial. Gradiente radial significa que viaja en forma circular. Entonces lo cambiaré al gradiente radial. Y ahora se puede ver el color azul está en el centro y en la forma circular, ese color está cambiando. En el centro, es azul. Ahí arriba a la izquierda, es de color blanco. En la parte inferior izquierda, es blanca en la parte inferior derecha es blanca en la parte superior derecha es blanca. Por lo que solo viaja del centro a las edades en esta forma circular. Si quieres cambiar el color RLC, si quieres voltear los colores, lo que puedes hacer es que puedas cambiar el offset. Se puede llevar este color en este punto y este color a este punto. Y ahí vamos. Si quieres mantener el mismo color pero en forma flip. solo puedas recoger esto y llevarlo a la otra dirección. La opción de degradado funciona así. Entonces tienes dos gradientes. Uno es el gradiente lineal que viaja en línea recta, y uno es un gradiente radial que viaja en forma circular. Ahora lo que vamos a hacer, veremos la opción de imagen, esa es la opción Agregar imagen. Antes de entrar en la opción Imagen, lo que voy a hacer, sólo voy a hacer clic en este icono de cruz por aquí para que la opción de gradiente desaparezca. Y tenemos una posición predeterminada ahora que es de color blanco. Y ahora agregaremos una imagen. Si hago clic en esta carpeta de imágenes por aquí, hay pocas imágenes que hay, como este bus y luego esta laptop de construcción y todo eso. Pongamos cualquier imagen de fondo en esta área en particular. Lo que voy a hacer, volveré a hacer clic en este apartado. Entonces si hago clic aquí, esto es seleccionando el contenedor. Y si hago clic en tu exterior de ese contenedor, seleccionará la sección o de lo contrario puedo llegar directamente al panel de visión general y puedo seleccionar esta sección de tu parte. Una vez que seleccione esta sección, ahora haré click en Agregar imagen bajo fondo. Simplemente haga clic en Agregar imagen. En cuanto haga click en Agregar imagen, la opción Agregar imagen vendrá frente a usted. Ahora tienes URL. Url. Puedes agregar cualquier imagen, no importa si has agregado la imagen en el proyecto bootstrap Studio o no, simplemente haz clic en el icono Agregar aquí. Este botón Agregar está ahí. Demos clic en ese botón Agregar. Las herramientas y la imagen pop-up vendrán frente a ti. Simplemente seleccione cualquiera de la imagen. Seleccionaré esta imagen y voy a hacer click en, Ok. Una vez que haga clic en OK, se puede ver la imagen de fondo está justo detrás de esta área en particular. De esta manera podemos sumar la imagen, pero ahora se puede ver la imagen, la imagen original solo tiene una postura, pero tiene 1234 escaleras o por eso? El motivo es de nuevo, voy a hacer click en este Agregar Imagen. Ahora se puede ver el tamaño de la imagen es 640 píxeles por 426 píxeles. Esa imagen en particular es justo encajando en esta área en particular. Entonces una vez que la imagen ha terminado, repite la imagen. Y en la parte inferior también repite la imagen. Si queremos encajar la imagen, tenemos que jugar con la posición. La segunda opción es la posición. Por lo que voy a hacer clic en esta opción de posición. Después tenemos arriba, abajo, izquierda, derecha, y centro. Entonces, lo que voy a hacer, haré click en Centro. En cuanto hago click en centro de la imagen principal viene en centro. Alrededor de eso todas las otras imágenes vienen en bucle. ¿ De acuerdo? La siguiente opción es el tamaño. Si vengo en tamaño, dice auto, contener destapar. El valor predeterminado es un automático. Si el automático está en él repite la imagen. Si selecciono contener, captura toda el área, pero en formato de altura y anchura. Pero si se ve atentamente, esta área en particular se repite y se repite esta área en particular. Por lo que la imagen está tomando el área que contiene el área en términos de altura y no está expandiendo el área más allá del tramo. Pero si se descubre el tamaño, entonces cubre la zona. No importa qué porción se muestre o cuál no se muestre. Acabamos de cubrir la zona y Pilsen toda la porción. Esta es una cosa. Y digamos si esta porción está arriba de nuevo y esto es auto, por lo que esta repetición está ahí. Pero en la opción de repetición, si vienes y si dices no repetir, entonces solo verás una imagen que está en el centro, que está en la posición superior. Si vengo aquí y haré click en centro. Entonces podemos decir que la imagen está ahí, pero no hay opción de repetición está ahí. Pero en repetición, si dices repetir x, entonces solo el eje x estará en la forma de repetición. Si dices repetir, ¿por qué? Entonces solo eje Y en una repetición superior e inferior. Si ves una repetición, entonces en cada exceso se repetirá. El mejor ajuste para la opción de imagen de fondo es poner la posición en el centro, mantener el tamaño en portada, y la repetición debe tenerse en cuenta que la primera es URL. Puedes agregar la imagen por aquí, la posición, la mejor opción será centrada, tamaño, la mejor opción, se cubrirá. Y la última repetición, no debería ser en no-lípidos sólo si se requiere. Pero aún así puedes ir a jugar con las opciones y puedes poner las opciones como quieras. Entonces estas son las opciones en segundo plano. Por lo que acabaré de quitar esta opción. Te mostraré una técnica interesante y muy útil. En pocos sitios web es posible que hayas visto como si hubiera una imagen encima de esa imagen, el degradado también está ahí. Lo que podemos hacer es como si solo pudiéramos añadir un gradiente. Demos clic en Agregar degradado, y seleccionemos dos colores. Vámonos a la biblioteca. Y acabaré de seleccionar este color amarillo por aquí. Voy a hacer clic en OK. Y en lugar de este color blanco, solo tomaré otro color amarillo oscuro. Para este ejemplo, está bien para mí. Se puede ver estas líneas ahí arriba antes de este interruptor de color. Por lo que sólo voy a hacer clic en esta área en particular y puedo colapsar esas opciones. Ahora lo que voy a hacer, haré click en Agregar Imagen. Daré click en Agregar Imagen. Escogeré una imagen. Volveré a usar la misma imagen o tal vez usaré esta imagen de minibús. Entonces haga clic en Okay. Ahora lo que voy a hacer, sólo voy a hacer click en posición central, cubierta central. No se repite. Ahora quiero ver la imagen también y el gradiente también ambos efecto quiero. Lo que voy a hacer, haré click en editar degradado. Este icono de edición está aquí para y da clic en este icono. Y seleccionaré este primer color. Volveré a esta herramienta selector de color, y aquí dejaré caer la opacidad. Un poquito. Opacidad voy a caer. Ahora creo que ahora se puede ver que el autobús no es visible. Sólo estoy cayendo, bajando, bajando y bajando hasta 0.5 alfa. Eso es exactamente el 50%. Y simplemente haga clic en, Ok. Ahora, ¿qué está pasando? Este color es 50% transparente, y este color es 100% sólido. Este color también vendrá aquí y dejará caer la opacidad, pero dejaré caer la opacidad hasta el 77%. Eso es todo. Y voy a hacer click en Okay. Ahora se puede ver algo interesante. Es como si la imagen también estuviera ahí. Y encima de esa imagen, el degradado también está ahí. Ahora vamos a quitar este color de fondo de esta porción en particular que es este rubro. Por lo que acabo de venir aquí y voy a hacer clic en el reset. Y que ilegal cómo podemos jugar con la opción de fondo en apariencia. ¿ No es interesante? Aquí es donde vamos a terminar este video. Y en el siguiente video vamos a mirar por encima la opción de fronteras en eso aparece. Entonces nos vemos en el siguiente video. 9. Borde: En este video, aprenderemos sobre las fronteras. Por lo que estas son las fronteras justo debajo del fondo, tenemos las opciones de fronteras. Veamos cómo funcionan exactamente las fronteras. Para eso, lo que voy a hacer, seleccionaré este texto. Este es un párrafo en esta Galería Lightbox aquí y selecciona este párrafo. Hay pocas cajas por aquí. Y en cada cuadro que son 11 líneas las cuales se resaltan. Y otras tres líneas son una especie de difusa. ¿ Qué significa exactamente esto? Significa como cuando vas a hacer clic en este cuadro, solo renunciará a frontera, borde superior. Sólo aplicará un borde superior. Si hace clic en este cuadro, se aplicará un borde inferior. Si hace clic en esto, se aplicará un borde izquierdo. Si aplicaste, si haces click en esto, se aplicará borde derecho. Y si postulas en el centro, le dará frontera al ovocito. Entonces en la parte inferior tenemos dos opciones. Si hace clic en esta área en particular, es como el radio fronterizo. Creará, dará la flexibilidad para crear una frontera redonda envejecida. Y esta opción creará un radio de frontera individual. Radio de frontera individual. Significa como si no fueras a hacer nuestra edad de suelo solo a la parte superior derecha, entonces solo puedes dar eso alrededor de los dos años, el de arriba a la derecha y los otros tres frontera serán h. Veamos uno por uno. Y también veremos el color de los estilos. Creo que a partir de ahora has entendido cómo funciona exactamente el color. Y radio se puede ver. Quiero decir, basta con hacer click en Todos los bordes todo el año y luego le daré un color, tal vez color rojo. Y el estilo desde el defecto, tomaré dos sólidos. En cuanto llevo el estilo a sólido, se puede ver que es un borde rojo por ahí. Ahora digamos que sólo quiero un borde en el lado superior de este párrafo o en el lado inferior. Entonces lo que tengo que hacer es que voy a crear, haré clic en reiniciar todo. Voy a hacer clic en la parte superior de la frontera. Vendré a estilo y seleccionaré un estilo sólido. Voy a cambiar el color. Eso es todo. Ahora se puede ver tenemos un tope fronterizo para el párrafo en particular. Digamos que quiero borde fondo también, lo que voy a hacer, voy a hacer click en borde inferior. Volveré a ir al estilo y haré click en Sólido, y voy a dar un color. Puedo dar un color diferente también. Sólo por ejemplo, estoy dando este color índigo y borde izquierdo también quiero, seleccionaré el borde que queda. Voy a dividir en sólido y voy a dar algún otro color, tal vez este color azul, cualquier cosa. Sé que esto no se ve bien, pero estoy haciendo esto solo para el propósito de ejemplo. Entonces ahora lo que podemos hacer es como digamos que quiero aumentar el veredicto de la frontera superior. Nuevamente, selecciona el borde superior. Una vez seleccionado el borde superior, se pueden ver los ajustes como el color sólido y rojo está ahí. Y el veredicto del borde superior, vamos a aumentar el ancho. Esto es todo lo que vamos a aumentar el ancho. Digamos que el ancho, lo mantendremos a 15 pixeles. Ahora podemos cambiar el estilo también. Así que veamos el estilo uno por uno. Veremos el estilo. El primero es predeterminado. El valor predeterminado no es nada como ninguno. Entonces tenemos sólido, entonces nos hemos discontinuado. Podemos ver que el discontinuado está ahí. Después hemos punteado, luego el doble, luego creció. Tenemos dos colores diferentes en una línea. Entonces tenemos rígido. Después inserta, de inicio. Tenemos inicial que heredado, luego oculto, inicial heredado y oculto. No sé cómo es exactamente, pero nunca se presentan. Desde un sólido hasta el principio. Podemos usarlo. Digamos que estoy usando este color rojo sólido con algún extrovertido, o el color ha cambiado. En realidad es un rosa, no rojo. Después haga clic en el color rojo de nuevo. O tal vez podamos tomar un azul como el azul. Cambiaré los pixeles y acabaré de quitar estos otros bordes. De esta manera podemos hacerlo. Así es como agregamos la frontera. A veces lo que hacemos, pensamos como el borde inferior será agradable. Por lo que simplemente eliminaré los roles de la junta superior y seleccionaré el tablero superior. Daré clic en Predeterminado y seleccionaré el borde inferior. Y haré clic en Sólido y tomaré un color azul. Y tomaré, y solo aumentaré la altura. Puedo tomar un tablero o estilo también, puedo tomar un estilo de borde punteado también. Puedo tomar una doble línea también. Por lo que la línea doble también se ve bien. Tenemos múltiples opciones como creció, tenemos GRU también se ve bien. No es nada malo en eso. Es como si fuera sólo un estilo, estilo de frontera. Ahora, esto es lo que hemos hecho a partir de ahora. Hemos visto los todos los lados de la frontera y los resultados de la junta central están ahí. Ahora vamos a hacer clic en el botón Restablecer todo por aquí y disco y simplemente aplicar todos los bordes con color azul con un color sólido. Y vamos a aumentar el vert poco para que podamos verlo correctamente una vez que nos movemos al radio. Esta opción de radio solo voy a hacer clic en esta opción de radio y se puede ver este radio en pixeles. Vamos a aumentar eso y se puede ver que las fronteras ahora se están moviendo a unas fronteras redondeadas. Se puede ver eso. Se puede ver exactamente. Ya lo puedes ver. Ahora las fronteras no están envejecidas y son redondeadas. Ahora, lo mismo sucede en esta opción también, pero funciona de forma individual. Sólo va a hacer que sea 0 ahora. Y haré click en esta otra opción que es fronteras individuales. cuanto haga click en ese botón, se pueden ver cuatro opciones por aquí, que muestra el lado de la edad. Esto es de arriba a la izquierda, arriba a la derecha, abajo a la derecha, inferior izquierda. Empecemos con esta área. Ahora se puede ver podemos tener un diseño específico, digamos 32 pixel year y 32 pixel ahí. Se ve bastante diferente y bastante único también. O de lo contrario solo lo seleccionaré una vez más. Y esto es 3232. Y a lo mejor éste le vamos a dar un tobogán frontera como 19 ahí y 19 años. Contamos con un diseño diferente. Pero si vamos con el 0 hasta estas dos opciones, se ve bastante diferente y se ve bastante bien también. A partir de aquí, se puede cambiar el color en cualquier punto del tiempo. Si quieres este color amarillo, también puedes ir con ese color amarillo. Así es como funciona la opción fronteriza, y así es como estaremos usando la opción border en Bootstrap studio. Ahora en el siguiente video, avanzaremos y veremos opción de sombra de caja. Nos vemos en el siguiente video. 10. Sombra de caja: En este video, vamos a aprender sobre box-shadow. Para eso, lo que voy a hacer, simplemente me desplazaré un poco hacia abajo y aquí tenemos un formulario Contáctenos. Seleccionaré este formulario, no seleccionaré ningún componente hijo del formulario. Simplemente seleccionaré el formulario. Puede ver la selección en el panel de visión general. Una vez que selecciones el Formulario, entonces ven a la opción caja-sombra, y verá solo un botón por aquí que se agrega. Pero al hacer clic en Agregar, obtendrá múltiples opciones. Daremos click en Agregar. Entonces la primera opción es invertida. Esta opción veremos al final. La segunda opción es el color. Así que de nuevo, como a menudo ahora has entendido cómo funciona exactamente el color. Entonces esta es la opción de color. Entonces tenemos x e y. por defecto, las x e y están en 0 pixeles. Entonces lo que vamos a hacer, sólo vamos a aumentar la distancia, inducirá los píxeles, lo llevará a tal vez 14 pixeles. Estás en exposición en eje x, moveremos la sombra, 14 pixeles, positiva en un lado positivo. Y eje y, moveremos la sombra y píxeles en el lado positivo. No hizo pixeles. Ahora, aspart bootstrap Studio, tenemos una caja-sombra, que está en eje x. No es lado positivo 14 pixeles y eje Y no es lado positivo diez píxeles. Pero si vemos prácticamente la sombra debe ser un poco de desenfoque y tiene una propagación también. Y Bootstrap Studio nos da la opción de difuminar y difundir. Desde el desenfoque, lo que podemos hacer es que podamos aumentar el desenfoque. Y habrá buena. Tenemos aumento el desenfoque y también podemos incrementar la propagación. Pero si aumentamos la propagación, se ve bastante raro para este ejemplo en particular. Pero tal vez en tu caso en alguna otra situación, la opción de espíritu funcionará absolutamente bien. Para este ejemplo, mantendré el spread en 0. Y también quiero que mi color deba, el color de la sombra no debe ser tan oscuro. Lo que voy a hacer, llegaré al color y tomaré un color diferente que es como una especie de sombra actualmente. Sí. Ahí vamos. Me gusta este color. Esto es RGB 1198198198. Simplemente haga clic en Seleccionar. Eso es todo. Esta es la caja-sombra. Ahora en el siguiente video veremos sombra de texto. Y para eso tenemos que seleccionar el siguiente. Nos vemos en el siguiente video. 11. Sombra de texto: Agosto en la caja-sombra está hecho. Ahora nos estamos moviendo a la sombra del texto. Para eso. Definitivamente estaré seleccionando el texto, seleccionaré el texto Contáctenos. Ven a esta opción de sombra tecnológica y haré click en Agregar. Ahora puedes ver las mismas opciones que están aquí. Sólo la opción de propagación no está ahí. Lo que puedo hacer es como, solo vendré aquí y seleccionaré este color que es 198198 o 100 sobre 97 también está bien para mí. Sólo voy a hacer click en Seleccionar, y sólo voy a aumentar el valor de x e y, pero no voy a aumentar demasiado para el pixel está bien en el eje x e y y y sólo voy a aumentar la cantidad de desenfoque. Eso es todo. Esta opción en particular, como cuatro píxeles otra vez, es buena para mí. Así funciona la opción de sombra de texto. Si no quieres el desenfoque, puedes mantenerlo como 0% también 0 pixeles. Para mí, esta opción es bastante buena. Pero sí, una cosa más que voy a contar, me gustaría decírtelo. Puedes agregar múltiplos, caja-sombra, agregar múltiples sombras de texto, así. Tech shadow que has agregado, si quieres agregar más para el mismo elemento o para el mismo componente, puedes agregar más. Lo mismo va con la caja-sombra. Eso es todo lo que se hace la sombra del texto. Los resultados de la caja-sombra se realizan en el video anterior. En el siguiente video veremos la opción de transformación, y luego la última veremos la opción de filtros y luego se hace nuestra sección de apariencia. Nos vemos en el siguiente video para ver transformar. 12. Transformar: Ok chicos, En este video vamos a ver sobre Transformar. Mientras aprende a transformar, lo que vamos a hacer, vamos a abrir un nuevo archivo, vamos a llegar a su archivo de recursos bajo archivos BSS, y usted tiene una carpeta que es hash para subrayar transformar. Apenas abre esa carpeta y en eso encontrarás una b como archivo de diseño. Basta con hacer doble clic en ese archivo. Y habrá grupo en este archivo de diseño está listo. En esta imagen, entenderemos cómo funciona exactamente la opción de transformación bajo la apariencia. En apariencia, nos desplazaremos hacia abajo y encontraremos aquí la opción llamada transform. Si todas las demás opciones no te son visibles, solo tienes que hacer click en esta flecha de aquí. Y eso es todo. Veremos las opciones que hay ahí en transformación. La primera opción es prospectiva. Podemos cambiar la perspectiva de una imagen o de un componente o lo que sea. Después hemos traducido, y de nuevo tenemos flecha por aquí. Entonces podemos traducir la selección particular en x, y, y eje z. Entonces tenemos rotación. De nuevo, podemos rotar una selección particular en el eje x, y, y z. Entonces tenemos escala XYZ y switch, tenemos XY. Por lo que puede haber notado más de año que tenemos tres x por aquí, es decir x, y, y z. y siempre que el exceso que es eje zed viene en la imagen, significa que tiene una característica 3D. Cuando estoy hablando de nuestro 3D, no es un 3D real. Es como una ilusión de 3D. No estamos haciendo la imagen en un formato 3D, pero es como ilusión. No es un 3D real te hace, o que no es un 3D real, es la ilusión. Empecemos a entender las opciones bajo transformación. Primero es prospectivo. Si haces algún cambio en lo prospectivo, no verás ningún cambio. El motivo detrás de que la perspectiva está cambiando. Pero como te dije, es sólo la ilusión. La ilusión no es visible en la imagen plana. Entonces hagámoslo por defecto. Lo voy a quitar. Eso será ir primero. Te mostraré la opción de traducir. Traducir no es más que un movimiento de una selección particular. Esto traducirá la posición en el eje x. Traducir Y está traduciendo la posición en eje y. Y ahora cuando voy a mover el eje z, no verás ningún cambio a lo largo del año. Cuando queremos ver los cambios del eje zed, tenemos que hacer una cosa. Tenemos que encontrar este componente en particular que es una etiqueta de imagen. En realidad es la etiqueta de imagen. Esta etiqueta de imagen está bajo qué componente o qué etiqueta. Entonces antes de eso lo que voy a hacer, acabaré de hacer todas estas cosas a 0. Hagámoslo como reiniciar todo. He seleccionado esta imagen. Esta imagen está por aquí. Lo podemos ver en el panel de visión general. Y esta imagen es un hijo de este particular debido, porque dentro de este Do esta etiqueta de imagen se encuentra. Entonces puedo mostrarte si colapso esto, podemos ver que la etiqueta de imagen está dentro de esta etiqueta div. En la opción de transformación, me desplazaré hacia abajo hasta la última opción que se conserva 3D, y activaré esta opción en c. quería hacer los cambios a esta imagen en espacio 3D, ok, 3 Espacio D en el eje central zed, quiero hacer los cambios a la imagen en el eje zed. Para hacer los cambios a esta imagen en el eje z, tengo que decirle a Bootstrap que esta imagen está dentro de este div, y este div es aparente y esta imagen es un niño. Siempre que quiero hacer algún cambio, tengo que asegurarme de que el padre se convierta para preservar el espacio 3D. Ahora, bootstrap studio sabe que este div está en espacio 3D. Ahora lo que voy a hacer, tomaré esta imagen un poco por un lado ascendente. Se puede ver esto por nombre de autor, septiembre, alguna fecha es su suelo. Asegúrate de que esta imagen sea sobre eso. Y por qué en este texto lo estoy haciendo. Por qué no estoy haciendo en este texto en particular. El motivo detrás de eso es este texto está en esta fila, y esta fila no está en el espacio 3D. Esto no es preservar ningún espacio 3D. Entonces nosotros, por eso no estamos haciendo en esta imagen. Y la segunda razón es que esta imagen está dentro de este div. No hay relación entre este div y esta fila, ¿de acuerdo? Y este texto que está oculto ahora, ese texto también está dentro de este div. Entonces todo el div está preservando el espacio 3D. Este párrafo también está dentro del espacio 3D. Esa es la razón por la que estoy tomando este ejemplo. Estoy tratando de explicarte sólo con este texto. La imagen es, oh, estás superponiendo ese texto en particular. Ahora, vamos a venir tú. Aquí es donde queremos hacer genio, ¿de acuerdo? Entonces si lo llevo al lado positivo, está llegando hacia el verde. Significa que está saliendo, pero no podemos verlo. ¿ Por qué? Porque no hay nada que ver. Pero si lo llevo al lado negativo, ahora se puede ver el nombre del autor está ahí. Al tratarse de una imagen que está dentro de este div, estamos haciendo los cambios y ahora hemos cambiado la posición de esta imagen en el eje z. Por lo que podemos ver este texto. Es visible cuando tomamos esta imagen en el espacio negativo. Y así este texto está al frente. Ahora, si tomo esta imagen en el lado positivo, la imagen en el frente y el texto está detrás de esa imagen. Lo mismo. Una vez más te mostraré con este ejemplo. Esta imagen, imagen particular está dentro de esta etiqueta de figura. Y el padre para esta etiqueta en particular es este div. Nuevamente, dentro de este div, todos estos textos están ahí. De acuerdo, entonces seleccionaré esta opción por aquí y eliminaré este título. Simplemente seleccionaré este div. Y ahora lo que tengo que hacer 0s, bajaré y comprobaré esta opción en que se conserva 3D. Ahora esto está en el espacio 3D y todo el texto dentro de este div está en espacio 3D. Selecciona esta imagen. Y lo que voy a hacer, traduciré el eje y, por lo que ahora se superpone. Y ahora lo transformaré en z. para que puedan ver, eso es todo. Para que puedas ver el texto por aquí. Ahora es un negativo, por lo que el texto es visible. Y en cuanto lo llevo al lado positivo, el texto no es visible. Ahora. Así es como camina el espacio 3D. Este es un translate in zed axis. Ahora veamos la rotación. La rotación es, como el nombre sugerido, se puede rotar en el eje x, y, y z. Ahora te mostraré la relación entre la rotación y lo prospectivo. Rotemos esta imagen en eje x. Simplemente gira ligeramente esta imagen como 33 grados o algo, o tal vez más. Vamos hasta 50 grados. No se puede ver esa imagen, pero verás que esta imagen no está girada. Es como apretar porque los bordes quedan parecen solo que la imagen se ve como una imagen de squeeze. Ahora viene la verdadera magia cuando voy a cambiar lo prospectivo. Vamos a cambiarlo un poco. Ahí vamos. Ahora se puede ver que la imagen está realmente rotada. Esto nos permite traer lo prospectivo en esta imagen particular. Ahora si cambio la rotación, podemos ver que la imagen está girando. Así funciona la opción. Ahora se puede ver esta imagen está al frente. Por eso el texto no es visible. Entonces tomemos esa imagen. Año en que el texto sea debidamente visible. Podemos rotarlo más. Podemos cambiar la opción prospectiva también. De igual forma, podemos rotarlo en eje y, de igual manera, podemos rotarlo en eje z y puedo ver la rotación en eje z. Ahora se puede ver la rotación en eje y. Se puede ver la rotación en eje x. Voy a restablecer esto. Todas las opciones excepto eje x. Que sea en esta posición particular, y lo prospectivo estará en algún lugar como este. Ahora parece manera que podemos hacerlo con escala. Podemos escalarlo en eje x, eje y y eje z. Nuevamente, la escala en el eje zed no es visible. Lo mismo. Podemos apretar, apretar x, apretar en y, y ahí vamos. Volveré a hacer esta opción por defecto. Ahora se trata de una opción llamada transform origin. Esto está directamente relacionado con todas las opciones. En origen transformado. Tenemos arriba, abajo, izquierda, derecha, y centro. ¿ Qué significa exactamente? Lo primero que te mostraré en rotar si selecciono y estoy girando esto. Entonces esta imagen está girando desde el centro. Este es el punto central y está girando desde ahí. Ahora, si lo llevo a arriba, ahora si giro, entenderás que la parte superior de la imagen es fija y está girando desde arriba. Este es el uso del origen transformado. De igual forma, si hago fondo, por lo que la rotación comenzará desde abajo. El fondo es fijo y la rotación es desde abajo. De igual manera, la izquierda, la derecha y el centro trabaja en la escena. Así es como la opción transformada del trabajo, y podemos hacerlo cualquier cosa desde ella. Eso es todo por este video, se hace la opción de transformación. Y en el siguiente video veremos sobre los filtros. 13. Filtros: En este video vamos a ver filtros. Filtros es la última opción en la epidermis. La primera opción es la opacidad. Entonces vamos a ver la opacidad por nosotros. Entonces, lo que voy a hacer, seleccionaré el formulario, toda la forma por aquí. Una vez que seleccione el formulario y cualesquiera cambios que haga, será aplicable a todos los componentes o a todos los elementos que se encuentren dentro de este formulario. ¿ Qué hay todas las cosas dentro de la forma? Si colapso esto, se puede ver este texto. Contáctenos texto, este texto de entrada, luego esta entrada de correo electrónico, luego área de texto y los botones están todos dentro de este formulario. Cualesquiera que sean los cambios que voy a hacer a esta forma, los componentes son los elementos que están dentro del formulario también se verán afectados. Opacidad. Si baja la opacidad, se puede ver que la opacidad está cambiando. Sí. Ok. Hecho, ya está hecho. Opacidad, sí, Está hecho. Ahora. La segunda opción es borrosa. Ahora si cambias o si aumentas el desenfoque ahora puedes ver que es Bird. Sí, eso es todo. Excavando de nuevo a 0 o tal vez haga clic en reiniciar todo. Ahora brillo. Sí, puedes cambiar el brillo de la misma o puedes aumentar o disminuir el brillo. Sí, eso es todo. El brillo también se hace. Entonces contrastes, contraste. Se puede cambiar el contraste de ese componente en particular. Entonces tienes Grayscale. Escala de grises te mostraré en una imagen. Selecciona esta imagen. Como se puede ver, esta es una imagen colorida. ¿ Qué imagen es más colorida que eso? Ok, esta imagen como nosotros tenemos azul y algunos colores están muertos. Entonces seleccionaré esta imagen y aumentaré el valor de escala de grises. Y se puede ver que la imagen empezará a volverse como una imagen en blanco y negro. De acuerdo, entonces esta es la opción del gris. Me vas a pedir sólo para cambiar el color de una imagen en particular. Tenemos esta opción. Entonces sí, tenemos esta opción, pero VK y usarla de una manera diferente, en un nivel diferente. Muy pronto llegarás a saber cómo exactamente vamos a usar esto. Esta es una escala de grises y luego podemos aumentar la UE, también los humanos, como les dije, el color, las mezclas blancas. Se pueden ver las longitudes de onda de los alelos cambiando, el tono del color cambia. Entonces invertimos, podemos cambiar. Podemos invertir el color. Ahora no es un negativo, no como las cámaras más antiguas tienen ese negativo, ¿verdad? Ese es el estado de esta imagen. Ahora, si tomamos la opción hacia adentro 200 por ciento, entonces la opción que la imagen resulta en esta forma particular. Entonces tenemos saturación. Podemos cambiar el nivel de saturación de la imagen. Ahora la última opción es la RCP. Cpr es un modo de color que da un poco como tipo de color cálido, no exactamente de color cálido, sino en una especie de tipo de color de la vieja escuela. Y te mostraré cómo es exactamente. Simplemente aumente esto. Y se puede ver que el color se cambia. Puedo mostrarte en esta imagen también aumentar la sepia. Ahí vamos. Entonces los colores son fijos y los esquemas de color en realidad la paleta de colores para el color sepia es fija. Y cambió el esquema de color completo a este esquema de pilar CPM. Así es como funcionan los filtros y podemos jugar a su alrededor. Podemos hacer cualquier cosa con él. También podemos utilizar con diferentes opciones, diferente permanente es la permutación y combinaciones. Y por último, saldremos a una salida particular donde a ti y mí nos gustó cuando estamos dispuestos a hacer eso muy pronto en los videos posteriores, partir de ahora, terminaré este video por aquí. Se realizan las opciones de filtros y se realizan todas las opciones en los paneles de apariencia. Hemos cubierto todas las opciones en el panel de apariencia. En resumen, el panel de apariencia está completamente hecho. Ahora en la siguiente sección, comenzaremos a entender las opciones y cómo funcionan exactamente las opciones. La única diferencia entre la evidencia y las opciones IIS, parece que los restos de Appian no importa qué componente esté seleccionando. Pero en las opciones, las opciones dentro del panel de opciones, las opciones dentro del panel de opciones cambian en función de los componentes. No del todo. Pocas opciones quedan parecen, pero en base a qué componente estás seleccionando, pocas de las opciones vienen y pocas de las opciones objetivos. Entonces, dependiendo del componente o elemento que estén seleccionando opciones dentro del panel de opciones cambia. Vamos a ver eso en la siguiente sección. Entonces nos vemos en la siguiente sección. 14. Convertir BS4 a BS5: De acuerdo, entonces antes de avanzar lo que vamos a hacer ahora este proyecto está actualmente en Bootstrap 4.6.2. En Bootstrap cinco, hay pocas opciones adicionales ¿existen? Lo que vamos a hacer, vamos a convertir este proyecto de Bootstrap 4.6.2 a bootstrap cinco. Este es el nombre del proyecto que puedes ver aquí. Y al final se puede ver una marca de estrella. Esta marca de estrella indica que el proyecto aún no está guardado. De acuerdo, hasta ahora que lo que vamos a hacer primero, vamos a salvar el proyecto. Ahora la marca estrella se ha ido, y ahora tenemos que convertir el proyecto. Por lo que es muy fácil. No tienes que hacer nada. Bootstrap Studio hará todas las cosas por ti. No tienes que hacer ningún tipo de trabajos sucios. Veamos cómo exactamente vamos a convertir el proyecto de Bootstrap 4.6 a bootstrap F5. Haga clic en Archivo, y luego simplemente haga clic en Convertir a bootstrap cinco. Eso es todo. Una vez que haga clic en eso, obtendrá una ventana emergente indicando que esta herramienta creará nuevo diseño BS, copiará todo de nuevo, y recreará su página con Bootstrap cinco componentes, todo está bien. No vamos a convertir este proyecto en particular a bootstrap cinco proyecto en lugar de eso, qué bootstraps hoy vamos hacer bootstrap Studio va a crear un nuevo proyecto completo con todo esto información dentro del nuevo proyecto. Y ese proyecto en particular se convertirá en Bootstrap cinco. Por lo que este proyecto seguirá siendo el mismo que es. Eso no es Bootstrap 4.6 y un nuevo proyecto se va a convertir, en lugar de, en lugar de convertir el mismo proyecto, acuerdo, así que lo que voy a hacer, sólo voy a hacer clic en convertir esa señal aquí se puede ver esta es nuestra viejo proyecto que se está iniciando, y este es nuestro nuevo proyecto que se está iniciando entre paréntesis, bootstrap F5. De nuevo, tienes una marca estrella por aquí. Significa que tienes que salvar el proyecto. Habrá algún genio leve como hemos perdido el color de esta zona en particular por aquí, y hemos perdido la decoración y todas esas cosas. ¿ Por qué? Porque esa opción en particular ahora se actualizó en esta versión en particular. De acuerdo, entonces ahora lo que vamos a hacer, vamos a salvar este proyecto y vamos a empezar a trabajar en el nuevo proyecto que es Bootstrap cinco. Simplemente haga clic en Guardar. Ahora voy a cerrar esta versión antigua. Y después de esto, estaremos iniciando todas las cosas en el proyecto Bootstrap cinco. Desde la siguiente sección, estaremos aprendiendo todo sobre el saldo de opciones. Entonces nos vemos en la siguiente sección, en el siguiente video. 15. Opción de texto: Supongo, uh, desde esta sección o de este video, estaremos aprendiendo todo sobre el panel de opciones. Empecemos sin perder más tiempo. Directamente, seleccionaré esta sección. Saltaremos al panel Opciones y veremos cómo exactamente el panel de opciones da la opción según los componentes. Por lo que hará clic en el panel Opciones. Esta es la primera opción que está ahí, esa es la opción de texto. Entonces tenemos información sobre herramientas de decoración que respuesta para mostrarla y flexbox y accesibilidad. En esto, el flexbox es muy importante y es muy útil. Estaremos usando esta opción Flexbox la mayor parte del tiempo. Empecemos con la primera opción que es opción de texto. En su opción de texto tenemos múltiples opciones. Hay alineación, color, transformación, espaciado mono, no rap y todas las cosas cercanas. Notarás que en la opción de color que no tiene herramienta selgadora de color. En lugar de eso, tenemos algún color predefinido dado por Bootstrap studio. Estaremos utilizando color predefinido por Bootstrap studio en el panel Opciones. Y si queremos un color específico en ese momento, tenemos que ir al panel de apariencia. Empecemos con la alineación. En alineación, tengo estas opciones que es empezar entonces esto es central, y este es el nombre de la alineación se cambia en esta versión en particular, bootstrap cinco versión. Y el inicio significa que es un alineamiento izquierdo, el centro es obviamente una línea central y el final es la alineación correcta. Ahora, si hago clic en este ícono en particular por ahí, es el icono de flecha. Si hago clic en eso, entonces obtendré algunos tamaños de pantalla. Con los años hay SM, MMD, LG, Excel, doble Excel. Exactamente. Esto lo hemos visto, lo hemos visto antes. Se trata de doble XL, es decir extra, extra grande. Entonces este es Excel que es extra grande. Esto es LG, esto es Md, esto es pequeño y extra pequeño. Extra pequeño no está ahí. O lo que sea que estemos haciendo en pequeño SM, será considerado como el comando extra pequeño, extra pequeño también. Entonces, ¿por qué exactamente estas opciones están ahí? Te diremos qué es exactamente. Esta opción de alineación está ahí y se pueden ver tres opciones por aquí. Esto es como un comando universal. Mira el comando universal en el sentido, si haces algún cambio en esta opción particular que está frente a la alineación, frente a la clave de alineación, tenemos este valor. Estos son el valor universal. Pero si haces algún cambio en los tamaños de pantalla, cuando el usuario navegará por el sitio web en el tamaño específico de la pantalla, ellos estarán obteniendo. Esta particular alineación solamente. Déjame mostrarte cómo es exactamente, vale, Así que antes de eso, hemos perdido el color de este rubro y de este párrafo. Vamos a avanzar hacia el color. De qué es exactamente el color. Como te dije, tenemos unos colores predefinidos que, que Bootstrap studio nos está dando. Sea cual sea el color por el que vaya aplicado a la sección. Todos los textos que se encuentra dentro de la sección obtendrán el mismo color. Ok, no individualmente, todo ahora tenemos este rubro y este párrafo. Son textos, ¿verdad? Excepto estos botones. Sea cual sea el texto dentro del botón, no se verá afectado porque tiene un comando especial para eso. Este rubro está muerto, y entonces este párrafo está ahí. De acuerdo, entonces estoy seleccionando esta sección que es un patrón a todos los componentes que se encuentra dentro de la sección. Y cambiaré el color. Vamos a cambiarlo a advertencia. Advertencia es de color amarillo. Vamos a cumplir con el calentamiento. Eso es todo. Ahora tienes un color amarillo al texto. Es útil cuando se quiere cambiar el color de toda la sección o lo que sea, todo el componente, sea cual sea el texto que esté ahí dentro de la sección o componente, se puede cambiar todo el texto en solo un clic. Ahora, vamos a volver a la alineación. Porque ahora hay podemos ver el texto. Tú seleccionas este texto de encabezado y luego tengo una opción diferente o tú, en esa alineación, puedes ver que no hay nada seleccionado. Pero aún así el texto no es formato Centro, la alineación central, incluso el párrafo no es alineación central. Por qué exactamente esta facilidad sin seleccionar ninguna opción, por qué exactamente este rubro y este párrafo, no centró la alineación. Es muy sencillo y tal vez lo tienes también. El motivo detrás de eso es componente o elemento de encabezado individual tiene una alineación de centro. Veamos que si hago clic en el encabezado. Ahora se puede ver en la alineación, la alineación universal se establece en el centro. ¿ De acuerdo? Esa es la razón por la que si seleccionamos esta sección, eso no es nada se selecciona, pero aún así lo es y centro porque el componente individual se selecciona como alineación de centro, tal vez este puede confundirte, pero mantener el ritmo. A medida que avanzamos, comprenderán qué es exactamente. Por lo que en cuanto seleccioné el encabezado, elemento de encabezado, puede ver cuando aparece opción adicional por aquí que es opción de encabezado. Tipo de encabezado es tal vez que hayas escuchado, si lo tienes, si conoces HTML, entonces has oído hablar etiquetas de encabezado como encabezados comienza desde H1, H2, H3, H4, H5 y H6. H1, H6 son los encabezamientos. Ese es sólo el número de aquí. Ahora qué número está seleccionado que está a se selecciona. Significa que esto es un rumbo a la rúbrica 123456. Estos son los encabezamientos que son uno a seis NADH. Otra pantalla, la pantalla es como pantallas de uno a cinco. Están ahí. En realidad, deberían ser seis. Esto va a tirar de esto. Sí, está bien. Entonces seis está muerto. Entonces si hace clic en uno, se puede ver que el tamaño del texto se incrementa. Eso es la exhibición uno. Muestra seis que tenemos. Y si cierras, esto es predeterminado. Esta es la opción que viene frente a usted cuando seleccionamos la etiqueta de encabezado. Ahora si seleccionamos la etiqueta de párrafo que en lugar de la H1, H2, H3, obtendrá la opción de párrafo. Una opción estará ahí dentro de la opción de párrafo que sea lead. Si hace clic en esto, verá que el tamaño se incrementa, pero el extranjero también es cambio. Ahora mira qué está pasando exactamente. Estás en el Editor de Texto. Se puede ver este párrafo, hay etiqueta de párrafo, es que dentro de la etiqueta tenemos clase y clase es lead. Texto centrado. Centro de texto no es más que esta opción que es alineación. Entonces estilo y lo que sea, entonces tenemos algo por aquí y tenemos este texto a lo que esté escrito dentro de eso. Y luego la etiqueta de cierre del párrafo. Lote de código ya se ha escrito. Entonces vamos a ver esto en el medio. Simplemente derrumbe esto. Ahora veamos la opción de alineación. Si selecciono este encabezado y se puede ver la alineación, la unión o alineación celular es central. Ahora lo que voy a hacer, le diré a Bootstrap studio, eso es cada vez que el tamaño de la pantalla es MD y sobre el mar, era así. Sólo si cambias algo por aquí, la cadena consigue será aplicable a todos los tamaños de pantalla anteriores. Pero el tamaño de pantalla inferior seguirá siendo el mismo. Significa lo que cambies al tamaño de la pantalla MD, si cambio la alineación para iniciar en MD, Todo lo anterior, eso es LG Excelente doble eje obtendrá la alineación de inicio solamente. Veamos cómo es exactamente de MD, solo voy a hacer click en Inicio, donde exactamente estamos ahora estamos en Excel. Por lo que definitivamente una vez que haga clic en esto, los cambios serán visibles en este tamaño de pantalla en particular. Además, basta con hacer clic en Inicio, y eso es todo. Está en la posición de inicio. Pero en SM, las PYMES debería estar en el centro. Sm significa pequeño y por encima de lo que es pequeño? Pequeño es tu más pequeño que un niño ¿qué? De inmediato el MD. Entonces el, sólo en el tamaño de pantalla pequeña, la alineación será central. Veamos. Si hago click en pequeño, se puede ver que la alineación es central. Y en cuanto haga clic en MD, la alineación es al inicio. Vamos a decirle a Bootstrap studio que siempre que esté en LGN al respecto debe ser central. De nuevo, si vengo a LG, es incentivo. Y todo lo anterior. Será, de nuevo, será en el centro. Y digamos si el tamaño de la pantalla es excelente arriba, pero no hay nada por encima de Excel. El Excel es el último tamaño. Siempre que sea un XL, jim la alineación T2. Y ahora estamos adentro, y lo que hemos hecho es sólo por Excel, no hemos dado nada. Entonces lo que va a tomar, se tomará de LG LGN sobre bien, nada es Bootstrap va a entender que tengo que tomar la alineación de LG solamente, Así LG y arriba. Y luego Excel nuevamente, tiene un valor diferente. Por lo que se mostrará eso. Veamos cómo se ve exactamente en el código. Simplemente sacando el editor de texto y se puede ver la etiqueta H2 está aquí. Centro de texto. Esa es la opción universal está ahí. Se está mostrando centro de texto y texto SM, Pymes pequeñas, lo que es pequeño, más pequeño contra centro. Por lo que está afirmando que el texto pequeño está centrado. Entonces el medio de texto es inicio. Entonces esto es Md fijo, MD es inicio, sí. Entonces texto LG centro. Lg es el centro. Entonces directamente tenemos doble XL. Entonces texto Excel, este es texto externo es, y así es como Bootstrap pseudo escribe el código para ti. Digamos que si elimino este Excel, puedes ver por aquí, mantén tu ojo por aquí. Este es el texto Excel, y acabaré de eliminar eso. Y de inmediato eliminará el código por ti. El estudio bootstrap está escribiendo el código para usted. Sólo hay que hacer clic aquí y allá, arrastrar y soltar y todas esas cosas que vuelven caer y todo lo que hay cosas dentro, esto se derrumba de nuevo. Así es como esa opción funciona de alineación. Y después de eso, volvemos a tener color, es el mismo conjunto de colores o sus colores predefinidos están ahí. Puede seleccionar cualquier color a partir de eso. Ahora la transformación es su transformación es minúscula, mayúscula, y capitalización. Si hago clic en minúsculas, todos los caracteres estarán en minúsculas. Si hago clic en mayúsculas, todos los personajes serán mayúscula. Y si hago clic en mayúscula, la primera letra de la palabra será mayúscula. la misma manera le pasará al párrafo. Si vengo a la transformación y si hago clic en mayúscula, la primera letra de cada palabra se convertirá en capital. Así es como exactamente esto que elespaciado mono no es nadamás espaciado mono no es nada que si enciendes el espaciado mono, se verá así, como espaciado mono tipo de fuente de la vieja escuela. Sólo lo apago. Encenderé esta opción no wrap ni app significa que no importa cuál sea el área del párrafo, vendrá en una línea recta. Pero lo que sucede es que se puede ver la frontera azul, contorno azul está ahí establece que el párrafo, este párrafo en particular tienen esta área en particular. Pero como no se enciende ninguna opción de envoltura, está mostrando que está cruzando el límite en realidad sí cruza la frontera. Entonces lo que podemos hacer es como, si no quieres que esta opción extra particular salga de la frontera, eso significa que no debe cruzar el límite. Lo que podemos hacer es activar esta opción una. En cuanto activemos esta opción, vendrá así. Tres puntos. Significa que algo es más en esta área en particular. No necesitarías seleccionar la sección por aquí. Verás todas estas opciones por aquí. Las mismas opciones están ahí. Pero ahora si cambias algo por aquí, será aplicable a la sección no a los textos individuales específicos. Para aplicar los cambios al área de texto individual o al elemento de texto, hay que seleccionar el texto y limitar y luego puede cambiarlo. Y digamos que tengo, estoy seleccionando este párrafo ahora y quiero cambiar el color. Si cambio el color a, digamos peligro, puedes cambiarlo. Ahora ha cambiado. Por lo que esta es mantener la opción de texto. Caminar. Después de eso estaremos buscando la opción de decoración en el siguiente video. Y podrían opción de acción es muy similar a todos los componentes. No da algunas opciones adicionales en el medio. Si seleccionamos el párrafo, la opción de párrafo está aquí. Si selecciono el encabezado, la opción de encabezado está aquí. Entonces este tipo de situación no entra. La decoración. La opción de decoración se ajusta ajustada. No hay tales cambios en la opción de liquidación. En el siguiente video, veremos las decoraciones. 16. Decoraciones: Empecemos con decoraciones. En la decoración v tienen cuatro opciones que su borde, borde, color, sombra, y fondo. Lo primero, frontera. pocas fronteras definidas por aquí. Estas no son las fronteras que son como en el panel de apariencia. Estas fronteras son diferentes, que las fronteras son diferentes. En esa frontera tienes un control específico, pero esto es algo fijo. Lo primero está bordeado por defecto. No es ninguno. Esa es la zona cruzada seleccionada, es decir por defecto. No hay frontera está seleccionada. Muéstrale uno por uno. Por lo que en primer lugar, haremos clic en esa frontera irregular. Si hago click en frontera regular, ahora se puede ver el borde está ahí, puede ver el borde blanco. ¿ Hay frontera blanca? ¿ Por qué la frontera blanca? Porque la acuarela es predeterminada. Siempre que esté en esto bajo el panel Opciones, si selecciona el borde como cualquiera, Seleccionar, seleccione cualquier borde. Y el color es predeterminado. Significa que es de color blanco. Ahora voy a hacer click en Color y contra algún conjunto de colores predefinido está ahí. Si hago clic en peligro, si acabo de seleccionar ese rubro en particular, se puede ver que el borde es ahora seleccionar esa frontera una vez más. Y ahora lo que voy a hacer, seleccionaré esta área particular que está redondeada. Significa que las edades serán redondeadas. Ahora se puede ver que los bordes están redondeados. Después de eso, la otra opción es rodear el borde incluso forma circular. Se llena la siguiente opción. Si hago click en la opción de píldora, ya se puede ver el borde se ve bien, bastante bueno. Pero sólo las esquinas están en forma de píldora y la forma de píldora. Ahora volveré a seleccionar este rumbo de nuevo. Y ahora veamos la opción de sombra. Si llego a la sombra, podemos ver pequeños, regulares, grandes. Y si hago clic en Regular, se puede ver una sombra está ahí. Ahora vamos a cambiar el color de fondo de la misma. Seleccionaré esta zona y volveré a la impedancia. Y acabaré de quitar el color de fondo de aquí y simplemente haga clic en Reset y para que esté blanco ahora para que podamos ver la sombra y todas esas cosas. Si he quitado la sombra, seleccionaré este rubro. Si elimino la sombra, hagámosla por defecto. Se puede ver la sombra no es eso. Estás específicamente cuando aplicamos la sombra por aquí. La sombra viene sólo en la parte inferior. No vendrá en el ángulo que usted quiere. Si quieres esa sombra en particular, tienes que ir a la Apariencia. Si enciendo la sombra como la sombra regular, sólo para mantener los ojos en la sección inferior de este rubro. Si acabo de hacer clic en el regular, se puede ver ahora la sombra está ahí. Es así como funciona la sombra en la declaración bajo el panel Opciones. Y tengo una gran sombra también, si hago clic en grande, el área de la sombra aumentará. Ahora tengo antecedentes también. Si hago click, si vengo aquí y si hago clic en fondo, por lo que si digamos hago clic en advertencia y se puede ver el fondo se está calentando, pero no podemos ver ese texto. El motivo detrás de eso es el texto también advierte. Veamos algún otro color. Veamos a la primaria. Ahora se puede ver que la primaria está ahí, se lee el borde, el fondo es primario y el texto se está calentando. Vamos a cambiar esto. Hagámoslo advirtiendo a la frontera. El color del borde será de advertencia. Las sombras regulares, y el fondo volverá a estar alerta. Por lo que el mismo color estará ahí. En la opción de color del texto cambiará el color de advertencia a tal vez luz. Ahora se ve bien, bastante bien. Entonces así es como funciona la decoración del texto. Ahora tienes la opción de gradiente también más de un año. Tan pronto como le des cualquier color al fondo, obtendrás esta opción de degradado justo debajo de ella. Qué gradiente exactamente es mayor en su pierna no se puede seleccionar ningún color que desee. ¿ Qué pasará? ¿ Qué es esta advertencia? El color que has seleccionado de advertencia, el degradado vendrá en forma lineal y será como un color claro en la parte superior y el color oscuro en la parte inferior, se verá así. Por lo que sólo voy a encender este gradiente y se puede ver un ligero color claro está ahí en la parte superior. Y el color oscuro es que el color de advertencia original está alrededor de eso. Ok. Por lo que te mostraré en algún color diferente. A lo mejor no es visible en este color. Así que vamos a seleccionar el oscuro. Ahora se puede ver que hay un color claro ¿está ahí? Simplemente apagaré esto. Se puede ver la diferencia, gradiente, gradiente de, gradiente. Degradado de esto es cómo funciona exactamente la subasta de declaración. Tienes algunas fronteras ya hechas a lo largo de un año. Entonces tienes un color de borde. Tienes ahí la opción de sombra, entonces tienes un fondo. Puedes cambiar el color de fondo que es color de fondo predefinido, y luego puedes activar el degradado también. Eso es todo en este video, se hacen las opciones de decoraciones. Y para cualquier componente en la opción de decoración seguirá siendo igual, no cambiará. En el siguiente video, veremos información sobre herramientas. Entonces nos vemos en el siguiente video. 17. Información de herramientas: En este video, vamos a conocer información sobre herramientas. Así que vamos a hacer clic en este consejo de herramienta por aquí para expandir esa opción. Así que vamos a hacer clic en la información sobre herramientas. Y dentro de tooltip, encontrarás una opción que no es posible Tooltip. Pero cuando habilites la punta de la herramienta, obtendrás algunas opciones más. ¿ Qué es exactamente la información sobre herramientas? Digamos que en la vista previa, si el usuario coloca el puntero del ratón sobre el área específica, vendrá información adicional para esa herramienta en particular que se llama tooltip. Lo que sea que le dije que no es definición de tooltip en general, te lo dije. De acuerdo, Así que sólo voy a encender esta opción de información sobre herramientas y ahora hay otras dos opciones. Uno es la colocación, donde estará exactamente la colocación de la información sobre herramientas y el título. Cuál debería ser el título para el título de la información sobre herramientas en el sentido de qué información vendrá dentro de la colocación de la información sobre herramientas Voy a mantener arriba. Y para este título particular de información sobre herramientas, vamos a escribir esta facilidad. Elemento de encabezado, VSS de cinco entre paréntesis. Beta. Simplemente haga clic en ingresar cualquier interés, encontrar lo que sucederá en vista previa. El tooltip saldrá, pero tú también lo eres, va a estalar, pero saldrá en la zona baja en algún lugar aquí o simplemente me van a llevar mi más puntiagudo y lo sostendré por aquí. Entonces está ahí. Muestra que esto es entonces rumbo elemento de los hechizos o mal. Corregiremos la ortografía. Se trata de un elemento de encabezado, e LEM, NP, elemento de encabezado. De acuerdo, entonces, ¿cómo están de vuelta otra vez? Entonces este es un elemento de encabezado en BSS y BS phi Beta. Bss es Bootstrap studio y BS five 0s versión Bootstrap. Por lo que creo que esto es un encabezamientos son y deben estar no ahí. Es gramaticalmente incorrecto. Por lo que este ys o rumbo eliminado. Así es como funciona la información sobre herramientas. Ahora podemos cambiar la colocación también las colocaciones son como arriba, abajo, izquierda, y derecha. Puede cambiar la ubicación de la información sobre herramientas. Veamos la vista previa. Y en esa vista previa entenderás cómo funciona exactamente. Para obtener la vista previa de la página web. El botón Preview más fácil y una flecha estará ahí, basta con hacer clic en esa flecha. La segunda opción es declarar como deshabilitada, por lo que tenemos que habilitar esa opción. Por lo que sólo da click en este gatillo por aquí, y ahora se puede ver la vista previa entre paréntesis en la que está encendido. Si hace clic en, se muestra sólo vista previa. Basta con hacer clic en Vista previa. Ahora está encendido, y ahora voy a hacer click en este botón. Por lo que tu navegador web predeterminado se iniciará y me mostrará la vista previa. Así es como exactamente va a buscar nuestro sitio web. Supongo que solo tomaré mi puntero del ratón sobre esta área. Y ahora se puede ver la información sobre herramientas es que este es un elemento de encabezado en BSS off BSS five beta. Cambiemos la colocación. Si gané la colocación a fondo. Y de nuevo, si voy allí en el navegador sin refrescarlo , ya está renovado. Voy a llevar mi puntero del mouse por aquí y se puede ver la información sobre herramientas es que no hay longitud específica a la información sobre herramientas. Puedes escribir cualquier cosa en la punta de la herramienta. No existe un límite de carácter específico a eso. Tenemos la colocación de y porque como digamos si estoy flotando mi puntero del ratón sobre esto ahora la colocación es inferior. Y solo porque la colocación es de fondo, no se puede ver el párrafo. Alguna área del párrafo está oculta saber, digamos en la parte superior también tenemos algo mejor. Lo que podemos hacer es como podemos, podemos seleccionar la colocación a izquierda o derecha. Así que vamos a seleccionar la colocación correcta. Y ahora si vuelvo al navegador una vez más, y si pongo el puntero del mouse sobre eso ahora se puede ver la colocación está a la derecha. Ahora, esto es lo que es tooltip y puedes crear cualquier cosa para darnos información específica. La mayoría de las veces, se usan tips sobre herramientas en el área donde está ahí el signo de interrogación, no sabes qué es exactamente. Por lo que acaba de tomar su mayor punto en el signo de interrogación e inmediatamente cuando sale información adicional de ahí, eso es lo que es la información sobre herramientas. Por lo que vamos a terminar este video por aquí. Por lo que también se cubre la opción tooltip. Para entender flexbox, tenemos que saber mucho más sobre bootstrap row, column. Muchas cosas que tenemos que saber cuando completemos esa sección en particular, cuándo podremos crear un diseño completo. Después de eso, veremos qué exactamente el flexbox 0s, dos cosas vamos a cuidar de pocos videos, eso es respuesta a display y Flexbox. Estas dos opciones veremos más adelante en algún otro apartado. En el siguiente video, veremos la opción llamada Accesibilidad. Nos vemos en el siguiente video. 18. Accesibilidad: Era una semilla LED, la opción de accesibilidad. Esa es la última opción en el panel Opciones. Daré clic en Accesibilidad. Y aquí se puede ver visibilidad. Y tienes dos opciones que es visible e invisible. Y la última opción es la raza de pantalla solamente. Entonces tienes que encender esto en cómo funciona exactamente, te lo diré. Así que vamos a seleccionar este texto en particular por aquí. Después del proyecto tenemos este texto e indivisibilidad. Si hago clic en visible, será visible. Obviamente. Si hago clic en invisible que el libro de texto será invisible. Pero no está oculto. El componente, el elemento no está oculto. La visibilidad es invisible. Entonces significa que el texto está ahí, pero es invisible. La segunda opción se grita de sólo lectura. Al encender la opción de lectura de pantalla se puede ver que el párrafo ahora está oculto. El párrafo ahora está oculto, pero sigue ahí. Ahora está en evento de subasta de sangrar grito. Si enciende la visibilidad a visible, no será visible porque no se grita de solo lectura. ¿ Cuál es el medio solo por plomo proyectado? Hay algunos sitios web que están diseñados para personas ciegas, pero pueden escuchar. Hay tantos sitios web hoy en día, hay navegadores también están de tal manera que tienen una opción específica llamada pantalla de lectura. El texto al que está muerto, que tiene la opción de pantalla de sólo lectura. El navegador leerá ese texto en particular sólo en el sitio web de noticias se puede ver que se trata de un archivo de audio orientado. Simplemente puedes hacer click en pantalla, leerla, empezar a leer el texto. No significa que sea parte criado todo el texto de la página web. Se lee sólo las brujas de texto en la etiqueta llamada screen read. La opción de lectura de pantalla es para que convierta el contenido textual en la forma de audio con la ayuda del soporte del navegador, que se llama opción de lectura gritada. Y esta es la visibilidad, pero esto es lo que las opciones de accesibilidad IIS. Y estamos cerrando la sección por aquí y terminamos con las opciones. En el siguiente video, veremos la tercera y última opción en el panel de evidencia que es la animación. Entonces empecemos a aprender esa emisión desde la siguiente sección. 19. Animación Scroll: Oh bien. Desde esta sección vamos a iniciar nuestro panel de animación. Entonces este es el lugar donde estaremos animando nuestros elementos, componentes. Para eso, lo que hice es que he creado un pequeño proyecto para eso. Tienes que acudir a tus archivos BSS. Y en eso encontrarás una tercera carpeta que se llama animación. Dentro de la animación, se encuentra este ser como archivo de diseño que también se llama como animación. Tienes que abrir este archivo. Una vez que abras ese archivo, obtendrás este diseño en el panel de animación en este momento se está mostrando no hay componentes seleccionados porque no he seleccionado ningún componente sobre u Así que seleccionemos el primer componente. Este es el panel de visión general. Y en el panel de visión general se puede ver hay un contenedor. Este es un componente y tenemos dos elementos en dicho que eso es elemento de encabezamiento y un elemento de párrafo. Entonces tenemos rho, esta es una clase, así que podemos llamarla como componente en este estudio bootstrap. Dentro de la fila tenemos múltiples columnas, tenemos columna, columna, columna. Se puede ver columnas están ahí. En cada columna tenemos tarjeta. Se puede ver de nuevo en cada columna tenemos carrito y tarjeta de visión. Tenemos esta imagen. Entonces tenemos uno más, un componente que es cuerpo cicatrizado luego rumbo, rumbo. Y dentro de este rubro tenemos enlace y párrafos. Entonces este es un nido completamente bien estructurado de un componente. Lo que tenemos que hacer por aquí es como vamos a animar todas las cartas en este diseño particular. Entonces primero seleccionaré esta tarjeta y empecemos a entender nuestra animación. Por lo que en cuanto seleccione esta tarjeta ahora se puede ver en panel de animación, se puede ver una opción está ahí que se activa. Y si hago clic en esto, se pueden ver tres opciones están ahí. Uno es scroll, uno está hover, y uno es Laura. ¿ Qué es cruel? Cruel significa desplazamiento. Este es el desplazamiento de la página. Esto es pergamino. Podemos animar nuestra página en el pergamino también. Cuando desplácese por la página, sean cuales sean los componentes o cualquier diseño que venga frente a usted, vendrá de manera animada. rigor es scroll, luego el tipo se llena. Ahora puedes ver tan pronto como selecciono alguna de estas opciones son simplemente scroll, desplaza, desplaza y carga. Se puede ver una marca de estrella por aquí. Significa que este componente en particular está limitado ahora, y luego tenemos tipos de animación. Si hago clic en eso, podemos ver desvanecerse, desvanecerse hacia arriba, abajo y todas esas cosas. Si hago click en feed, si quieres ver cómo se ve exactamente, basta con hacer click en Play, entonces podrás ver cómo va a venir exactamente en el navegador web. Se puede ver que aparece de inmediato. Si ves con cuidado, puedes ver que la duración es muy menor para controlar la duración, tenemos la opción de duración. Si hace click en esto, tenemos 50 MS es milisegundos. Se inicia desde los 50 y los múltiplos de 50, podemos subir hasta tres mil. Tres mil MSE es de tres segundos. Si hago click en 3 mil y si hago clic en play, y se puede ver que tarda tres segundos en venir frente a usted. Para que puedas hacer cualquier cambio. Selecciona 1 mil MS, significa 1 segundo. Y si hago click en Play, puedes ver en 1 segundo, el auto viene frente a ti. Estos son los efectos de scroll. Lo que vamos a hacer, bajaremos y aplicaremos la animación de scroll a esto para fotos a lo largo de años, hay cuatro fotos. El primero es esto, así que acabaré de abrir esta columna. Seleccionaré esta tarjeta. Vendré scroll y aumentaré la duración a 1 segundo. Parecen manera se lo daré a la segunda. Pero aquí lo que vamos a hacer, usaremos otro tipo si se desvanece. Entonces veamos acercar y duración de 1 segundo. Vamos a planear. Veamos cómo se ve exactamente. Oh, está bien. Entonces bajaré el tercero. Seleccionaré el pergamino. Vamos a dar otro como deslizarse hacia arriba. La duración será una vez más. Y Lee, así es como se verá ahí. El último, el último, este pergamino de cartas, vamos a ver. Cualquier otro efecto es que la diapositiva estaba ahí. Voltear a la derecha? Y solo juega. Necesitamos utilizar la duración a 1 segundo. Ahora, Lee, está bien, hemos dado cuatro tipos de animación diferentes a cuatro cartas diferentes. Ahora veamos la vista previa. Voy a hacer clic en el navegador. Y ahora si nos desplazamos, se puede ver cuando se trata en la visibilidad. Significa que este es el final del navegador. ¿ Estás desplázate hacia abajo y voy a refrescar esto para que la página se vuelva a cargar para que la animación se pueda reproducir una vez más. Y si me desplazo ahora, se puede ver que no hay nada pero en cuanto me desplaza un poco más, la animación está ahí y ahora la puedes ver correctamente. Hagámoslo una vez más. Puedo ver. Ahora no se ve bien porque hemos dado las cuatro cartas son diferentes animación, pero se verá bien si le damos el tipo de animación individual a todas las tarjetas. Demos el tipo de animación individual como volteado derecho a todos. Vamos a cambiar el tipo de ella. ¿ Deslizarse derecho? Selecciona esto una vez más. Práctica de tirón. Si hago clic en Play, puedo ver, sí, todos están teniendo el mismo tipo. Ahora. Vamos a refrescarlo. Sí. Ahora desplácese hacia abajo, desplácese, desplácese hacia Ahora podemos ver de nuevo, nuevo, esto está sosteniendo un trabajo de animación de scroll. Ahora veamos las otras opciones en el pergamino. Tenemos la opción de molestos también, y tenemos la opción de retrasar también. Retraso significa que podemos hacer un retraso de la misma. Si juego ahora se puede ver el retraso está ahí. Por lo que de inmediato no se iniciará. Tomará 250 milisegundos y luego se iniciará. A partir de ahora lo haremos ninguno. Reproducir una vez significa cuando se carga la animación. E incluso después de eso, si el usuario se desplaza hacia arriba y hacia abajo, la animación se reproducirá solo por una vez. No volverá a jugar una y otra vez. Te mostraremos que puedes ver la animación. Ahora, me desplazé hacia arriba. Nuevamente, me estoy desplazando hacia abajo la animación está ahí otra vez contra desplazada hacia arriba, contra desplazarse hacia abajo de nuevo. Se puede ver la animación. Pero seleccionemos este primero, y haré clic en Play una vez. Volveré al navegador. Ahora jugó una vez, desplácese hacia arriba, desplácese hacia abajo. Se puede ver que esto sigue siendo igual, pero estas tres cartas tenían la animación. Nuevamente, te mostraré desplazarte hacia arriba, desplázate hacia abajo. Ahora se puede ver la animación estaba ahí, pero esto no estaba jugando porque le hemos dado el comando como juego. Una vez. Después de eso tenemos una opción más llamada run on mobile. Significa que incluso en la pantalla móvil, la animación debe estar ahí. Eso es todo, nada más. Estas son las opciones en scroll. Esta fue la animación de desplazamiento. En el siguiente video, veremos la animación hover. Te veré en el siguiente video. 20. Animación Hover: Veamos la animación hover ahora. Trabajaremos en esto para tarjeta. Esta es la primera tarjeta. Seleccionaré a este Cartier. Ahora selecciona este disparador de hover. Por lo que voy a hacer clic en el hover. Ahora, tenemos límites del primer mundo. Por lo que voy a hacer clic en los límites. Y si hago clic en play, este efecto vendrá cuando el usuario desplade sobre esa carta en particular. Tenemos flash también. Va a parpadear así, y luego tenemos pulso. Entonces vendrá así. Voy a apegarme al pulso, siéntete libre de echar un vistazo a las otras opciones también. Entonces volviendo al navegador, ahora si vengo aquí y si pongo el puntero, se puede ver cada vez que más puntero sea Howard, se puede ver esta animación. Lo único es que no puedes aplicar las tres animaciones a la vez. Para un solo componente, hay que ir con uno solo. Esto es pulso y seleccione de nuevo el cursor. Y si selecciono algo más, agitar, luego haga clic. Se puede ver la animación está ahí. Pero seleccionemos el pulso a los cuatro. El carrito acude al panel Animación, desplázate y vuelve al botón de vista previa. Ahora ya puedes ver, sí, ahí vamos. Esto fue hover y de nuevo, tienes esa opción correr en móvil. Significa que la animación también debe funcionar en el móvil. Eso es todo. No verás ninguna otra opción como retardo y duración y todo eso porque está arreglado, solo tienes estas opciones de menú en cómo un disparador. En el siguiente video veremos disparador de animación de carga, y ese será el último video de esta sección. Entonces nos vemos en el siguiente video. 21. Carga de Animación: De acuerdo, así que empecemos con nuestro Señor. Trabajemos en esta tarjeta que está en la parte superior. Así que simplemente haga clic en Restablecer todo Voy a quitar la animación de aquí. Seleccionaré la opción de carga. Señor significa cada vez que se carga la página, qué animación debe venir frente al usuario. Nuevamente, tenemos estas opciones que son las bombillas flash de rebote. Todas estas opciones están ahí. Seleccionemos cualquiera de la opción desde aquí. Seleccionemos los límites y pulsemos en Jugar. Y se puede ver que cuando se carga la página, esta animación se reproducirá automáticamente por una sola vez. Si quieres jugar en bucle, entonces tenemos la opción para eso también. Pero para el bucle, seleccionaremos este párrafo. Seleccionando el párrafo, seleccionando el disparador que se va a cargar. Entonces seleccionemos esta opción de flash. Si hago clic en Play, se puede ver la opción de flash está ahí. Si hago clic en bucle, entonces esta animación se reproducirá en bucle tan pronto como se cargue la página. Y la última opción se ejecuta en el móvil. Significa que esta animación debe ejecutarse en el móvil. Pero veamos el preestreno por aquí. La página está cargada y ahora se puede ver la animación se está reproduciendo en bucle continuamente. Entonces voy a refrescar esto y se puede ver, sí, se puede ver ese efecto particular estaba ahí. Todo esto está en el panel de animación. Estas muchas animaciones que puedes hacer por tus componentes, elementos, etiquetas, lo que sea. Siéntase libre de echar un vistazo a todas las opciones en el panel de animación. Y si tienes alguna pregunta, déjame una pregunta y trataré de responderte lo antes posible. Mayoría del tiempo, le respondo en 24 horas. Pero por alguna situación diferente, puede que me tome más tiempo, pero le responderá. Eso es seguro. A partir de ahora, hemos cubierto todos estos tres paneles y eso es paneles de apariencia, paneles opciones y panel de animaciones. Ahora, no tenemos nada que ver mucho más en los paneles. En la siguiente sección, comencemos con algunos de los tecnicismos de Bootstrap. Nos vemos en el siguiente video de la siguiente sección. Adiós. 22. Entendiendo la fila y la columna: Ahora comprendamos qué es el sistema de rejilla Bootstrap. El sistema de rejilla Bootstrap es el responsable de hacer de bootstrap un móvil. Primera respuesta, la OMS enmarcan un contenido de cuadrícula de dos componentes. Primero, fila de facilidad, y segundo es columna. Una fila se dividió en 12 grilla y cambia su tamaño automáticamente según el tamaño del dispositivo. Digamos que hemos tomado una fila y en eso tomamos dos columnas. Se dividirá automáticamente en dos partes, tomando seis rejillas cada una. Digamos que si no fuéramos dos columnas de dos tamaños diferentes, haciendo un total de 12 rejillas. El año es el año mágico. Podemos decirle a cada columna que cuántas cuadrículas puede tomar. Digamos que en primera columna, necesitamos un área grande en comparación con la otra. Por lo que podemos decirle a la primera columna que tome ocho rejillas. Entonces automáticamente la otra columna tomará las cuatro cuadrículas restantes, haciendo su total de 12 sistema de cuadrícula. Por si damos calificaciones Ed a la primera columna y seis cuadrículas a la segunda columna. Entonces la segunda columna vendrá por debajo de la primera columna porque ha superado el total de 12 cuadrículas. De esta manera podemos crear una estructura de columna de fila perfecta. Esto lo entenderás con más detalle cuando empecemos a diseñar sitio web en el software bootstrap Studio. 23. Vamos a empezar: En videos anteriores, has aprendido sobre la comprensión básica de Bootstrap studio. Y el mayor taladro de aquí es que has visto bootstrap studio versión 5.6. Por pocas razones, no pude grabar videos. Y ahora después de esto, estaremos aprendiendo en Bootstrap Studio 5.8. No demasiado preocupado porque no fuera tantos de cambios drásticos en el estudio Bootstrap. Los cambios son como la fijación de dólares menores está ahí a través de opciones adicionales, están ahí las que vamos a ver en los videos posteriores porque a partir de ahora estaremos trabajando en proyectos. Estaremos trabajando principalmente en tres proyectos. En primer lugar será un sitio web básico normal de una página. Segundo será, estaremos creando un sitio web donde usted como individuo pueda iniciar un negocio de diseño de sitios web. Te estaré enseñando cómo diseñar tu propia página web, cómo integrar pocas cosas externas como las carreras de boletos, online, chatear, correos electrónicos oficiales, hospedar el sitio web, y todo eso cosas. Por fin, te estaré enseñando cómo diseñar un sitio web del sistema LMS donde estaremos cubriendo ambas secciones, el usuario y el admin end una vez que hayas terminado con el usuario y el administrador. Y si quisieras crear un módulo más como instrumento, y te será fácil hacerlo por tu cuenta sin perder mucho tiempo. Empecemos. 24. Navbar del Proyecto Uno: Entonces para este punto del tiempo, has aprendido sobre los conceptos básicos del estudio Bootstrap. Y mientras estaba grabando este video, hubo una enorme brecha entre sí. Esta es la razón por la que nos hemos detenido en Virgin 5.6 y ahora el bootstrap está en la versión 5.8. Pero nada de qué preocuparse, no hay un cambio enorme en el software. Los cambios son, han corregido, algunos errores menores, han mejorado el rendimiento del estudio Bootstrap, y además han cambiado un poco de look and feel y todas esas cosas. Te mostraré que primero y después procederemos más allá. Y pocas cosas que tienen cambios como han agregado una biblioteca de iconos Bootstrap. Y ahora la versión Bootstrap que el framework Bootstrap es ahora 5.1. También se ha actualizado el marco Bootstrap. Sin perder mucho tiempo. Empecemos directamente y veamos qué vamos a diseñar en este video ya que hemos empezado a diseñar la página web desde esta sección, dos proyectos estarán ahí. Uno es un diseño de sitio web simple de una sola página. El segundo proyecto que vamos a iniciar es un sistema LMS en el que veremos tanto al administrador final como al final del usuario. Este video tutorial. Como ya sabéis, queremos crear un nuevo diseño. Entonces lo que vamos a hacer, simplemente vamos a clic en nuevo diseño por aquí, y después nombraremos este diseño en particular. Nombraré esto como tu nombre. Ahora la versión bootstrap studio por defecto la selección es la versión 5.1, y estamos de acuerdo con esa versión también. Por defecto, el temporal en blanco seleccionado, y eso es lo que queremos. Simplemente haremos click en Crear ahora, diseño. Tenemos nuestra página web en blanco frente a nosotros. Antes de eso, te mostraré qué exactamente vamos a diseñar y qué recursos vamos a utilizar. Lo que tienes que hacer es que puedas ir a la carpeta principal de tu curso BSS. Dentro de eso encontrarás archivos BSS y luego encontrarás cuarto número de carpeta que es hash para subrayado reanudar una En eso estarás encontrando este BSS reanudar un diseño. Ya diseñé que sólo para mi referencia, estaré buscando ese diseño y lo volveré a crear. Y los recursos que vamos a utilizar facilidad en la carpeta de recursos. Entonces estas son las imágenes que vamos a utilizar allí. Simplemente, tomaré esto por aquí y seleccionaré todo arrastrar y soltar en Bootstrap studio. Por lo que se importaron siete imágenes. Y ahora voy a abrir el archivo BSS sobre ti, el currículum un punto bss, lo nombré como curriculum vitae, pero no surgió como currículum. Una mirada, esto es lo que vamos a crear. Por lo que sólo vamos a previsualizar esto una vez en este navegador. Mostrar menos. No quiero esto. Esto es lo que vamos a diseñar tu nombre. Puedes poner tu nombre aquí. Por lo que vamos a tener tres secciones en esta pieza en particular, esta es una página web de una página que seguirá a casa alrededor y contacto. Si haces click en un tablero, puedes ver un desplazamiento suave es que están vienen a la sección Acerca de Nosotros y voy a hacer click en Contacto. Vendrá al contacto, sección de contacto, volviendo a casa. Esto es lo que vamos a diseñar. Habrá una barra de navegación una línea central, un componente central en el medio donde estarás introduciendo tu nombre, lo que hago imagen. Entonces hay tres cartas, algunos iconos están ahí, la sección Nevada, luego combustible galerías de fotos, luego formulario de contacto está ahí con este particular con toda esta información de contacto y todo que las cosas. Y entonces tenemos un pie de página y sí, eso es todo. Empecemos a diseñar este sitio web muy rápidamente. De acuerdo, volviendo al estudio de arranque. Entonces lo primero que tenemos que hacer es importar nuestra navbar. Por lo que escribiré Nav más de año. La segunda opción es arrastrar y soltar la barra de navegación dentro de la etiqueta de cuerpo. Ahora tenemos el navbar. Selecciona la barra de navegación ahora, ve a Opciones y apaga la opción fluida porque no queremos que el fluido esté ahí. Ahora en el área de marca, puedes escribir tu nombre. Simplemente teclearé tu nombre o tus tres secciones, lo que queremos es forzado facilidad a casa. La segunda que queremos es alrededor de la tercera que no fuimos. E es contacto. ¿ De acuerdo? Entonces eso es todo por ahora. Vamos paso a paso. En este video, sólo cubriremos la sección Navbar. Ahora esta casa sobre y póngase en contacto. No quiero no quiero en el lado izquierdo, quiero esto en el lado derecho. Lo que voy a hacer, seleccionaré la barra de navegación. Navbar está seleccionada ahora y qué área quería seleccionar. Ahora, quería seleccionar este nav. Una vez que seleccione esto, ahora se puede llegar a opciones y ya se puede ver en la alineación seleccionaré la alineación final. Así que ahora no es el fin. En la versión de bootstrap cinco, no lo llamamos como izquierda, central, y derecha. Lo llamamos como Inicio, Centro y Fin. Sólo voy a hacer clic en el final. Y eso es lo que queríamos, ¿verdad? Entonces eso es todo esta área en particular se hace. Antes de avanzar. Lo primero y más importante, el aspecto y la sensación de nuestro sitio viene con la fuente adecuada. Lo que voy a hacer, seleccionaré esta etiqueta corporal, REA. Y en la sección de apariencia, bajaré a la sección de fuentes, y agregaré una fuente mediante el uso de la familia de fuentes. El tipo de letra que voy a usar facilidad. Éste. Simplemente encenderé esta opción y haré clic en Guardar. Eso es todo. Y entonces simplemente seleccionaré este formulario de tu parte, esta fuente que vamos a utilizar en este proyecto en particular. De acuerdo, avanzando, solo seleccionaré una barra de navegación. Ahora, directamente navbar seleccionaré cuál es el siguiente componente inmediatamente después del cuerpo. Ahora llegaré a la sección de fondo, y en la sección de color acabaré seleccionar el color blanco, blanco extremo. Y vamos a reducir la opacidad a 80%. Ya puedes ver que es RGBA significa alfa y 0.8 es 80%. Y eso es todo lo que acabo de hacer click en Guardar. Y ahora se hace la sección Navbar. Detendré este video. Y en el siguiente video veremos cómo diseñar la siguiente porción de este sitio web. 25. Sección del Proyecto Uno: En este video, vamos a seguir adelante y estaremos estudiando dos cosas nuevas en Bootstrap Studio. Uno es la edición de imágenes mediante el uso de software externo, y esa edición se conectará directamente a bootstrap studio. Veamos cómo podemos hacer eso. Lo que tenemos que hacer aquí es primero solo tomaré un DV por aquí. Simplemente escribiremos div. Div tomará un div y dejará caer sobre esta etiqueta de cuerpo. Mi Ds es, ya estás, ahora dentro de este div, tomaré una etiqueta de imagen, así que solo escribiré IMG y tomaré esta etiqueta de imagen y dejaré caer todo esto do tag. Ahora la etiqueta de imagen está por aquí. Y ahora tenemos que hacer es que tenemos que colocar esta imagen número seis en esta área en particular. Así que sólo voy a hacer doble clic por aquí. Seleccionaré esta imagen y haga clic en, Ok. Ahora lo que está pasando, OU, queremos una imagen cuadrada, pero la altura de esta imagen es demasiado grande. De manera tradicional, lo que se supone que debemos hacer es que tenemos que importar la imagen en el software de edición de imágenes como Photoshop cuando afinidad o cualquier software de edición de imágenes allí. Tenemos que editar la imagen, exportar la imagen después de editarla, y nuevamente importarla al software Bootstrap Studio, luego usarla. Pero ahora tenemos un atajo en ellos. Veamos cómo hacer eso. Ahora lo que voy a hacer, voy a ir a la opción Setting. Vendré a editor externo y haré click en editor de imágenes. Ahora en mi sistema tengo GIMP. Y GIMP es un completo software de edición de imágenes de código abierto. Esa es la razón por la que estoy usando ese software de edición de imágenes. Para este tutorial en particular, sólo voy a hacer click en este editor predeterminado y voy a hacer click en GIMP. Una vez que esté hecho, sólo voy a hacer click en Guardar. Después de eso, lo que tengo que hacer es como, sé que he usado esta imagen en esta área en particular. Simplemente seleccionaré esto y haré doble clic en esa imagen. ¿ Qué pasará? Esa imagen se abrirá automáticamente en mi software de edición de imágenes. Ahora, cualesquiera que sean las instrucciones que estén ahí, tengo que revisar las instrucciones por ahora la guardaré tal como está y sólo voy a hacer clic en convertidor. Una vez que la conversión esté ahí, haré clic en el botón Recortar por aquí. Y simplemente arrastraré mi ratón y acabaré de recortar esta imagen. Me aseguraré de que mi imagen E al cuadrado, lo que es de 1000 por 1000. Voy a teclear poco mil sobre su, y haré click en Entrar. Una vez que se haga, simplemente haga clic en la herramienta Selección y se recorte la imagen. Ahora. Ahora tengo que exportar la imagen y es muy simple. Acabo de hacer clic en el archivo. Acabo de venir sobre la opción de exportación o su exportación como. Ahora está ahí este DPG de seis puntos. Seleccionaré esta imagen y haré click en Exportar. Daré click en Reemplácelos. Después de eso, solo obtendré esta opción de cuadro de diálogo. Simplemente haga clic en Exportar o ya sabe, el cuadro de diálogo de exportación se ha ido. Y lo que voy a hacer, simplemente volveré al software bootstrap Studio. Y ahora se puede ver la imagen E en plaza. Ahora es como un 1000 pixeles por 1000 pixeles. Ahora simplemente simplemente voy a hacer clic en el icono Ver por aquí, o simplemente ir a opciones. Y dentro de las opciones de texto, la primera opción es la alineación, y voy a hacer clic en el centro. De esa manera la imagen ahora está centrada alinear. Ahora, si hago clic en la imagen, vuelve a Apariencia ahora se puede ver la altura y el ancho de la imagen es de 1000 pixeles por 1000 pixeles. Es muy rápido y muy fácil. Sepa lo que voy a hacer. Simplemente escribiré 500 pixeles o tus px y 500 pixeles por aquí. Que donde la imagen estará en 500 pixeles por cuatro pixeles y ese es el tamaño de cada uno que quiero también, nuevo, seleccionaré esta imagen, regresaré a Opciones, y ahora buscaré opción de decoración. En la opción de declaración, se puede ver que las fronteras están ahí, y ahora sólo voy a hacer clic en borde circular. Ahora la imagen está en forma circular. Después de eso solo tomaré un rumbo. Colocaré este rumbo justo sobre esta etiqueta de imagen. Y solo escribiré tu, tu nombre. Lo tomaremos en diferentes colores. Entonces para eso, lo que voy a hacer en la búsqueda, en la opción de búsqueda de estudio por aquí, solo escribiré span. Toma el lapso y caeré dentro de esta etiqueta de encabezado. Y esto seleccionará y escribiré nombre. Necesito un espacio entre eso. Así que acabo de venir aquí y dejaré caer, soltar, dejarnos la paz. Simplemente ingrese, seleccione el lapso. Y en la opción color, tenemos que asegurarnos de que estemos en la opción de texto. En la opción de color, solo seleccionaré peligro o puedo seleccionar cualquier color en ese orden si no fuera ningún color personalizado o simplemente volver a la apariencia y de este color extraño, puedo seleccionar cualquier color que yo quisiera. Después de eso. Después de eso, tomaré un párrafo y lo dejaré caer entre la etiqueta de encabezado y la etiqueta de imagen. Sólo voy a hacer doble clic en eso y escribiré lo que haga. Eso es todo. Ahora esta porción está lista. Ahora pasemos a la nueva sección. En este trato, lo que voy a hacer, tomaré el contenedor tipo COND y caerá esto dentro de esta etiqueta div. Ahora el contenedor está aquí. Voy a tomar la fila y se sugiere esta fila, o usted podría simplemente tomar una fila. Ahora seleccionaré la fila, las columnas están ahí. Tomaré esta columna. Dentro de esta columna, lo que voy a hacer, voy a tomar un descarte de cartas en, dentro de esta. Y ahí vamos. Tenemos un subtítulo título y todo eso cosas. Pero lo que queremos, no queremos estos enlaces por aquí, así que solo te quitaré estos enlaces. Lo haré, buscaré icono ahora. Icon está ahí y dejaré caer este ícono dentro de este cuerpo de la tarjeta del cuerpo. Voy a hacer doble clic en este ícono. Y ahora se puede ver tenemos muchas bibliotecas de iconos sobre u Tenemos bootstraps, ¿también los iconos? Ahora sólo voy a escribir verbo y esta opción web, icono web está ahí y seleccionaré este ícono web. Volviendo a la Apariencia, simplemente me desplazaré hacia abajo y tengo que aumentar el tamaño de la fuente. Ahora, solo aumentaré este tamaño de teléfono. A lo mejor un 100 será bueno para mí. Tiene sentido. El título será diseño de sitios web, diseñador de VSS, BSS bootstrap Studio. Y aquí puedes poner cualquier cosa, lo que quieras, solo puedes agregar por ahí. Por ahora, solo estoy dejando que el texto ficticio esté por ahí. Ahora lo que voy a hacer, acabaré de seleccionar los cicatrizados, vengan a las Opciones. Y ahora tengo que ir a las decoraciones y solo pondré sombra sobre u Esa será una sombra regular. La sombra regular está ahí. Ahora, seleccionaré esta columna y sí buscaré en esta columna en total, habrá tres columnas, 12. Ahí vamos. Voy a hacer doble clic en este ícono. Simplemente escribiré búsqueda, ícono de búsqueda. En cambio, seleccionaré la búsqueda. Vendré aquí y lo nombraré como SEO. Digital. Disponibilidad. De nuevo, el texto ficticio estará ahí. Y ahora solo voy a hacer doble clic en este icono una vez más y escribiré servidor. El icono del servidor está ahí y da clic en. Ok. Voy a escribir hosting *** ser ING hosting dominio. Eres capaz de escribir alojándola porque yo uso hospedarla, porque uso esas cadenas son con frecuencia puedes escribir cualquier cosa por ahí. Ahora bien, estas opciones particulares, queremos algunos cambios en eso. Ahora le daremos un poco de look y sensación extra a eso. Por lo que seleccionaré este primer año de tarjeta. Voy a venir al panel Apariencia. Y en el fondo la imagen es blanca completa. Lo que vamos a hacer, solo bajaremos la opacidad a tal vez el 80%. Suficiente justo. Entonces seleccionaré esta copia, voy a hacer este vapor a la segunda tarjeta en realidad. Y a la tercera tarjeta también solo pega los valores sobre u Ahora voy a seleccionar esta fila, o tal vez puedo seleccionar este contenedor, computar contenedor. Ahora llegando a la aparición, las primeras opciones de diseño por ahí. Y en la opción de diseño, la opción de margen está ahí. Acabo de abrir esta opción de margen y margen superior. Lo que voy a hacer, solo escogeré el valor al lado negativo. Ahora se puede ver que hay solapamiento entre esta imagen y descartes, y eso es lo que queríamos. Ahora, creo que tanta superposición es suficiente, así que tal vez tomemos menos unos 100 píxeles. Ahí vamos. Bien, bastante justo. Vamos a comprobar con los diferentes tamaños de pantalla. Md, queremos cosas diferentes. Entonces acabaré de abrir esta fila, seleccionaré esta columna, regresaré a Options y MD solo tomaré seis. La segunda columna, tomaré seis. Y para el tercero, tomaré la herramienta completa en MD. Sí, tomaré la morada completa en tamaño de pantalla pequeña. Eso está completamente bien. Y en tamaño de pantalla extra pequeño, nuevo, eso está completamente bien. Ok. No hay problemas. Sí, hay un tema. La imagen ahora es grande. Lo que vamos a hacer, vendré, vendré y seleccionaré esta imagen. Volveremos al panel de apariencia. Y ahora lo que hemos hecho es como de 1000 pixeles, hemos bajado a 500 pixeles. Entonces en resumen, lo que hicimos es reducir el tamaño en un 50%. En lugar de tomar 500 píxeles, lo que podemos hacer, la opción alternativa es simplemente clic aquí al botón de reinicio de aquí, y simplemente escriba 50%. Eso es todo. No hay scroll vertical y la fijación completa es su segunda opción también está ahí, que veremos en el siguiente video. Pero antes de eso, arreglaremos esta área en particular donde estas dos cartas están muy cerca unas de otras y no hay distancia entre ellas. Así que volviendo al tamaño de pantalla de Excel, acabaré de seleccionar esta columna, este panel del editor, panel de atributos. Y en la clase, lo que voy a escribir, les daré el margen de fondo. Entonces, lo que voy a hacer, simplemente me desplazaré un poco hacia abajo. Selecciona esta columna. Voy a escribir margen inferior dos, guión dos, y presionaré Enter. Ya se puede ver ahora tenemos una costura inferior margen que haré por esta columna también. Margen m para margen antes del guión inferior dos. Simple en esta columna también. Margen, guión inferior a lo que hice. Lo que hice aquí es como si seleccionara columnas individuales y les doy los valores individualmente. Pero puedes seleccionar todos juntos, las tres columnas al mismo tiempo y puedes darles, y puedes dar el mismo valor que es margin-bottom a al mismo tiempo. ¿ De acuerdo? Así que sólo voy despacio. Una vez que tengamos la gripe, entonces lo haré de una manera profesional adecuada, sistemática y apropiada. Ahora podemos ver eso de nuevo, tenemos algunos temas con la columna. El columna Rita seleccionó las tres columnas con nuestro seleccionado. Entonces volviendo al panel Options, ahora podemos ver después de MD, el tamaño de la pantalla será LG. Lg dará el ancho de cuatro. De esta manera. En MD, es así, lo siento. Lgn por encima será uno tras otro. En MD dos estarán en la parte superior y uno estará en la parte inferior. Y en SM, todos y cada uno estará debajo del otro. Y lo mismo le pasará a extra pequeño. Creo que por ahora es bueno ir. Entonces volviendo al tamaño de Excel, tenemos esto que empezó a echar un vistazo. Tenemos que hacer algo con esta imagen C. Ahora el responsive está apagado, y si bajo a este tamaño de pantalla en particular ahora tienes un desplazamiento horizontal por aquí. Solo para arreglar esto sin usar el medallón mayor no solo clic en esta respuesta que ícono por aquí. Y eso es sólidos hechos. Juega con la capacidad de respuesta de la imagen. Eso es todo. Ok. Sí, gracias chicos. Nos vemos en la siguiente sección ahora. 26. Galería de Imágenes de Proyecto One: Entonces en este video, vamos a seguir adelante. Tomaremos uno más contenedores, así que solo escribiremos contenedor año. Y dejaré caer sobre esto y dejaré caer este contenedor sobre esta etiqueta de cuerpo. Tengo el contenedor por aquí. Por lo tanto, este contenedor voy a dar un margen, top, margen, top es M es margen y T es stop. Dash cinco dará el margen extra por aquí. Entonces sí, tenemos algún año de brecha extra ¿verdad? Dentro de esto voy a tomar un encabezado, etiqueta de encabezado, soltar esta etiqueta de encabezado por aquí. Y esto se escribirá como de ir a Options elemento central. Eso es todo. Este rubro voy a dar relleno top y relleno inferior. Entonces P significa relleno. Parte inferior es B, guión tres espacio, de nuevo, acolchado superior. Pt dash tres, es decir Pb es relleno inferior, P t es padding top y tres es el valor. Ahora, le he dado el relleno y el margen a esto. Por lo que seleccionaré este contenedor y en apariencia bajará a la frontera. Y seleccionaré este borde superior, y seleccionaré el color sólido y el negro estará bien. Nuevamente, abajo y selecciona Sólido. Tengo borde superior e inferior a esto. Vamos a tener un adelanto por aquí. Simplemente haga clic en su ojo habilitará esta Vista previa y haré clic en Vista previa. Se iniciará el navegador predeterminado. Ahí vamos. Contamos con la vista previa de nuestra página web. Se ve bien, ¿no? Simplemente minimice esto y sigamos adelante. Tomaremos un recipiente más por aquí, dejaremos caer esta etiqueta de cuerpo de insecto, y tengo este contenedor por aquí. Ahora, tomaremos una etiqueta de párrafo y dejaré caer este párrafo dentro de este contenedor. Y para este contenedor también solo voy a dar algún margen superior o tal vez tres. Quería ficticio de texto en esto. Qué voy a hacer, voy a golpear Control P y L tipo Lorem son sólo voy a teclear, acabaré de golpear Enter y golpear Entrar una vez más. Ahí vamos. Tenemos un texto ficticio por aquí. Voy a pensar que tengo que duplicar este texto ficticio tres veces al menos para que tenga algunos datos o usted, veamos la vista previa. Eso es todo. Bueno o bien simplemente toma esta copia y péguela. Y péguelo aquí. Nuevamente en pasta tenemos dos opciones diferentes. Simplemente copiaré esto una vez más. Lo que voy a hacer es que simplemente pegues control V año. Se puede ver que hay un espacio extra en el principio y espacio extra al final. Para evitar esto, lo que tenemos que hacer es simplemente hacer Control Z. ahora para evitar estos espacios extra, lo que tenemos que hacer es como tenemos que pegar usando el atajo como control más shift plus v. Eso es todo. No tenemos espacio extra ahora. Haré esto dentro de esto para que sea un buen párrafo. Y acabo de quitar este último. Por lo que selecciona el párrafo y en las fuentes solo voy a ir a la alineación y simplemente haga clic en justificar. Lo mismo. Haré esto al segundo párrafo. Sólo voy a hacer click en justificar sobre u Ok, ahora se ha visto bien. Después de eso, tenemos que poner la sección de galería y eso es muy fácil. El componente readymade está ahí. Sólo vendré aquí y simplemente teclearemos galería. Se puede ver una Galería Lightbox. Ou, solo toma esta galería, suéltala dentro de esta etiqueta de cuerpo. Eso es todo lo que tu galería está hecha. El Lightbox Gallery o simplemente eliminaré esta caja de luz y solo la opción Galería estará ahí. Este texto como de costumbre, si lo desea, puede conservarlo o de lo contrario puede eliminarlo. Ahora ya tienes estas fotos también. Estas fotos pueden ser reemplazadas y ese reemplazo veremos en algunos videos posteriores porque ahora solo estamos enfocados en diseñar no el reemplazo de las fotos. Digamos el preestreno. En vista previa se puede ver ahora, sí, tenemos esta cosa también la sección Acerca de luego galería. Eso es todo lo que se hace la opción Galería. Ahora lo más importante, la sección Contáctenos, queremos diseñar la sección Contáctenos y esa sección en particular vamos a aprender en el siguiente video. vemos en el siguiente video donde estaremos aprendiendo a crear la sección Contáctenos con algún texto y un formulario de contacto. Te veré en el siguiente video. 27. Contacto Sección Parte 1 del Proyecto Uno: En este video, vamos a conocer la sección Contáctenos. Por lo que directamente comenzaremos, solo tomaré un contenedor, lo dejaré caer dentro de la etiqueta del cuerpo. Ahora tengo este contenedor y quiero dos secciones donde uno aunque dirección de correo electrónico y número de teléfono estará ahí. En la segunda sección, crearemos un formulario. Lo que voy a hacer, tomaré una fila. Obviamente. No busquemos la habitación. Simplemente seleccionaré este contenedor y en la sugerencia, la fila es su gran esta fila y la suelta dentro de este contenedor, seleccionaré esta fila y tenemos que crear dos columnas. Una columna está aquí, y sólo voy a duplicar esto y esta es la segunda columna. Así que selecciona tanto la columna vienen a las opciones, invierte. Simplemente selecciona este seis de MD y arriba tenemos división de dos, eso es 66, y antes de eso es como 212. Por lo que completas dos secciones estarán ahí. Así que sólo voy a hacer clic en L por aquí. Se verá así. Ahora hay dos columnas, y ahora por debajo de MD año tenemos una tras otra. Tomaré un rumbo por aquí. Dejaré caer este rumbo dentro de esta columna. Voy a teclear. Siéntase libre de ponerse en contacto conmigo y signo exclamatorio. Después de eso, tomaré un párrafo. No tomemos el párrafo ahora. Tomaremos un enlace. Este enlace solo dejaré caer dentro esta columna, la primera columna. Bien, tomemos este panel del editor. En la clase. Apenas entraré a una clase. El nombre de la clase será decoración de texto, decoración guión de texto, ninguno. Esa es una clase de bootstrap ya hecha. Entonces texto dash oscuro. Nuevamente, esta es una clase de bootstrap ya hecha. Entra. Ahora el texto es oscuro y no hay decoración, decoración ese sentido cuando tienes un enlace, cuando pasas el cursor, puntero del ratón sobre el enlace subrayado, bienvenido que no queremos. Vale, entonces ahora, OK, y ahora tomaré un párrafo. Pon este párrafo dentro de este enlace. Ahora, solo escribe la dirección de correo electrónico. Entonces lo que puedo escribir el ejemplo de inmunogenicidad, Años Ejemplo a la tasa email.com. Y el texto de enlace, sólo voy a hacer doble clic en este texto. Sólo voy a hacer doble clic en este enlace, enlazar texto y simplemente lo seleccionaré y simplemente eliminaré, como eliminar el retroceso sentido. Tenemos un párrafo para usted. Por qué añadí párrafo es como tenemos más control sobre el párrafo, pero vinculado, no tenemos control sobre link. Digamos por ejemplo, solo quiero aumentar el tamaño. Simplemente seleccione este párrafo y simplemente haga clic en Leto. Sí, eso es todo. Y si selecciono este enlace y ahora quiero duplicarlo dos veces más, ¿qué pasará si es enlace? Vendrá uno tras otro. Yo quería debajo uno del otro, no uno tras otro. Esa es la razón por la que he tomado el párrafo por su y no continué con enlace. Así que vamos a seleccionar este enlace. Duplicar una vez más. Ahora le preguntaríamos por debajo de eso. Duplicar una vez más. Un bien público más está ahí. Ahora solo escribiremos un número telefónico a lo largo de años. El número completo será más 91. Ese es el código de país de mi país. Espacio, 9876543210. Estoy muy seguro de que este número nadie usa este segundo número de teléfono será más 91, nuevamente, 9876543211. Nuevamente, este número, nadie usó esto. Ahora lo que queremos es cada vez que el usuario venga al sitio web, ya se puede ver en esta área en particular se cambia el puntero más. Vamos el ícono de la yema del dedo está ahí. ¿ Por qué? Porque es el enlace. Siempre que el usuario haga clic en esta dirección de correo electrónico en particular automáticamente, se el navegador web predeterminado o abrirá el navegador web predeterminado o la aplicación de correo electrónico predeterminada. Y en dos secciones donde ingresamos automáticamente la dirección de correo electrónico del destinatario, esta dirección de correo electrónico debe ingresarse por ahí. Quiero crear ese tipo de característica en este sitio web. Entonces, ¿cómo hacer eso? Es muy fácil. Solo vuelve a bootstrap studio. Selecciona este enlace en particular en la sección URL, este hash, y solo escribe colon masculino y la dirección de correo electrónico. Ejemplo en el email.com. Eso es todo. Ahí está bien el preestreno. Y si hago clic en este correo electrónico ahora se puede ver que está pidiendo lanzar aplicación de correo electrónico. Y voy a hacer clic en, Ok. Una vez que haga click en oaky, se puede ver ejemplo en read email.com es ahora estás en las dos secciones. Apenas ahora el uso de sólo hay que agregar el tema y el contenido. Eso es todo. Esto es muy fácil y muy práctico. En términos de UX, la experiencia del usuario está en el primer nivel. Lo mismo que haremos con el número completo. Por lo que seleccionaré este número de teléfono y el enlace, que es el enlace que contiene este número completo. Y sólo voy a hacer click en este enlace, volver a esta URL. Y escribiré tel colon y solo escribiré el número con el código de país más 91979876543210. Eso es todo. Lo mismo que haré con el segundo enlace también. Simplemente escriba hasta que PEL diga espacio de punto y coma, código de país y el número de teléfono. De esta manera, lo que sucederá cuando el usuario haga clic en esta área en particular se establecerá el sitio está tratando de abrir, escoger una app. Sólo voy a hacer clic en Abrir. Y ahora está mostrando una cosa más. Pero, ¿qué pasó cuando mayoría de los usuarios están usando el navegador Chrome? El navegador Chrome está conectado a nuestros dispositivos móviles. ¿ Qué pasará cuando algún usuario haga clic en este número completo? Y no es Chrome. ¿ Qué pasará cuando vendrán diferentes tipos de cuadro de diálogo intentas si estás usando el navegador Chrome, los diferentes tipos de pop-up vendrán aquí. Y una vez que el usuario haga clic en Permitir automáticamente en su teléfono, ya sea el Apple o Android, no importa. Automáticamente ese número estará entrando dentro del teléfono y cómo llegará exactamente. Se abrirá la aplicación telefónica. Este número se marcará automáticamente y el usuario solo tiene que hacer clic en el botón Llamar. Eso es todo. Nuevamente, la experiencia del usuario está en el primer nivel. Sí, eso es todo. Es así como vamos a crear esta área en particular y se hace esta sección. Ahora, avanzaremos a la siguiente sección donde estaremos creando un formulario de contacto y que lo estaremos haciendo en el siguiente video. Nos vemos en el siguiente video. 28. Contacto Sección Parte 2 del Proyecto Uno: De acuerdo, entonces vamos a crear un formulario de contacto en este video en particular. Así que empecemos. Entonces lo primero que tomaré una forma, tu formulario FOR M. Dejaré caer esta forma dentro de este contenedor. Dentro de esta columna No contenedor. Este es un elemento de forma. Ahora dentro de este elemento de formulario, tomaré div. Simplemente dejaré caer este div más de un año. Y después de eso tomaré una etiqueta. Escribiré LAB etiquetado, idealtype salto LAB solo entonces campo etiquetado. Bienvenido. Esta etiqueta de campo. Quiero dejarlo caer dentro de esta etiqueta de cuerpo. Vale, la etiqueta de campo está ahí. Y ahora lo primero que queremos del usuario es meme. Esa información particular vendrá dentro de entrada de texto. Simplemente agregaré una nota por aquí, la entrada de texto y el área de texto son dos cosas diferentes. No te confundas por ti, o simplemente tomas esta entrada de texto y esta entrada de texto, lo dejaré caer dentro de este div. Ahora esta etiqueta, solo lo editaré. Hago esto y escribiré FullName. Selecciona este texto y pon tu ojo pondrá el marcador como tu nombre completo. En el valor. El valor no se conocerá el nombre, el nombre de este campo. Mira este nombre es el nombre del campo. Por lo que este será nombre completo o simplemente escriba nombre completo. Y seleccionaré esta etiqueta ahora, sentir la etiqueta. Y para esta etiqueta de campo es para quién? Para lo que tenemos que hacer es que sólo seleccionaré esta y la etiqueta ahora, el nombre que le hemos dado su nombre completo, correcto, así que sólo copia esto, seleccione la etiqueta y teclearé, y pegaré este FullName OU. De esta manera el sistema sabe que esta etiqueta de campo es para el texto de entrada que se nombra como FullName. Selecciona este div. Abra este panel de atributos, y el margen inferior. Eso es todo. Ahora, acabamos de poner algunas declaraciones a esto. Así que seleccionaré esta entrada de texto dentro de apariencia, acabaré de desplazarse por sus cuatro los bordes. Ahí están los bordes y el radio, acabaré de quitar el radio y lo pondré a 0. De esta manera, las edades de esta entrada de texto en particular serán agudas. Y sólo le agregaré un borde inferior con un trazo y un ancho de un píxel, lo siento, un ancho de píxel a él, y el color será oscuro. De esta manera. Este campo de entrada en particular está listo. Ahora, acabaré de seleccionar este div y lo etiquetaré. Así que haga clic derecho y etiquetar, etiquetar esto como nombre completo. Vale, entonces lo haremos, cuando volvamos a rediseñar esta área en particular, sabremos dentro de este div, el nombre completo, la etiqueta y el campo de entrada está ahí. Ahora, duplica esto. A esta zona, lo llamaremos como lo que hemos nacido el próximo número de teléfono. Sí. Por lo que escribiremos por número. Número de teléfono. No usaremos entrada de texto porque número de teléfono o siempre números no usamos como caracteres en ese interior alfabético . Simplemente eliminaré esto de tu número de tipo o de tu número. Y tenemos campo de entrada numérica sobre ti. He creado una entrada numérica por mi propia. Eso es entrada numérica sin flecha. Te mostraré la diferencia entre eso. Tomaremos esta entrada numérica primero y dejaré caer esto dentro de este segundo. Sólo para cambiar el nombre de la etiqueta. El nombre de la tabla será el número. Esta entrada numérica está ahí. Vamos a la sección anterior ahora se puede ver cuando acaba de pasar el cursor por aquí, se pueden ver dos flechas están ahí, que son como incremento y decremento. No queremos estas flechas cuando estamos ingresando el número completo, ¿verdad? Entonces, lo que voy a hacer, volveré a bootstrap studio. Simplemente eliminaré esta entrada numérica de ti y esta entrada numérica sin flecha. Este componente en particular está ahí. Este componente no está instalado por defecto en el estudio bootstrap. Este componente he creado este componente. Sólo tienes que ir a online y buscar entrada número de entrada sin flecha. Obtendrás esto. Seleccione esta entrada de número sin flecha y suelte esto en esta área de número de teléfono. Ahora, ¿qué pasará? Vamos a la vista previa. Ahora se puede ver que no hay flecha por aquí. Así es como lo queríamos. Así que vamos a seleccionar esto. Y en el desplazamiento hacia arriba en las opciones, el placeholder vuelve a ser número completo. Simplemente cópialo y pon el mismo nombre para la etiqueta. Simplemente cambiaré el nombre de esta etiqueta también. Vale, ahora selecciona este número de teléfono, ven a Apariencia. Y ahora en esta área, acabaré de seleccionar este borde inferior y hacerlo de color sólido y oscuro. Un píxel es bueno y el radio será de 0 pixeles. Eso es todo. ¿ De acuerdo? Ahora, después de este número completo, lo que queremos es dirección de correo electrónico, vale, así que duplica esto. Ahora antes de eso acabaré de cambiar el nombre de la etiqueta como correo electrónico y pulsa Enter. Vamos a cambiar esto del número de teléfono al correo electrónico. Ahora, la dirección de correo electrónico tiene un campo de entrada diferente, así que eliminaré esto una vez más. Y aquí solo escribiré correo electrónico y entrada de correo electrónico. Está ahí. ¿Qué hace esta entrada de correo electrónico? Tiene un JavaScript ya hecho escrito para ello. La dirección de correo electrónico tiene un formato particular, ¿verdad? Formato será como primero, tu nombre estará ahí o lo que sea, la hendidura de pierna en esta área en particular, este ejemplo está ahí. Entonces tenemos al ritmo, entonces tenemos nombre de dominio, es decir gmail.com, hotmail.com, yahoo.com, Outlook.com, sea lo que sea. Si algún usuario acaba de introducir ejemplo y tratar de enviar este formulario, verá que la dirección de correo electrónico no se corrige. Si el ejemplo de tipo de usuario en el correo electrónico y.com no está escrito, de nuevo, dirá que esto no está en el formato adecuado. Situación hipotética. Si el usuario escribe ejemplo en el email com donde se perdió el punto. Nuevamente, este campo de entrada particular, campo de entrada dirá que el correo electrónico no está en un formato adecuado. Yo también te mostraré eso. Continuando con esto, seleccione este campo de entrada de correo electrónico particular, vaya al marcador de posición del panel Opciones Voy a escribir correo electrónico. Escriba su ID de correo electrónico. El nombre le daré este nombre como correo electrónico. Voy a copiar esto a la etiqueta. Cambiaré el nombre de la etiqueta como correo electrónico. Queremos el área donde el usuario pueda escribir el mensaje. Ahora en este lugar particular, el área de texto da la bienvenida. Duplicar esto. Y ahora escribiré mensaje. Selecciona esta entrada de correo electrónico y O, nos hemos olvidado dar la frontera. De acuerdo, entonces seleccionaré este campo de entrada de correo electrónico. Iré a Apariencia y el radio será de 0 pixeles. El color será negro y el borde inferior será sólido. Hacia adelante. Así que seleccione este div cambiará la etiqueta primer mensaje. El sello es mensaje, y ahora tenemos que tomar área de texto por aquí, suéltala dentro de este mensaje. Haz lo mismo que haremos primero, 0 pixeles radio, inferior, sólido con color negro. Hecho con eso. Ahora veamos la vista previa. Tenemos el lugar para, ahora tenemos el lugar para ingresar el nombre lo está mostrando dice que ingresa tu nombre completo número de teléfono y dirección de correo electrónico, entonces tenemos un área para enviar mensajes. Ahora, se puede ver esta zona, podemos aumentar el tamaño. Este particular, este campo de entrada particular se llama como área de texto. Ahora lo más importante, necesitamos un botón donde el usuario pueda hacer clic en una mano. Puede presentar el formulario. Para eso. Nuevamente, necesitaremos esto. Necesitaremos este trato donde duplicaremos este div y simplemente lo etiquetaremos como botón. Y no queremos esta etiqueta ni nada dentro de esto. Simplemente necesitamos un botón. Simplemente tomaré un botón y caeré esto dentro de este botón, escribiré enviar mensaje. El tema que estamos siguiendo es rojo y negro. Entonces, lo que voy a hacer, solo voy a ir a opciones y el estilo será oscuro en sí mismo. El borde estará afilado. Se puede ver la vista previa. Sí, las fronteras están afiladas. Un pequeño cambio voy a hacer. Simplemente aumentaré el tamaño del botón de predeterminado a grande. De acuerdo, entonces se verá bastante bien. Si quieres. Podemos poner la ICANN también dentro de ese suelo apenas teclea ícono. Y va a tomar este ícono y poner directamente por aquí, solo hago doble clic en el icono de bootstrap y enviar mensaje punto que viene. Tal vez. No. Lo siento. No, éste. Podemos usar este. Por lo que vamos a tomar este 1 primero 1. Simplemente ponga unos orden de paz. Eso es todo. Este botón en particular será un botón Enviar. Cuando el usuario haga clic en este botón, este formulario se enviará, se enviará el formulario. Selecciona este botón. En el área de opción de botón, tenemos el tipo de botón. Este tipo de botón, seleccionaremos el de enviar. Siempre que el usuario haga clic en Enviar cualquiera que la información esté escrita en este formulario, esa información vendrá a la dirección de correo electrónico. Ahora cómo enviar esta información particular a la dirección de correo electrónico. Eso es muy fácil y que veremos en el siguiente video. Nos vemos en el siguiente video, chicos. 29. Forma inteligente del proyecto One: Por lo que vamos a enviar la información desde este formulario a la dirección de correo electrónico. Para eso, lo que tenemos que hacer es que tengamos que seleccionar este formulario. Una vez que seleccione este formulario, solo haré clic en el botón Formulario inteligente por aquí. Entonces tengo que sumar al destinatario. Por lo que tenemos a estos destinatarios más de un año. Esta es mi dirección de correo electrónico, licenciatura actual en el Yahoo.com. Y si me pueden hacer alguna pregunta enviando el correo en esta dirección de correo electrónico. Ya, las direcciones de correo electrónico están ahí, pero si quieres agregar una dirección de correo electrónico, cómo puedes hacerlo, es muy fácil. Simplemente haga clic en Administrar. cuadro de diálogo vendrá y haga clic en Agregar destinatario, ingrese la dirección de correo electrónico aquí. Digamos que solo escribiré ejemplo en el recalentamiento mail.com. Lo siento, acabo de escribir dirección de correo electrónico email.com ejemplo en mail.com y simplemente haga clic en Crear. ¿ Y qué pasará? Ahí vendrá un correo electrónico de verificación en que hay que introducir un número de cinco o seis dígitos estará ahí. Ese número hay que poner aquí. Y luego simplemente haga clic en Verificar. Eso es todo. Después de eso. Simplemente eliminaré esto. Después de eso, los destinatarios del correo electrónico vendrán en esta lista. En este destinatario eligen escuela receptora también. Simplemente seleccione esto. Simplemente seleccionaré mi dirección de correo electrónico. Eso es todo, nada más que hacer. Y luego tenemos la opción como Redirigir URL una vez que se envíe el formulario, donde desea que el usuario sea redirigido. A partir de ahora, sólo tenemos una página, por lo que sólo haremos clic en index.html. Eso es todo. Ok, Entonces tenemos alguna opción de mensajería personalizada también que ya hemos visto. Creo que creo que ya hemos visto todas estas cosas en los videos anteriores. Si no me equivoco. Sí, Pero de nuevo, como enviar después, como, puedes agregar el tema. El sujeto será formularios de contacto. El co-NP se ha ido. Del usuario. Cargando. A lo mejor podemos escribir casi ahí. Entonces con éxito, entonces podemos enviar el mensaje. Entonces el mensaje de éxito será, me pondré en contacto contigo en breve. mensaje de error lo mantendrá tal como está. Whoops, luego archivar demasiado grande. Si el archivo adjunto está ahí, entonces tenemos que mostrar este archivo demasiado grande luego forma vacía. Al igual Por favor llene la información que haya ahí. Sí, todas estas cosas entonces cerrar botón estará ahí. Botón Cerrar vamos a dejar estas opciones como predeterminadas totalmente. Bien, ahora, entonces tenemos que validar el formulario también, ¿verdad? Por lo que este primer campo, debe ser compensado, los usuarios deben llenar este formulario es que el formulario no va a ser enviado. ¿ Qué pasará ahora? Apenas ven a esto. Y si hago click en Enviar, se puede ver que el formulario se envía ahora, pero no hay información y sólo click en No soy un robot. Se comprobará. Por favor llene el campo requerido e inténtelo de nuevo. Pero esto no debería suceder. Eres sólo el campo de entrada debe mostrar como por favor ingrese algo en esto, ¿verdad? Así que volvamos al estudio Bootstrap y simplemente seleccionemos esta entrada de texto en opciones. En validación, tenemos que venir en la validación y basta con hacer click en este botón requerido o pareces cosa al número completo, ve a Validación, haz click en el botón requerido. Lo mismo. Vamos a la dirección de correo electrónico, haga clic en el botón requerido y el botón de mensaje requerido. Ahora, ¿qué pasará si vas a la vista previa? Si hago click en Enviar, dirá, por favor llene este hombre cinematográfico. Por favor. Pondré mi nombre. ¿ Cómo es mi nombre? Vamos a escribir nombre completo, luego número completo. Escriba este número de teléfono y dirección de correo electrónico son ahora. Ahora quiero mostrarte este email. Simplemente escriba e-mail y pondré el mensaje como mensaje. Voy a tratar de enviar esto. Ahora puedes ver, por favor incluye añadir la tarifa en la dirección de correo electrónico. Correo electrónico. Vamos, espectáculo. Falta un anuncio al correo electrónico. El precio está bien. Bien. Al ritmo que no son sólo una vez más, por favor ingrese la parte. Seguir en la dirección de correo electrónico roja es incorrecta. Gmail.com. Y ahora si envío este e-mail ahora lo puedes ver muestra como si no soy un robot. Y casi está hecho. Y boom, eso es todo lo que hemos hecho con eso. Podemos crear una página más donde mostraremos felicitaciones, recibí el mensaje. Recibí tu mensaje o recibí tu email y nos pondremos en contacto contigo en breve. Podemos crear una página más y podemos redirigir al usuario por ahí. Y vamos a poner un botón por ahí, como volver a la página de inicio. Y si hacemos clic en ese botón en particular, la redirección será a esta página en el mismo. De acuerdo, así que no queremos hacer todas esas cosas por esta manifestación en particular. Por lo que a partir de ahora, se hace esta área. Imagen y esta imagen galerías funcionando correctamente, sin problemas y todo lo que las cosas. También podemos añadir un pie de página por aquí. Apenas ven aquí y escribiré FOBT y pie de página oscuro como si tuviera demasiada información. En primer lugar, básico está bien, bueno para nosotros. Simplemente dejaré caer este pie de página básico en el cuerpo. Este cuerpo. Eso es todo. Cuántos botones tenemos, tenemos casa. Entonces tenemos sobre y luego tenemos contacto. Eso es todo descanso. No queremos. Por lo que sólo seleccionaré éste y estos términos y términos y política de privacidad y luego eliminaré esto. Podemos vincular esto obviamente y nombre de empresa a nombre de empresa, Corporativo 2021. Así que solo escribiré tu nombre. Derechos de autor 2021. Eso es todo. Ahora, veamos la vista previa. Si me desplazo, todo va bien. Ahora lo que queremos, nuestra barra de navegación se va cuando nos estamos desplazando hacia abajo. No queremos eso. Así que volviendo a bootstrap studio, solo seleccionaré la barra de navegación una vez más, y simplemente mantendré la posición fija a la cima. Fijo arriba es un poco raro que tu nombre haya ido dentro del mapa, pero mantengámoslo como hizo TikTok, sin problemas. Volvamos a la vista previa. Ahora se puede ver la barra de navegación es pegarse a la parte superior. Eso es todo. Hagamos la última porción de este sitio web donde solo podemos hacer click en este botón y la página se desplazará hasta esa área en particular. Y esa cosa en particular que vamos a hacer en el próximo video. Nos vemos en el siguiente video. 30. Finalizar el sitio web del Proyecto Uno: A lo mejor este es el último video de esta sección en particular. No sé si algo viene en mi mente. Puedo crear algunos, algunos videos más en esta sección. Botón de inicio, seleccionaremos el botón de inicio y podrás ver este botón de Inicio es oscuro y sobre y Contáctenos II es un poco en un lado claro. El motivo detrás de eso, y acabaremos de seleccionar este enlace que seleccionaré el botón de inicio. Puedo ver que este enlace está seleccionado, pero quiero que este elemento nav sea seleccionado. Por lo que seleccionaré este elemento nav y está activo. Se acaba de hacer click en, vamos a hacer click en este botón que está encendido. Ahora todo está hecho. Ok. Empecemos con este primer contenedor es esta área. Este es el, este, esto hacer, esto hacer es primero este trato. Tenemos que dar una identificación para este deber en particular. Basta con hacer click aquí y ID estará en casa. Esta es la sección domiciliaria. Esta es la sección domiciliaria. Entonces tenemos este contenedor que contiene la sección Acerca de Nosotros. Esta sección viene en el siguiente contenedor. De acuerdo, bien. Entonces, lo que vamos a hacer, solo agregaremos un dv por aquí en div. Y estos dos contenedores irán dentro de este div, y este div será llamado ya que sobre el ID de atributo será casi suficiente. Entonces Galería, esta sección en particular es Galería. Y luego simplemente iban a la sección de atributos y escribirían su galería. Esta sección es sección de contacto. Entonces solo escribiré cd contact. Sí, básicamente tenemos por ahora. No lo creo. Necesitamos una galería o simplemente quitas esta galería. Por lo que ahora tenemos tres como casa sobre y contacto. Eso es todo. Volviendo a los navbars. Selecciona esta casa donde está ahí el enlace. Este enlace tenemos que seleccionar y esta URL particular vamos a estar escribiendo. El ID, ID del año comienza con la clave hash. La clave hash ya está ahí y simplemente escribe casa. Asegúrate de que si tienes, si has dado el DNI a casa con letra mayúscula dentro de eso, tienes que usar el mismo caso por aquí. Es sensible a mayúsculas y minúsculas. Entonces casa, después de eso se trata, por lo que la clave hash ya está ahí y simplemente escribirán sobre. Entonces seleccionaré este contacto y el contacto estará ahí. Lo mismo que haremos con el pie de página también. Simplemente seleccionaré esta casa y escribiré casa a lo largo del año. Y sobre. Escribiré sobre contacto. Contacto. Veamos ahora la vista previa. Estamos en la vista previa. Si hago click en casa, ahí vamos. Si hago click en Contacto, Ahí vamos. Si hago click en Inicio, volvemos a la cima. Ok. Suficiente justo. De esta manera, hemos completado nuestro diseño de página web de una sola página donde cualquier cosa que puedas usar, quieres cambiar cualquier cosa en esta cosa en particular. Es una especie de reanudar solamente, ¿verdad? Tienes un hogar sobre y sección de contacto y luego solo puedes dejar caer cualquiera puede venir. Pueden soltar directamente un correo electrónico o simplemente pueden escribir. Simplemente pueden llenar este formulario en particular y solo pueden enviarte por correo. Y este formulario será cualquiera que sea la información que el usuario escriba en esta área en particular, esa información vendrá a la comida. Oh, no dimos el marcador de posición a esta área de texto en particular. Por lo que acaba de venir aquí y escribiré un lugar titular. Escriba su mensaje signo exclamatorio. Eso es todo. De acuerdo, así que volviendo a la vista previa para que escriba su mensaje y eso es todo. Creo que todo está hecho, hombre. Sí, todo está hecho. 31. Apertura Del Proyecto 2: Hola y bienvenidos. En esta sección. En esta sección vamos a diseñar resultados tecnológicos. Entonces esta es la página web que vamos a diseñar. Y en este sitio web estamos dispuestos a ver muchas cosas como consulta de medios e integraciones X2 como Zu que forman integraciones, chat en vivo, mesa de ayuda. Muchas cosas que vamos a ver en esta sección en particular. Esta sección va a ser un poco más larga en comparación con la última sección. En esa sección, acabamos de crear un sitio web de una página. En esta sección estaremos creando un mínimo de, digamos, de cuatro a cinco páginas de diseño. Esta sección será un poco más larga sin perder mucho tiempo. Empecemos y aprendamos a diseñar un sitio web de varias páginas. Entonces nos vemos en el siguiente video. 32. Página Principal Sección Uno 1 Del Proyecto Dos: De acuerdo, así que empecemos. Por lo que como es habitual, sólo vamos a hacer clic en nuevo diseño por aquí y lo nombraremos como tech resolve. Bootstrap será la más reciente. Seleccionaremos la plantilla en blanco y golpearemos en Crear. Eso es todo. Ahora antes de avanzar, tenemos que importar todos los recursos que tenemos. Simplemente ve a la carpeta principal de tu curso BSS en esos archivos BSS, y luego encontrarás el resultado de scroll hash 500s. Simplemente haz doble clic en eso y verás otras cuatro carpetas dentro de esto. Todas las cuatro carpetas se basan en las páginas como homepage solución de negocio, nuestro cliente, y contacte con nosotros. Lo que vamos a hacer aquí es como dentro de Bootstrap studio, solo vamos a crear una carpeta dentro de la carpeta de imágenes, y la nombraremos como casa. Después de eso, ¿qué más tenemos a quién entonces solución empresarial, nuestro cliente y contacto. Voy a crear una carpeta más llamada soluciones empresariales. Así que acabo de comprar BS, esa es solución de negocio. Entonces nuestro cliente, OCI, luego contacte. Por lo que lo nombraremos tan completo como nombraremos contacto completo. De acuerdo, en base a esta carpeta, solo la importaremos. Sólo voy a hacer doble clic en esta casa. Seleccionaré todo esto y lo dejaré caer dentro de esta carpeta home. Voy a establecer 60 imágenes se importan luego solución de negocio, acabaré de seleccionar todo. Y solución empresarial más fácil. Bs siete imágenes están ahí, está bien, las siete imágenes son importadas. Ahora después de eso tenemos nuestros clientes, eso es OC. Por lo que acabaré de derrumbar este quién y bs. Entonces OC es éste. Y OC sólo tenemos una imagen. Por lo que solo dejaré caer tu OCI. Última carpeta es contacto contacto carpeta Contacto. Nuevamente, una carpeta está ahí y solo dejaré caer esta carpeta de contactos. Por lo que sólo dejaré caer esta imagen dentro de esta carpeta de contactos. De acuerdo, entonces los recursos se cargan dentro de éste, para que podamos cerrar esto. Ahora. Veamos qué vamos a diseñar año. Entonces vamos a diseñar esto. Estaremos haciendo un clon de este sitio web no completo, pero pocas porciones importantes de este sitio web. Obviamente la landing page vamos a diseñar esa landing page que puedes ver ahora este formulario está ahí. Pero tan pronto como se mueve al pequeño tamaño de pantalla, el formulario desaparece. Y el botón viene por aquí y dice, Cuéntanos de tu negocio y cuando hagas clic en eso, cuando venga modelo y esa forma está dentro de ese modelo. Tan bastante obvio como hemos aprendido sobre esto, estaremos usando la consulta de medios para esto. Entonces en esta sección en particular, la consulta de medios que entenderás en una versión detallada. Bien, bastante justo. Justo, bastante justo. Con la introducción, empecemos ahora. Lo primero que es habitual, estaremos tomando un año navbar. Simplemente teclearé nav y tomaré esta marca navbar será resultados tecnológicos. Así que solo escribiré tu tecnología TCH en nuestro ESOL VE, lo siento, resolución de mazos VE. Y tenemos ícono por ahí. Así que solo tomaré un ícono y dejaré caer el ícono por aquí. Entonces veamos en icono de bootstrap, ¿tenemos algo para la tecnología o no? Es una batería pero no es una tecnología. ¿ Tecnología de baterías? No, para nada. Ok. Así que busquemos algo diferente. Qué podemos hacer es video 3D ADHD VR. Estamos, oh Dios mío. Algo relacionado con la tecnología, ¿qué podemos hacer? No podemos usar bug. Calendario está ahí el video es. Busquemos computadora. ¿ Tenemos computadora o no? Brújula que tenemos. Vamos a por, solo por esta demo, solo por este video, puedo llevarme este año composible. No lo creo. No se ve bien. Tomaremos otra cosa. Tomemos esta colección cuando tal vez se vea bien. Sí, se veía bastante bien. Ok. El resultado de Peck es el sitio web que vamos a diseñar ahora. Y este nav items que tenemos de este lado, queríamos llevarlo al otro lado, por lo que la alineación será final y la barra de navegación, apagaremos la opción fluida. Bien, bastante justo. Volvamos y veamos ahora lo que tenemos aquí es la transparencia del navbar. ¿ Está ahí, hay algunas transparencias ahí que el área de fondo es visible. Entonces vamos a hacer eso. Volvamos a saltar al estudio Bootstrap otra vez. Y así navbar, seleccionaré la barra de navegación. Vendré a imagen de fondo y esta de color amarillo podemos usarla. Ok. Éste o éste ambos el mismo movimiento. Esto es amarillo BS y esto es advertencia BS. De acuerdo, entonces usaremos este color amarillo. Voy a hacer clic en este selector de imágenes, ir a Select, y acabaré de reducir la transparencia a tal vez al 80%. A partir de ahora, no se puede ver nada porque no tenemos nada. Pero muy pronto podemos ver eso. Ok, entonces lo siguiente es que tenemos que crear esta área en particular. Entonces para eso lo que vamos a hacer, así que tomaremos un div. Tomaré este div está ahí ahora. Y dentro de este div tomaremos un contenedor. Y dentro de este contenedor, una fila vamos a tomar, y dentro de este tomaremos dos columnas. Esta columna y control D es duplicar eso. Tendremos dos columnas por aquí. Este div está ahí ahora. Y para este div, estaremos dando el mismo color de fondo que es amarillo. Y haré click en Seleccionar. Bien, bastante justo. Por lo que ahora en esta área particular de lo que somos, lo que queremos aquí es ir de lo tradicional a lo digital, y sólo vamos a copiar esto. También puede copiar el nombre de dominio es peck resultado dot en. Aquí. Tomaré un rumbo. Solo deja caer este rumbo por aquí y pega. Así que recuerda el atajo Control Shift V para pegarlo aquí todavía tenemos este tema. Vaya, vaya de lo tradicional a lo digital. Y sí, la fuente es diferente. Porque, por ahora, iremos con la misma fuente. Si lo desea, puede cambiarlo. Creo que ya sabes cómo cambiar la fuente. De no ser así, vuelva a los videos anteriores y vea cómo cambiar exactamente la fuente. Bien, bastante justo. Después de eso, ¿qué tenemos que tenemos un párrafo que dice que cada negocio necesita una presencia digital, por lo que estamos aquí para hacerlo posible. Tomemos un párrafo y frotemos este párrafo justo debajo de éste y pegarlo. Suficientemente justo, después de eso tenemos etiqueta de imagen de imagen. Justo debajo de éste, acabaremos de poner una etiqueta de imagen y hacer doble clic en casa. Esta imagen que queremos, acabo de seleccionar. Sí, eso es todo. La imagen está ahí ahora. Ahora tenemos algo de espacio de fondo a lo largo año y la barra navbar también tiene alguna sombra. Haremos eso. Y antes de eso sólo vamos a tomar una vista previa y les diré por qué exactamente estamos usando la sombra por aquí. Tenemos una razón por ahí y dos razones en realidad. Ya se puede ver ya que tenemos la transparencia 80% para la barra de navegación, por eso el color es claro y del mismo color que hemos usado aquí, y se ve muy oscuro. Éste parece que éste parece conductos. De hecho, ambos colores son iguales, sólo las diferencias. Esto es 80% de transparencia, es decir 0% de transparencia. Ahora no queremos mostrar esta diferenciación y queremos hacer un truco por aquí. Esa es la razón por la que estaremos agregando una sombra a esta barra de navegación. Por lo que seleccionaré esta barra de navegación. Voy a ir a Opciones, decoración, sombra, Regular. Ahora volveré a la vista previa. Ahora se puede ver que hay una sombra. Se puede ver que la sombra es más grande en comparación con ésta. Lo que hemos hecho allá es que hemos usado la gran sombra por ahí. Ahora se puede ver tenemos una gran sombra y después hemos utilizado algún margen superior a éste. Por lo que el margen top cinco. Suficiente justo. Y para éste hemos dado margen inferior cinco. Eso es todo. Ahora se puede ver tenemos espacio extra aquí y aquí también. Entonces si quieres ver en vista móvil, entonces solo podemos bajar por aquí y luego puedes ver hay scroll horizontal. Y ahora ya sabes cómo solucionarlo, no por consulta de medios. Sólo tenemos que hacer click en la respuesta. Tú. Eso es todo. Ya está hecho. Estaremos arreglando esto también. Así que nadie va a volver al tamaño de pantalla más grande, es decir LG. Creo que tu Excel extra grande. En esta área estaremos creando el formulario. ¿ Debo detener el video por aquí o debo continuar con esto? De acuerdo, vamos a continuar con esto. Vamos a completar esta sección y luego detendremos el video. Por otro lado, qué necesitamos 0s, necesitamos un formulario. Tomemos una granja. Sí, Antes de la forma, tenemos algunos textos como contactar ahora y obtener la mejor oferta del día. De acuerdo, así que copia este. Toma rumbo, el rumbo por aquí. Pegar, y este rubro será H4. Para este rubro también, tomaremos margen top cinco. Bien, bastante justo. Y luego tomaremos forma. Nosotros realizamos. Entonces tomaremos un div. Y dentro de este div, lo que tenemos, tenemos FullName, nombre comercial, etiqueta de campo no está ahí. Nos toman directamente entradas de texto. Entrada de texto. Tenemos su y vamos a poner esto aquí en esta entrada de texto. Lo que somos, qué es esto en realidad, este es un nombre comercial o nombre completo. Tu nombre completo. Esto es FullName. Entonces marcador de posición de nuevo, este será sólo nombre completo. Estado está deshabilitado o de sólo lectura. Todo debe ser eso y validación lo necesitamos, así que hazlo requerido. ¿ Y qué más queremos? Estos bordes deben ser bordes afilados y afilados. Simplemente etiquetaré a éste como nombre completo. Entonces necesitamos un margen, uno superior y margen inferior uno. Veamos. Uno, Uno es suficiente o no. Creo que el margen inferior debe ser 32 está bien. Doc en margen inferior dos es bueno para éste también margen inferior dos es bueno. Éste es nombre comercial, nombre comercial, copia, pega, nombre comercial otra vez, se requiere. Después de eso, qué necesitamos como ejemplo de tipo de negocio, escuela hotelera. Ok. Duplicado, tipo de negocio, copia. Y en el marcador de posición, daremos ejemplo Hotel. Genial. Entonces lo que tenemos, tenemos un selecto por aquí que dice, sí, mi negocio tiene GST. Yo soy ese es número GST y sé que mi negocio no tiene un GSD IN. Selecciona necesitamos así que solo duplicaré éste. Y dentro de esto eliminaré esto y escribiré select. Simplemente toma el selecto por aquí. Tenemos que cambiar el nombre de esto también. Entonces este es nombre comercial. Este es de tipo de negocio. Éste es el ion GSP. No necesitamos grupo. Sólo necesitamos 2. Primero 1 es sí, mi negocio tiene GSD IN y creo que seremos pequeños. Y el segundo será asunto mío. No tenga GSD EN el sí se seleccionará uno. Entonces lo que queremos es la dirección de correo electrónico, contacto, y en qué producto te interesa. De acuerdo, bien. Simplemente duplicaré esto un año. Ahora vamos a estar haciendo esto. Necesito este grupo de opciones primero, y me llevaré éste en la cima. El Grupo Option, lo nombraré como sitio web estático. Este será el sitio web de una página. Esta será como página web básica de cinco páginas. ¿ Cuál es la idea de este 13 loci? Por lo que este será valor será 14 y la etiqueta será multi. Sitio web, sitio WEB, el sitio web entre paréntesis, será más de cinco páginas. De acuerdo, Entonces esto viene bajo estática y ahora vamos a crear uno más. Esta será Option Group y la etiqueta será dinámica. Sitio web. Agregaremos éste. Por lo que éste será 15. Etiqueta será sitio web de comercio electrónico. Será sólo opción. El sello será LMS o Learning Management System. Esto será 16 y se pueden crear muchos más. Así que por ahora sólo me detendré aquí. Si vamos a la vista previa ahora se puede ver tenemos dos grupos. Entonces este es grupo estático y este dinámico. En static, tenemos sitio web de una página, sitio web básico de cinco y sitio web de varias páginas, que es más de cinco páginas en dinámica. Contamos con web de e-commerce, ciertos elementos, es sistema de gestión de aprendizaje. Puedes poner cualquier cosa por aquí en base a tu requerimiento. Puedes poner cualquier cosa después de eso. Lo que tenemos es como dirección de correo electrónico que queremos y número de contacto que queremos y luego queremos un mensaje, una dirección de correo electrónico. Por lo que tomaré esta entrada comercial, voy a duplicar esto. Y lo que voy a hacer, me llevaré este negocio y potente apenas bajaré por debajo de esto a GSD y simplemente etiquetaremos esto y lo nombraremos como interés. Este tipo de negocio será número de contacto. Este etiquetado no es sólo para nuestro entendimiento cuando vamos a exportar este proyecto completo. Ese tiempo también este etiquetado será muy importante porque hay opción en la etiqueta. Esto nos ayudará cuando exportamos el proyector. Cuando exportamos el proyecto, hay una opción llamada etiquetada convertir dos comandos. Cuando nosotros, cuando vamos a ver el núcleo después de la exportación, estas etiquetas se convertirán como un comentario sobre esa área en particular. Eso nos ayudará a entender qué es exactamente. Se trata de un uso del curso de desarrollador y al final del día es como en nosotros como queremos tomarlo. Después de GSD, lo que tenemos, vamos a ver. No después de GST dirección de correo electrónico y contacto, necesitamos eso. Ok. Esta área en particular será correo electrónico. Correo electrónico. Por lo que voy a tomar esto. Este es el número de contacto. Hemos dado el número de contacto de la etiqueta. Simplemente toma la entrada numérica sin flecha. Basta con soltar esta entrada numérica y seleccionaré esto, elimine esto. Se trata de una entrada de número como nuevos campos de entrada. Entonces tenemos que hacer las fronteras, frontera de edad, eso es bordes rectangulares. El titular del lugar será el número de teléfono. Aquí, será sólo número. Lo siguiente es el correo electrónico. Duplicar este. Etiquetarlo como control y solo escriba correo electrónico. Entrada de correo electrónico. Whoops. Esta entrada de correo electrónico o borra este rectángulo de decoración. Titular del arrendamiento será correo electrónico. Lo mismo por nombre. Después de éste necesitamos en esta área de texto. Y queremos este rectangular también, éste, y éste. ¿ De acuerdo? Entonces después de este interés, no necesitamos este año selecto. Necesitamos un área de texto. Esta zona de nuevo, rectángulo. Marcador de posición será lo que he escrito por ahí está su mensaje. Si algún mensaje, si el mensaje m será lo suficientemente pequeño. Veamos la validación ahora requerida, requerida, requerida. Requerido. Entonces este tono en esta dirección de correo electrónico requerida almacenada en la requerida. Entonces este tono sobre lo requerido, y éste será opcional como hemos escrito que si alguno, éste permanecerá como caso opcional. Y por último necesitamos un botón para someter eso. Así que el botón BTN, por lo que tu etiquetarlo como mensaje. Esto será como botón, PERO DON botón. Este botón. Tomémoslo como. Se enviará el tipo de botón. Esto será oscuro. Ahora, tengo pocas preguntas de los alumnos que ya están inscritos a la versión anterior del bootstrap Studio, han dicho que las opciones de botón han cambiado, que el Bloque opción no está ahí. Es cierto que en nuevo bootstrap, eso es Bootstrap F5. Ahora el botón no tiene la opción Bloquear. Lo que tenemos que hacer es que sólo tenemos que ir a la aparición. En ancho. Tenemos que teclear un 100%. Ahora va a funcionar como un bloque, pero Desafortunadamente esta opción de bloque no lo es, no lo eres. Ok. Después tenemos Declaración y después decoración rectangular. Y escribiremos su envío, su mensaje o lo que hemos escrito por ahí como enviar mensaje. Lynn. Enviar enviar mensaje. El borde está ahí ligera frontera, frontera blanca. Se me entregará a esa área en particular. Veamos la vista previa ahora cómo se ve exactamente. Vale, esto se ve bastante bien. Entonces esta forma es pequeña en anchura, y esta forma es muy grande en el área de ancho. Por lo que volveremos por aquí. Entonces veamos, esta es nuestra fila principal. Esta fila es de forma. Simplemente etiquetarlo como forma e invertir lo que haré hasta MD. Le daré un ancho de cuatro. Esta zona, la guardaré en auto, o tal vez ocho. Por lo que ocho más cuatro es 12. Por lo que esta área ya está hecha. Entonces lo que más hace el fin de semana es exhibir. Podemos aumentar un poco el tamaño de esta pantalla. A lo mejor un cuatro será una buena. Y para este párrafo encenderemos la opción lead. Lo que podemos hacer por esta imagen es como, vale, la mantendremos tal y como está. No vamos a hacer nada. Pero lo que podemos hacer es que podamos tomar este do, podemos tomar esta imagen, lo siento, podemos tomar esta imagen dentro de un div, así dentro de un div y este div, lo haremos centro de alineación. ¿ Qué pasará para esta imagen en particular? Vendrá en el centro de esa fila en particular, pero la alineación con este texto no estará ahí. Por eso se verá extraño. De acuerdo, Así que para eso simplemente lo eliminaremos nuevo fuera del div y eliminaremos este div. No necesitamos eso. Sí. Ok. Entonces, ¿esto se hace? Sí, esta área en particular se hace entonces ya sabes cómo hacer la forma como una forma inteligente. Veamos. Este tamaño de pantalla está bien. Md otra vez, creo que deberíamos cambiar el ancho a algas, por lo que las algas serán cuatro y ésta será de ocho. Tomemos este 12 completo. Y así aunque vamos a eliminar este formulario del año porque no queremos esto, estaremos agregando una consulta de medios aquí en esta área. Por lo que esta sección en particular es ahora diferente. Fuego, bastante justo. Así que vamos a encender el formulario, también. Forma inteligente. Así que solo enciende esto, selecciona el mensaje personalizado del destinatario. Si quieres algún mensaje personalizado, también puedes activar esto. Después de esto, donde quieras tomar este sitio web en particular, estaremos creando una nueva página llamada tras formulario. Presentar. Sólo estoy creando esta página en este momento. No vamos a hacer nada en esto sólo para tener eso en cuenta que tenemos que hacer eso, tenemos que crear esta página también. Entonces esa es la razón por la que estoy creando esto. Estoy creando esta página aquí. Posteriormente. Vamos a diseñar eso. Ahora esta página después de su envío, la página estará redireccionando a después del envío del formulario punto HTML. Empezaremos este video por aquí. Y en el siguiente video jugaremos con la consulta de medios. Flexbox y la consulta de medios siempre es un dolor, pero ahora no lo será. Así que nos vemos en el siguiente video, chicos. 33. Finalizar La Sección 1 De Apertura De La Página Principal Del Proyecto Dos: Bien, bienvenido de nuevo. En este video. Y en este video, como te dije, vamos a entender acerca de la consulta de medios y flexbox sin perder el tiempo. Empecemos esta forma particular que queremos. No queremos en el tamaño de pantalla pequeña, estaremos tomando esta forma en el modelo. Hasta LG. Esto es bastante bueno. Y cuando llega a MD, eso es dispositivo medio, las formas bajan y esta área en particular permanece aquí. Pero queremos eso de MD. Cuando no es este tamaño de pantalla en particular que no es laptop y arriba, esto se verá bien. Esta alineación, esa alineación izquierda está ahí. Bien, bastante justo. Pero cuando está en MD y por debajo, el debe venir en una alineación central. Entonces, para eso, ¿qué tenemos que hacer? Que te voy a decir que esta cosa en particular vamos a hacer sin consulta de medios, estaremos usando completamente las opciones Flexbox dentro de este bot para ocultar esta forma y para que sea hacer el botón visible por aquí. Para ello, estaremos utilizando la consulta de medios. En primer lugar, estaremos haciendo flexbox, después pasaremos a la consulta de medios desde este dispositivo es LGN arriba. Yo no he sido estas opciones particulares por aquí. Lo que voy a hacer, seleccionaré esta columna y vendré a la opción Flexbox. Vale, entonces esta es la opción flexbox. Si no ves todas estas cosas, solo tienes que hacer click en esta flecha de aquí. En la opción Flexbox tienes estos botones ya que ya aprendimos los conceptos básicos de Flexbox. Entonces ahora lo que vamos a hacer, hemos seleccionado este tamaño de dispositivo en particular, es decir LG. Y en este tamaño de dispositivo, lo que queremos es se quede la alineación con solo click a la izquierda. No, no te preocupes, todas estas cosas van a pasar. Esta voluntad, estas cosas se van a estropear. Pero sólo da clic a la izquierda. Y ahora en direcciones, simplemente haga clic aquí y haga clic en columna. Ahora esta columna en particular se deja alineada desde LG y por encima de tamaños de pantalla. Por lo que se puede ver que esto está correctamente alineado. Pero lo que pasa ver tan pronto como convertimos la dirección a columna, la alineación ha llegado a la predeterminada. Ahora, de nuevo, tenemos que hacer click sobre esta columna y ¿qué pasará? Ver ahora la imagen se expande. Ahora estás, también eres, puedes ver que la imagen tiene el tamaño de la imagen ha aumentado. Ahora, basta con dar click sobre este sobrante y listo. Todo está restablecido ahora, la alineación izquierda está ahí. Y en el tamaño de pantalla anterior también la alineación permanecerá a la izquierda. Ahora, lo que queremos es como de este tamaño de pantalla extra pequeño todavía MD obviamente no, no podemos hacer nada a este LG. Ahora queremos hacer hasta MD ahora, estaremos seleccionando este tamaño de pantalla express, tamaño pantalla extra pequeño. Y aquí lo que voy a hacer, voy a hacer click en centro. Ese es el elemento central y la dirección quedará para llamarlos sólo se puede ver la imagen no está centrada, alinear. Este tamaño de pantalla esencia. Ahora se puede ver que hay una línea central en MD. Ahora está alineado en el centro y en cuanto se va a LG hoy en día, alinear a la izquierda. Es así como vamos a mantener este diseño en particular. Ahora, cómo funciona exactamente es como una séptima por encima de la píldora MD, no hay comando, pero desde LG, el nuevo comando está ahí. Del exceso, eso es extra pequeño hasta MD. Tomará el elemento central y desde LG y arriba tomará la alineación izquierda. De acuerdo, Así es como va a caminar el flexbox por aquí. Eso es todo. realiza Flexbox para esta área en particular. Ahora estaremos jugando con la consulta de medios. De acuerdo, entonces ahora nos vamos a ir hacia la consulta de medios. Entonces volviendo al Bootstrap Studio ahora, lo que queremos, lo que queremos aquí es después de este tamaño de pantalla MD, no queremos este formulario o quieres que el formulario se convierta dentro de un modelo. Y el botón de lanzamiento del modelo estará aquí, justo debajo de esta imagen. Por lo que vamos a tomar el botón primero. Tomaré el botón. Y voy a nombrar este botón como ¿cuál es el nombre del botón de ahí? En pequeña escala, habla de tu negocio. Por lo que nos dicen nuestro negocio. Cuéntanos de tu negocio. Este botón será su rectángulo. Pequeño borde blanco. El estilo será oscuro. Sí, eso es todo por ahora y tal vez el tamaño sea grande. Haremos las tallas de gran tamaño. Aquí también es de gran tamaño. Y tú también eres será de gran tamaño solamente. Volviendo al estudio bootstrap. Ahora. Ahora lo que vamos a hacer, primero crearemos un modelo. Entonces estaremos utilizando la consulta de medios para ocultar todo esto. Voy a tomar un modelo sobre su modelo, y voy a tomar este modelo, dejarlo caer dentro de esta etiqueta de modelo de cuerpo es el modelo dash uno. Simplemente haga clic en Mostrar OU. Por lo que el modelo vendrá acaba de quitar éste y la forma que está ahí, simplemente duplicaré este formulario. Y pondré esta forma duplicada dentro de este cuerpo modelo. Ahora esto está ahí y este pie de página modal, eliminaré este encabezado. No lo creo. este encabezado o simplemente escribiremos. Cuéntanos de tu negocio. El botón cruzado está ahí. Donde debe venir el modelo. Debe venir el modelo. Tamaño predeterminado de pantalla completa. De acuerdo, no se requiere pantalla completa. Pergamino vertical, encenderemos desplazable. No lo creo. No hay mucha información para que sea desplazable. Sí, vamos a mantener esta forma tal y como es ahora. Tomemos la forma es smartphone o no. Sí, esta es una forma inteligente. Ahora sólo voy a hacer clic en ocultar este modelo. Ahora, queremos activar este botón en particular a que se cambien modelos o objetivo. Por lo que vamos a jugar con este objetivo ahora. El selector es ahora modelo. tipo II es el modelo de objetivo tan alterado. Hecho. Eso es todo. Entonces volviendo a esta área, y voy a hacer clic en este botón. Ahora viene el modelo en esta versión. Por lo que sacar el modelo es muy fácil al usar esas opciones de destino en las opciones spandrels. Sí, se hace ahora, este botón nos gustaría sólo en esta área en particular cuando el tamaño de la pantalla sea MD y por debajo. Y cuando el tamaño de la pantalla será MDM a continuación, esta área en particular no estará ahí. Por lo que el botón no debe parecer que está tocando la parte inferior de esta columna en particular. Daremos un margen inferior al botón también. Por lo que el margen inferior tres estará bien por ahora. Si lo necesitamos, podemos hacerlo más también. El modelo se hace ahora. Ahora vamos a jugar con la consulta de medios. Estilos, archivo CSS nuevo estilo. Y CSS personalizado estará ahí. Haga doble clic en este CSS personalizado. Simplemente haz clic en Crear y estaré escribiendo tu vista de escritorio de punto. Mostrará una vista móvil de puntos más. Mostrar, ninguno. En vista de escritorio. Quiero esto, pero en vista móvil no quiero. Entonces, lo que voy a hacer, tomaré esta pantalla de visualización de escritorio ninguna opción es visualización de escritorio pantalla none. Entonces vamos a tomar esta clase por aquí. Y ahora se ha ido. Simplemente seleccionaré este medio, este MD por aquí, llegando a estos tres puntos y agregaré consulta de medios anchura mínima 765. Si voy arriba, se puede ver que no tenemos eso. El motivo detrás de eso es el ancho mínimo 7068. Usa esta pantalla desde esta y por encima de este CSS se aplicará. El ancho mínimo es este. Por lo que sólo lo haremos como máximo. Este y el tamaño máximo de la pantalla. Queremos esto. Así es como vamos a estar haciendo esto. Para este botón en particular. Toma la vista móvil uno, cópialo, pega aquí, y simplemente enciende esta consulta de medios. Ahora lo que vamos a hacer ahora esto es 7068. Haremos que sea 7671 pixel shot. Queremos en este tamaño de pantalla, ¿verdad? Entonces esto es 992991992. ¿ De acuerdo? Sí. Ahora está funcionando bien. Este tamaño de pantalla, lo tenemos en cuanto vayamos al tamaño de la pantalla móvil, entonces este modelo estará ahí. Esto tenemos lo suficientemente justo. Consulta de medios y flexbox se hace para esta área en particular, y esta área en particular está completamente lista. Ahora, sólo guarda el archivo. Estaré guardando este expediente. En resultado, solo voy a crear una carpeta por aquí. Por lo que será bajo scroll VSS. Y ahorre. Este archivo está guardado ahora, Así que sí, eso es todo, eso es todo por este video. En el siguiente video, lo que vamos a hacer, vamos a empezar a crear esta área en particular. Y esto es muy fácil. Solo queremos tomar una fila de contenedores, encabezado de columna y pocas opciones por aquí. Entonces tenemos esta imagen ya ahí. Esta es una imagen GIF. Y luego crearemos Mostrar Más Detalles. Botón por aquí, que será redireccionando a la otra página. Lo mismo sucederá para éste y éste también. Creo que en el siguiente video estaremos cubriendo toda la factura de secciones en un solo video. Suficiente justo. Así que nos vemos en el siguiente video, chicos. Adiós. 34. Finalización De La Página Principal Del Proyecto Dos: De acuerdo, entonces vamos a empezar la siguiente sección, que es esta área en particular. Entonces saltando de nuevo al estudio bootstrap y en este tamaño de pantalla en particular, lo que vamos a hacer E es simplemente vamos a tomar un contenedor y dejarlo caer en esta etiqueta de cuerpo. Selecciona este contenedor. Tenemos el contenedor por aquí ahora, solo toma una fila, selecciona la fila instituciones que tenemos columna, y de nuevo una columna más. Entonces creo que vamos a dar 646 por esto hasta el lunes. Será así, y después de eso vendrá justo debajo del otro. Empecemos a hacer eso. Lo primero que necesitamos un rumbo. Encabezado tomaré, también me confundo entre rumbo y encabezado. Ahora a veces cuando no prestamos atención en esto, lectura está aquí, así que solo tomaremos el rumbo por aquí. El rubro es este. Todo su negocio necesita bajo un mismo techo. A la altura de sumar, tomaré pegarlo más de $1.9, 9029. ¿ Qué podemos hacer después de esto? Tenemos este párrafo y luego tenemos estos párrafos también. Decolonial no quiere tecnología clave. Dentro de esta columna solamente. Esto será será resultado da. Hagámoslo IID. ¿ Qué resultado tecnológico? Sitio web estático. Hagamos una cosa. Simplemente copiaré todas estas cosas y acabaré de hacer este video Fast-forward desde static y todo el icono B12 abajo por ahí, ese ícono de tick. Tomaré un ícono por aquí. Este icono comprobará en este 1 primero porque éste es un nuevo conjunto de iconos, ¿ verdad? Cheque está ahí. Entonces revisa dos vamos a estar usando, podemos usar éste también. Esto de nuevo, lo haré en rápido avance. haremos, no quiero perder su tiempo en este set. Por lo que hemos tomado un ícono diferente, diferente en comparación con éste. Y tenemos un botón tras año, por lo que tomaremos un botón también su botón btn. Lo que ves es como ver más detalles. Veremos más detalles. Selecciona el botón y estilo rectangular será de advertencia. Vamos a resolver. Este botón no será un botón, será un enlace. Apenas pon una clave hash o más tarde cambiaremos el enlace de eso. Después de eso, lo que necesitamos, necesitamos esta imagen, esa imagen GIF. Tomaré etiqueta de imagen, voy a caer en quien esta imagen queremos usar. Entonces escogeremos esta imagen directamente. Haga clic en responsive. Quiero que esto venga en el centro horizontal y vertical. Entonces yendo a este tamaño de pantalla muy pequeño, se accede. Y voy a ir a Flexbox, comprobar tanto estas opciones como columna esta V de esto, estoy haciendo esto en el tamaño de pantalla porque a partir de esto y arriba va a tener efecto, ¿verdad? Por lo que está afectando todo el tamaño de la pantalla. ¿ Qué pasó? Lo siento, lo siento, lo siento. Yo aplico, estaba aplicando sobre esta imagen. Me equivoco. No puedo aplicar en esta imagen Quiero subir esta columna, seleccionaré ésta y el tamaño de pantalla más pequeño en realidad. Y ambas opciones, como este es un centro vertical. Este es el centro horizontal y este es el centro vertical. Ahora puedo ver como no es el Sentinel. Sí. Ahí vamos. Ahora lo que podemos hacer es que tenemos dos colores diferentes por aquí. Selecciona este contenedor. Creo que uso. Entonces, tantas veces alguien me dijo que moderara el uso de sal porque lo estoy usando, tantas veces y a veces es molesto. Creo que alguien me lo dijo sólo en este curso, voy a tratar de hacer eso. Creo que ese es mi hábito, No, No hay problema. Supongo que uso em margen top cinco. Veamos. Sí, ya está hecho. Para la siguiente sección para esta área en particular, lo que vamos a hacer, sólo vamos a duplicar esta área y vamos a voltear a ambos. Lo que voy a hacer, solo duplicaré esto. Y entrando dentro de esta fila, solo tomaré esta columna y simplemente la mantendré por encima de esa columna. Eso es todo. Nada más que hacer. Entonces lo que queremos es éste, copiar, seleccionar, Pegar. Y ahora esta vez serán 29 $9. Sitio web de comercio electrónico. Queremos hacer tantas cosas en esa dinámica. Lo mismo. Ahora este es un sitio web dinámico. Aviso estático a un lado con panel de administración. Entonces por el resto de las cosas que está diciendo, creo, sí, vamos a parar las cosas que parecen bajar a la siguiente sección. Nuevamente, duplica este contenedor, vuelve a esta fila y simplemente da la vuelta a los lados. Esto está clavado rupias EMS 20. Simplemente cambie éste también. Entonces todas las cosas están dentro de uno. Sí. 29, $9 en realidad, ¿cuál es el costo de 20 rupias en dólares? Usd. Inr, son 20 rupias en $0.27, ¿de acuerdo? Será como 0.27 estudiante al mes. Será incluyendo GSD. Nuevamente, utilicé la escuela o la escuela al año. Y ahora tenemos que copiar esta opción. De nuevo, lo que voy a hacer, solo lo haré avanzar rápido. No quiero perder el tiempo. Una vez hecha la copia, comenzaremos. Esta área también está hecha y nos vamos a trasladar a la siguiente sección que sabemos lo que necesitas para tu negocio. Te daremos una solución de negocio completa con socios de solución de testigos de confianza mundial. Quién para eso, lo que queremos hacer eq div, porque esta imagen está completa, age to age to age div es lo que vamos a utilizar para ese div. Tomaremos margen top cinco. Dentro de este div, tomaremos rumbo. Después de encabezar, tomaremos un párrafo. Este será encabezado alineado en el centro que vamos a utilizar es éste. Entonces copia esto y dentro de este encabezado, pega este párrafo, estaremos usando esta copia. Y en Bootstrap studio, pega esto por aquí. Después de eso tenemos una imagen, luego esta imagen, suéltala dentro de este div. Haga doble clic en casa. Creo que esta es la imagen, ¿verdad? Sí, éste es la imagen y da click en. Ok. Veamos la vista previa. Eso se ve bastante bien. Pero creo que sí, le hemos dado un color de fondo. Lo que queremos hacer. Creo que tenemos que tomar uno más en el interior de eso. Y antes de eso queremos que sea imagen receptiva. Tomaremos un div dentro de ese div, y cambiaremos esa imagen dentro de ese div. Volviendo a la apariencia, color de fondo, y le daremos un color de fondo oscuro. Éste es punto. A lo mejor esta imagen está ahí. Hemos dado un bonito fondo oscuro y vamos a dar un margen. Arriba, un poco como el margen top dos estará bien. Creo. Tal vez tres. Margen, los tres primeros es lo suficientemente bueno. Después de eso, tenemos esta área. Que podemos volver a copiar este contenedor, traer esto debajo de esa vista o como tomemos eso, hagamos al respecto. Ahora dentro de esta columna, este rubro, queremos un párrafo, queremos que eso sea todo un encabezado, un párrafo reinvertir todo lo que vamos a quitar, incluyendo este botón. Voy a sólo $0. Línea central, GSP registrado oreja comercial. No quiero que este sea un párrafo normal. Ahora para esta columna quiero vertical y centro. Centro vertical y horizontal. Entonces viniendo a flexbox ambos, oh lo siento, acabaré de restablecer esto una vez que llegaré al tamaño de pantalla más bajo. Éste, éste y columna, Eso es todo. Ahora eso es incentivo, absolutamente centro y estas opciones están ahí. Tenemos que poner esa opción. Entonces creo que cometimos un error al eliminar esas opciones. Sólo ven aquí. Selecciona todo esto. Si aún necesitamos ese botón, incluido ese botón, voy a copiar o puedes tomarlo así, copia dentro de esta columna. Ahora, haga clic derecho, pegue, pegue dentro. Eso se hace. Refresca éste. No refrescado. Restablecer. De vuelta a esto. No queremos este. Este también. Dirección de contactos. De nuevo, lo que voy a hacer, simplemente vamos a avanzar rápidamente esto. Eso es todo. Veamos ahora la vista previa. Luciendo bien, absolutamente fino y fantástico. Y ahora queremos esta área en particular por aquí. Es muy fácil. Lo que podemos hacer, creo que ya lo adivinaste. Tomaremos un div. Y dentro de ese div, tomaré una imagen, imagen de anuncio, imagen. Esta imagen que acabo de sumar sobre su posición se centrará , se cubrirá el tamaño, y repetir será no. Eso es todo. Entonces tomaremos un rumbo. Creo que es un rumbo, rumbo y un botón. Un rumbo. Un botón. Línea central para encabezamiento, margen top cinco. Hagamos una cosa. Simplemente seleccione este div. Acollado, relleno, parte superior, relleno, inferior cinco. Eso es todo. Margen superior. Ese será un buen número. Margen top four. Sí. Bueno. ¿ Qué está escrito dentro de eso? Vamos a hacer crecer su negocio juntos. Esto nos contacta. Póngase en contacto con nosotros. Este cambio al calentamiento, decoración, rectángulo. Eso es todo lo suficientemente chicos para que tengamos pie de página, pie de página, simplemente pondremos un pie de página básico. Pie de página voy a tomar caeré sobre este cuerpo, tomaré este pie de página oscuro o tal vez este alimento básico. Ahora los resultados del pie oscuro son buenos para ir porque no vamos a hacer ningún cambio en que vamos a hacer lo va a mantener tal como está. Así que el pie de página oscuro estará ahí. Y este div creo que no quiero quiero que algunos no fueran algún espacio entre estas áreas. Seleccionaré este div, le dará un margen inferior cuatro también. Eso es todo. Esta área en particular ustedes son ahora, ustedes pueden ahora hacer este servicio sobre el nombre de la empresa, todas las cosas que pueden cambiar y lo pueden hacer. ¿ Qué quieres hacer? De esta manera, creo que lo hemos hecho con nuestra página web primera página. En los próximos videos, estaremos haciendo las próximas páginas de la página web. Veamos qué podemos hacer. Creo que el resto de la página seguirá siendo igual. Pero de nuevo, esta solución de negocio, tenemos que usar esta animación GIF. Es muy fácil. Y lo mismo vamos a repetir año también. Entonces lo que vamos a hacer, como tenemos clientes entonces sí, la animación, vamos a estar usando animación, ya sabes esto luego contáctanos. Contáctanos, estaremos ahí. Sí. Ahora la mesa de ayuda será la nueva que vamos a hacer entonces las integraciones de chat en vivo estarán ahí, que vamos a ver. Eso es, eso es todo por este video. Y en el siguiente video veremos algo nuevo. No sé qué, pero sí, vamos a ver algo nuevo en el próximo video. Nos vemos en el siguiente video, chicos. 35. Diseño De Solución De Negocio Y Contáctenos Página 1 Del Proyecto Dos: Así que bienvenidos de vuelta chicos. En este video, estaremos diseñando página de soluciones empresariales. Empecemos. Vamos a crear una nueva página por aquí. Lo llamaremos como solución empresarial. De acuerdo, solución de negocios. Y sólo voy a hacer doble clic en eso. Empecemos tomando nuestro div por aquí. Tomaré un div, así que tendremos una mano libre sobre eso. Y tomaremos la imagen y solo dejaremos caer esa imagen dentro de este doble clic, ir a VS, eso es solución empresarial y descubriremos imágenes ahí estaremos usando esta imagen de portada y seleccionamos, Ok, Solo encienda la capacidad de respuesta de esta imagen particular. Selecciona este div y haz que este centro se alinea. Entonces veamos la vista previa. Entonces tenemos esta imagen o qué tenemos por aquí? No vamos a hacer esto porque este componente en particular está en jumbotron. Y en Bootstrap F5, se elimina el Jumbotron. Ahora, Jumbotron ya no está ahí en Bootstrap. Por lo que cambiaremos un poco el diseño. De esta manera. ¿ Qué pasará? Se puede ver la imagen es año, sea cual sea la imagen que esté ahí, esto está completamente pixelizado. Se puede ver que los bordes no son suaves de las imágenes, pero el ADSR todo es suave y dulce. Bien, bastante justo. Entonces avanzando, así que lo que vamos a hacer ahora la imagen está en línea central. Vamos a agregarle un poco de relleno. A lo mejor voy a poner un relleno completo de dos. Después de eso, ¿qué tenemos? Tenemos algunos componentes. Sé muy bien ahora puedes hacer este diseño particular. Es muy fácil para ti ahora. Aún así voy a hacer alguna parte de eso. Entonces tomaremos un contenedor, solo déjalo caer dentro de la etiqueta del cuerpo. Este contenedor está ahí. Entonces fila que tomaré, seleccionaré la fila, toma la columna y duplicarla, ve a Opciones. Todavía MD, que sea seis, luego agregue el tamaño de pantalla más pequeño. Lo mismo le pasará a éste también la segunda columna. Ahí vamos. Después de eso. En esta columna particular tomaremos una imagen. Entonces imagen que acabo de poner la primera imagen serán las primeras imágenes. Sabemos lo que necesitas para tu negocio. Entonces esta imagen es su paseo de oficina. Y haz que esto responda. Ese Sol, y en esta primera cosa vamos a estar agregando, luego tenemos algunas fotografías que tenemos algún párrafo. Y este párrafo será y como de costumbre, aceleraré este video. Entonces el ícono está ahí. Nuevamente. Tomaremos este ícono, haz doble clic en éste. ¿ Y cuál era el nombre de ese ícono? Éste. Cambia algo para la página Solución Empresarial. Duplica este arrastrar y soltar dentro de esta etiqueta. Mira si no puedes hacerlo desde aquí directamente. Ahora, digamos que dupliqué esto y lo llevé aquí y lo puse por aquí. Esta cosa, si no eres capaz de hacer, lo que puedes hacer aquí es simplemente duplicar este ícono aquí, sin problemas. Es yo coordino, lo dejo caer dentro de esta etiqueta de párrafo. Eso es todo. Entonces ahora puedes moverlo de este año en año. Entonces hay que poner un espacio por ahí, el atajo de teclado para duplicar Control D. Para duplicar Control D es el atajo de teclado para duplicado, y de lo contrario puedes duplicarlo desde aquí. Sólo quería borrar este ícono. Ahí vamos. Por lo que se hace esta área en particular. Lo mismo que vamos a hacer. Apenas vamos a tomar este contenedor, contenedor completo. Y antes de eso agregaremos algún margen inferior cuatro a esto. Duplicar esto. En la duplicación simplemente barajará esta fila, columna. Cambiaré la imagen. ¿ Cuál es la siguiente imagen? ¿ Inscripción? Lo que voy a hacer, no voy a cambiar toda esta información ahora. Simplemente lo guardaré como es porque ustedes saben qué hacer. Lo que puedes hacer desde tu lado es como simplemente visitar tech result dot n, luego ir a soluciones empresariales. Entonces solo puedes copiar y pegar toda la información de ti. Sí, bastante justo. Ahora, éste, lo barajaremos otra vez. De esta manera estaremos haciendo todas estas cosas. Entonces esta imagen, voy a tomar esta va o algo así. Y al final vamos a sumar un pie de página por aquí, ese pie de página, y lo haremos al final pie en navbar, lo haremos al final. Después de eso. Lo que tenemos por aquí es la siguiente página. Nosotros, ¿qué queremos diseñar? A es Contáctenos página. Crea una nueva página ahora. Y vamos a nombrarlo como contacto. Vamos dentro de esa página de contacto. Nuevamente, tomaremos una imagen dentro de ese div. Basta con hacer doble clic en la imagen de pila. Creo que sólo hay una imagen. Sí, una imagen y haga clic en, Ok, Sólo para que responda. Entonces como de costumbre, tomaremos un contenedor. Así es como funciona. Hay una así que una vez que se llega a saber qué hacer y qué no hacer, las cosas se repiten una y otra vez. Sólo hay unas cuantas cosas nuevas que se interponen. Todo es CMC como yo cogí el contenedor y tomé la fila. Ahora, quiero tres secciones diferentes, así que voy a tomar tres columnas por aquí. En la primera columna, veamos qué hay ahí. En la primera columna tenemos contacta con nosotros, siéntete libre de contactarnos, pincha o tocar el número y todas estas cosas, luego horas de trabajo y soltar un mensaje el mismo formulario que está ahí en el homepage. Sólo una cosa nueva es que tenemos un botón por aquí. En realidad, esto no es algo nuevo. Una vez que haga clic en este botón, será redirigido. Fue así, ¿quién nos ayudó? Y que vamos a ver en este apartado en particular solamente. Vamos a crear este contacto con nosotros vamos a estar creando ahora. Tomaré un rumbo. Sólo base este rumbo por allá. Y encabezamiento de párrafo, sólo lo haré tres algo párrafo H3O será éste. Whoops, no dude en contactarnos. Entonces tu triple clic y selecciona toda la línea. Esto pasa como 34 líneas viene extra. Este es el número. De nuevo, lo que puedes hacer es que puedas tomar un enlace. Esto lo hicimos en nuestro proyecto anterior, eso es un proyecto de página web de una sola página. Vamos a tomar encabezamiento inserta este enlace, solo dejo caer todos ustedes. Quitar este enlace. Seleccionaré este enlace, vendré al panel de atributos. Y vamos a hacer una clase de decoración de texto, ninguno y fijo oscuro. Esta cosa que hemos dado a ese enlace. Ahora sólo vamos a escribir un número menor a nueve, cuál es el código de país. Después ingresaremos un número. Simplemente reduzca este tamaño. Pondrá icono dentro de este enlace solamente. Ven dentro del rumbo. Arriba calendarios que está lleno. Creo. Seleccionamos este enlace y escribiré colon. Colon, va a escribir el, um, pero ya sabes cómo funciona exactamente, ¿verdad? Entonces tomaremos un botón, caeremos este botón, insertaremos esta columna, lo lanzaremos. Nuevamente. Tomaremos nuestro ícono. Suéltalo dentro de este botón. Un espacio. Este ícono será apoyo. Vamos a afirmar esta fuente impresionante para el apoyo. Corregido más afortunado. Cambia el color a la mañana. Y eso es todo lo que hemos escrito aquí es hit desk. Como no tenemos el bloque año opcional, ¿quién irá a Apariencia? Lo haremos un porcentaje. También. Ir a decoraciones y opciones, decoraciones y rectángulo. Este es un enlace, en realidad va a convertir esto a link. Y por ahora solo pondremos una llave hash por aquí. Entonces cuando hagamos nuestro puntero más, vendrá así. Bien, bastante justo. Volviendo a bootstrap studio, vamos a darle un margen, cinco primeros a esto. Por lo que tendremos un espacio extra y contáctanos. Volveré a H12. Sí, ahí vamos. Ahora tenemos esta sección. Avanzando a la siguiente sección, estaremos creando esto trabajando nuestro. Y como ya lo adivinaste, esto también es muy sencillo. Simplemente duplicaré este ambos y lo dejaré caer por aquí. Y teclearemos las horas de trabajo. Eso es todo. Horas de trabajo. Entonces lunes, martes, miércoles queremos esta forma en particular. Tenemos dos opciones. Podemos volver a tomar una fila y hacerlo fila estructura de columna. O podemos tomar una mesa por aquí. Solo deja caer una mesa por aquí. Simplemente borra estas cosas rumbo. Entonces empezaré a escribir los días. Tomemos el momento. Simplemente copiaré este cronometraje desde y comenzaré a pegar. Esto no será nada. El tiempo del sábado es bastante diferente. No trabajes los sábados. Este va a estar cambiando el color del texto a esta festividad. En esta sección se hace. Y ahora para esta sección queremos de nuevo esa forma. Así que voy a ir a indexar. Seleccionaré esta alguna área. Tomaré este formulario, copia, copia, y contactaré con nosotros. Seleccione con el botón derecho. En el interior. Esto lo ha hecho. Y toda la información como forma inteligente y todo lo que las cosas ya están ahí. Eso es todo lo que pienso. Por lo que se hace. Queremos que sea respuesta móvil que realmente vaya al ancho es las columnas, una columna, dos columnas, y el tercer auto. ¿ Cuál es la pantalla dice que esto es LG. Lg será para, para, para, para todos para todos en MD. No lo pienses. Se ve bien. Desde MD y todo se completará hasta bien rejillas. Y vamos a dar el margen inferior a todas las columnas. Selecciona ambas columnas y luego solo escribiremos margen inferior cuatro. Tenemos un espacio entre todas las columnas por ahí. Eso es todo. Estamos listos con éste también contacta con nosotros página también se hace. Aparte de eso, lo que tenemos, póngase en contacto con casa. Nuestro cliente. A ver podemos hacer eso muy sencillo. También. En el siguiente video, lo que vamos a hacer, veremos con respecto a la OSI. En el siguiente video, diseñaremos OC. Oc es nuestro discurso cliente. Ok chicos, Gracias por ver este video y nos vemos en el siguiente video. 36. Diseñando OC Del Proyecto Dos: Bienvenidos de vuelta chicos. En este video, diseñaremos nuestra página OCI, ese es nuestro pitch de clientes. Vamos a crear una nueva página por aquí y la nombraremos como OC. Irá a esa página aquí. Lo que haré primero, me llevaré un div. Y dentro de este div, o tal vez antes de eso seleccionaré este div primero y le daré una altura fija de 300 pixeles. Esta es una altura fija de 300 píxeles a ese div. Y ahora me desplazaré hacia abajo al fondo. Y en eso solo voy a hacer click en Agregar Imagen. En la primera, la primera opción que es URL, haré clic en este icono Agregar por aquí, iré a la carpeta OC. Seleccionaré esta imagen y haré click en. Ok. Entonces en cuanto hago click en, Ok, Como tenemos una altura al div, esa imagen está ahora dentro del div. Ahora vamos a hacer algunos cambios en el tamaño de la posición y sección Repetir. Entonces posicion lo mantendremos como tamaño central, lo mantendremos como tapadera. Repetir. Lo mantendremos como ninguna repetición porque no queremos que esa imagen se repita si el tamaño de la pantalla está cambiando y el borde de la imagen está ahí. Y después de eso, esa edad, la imagen volverá a repetirse. Si veo en los diferentes tamaños de pantalla, se ve bastante bien. Se ajusta automáticamente eso. El hacer ajustar automáticamente la imagen dentro de eso y da la salida adecuada. De acuerdo, así que éste está hecho. Y lo mismo que podemos hacer a la página Business Solution también, que hemos hecho por aquí. Entonces lo que puedo hacer es en lugar de poner la imagen dentro de este div, simplemente eliminaré este div de aquí. Seleccionaré este div y le daré una altura fija a ese div indicando como 300 píxeles. Desplazarse hacia abajo y haremos clic en Agregar imagen. Haga clic en este signo más. Y voy a ir a este BSS, lo siento, carpeta BS, y esta es nuestra portada GIF, seleccionaré eso y luego haga clic en, Ok. Entonces lo que puedo hacer es que solo seleccionaré la posición a centrar luego el tamaño a cubrir. Y no se repite. La repetición no será repetida. Y selecciona este div. Vendré al panel de atributos y acabaré poner el margen inferior tres, y eso es todo. Tal vez el margen inferior cuatro sea bueno. Eso es todo. Se trata de una v diferente de mantener nuestros elementos dentro de un do. Y si vemos nuestro preestreno, si veo nuestro adelanto, acabaré de tomar este año. Se ve así. Ahora si se quiere aumentar la altura de esta zona en particular, podemos hacerlo también. Simplemente minimizaré eso y eso es todo. Entonces volveré a nuestra carpeta OCI por aquí. Y ahora vamos a empezar el resto de la porción, que es, creo que es muy simple, pero lo tomaremos muy rápido. Por lo que tomaremos un contenedor, seleccionaremos el contenedor y atributo que será margen de cuatro será bueno. Y entonces solo tomaré un rumbo. Pondré el rumbo por aquí. Simplemente escribiré cliente feliz o tal vez clientes. Y luego tomaré una fila por aquí dentro de este un contenedor. Nuevamente, su margen, margen superior de cuatro a ese contenedor. Ahora dentro de este contenedor, tomaré una columna. Como de costumbre. Dentro de esta columna, tomaré una tarjeta. La tarjeta está ahí, y no necesito este otro texto por aquí subtítulo. A lo mejor puedo usar ese subtítulo. Y ahora si voy a la imagen, tomaré esta imagen y pondré justo por encima del cuerpo de la tarjeta. Vendrá aquí. Eres lo que podemos poner es como el nombre del cliente o empresa y el negocio. Bien, bastante justo. A partir de ahora, tomaré una imagen aleatoria por aquí. Tal vez éste esté bien. A partir de ahora, este será un logotipo de la empresa. Entonces simplemente lo duplicaré un par de veces. A lo mejor cuatro es bueno. Veamos la vista previa. Bien, esto es bastante bueno. Y luego cuatro es bueno. Significa que tenemos que tomarlo de una manera donde cuatro grilla por cada columna. Entonces estoy seleccionando las cuatro columnas a la vez. haré, lo que haré, lo que he hecho es seleccionar el primero y tomaré mi punto más del último, sostenga la tecla Mayús en el teclado y haga clic en eso. Entonces todas las cuatro patas se seleccionan entonces en el ancho. Entonces esto qué tamaño de pantalla es, es LG para LGA lo dará como cuatro o lo siento, no, no lleno como tres. Entonces para MD lo daré como seis, como viene absolutamente a MD. Será matriz de dos por dos. Y en el tamaño de pantalla inferior será herramienta completa. Ahora este cálculo particular se ha aplicado a las cuatro columnas. Y se ve bastante bonito. Y de la misma manera seleccionando las cuatro columnas al mismo tiempo. Y abriré todas las columnas aquí una por una. Seleccionaré tarjeta. Así que solo mantendré la tecla Control en mi teclado y uno por uno, seleccionaré todas las tarjetas. Y luego lo haré, en el panel Opciones, buscaré decoración. Aquí hay una declaración. Las sombras, pondré una pequeña sombra por ahí. Entonces veamos la vista previa. Y se puede ver la pequeña sombra está ahí. A lo mejor no se ve tan hermoso. Entonces tomemos una sombra regular. Ahora es como si, Ahora la sombra se aplica correctamente por aquí. Y ahora entrando en el panel de animaciones y en el efecto hover, vamos a crear lo que sintió que podemos dar. Éste es bueno. Sí, es bastante bueno. Entonces, cómo se verá exactamente cada vez que un puntero del ratón venga encima de eso, se colocará así. ¿ Suficiente justo? Y digamos que si quieres, como si no exactamente, eres como alguien quiere, cualquiera que quiera una característica como esta es una empresa, ¿verdad? Por lo que necesitan un enlace por aquí en adelante, de tal manera como cualquier cliente. Si hacen click en ese enlace, serán redirigidos a la página web de esa empresa. De acuerdo, entonces, ¿cómo podríamos hacer eso? Entonces en esta columna, tomaremos un enlace. Simplemente suelte este enlace dentro de esa columna, y este enlace es el correcto. Por lo que tomaré esta tarjeta y pondré esta tarjeta dentro de este enlace. Simplemente eliminaré este enlace textos del año. Y ahora lo que pasó aquí es como ahora el texto es en color azul y el subtítulo es que tienen subyacente y todo. Lo que tengo que hacer tu ys, acabo de venir, tú seleccionas el enlace en la clase. Voy a escribir texto decoración ninguno y texto oscuro. Eso es todo de vuelta a la sección predeterminada ahora. Entonces así es como tienes que hacer a todas las demás cicatrizadas, todas las demás cartas también. Puedes eliminar esta tarjeta y puedes eliminar esta columna. Y puedes duplicarlo una vez más para que el enlace esté ahí dentro de todas las columnas. Y ahora si vas al panel de opciones y estás en la URL, puedes escribir la URL. Así que escribiré HTTP colon slash slash keyed classroom.com. Le daré un objetivo en blanco, por lo que se abrirá en una nueva pestaña o en una nueva ventana. Por lo que las páginas se refrescan. Entonces aquí es donde está ahí el enlace. Una vez que pasas el puntero más de un año, puedes ver aquí, ¿dónde está mi puntero del ratón? Se puede ver que el enlace se muestra por ahí. Y si hago clic en ese enlace, me llevará conseguir el sitio web del aula. Sólo lo estoy cerrando ahora. Eso es todo. Feliz. Página del cliente o nuestro cliente pj está hecho. En el siguiente video, lo que vamos a hacer, volveremos a nuestra página Contáctenos y vamos a empezar crear tal vez éste lance un ticket, vea en el siguiente video, chicos. 37. Finalizar Página Web Multi Del Proyecto Dos: En este video, vamos a conectar este boleto de lanzador de sección particular. Entonces para eso tenemos, estaremos utilizando una aplicación de terceros llamada Fresh desk. Simplemente escribiré Fresh desk por aquí. Esta es la URL de Fresh desk. Hay otras aplicaciones como Zoho desk, Zendesk. Puedes usar cualquiera que te guste. Para mí, Fresh desk es bastante bueno. Y esto no es una promoción del prejuicio. Esto es lo que personalmente me gusta. De acuerdo, entonces vamos a crear una cuenta por aquí. Ensayos gratuitos se registran. En primer lugar, te mostraré los precios. Conocerás por qué exactamente a diferencia de eso, para una organización pequeña, es gratis, completamente gratis para agentes ilimitados. Si eres una organización pequeña, entonces Fresh desk es muy bueno para poner en marcha la cosa. Estaremos usando dos cosas en las dos cosas. Uno es Fresh desk en uno es chat fresco o lo han renombrado, tal vez algo. Veamos. Empezaremos primero con Fresh desk o simplemente crearemos una cuenta de prueba gratuita. Por aquí. Me está diciendo que me inscriba con el correo electrónico. Por lo que definitivamente estaré haciendo click en inscribirse con correo electrónico. Introduciré mi nombre, no esta dirección de correo electrónico, mi dirección de correo electrónico de Yahoo. Pondré el nombre de su empresa. Pongámoslo como escuela en la nube. Este es nuestro próximo proyecto o el próximo proyecto, sea cual sea, estamos diseñando un sistema LMS. Entonces la escuela en la nube está ahí y vamos a estar usando lo mismo para el número. A lo mejor puedo usar este número completo. Veamos si no se usa ya. Y la ubicación de los datos es India. Creo que funciona. Así que gracias por elegir Fresh desk. La cuenta Fresh desk está lista y empieza. Creo que tengo que confirmar mi correo electrónico. Simplemente actualice esta página sobre usted. Activar cuenta, cuenta de actividad, y eso es todo. Creo que ya está hecho. Entonces prensa son algunos atajos que vienen delante de mí. Sí, ahora tenemos que dar la URL de nuestro canal de mesa de ayuda. Tan fresco hace una especie de Nube. Genial. Creo que sólo la escuela en la nube no está disponible. Sí, esta dirección no está disponible. La escuela en la nube pondrá apoyo o tal vez ayuda es sólo encontrar ayuda. Esta es la ayuda de tablero escolar en la nube. Cloud escuela dash ayuda. Dot fresh does.com será la URL. Daremos click en Siguiente. No solo te resuelvas. Sorpresa. Algo está llegando. Entonces esperaremos eso. Ahora. A continuación, invitar al equipo. Por lo que ahora puedes empezar a invitar al equipo poniendo la dirección de correo con tanta frecuencia, pero no tenemos equipo, por lo que seguiremos con eso solo. Lo haré más tarde. Y apoyo. Necesitamos una dirección de correo electrónico de google o Outlook u otra donde la conversación suceda a través de eso o bien la conversación sucederá. Usando esto similar a eso es apoyo en la escuela de nube roja, dash H dot Fresh desk.com. Entonces para mí está bien como demo. Así que felicitaciones, eres Fresco. Desk está listo y empecemos a usar fresh lo hace por defecto, estos tres boletos están ahí. Es un boleto ficticio. puede saber que es un maniquí, uno, etiqueta ficticia. Y vamos a hacer click en este Ver boleto de aquí. Se puede ver el ticket cómo exactamente está ahí está tomando una herramienta para mí ahora, una herramienta paso a paso o cinco pasos. Para que puedas leer todo como yo sé todas estas cosas ya. Para mí, no es tan necesario. Una vez que empieces a cavar en esto. Y una vez que vayamos a esto, una vez que vengamos a la sección donde estaré enseñando en detalles sobre el escritorio Fresco y todo en el mismo curso. Esa vez te explicaré todos los detalles por aquí. Y hasta que, hasta el momento, solo continuaremos con este proceso de integración. Por lo que ahora vamos con ajuste donde está ahí el panel de administración. Demos clic en admin y luego simplemente haga clic en portal de aquí. Simplemente haga clic en portal. Y esta es la URL del portal. Y digamos si hago clic en esta URL, entonces, ¿qué es exactamente lo que viene delante de nosotros? Entonces esto es lo que es la URL del portal, y así es como nuestros clientes van a ver este portal. Creo que el cambio el diseño. Anteriormente, no era así. Ahora cambiaron el diseño en realidad se veía bien, bastante bueno. Se ve bastante bien. Tomaré esta URL y acabaré de copiar. Vuelve a bootstrap studio. Voy a seleccionar este botón por aquí. Y esto ya es un eslabón. Y solo pegaremos la URL por ahí, pulsamos Enter, y el objetivo estará en blanco. De esta manera. Si vamos a previsualizar nuestro sitio web año, y si alguien hace clic en esta URL, serán redirigidos a nuestra página de Help Desk. Esta es nuestra página de mesa de ayuda de la escuela en la nube. Esto es todas las otras cosas que hay ahí. Ver todos los boletos. Creo que esto es esto es la junta de agentes en realidad. Si cierro la sesión. Entonces cómo va a ser sí. Sí. ¿Cambiaron el diseño en realidad para ser muy franco, enviar un ticket y navegar por artículo y se puede buscar algo si el artículo está ahí. Esta es la base de conocimiento. Pronto estaremos llegando allí tan a menudo, otra base de conocimientos estará completamente vacía. Entonces así es como es. Por lo que sólo va a iniciar sesión una vez más. Esta es mi dirección de correo electrónico. Pondré mi contraseña. Continúa hacia Fresh desk. Irá al panel de administración una vez más que nuestro portal esté configurado. Este portal al que accedimos recientemente. Ahora iremos a widget en cuenta gratuita. Sólo podemos usar un widget de egipto. Y a partir de ahora, un widget es suficiente para nosotros. Por lo que sólo voy a hacer clic en crear un widget y lo nombraré como chat. Y sólo vamos a hacer click en Crear más de año. Bienvenido al apoyo, y así será como se verá. Entonces esto es ayuda y todo lo que podemos escribir como. Mantengámoslo solo ayuda. En esto tenemos un formulario de contacto. Veamos si te desplazas hacia abajo por aquí. No, no, lo siento, no este año sólo si apago esto. Entonces esto es como artículos en blanco y de apoyo. Por lo que esto es sólo los artículos de apoyo están ahí. Volveré tanto las opciones sobre el artículo de soporte como este neutral, y esta es la otra. Pero una vez que terminemos nuestro periodo de prueba de 21 días y una vez que pasemos a la sección libre tres de la cuenta, esto no funcionará, por lo que voy a mantener en la apariencia. Podemos cambiar el color de acuerdo a nuestra marca uno, por lo que tenemos este color y luego color sólido, tenemos otros colores sólidos también. Estos son los gradientes, así que nos llevaremos éste. Y esto es pequeña cosa donde puedes ver esto te avisamos atascado en algún lugar como bla, bla, bla. Este es el código principal que quieres. Por lo que sólo voy a copiar este código. Y para guardar todas estas cosas, sólo voy a hacer clic en guardar aquí. Y ahorro ahorrado. Copia este código con este código incrustado. Copia este código incrustado, y ven a bootstrap studio. Guarda este proyecto primero. Ir a la configuración. El ajuste y vaya al contenido de la cabeza. Porque si vuelves aquí, dice como, puedes incrustar este widget en tu sitio web o producto usando este código. Y tenemos que poner este código, el guión dentro de nuestro componente de cabeza. Simplemente pegaré este código por aquí. Es como después del contenido y antes. Por lo que voy a ir a después, lo pegaré aquí y haremos clic en Guardar. Una vez que haga clic en Guardar, solo volveré a nuestro proyecto de previsualización de bootstraps Studio. Y ahí vamos. Ahora tenemos este icono de Ayuda por aquí, y esto está en todas las páginas porque nosotros, llegó a la configuración y luego pegamos ese código. No entramos dentro de esta opción de configuración de página individual y pegamos ese código. Entonces esta opción está en todas partes. Ahora, si hago clic, se puede ver el color y el nombre de correo electrónico. Todas estas cosas están aquí. Ahora, esto es un chat en vivo. Puedes llamarlo como chat en vivo también, pero esto no es un chat en vivo. Se trata de un sistema de soporte de tickets. Y si quieres crear un live y si quieres crear un chat en vivo. Entonces para el año de chat en vivo, tenemos en Fresh desk, como en obras frescas en realidad, tenemos un mensajero fresco. Podemos hacerlo también, pero no lo haremos en este apartado en particular para eso tenemos una sección completamente diferente. En esa sección veremos que por ahora nuestro, este sistema en particular está listo. Ahora lo que tenemos que hacer es simplemente ir a la página de índice, seleccionar esta barra de navegación. Antes de eso tenemos que nombrarlo también irá a navbar. Vine a Navbar. El primero será el hogar. Segundo, lo que puede ser tal vez solución o tal vez Solución Empresarial. Solución Empresarial. El tercero, tal vez pueda ser de perfil inferior. Entonces podemos hacer directamente a OC. Y entonces solo lo tomaré una vez más. Será contacto. Contacto. Vamos a conectar este Pages home será índice, solución de negocio será solución de negocio. Haga click en Perfil y vaya a la página y luego vaya al perfil será nuestro cliente. Y la página de contacto será Página de contacto. Tenemos que diseñar éste también justo después de la presentación del formulario. Haremos eso. Una vez hecho eso, una vez enlazamos todo por aquí, sólo voy a hacer click en este nav, clic derecho. Ve a copiar y pegar, ven a copiar a, y ven a múltiplo sobre tu turno en esta opción Enlazar copias y solo marca esta casilla para que nuestra barra de navegación sea copiada a todas las páginas y la se vinculará con todos. Entonces cada vez que sí cambiamos en una barra de navegación en todas las páginas al mismo tiempo. Se actualizará y sólo haremos clic en Copiar. Ahora tengo que ir uno por uno en melocotón uno por uno. Y tengo que llevar esta navbar de abajo a arriba. Top significa justo debajo de este cuerpo. Entra en contacto también, también estás después de hacer lo mismo. Índice, ya se hace en OCI también, tengo que hacer éste. Sí, ahí vamos. Ahora volviendo a la vista previa, si veo por aquí ahora tengo mi navbar. Si voy a solución empresarial, esta es mi solución de negocio y esta es la ayuda que tu ojo irá al perfil. Entonces este es mi perfil y ayúdanos de nuevo. Entonces si voy a contactar, mi contacto también está ahí. Y una vez que llene el formulario, tengo que ir a esta página en particular llamada después del envío para que puedas diseñar cualquier cosa por aquí. Entonces lo que podemos hacer a partir de ahora es como simplemente tomar un contenedor por aquí, seleccionar este contenedor, poner un margen superior para H2. Es como guión vacío para margen de cuatro, tomaré un icono, haga clic en B, tal vez un ícono de pulgares arriba. Ven al panel Apariencia. Voy un poco rápido porque creo porque supongo que ya sabes cómo hacer esto ahora, solo voy a cambiar el color, llegar a la altura, altura, tamaño de fuente en realidad. Entonces aumentaré el tamaño de la fuente. Justo debajo de esto, voy a poner una etiqueta de encabezado, dar el encabezamiento por aquí. Yo nunca ningún tipo. Gracias por contactarnos. Vamos a conseguir en realidad lo que hice por aquí es Una vez quiero venir a la siguiente página y si presiono solo enter, lo hará, será como, está bien, se hace la edición. Pero si quisiera llegar a una siguiente línea, en realidad no p, creo que la llamo página pero no un melocotón. Es línea. Lo que voy a hacer cambió eta, y ahora escribiré. Nos pondremos en contacto contigo lo antes posible, lo haremos H4, y todo el contenedor, lo llevaremos al centro. Tomemos botón, botón por aquí. Vuelve a la página principal, viniendo a Options y luego el estilo estará advirtiendo para que sea amarillo. Será enlace, y este enlace lo llevará a indexar. Ahora volviendo a nuestra página Contáctenos y seleccione este formulario. Sí, ya está redirigido a éste. Entonces cada vez que alguien llena este formulario, será redirigido allí. Vamos a probarlo. Vamos a probarlo. Esta es mi información, GSD entonces qué proyecto no me gustará proyecto de varias páginas. Vamos a escribir prueba. Mensaje. Haga clic en Enviar mensaje. Revisa esto. No soy un robot que envía. Sí, eso es todo. Gracias por contactarnos. Nos pondremos en contacto contigo lo antes posible y pinchamos, regresaremos a Inicio y volvemos a casa. Eso es todo chicos. Creo que entendiste cómo diseñar este sitio web de varias páginas, ¿cómo enlazar esta página? Forma inteligente, Help Desk es como muy básico que vimos, pero sí, tienes que saber cómo exactamente vamos a usar este Help Desk, Live Chat y todas las demás cosas. Si tienes alguna duda, así que por favor haz una pregunta o únete a mi canal Discord. Entonces esta es la URL del canal de discordia, que dice que este link va a conseguir x-bar en siete días, cual hice ayer y dije naval y haga clic año. Ojalá esto esté ahí. O de lo contrario lo que puedes hacer es poner tu dirección de correo electrónico y te enviaré una invitación por allá en el disco en blanco sobre discordia y puedes unirte a mu allá. Entonces sí, en ambas formas que puedes hacer y mi dirección de correo electrónico es conducir conductor actual en yahoo.com. Puedes poner un correo electrónico por ahí por pedir en eslabón blanco de la falda. Y luego podemos tener sesiones de chat por ahí. Y a veces podemos venir en vivo, sesiones en vivo también en Google Meet o algo así. Y podemos discutir por ahí con los problemas comunes son preguntas comunes que ustedes tienen. Por ahora se hace este resultado de picoteo, y nos vemos en la siguiente sección de este curso. 38. Configuración Del Diseño LMS Del Proyecto Tres: Hola y bienvenidos a otra sección. Y en esta sección vamos a diseñar sistema LMS, es decir sistema de gestión de aprendizaje. Entonces qué vamos a hacer, en lugar de crear una plantilla en blanco, comenzaremos a usar la plantilla predeterminada o la plantilla proporcionada por Bootstrap studio en la aplicación. Empecemos a diseñar el sitio web. Voy a hacer clic en nuevo diseño por aquí, y lo nombraré como escuela en la nube. Escuela Nube. Y estaremos usando esta plantilla de SB Admin a lo largo del año. Por lo que sólo vamos a hacer clic en esta plantilla de SB Admin y voy a hacer clic en personalizado. Y quiero usar todas las páginas, cualquiera que sea, lo que esté disponible aquí. Haremos clic en Todo. Y voy a encender esto para que se agregue también en la barra de navegación. Para que para nosotros también sea fácil. En la marca. Lo escribiremos como nube escuela nube descripción de la escuela. Podemos dejarlo en blanco. Nota, no es una preocupación. Y luego haré clic en Crear. Esta es la plantilla de SB Admin. Esta es la plantilla de administración en realidad, pero a partir de esta plantilla de administración fuera de esta plantilla de administración, vamos a diseñar un front-end así como un panel de administración también. Entonces es como en ambos sentidos. El panel de administración y este sistema LMS diseña de este sistema LMS es de tal manera que es igual que un módulo de usuario y administrador. Si vas al aula infantil de lo que es como instructor admin, módulo de usuario. Pero es igual que dos anchuras, el usuario y el módulo admin y admin pueden ser instructivos también y el administrador también. Entonces lo que vamos a diseñar primero es que vamos a diseñar el usuario forzado. Esto es lo que tenemos frente a nosotros ahora y no queremos mucho de estas cosas. Lo que haremos primero es que veremos esta escuela en la nube y el ícono que necesitamos. Simplemente haré doble clic en este ícono y escribiré en voz alta. Buscaré nube por aquí. Cuando estoy hablando, es difícil para mí escribir, así que escribo algo más mientras hablo. De acuerdo, Así que este es el ícono de la Nube y sólo voy a hacer clic en OK, así que tenemos una nube y textos escolares en la nube por aquí. Se trata de dos divs. En 1D, tenemos el ícono y en otro div tenemos el texto. No queremos este navbar lateral en realidad. En admin, vamos a utilizar esto, pero en el final del usuario no queremos esta barra de navegación lateral, pero queremos que esto a cosas como uno es ícono y uno es el texto. Selecciona ambos. Y voy a venir aquí, arrastrar y soltar en la otra sección en la otra barra de navegación, se puede ver otra navbar también está ahí. Estoy apuntando una flecha por ahí. Mediante el uso de la animación. Yo lo soltaré por aquí. Vendrá justo al lado de la barra de búsqueda. Y luego esta barra de navegación, esta barra de navegación no necesito en el final del usuario, así que simplemente lo eliminaré. Una vez que elimino que se convierte en una página completa, navbar y luego el resto de las cosas, lo que sea que haya. Nuevamente, no necesito eso en esta área en particular. Por lo que seleccionaré este dashboard y vamos a ver como desde donde está en este contenedor. Entonces si eliminamos este contenedor, ¿ funcionará? Sí, funcionó. Y no queremos este también que sea el pie de página y esta página arriba. Podemos usar y veamos. Si queremos usar podemos y orales, eliminaremos eso. ¿ De acuerdo? Entonces este es el contenedor div. Queremos ese div porque dentro de ese div, el nav, pero también está ahí. Sea lo que sea que vamos a hacer que vamos estar haciendo esto dentro de este contenedor solamente. Antes de eso, lo que vamos a hacer, vamos a utilizar un esquema de color diferente por aquí, como un modo oscuro del sitio web. Viniendo a los recursos. Si vienes a la carpeta de recursos que he compartido contigo en el archivo BSS puedes encontrar como escuela en la nube por aquí en los recursos. Si vas a Recursos, encontrarás este CSS de cambio personalizado. Lo que tienes que hacer es simplemente arrastrar y soltar el archivo CSS y soltarlo dentro de este agua cola. Ahora se puede ver que esta área en particular está oscura ahora. Ahora, para cambiar el color de esta barra de navegación también hay que seleccionar primero la barra de navegación. Comprueba que el color de fondo esté ahí o no. Si está ahí. Como en este ejemplo, es de color blanco. Por lo que basta con hacer clic aquí y dar clic en Default, que llegue a un área predeterminada, sea cual sea el color que se le dé a esa barra de navegación en particular. Pero como a menudo o es transparente, está llegando a la sección oscura porque hemos importado este CSS un archivo CSS y está mostrando esa cosa en particular. Y seleccionemos esta barra de búsqueda y podemos cambiar el color de primario a oscuro. Y ahí vamos. Queremos esta cosa en particular como mensaje de notificación que usuario. Y ahora esto es, hay dos cosas. Lo cambiaremos. Seleccionaré esta barra de navegación completa e iré al año de aparición a partir del color del texto. En realidad el color del texto está aquí y podemos hacerlo blanco de ti. Eso es todo lo que se hace. Y éste, lo haremos manualmente, como el blanco paso a paso. Éste, creo que es de donde exactamente esto viene. Texto gris se aplica una CA, texto gris 600 año. Haremos que el texto sea blanco. Ahí vamos. Y podemos quitar este estilo de tu. Ahora, digamos este ícono, ícono. De acuerdo, así que veamos de qué color podemos usar ahí. Sí, lo hicimos blanco. Y esta campana de notificación, de nuevo, tenemos que hacerla blanca. Esto mucho. Se hace la sección Navbar y tenemos que continuar con la otra. Entonces veremos paso a paso navbar. A partir de ahora se hace. Cambiamos a la, quitamos la barra lateral de navegación, cambiamos el color, importamos un CSS. En el siguiente video, veremos una navbar más que vamos a diseñar y que solo aparecerá cuando estemos utilizando dispositivos móviles. Así que nos vemos en el siguiente video, chicos. 39. Creación de una barra para la vista móvil del proyecto tres: Bien, bienvenidos de nuevo a este video. En este video, vamos a diseñar una barra de navegación, que será sólo para dispositivos móviles. Éste ahora cuerpos aquí, y tomaré otro navbar. Tomaremos esta navbar y la dejaré caer por aquí. Justo exactamente. Sí. Éste justo debajo del cuerpo y que sea lo que sea que esté viniendo lo haremos, vamos a arreglar todo. Así que seleccionemos esta barra de navegación y vengamos a opciones por aquí. Y en el puesto, esta es la tercera opción que se posiciona. Simplemente seleccione esta opción y haga clic en fijo a abajo. Una vez que haga clic en eso, esto nadie va a venir a la zona de fondo. Creo que no necesitamos esto ahora, así que vamos a eliminar esto. Y tampoco necesitamos este icono nuevo ahora, no icono de marca, el nombre de la marca de aquí. Eliminaremos esta marca también. Y ahora vamos a venir a la vista móvil y luego comenzaremos a diseñarla. En el móvil usted. En cuanto llegamos a la vista móvil, llegó este ícono de hamburguesa y no queremos eso. Por lo que de nuevo, seleccionaré esta barra de navegación expandir. Lo lograré como siempre. Lo mantendrá siempre en el exponente uno. Ahora tenemos que ver qué todas las cosas tenemos que poner por aquí. Creo que las cosas básicas que queremos facilidad, una será la casa. Y entonces también tendremos una sección llamada mi aprendizaje o tal vez mis cursos. Y luego wishlist, Entonces cuenta y busca. Creo que tenemos como tres o cuatro opciones por ahí. Vamos a eliminarte esto porque queremos traer un ícono por ahí. Y acabaré de apagar este botón activo por aquí. Y vendré a ícono, buscar icono y soltar el ícono en esta área en particular. Y suelta el ícono o eliminas este texto. Que resuelva este ícono será en casa. Qué hogar para ser usado. Veamos. Otro ícono. Debe ser muy delgado y recortar tipo de cosa. Entonces podemos usar esto, pero vamos a ver. Primero hay casa, luego el icono de búsqueda está ahí, vale, luego el video, el video no es tan bueno. Podemos buscarlo para jugar también. Este está bien. Entonces configurando o tal vez contar, saber o usuario. Tenemos todos los iconos, entonces podemos usar esta línea. Impresionante. Primero es el hogar. Estoy seleccionando este icono de Inicio por aquí y hago clic en Inicio. Creo que entendiste qué exactamente vamos a hacer. Selecciona este artículo ahora y duplica esto. Haga doble clic en este elemento de navegación. Y el siguiente será la búsqueda. Vamos a seleccionar en esta búsqueda por aquí. Y lo duplicaremos una vez más. Esta vez será el icono de botón de video o reproducción. Este es el icono del botón de reproducción. Después de eso, tenemos lista de deseos. Sí, la lista de deseos puede ser su corazón. Ojalá tu corazón esté ahí. Gracias a Dios. No lo comprobamos. El último serán los usuarios. Ok. Tenemos estos iconos ya más de un año. Y luego seleccionaremos todo. Lo siento, estoy presionando brechas Agosto seleccionar todo y venir a la clase y solo escribe margen, izquierda, margen izquierda o derecha. Sólo un segundo. Tenemos que hacer relleno. Tres es demasiado. Es suficiente. Entonces margen también. A veces este margen no funcionará en navbar, así que esa vez, ¿qué tienes que hacer? Como digamos que tomaremos éste solamente y luego seleccionaremos este primero y veremos cuánto espacio hay disponible por aquí. Intenté dar un poco de margen porque estamos utilizando Flexbox también. Poco de margen donde vamos a dar un margen lado derecho. Vale, entonces digamos que cinco margen cinco es bastante bueno. Simplemente toma éste y aplica el margen cinco a cada uno de ellos. Que puedan tener un poco de espacio por ahí. Ver lo que estoy haciendo es que sólo estoy seleccionando uno por uno y copiar y pegar eso. Pero hay una opción más. Ahora selecciona todo el elemento nav a vez y solo dale el margen a ellos. Será fácil para ti También. Digamos que diez es bastante bueno. Y luego vengan a la fuente y al tamaño de la fuente, aumentaremos una fuente a tal vez 20. Vale, ahora viene a la opción Nav o tal vez el nav. Selecciona el nav de colapso y ve a opciones y basta con hacer click en Centro. Lo sentimos, selecciona esto y da click en Centro. Ahora está en el centro, así que selecciona el nav y luego ven a la alineación, y luego selecciona centro por aquí. Ahora tenemos esta navbar, que se centra align. Y seleccionaré esta barra de navegación vendrá a Apariencia. Y tengo que dar el color, este color oscuro por aquí. Por lo que acabo de llegar a este fondo uno. Voy a hacer clic aquí. Tomaremos la herramienta cuentagotas. Haga clic en esto. Lo pondré en el favorito también. Esto no es un favorito, así que lo seleccionaré e iré a las fuentes. Las fuentes, solo haré que la forma sea blanca. Creo que tengo que hacer que el icono sea blanco uno por uno. Este blanco. Sólo haciéndolo. Simplemente voy a hacer el avance rápido. Esta es una forma de diseñarlo. Y le daremos un poco de un look y sensación diferente para que se vea muy emocionante. Lo que voy a hacer es que llegaré al panel de Opciones por aquí. Panel de apariencia, o simplemente bajar y seleccionaré este borde. Seleccionaré este borde, o tal vez toda la frontera. Y demos un radio. Y tratemos de que sea una curva. 150 es suficiente, 50. Y vendremos, estás en la cima. He seleccionado el prestatario del mapa navbar, tienes razón. Voy a hacer esto. Margen inferior. Simplemente intentaremos hacerlo en un por sitio, un poco en un por lado, digamos que cinco es suficiente. Y vamos a tratar de simplemente dar algo de espacio extra por aquí. Lo que podemos hacer ahí, creo que el relleno será la mejor opción para eso. Acolchado, ¿verdad? ¿ Está funcionando? No, está sucediendo dentro de ese margen, ¿verdad? El margen está funcionando. margen cinco es bueno para lado derecho o lado izquierdo también definitivamente vamos a dar cinco solamente. ¿ De acuerdo? Lo daremos un par de pasos hacia abajo. Y ahora en lugar de dar este color, lo que estoy pensando es como lo que podemos hacer, en lugar de dar este color o color recto directo que podemos usar un degradado por ahí. Entonces gradiente, veamos cómo podemos hacer eso. Cómo podemos hacer eso significa qué gradiente tenemos que usar oscuro a claro o claro a oscuro. Veamos. Selecciona éste. Diseño. Seleccionaré este color. Nuevamente. Voy a ir a Seleccionar. Entonces. Lo llevaré al lado más ligero. azul no funcionará apropiadamente. Esto lo que dicen chicos? Al igual que el gradiente se ve bien? No, no para mí. No lo creo. Se ve bien. En realidad. Que sea de esta manera solamente. Sí. Creo que eso es todo lo que podemos hacer. Aparte de eso, sus piernas seleccionan este Iconos. No exactamente causo estos artículos nav y podemos reducir un tamaño de fuente. Es demasiado grande, así que podemos hacerla pequeña. 16 es bueno, y también hemos dado el relleno en alguna parte. Al agregar uno, eliminaremos ese relleno uno. De acuerdo, ahora es falso correctamente. Ahora, tenemos que ahora bus uno ya sea el superior está en la parte inferior, pero esta navbar solo vamos a usar cuando estemos en la pantalla móvil que entonces este NaBR no estará ahí. Para eso tenemos que utilizar la consulta de medios. Y esa consulta de medios que vamos a ver en el siguiente video. Nos vemos en el siguiente video. 40. Diseño De LMS Landing Page Del Proyecto Tres: De acuerdo, entonces vamos a empezar a crear el resto del área. Antes de eso tenemos que importar pocos de los elementos o tal vez pocos de los recursos de ti. Esta imagen de portada que queremos y este curso iconos que queremos. Entonces vendremos a nuestra sección de imágenes y crearé una nueva carpeta llamada cover, donde voy a colocar solo una portada. Y voy a crear una carpeta más para el crear una carpeta más y la nombraré como banner del curso. Basta con hacer doble clic en esta carpeta del curso. Arrastraré y soltaré estos banners en esta carpeta de imagen de banner curso, carpeta banner curso. Y vendré a descubrir o tal vez seleccionaré tanto esto y lo dejará caer dentro de esta portada. El otro no está cubierto, pero que sea, lo guardaré ahí. De acuerdo, entonces tenemos nuestras imágenes ahora con nosotros y vamos a crear el resto de las cosas. Entonces primero tomaré un contenedor y caeré dentro de esto, como te dije, vamos a hacer todo dentro de éste, este div. He tomado un contenedor y dentro este contenedor tomaré un div, div y solo lo dejaré caer dentro de este contenedor. Y ahora dentro de este contenedor queremos tomar nuestra imagen de portada. Entonces estoy tomando esta imagen aquí. Haga doble clic en esta imagen y vaya a nuestra portada y seleccione esta imagen. Haga clic en Ok. Y ahí vamos. Y tenemos que activar la respuesta que opta por aquí. Ahí vamos. Tenemos esta imagen hemos importado y sus dos grandes imágenes. Y veamos cómo va exactamente en la vista móvil. Whoops, se ha ido. Creo que veamos dónde tenemos. Creo que hemos dado nuestra consulta de medios a este div, esconderse en móvil. No debería ser tu, En realidad, debería ser sólo para este navbar. Y lo voy a escribir aquí. Ahora eso se ha ido. Y para esta imagen, tenemos que hacer una cosa que tenemos que reducir el tamaño de la imagen. De acuerdo, en Bootstrap studio, tenemos una opción para abrir directamente esta imagen en un editor de imágenes como Photoshop o GIMP o cualquier editor de imágenes que tengamos. Y a partir de ahí podemos hacerlo. Entonces hagamos eso. En la portada. Seleccionaré esta portada, haga clic con el botón derecho Abrir en y haré clic en Photoshop. Entonces tengo Photoshop en mi sistema. Lo estoy abriendo en Photoshop. Y una vez que se abre en Photoshop, photoshop se está abriendo o ahí. Ahora, la foto se llama directamente dentro del Photoshop. Y por si no encuentras esta opción como abrir en Photoshop. Por lo que encontrarás esta opción abierta en, pero puedes ir y dar click en este editor configurado. Entonces encontrarás los editores que tienes en tu sistema. O simplemente puedes hacer click en Agregar Editor. Y puedes encontrar algunos de los, solo puedes hacer click en ese archivo de recursos o tal vez en el lanzador de ese editor de imágenes en particular. Tal vez como GIMP o Photoshop o algo así. Simplemente haga clic en ese lanzador y haga clic en abrir por aquí. Y entonces vendrá dentro esta zona particular de lanzadores. Y luego puedes seleccionar el editor predeterminado. Sólo estoy cancelando esto. Estoy volviendo a Photoshop y acabaré de recortar esta imagen golpeando C. Acabo de tomar este año, solo una rebanada esta cabeza abajo. Creo que esto es suficiente, ¿verdad? Simplemente haga clic en Entrar. Y ahora solo necesito ir Archivo y dar click en Guardar. Y simplemente haga clic en Okay. Y eso es todo. Si vuelvo a ir a mi estudio Bootstrap, ahí vamos. Ahora ya está hecho. Se edita. Se pica adecuadamente. Vale, esto es lo que quería y eso es todo. Seleccionaré esta imagen y empezaré a editar aún más con eso. En estudio Bootstrap. Simplemente llegará al panel Apariencia y desplácese hacia abajo hasta el área de bordes. Seleccionaré todos los bordes por aquí y voy a dar un poco de área curva. Se puede ver aquí un poco de área curva, tal vez hasta 18 o 20 está bien. Vale, 20 es bastante bueno. Ahí vamos. Ahora tenemos una imagen adecuada dentro de eso y veamos la vista previa en el navegador. El preestreno no está encendido, por lo que sólo voy a hacer clic en la vista previa. Y ahí vamos. Tenemos la vista previa, pero tenemos mucho espacio vacío por aquí. Entonces, ¿cómo arreglar ese espacio vacío? Es simple. Simplemente haga clic en este contenedor y encienda esta opción fluida. Y volvamos a nuestro preestreno. Ya habrá ir, tenemos esta opción sobre ti. Creo que sigue siendo una gran imagen. Tenemos que cortarlo más. Entonces vuelve a bootstrap studio, ven a la portada, haz clic derecho. Abrir y abrir en Photoshop de nuevo. Se abrirá la imagen en Photoshop. Ahí vamos. Vamos a cortarlo un poco más. Mantengámoslo desde aquí y vamos cortarlo desde el área superior. Creo que esto es bastante justo. Ve a Archivo, da clic en Guardar. Volver a bootstrap Studio verá esto. Y su, vamos a ver. Ahí vamos. Vamos a lucir bastante bien como uno pequeño y decente. Vale, bien, bastante justo. Empecemos a diseñar la siguiente porción. Ahí es donde podemos ver los cursos. Para eso, tomaré un rumbo. Dejaré caer este rumbo dentro de este contenedor. Este es el rubro, solo lo escribiré, escribe tus cursos y lo haré H12. Esta, tengo que hacerla blanca. Apenas ven tu fuente y haz clic en esta zona blanca o en texto blanco. Tenemos que dar un margen. Top 33 es bastante bueno. Margen top tres es lo suficientemente bueno. Sí. Ok. Ahora la siguiente zona, lo que vamos a diseñar facilitará el área de lista de cursos. Para eso. Tomaremos una fila y dejaremos caer esa fila dentro de este contenedor. Una columna dentro de este contenedor, una columna dentro de esta fila. Selecciona esto. Tomaré un guardia. Pon esa carta dentro de esto. Ahí vamos. Entonces qué todas las cosas que queremos título, queremos subtítulo, queremos esta área que podamos usar, pero no queremos que estos enlaces. Entonces vamos a quitar eso y veamos si podemos usar esto o no. Si no necesitamos eso, podemos eliminarlo. Esta área será el área de título. Entonces vamos a nombrarlo como el mismo curso. Bootstrap Studio 5.9, o tal vez encontrar 0.9 x ¿qué pasó? Vot bootstrap Studio 5.9 x DBs paso a paso. Por supuesto, algo así. Tú eres el subtítulo, algún subtítulo estará ahí. Y lo que podemos poner una calificación, calificaciones que podemos poner bien? Por lo que vamos a tomar un lapso por aquí, dentro de este párrafo. Ese lapso. Y dentro de este lapso tomaré el ícono. En realidad, cuando lo vas a diseñar como un sitio web dinámico, esa vez no usarás estos iconos y todo. Déjalos. Tendrás un paquete si estás usando algún framework, digamos marco lateral o algo así. Tendrás un paquete y a partir de ahí estarás usando eso. Para que esa vez no uses esto en realidad. Pero sólo para dar una buena mirada, estamos usando estas estrellas por aquí. Seleccionaré todas las cinco estrellas aquí. Vamos a dar un poco de relleno. Y esta área de texto, acabaré de quitar este texto y entre corchetes. Por lo que sólo vamos a escribir 123456 estudiantes o tal vez no estudiantes. Podemos convertirlo en una calificación 123456. Esta mucha área es lo suficientemente buena y estás obteniendo estas fronteras y todas esas cosas porque hemos agregado el CSS al principio. Hay CSS personalizado, personalizado Cambiar archivo CSS dot en que todas estas cosas ya están ahí. A continuación tomaremos una imagen. Esta imagen, lo pondré bien sobre esta etiqueta corporal, cartón JTAG en realidad tarjeta cuerpo etiqueta. Y hará doble clic en esto. Y iremos a nuestro estandarte del curso. Y seleccionaremos cualquiera de esto. Bueno, digamos, seleccionemos éste. Entonces este es nuestro estudio bootstrap como el ganador maravilla, bueno, sea lo que sea, esta gran área se hace. Y sombra, yo no lo creo. Tenemos que aplicar alguna sombra porque ya es oscura y de qué sirve dar eso? Pero sí, podemos darle animación. Por lo que haga clic en hover. Éste. Veamos. Sí, en realidad está funcionando correctamente. Y cuánto tenemos que dar. A lo mejor podemos darle 33 es bueno. Entonces hasta LG podemos darle 43. Entonces éste es MD, momento, éste es MD. En MD, podemos darle tal vez 4444. Y luego el tamaño de pantalla más bajo, creo que seis es suficiente, como dos por dos o tal vez podemos ir por uno a uno también. Esto también es bueno. Demasiado bien también es bueno, no gran cosa. Vamos a duplicar esto. Un par de tiempo. 1234 veces está bien. Este tamaño de pantalla, vamos a cambiar esto a diferentes banners de curso para que se vea un poco diferente. Uno por uno. Y títulos también, podemos cambiarlo. Podemos posponernos ahora, podemos poner a Lorem Ipsum. Entonces seleccionaré eso. Mi rubro controlaré y teclearé labrum. Whoops. Control D lorem, entrar, entrar Lorem Ipsum. No tanto. Digamos que si nuestro título del curso es grande, pero obviamente vamos a dar límite de caracteres de 60 para que podamos hacer una titulación SEO adecuada por ahí. Pero de nuevo, si tenemos mucho, mucho texto por aquí, podemos hacer algo o a ti, vamos a ver qué podemos hacer en el área de texto. Pero lo haremos en el siguiente video. 41. Finalizar La Página De Aterrizaje Del Proyecto Tres: De acuerdo, entonces seguiremos donde nos hemos ido. Entonces no queremos esta zona larga ni más y z Ahora bien, esto es textos cortos, así que tenemos este espacio en blanco por aquí. Lo que podemos hacer es seleccionar esta área de texto. Y en esta opción de texto, sólo vamos a venir y encender estas dos opciones para todo este texto bucle demasiado grande va a hacer esto solamente. Por lo que será como un trazador de líneas solamente y no habrá perturbaciones en la interfaz de usuario. Este están encabezando etiquetas con h4. No queremos H4 por ahí, así que H5 también es lo suficientemente bueno para eso. Eso es resolver. Seleccionemos éste y pongamos otro texto de Lorem Ipsum por ahí. Tenemos un título diferente por ahí. Algún título diferente por aquí. Y de nuevo, algún título diferente por aquí. Ok. qué tamaño extranjero hace esto, Gary, este párrafo? Esto es cuando 16. En realidad, no queremos que eso sea como 16. Por lo que seleccionaremos todos los párrafos manteniendo pulsada la tecla Control y pulsando uno por uno en todo el párrafo. Simplemente reduciendo el tamaño a 12. Tenemos que dar algo por aquí. En realidad porque es que se conectaron el uno al otro en realidad no queremos así. Así que acaba de derrumbar todas las columnas de aquí. inmediato. Seleccionaré todas las columnas. Pulsa Control, lo siento, presiona mantener, tecla Mayús y selecciona todo. Y el margen inferior es bueno creo, o tal vez tres. Sí, tres es bastante bueno. Y ahora veamos la vista previa. Ahí vamos. Tenemos esto prevenir Ahora, ¿resolviste que una por una imágenes al cargar para eso también para ir con un mejor SEO, optimización de motores de búsqueda. E incluso si vas a ir a revisar la prueba de velocidad del sitio web, siempre te recomendará ir y usar imágenes de punto WebP. En este momento estamos utilizando todas las imágenes PNG luz. Por lo que siempre te recomendará usar imágenes WebP. Y volverá a recomendar siempre usar carga perezosa. Veamos cómo exactamente podemos activar la carga perezosa en Bootstrap Studio seleccionará las imágenes, todas las imágenes una por una pulsando, manteniendo pulsada la tecla Control y haciendo clic en las imágenes, vaya a Opciones. Y aquí tenemos la opción llamada carga perezosa y podemos hacerla como perezosa. Eso es todo. Si se puede ver en el CSS a lo largo del año, carga es igual a perezoso. Y ahora lo es, podemos decir como hemos hecho un poco de optimización por ahí. Qué significa exactamente carga perezosa. Ahora se puede ver si las imágenes, estas imágenes particulares en la parte inferior de la página donde esa área en particular no es visible hasta ahora. Esa vez esa imagen no se cargará. Eso ayudará a que el sitio web se cargue más rápido. En lugar de cargar todas las imágenes que son, que aún no están delante de la pantalla. Creo que esto es bastante bueno, pero sí, tenemos que poner el precio por ahí. Nuevamente. Tenemos que añadir precio a todo esto. Haremos eso. ¿Qué hacer? Tomaremos rumbo. Lo colocaremos año, y esto será H3 o tal vez H4 también sea bueno. Y luego toma un ícono. Este ícono será el ícono de moneda, en realidad, como soy de India, así que estaré usando mi moneda, es decir rupia 99. Voy a teclear aquí. Veamos primero el preestreno. Ahora. Se ve bastante bien, no tan mal. Volviendo a bootstrap studio, tengo que duplicar esto. Tráelo. Nuevamente, duplique esto. Nosotros lo traemos aquí. Duplicar, duplicar. Hola. Oblicuo, y tráelo a usted. Bien, bastante justo. Ahora esta cantidad de cursos está bien para ir a partir de ahora. Creo que en lugar de podemos hacer algunos cambios allí también, como si se viera demasiado grande, entonces podemos hacerlo pequeño. Pequeño significa lo que podemos hacer, seleccionar todas las columnas sobre usted. En lugar de tres. Podemos ir con dos. Veamos cómo se ve exactamente. En realidad, se ve bien en este tamaño. Lo guardará así solamente. Tenemos esto. Y si tratamos de bajar el tamaño de la pantalla, entonces toma el área adecuada. ¿No es así? Puedes jugar con esto. Y para mí, creo que es bueno. Y después de eso crearemos una sección más. No exactamente sección. Vamos a crear un encabezado más por aquí es mi rubro. Encabezado. Y dejaré caer esto dentro este contenedor porque quiero esto justo debajo de esa fila. Tú eres exactamente, yo lo haré H12. Esto a un color blanco. Voy a escribir usted obtiene por supuesto certificado de finalización en lugar de ir a sólo copiar y pegar. Llévala a la alineación central. Y voy a dar margen top cinco. Pongo algo de buen espacio por ahí. Lo que voy a hacer, pondré esto dentro de un div, en realidad dentro de este div. Y este div, lo haré como una alineación de centro. Y voy a quitar al administrador central de éste. Dentro de este div, voy a tomar un párrafo, soltar este párrafo dentro de ese párrafo, lo llamaré como realizar prueba de autovalidación y obtener certificado. Sólo estoy copiando y pegando los datos que tengo. Pero ustedes, ustedes escriben los datos. Estoy salvando esto otra vez. Ahora voy a tomar una fila. Tomará esta fila dentro de este div. Entonces tomaré una columna. Dentro de esta columna, tomaré la etiqueta de imagen. Haga doble clic en la etiqueta de la imagen. Tenemos esta imagen que quería ver mayor. Ahora abriré esta imagen, ve a Opciones abajo en esta respuesta. Simplemente duplica éste de la otra. Simplemente eliminaré esta imagen. Pondré 21 etiqueta de rumbo por ahí. Creo que tenemos que llevarlo fuera de este div. No queremos que eso venga en un elemento central. Este div, lo llevaré por encima de esa regla. Ok. Suficiente justo. Este rubro se llamará como instructor. Entonces tomaremos el párrafo, en realidad. En un párrafo, escribamos algo muy aleatorio Wonder Woman. Muy bien, voy a duplicar esto y lo tomaremos como muchos mitos de control. P, doble Entrar, Entrar, Entrar, lote de epsilon. Esta sección en particular quiero blanco completamente. Entonces para seleccionar esa columna vienen a aparecer. A la columna completa, estoy dando color blanco. Y también quiero que estos textos particulares, como todos los tres textos deban venir como en el centro, como centro horizontal. Entonces iremos al panel Opciones y en la flexbox. Por lo que abriré este Flexbox. Daré click sobre este centro. Veamos desde donde quiero eso en el centro. Tu primero arreglaremos esta área de columna. Entonces iremos a la Flexbox. Es yo creo que está bien salir. Éste es SM. Sm queremos seis. Entonces he seleccionado ambas columnas. Entonces lo eres, es uno tras otro. Y de tu es de lado a lado. Cuando es uno tras otro. Quiero que eso venga en una zona centro como esta manera. Entonces encenderé solo un segundo. Sólo quería seleccionar esta columna. Y el segundo, no ambos, acaba de hacer en este centro y en columnas y éste. De acuerdo, así que si llego al tamaño de pantalla más grande ahora, lo puedes ver. Está llegando automáticamente al centro horizontal. Esto es centro horizontal. Se puede ver Centro y esto queda. Esta área está hecha. Una última cosa que podemos hacer es pondremos una. Lo que podemos hacer aquí, vamos a poner un video por ahí. Lo siento, me llevaré un div más allá. Este div. Para este div, vamos a dar un margen top cuatro. Tomemos video. Este es un video, así div, lo llevaré al centro para que el video venga en el centro. Y ahora en lugar de este u2, vamos a tomar un Vimeo porque YouTube, sabes, como exactamente cómo lo tomaría, como simplemente copiar la URL por ahí. Y este es Vimeo. Vimeo también parece tomar la URL. Eso es todo. Se hace. En realidad. Simplemente copie este enlace. Permítanme quitar esto y pegar esto. Ahora este es tu título. Vamos a quitar el título luego mostrar autor. Quitar a ese autor también. Éste. Eso es todo. Sólo tendremos los controladores por ahí. Ahora si voy a nuestro preestreno. Sí, ahora el video está ahí y se puede hacer click en este video a platar. Sí. También he recibido algunas preguntas donde alumnos como ustedes me están preguntando cómo exactamente agregar un video HTML5 por aquí y que voy a estar cubriendo, he escrito que también que tengo que cubrir eso punto particular que cubriremos cuándo vamos a tomar un servidor real y cuándo vamos a subir nuestros archivos en el servidor real, porque necesitamos servidor desde donde podamos almacenar ese video y llamar a ese enlace de video también. Esto es esto se hace a partir de ahora. Ya está hecho. Sí, eso es todo. Pero antes de eso, si llegamos a nuestro tamaño móvil, entonces este video se esconde detrás de eso. Y tenemos que arreglar eso. Y también una vez que llegamos al tamaño de la pantalla móvil, este video está saliendo de la zona. ¿ Qué tenemos que hacer en lugar de este ancho, 60 pixeles? Tenemos que mantener un 100% y luego será en la forma porcentual. Bordeado azul va detrás de nuestra barra de navegación, es decir barra navbar inferior. Entonces el último, lo que podemos hacer, seleccionaré este div por aquí, vengan al panel Apariencia. Tengo que dar un margen de fondo tal manera que no caiga sobre esa zona. Cubra esta barra de navbar. Tengo que dar esa gran cantidad de margen. Digamos que 50 es bastante justo. Creo que esta imagen es buena. Por lo que esto tiene controles individuales y éste también tiene control individual. En esta área, también este div, o tal vez este contenedor, el contenedor completo, tengo que darle un margen de área superior a ella, que tenga algún espacio extra o cuarto extra por ahí. Eso es todo chicos. Creo que este diseño de página en particular está hecho. Sólo esta zona media. Haremos esto a medida que avancemos. Y a partir de ahora se hace esta página en particular. En el siguiente video, diseñaremos una página más que es el discurso Detalles del Curso una vez que quieras hacer click en este curso. Por lo que debe ir a una página de detalles del curso, esa página que vamos a diseñar y que diseñaremos en nuestro próximo video. Nos vemos en el siguiente video, chicos. 42. Creación y ajuste de otras páginas para LMS del proyecto tres: En este video, seguiremos adelante creando nuestra página Detalles del Curso. Entonces para eso, lo que vamos a hacer, selecciona esta página de índice. Duplicaré esta página de índice, y renombraré esto como detalles de Gore. De acuerdo, así que al llegar a esa página, no necesitamos todas estas cosas ahora. Voy a seleccionar todo y eliminaré esta área. Seleccionaré este contenedor. Y viniendo aquí. Lo primero que tenemos que hacer es tomar una etiqueta de encabezado, dejarla caer aquí, y este contenedor, solo seleccionaré este contenedor, vendrá a aparecer. Todo el contenedor, lo haremos blanco. Esta etiqueta de encabezado será H2. Y nombraremos esto como el nombre del curso. Solo paga esto. Podemos hacerlo H12 o uno también. H1 también está bien, no es un problema. Entonces tomaremos un párrafo. Este párrafo será subtítulos, por lo que podemos poner un texto de lorem ipsum en eso. Podemos tener pocas una línea más por aquí donde podemos poner otros detalles como el ID del curso de lectura. Podemos ponerlo como más reciente, actualizado en y vamos a poner alguna fecha por ahí. Una vez hecho eso dentro de este contenedor, tomaremos una fila. Toma la fila por aquí, y dejaré caer esta fila dentro este contenedor y seleccionaré la, selecciona la fila. Tomaré la columna dentro de ese contenedor, y tomaré dos columnas por aquí. Y una columna será para video y otra columna será para la otra, otro conjunto de información. Seleccionaré la primera columna, vendré a las opciones. Bien, hasta que LG lo logre a los 84. Veamos cómo funciona exactamente. Pondré una etiqueta de video sobre tu elemento de video. Esto, lo guardaré como HTML5. Posteriormente agregaremos la URL y todas las cosas. Pero para el ancho, lo haremos como un 100% de ancho y altura, lo haremos como 350. Eso es suficiente por ahora. Y en la segunda columna pondré una carta más. Ni una más en realidad en esta página es la primera carta. Este título seleccionaré y lo daré al año. Será un ícono de rupia. Por lo que estoy tomando un ícono ahí. Haga doble clic en este icono, y luego busque las monedas involucradas. Sea cual sea la moneda involucrada que quieras, puedes tomarla. Éste será, digamos phi 99. Subtítulo será este curso incluir. Entonces pondremos algún conjunto de información como una duración total del curso, como a petición, siete horas, 15 minutos de videos. Entonces vamos a dar una cosa más llamada Lifetime Access. Y entonces tendremos éste llamado apego. Entonces le daremos un certificado también. Entonces le diremos 30 días de reembolso garantizado. Entonces vamos a quitar estos dos enlaces de aquí. No queremos que esos enlaces por ahí. Ahora dentro de este cuerpo vamos a tomar una fila dos, sumar dos cosas. Eso es dos botones. En realidad. Seleccionaré esa fila y pondré esta columna cuando duplique esta columna. Y ahora tomaré el botón btn. Pondrá el botón, un botón por aquí. Voy a duplicar esto y lo tiraré en la columna. Selecciona este primer botón ven a Apariencia. Y como no tenemos la opción Bloquear ahora, así que lo que tenemos que hacer es ir a anchura y hacer el ancho 100%. Año también hacen que el ancho 100%. Por lo que éste será a la lista de deseos. Este botón será por ahora. Y añadir a la lista de deseos. Lo haremos como esbozo porque no queremos mostrar el enfoque por ahí. Y China, lo mantendremos así solamente. Cuando llegamos a este tamaño de pantalla. Digamos md. Está yendo drásticamente por debajo de eso. Lo que podemos hacer, en lugar de escribir en dos wishlist, podemos poner un icono. Oeo eliminará todos los textos de ahí. Al igual que el efecto psicológico no muestra nada que el usuario no lo lea. Pero dirá, está bien, es una lista de deseos. Por lo que vamos a poner un corazón por ahí con el contorno solamente. Ahora esta columna en la que está ahí el corazón, simplemente barajaremos eso, que para ahora, lo traeremos en primer lugar. Y éste le daremos un poco de espacio extra. Todos los tamaños de pantalla. Tal vez. Vamos ritmo cardíaco, corazón uno por el que lo tomaremos. Éste es pequeño y éste grande. Ese tipo y video como te dije, una vez que sigamos adelante, tomaremos ese video también. De acuerdo, entonces esta área está terminada. Y avanzando, tenemos que tomar ahora acordeón. Este es el acordeón y cayendo dentro de este contenedor. Entonces éste es acordeón. Vamos a poner algún margen margen superior sobre su margen superior, vamos a hacer es lo suficientemente bueno, creo. Sí, este tanto espacio es bueno. Digamos, intentemos 33 también es bueno, no un problema. Y aquí sabremos qué es exactamente lo que vendrá. Aquí está el nombre de la sección. Nombre de la sección. Y dentro de eso, vamos a poner éste. ¿ Qué dices? Los títulos, la conferencia, el nombre del video para eso. Lo que tenemos que hacer durante el año 0s, tenemos que tomar fila dentro de eso directamente, poner este texto dentro de una fila. Vendrá automáticamente dentro de la columna. Y vamos a duplicar esto. Lo siento, no párrafo duplicará esta columna una vez más. Esta columna en todo el tamaño de la pantalla, vamos a dar tal vez muy menos área, menos rejillas, en realidad, tal vez dos o algo así. Y este será el momento como el 0335, algo así. Y este texto se alineará de esa manera. Y también podemos traerlo más como uno también es lo suficientemente bueno porque no todo el video solo va a estar en el nuestro. Entonces por eso está bien. Éste permanecerá parecerá. Este es el título del video. En realidad. Esta fila estará en bucle aleatorio. Lo que podemos hacer, su facilidad, vamos a poner un borde, borde inferior, sólido. Y éste será el título del video. Algo así. La fila completa dará margen inferior. Hacerlo. Creo que va a ser lo suficientemente bueno? Duplicar. Este será el segundo video. Ya está ahí. Puedes jugar con el, ¿qué dices? Juega con la opacidad y todo. Veamos ahora la vista previa. Se puede ver el preestreno es así y no queremos este tipo de cosa H2N. Entonces vendremos a este contenedor. Seleccionaremos este contenedor en el estudio bootstrap y desactivaremos esta opción fluida. Ahora veamos la vista previa. Sí, Ahora se ve bastante bien. La altura tampoco es tan satisfecha, satisfactoria. Por lo que vamos a aumentar la altura, tal vez 400. Veámoslo una vez más. Ahora está bien, pero de todos modos, tendremos el video de esa vez tomará automáticamente el tamaño. Éste puedes cambiar, puedes poner algunos, ¿qué dices? Opacidad o algo así. Por lo que eliminaré esta fila, seleccionaré esta fila una vez más y en apariencia. Entonces bajaremos a la zona fronteriza y solo reduciré la raíz de opacidad 25%. Por lo que se verá algo así. Creo que esto está bien por ahora. Podemos poner algo de relleno a eso. Tal vez margen inferior para gustarle esto. Lo mismo para éste también. Margen inferior 0 ya estaba ahí, pero no se veía bien. Creo que éste se ve bastante bien. Podemos reducir cierta opacidad para esa línea. Fue de 0.25. A lo mejor podemos llevarla a diez o algo así. 0.199, algo así. Y entonces, ya sabes, es como, está bien, se ve bien. En realidad saber, entonces puedes hacer este duplicado, duplicado, duplicado, duplicado, duplicado por varias veces. Lo mismo le pasará a la siguiente sección. Este será el nombre de la sección. Este será el nombre de la sección. Si venimos a nuestro preestreno, se puede ver que es como si fuera lo suficientemente bueno aquí. Lo único como el fondo, que nos gusta, se puede ver un color blanco por aquí es, tenemos, es porque el cuerpo de la página es blanco. Por lo que podemos seleccionar esta etiqueta corporal y llegar a Apariencia y llegar a fondo. Esto es blanco. Ok. Ven aquí y selecciona este color y da click en Seleccionar. Y ahora veamos cómo se ve exactamente. Sí, se ha ido. Es que está ahí, pero está bien. Puedes cambiar el color y ahora ya sabes cómo cambiar el color del cuerpo también. Estos son los videos como antes de que alguien compre su curso o algo así, pueden ver los videos por aquí. Es similar a Udemy, buen aula, y todas las demás plataformas que hay disponibles en el mercado. De esa manera, podemos diseñar esto y esta página en particular se hace ahora porque es un curso de un solo usuario significa que solo habrá un instructor para esta plataforma. Entonces no entraremos en muchos detalles al respecto. Eso es todo. En estas secciones como dentro de esta, encontrarás este título de video y el momento del video, la duración total que podrás ver en esta área en particular por ahora y todas estas cosas como vamos a estar diseñando eso, pero será como si haces click en Comprar ahora el, cuando vas a estar diseñando este sitio web y dinámico, vamos a ver. Si es posible podemos hacer una cosa mediante el uso de este diseño. Podemos hacer un curso más en PHP Laura va a usar, puedes hacer que este sitio web sea dinámico. No estoy seguro de eso, pero si está ahí, definitivamente te informaré. Y si hace clic en ya, ese cuadro de diálogo de pasarela de pago de reserva vendrá y llenará toda esta información por ahí. Y luego te mudarás a tu página de pago. No exactamente checkout, mi página de cursos o algo así. Pero también tenemos que ver cómo se ve exactamente en la vista móvil porque no queremos solapar eso y se está superponiendo. Selecciona el acordeón. ¿ Y dónde está ese año acordeón? Quiero darle margen ahora. Ese margen de botón y margen inferior fue de 50, creo que la última vez Veamos Prueba 50. No, todavía hay alguna zona ahí, por lo que tal vez sea 5555 tampoco es suficiente. Sesenta y cinco. Sesenta y cinco es como, de acuerdo. Sí, podemos trabajar en esto. Como no un problema. Por qué exactamente, esto está saliendo de la zona ahora, hazlo en este tamaño de pantalla. Entonces la segunda columna de cada fila es para el cronometraje. Tenemos que seleccionar segunda columna en cada fila para la marca de tiempo. Entonces vamos a dar uno, creo que uno estaba ahí, correcto. Vamos uno por uno hasta MD. Está bien. De qué tamaño es MD, MD, tenemos un problema. Por lo que LGB dará este año, vamos a dar tal vez 33 es bueno para ti. Y también estás bien, así que tres y año uno y descansa. Lo que vamos a hacer, seleccionaremos todo el texto por aquí. Vamos a seleccionar todo el texto que es párrafo encenderá estas opciones. Entonces digamos por casualidad, tomaremos una película de Lauder. Si el título es demasiado grande, entonces lo que tenemos que hacer, selecciona la primera columna de cada fila, que será el título de nuestro curso. Esto es MD. Md, lo daremos como guarida de LG. Podemos lograrlo. El momento es ahora creo que es apropiado apropiado en todos los tamaños de pantalla, sí. Y debido a eso, somos capaces controlar la duración de la oración. Creo que por ahora está bien. Está funcionando correctamente bien sin ningún problema. Pero si encuentras algún problema, entonces puedes enviarme tu archivo fuente sobre conductor actual a la velocidad yahoo.com. O podemos charlar sobre el canal de discordia donde todos nos vamos a unir muy pronto, y espero que muy pronto. Si ustedes muestran interés por unirse a eso, esta página está hecha y hagamos una cosa más. Por aquí. Tenemos notificación de mensaje eliminará este como mensaje. En lugar de mensaje. Vamos a mantener esto como lista de deseos. No es inútil. Tenemos que tomar su corazón por aquí. Tomaré este corazón y esto se deja caer. En realidad, no necesito un desplegable por aquí. Simplemente eliminaré éste. Esto también es un desplegable, creo que sí. Esto también es desplegable y ahí tampoco necesito un desplegable. Este elemento de navegación es el menú desplegable, por lo que vamos a duplicar este elemento de navegación. Y lo que sea que hay dentro de eso, que es una gota, desplegable. Voy a quitar el desplegable y pondré un ícono dentro de eso. Ese ícono vendrá en esta posición particular. Así que no te preocupes. Simplemente selecciona eso y escribe corazón por aquí. Tomaré este corazón. Y ahora seleccionando este elemento nav, acércate a la opción flexbox y basta con hacer click en esta área centro. Ahí vamos. Ahora no es centro. Nuevamente, duplique esto. Y ahora en esta área, vamos a tomar video o tal vez un botón de reproducción, que será éste. Eso es todo esto. Ahora yo DM nos llevará dos nos llevará a la página de la lista de deseos, y habrá un enlace también. Por lo que tomaremos un enlace tomaremos este enlace dentro de este y eliminaremos este texto. Y un enlace más dentro del otro, que es el video. Y deja caer este ícono dentro de este enlace. Seleccione este enlace y elimine el texto. Bien, bastante justo. Selecciona este ícono, ven a aparecer porque tenemos que hacerlo blanco de nuevo y hacerlo blanco. Este video también lo hace blanco. Donde está, dónde está, donde está listo para ir. Tenemos éste ahora. Todavía, está bien, Así que hemos creado esta lista de deseos y reproductor de video. Vamos a duplicar esta página una vez más y vamos a nombrar esto como, qué es este video significa, aprender o tal vez, lo siento, mis cursos, mis cursos. Y entonces estamos apenas un minuto, eliminaremos esto mis cursos. Lo que vamos a hacer en lugar de eso, vendremos a nuestra página de índice. Y voy a duplicar esta página de índice, doble clic. Y lo escribiré como mis cursos, mis cursos, y voy a ir a mi sección de cursos y eliminaré éste, esa imagen, esta Duvall. Por lo que no necesito, en lugar de todos los cursos, solo escribiré tus mis cursos y los cursos que se compren que vendrán aquí. Por lo que voy a quitar los cuatro y sólo me quedaré con éste. Y no necesito esta sección también, así que eliminaré esta fila y div por completo todo a la vez. Color del cuerpo, sí, podemos. Podemos cambiar el color del cuerpo como sabemos cambiar el color del cuerpo ahora. Y el año que viene, seleccionaré esto. Cambiaré este color a este oscuro. Sólo capturarlo. Y está bien. qué área está este cuerpo a la derecha? Creo que donde pongo ese cuerpo de color cuando el tamaño de esta página aumentará. Ahora lo que tenemos que hacer es como llegar a la página de índice. Nosotros, olvidé una cosa. Al igual que esta tarjeta debería estar en un enlace para que solo podamos llevarla de una página a otra página enlace y soltarla, soltar este enlace dentro de esta columna y simplemente soltar esa tarjeta dentro de esa. Selecciona ese enlace y simplemente quita ese texto que está ahí. Por la CFP. Al igual que vamos a comprobar como cualquier cosa está perturbada por aquí, nada de esta cosa que puedas hacer a todas las demás cartas. Simplemente selecciona este enlace y acude al panel Opciones. Y desde la página, podemos ir a la página Detalles del Curso desde su notificación dejará ya que es página visualizada que no tenemos, pero podemos crear en un segundo. En realidad, voy a entrar en mi página del curso y tú también estamos tenemos que hacer ese enlace, un enlace. dejaré caer dentro de esta tarjeta y tomaré esta tarjeta y la dejaré caer dentro de este enlace, seleccionaré este enlace y eliminaré este texto del año. Tenemos que ir a algún otro lugar donde el usuario pueda literalmente hacer click sobre los videos y reproducir. Por lo que vamos a mantener esto en blanco a partir de ahora. Pero voy a duplicar esta página de MyCourses una vez más y la nombraré como lista de deseos. Lista de deseos. Voy a hacer doble clic en esta página y cambiaré el nombre de esto como lista de deseos. Podemos tomarlo, podemos tomar un rumbo diferente, estandarte más de cuatro. No nos confundiremos. En lugar de éste, vamos a cambiar el nombre de esto y vamos a poner mucho de mi Epson Control P más L O R y entrar dos veces va a cambiar este texto. Nuevamente, tenemos un enlace y desde esta página podemos volver a ir a la página Detalles del Curso. Por ahora este punto de referencia de sólo para la referencia estoy enlazando a la misma página. Y en realidad está en dinámica. Va a estar en la misma página solamente. Cerrar página de detalles desde aquí también el usuario puede hacer click y puede ir al curso. Se lanzará para comprar el curso. Ahora tenemos esta como mesas de lista de deseos. ¿ Qué son estas mesas? ¿ Necesitamos estas mesas? ¿ Por casualidad? Ningún usuario y no necesitamos esto. Estoy eliminando estas páginas de registro registradas. Lo guardarás tal y como está. Sólo que lo que podemos hacer es que podemos simplemente, podemos forzar el cambio, tal vez unas opciones. Está oscuro. Entonces desde aquí también podemos hacerla blanca. Olvida la contraseña, o ya tenga una cuenta de inicio de sesión. Inicia sesión con Google Assignments, Facebook. Necesitamos esta página de perfil que necesitamos entonces mis trimestres que creamos, luego ingresa. Sí, necesitamos la tala también. Por lo que también estás vamos a cambiar este color a blanco. Índice. Creamos olvida contraseña ya estaba ahí. Tú también, tenemos que cambiar el color a blanco. Entonces Detalles del Curso que creamos, luego página en blanco que tenemos, pero no lo creo. Necesitamos esta página en blanco ahora, eliminando esa página en blanco. Ahora tenemos 404 también. En este 404 no necesitamos este nav lateral y de vuelta al dashboard y este pie de página no necesitamos realmente dejar que sea relacionado Footer. Estamos sí, esto es lo que hay ahí. Y éste cambiará el color de predeterminado a blanco. Este también cambiará el color de predeterminado a blanco. tanto que ese párrafo, éste es oscuro, por lo que lo haremos blanco. Entonces 404 es como servidor no encontrado o algo así como la página de error, las páginas que no queremos en usuario y eliminamos eso. Lo que queramos. Lo guardamos, guardamos eso. Y ahora, a partir de ahora, creo que terminamos con la mayoría de las cosas y pocas de las páginas quedan y la edición también está ahí. Por lo que es importante retirar esta barra navbar de nuevo de esta zona. Selecciona el perfil y hazlo blanco. Tenemos esta área. Yo no lo creo. Necesitamos esta área de proyecto y todas estas cosas forman que firma, firma y todo lo que no necesitamos. Como lo que necesitemos, lo guardaremos. Lo que sea que no necesitemos, eliminaremos eso. Así es como vamos a hacer en este video. Creo que eso es suficiente. Y en el siguiente video diseñaremos esta página donde está, dónde fue, a dónde fue. En lugar de detalles del curso, después de comprar el curso, esa página de aprendizaje, lo haremos, diseñaremos. Nos vemos en el siguiente video. 43. Finalizar LMS Front End Del Proyecto Tres: De acuerdo, entonces en este video veremos la página de aprendizaje. Duplicaré esta página Detalles del Curso, y cambiaré el nombre de esto como aprendizaje, ¿verdad? Aprendizaje ortográfico. Y es muy simple. Simplemente eliminaré estos elementos innecesarios de los que no necesitamos el título de la página. Lo haremos pequeño. Tal vez H4 está bien. Y este acordeón, cambiaremos el acordeón de año a año. Y ya no necesito la tarjeta más de un año. Y solo dejaré caer este acordeón dentro de esta zona. Vamos a cambiar esto a un qué, ¿cuál es el tamaño de los ocho? Éste estará lleno. Suficiente justo. Tenemos que hacer algunas modificaciones como exactamente tenemos que hacer. Veremos primero por aquí como cómo está saliendo exactamente. Creo que es bueno ir, no un problema. Ahora iremos al acordeón. Eliminaré estos dos ítems de aquí. Podemos duplicar eso. Y entraré dentro de esto. Y ahora desde el año, tengo que eliminar todos estos roles. Primero. Quiero algo de área vacía, y ahora voy a empezar desde cero. Voy a tomar una fila una vez más. Ahí vamos. Tenemos una fila por ahí. Entonces tomaré una columna, dejaré caer una columna dentro de esto, y esta columna será un título. Y tenemos la opción, deberíamos tener la opción de cambiar el video. Entonces estaré tomando esto dentro de un enlace. Y este enlace, volveré a tomar un párrafo y dejar caer ese párrafo dentro de ese enlace. Voy a quitar esa área de enlace. Y este párrafo, sólo lo haré blanco. Este será un nombre de video, por lo que tal vez pueda ser un video de nombres largos. Entonces estoy llevando epsilon por ahí, solo tomándolo como esto y esto. Entonces una línea duplicando esta una vez más y haciendo un tiempo como 0335. De acuerdo, entonces esta columna es, estamos en tamaño de pantalla LED. Esta columna será de ocho. Y esta, esta columna será para la alineación a este lado, está bien. En otro tamaño de pantalla también, se ve bastante bien. Y en este tamaño de pantalla, viene uno tras otro. Por lo que tenemos que seleccionar éste. Ahora. ¿ Cuál es el tamaño de pantalla MD a partir del año? Vamos a empezar a hacer eso. A lo mejor podemos tomar como ocho o diez también está bien. Diez y luego podemos hacerlo como dos por aquí. Éste también es bueno. Éste, o éste tenemos problema en pantalla móvil. En móvil tenemos que hasta año podemos llegar a diez. Pero en móvil tenemos que darle algo de espacio extra al temporizador. A lo mejor tres es bueno. Sí, tres es bueno. Tenemos tres, entonces necesitaremos nueve sobre su tamaño de pantalla es bueno. En el tamaño de la pantalla es bueno. Este tamaño de pantalla es bueno. El tamaño de la pantalla es bueno. El tamaño de la pantalla es bueno. ¿ De acuerdo? Por lo que todos los tamaños de pantalla son buenos, lo suficientemente bueno. Entonces tenemos que hacer, tú eres como, ¿cuál es la última sección? Esta, esta columna es sólo la última sección. Entonces tenemos que poner el, ¿qué dices? Margen inferior 65 píxeles para que no se superponga en nuestra barra de navegación inferior sección Navbar uno está ahí. Ahora viniendo al acordeón. Duplicemos estas secciones varias veces para que podamos ver cómo se verá exactamente cuando tengamos varias secciones en vista móvil también. Para que puedan ver tenemos un buen margen por aquí y tenemos muchas secciones aquí. El video será en esta área. Lo que podemos hacer, tenemos altura, así que vamos a quitar esa altura y dejarla estar en la altura predeterminada ya que creo que tenemos que quitar la altura de esa página de detalles. Además, cuando llegue el video, equilibrará automáticamente su altura. También se hace la página de aprendizaje. Veamos la vista previa. Así es como va a verse la página de aprendizaje. Creo que esta sección en particular y esta área en particular se hace. Entonces déjame ver en mi libro si me perdí algo, creo que esta área está hecha. Este acordeón y menos animación le gusta por defecto ya que la animación está ahí. Hemos hecho tan bien hasta ahora. Y la página de lista de deseos también está vinculada. Creo que no está vinculado a tal vez. Vamos a navbar y empezar a vincular la página. Lista de deseos dos será la página de la lista de deseos es la lista de deseos y esta es la página de aprendizaje. Entonces irá a mi aprendizaje, no aprendiendo realmente, mis cursos de mis cursos. Aquí están mis cursos de tu parte. Si alguien hace clic en eso, irá a la página de aprendizaje. Así será el flujo. Así que vamos a revisar el flujo una vez en la vista previa en vivo, deja que la página se actualice. De acuerdo, entonces tenemos esta página por aquí. Si hago click en esto me llevaré a la página Detalles del Curso donde estarán ahí todos los detalles de la página. Y sí, bastante bueno. Entonces desde aquí puedo ir a la lista de deseos donde mi lista de deseos productiva. Ahí. Este es mi producto de lista de deseos. Y si vuelvo a hacer clic en el producto de la lista de deseos, me llevará solo a esta página. Y si voy a mi página de aprendizaje, entonces este es mis cursos los que compré. Y si hago clic aquí, me llevará a la página de aprendizaje. De acuerdo, hasta ahora tan bueno. Creo que hemos completado nuestro front-end poco aquí y allá, como vincular esta área en particular. Y hasta ahora tan bueno. Entonces creo que hemos computado nuestro front-end. Nos vemos en el siguiente video. 44. Ziara Commerce: cómo crear una cuenta de reflujo: Hola a todos. Entonces en este video, aprenderemos a configurar un sitio web de comercio electrónico en estudio Bootstrap para que tengamos que comenzar con Bootstrap studio y crear un nuevo diseño en eso. Entonces nombraremos este diseño en Zara y seleccionaremos una plantilla en blanco y haremos clic en Crear. Entonces este es nuestro proyecto Zara Blank. Después de eso, tenemos que ir a la configuración y desplazarnos hacia abajo hasta E Commerce. Así que una vez que haces clic en Comercio electrónico, tenemos que dar click en Administrar proyecto. Entonces, una vez que hagas clic en Administrar proyecto, te llevará a reflujo Así que ya estoy logueado en reflujo. Si no lo estás, tienes que crear una cuenta de reflujo. Entonces, una vez creada la cuenta de reflujo, tienes que hacer clic aquí como un nuevo proyecto Ya tengo dos proyectos de demostración para mí. No verás estos dos proyectos de demostración, pero verás un nuevo proyecto. Entonces haces clic en Nuevo proyecto y nombra este proyecto o tal vez nombra a esta empresa como Zara. Entonces, una vez que nombra a la empresa, luego haga clic en Siguiente. Te preguntará por el país. Entonces haré clic en Buscaré la opción de detalles de factura de India si tiene alguna opción específica de detalle de factura aquí, así que voy a escribir Zara limited. Puedo escribir mi dirección como Bangalore Airport Road, y voy a escribir mi ciudad como Bangalore, estado como Karnataka, código postal Todo esto es datos de Dummi. Entonces una vez que haya terminado con esto, haré clic en siguiente, y luego me pedirá que elija el plan. Entonces como esto es para una demo, iremos con plan gratuito. Voy a hacer clic en Elegir aquí, y después voy a dar clic en siguiente. Entonces ahí estoy en mi cuenta de reflujo. Entonces, si voy a la configuración general, entonces mi cuenta de reflujo se crea con éxito Ahora puedes ver mi ID de proyecto de cuenta de reflujo. Este es el nombre de mi sitio web o el nombre del proyecto Zara. Cambiemos la moneda a INR, que es rupias indias La medición será de kilogramos y centímetros. Seleccionaré mi zona horaria desde aquí. Quiero mantener el tiempo en AM y PM. Proyecto vinculado, lo haremos más adelante. Así que una vez hecho esto, simplemente haz clic en Guardar proyecto. De esta manera, terminamos con nuestra configuración de cuenta de reflujo usando nuestra marca Zara Entonces en el siguiente video, veremos cómo exactamente podemos conectar nuestro proyecto al estudio Bootstrap. 45. Ziara Commerce: cómo conectar Reflow con Bootstrap Studio: Impresionante. Así que bienvenido de nuevo. En este video, veremos cómo podemos configurar nuestro proyecto de reflujo a Bootstrap Studio Entonces, en Bootstrap Studio, haremos clic en la configuración y desplazaremos hacia abajo y daremos clic en Comercio electrónico. En este proyecto selecto, veremos nuestro proyecto Zara apareciendo aquí ahora. La herramienta de reflujo será Virgin two. Y el modo de prueba activo nunca lo será. Una vez hecho esto, haremos clic en Guardar, y ya está. Nuestro proyecto de reflujo llamado Ziara ahora está conectado con nuestro estudio bootstrap Entonces en el siguiente video, comenzaremos a agregar productos y otra información en nuestra cuenta de flujo real. 46. Ziara Commerce: cómo crear e importar productos en reflow: Impresionante. Entonces en este video, comencemos a crear los productos y la otra información. Entonces antes de eso, lo que tienes que hacer, simplemente haz clic en la descripción de cualquier video de esta lista de reproducción, y aquí puedes encontrar Resource Link. Simplemente haz clic en Resource Link, y te llevará aquí a esta carpeta Digi Box, y podrás descargar el archivo zip Entonces una vez que tu proyecto esté descargado, solo ven aquí y expande este proyecto. En este proyecto, encontrarás todos los recursos que se requieren para este proyecto. Así que comencemos a crear el producto en nuestra página de reflujo. Entonces saltaré rápidamente a nuestra cuenta de reflujo y haré clic en el producto por aquí Pero antes de crear los productos, tenemos que crear las categorías. Entonces iremos a categorías y haré clic en la categoría uno, y tomaremos ayuda de nuestro PDP uno Entonces tenemos Western Ware de mujer. Entonces copiaremos este nombre y lo pegaré aquí. El mismo nombre vendrá aquí. Entonces si quieres agregar alguna descripción, entonces la descripción estará ahí y la categoría padre. Entonces esta es una categoría padre, así que no queremos agregar ninguna categoría padre por aquí. Así que haz clic en guardar. Entonces mi primera categoría está lista para usar, y luego podemos comenzar a agregar las subcategorías en esa Entonces voy a copiar este nombre. Y simplemente lo voy a añadir a su. Y por ahora, esta categoría de padres será de ropa occidental femenina. Entonces tenemos vestidos. Así que agreguemos los vestidos en western wear de mujer jeans en ropa western de mujer, nuevamente, playsuits, ropa western de mujer y camisetas. Que volverá a venir en ropa occidental femenina. Voy a crear esto. Por lo que la categoría de ropa occidental femenina se crea con las subcategorías Ahora vamos a la India y la moda fueron. Entonces voy a crear una nueva categoría, india y moda eran y la voy a mantener ninguna, así que va a crear como categoría padre, y dentro de eso tenemos dos categorías diferentes que tenemos que crear aquí. Esto será en indio, y este será el segundo que volverá a ser en indio. Bien. Así que hemos creado nuestras subcategorías y categorías Ahora podemos dirigirnos a agregar nuestros productos. Así que voy a hacer clic en los productos y todos los productos. Aquí tenemos opción de importar y exportar la lista de productos, que te he dado. Esta es la lista de productos que puedes usar. Pero un producto te mostraré cómo puedes agregar ese producto en tu lista de productos, y luego incluso también subiré esta lista de productos en mi cuenta de reflujo Haremos clic en agregar producto. Después hemos agregado producto físico y producto físico. Esta opción solo está disponible en versión gratuita. El producto digital y la tarjeta regalo están disponibles en el modelo de suscripción. Por lo que haremos clic en el producto físico aquí, y aquí tenemos que agregar los detalles del producto. Así que volvamos a nuestra página de descargas. Vamos a ir al PDP, vamos a ir a Mujeres. Voy a añadir una camiseta. Entonces solo tomaremos el nombre, camiseta de Zara. El nombre vendrá por sí mismo, y tenemos que añadir una descripción. Ahí vamos. Entonces tenemos la descripción. Entonces tenemos extras. Entonces esta es una insignia promocional. Entonces como tenemos una camiseta de colección especial de Zara, entonces solo podemos nombrarla como colección especial. Esto vendrá como una etiqueta por allá, colección tan especial como etiqueta. Entonces tenemos que agregar las imágenes aquí. Entonces haremos clic en agregar y como es una camiseta, veremos qué camiseta tenemos que subir , cuál se ve genial. Esto ya está ahí en la lista de productos, así que me saltaré eso y usaré Producto 25 y haré clic en Subir. También puede agregar videos y múltiples imágenes también. Ahora, fijemos el precio de este producto. Entonces para esto, el precio del producto estará en algún lugar alrededor de tal vez mil 500. Y esto se cobra impuesto sobre el producto. Yo sólo puedo quitar esto. Esto está bien. No se requiere impuesto para este producto. Producto en venta, podemos encender y podemos dar el precio original. Entonces digamos dar el precio original ya 2999 es el precio original, y lo estamos vendiendo en mil 500 Y también tenemos que mencionar periodo de venta que tenemos que seleccionar la fecha. Por lo que la venta inicia a partir del segundo de este mes, y va hasta, digamos, el 31 de diciembre. Entonces este es el rango en el que se va a correr esta oferta. Después de eso, la oferta bajará. Haré clic en Aplicar. Entonces disponibilidad, sí. Este producto está disponible en tienda. Store es nuestra tienda de flujo real, y tenemos que establecer cuál es la cantidad mínima de compra. Por lo que la cantidad mínima de compra para este producto será uno y el máximo puede ser de cinco. ¿Cuál es el peso de este producto en KGS? Pesaré esto como 0.300 Kg. Eso significa 300 gramos. tiempo estimado de envío será aproximadamente de siete días y el método de entrega disponible será todo. Entonces aquí viene nuestra categoría, luego vamos a categoría Camiseta y también comprobaremos esta categoría Western Ware para mujer también porque la camiseta viene bajo Western Ware para mujer Esta categoría está hecha. Entonces inventario, cuántos inventarios tenemos que es stock mantener SKU unidad Entonces, ¿cuál es el SKU para este producto? Digamos que voy a nombrar este producto SKU comienza con es Zara luego ropa occidental de mujer y camiseta. Y tal vez pueda separar este nombre por un guión y un número. Entonces tengo que agregar un número para eso. Entonces solo voy a agregar un número aleatorio como 98, cinco, seis, 21. Este es el número SKU de este producto específico. Entonces el sistema de inventario es sencillo. También puedes hacer clic en Avance. Anticipado significa la cantidad de stock disponible. Así que la cantidad de stock si vas y te mantienes simple, este producto nunca se agotará. Si vas por adelantado, tienes que dar una cantidad cuántos productos tienes de esto en tu inventario. Entonces vamos a dar mil como inventario. Mostrar cantidad en la página del producto. Para que el usuario pueda ver cuántos productos quedan en nuestro inventario. Variedades, si tenemos variedad, entonces tenemos que agregar variedad en eso. Entonces digamos que tenemos talla, color, etcétera, todo eso. Entonces específicamente, vamos a tener talla y voy a dar click en agregar variedad. Por lo que el primer tamaño será pequeño. El precio, el precio original y el peso serán los mismos. Si queremos cambiar, podemos cambiar esto también. Entonces otra variedad será mediana, luego grande, luego extra grande, y luego extra grande. Se pueden agregar los SKU para esto. Así que tomemos este SKU de aquí, y luego volvamos y hagamos clic en Editar. SKU para esto será S. Como es uno pequeño, voy a pegar este M voy a pegar este L. Así que esto es, de nuevo, aleatorio. No sé si esta es una forma correcta de dar la excusa o no. Esto es solo por el bien de esta manifestación, nada más. Pegar extra grande. ¿Cuántas cantidades tenemos en stock para esto? Digamos 100 mil mil mil mil y mil. Voy a hacer clic en confirmar. El precio de las variedades son iguales, así que por eso no se muestra. Pero si quieres cambiar el precio, nosotros podemos. Digamos que 14 doble nueve es el precio para pequeños o tal vez 13 doble nueve es el precio para los pequeños. Y mediano grande va con 14 doble nueve y 14 doble nueve, y el doble Excel va con 15 doble nueve. Entonces este es el precio por el que se va a vender, y luego tenemos que mencionar también el precio original. El peso está bien, y haremos clic en Confirmar. Entonces así es como podemos crear nuestras variedades. Entonces tenemos nuestra personalización. Si tenemos alguna recomendación de personalización, podemos agregarla también Agregar opción. Si quieres personalizar esto agrega tu nombre en la camiseta. Instrucción requirió tu nombre. Esto será una casilla de verificación o tal vez una entrada de texto para obtener el nombre por ahí La longitud mínima requerida es una y la longitud máxima requerida es 277. Esto no es obligatorio, y si están tomando esta opción, entonces tienen que pagar 200 rupias adicionales. Y si quieres crear una opción más, entonces puedes ir con la opción Agregar y luego simplemente puedes hacer clic en Confirmar y ordenar por número uno y hacer clic en Guardar. Y ahí vamos. creado con éxito nuestro primer producto. Y ahora lo que podemos hacer, podemos importar nuestros productos de inmediato Así que sólo voy a hacer clic en Importar. Haré clic en Elegir Wile, y solo seleccionaré este producto, y haré clic en Subir Se selecciona el producto. En los ID duplicados, actualice el producto existente. Si hay un ID duplicado y puede que no haya nada, simplemente haré clic en Importar. El archivo CSV se cargó correctamente. Apenas cerca y apenas refrescar los. Se pueden ver los productos que están importando. Así que ahora puedes ver la importación de productos en proceso. Así que uno de 24 productos. Entonces, a medida que continúes refrescándose, podrás ver que los productos se están agregando. Tenemos buena cantidad de productos con nosotros, y ahí vamos. Todos los productos se agregan con éxito en nuestra cuenta. En este video, hemos aprendido a crear un producto y a importar el producto desde Eso es todo para este video. Y en el siguiente video, comenzaremos a diseñar el sitio web en el estudio Bootstrap. 47. Ziara Commerce: categoría de referencia a los productos: Antes de diseñar el sitio web en el estudio Bootstrap, una cosa que tenemos que hacer muy rápidamente es asignar las categorías al producto. Entonces esta categoría es una colección. Voy a dar click en esto y simplemente iré a categoría, y esta categoría será parecida a la india. Sólo voy a comercializar en la moda india para la india y la moda eran. Entonces esto se hace esta categoría, rápido, iré y configuraré la categoría como vestidos. Este también vestido de vestir. Simplemente desmarcaré esto Estos dos, tres y cuatro van por debajo de los vestidos. Así que vístete en Western femenino. Así hecho con eso. Entonces tenemos a Sari uno, dos, tres, cuatro, creo, sí, cuatro saris tenemos Haremos clic en la categoría y solo seleccionaremos saris de moda india. Impresionante. Tan solo mantén un ojo en lo que hemos agregado. Éste, creo que esto irá en trajes de juego y confirmará. Bien, esta es una camiseta. Entonces esta va en categoría de camiseta. Uno, dos, tres, cuatro. Este cuatro irá en su lugar categoría de juego de traje, tal vez. Sí, vamos a darle ahí. Vaya, no he hecho clic en esta categoría. Por lo que el Western femenino es la categoría primaria, con la que tenemos que ir. Estos son jeans. Entonces solo seleccionaré los cuatro y haré clic en Jeans, y ahí vamos. Y pasemos ahora a la segunda página. Bien, entonces ahora vamos a ir con éste. Estos son Uh, dioses y confirman Sari Esto va a ser en Sari. Y da clic en Confirmar. Creo que no hemos agregado nada en esta categoría. Bien, entonces tenemos que ver. Bien, esto es lo que es uno de culto. Entonces restableceremos esto de esto a esto. Confirmar. Y ahí vamos. Por lo que hemos agregado todos los productos en sus categorías específicas. Bien, genial. Bastante justo. Empecemos en el estudio bootstrap en el siguiente video. 48. Ziara Commerce: diseña NavBar y Slider: Impresionante. Entonces nuestro proyecto de estudio bootstrap llamado Zara ya estaba listo antes comenzar a crear la cuenta de flujo Z. Lo siento, cuenta de reflujo. Barra NAF, sí. Y aquí agregaremos nuestra imagen de marca. Así que simplemente voy a escribir imagen por aquí y traer esta imagen y eliminar este texto. No necesitamos este texto. Inicio. Por lo que el primer artículo será en casa. El segundo artículo serán nuestras dos categorías aquí. Entonces solo lo nombraré como indio y occidental. Entonces Indio e Indio y Occidental es categorizar lo que nos interesa. Y luego vamos a crear Vamos a Ecommerce Ver tarjeta vendrá, y el botón de inicio de sesión vendrá justo después de eso. Así que hagamos clic en el botón Iniciar sesión y alinearnos al final y al botón de la tarjeta y nuevamente, alinearlo al final. Hagamos clic en Navbar y apaguemos la opción fluida, y rápidamente tengamos una vista previa de nuestro sitio web Entonces así es como va a quedar el sitio web, y cambiaremos el aspecto y la sensación a medida que avancemos. Tomaré un botón rápidamente y lo guardaré aquí y llevaré el botón dentro de esta opción de ver carrito, y pondré el lapso dentro de este. Y yo voy a Ups, quita esto. Y si, este botón es ahora un botón de tarjeta. También le podemos dar un icono. Haga doble clic, seleccione los iconos de línea y el icono de la tarjeta. Ir a apariencia y simplemente aumentar el tamaño de la fuente y eliminar el texto. Entonces bien. Entonces lo que hice es que acabo de tomar la barra de navegación e hice un default. Este elemento de navegación hizo un valor predeterminado, y la tarjeta volví a hacer una predeterminada. Pero el botón de inicio de sesión, lo guardé al final de esto. Comencemos a importar las imágenes como se nos requiera. Primero, tomaremos el logo. Sólo voy a importar el logo, y ahí vamos, doble clic. Tenemos nuestro logo aquí y clic en Bien ya que viene demasiado grande. Entonces solo tenemos que mencionar el ancho. Sólo voy a mencionar como 120. Uh, ven a la vista previa y verás que hemos puesto nuestro logo. Bien, así que volviendo a bootstrap studio, este logotipo será redirigido solo a la página de Índice, y el inicio también será redirigido a la página de Índice Seleccionaremos la barra de navegación aquí y activaré el estado Active Smart Active Cualquiera que sea la página que esté activa, se resaltará automáticamente Cambiemos este botón a link, y por ahora, voy a poner la clave hash por aquí. Y si quieres cambiar el estilo, siéntete libre de cambiar el estilo de este. Bien, siguiente paso, crearemos un deslizador. Agreguemos Carusal y estoy aquí con la cousal vamos a importar los Corusalimages página de destino, el héroe, el escritorio y estas tres páginas de héroes están ahí. Entonces tenemos las imágenes aquí. Entonces voy a hacer doble clic en esto, tomar el héroe uno, hacer clic Bien, siguiente. Haga doble clic. Hemos agregado nuestros deslizadores por aquí. Entonces después de eso, comenzaremos a crear nuestro resto de la landing page, pero lo haremos en el siguiente video. Entonces ve a la gente en el siguiente video. 49. Ziara Commerce: arregla el button flotante en el NavBar: Antes de seguir adelante, lo que vamos a hacer aquí es el botón At tocad, que es ahí viene justo en el centro de la Navbar No queremos este botón por aquí. Entonces queremos el botón a la derecha de la Navbar. La razón por la que está en el centro es sólo porque si ves el botón sine out, sine in button, específicamente, sine in button está alineado al final. Entonces, si solo te mueves de fin a predeterminado, el botón Atto Cart se acercará al botón de inicio de sesión Entonces ahora solo necesitamos un espaciado. Bien, tengo que seleccionar el botón de ver tarjeta y venir a la clase, y aquí tengo que agregar un extremo de margen para clase. Y así es como solucionamos el tema del botón AT Cart flotando justo en el centro de la NAFBA En el siguiente video, comenzaremos a crear las páginas para la categoría dedicada, y seguiremos trabajando en el sitio web. Así que nos vemos amigos en el siguiente video. 50. Ziara Commerce: página de inicio para finalizar: Impresionante. Entonces comencemos a diseñar el sitio web. Entonces esta es una página de inicio, y en la página de inicio, lo que necesitamos son casi todos los productos que están ahí, pero con un diseño específico también. Entonces aquí crearemos rápidamente un contenedor. Voy a tomar justo debajo del carrusel. Y en este contenedor, voy a tomar una fila. Y voy a añadir una columna dentro de eso. Una vez agregada esta columna, tomaré un componente de imagen y después de la imagen, tomaré un párrafo. Tomaré un enlace también, y dejaré caer casi la imagen dentro de esta columna, y moveré la imagen y el párrafo dentro de este enlace. Siempre que el usuario haga clic en cualquier lugar sobre la imagen o el texto, el usuario será redirigido a una página específica donde queremos que se redirija Con esto, lo que haremos seleccionamos la etiqueta de enlace por aquí, rápidamente llegamos a nuestro CSS y solo agregamos decoración de texto ninguno. De esta manera, el subrayado se apagará y tenemos que cambiar el color también Entonces seleccionando el enlace, vuelve a la opción y simplemente desplázate hacia abajo para colorear y hacerlo oscuro. Y como esto tiene que ser un centro alineado, así seleccionaré la columna, vendré a la opción de alineación y simplemente haga clic en la alineación central. Necesito tres columnas por aquí con imagen y párrafo incrustados en eso. Entonces duplicaré esta columna dos veces más, y ahí vamos. Tenemos tres columnas agregadas en esto. Después de esto, comenzaré a agregar las imágenes dentro de esto. Entonces para eso, necesitamos importar la imagen. Así que rápidamente acude a nuestra carpeta de recursos. Ven rápidamente a la carpeta de recursos y solo encuentra unos tres PDP, que necesitamos Vendremos a Cords y seleccionaré esta imagen y solo la importaré en bootstrap studio. Voy a venir aquí. Iré a categoría de vestimenta. Seleccionaré cualquier vestido. Voy a importar esto aquí y vendré en categoría Jeans y solo voy a importar la imagen de Jeans sobre. Entonces en la primera, rápidamente agregaré esta imagen. En el segundo, agregaré rápidamente el vestido, y en el tercero, agregaré rápidamente los jeans. Entonces necesito todas estas tres imágenes en una forma responsiva. Entonces seleccionaremos las tres imágenes, y simplemente voy a hacer clic en Responsive por aquí y allá vamos. Voy a cambiar el texto de párrafo a voy a tomar el nombre y sólo voy a pegarlo aquí. Entonces tenemos vestidos, luego tenemos jeans, y ahí vamos. Entonces aquí, lo que exactamente tenemos que hacer ahora es seleccionar este enlace y darle la redirección de la página a la página Cords Seleccionaré el enlace de vestidos. Entonces este enlace pertenece a vestidos, y seleccionaré a vestidos, y este enlace pertenece a jeans. Así que simplemente voy a hacer clic en Jeans para que cada vez que el usuario haga clic en esto, sea redirigido a esa página específica Sólo para comprobarlo muy rápido, tomaremos una vista previa. Entonces si vengo aquí y hago clic en esto, me está llevando a la página de Cords. Volveré y haré click en estos vestidos. Entonces viene en la página de aparadores. Y cuando hago clic en Jeans, viene en la página de Jeans. Creo que el Navbar y el pie de página no se copian en la página de Cod, así que rápidamente volveremos a la página de Índice Seleccione la barra de navegación y el pie de página, copie a la derecha, copie dos, seleccione varias de nuevo y simplemente haga clic en Tarjetas solo una y enlace y copie nuevamente Entonces de esta manera, el Navbar y pie de página también están en la página de la Tarjeta Así que selecciona el contenedor y rápidamente dale un margen superior de cuatro. Simplemente mantendremos el margen superior. Solo mantendremos cuatro como número estándar por aquí. Podemos agregar rápidamente un texto justo sobre la fila en el contenedor, y esa será una etiqueta de encabezado. Rápidamente agregaré una fila por aquí, lo siento, no aquí. Entonces esta columna no deseada vamos a eliminar, y esto nombraremos como comió al menos y rápidamente cambiaremos la alineación del texto al centro. A continuación de la misma manera, vamos a crear una columna más, pero esto lo nombraremos como llegada de ZiaranW Y aquí, sólo para hacer un cambio sencillo, agregaremos una columna más por aquí para que sean cuatro. Y la estructura también vamos a cambiar ligeramente por aquí. Entonces justo antes del párrafo, agregaremos un encabezamiento. Y justo después del párrafo, crearemos un párrafo más. Este será un CTA llamado Shop Now. Impresionante. Y esto vamos a repetir en todos los lugares. Así que sólo lo copiaremos y lo dejaremos caer aquí. Tomaremos copia una vez más, caer aquí, tomaremos la copia una vez más y la dejaremos caer aquí. Simplemente toma esto rápidamente y muévelo un paso por encima o rápidamente toma esto y muévelo un paso hacia abajo. Toma la tienda ahora, da un paso hacia abajo, toma la tienda ahora y un paso hacia abajo. Impresionante. Entonces, para Shop Now, específicamente, necesitamos un subrayado Así que haz doble clic en Comprar ahora y activa la opción de subrayado de esta área Fresco. Entonces sí, tenemos que tomar esto en el centro. Por lo que este párrafo será ahora una copia de subtítulo. Entonces ustedes vayan y hagan todo lo posible para agregar un subtítulo por aquí Y ahora tenemos que añadir las imágenes que tienen más probabilidades de ser una nueva llegada. Entonces me llevaré un Sari e iré a Weston. Me llevaré una camiseta. Entonces tomemos una camiseta guapa, a lo mejor esta, un traje de juego, a lo mejor esta. Y necesitamos un vestido más. Solo toma rápidamente este. Nombraremos esta zona como traje de juego, camiseta, vestidos, y lo siento. Impresionante. Así que haga doble clic y seleccione el traje de juego. Haz clic en Bien, ve a jeans. No, lo siento, ve a la camiseta y selecciona la camiseta. Selecciona el vestido y el último pero no menos importante, selecciona el Sari Vayamos rápidamente y cambiemos la redirección. Voy a seleccionar esto y esto irá a Playsuit ahora. Entonces este es mi enlace de juego. Este enlace será camiseta El tercer enlace serán vestidos, y el cuarto enlace será Sis. Impresionante. Simplemente guarde esto rápidamente y tome una vista previa. Así es como se ve nuestra página de destino o página de inicio. Estas son nuestras pancartas de héroe. Tenemos tres estandarte de héroe. Puedes agregar tanto como puedas. Entonces hemos seleccionado para usted, y tenemos enlaces para eso también y Z son una nueva llegada, y tenemos enlaces para eso también Y luego tenemos un pie de página rápido. Impresionante. Así que la página de inicio o la landing page se ve bien, y ya podemos avanzar. En el siguiente video, comenzaremos a agregar los productos dinámicos en todas las páginas respectivas que son nombrados por sus categorías. Así que vea en el siguiente video, gente Bien. 51. Ziara Commerce: extracción de productos dinámicamente: En este video, comencemos a buscar los productos dinámicos a las páginas de categorías respetadas Esta es una página de cordón. Así que rápidamente llegaremos al ecommerce y llegaremos a la lista de productos y tomaremos esta lista de productos y la dejaremos caer aquí. Entonces ves que los productos ahora están apareciendo uno por uno. Rápidamente vendremos aquí, tomaremos margen superior y cuatro como número estándar. Y ahí vamos. Entonces no queremos que el producto aparezca uno tras otro. Entonces llegaremos rápidamente al panel de opciones, y en el layout, en vez de menos, solo haremos tarjetas, y ahí vamos. Así que ahora tenemos todos los productos en formato de tarjeta. Rápidamente agregaremos un contenedor y moveremos esta lista de productos dentro del contenedor. Así que bajando el contenedor y tomando esta lista de productos y empujándolo dentro del contenedor, así tenemos algo de borde por ahí. Así que vamos a tener una vista previa rápida. Sí. Así que los productos vienen de buena manera. Tenemos agregar al botón Cat también aquí. Impresionante. Así que en el futuro, lo que queremos es que no queremos que todos los productos se enumeren en esta página porque esta página está creada específicamente para la categoría Cordones solamente. Entonces lo que voy a hacer, solo voy a tomar un encabezado por aquí, y agregaré dentro de este contenedor, y voy a cambiar el nombre de esta página como Cods seleccionaré esta lista de productos ahora Rápidamente me desplazaré hacia abajo llegaré a esta opción de fuente de datos y aquí seleccionaré la categoría y de aquí, solo seleccionaré la sección Cordones femeninos y voy a dar click en Elegir. De esta manera, solo aparecerá aquí el producto Cords que hay en nuestra cuenta de reflujo Rápidamente toma una vista previa, ahí vamos. Solo tenemos tres productos en la sección Cordones y los tres productos están apareciendo en esta página específica. Avanzando, rápidamente iremos a vestidos y de la misma manera, tomaremos un contenedor tomaremos un encabezado y tomaremos lista de productos. Cambia el diseño de menos a tarjetas, desplázate hacia abajo y cambia la categoría de todos los productos a solo vestidos y haz clic en Elegir y cambiar el nombre de encabezado a vestidos. Rápidamente toma una vista previa, y ahí vamos. Entonces tenemos la vista previa de esta página, que muestra todos los vestidos. Entonces, de manera similar, tenemos que hacer para todas las páginas de categorías que se enumeran aquí. Entonces, antes de continuar y comenzar a agregar la lista de productos en otras páginas también, una configuración pequeña y rápida que tenemos que hacer en la sección de enlace del producto, es que tenemos que especificar después de que el usuario haga clic en este producto específicamente cuándo será redirigido a una página donde vendrá la página de detalles del producto Llamamos a esa página como página PDP significa página de detalles del producto. Tenemos que darle un camino a eso. Cómo exactamente tenemos que dar la ruta dará primero una clave de barra diagonal y luego nombrará la página donde tiene que ser redirigida Eso es pdp dot HTML. Luego agregaremos un signo de interrogación por aquí, y luego agregaremos producto es igual a corchete, abierto, ID, corchete rizado, cerrar, y presionar Enter. De esta manera, definimos que cada vez que un usuario haga clic en este producto, para mostrar la página de detalles del producto, el sitio web redirigirá al usuario a la página PDP y mostrará el detalle por ahí Tenemos que ir rápidamente en la página del PDP y tenemos que agregar el componente del producto aquí Antes de eso, simplemente agregaremos rápidamente un contenedor y agregaremos rápidamente componente del producto dentro de este contenedor. Voy a guardar este proyecto. Voy a ir a los vestidos, y voy a ir a la vista previa. Voy a hacer clic en cualquiera de la imagen, y bang. Ahí vamos. Entonces este producto viene ahora dinámicamente. Regresa, da click en este producto. Este producto ya viene. Entonces, si haces clic en esta imagen, la imagen aparece así. Interesante, ¿verdad? Copia este parámetro y ve a la página de autos y pégalo aquí y presiona Enter. Rápidamente, lo que haremos copiamos esto en todas las demás páginas listadas de categoría. Voy a hacer clic derecho en copiar y pegar, copiar dos, llegaré a múltiples, y haré clic en cada página individual por separado. Entonces quiero esto en jeans. Quiero esto en la oficina. Pedidos no es lo que queremos, detalles del pedido, no PDP, sin playsuits si, saris si, éxito, no camiseta, si, el escenario, no Y esta vez, no voy a dar click en este enlace de aquí. No quiero que la configuración sea la misma en todas las páginas. Dejo esto apagado y voy a dar click en Copiar. Ahora voy a ir rápidamente a las páginas individualmente. Creo que nos fuimos de la India, rápidamente agregaremos este componente a la India. A partir de aquí, puedo ir rápidamente y agregarlo sobre el indio y vuelvo. Por defecto, vendrá en el último de todos los componentes. Solo tenemos que moverlo y colocarlo justo en el centro de Navbar y Putter Bien, entonces esto es sólo para la categoría india. Entonces seleccionaré esto y me desplazaré hacia abajo, y solo cambiaré esto a la moda india y haré clic en elegir. A tipos indios están aquí. Oh, los gens también vienen en indio. Bien, lo suficientemente justo. No hay problema. Vamos a los vaqueros, llevémoslo al centro. Y seleccione la lista de productos. Ven aquí y cambia la categoría a genes. No se encontró ningún producto. A lo mejor podría haber algún extravío en la cuenta de reflujo Tenemos que ir rápidamente y reasignarle los genes. Llévenla al centro. Seleccione el producto que menos desplácese hacia abajo. Y esto es para oficina. Entonces oficina, creo que podemos asignarle vestidos solo por ahora. Y si, ahí vamos, no ordena nada. Juega a los trajes, seleccionaremos esto, lo llevaremos al centro, seleccionaremos el componente menos producto y rápidamente iremos a los playsuits Y por cierto, tenemos que cambiarle el nombre a esto también. Juegos de trajes. Entonces aquí, tenemos bien indio. Entonces tenemos jeans aquí. Este es Artículos de oficina, no ordena nada. Bien. Juegos de trajes, ya terminamos. Entonces Saris vamos a traerlo aquí, renombrar esto como SA, seleccionar la lista de productos Ven a la opción de categoría y selecciona Saris aquí y elige No se requiere éxito. Camiseta otra vez, sí, ven aquí. Renombra esto como camiseta, selecciona el componente de la lista de productos, baja a esta categoría barajar, elige área de categoría, y esta será nuestra camiseta y elige Por último, pero no menos importante, Western Western Western. Por lo que Western es una categoría primaria. No es una categoría infantil, así que rápidamente iremos aquí y simplemente seleccionaremos la vajilla occidental y elegiremos. Entonces ahí vamos. Todos los westerns están listados Impresionante. Entonces iremos a la página de índice y el inicio será Index. Indio será Indian Page, y Western será Western, que es al final. Fresco. Así que rápidamente enlazaremos las páginas. Entonces este botón Agregar al carrito, que tenemos, esto irá a la página del carrito, ¿ cuál es que creamos la página del carrito? No lo creo, ¿verdad? No hemos creado la página del carrito. Así que rápidamente crea la página del carrito y agrega rápidamente la barra de navegación y el pie de página a esa página individual Múltiple. ¿Por qué tenemos que llegar a múltiples? Porque dentro de este múltiplo solo tenemos esta opción para enlazar copias. Entonces haremos clic en Enlace de tarjeta Copias Copiar. Impresionante. Seleccionaré este botón y lo vincularemos a la tarjeta. Está llegando a Card y ahí vamos. Sí. El signo de inicio de sesión es por defecto dado por el reflujo. Entonces no tenemos que crear una página específica para esto. Bien, así que rápidamente tomemos una vista previa. Voy a hacer clic en ZR, que es, nuevo, una landing page. Ahora si hago clic en estos cordones , me llevará a los cordones. Entonces si hago clic en vestidos, me llevará a la sección de vestidos. Si hago clic en jeans , me llevará a los jeans. No tenemos los productos allá. Podemos ir rápidamente y comprobar qué salió mal por qué no vienen los jeans. Por lo que rápidamente haremos clic en configurar Ecommerce y Administrar proyecto. Z seleccionado, ir a productos, todos los productos, y ¿dónde están los genes? ¿Dónde están los genes? Oh, los genes no están asignados a la categoría correcta. Entonces solo seleccionaré rápidamente. Seleccionaré todos los genes. Daré clic en Editar, haré clic en categorías y moveré las categorías de estas a genes y confirmaré. Entonces de esta manera podemos ver ahora que están asignados a genes, y si venimos aquí y refrescamos, ahí vamos. Todos los genes están ahora en el lugar correcto. Volviendo, veamos, los trajes de juego están ahora en el lugar correcto. Las camisetas están ahora en el lugar correcto. Bien, los vestidos están en el lugar correcto, otra vez, y los saris están de nuevo en el lugar correcto Indio, todos los productos indios están en el lugar correcto. Los jeans siguen en el indio, ¿no? Entonces volveremos rápidamente y veremos que esto no es realmente indio, así que rápidamente volveremos y cambiaremos la categoría a Western y confirmaremos. Volvamos a la vista previa, refresquemos, y ahí vamos. Ahora, en el indio, sólo tenemos indios. Si vamos a Western, ahora los genes están llegando a la zona occidental. Pero si ves en la página principal, tenemos diferentes fuentes, pero si hacemos clic en cualquier otra página, las fuentes son diferentes. La razón porque no hemos cambiado el estilo a todas las páginas. Si hago clic en el cuerpo en apariencia, si me desplazo hacia abajo, la fuente aún no está seleccionada para la fuente que queremos. Tan rápido, tengo que ir y cambiar la fuente una por una en todas las páginas. Camino. Impresionante, así que cambiamos todas las fuentes para todas las páginas que están ahí. Es posible que necesitemos una o dos páginas extra dependiendo del requerimiento, pero a partir de ahora, somos buenos en este lugar. Así que vamos a guardar el proyecto rápidamente, y sí, estamos listos para ir. Así que en el siguiente video, crearemos nuestra página de carrito. Siempre que el usuario agregue el producto en tarjeta, el producto saldrá listado en la página del carrito, y que diseñamos en nuestro siguiente video. Entonces ve a la gente en el siguiente video. 52. Ziara Commerce: diseño de una página de carrito dinámica: Hola, y bienvenidos de nuevo. Entonces en este video, diseñaremos la página del carrito. Tan rápido, vamos a tomar un contenedor, caer entre Navbar y pie Solo toma una partida y nombraremos esto como tu carrito. Y buscar tarjeta. Tenemos que tomar el componente del carrito de compras y dejarlo caer dentro de este contenedor. Y ahí vamos. Creo que no necesitamos este texto porque el carrito de compras ya está escrito por aquí. Así que eliminaremos esto y solo quedaremos con el carrito de compras, que está ahí por defecto escrito. Fresco. Entonces una vez hecho esto, creo que ahora necesitamos dos páginas más. Una es la URL de éxito y la otra es la URL de cancelación. Entonces creo que tenemos página de éxito en alguna parte de aquí, sí. Entonces tenemos página de éxito, pero no tenemos Cancelar página. Así que rápidamente crearemos una página más llamada Cancelar. Y ve a Index y toma el Navbar y pie de página desde aquí. Y básicamente, puedes ir a cualquier página y tomar la barra de navegación y pie de página y hacer clic en Enlace Pero tengo una práctica para ir a la página de Índice donde he diseñado esto y copiando la barra de navegación y pie de página a esa página Entonces ya tenemos la página Cancelar por aquí, bien, volviendo a la tarjeta, seleccionaré el carrito de compras y mencionaré esta página de URL de éxito Es y me desplazaré hacia abajo. Tenemos la página de éxito por aquí, y la página Cancelar está aquí. El proyecto es Yara otra vez, y ahí vamos En realidad terminamos con la página de la tarjeta. Eso es todo. Bien, así que diseñaremos rápidamente la página de cancelación y la página de éxito. Tomaremos un contenedor y tomaremos un contenedor, bajen aquí, yo tomaré un rumbo. Tomaré un párrafo y tomaré un botón. Creo que las fuentes son diferentes aquí, así que seleccionaré rápidamente el cuerpo y llegaré a la apariencia y cambiaré la fuente. El encabezado dirá cancelación de pedido confirmada en el párrafo, tendremos una historia rápida y este botón, lo nombraremos como continuar comprando y voy cambiar la apariencia del botón. Cambiaré el estilo de primaria a oscura. Fresco. Esta es nuestra página de cancelación y de manera similar crearemos la página de éxito. Voy a tomar un contenedor. Un encabezado, un párrafo justo después del encabezado y un botón. Así que esto será gracias por tu compra. Creo que esto y esta Y y esto debería ser en pequeño caso, rápidamente tendremos nuestra historia escrita por aquí y continuaremos por el botón de compras por aquí. También cambiarás el estilo a oscuro Awesome. Así que vayamos rápidamente a la página Índice y hagamos una vista previa. Entonces esta es nuestra página de índice. Esto es Cards. Y si hago clic en dos carrito, me mostrará para los productos de aquí. Ah, sí, y este producto tiene múltiples imágenes. Así que vamos a ver esto. Entonces si vengo aquí, las imágenes del producto que están ahí, vendrá así y puedo dar click aquí en consecuencia. Y hay un producto más justo donde tenemos, creo que es en Western Uh, si, este es este donde también tenemos talla. Y según el tamaño, el precio del producto cambia. Y aquí es donde tenemos algo adicional como agregar tu nombre en la camiseta. Si hago clic en esto, requirió su nombre, y puedo agregar mi nombre por aquí. Digamos que agrego mi nombre, agrego el tamaño, y hago clic en Agregar al carrito. El producto ya está en mi tarjeta, y si voy a Card store aún no tiene configuración de pago. No hemos configurado el pago. Por eso no podemos entrar en la página de la tarjeta. Entonces supongo que ya sabes lo que vamos a hacer en el siguiente video. Arreglaremos esto en el siguiente video. 53. Ziara Commerce: configuración de información de pago: Um, arreglemos la configuración de pago en este video. Así que rápidamente ven a la cuenta Reflow y haz clic en la configuración y pagos Hay opciones PayPal, raya, paddle y custom. Entonces, si haces clic en Stripe, te pedirá que inicies sesión la cuenta de Stripe y te llevará todas las claves necesarias que están ahí. este momento, no tengo ninguna cuenta de esta pasarela de pago. Entonces por ahora, iré al método personalizado, que es un método de transferencia bancaria, y lo nombraré como transferencia bancaria el tiempo estimado es siete. Guarda este mensaje tal como está, y voy a hacer clic en Crear. Solo porque necesito un método de pago, estoy agregando esto, puedes seguir adelante y agregar tu pasarela de pago aquí también. Volviendo aquí, si me refresco ahora, boom, ahí vamos. Tenemos nuestro producto en el carrito, podemos aumentar la cantidad, y creo que no podemos ir por encima de cinco, tal vez porque hemos dado el límite de cantidad como cinco, podemos sacar el producto del carrito. Entonces a medida que hacemos clic en la cantidad, el precio también cambia. Vaya, hay algún error, así que volveré a uno, y ahí vamos Entonces ves que la página se vuelve gris. Eso significa que en el fondo, se está actualizando rápidamente. Y los nuevos datos están llegando frente a nosotros, los nuevos datos no son más que el precio. Y aquí, si hago clic en Checkout, vendrá aquí y tomará mis datos si ya estoy logueado. Si no, me pedirá que complete todos los datos por aquí, que es mi dirección de correo electrónico, número de teléfono, dirección de envío, y cualquier nota específica que quiera darle al vendedor. Así que rápido vamos a hacer esto. Mi correo electrónico es car@gmail.com. El número de teléfono será 123-456-7890 y la dirección de envío el nombre volverá a ser Kurn, la dirección está en algún lugar de la India . Ciudad, puedo decir que es Banguru Bengaluru país es India, Estado es Karnataka, y Pincode es 560-092-0092 Bien. Y entonces me está diciendo en todo el mundo Tarifa plana. Sí, agregue la información de facturación. Está bien. No hay nada. Puedes dejarlo en blanco si no tienes nada. Entonces, sí, el costo total es lo que sea, como 1699. Puedo agregar un código de cupón por aquí si tengo alguno. Si no, vamos a hacer clic en transferencia bancaria, y ahí vamos. Puedo ver los datos bancarios aquí, y aquí el cliente verá los datos bancarios, el cliente tiene que enviar y el cliente tiene que transferir el monto aquí. Por aquí, si ves en pedidos todos los pedidos, ves que el pedido ahora está esperando el pago. Por lo que una vez realizado el pago y el cliente te confirme que el pago está terminado, puedes entrar dentro de este y cambiar el estado del pago para marcar como pagado y hacer clic en Confirmar. Y una vez que se envía el producto, puedes ir de nuevo y cambiar el estado de cumplimiento a Marcar como enviado. Esta información irá al usuario a través del correo electrónico que le da el usuario, que es este, este no es un correo electrónico genuino, así que no voy a recibir ninguno, así que no voy a recibir ninguno, pero el usuario puede ver los detalles del pedido y el estado del pedido una vez que cree la cuenta e inicie sesión en la cuenta de Zia. En el siguiente video, exactamente vamos a hacer eso. Nos vemos en el siguiente video, amigos. 54. Ziara Commerce: terminación del sitio web de comercio electrónico: Impresionante. Entonces en este video, vamos a crear la página de estado del pedido, la página detalles del pedido, lo que sea Así que rápidamente ven al estudio Bootstrap, y veamos si hemos creado la página de pedidos o no. Sí, tenemos la página de pedido y la página de detalles del pedido, ambas. Entonces vayamos rápidamente a la página Pedidos. Toma un contenedor y haz clic en Solicitar. Entonces tenemos el estado del pedido aquí y tenemos pedido de usuario aquí. Entonces tomaremos este componente de pedido de usuario y lo dejaremos caer aquí, pedido del usuario, y dentro de los detalles del pedido, nuevamente, tomaremos un contenedor. Y toma el componente de estado de pedidos y suéltalo dentro de esta página. Y el usuario necesita un lugar donde pueda venir y comprobar esto. Entonces vayamos a Index y justo por aquí, tal vez después de este Western Ups, tome este ítem NAV, tome este ítem NAV, duplique esto y renombremos esto como pedidos Y vincularemos los pedidos a Voy a seleccionar esto a nuestra página de pedidos. Por lo que ahora el beneficio de vincular la barra NAV es, se puede ver que los pedidos ahora se agrega en todas las páginas. Bien, así que rápidamente voy a previsualizar, y si hago clic en pedidos, entonces me va a pedir que inicie sesión. Pero si hacemos clic en iniciar sesión, no tomará nada porque aún no hemos configurado los ajustes de inicio de sesión. Tan rápido, vamos a configurar la configuración de inicio de sesión. Así que vayamos a nuestra cuenta de reflujo, vayamos a la configuración y hagamos clic en Iniciar sesión Entonces este es nuestro dominio de reflujo. Podemos crear. También puedes elegir un dominio personalizado. Tenemos que agregar un dominio por aquí. Así que iremos rápidamente a Bootstrap Studio ir a publicar configuración tomar nuestro dominio como Zara dotbss punto DISEÑO y publicar este sitio web por ahí Espere algún tiempo hasta que se publique. Sí, está publicado, y haz clic en esto ahora y ahora toma esta URL. Vuelve aquí. Escribiré aquí en Zara. Voy a dar click en origen y voy a pegar este dominio aquí. Y haz clic en Guardar. Se genera la clave. Y ahora puedo activar este correo electrónico y contraseña. Entonces, qué información necesito. correo electrónico y la contraseña son por defecto, necesito nombre, necesito número de teléfono. Si tenemos alguna página personalizada de términos y condiciones, podemos agregar esa página de términos y condiciones allí. Entonces solo voy a agregar términos. Bien, para que puedas agregar el patrón también o de lo contrario puedes dejarlo en blanco y simplemente dar clic en Guardar. También tienes la opción para inicios de sesión sociales, Google Facebook y otros Entonces, si haces clic en Google, te pedirá que crees ID de cliente y el número secreto del cliente. Por qué esto viene como K, lo mejor he añadido un nombre equivocado. Sí, esto no es K y ahorra. No necesito esto y guardar Comercio, puedo agregar por ahora. Impresionante. Entonces esta es Yara commerce.refloq.com, sea lo que sea. Así que actualice esto y haga clic en Registrarse porque la URL debe coincidir, y ahí vamos, nombre de correo electrónico, contraseña, re escriba contraseña, y número de teléfono. Entonces agregaré el correo electrónico, nombre, contraseña, re escriba contraseña y número de teléfono. Acepto los términos y condiciones y doy click en Registrar. Sí, aquí necesitas Ori dirección de correo válida porque pide una verificación y pega, verifica el código. Y boom, estamos logueado con éxito. Ahora vamos a hacer y ordenar. Entonces iré a nuestro producto especial, tal vez, lo siento, Western. ¿Qué ordenaré ahora? Bien, ordenemos este traje de juego. Vamos a llegar a este juego de juego. Los trajes de juego se ven bien. Vaya, muy barato, solo 79 rupias Este precio es por error. Cuando descargamos la hoja de Excel, ¿verdad? En ese tiempo era de 79 dólares. Pero mientras creaba este proyecto, cambié la moneda de dólar a rupias, así que me está mostrando 79 De todos modos. Entonces, si hago clic en Agregar al carrito, este producto se agrega en el carrito ahora, y haré clic en Pagar. Entonces ves como estoy conectado, la información se toma automáticamente, se toma la dirección de correo electrónico, se toma la dirección. Solo voy a agregar alguna dirección aleatoria y ciudad. Voy a añadir la India por aquí. Voy a añadir un estado por aquí y código postal. Y transferencia, transferencia bancaria, aquí vamos. Ahora si voy a mis órdenes, se puede ver que el pedido está ahí y el estado está pendiente. Esta orden está pendiente. Si voy a mi cuenta de reflujo y si voy a mis pedidos ahora, haré clic en estos pedidos Y aquí ves que el pagado está hecho. Ahora bien, este es el segundo pedido con la dirección de correo electrónico real. Voy a hacer click aquí. Y solo asumiendo que el pago está hecho, así que voy a hacer clic en el pago está hecho. Vuelve aquí, refréscate. Ahora puedes ver que el pago está hecho y se procede. El estado ha cambiado para proceder. Volveré aquí y cambiaré el estado de cumplimiento para cambiar el estado de cumplimiento para y haré clic en Confirmar. Si vuelvo aquí y me refresco, dice el estado como nave y si vuelvo aquí y cambio el estado de cumplimiento a Marcar como entregado, y volveré refrescar. Se puede ver el estado como recibido. Entonces así es como va dinámicamente. Podemos ir rápidamente y agregar una opción aquí donde también mostrará los detalles del pedido. Así que rápidamente ve a la página de pedidos, selecciona esta, selecciona la página de detalles del pedido para el resumen y vuelve aquí actualizar Ops no. Tenemos que publicar esto porque ahora está en un subdominio. Entonces seleccionaremos esto y publicaremos Bien, el editor está listo. Vamos a refrescar esto ahora. Ahora ve una flecha por aquí. Ahora bien, si hago clic en esto, me llevará a la página de detalles del pedido, y me da este completo, breve resumen de ese pedido específico. Terminamos con esta serie, la serie en la que aprendimos a diseñar un sitio web de comercio electrónico completo, dinámico donde podemos agregar un producto a la tarjeta. Podemos hacer el pedido. Podemos ver el estado del pedido, y podemos ver el estado de orden en profundidad. Tenemos admin panele donde tenemos la visión general de nuestra tienda Entonces tenemos la lista de usuarios de la tienda. Tenemos los planes, pagos, orden. Podemos agregar los productos, categorías, cupones, luego lo que sea Entonces, sí, hemos terminado con éxito la serie aquí y feliz Aprendizaje. 55. Vamos A Empezar A E-Commerce Sitio Web Del Proyecto Cuatro: Empecemos. En esta sección, lo que vamos a aprender es como vamos a crear el sitio web de comercio electrónico. Y será un sitio web de comercio electrónico dinámico real que estaremos diseñando dentro de Bootstrap studio. Y después de completar este sitio web, nosotros, quiero decir que no en realidad, usted será capaz de lanzar este sitio web y empezar a aceptar pedidos. Empecemos. Entonces lo que he hecho es que he creado un diseño, diseño en blanco, y lo he nombrado como una tarjeta snap. Snap card será el nombre de mi sitio web de comercio electrónico. Lo primero que vamos a empezar a diseñar el layout y lo primero y más importante que vamos a hacer es que estemos creando una barra de navegación. Y estaré tomando un navbar, que será este navbar. Y dentro de esta marca, definitivamente voy a nombrar tarjeta snap. Tarjeta Snap. Y lo que vamos a hacer aquí es como vamos a tener dos categorías. Dentro de esas categorías, tendremos también una subcategoría. Para este ejemplo, estoy creando dos categorías. Y dentro de esas categorías estoy creando otras dos subcategorías. Depende de ti cuántas categorías y subcategorías quieras crear que puedas hacer. Lo que estoy haciendo por aquí es que acabo seleccionar todos estos tres ítems ahora y lo eliminaré. Y seleccionaré un desplegable. Ou. Colocaré este menú desplegable dentro de esta barra de navegación. Lo nombraré como hombres, y voy a crear un desplegable más o seleccionaré esto y voy a duplicar esto, y lo nombraré como mujeres. Estos son los dos navbars de lo siento, estos son los dos desplegables. Estas otras dos categorías que va a tener nuestra página web. Voy a seleccionar esto, haré clic en Abrir. El primero será, el segundo será general. Y general. Éste será. Ok. Por lo que estas son las tres categorías. Voy a cerrar esto. Volveré a ser humano y abriré esto de nuevo. Éste será Roadster y general. Y éste será, antes de avanzar, lo que haré es ir a configuraciones y seleccionaré aquí un equipo diferente. Digamos tema lux. Y haré click en Guardar. Conseguiremos una fuente diferente también y un estilo diferente. Dentro de esto se puede ver un estilo diferente está ahí. Ahora, vamos a hacer una vista previa de nuestra página web. Daremos click en Vista previa. Sólo traeré la ventana del navegador por aquí. Ahí vamos. Esta es nuestra lista desplegable. Vamos a seleccionar esta barra de navegación y hacer clic en la opción fluida por aquí y abrir la vista previa de nuevo. Esta vista previa de nuevo, y ahora esto está configurado. Después de eso podemos crear carrusel. Pondré el carrusel por aquí donde podamos deslizar nuestras imágenes. Sólo estoy creando un layout primero, vamos a importar las imágenes y vamos a empezar a vincularlo por todas partes. Entonces tendremos un contenedor que estaré colocando pelea por debajo de este carrusel. Y al seleccionar este contenedor, lo que vamos a hacer ahora, sólo vamos a dar un margen, tope de margen, arriba vacío, o tal vez cuatro serán lo suficientemente buenos. Sí, cuatro es bastante bueno. Y luego pondremos un encabezado, rumbo y podemos nombrar esto como tal vez lo que podamos nombrar productos. Esto lo guardaremos como h3. Razón por la que estoy guardando este texto en h3 es porque SEO y sí, definitivamente te voy a decir eso también en la sección posterior. Entonces todos los productos H3, y después de eso podemos poner la sección de productos por ahí. Creo que esto es suficiente por ahora. Qué haremos en nuestra sección de productos, como si acudes a archivos BSS en, encontrarás una sección de comercio electrónico por ahí. Y si vas a productos, y luego vas a deslizadores, aquí encontrarás tres imágenes. Sólo tienes que arrastrarlo y soltarlo por aquí. O si quieres estar más organizado, basta con hacer clic derecho en las imágenes, crear una carpeta y escribirla como deslizadores. Eso resuelve todo bien y solo déjalo caer dentro de eso. Haga click en, Ok. Y simplemente haz doble clic, abre el deslizador y selecciona la primera imagen, luego haz clic en Siguiente. A continuación, haga doble clic y haga doble clic. Seleccione el control deslizante a la imagen S2. A continuación, haga clic en Siguiente. Haga doble clic en esta imagen, haga doble clic en la carpeta para abrir eso y haga clic en S3, y haga clic en, OK. Y ahí vamos. Tenemos tres imágenes. En esto. Ahora hemos agregado tres imágenes. Vamos a nuestro preestreno. Deje que la página se actualice, vuelva a cargar año. Ahora está recargado. Y luego tenemos estas imágenes por aquí. Siempre que queremos cambiar la imagen, tenemos que cambiarla de tu única esta semana no puede hacerlo dinámicamente. Ahora estaremos llegando a la siguiente sección llamada todos los productos y tú eres, qué vamos a hacer. Crearemos las cosas dinámicas, minimizándola. Y antes de ir allí, tenemos que hacer algo. Tenemos que conectar algo a nuestro estudio bootstrap. Debido a eso, nuestro sitio web se convertirá en un sitio web dinámico. Y lo que tenemos que hacer ahí, lo veremos en el siguiente video. 56. Comprensión De La Reflujo Del Proyecto Cuatro: Lo que tenemos que hacer es dar click en Configuración. Una vez que hacemos clic en Ajustes, simplemente desplázate hacia abajo por aquí y tenemos este e-commerce. Sólo tienes que hacer clic en ese E-commerce uno. Ahora tienes que hacer click en administrar tienda por aquí. Y una vez que haga clic en Administrar tour, obtendrá esta página donde tendrá que nombrar su tienda. Estaré nombrando a mi tienda como “snap card”. Una vez que haga click en un lado tipo este nombre snap card que tengo, tengo que simplemente hacer click en Siguiente. Y una vez que haga click en Siguiente, me llevarán a esta página. Esto está mostrando un producto y he añadido este un producto largo atrás. Y esta es tu tarjeta de chasquido. Puedes agregar múltiples tiendas, como nueva tienda, puedes crear múltiples tiendas nuevas a lo largo del año. Reflow es una hermana, puedes llamarla como empresa hermana del propio estudio Bootstrap. Una vez hecho eso, entonces hay que volver año atrás. Y de nuevo haga clic en administrar tienda o ya es un fregadero, entonces hay que seleccionar esta tarjeta de broche por aquí. Una vez seleccionada esta tarjeta de captura de tienda aquí, entonces simplemente haga clic en guardar. Y entonces por ahora, dejaremos de usar Bootstrap studio a menos que y hasta que agreguemos todo a nuestra página web de comercio electrónico. Reflujo. Puedes ver este panel de reflujo como un panel de administración de nuestro sitio web de comercio electrónico. Iremos a Categorías y comenzaremos a crear las categorías. ¿ Qué categoría tenemos? En realidad tenemos dos categorías principales. Uno es decir, Lo siento, uno es hombres. Eso no es subcategoría para esto, sólo voy a hacer click en guardar y luego tendremos este tipo de página. Daré click en Agregar categoría. El segundo serán las mujeres. Y voy a hacer clic en esta mujer. Guardar. Ahora tenemos dos categorías principales y en nuestra página web también tenemos dos categorías principales. Se trata de hombres y mujeres. Después de eso, tenemos que crear una categoría llamada Roadster. Yo vendré aquí. Daré clic en categoría de su anuncio y escribiré Roadster. Y la categoría de padres serán hombres. Y harán clic en Guardar categoría. Ya puedes ver dentro de hombres tenemos una categoría Roadster y luego uno será general. Hacemos click en Agregar categoría una vez más y general. Y éste de nuevo en categoría masculina. Toda la categoría. No crearemos ningún tipo de categoría que se llame todo. Pero sí, si quieres crear alguna categoría llamada todo, podemos hacerlo. De nuevo, iremos a Agregar Categoría y esta será Roadster y para las mujeres ahora, haremos clic en Guardar aquí. Una categoría más con general para mujeres. Y simplemente haga clic en Guardar categoría por aquí. Estas grandes categorías que hemos creado ahora después de que categorías podemos crear los productos. Ahora, esta es la página lo que verá en la sección de producto, y vamos a empezar a agregar el producto. Si acudes a nuestros recursos. Dentro de los hombres, encontrarás estas carpetas donde están ahí las fotos del producto. Así que solo toma éste. Perdón, éste, y éste de aquí. Entonces producto, sólo voy a hacer click en el producto primero y este nombre de carpeta, podemos tomarlo como nombre del producto. Hay carpeta info por aquí donde puedes tomar esta como descripción, como descripción regular y podemos mantenerla misma para todos a partir de ahora. Volviendo a los hombres, este producto, y tomará todo este producto, fotos de productos, arrastrarlo y soltarlo por aquí. Puedes importar un video también si lo deseas. Entonces el precio del producto, será en algún lugar alrededor de 316, tal vez en stock, todo está ahí. Ahora tenemos que seleccionar la categoría ya que esta no es un Roadster cuando la vamos a poner en general y hombres ambos. Y tenemos que poner una descripción por ahí. Por lo que sólo voy a hacer doble clic aquí y nos llevaremos éste. Sólo péguelo por aquí. Y lo nombraré como hombres. No seré muy específico. Simplemente minimícalo. Si tenemos como varianza, podemos crear una varianza y tenemos que hacerlo porque tenemos talla. Así que tengo que escribir talla por aquí y agregar variante. Entonces éste será pequeño. Un pequeño precio será de 360. No sé qué precio agregamos allá. Entonces de todos modos, no hay problema. Y el Reino Unido es una unidad de mantenimiento de acciones. Puedes poner algún número y en realidad puedes ponerlo algunos. La unidad exacta de mantenimiento de existencias. Nuevamente, voy a crear uno más y será un medio. Nuevamente, será 360. Unidad de mantenimiento de existencias SU k será algo y el peso será como si estuviera poniendo una espera aleatoria. Uno más. Éste será pequeño, mediano, grande. Esto será, digamos, tal vez 370. Al igual que vamos a subir unas 1010 rupias por ahí, dejamos de mantener existencias, manteniendo unidad. Uno más será extra grande y el escaneo esto lo hará como 380. Acabas de recordar que tenemos dos productos con la misma cantidad. Eso es tres sesenta y tres sesenta tres setenta y tres ochenta. Sólo quería mostrarte eso. Por eso estoy guardando los diferentes números por ahí. El peso será de 0.2. Y una vez hecho eso, sólo voy a hacer click en Guardar. Se puede ver que tenemos diferentes tamaños a lo largo de un año ahora. Cualquier personalización, si quieres hacer como agregar personalización, cualquier opción que quieras hacer, opciones personalización por aquí, puedes hacerlo su unidad de mantenimiento de stock para esto artículo entero. Como tal vez podría haber alguna unidad de mantenimiento de existencias y el peso del producto será algo así. Sí, eso es todo una vez que se hace y sólo voy a hacer click en producto seguro y mi producto número uno ys agregado. Ahí se puede ver el producto uno se agrega más de un año. Ahora haré click en añadir producto una vez más y agregaremos el siguiente nombre de producto. Este anuncio es ese Bloc de notas. Aquí está. Este es el bloc de notas. Voy a copiar esto y lo pegaré más de un año. Este producto imágenes precios estarán bien. 99 categoría de nuevo, es una categoría general y tengo que escribir algo aquí. Lo estoy escribiendo como hombres y varianza otra vez, será de tamaño y no es como una vez que creas una variante, no puedes crear múltiples variantes por ahí. Puedes hacer eso múltiples variantes como colores y todas esas cosas. Y recientemente, variante reciente que hemos creado es esta. Y sólo voy a hacer clic en su copia. Y eso es todo, como, no tengo que volver a hacer todas las cosas de nuevo. Pero sólo después tengo que mantener mis ojos en el precio del producto o de lo contrario será un desastre. Entonces phi 199599 y tal vez éste sea 649. Voy a hacer un producto será con un precio diferente, y sólo voy a hacer clic en guardar. Y eso es diferente a estas dos cosas, puedo dejarlo en blanco porque ya lo sabes. Ahora en el tercer producto, lo que voy a hacer, iré a Roadster. Ahora, creo que es ahí sólo estos cuatro productos están ahí los cuales son Roadster. Y sólo voy a hacer click en añadir producto. Ahora, este será nombrado como Roadster solamente. Algo así como, veamos cuál es el color del producto por aquí. Como Roadster, media camiseta, quizá. Algo así. Media Camiseta. Se considera como medias mangas. Así que sólo le estoy nombrando media camiseta. Simplemente copie esta descripción. Ponlo aquí, selecciona esta imagen es arrastrar y soltarla por aquí. Esta vez el Roadster, el precio puede ser 999 o tal vez 899. Ahora la categoría será hombres y Roadster. El general no está ahí, es una marca Roadster. Ahora. Éste tenemos que poner ahí. Pondré esto, whoops, copia todo. Si es ahí algo hombres en varianza otra vez, estos son la varianza que tenemos, entonces solo copiaré esto una vez más. Esta vez esto es lo mucho que fue como 899. Entonces. Noventa y nueve. Noventa y nueve. Noventa y nueve. Esta vez estoy poniendo todo el precio como 899 solamente. Y haremos clic en Guardar y mantener existencias unidad. Se puede poner cualquier cosa por ahí y el peso del producto y simplemente haga clic en guardar. De esta manera lo que puedes hacer, puedes agregar los productos, cualesquiera que sean los productos que tengas por aquí, puedes agregarlo. Este es Roadster. Puedes nombrar a esta marca con el mismo nombre varias veces porque tenemos unas fotos diferentes por ahí. Todo esto Roadster. Podemos ponerlo en la categoría Roadster. Y éste, puedes ponerlo en categoría general. Y después de eso puedes agregar los productos de las mujeres. De nuevo, tenemos a Roadster por aquí y categoría general por aquí. Lo que te sugeriré es que subas tus productos por aquí primero. Y luego veremos en la siguiente sección qué exactamente vamos a hacer eso. Pero hay que subir los productos o lo contrario no podrás seguirme eso precisamente en los productos y verte en la siguiente sección. Y también agregaré los productos y te veré en el siguiente video, realidad no esta sección. Nos vemos en el siguiente video, chicos. 57. Hagamos Que Nuestro Sitio Web Sea Dinámico Del Proyecto Cuatro: De acuerdo, por lo que hemos agregado en total 17 productos. Por lo que si vas a resumen, puedes ver que tenemos 17 productos en total, entre ellos hombres y mujeres en general. ¿ Y qué dices? ¿ Categoría Roadster? Si vengo a productos, de nuevo, se puede ver todos los productos son más año 17 productos están ahí. Y ahora veamos cómo podemos llevar todos estos productos a nuestro sitio web de e-commerce de bootstrap studio que es snap card. Así que volviendo a bootstrap studio ya más de un año, nos hemos fijado, como hemos escrito aquí, como todos los productos. Entonces lo que tenemos múltiples opciones. Entonces lo que voy a hacer por aquí es, en lugar de todos los productos, lo nombrará como, Veamos, Producto de mujer. Por lo que sólo teclea producto mujer y seleccionando este contenedor, vendré a la sección de comercio electrónico, donde se puede ver esta sección de comercio electrónico. Y el segundo componente es el producto menos. Simplemente toma esta lista de productos y suéltala dentro de este contenedor. En cuanto lo dejo caer dentro de este contenedor, los productos vienen por aquí. Y ahora se puede ver tanto a hombres como a mujeres, tanto los productos ya están ahí. Pero lo que queremos es que sólo queremos un producto de mujer y no vamos a querer en esta vista de lista. Lo queremos en una vista de tarjeta. En realidad. Qué vamos a hacer aquí ahora, qué vamos a hacer, qué vamos a hacer, seleccionaremos esta lista de productos. Y tan pronto como seleccionemos el producto menos en el panel de opciones, podemos ver ahora tenemos un montón diferente de opciones sobre u. primero uno es layout de ListView, cambiaremos dos tarjetas ver, y ahí vamos. Ahora tenemos una vista de Tarjetas. Se pueden ver las fotos del producto, ¿ hay el nombre del producto? Entonces tenemos algunos detalles por aquí también. Tenemos orden por orden por fecha ascendente, descendiendo la fecha en la que se ha agregado el producto, el nombre, orden alfabético, precio en ascendente y descendente con lo que tan a menudo lo dejaremos como él es. Entonces tenemos página como número de páginas y luego o pH, como cuántos productos queremos mostrar por página. Dejaremos estas dos opciones en blanco porque solo queremos traer producto de mujer por aquí. Entonces tenemos enlace de producto y toda esta lección veremos uno por uno por ahí. Tenemos tienda como definitivamente este es un corte a presión. Si este producto no es de Snapchats, podemos cambiar la tienda por aquí. Si tienes varias tiendas por ahí, entonces vendremos a categorías. Por lo que sólo voy a seleccionar esto todas las categorías por aquí. Antes de eso hemos utilizado datos simulados. Si no tienes productos, entonces si enciendas, enciende esto. Tenemos datos simulados por aquí, que no queremos usar, así que lo apagaremos. Y entonces ahora iremos a Selección de Categoría en toda la categoría uno, vendrá la opción de categoría. Y lo que queremos aquí son productos humanos. Por lo que seleccionaremos esto y seleccionaremos sobre mujeres. Queremos tanto general como Roadster. Por lo que sólo vamos a hacer clic en las mujeres y voy a hacer click en Elegir. Por lo que en cuanto hago click en Elegir, todos los productos de hombre se han ido y tenemos, Eres como todos los productos de mujer. Entonces lo que vamos a hacer, acabaré de seleccionar este contenedor y se etiquetará Control L. Y esto lo nombraré como mujeres, productos de mujer. Y voy a hacer click en set, esta etiqueta. Estaré entendiendo este contenedor es para una mujer productos y ahora sólo voy a hacer un duplicado que es Control D. Y éste está ahí ahora. Y ahora solo lo etiquetaré de nuevo y lo nombraré como producto hombre. Sólo voy a hacer clic en set aquí también en lugar de mujeres, solo me llevaré hombres, acabaré de quitar WO de ahí. Y ahora llegando al producto menos, acabaremos de seleccionar por aquí. Y ahora de humano seleccionaré hombres y elegiré ahora todos los productos masculinos nuestra oreja. Ahora si vemos la vista previa de nuestra página web, si vienes a snap card preview, ahora puedes ver tenemos los productos de mujer por aquí, entonces tenemos producto hombre por aquí. Y estos productos dinámicos. Suficiente justo. Entonces tenemos éste ahora, Roadster general y todo lo que tenemos para crear esta página. Ahora. Lo que vamos a hacer es volver a bootstrap studio. Y vamos a crear una nueva página por aquí, es decir página HTML. Y lo nombraré como productivo. Simplemente haga clic en Entrar, haga doble clic aquí. Y toma un contenedor. Un contenedor y luego darle un margen superior a él, margen top cuatro. Entonces toma un rumbo. Nombrarlo como lo que es este min esto como productos. Tomaré lista de productos o dejes caer dentro de este contenedor. De ti, lo tomaré como vista de tarjeta. Desplácese hacia abajo los productos que estaré tomando como hombres productos y simplemente haga clic en Judios. Esta es una lista principal de productos. Todos los productos hombres o de esa manera vamos a hacer múltiples cosas. Entonces antes de eso lo que vamos a hacer es crearemos lo sentimos, vamos a crear una página más o sus detalles de producto. Este es un discurso de detalles del producto. Y volviendo a nuestra sección de comercio electrónico, este es un producto. Este es el, este es el componente que vamos a utilizar. Y antes de eso, otra vez, lo haré. Tomaré un contenedor. Como es habitual, pondré margen top cuatro a ocho. Esta página de detalles del producto o te hará por ahora, lo que voy a hacer en tan solo seleccionar este producto y haré click en el Elegir. Por lo que voy a tener esta información por aquí. Este es el dato como tenemos imágenes. Y si vengo aquí, se puede ver la página uno está ahí ahora. Puedo ver múltiples productos. Y si hago clic aquí, tenemos esta bonita y hermosa galería, galería de fotos. Y esto nuevamente tenemos múltiples secciones y ahora tenemos productos a agregar en el carrito. Y luego tenemos los tamaños ya que tenemos MDD allá en múltiples tamaños. Esta es una opción que he hecho en personalización, ese empaque de regalos. Si alguien quiere que demos empacado, solo revisa esto y agrega el nombre de la persona a quien, lo siento, a quién. Simplemente voltearemos eso a quien quieras dar. El nombre de la persona estará ahí, y luego será uno. Entonces el usuario hará clic en Agregar al carrito. Avanzar lo que tenemos que hacer, su página de detalles del producto ys. Tenemos que ir a la página de detalles del producto ahí. En lugar de producto fijo. Y en lugar de C en la fuente de datos, tipo de producto es fijo. Tenemos que dar click sobre dinámica por ahí. Esta es la página donde queremos traer los detalles del producto. Dirígete a la opción Cambiar nombre y seleccionaré el nombre del discurso y copiaré esta página. Eso es todo en este parámetro URL. Simplemente escribiré este parámetro URL. Cuando estemos en el componente del producto, este parámetro URL será el mismo nombre de esa página. Significa como si fuera una página de detalles del producto. Así que solo pegaré los detalles de este producto por aquí. Y no pondré ningún punto HTML y todo en este lugar. Y parámetro URL solo escribiré detalle del producto. Volveré a los hombres de producto. Seleccionaré aquí la lista de productos. Y en esto verás una opción de enlace de producto por aquí. Qué equipo eres, lo que tenemos que hacer es que primero pondré una slash invertida. Entonces escribiré el nombre de la página en la que quiero redirigir, y esos serán los detalles del producto. Tu escribiré dot HTML porque quiero redirigir ahí. Pondré un signo de interrogación por aquí. otra parte, escribiré detalles del producto. Y los detalles de este producto es el parámetro URL que hemos establecido a esta página en particular. Y después de ese parámetro URL, pondré un signo igual. Pondré el soporte rizado, el soporte rizado de apertura, y escribiré ID dentro de eso. No te confundas por aquí, te explicaré qué es exactamente. Hemos escrito detalles del producto dot HTML. Esto parece que si hacemos clic en este producto, cualquier producto, redirigirá a esta página. Eso es detalles del producto dot HTML. Y ese es este discurso. Después de ese signo de interrogación, estamos poniendo una sección dinámica por aquí. Después de un signo de interrogación, lo que mostrará la página de detalles del producto es como la página de detalles del producto obtendrá el ID de este identificador de producto y ese producto se mostrará en esta página HTML de punto del producto. Es tan fácil como parece. Es así de simple, bien, la primera es la página del producto y luego detalles del producto es el parámetro URL. Y el id es el ID del producto que el sistema recuperará automáticamente. Ahora sólo voy a hacer clic en algún otro lugar, volviendo al navegador web. Volveré un paso atrás, y esta es la lista de productos, todo justo, haré click en este producto para mostrarte. Una vez que haga click en este producto, se puede ver este producto se abre con el costo del nombre, los tamaños que el botón de contar Añadir al carrito y otras cosas también. Volveré por aquí y boom, estamos de vuelta a nuestra página de productos. Pero volviendo a bootstrap studio, tengo que seleccionar menos este producto. Seleccionaré éste. Simplemente lo copiaré. Ve a la página de índice, desplázate hacia abajo. Seleccionaré este artículo de la lista de productos por aquí. Y voy a pegar este enlace de producto mapa URL. Y simplemente lo pegaré sobre ti. Si vuelvo a mi vista previa web ahora, me llevará a esta página automáticamente. Y si hago clic aquí , me llevará a esa página. Esta es la lista de productos y ahora es dinámica. Ahora se inicia la sección dinámica. Espero que estés un poco emocionado construir esta cosa en particular. Si tienes alguna pregunta, cualquier cosa, puedes dejarme caer la pregunta en el apartado de preguntas. Puedes unirte a mí en mi canal Discord. Te mostraré que este es mi canal Discord, y la URL de invitación será ésta. Puedes escribir esta URL y puedes conectarte conmigo en mi canal Discord y podemos discutir muchas cosas por aquí. Entonces volviendo aquí, volveremos a nuestro estudio bootstrap y ahora tenemos que crear una página más para las mujeres. Así que solo duplicaré éste. Ahora escribiré mujeres. Basta con hacer doble clic por aquí. No necesito hacer nada más porque todo está configurado, la URL y todo está configurado. Sólo necesito venir aquí y cambiar las categorías. Y esta es una mujer ahora. Y sólo voy a hacer clic en Elegir. Entonces solo lo duplicaré dos veces más. La mujer y la mujer salpican. General. Y éste, acabo de quitar dos y Roadster. Haz doble clic, vendrás a esta lista de productos. Y de mujeres, esto es general, por lo que seleccionaré el general y haré click en Elegir. Entonces estos son los productos generales. Y venir a éste ahora es seleccionar todos los productos Roadster, categoría Razr, y voy a hacer click en jugo, por lo que sólo tenemos tres por aquí. Entonces tenemos que renombrar esto también. En realidad no importa, pero la ortografía debe ser correcta, ¿verdad? Roadster. Y no general, seleccionaré éste. Los hombres harán clic en General, elegirán, luego entrarán en raíces para seleccionar esto, y luego hacer clic en Roadster. Ahí vamos. Y ahora llegando a la página de índice, ahora tenemos que vincularla. Sólo abre esto. Seleccionaré Roadster. Lo siento, ¿dónde está la URL? Selecciona esta página. Y luego primero uno será hombres, producto hombres Roadster. Entonces el segundo es general, los hombres de producto de playa en general. Y si haces click en, solo serán minutos del producto. Cierra éste, abre la mujer, selecciona el Roadster, URL. Entonces mujeres productivas Roadster, general. Mujeres generales. Y en todos. Y sólo ve a las mujeres producto, producto, una mujer dot HTML. ¿ Alguien cierra esto? Sí, tenemos esta sección hecha por aquí. Y ahora en el siguiente video, creo que es un video largo. En el siguiente video crearemos otras páginas, como Agregar al carrito y todo. Así que nos vemos en el siguiente video, chicos. 58. Página De Carrito De Compras Del Proyecto Cuatro: Entonces antes de avanzar y crear nuestras otras páginas, iremos primero a nuestra cuenta de reflujo. Vamos a empezar a hacer, empezar a hacer algún genio en el escenario. Entonces primero es el entorno general. Y en configuración general tenemos el nombre de la empresa como la tarjeta snap y la moneda que vamos a aceptar los pedidos. Como a menudo solo lo guardaré USD solo la medición. Será como cagey y centímetros y todo eso cosas, términos y condiciones, política de privacidad, política reembolsos, y la dirección principal de correo electrónico donde queremos las notificaciones. Por lo que acabaré de cambiar la dirección de correo electrónico a mi cuenta de Yahoo. Entonces en esta página acabo de cambiar la dirección de correo electrónico. Entonces haré clic en Guardar por aquí. Avanzar con las taxaciones, agregaremos taxaciones si tenemos alguna. Digamos que si es Estados Unidos y va a crear un Estados Unidos más de un año, luego seleccione seleccione tasa impositiva y se le excluye o te incluye. Por lo que le pondremos incluye impuestos sobre el envío y permitiremos impuestos y todo. Simplemente haga clic en guardar actualice el registro de tasa impositiva. Y entonces podemos ir a sumar un país más y digamos tipo India. Y voy a hacer clic aquí. Por lo que la tasa impositiva por aquí es del 18% por producto. El número fiscal, puede ser cualquier cosa f7, G, B, D 12387. Lo sentimos, FFT GB y número de IVA. Será como DCP pk 1122348. Y todo el producto son interiores te incluye de impuestos e impuestos sobre el envío también, y haremos click en Guardar. De esta manera podrás sumar las taxaciones basadas en el país en que envías los productos. Entonces ven a esta zona de envío donde otras ubicaciones y todas las cosas están ahí. Simplemente puedes hacer click en Editar. Esto es por defecto está ahí. Y la opción de tarifa plana mundial está ahí. Entonces hay que editar éste también, esto es a nivel mundial y es una tarifa plana y todo. Entonces sí, esto es costo es gratis y ahora tenemos que ir a la otra zona. Digamos que es como India. Efectivamente, Adiós. India. Voy a escribir como, digamos tipo como envío gratis. Envío gratis. Y en los países como Estados Unidos, entonces digamos Australia. Australia, e India. En tanto que en India, India, India, India, en India. Estos tres países están ahí. Estos tres países están ahí donde estoy ofreciendo el envío gratuito. El envío gratuito está ahí y luego agrega método. Será como libre. Entrega. La etiqueta será envío gratuito. Y orden de valor total. Será 0 siempre, y sólo voy a hacer click en Guardar. Entonces así es como viene. Envío gratis y guárdelo. Si hago clic en envío, digamos en India, podría haber, digamos Canadá. Es un envío de páginas sobre su anuncio y es una tarifa plana. Y la etiqueta es de envío. El costo base es de nueve USD y cuatro kilo, será de $1 por kilo. Hagamos que sea envío basado en $2. Hagamos $1 por envío y $2 por KG. Y sólo voy a hacer clic en Guardar y lo haré seguro. Por lo que estos son los métodos de envío que hemos creado en otras ubicaciones. Si voy aquí, es como otra ubicación. Editar. Este piso ya está salvado. No puedo hacer nada por aquí porque es gratis solamente. Esta es la opción predeterminada. Y ahora llegando a la opción de pago, tenemos tres opción de pago. Uno es la raya de PayPal y el método personalizado, no cliente. En PayPal. Vamos a hacer dos cosas, PayPal y costumbre porque tribu, intenté hacerlo pero no está permitiendo cambiar mi país a India. En realidad. Puedes probar raya si tienes dos cuentas de Stripe, si haces clic en Stripe, se conectará a tu cuenta de Stripe y luego hará algún proceso. Y es automáticamente conectará tu cuenta después de la verificación de tu cuenta. Después de la verificación de su acuerdo se conectará automáticamente a su cuenta de allí. Pero PayPal y liquidez personalizable, fácil. Podemos hacerlo muy rápidamente en PayPal. Es como abrirlo, añadir tu dirección de correo electrónico y dar click en Conectar, y eso es todo. Está conectado. Y el método personalizado es como cualquier método que quieras agregarlo puede ser, puedes agregar por aquí. Por lo que voy a teclear B wire UPI, UPI en India es como método de pago, Interfaz de Pago Unificado, algo así. Este mensaje es mensaje personalizado como gracias por su negocio para completar su pedido, por favor envíe una cantidad de transferencia bancaria de o voy a escribir por favor. Por favor transfiera el monto de este es el monto. Alambre UP en el soporte. Puedo escribir Google b coma coma coma, coma, cualquier UPI. En lugar de este nombre de empresa, teclearé mi nombre y teclearé mi ID UPI. Y voy a quitar estas dos líneas. Estoy escribiendo de identificación UPI falsa por aquí. El ID de la UPI se ve así. Puede ser como el número completo. El precio, ¿por qué BL? Sí. Importante incluye su número de pedido, ID de pedido en el asunto para que podamos conectar el pago, su pedido y simplemente crearlo. Eso es todo esto a los métodos de pago. He creado este PayPal. Si estás viendo desde India, este PayPal no está funcionando en India porque no tienen soporte en India. Stripe tiene una India apoyada porque en nuestra plataforma llamada Classroom.com Kw ET classroom.com, Ahí estamos usando Stripe y está funcionando absolutamente bien. Pero no sé en este sistema la raya no está funcionando, no funciona ya que no me está permitiendo cambiar de país. Estoy usando este PayPal y pago a través de UPS al igual que un método personalizado. Y veamos si es la opción de agregar alguna imagen o algo así. No, no tenemos ninguna opción de imagen y algo así. Podría haber agregado el código QR de la UPI sobre sus taxaciones generales también se hace que el envío y el pago se hace entonces sí. Ok. Vamos a crear un código de cupón por aquí. Me gusta voy a hacer click en Agregar cupón y voy a escribir un cupón es como 20, lo siento, no 24% de descuento en todos los productos. Puedo dar una descripción aquí. 20% de descuento en todos los productos. O tal vez por los próximos cinco días. Para los próximos cinco días. Y el código será plano 20. Será código activo, será presencial, enseñar. descuento será de 20. Y luego ver si el cupón creará un cupón más. Como piso 60. Ponte plano. $ 1,60 van a hacer porque estamos utilizando, estamos creando todo en dólares. Piso $1.60 de descuento en todos los productos. Por el uso cupón plano 60. Piso, el piso. El código será plano, 60. Es como una cantidad plana. Serán 60 dólares. Tenemos dos códigos de cupón. Uno es plano 60 y cuando e es 20%, vale, Así que no se muestra aquí. Es un porcentaje y es un piso. Ambos están activos, 68.20, y esta es la fecha de inicio. Puedes crear una serie de códigos de cupón por aquí y podemos proceder con eso. No hay categorías que ya hemos visto productos, pedidos y descripciones generales que hemos visto. Ahora volvamos a nuestro estudio de bootstrap. Año. Crearemos una página de carrito ahora. Simplemente haga clic derecho año Nuevo y voy a crear página de carrito. Para obtener acceso a la página del carrito, voy a crear un botón por aquí. Y antes de eso solo seleccionaré este nav y duplicaré este nav. Dentro de este nav, tenemos que bajar. Por lo que acabo de quitar ambos los desplegable de ahí en absoluto. Básicamente, no necesito un Navier porque estoy tomando un botón, ¿verdad? Tomaremos un botón y lo pondremos dentro de este colapso. Y voy a nombrar esto como tarjeta o tal vez pueda poner un icono de tarjeta por ahí. Tomará ícono, solo arrastra y suelta este ícono por aquí. Haga doble clic en ese icono y simplemente escriba carro. Y tenemos guardias sobre ti. Entonces qué tarjeta podemos llevar esta tarjeta. Sí, genial. Entonces voy a quitar el texto de aquí, es decir tarjeta. Seleccionaré este botón y lo alinearé para terminar. Entonces vendrá aquí. No tenemos ningún sistema de inicio de sesión, algo así porque es como un checkout invitado. Al igual que cualquiera puede venir fueron a seleccionar el producto, pueden agregar el producto al carrito. Pueden poner la información y pueden pedir el producto. No tenemos un sistema llamado ¿qué dices? Al igual que la tala y todas esas cosas. Ok. Aquí vamos. Tenemos un botón de tarjeta por aquí y tenemos categorías por aquí. Si me desplaza hacia abajo, sí, está ahí. Y si voy a los detalles del producto de los hombres, en realidad, si vas a la página de detalles del producto, así que lo que podemos hacer por aquí, ahora mismo, tenemos tanto sólo va a duplicar este contenido o uno más tiempo y eliminar estos productos. A partir de aquí, voy a ir a mi e-commerce, tomaré una lista de productos y pondré esta lista de productos en el contenedor. Por lo que tenemos en algún lugar alrededor de cuántos productos, como 17 productos que tenemos. Selecciona esta lista de productos y en lugar de menos la traeré al carrito. Año. Lo pondré como precio subiendo el precio más bajo con el precio más bajo, y luego vamos a incrementar el precio. Por página significa como C, tenemos en total 17 productos aquí. Pero digamos que si quieres mostrar solo productos limitados, digamos como ocho productos o algo así. Entonces lo que puedo hacer es simplemente teclearlo y golpear enter por aquí. Entonces tenemos una paginación, como la paginación automática. Y la página es una. Y tenemos una página. Tenemos esta gran cantidad de productos. Ahora lo que voy a hacer, este enlace de producto tenemos que hacer, ¿verdad? Por lo que acabo de llegar a este hombre y haga clic en este año. Haga click en Producto menos, sólo vamos a copiar este. Y volviendo el año, solo seleccionaré esto y lo pegaré ahí. Es como un nombre de imagen para mostrar luego mostrar extractos, precio y paginación. Así que sí, definitivamente. Tenemos paginación. Entonces tenemos que mostrar la paginación. Si quieres mostrar el precio, entonces los precios su oral para que solo puedas quitar el precio también, pero quería mostrar el precio que está en ti. Quieres mostrarlo o no depende completamente de ti. Descripciones, tamaño, y todo lo que las cosas. Sí, está ahí. Ahora si vamos a la página del carro del carro, como si vienes, viniendo a la página del carro, entonces vamos a crear un contenedor por aquí. Sólo tomaré el contenedor y como de costumbre vamos a poner hacia el margen top cuatro a ese contenedor. Y tu solo cerraré eso viniendo al comercio electrónico mientras que el e-commerce Sí. Añadir al carrito está ahí. Así que voy a dejar caer esto. No, lo siento, no añadir al carrito. En realidad carrito de compras. Esta es la página del carrito donde podemos ver como carrito de compras y listado de los productos, lo que hayamos añadido, que al menos de los productos estarán aquí. Si seleccionas el carrito de compras, tenemos dos páginas. Una es la URL de éxito y una se cancela la URL. Entonces lo que voy a hacer es que crearé. ¿ Qué dices como una página? Voy a teclear. Éxito por aquí. Nada significa como cuando el producto se ordena con éxito, donde debe redirigir. Por lo que es como página de éxito voy a tomar contenedor como de costumbre. Margen top cuatro a la misma. Margen de cuatro. Entonces tomaremos ícono. Sólo estoy tratando de evitar tomar nada externamente. Y tal vez. Pulgares arriba. Pulgares arriba. Toma de fin de semana. Bienvenido a la apariencia, le tomará un color verde porque es un éxito. Entonces bajando al tamaño de la fuente aumentará el tamaño de la fuente. Todo lo que estoy haciendo dentro este div, dentro de este contenedor. Te llevaré llevaré con éxito. Contenta con la orden. Entonces se insertará el párrafo. Este tanque continuo que para ir de compras. Nuevamente, signo exclamatorio. Tomaré un botón, el botón dentro de eso y escribiré. Sigue comprando. Una cosa más que podemos hacer es que digamos que estoy tomando uno más Encabezando tu único para ti. O a lo mejor puedo decir plana $1.60 en todos los productos solo para ti. Por lo que podemos usar este descuento por aquí. A lo mejor podemos llevarlo dentro de un párrafo de esta manera. Piso 60 es el código de descuento, que será un h4. Nuevamente. Éste, tomaremos un margen de cinco. Esto parece piso $6 de descuento en todos los productos en su próximo en su próximo pedido. De esta manera, lo que sucederá en el próximo pedido que les estamos ofreciendo son 60% de descuento. Llevémoslo al centro. También vendrá a flexbox. Tómalo columna, cuerpo, centro. Se ve como gracias. Creo que tenemos que poner un margen inferior por más de un año. Ahora parece que has realizado con éxito el pedido. Gracias por ir de compras. Sigue comprando y plano $60 descuento en todos los productos en tu próximo pedido. Sólo para ti. Entonces usa el siguiente código de cupón. Eso es todo. Guárdalo. De la misma manera podemos usar esta página cuatro. Cancelar. Cancelar porque el cartón necesita la página de cancelación también. En cancel, usaremos este thumbs-up como una cara triste, tal vez. En apariencia lo cambiaremos a un color rojo. Ve que algo salió mal. Inténtalo de nuevo, sigue comprando. Y dice como después de tu primer pedido, desbloquearás un cupón de descuento para tu segundo pedido. De acuerdo, Así que viniendo a la cesta entonces, seleccionando la opción de carrito y viniendo a opciones, seleccionaremos aquí la página de éxito. Para la cancelación, seleccionaremos aquí la página de cancelación. Días de descanso en Bueno. Todo como detalles del producto es bueno. Entonces Men's es bueno. Tenemos que transferir las navbars a todas las páginas. Entonces lo que voy a hacer y seleccionar la barra de navegación clic derecho Copiar a múltiples. Esta es la opción principal como copias de enlaces, seleccione a Todas las páginas y luego haga clic en Copiar. Tenemos algunas páginas también como términos y condiciones y todas las cosas que podemos crearla después. No es que tengamos que hacerlo ahora mismo. Entonces tenemos que llevar esto uno por uno en la parte superior. En realidad, sólo podemos quitar éste de aquí. Sólo de Cancelar y éxito. Sólo de consejeros éxitos, podemos quitar ese navbar. Pero en todas las demás páginas tenemos que poner eso. 59. Termina El Proyecto Cuatro: Ahora, como hemos vinculado todo, podemos poner un logo más de un año o algo así, y luego podemos usarlo. De todos modos, queremos, tenemos carrito, y si quieres agregar múltiples categorías, entonces podemos añadir esas categorías también. Sí, creo que eso resuelto. Entonces, lo que vamos a hacer, vamos a publicar esto. He creado un dominio separado para ello que es snap card dot bss dot design. Creo que deberías saber hacer eso, pero aún así te lo diré una vez más. Haga clic en Publicar aquí. No publicado, en realidad. Haga clic en Administrar página web. He creado éste, pero aún así te voy a decir que te gusta click en Administrar sitio web y luego haga click en Agregar sitio web, pon el nombre de tu sitio web donde obtendrás un subdominio y tú hay que decir cuándo quieres eliminar eso nunca o algo así. Queremos poner una contraseña. Puedes poner una contraseña y luego simplemente haz clic en Crear. Y entonces tu sitio web será creado aquí como snap card dot bss dot design. Y lo cerraré. Y entonces seleccionaré esta tarjeta snap dot diseño de puntos VSS, y lo publicaré. Ahora el publicado, se publica con éxito y voy a hacer click sobre éste. Se abrirá mi navegador y boom, ahí vamos. Ahora este sitio web está en vivo. Puedes ir y tener un cheque. Tal vez, tal vez pueda eliminarlo en el futuro, pero vamos a ver, ir a revisar. Tenemos nuestro carrusel por aquí y luego tenemos nuestros productos para mujer. Como si fuera demasiado caro. 77, 700 mil dólares. Al igual que sea tan bueno como el iPhone. Sí. Entonces tenemos todos los productos para mujeres. Es menú. En general, es una mujer, entonces son las URLs femeninas. Bueno, en los hombres tenemos que cambiarlo. La mujer es todo. Lo es. Mujer. Y lo publicaré una vez más. Viniendo aquí, refrescando esta página. Ahora puedes ver slash producto de mujeres HTML. ¿ Ahí está tu vida? Doy click en este producto, se puede ver esto viniendo. Absolutamente bien. Tenemos otros productos que la paginación sobre eso. Podemos ver los productos también aquí podemos hacer click en su lightbox. Podemos ver este super impresionante. Y haga click en todos los Roadster. Todo está listo. Y luego simplemente haga clic en este producto. Y $20 por una trampa para regalos. En realidad, yo estaba planeando una rupia, Pero hoy en día en dólares. Entonces que sea, no es modo de prueba solo plano 20 año, podemos ver 20% de descuento ya está ahí en algunos productos que hemos mencionado que vamos a hacer una cosa. Agregaremos este producto en talla grande y basta con hacer click en Agregar al carrito, como producto agregado al carrito. Seleccione esta y la URL del carrito. Voy a añadir el carrito URL oral por aquí Es tarjeta dot HTML, y lo publicaré una vez más. Y luego si vengo aquí y si refresco este Agregar al Carrito, y luego aquí puedes ver como opción de tarjeta C sobre ti. Ese es el mismo botón por aquí también, creo que no lo vincuimos. Volviendo ahí, vamos a indexar página y seleccionando este botón. Haremos click en Enlace y luego iremos a esta página llamada carrito, volveremos a publicar. Y también lo vamos a salvar. Volviendo a éste y simplemente refrescarlo. Una vez más. Haremos eso para cortar. Se va en carro una y otra vez porque todas las tres veces he seleccionado diferente tamaño. Veamos un pedido más grande a su medio. Seleccione aquí. Y si hago click en ver carrito, se puede ver en tarjeta tenemos este Excel grande, pequeño y éste. Y aun si hacemos click en éste, va a venir. Sólo eres porque esta es una página de tarjetas. Entonces solo voy a hacer click en eliminar esto. Elimine esto y elimine esto. Sí, se trata de siete noventa setecientos cuarenta y nueve dólares que vamos a pagar. El envío y las taxaciones se calculan durante el checkout. Cuando vamos a revisar esa hora se va a calcular el resto de la cosa. Ok. Entonces como es, no tenemos una página de inicio de sesión, por lo que estarás preguntando como exactamente cómo está guardando la tarjeta. Y la respuesta es que está guardando todo en las galletas. Por lo que haremos clic en el botón Checkout por aquí. Entonces puedes ver como resumen de pedido, tienes este pedido y este es el precio, la cantidad es esta tanto, ésta como volver a cortar una vez más y aumentará la cantidad por aquí. El precio es ahora ciento diez ciento cuatrocientos noventa y ocho dólares y checkout. Se pueden ver dos artículos. Haremos una más como iremos a Roadster una vez más y seleccionaremos este producto o tal vez vayamos al general. Y seleccionaremos éste. Con la envoltura de regalo y pondré mi nombre solo año me estoy regalando como es. Y cuando haga clic en Agregar al carrito y luego desde su ojo irá al carrito. Y entonces se puede ver que esta es una mujer grande con dos cantidades y esto es como $20 extra para eso y en total $2 mil están ahí. Entonces haré clic en Checkout. Después del checkout, lo que podemos hacer es que podamos agregar un código de cupón, que era plano 20. No estamos utilizando el piso 60 porque no conocemos como cliente porque no hemos colocado primero nuestro primer pedido. Aplicar. Y luego se puede ver como se agrega $20 del 20% de descuento, que es éste. Entonces tengo que escribir la dirección de correo electrónico como cliente. Por lo que agregaré éste y pondré un número telefónico aleatorio. Poner al país como qué país tenía Canadá. Canadá se había visto obligado a mirar o no sé, Que sea solo India. No conozco el código postal de Canadá. Mi lista y el nodo seis es el código pin. Entonces nota al vendedor es como, por favor haz un buen regalo. Atrás. No naufragar atrás. Para dar click en. Siguiente por aquí. Tenemos como PayPal y pago con tarjeta de débito. En la parte inferior tenemos esta opción llamada PYY UPI. El pago con pago instantáneo es siempre un top y este pago está en la parte inferior. De acuerdo, así que agreguemos la información de la dirección de envío. Éste. Y me llevaré esta ciudad. Neón estado India. código pin de la lista será 424213, nodo seis. Esta es algunas esta es la dirección real, pero no me he quedado en su domicilio. No me importa mostrarte esto ahora, sólo Kyi UPI. Ahora esto está hecho. Puedo ver como todos los precios en USD. Ahora si vuelves aquí y haces click en pedidos, como también encontrarás algunos otros pedidos. Pero este es el orden al que colocamos recientemente. Esta es la dirección de correo electrónico de 1.60773. Se puede ver como 177.3.60, hay que abrir este pedido y seleccionar como marcado como pagado. Si actualizamos esto. Tu carrito de compras está vacío porque hoy en día se paga. Bien, viniendo eres como ir a quien Nil mil año. Ya se puede ver el reflujo está ahí con el pedido es mares como reflow o a Roadster con este precio y tamaño tostador con esto. La personalización es empaque de regalo es el nombre del buen empaque será actual, y este es el monto del impuesto que es $270 y se muestra como orden C. Y si hago click en Ver pedido, por lo que me muestra este pedido el cual dirá como marcado como enviado y todo. Tengo los datos de contacto del cliente ahora con el número de teléfono. Y también de esa manera, puedo estar en contacto con él. Nuevamente, literalmente marcó un turno. Y marcó un turno significa como enviar notificación por correo electrónico a los clientes. Así que definitivamente, sí. Y voy a escribir su pedido se envía. Haga clic en el enlace para realizar un seguimiento de su pedido. Y el enlace será, ahora mismo estoy poniendo mi enlace de página web a través de awesome.com y no eres tú. Es tu sólo voy a dar click en confirmar. ¿ Cuál es el correo electrónico? Ese correo electrónico sólo en ese correo electrónico, debería esperar. Un correo más. ¿ Debo esperar o debo adelantar? Es reflujo. Ahora ve como si la tarjeta de broche se ha enviado a su pedido. Su pedido es enviado. Haga clic en el enlace o haga clic en el enlace para rastrear su pedido, pero no está mostrando un enlace. Creo que tengo que copiar y pegar eso. Como UC como cliente, tengo que copiar y pegar eso. Entonces sí, así es como viene como reflujo se envía tu pedido y todas esas cosas. Viene con el año. Así es como se envía el pedido. Con éxito. Actualizado, despedir Sí. Sí, chicos. Así es como vamos a estar haciendo nuestro sitio web de comercio electrónico. A partir de ahora. Para este sitio web de comercio electrónico, esto se hace y haremos algunas modificaciones en los scripts cuando estemos llegando a la sección SEO. En las secciones SEO estaremos haciendo algunos cambios en el comercio electrónico y así como en algunos otros sitios web así para que sea optimizado el motor de búsqueda SEO donde Google pueda encontrar nuestra página web fácilmente y que vamos a hacer antes que nosotros, antes de alojar nuestra página web en el servidor real. Definitivamente vamos a alojar nuestra página web en servidor real. Entonces en ese momento, no en ese momento. Antes de eso, antes de albergar nuestra página web, estaremos haciendo algunas modificaciones en el sitio web en la sección script, como hacer clic derecho Propiedades, descripción del título que OG, como Open Graph, que Twitter, luego etiquetas Meta. Estaremos agregando algunas etiquetas Meta y contenido de cabeza también, como rastreadores convergentes mediante Google Analytics y todo lo que las cosas estarán agregando también los rastreadores convergentes. Entonces lo estaremos haciendo en las secciones posteriores. Y eso es todo chicos, la sección de comercio electrónico en el estudio Bootstrap. Sea cual sea la versión, 5.9 o lo que sea, entonces hemos computado la sección de comercio electrónico mediante el uso de Bootstrap studio. Y ahora también puedes hacer tu sitio web de comercio electrónico. En lugar de productos, puedes hacer cualquier cosa. Se pueden vender los productos solamente, pero al igual que un producto virtual o como un producto físico, productos virtuales como una vez que se realiza el pedido y se recoge la cantidad, puede enviar el enlace para eso producto virtual donde el usuario puede descargar eso y pueden usarlo, utilizarlo, usarlo lo que sea. Si se trata de un producto virtual, puedes enviarles el producto y eso es todo. Ok chicos. Entonces eso es todo por ahora. Y se completa la sección de comercio electrónico. Y en la siguiente sección, veamos qué vamos a empezar enentre algo viene en memoria y podemos hacer eso o podemos ir con SEOs entonces. Bien, entonces, muchas gracias. Y eso es todo por esta sección. 60. Empezaremos con SEO: Hola y bienvenidos chicos en esta nueva sección llamada SEO, que es la optimización de motores de búsqueda. En esta serie o en esta sección, vamos a entender cómo exactamente vamos a optimizar nuestro sitio web utilizando algunas técnicas que se llama como optimización de motores de búsqueda. Hay tantas cosas que podemos hacer que te daré las mejores cosas que vamos a hacer usando la propia aplicación Bootstrap Studio. Como se puede ver ahora, el bootstrap studio virgin facilidad, vírgenes 6.1. Si ves que no hay muchos cambios enormes, incluso si estás usando este tutorial se hace desde bootstrap 5.6 algo y luego viene a ver. Y seis, no hay muchos cambios drásticos en eso. Y bajando la línea cuando estés, cuando estés pasando por el curso, notarás que no hay muchos cambios en eso. Sí, no encontrarás grandes cambios, sino como un genio pequeño y pequeño por ahí. Pero de todos modos, eso no va a afectar nuestro rumbo. Y cuáles son exactamente los cambios que hay en esta versión en particular que puedes ver como si vas a nuestro sitio web con llave aula, Udemy, o donde estés viendo este video. Entonces solo busca a mi curso. Ahora mismo está aquí, tal vez por la línea, no va a estar ahí. Por lo que incluso si puedes buscar tu llamada BSS y hacer clic en Entrar, puedes encontrar este curso a través de tus atributos 399 en este punto de tiempo cuando estoy grabando este video. Por lo que puede aumentar o disminuir, o este sitio web continuamente da las ofertas también. Así que solo estoy haciendo click en este Gore y si me desplaza hacia abajo y vengo al plan de estudios, puedes ver las actualizaciones de la versión de Bootstrap studio. Así que creo videos exactamente sobre esos temas que se actualizan en Bootstrap studio y que pueden no crear un gran cambio aquí y allá. Entonces así es como vamos a hacer eso. ¿ De acuerdo? Estoy cerrando o tal vez minimizando esa cosa en particular. Y para entender la sección SEO, lo que vamos a hacer es que vamos a utilizar nuestro sitio web tech Resolve. Abriré esa página web en el estudio Bootstrap. Y en el diseño reciente, sólo voy a hacer doble clic. Y ahí vamos. Tenemos la página web lista aquí. Entonces comenzaremos a hacer algunos SEOs. Pero antes de eso, te daré alguna comprensión básica de ACOs y por qué tenemos que usar SEOs en nuestro próximo video. Nos vemos en el siguiente video, chicos. 61. Fundamentos del SEO: Bien, bienvenidos de nuevo En este video otra vez, y estamos hablando de SEOs. Vamos a nuestra página web. Vámonos solo al aula infantil. Y te mostraré una cosa en Google. Digamos que estamos usando el motor de búsqueda de Google. Si estamos utilizando consulta de búsqueda llamada aula con llave, como se puede ver es ahí sólo tan lindo aula y aula clave canales de YouTube. Entonces si acabo de hacer clic en aula con llave, se puede ver nuestra página web, aula con llave está llegando en la primera página. Entonces tenemos esta información llamada esta es una infografía de información empresarial también podemos llamarla ya que está mostrando aula infantil, nuestro sitio web, el enlace, la URL del sitio web, entonces es un sitio web de LinkedIn, entonces este es uno de YouTube, entonces este es un Facebook. Entonces Spotify si hay algunos podcasts también puede haber entonces Instagram, entonces hay alguna empresa en los detalles completos de la empresa. Y luego tenemos una cuenta de Twitter y aspirina, así como así sucesivamente y así sucesivamente. Entonces, cómo exactamente este juego de cosas en particular en Google Search y Google entienden que si alguien está buscando esta consulta en particular, entonces tengo que mostrar estos resultados. Digamos por ejemplo, he buscado aula infantil varias veces y he visitado este sitio web. Es por eso que se está mostrando en este color particular. Entonces la mejor manera de hacer que E es ir al modo de incógnito. Eso es modo privado, eso es turno de control. Y si presionas en cualquier navegador, vendrá a en modo navegador privado. Aquí buscaremos primero Google , digamos google.com. puedes buscar directamente aquí. Cuatro aula clave, no es gran cosa. Te lleva a la misma página solamente. Vamos a buscar tu porque eres no mostrará ningún detalle o algo así. Pero tú también lo eres, puedes ver curso de aula para niños bajo demanda y lo que sea que esté ahí viene en el primer rango. Entonces, ¿cómo exactamente hacemos esto? Vamos a entender. Hay tres cosas chicos, en este lugar en particular. Esta zona, que está ahí, lo siento, seleccionaré ésta o acabaré hacer una zona roja alrededor de ésta. Así que permítanme tratar de seleccionar esto o no, soy capaz de seleccionar esto. De todos modos, se puede ver esta área en particular. A esto se le llama la sección de dominio que es https barra de colon slash izquierda-sesgada classroom.com. Y son las flechas menos públicas. Significa que cada vez que hacemos clic en esto, nos está redirigiendo directamente a una sección o carpeta en particular o algo así, que se almacena dentro de la carpeta pública. Además, veremos cuándo tomaremos nuestro servidor y dominio. A lo mejor eso va a suceder en la siguiente sección. De acuerdo, así que este es el primero es siempre el dominio uno. Incluso si puedes ver aquí, esto es un LinkedIn, esto es un YouTube, facebook.com, esto es un open.spotify.com. Primera sección es dominante. Y como estamos buscando aula con llave. Entonces hay dos cosas que puedes ver que su hijo classroom.com es un nombre de dominio, el nombre, que puedes ver por aquí. Ahora puedo seleccionar esto en azul. Este particular como Baldwin, que está en el azul. Este es el título de esa página en particular, título de esa página de índice, donde vamos a aterrizar inmediatamente cuando hacemos click en ese enlace en particular. Entonces digamos por ejemplo, si hago clic en este enlace en particular, me llevará a una página web. Ese título de página será éste. Exactamente este. Este es un título. Y entonces si ves esta área en particular, esta es una descripción de esa página web en particular, no del sitio web completo, esa página en particular. Así lo hizo la descripción de la página. En eso también se puede ver esta área en particular es audaz. Eso es aula KID. Cerca de aula infantil es audaz. El aula de niños cerca es audaz. Esto es audaz porque el aula con llave es nuestra consulta de búsqueda. Si buscamos algo más y aún así viene este sitio web. Y cuando nuestra consulta de búsqueda sea diferente, ese tiempo nos llevará ya que la sección en negrita será otra cosa. Digamos por ejemplo, si busco un estudio de bootstrap aula con llave. Ahora puedes ver que es bueno classroom.com, Detalles del Curso y curso luego bootstrap studio, sea cual sea el enlace. Pero lo eres, encontrarás que no hay nada bobinado por aquí. El motivo detrás de eso está en la descripción de esa página de destino particular de ese sitio web, no hay ningún escrito llamado como tal vez con llave aula o estudio de arranque, algo así. Pero en título se puede ver es Bootstrap studio tutorial, virgen 6, aprender y lo que sea, lo que sea, lo que sea, lo que sea, lo que sea. Ok. Entonces estas son las páginas. Este es el título. Esta es una descripción que se ve, excepto esto hace dos días, sea cual sea, la descripción parte de aquí. Esta primera es la URL o tal vez el enlace de esa página en particular, que podemos ver año cuando vamos a esa página de destino en particular. Demos clic en este enlace y veamos a dónde vamos exactamente. Entonces lo que voy a hacer, lo haré, quiero mantener esta página aquí sólo para que pueda venir aquí y ir de ida y vuelta a mostrarles cómo es exactamente ahí. Acabo de llegar a este enlace en particular. Voy a hacer clic derecho y haré clic en abrir en nueva pestaña. Se abrirá en esta nueva pestaña. Iré aquí. Veamos. Se está tomando algún tiempo pidiendo peso Forky classroom.com para responder. Esto suele suceder cuando estamos navegando en modo privado porque la mayoría de las veces, pero sí significa la empresa. Lo que hacen es poner el sitio web en servidor protegido y ese servidor, cuando recuperaron datos, parece que está en modo privado. Entonces ven como ¿hay alguna actividad sospechosa ocurriendo en la orina? Son incompletamente así. Sólo voy a refrescar esto por lo que está llegando algo como esto. Entonces eres, también eres, puedes ver que eres pk facebook.com, y hay, podría haber algún video relacionado con Bootstrap studio, y está mostrando que el bootstrap Studio 5.2 también. Y se está llevando el aula infantil también. Aquí vamos, se carga la página. Ahora puedes ver este título en particular, bootstrap studio de dos colas versión 6, aprende Bootstrap studio. Se puede ver ese año del título, pero después de un en algún momento hay un punto, punto, punto y tablero q aula. De acuerdo, entonces, ¿por qué está pasando esto? El motivo principal es la búsqueda de Google o la búsqueda de Bing, o al igual que los buscadores populares , lo que hacen es permitir 60 caracteres, incluyendo espacio para títulos. Tú como individuo, podemos poner un título largo también. Depende completamente de nosotros, pero éste, será de 60 caracteres solamente. Porque los usuarios que están viendo estas consultas de búsqueda en particular y todo Google no quieren confundirlas lanzando múltiples líneas en una línea intentaron hacerlo. Una pierna significa en la web, sitio web como escritorios y laptops, en una línea intentaron hacerlo y siempre serán 60 caracteres. Por lo que se puede ver el título del curso está escrito. Y cómo sabemos que este es el título de esa página en particular también, te mostraré eso también. Esta es la descripción de esa página en particular que puedes ver como Bootstrap studio tutorial para principiantes, blah-blah-bla. En este curso, he dado un enfoque como bla, bla, bla. Ahora veamos cómo exactamente vamos a encontrar cuál es el título y descripción y título de la página y Sí, título de la página también está en esta pestaña en particular. Puedes ver si solo tomas puntero del mouse por ahí y simplemente ponlo ahí por un tiempo. Habrá un desplegable o tal vez un pop-up que viene allí, que se mostrará como Bootstrap studio tutorial versión 6, aprende Bootstrap Studio dash una línea recta y aula Kd. El título viene aquí también. Siempre que esté utilizando el navegador en escritorio o portátil, en cualquier lugar en tamaños de pantalla más grandes. Aquí es donde viene el título. Ahora veamos en código cómo está llegando. Simplemente, vamos a hacer un clic derecho por aquí y veremos View Page Source y el atajo de teclado es Control Plus tú. Basta con hacer click en éste. Ahí vamos. Este es un código completo detrás de la página web. Y veamos qué hay ahí. Hay algunos metadatos están ahí. Tienen Google Analytics o Google Fonts, algo así. Y se puede ver el título por aquí. Hay una etiqueta de título. Y dentro de esa etiqueta de título, se escribe el título del curso. Y luego nuestros metadatos Meta. Los metadatos es como primero es palabra clave. Entonces cada vez que alguien buscaba labios y plantilla Bootstrap, bootstrap studio alternativo bootstrap Studio, GitHub Student bootstrap Studio licencia, licencia clave o lo que sea. Estas son las palabras clave, ¿ qué instructor? Significa yo. He desencadenado esas palabras clave particulares para eso. Y en caso de que la empresa también pueda agregar pocas palabras clave de su sitio que encuentren. Es útil para que pueda aparecer en el resultado de búsqueda. Esta es una descripción. Descripción viene aquí Exactamente. Se puede ver esta es la descripción que nadie muestra la versión 5.9. Muy pronto estaré cambiando una descripción también. Entonces están las tarjetas de Twitter y todo lo que puedes ver el título de Twitter. Entonces el título de Twitter es cuando compartimos esta URL de página en particular en Twitter. Twitter buscará el título, y también mostrará el título en el post. Pero Twitter no va a buscar el título de esta área. Por lo que Twitter va a buscar el tipo que Twitter encontrará primero, ya sea que tengan título de Twitter y descripción de Twitter o no. Si lo tienen, entonces vendrá, va a buscar el título de tu, no eres este título más fácil. Twitter lo hará la descripción federal de usted. Un OG es como otros medios sociales y a diferencia de Facebook, entonces cualquiera que sea Facebook, instagram o Quora, cualquier cosa, van a buscar el título de OG. Aquí es donde se va a llevar el título. Aquí es donde el título, este sitio web va a llenar el título. Og imagen es ¿qué imagen? Se va a mostrar esta imagen como una miniatura o algo así. Esta imagen se puede tomar aquí. Y luego tienen un conjunto particular año de guión con queso. A lo mejor creo que se trata algún Google Tag Manager o algo así, que a partir de ahí podrán rastrear el comportamiento del usuario y en consecuencia lo harán, estarán mejorando la página web y todos. Vale, entonces esto es lo único que es muy importante para SEO a partir de ahora en este curso en particular y en esta sección en particular, vamos a ver chicos, cómo exactamente vamos a hacer en nuestro estudio bootstrap. Por lo que encerrar esto, cerraré esto también. Y cerraré este modo privado. Vengamos a nuestro modo normal. Vaya a bootstrap studio, y vamos a prever primero este sitio web. Voy a previsualizar este sitio web. Basta con hacer clic en la vista previa. Y ahí vamos. Tenemos esto, se puede ver este título es sus resultados de toma. Y sí, el título está ahí. Y ahora veamos nuestra fuente. En nuestra fuente verás meta-información es sólo tanto. No hay palabra clave, no hay descripción, hay descripción de Twitter, hay descripción de OG. ¿ Su título no sería nada de eso? Lo único que tenemos es como título y que se trata sólo de resultados tecnológicos. Nada más porque hemos nombrado al proyecto como resultados tecnológicos, por lo que viene sólo como resultado de picoteo. Tenemos que tomar nuestro título de tal manera que venga al menos dentro, digamos como primera página de resultados de búsqueda. Cómo exactamente vamos a encontrar un título y descripción perfectos y palabras clave que veremos en nuestro próximo video. Nos vemos en el siguiente video, chicos. 62. Configuración SEO en Bootstrap Studio: Bien, bienvenido de nuevo. En este video. En este video vamos a ver cómo exactamente vamos a encontrar el título. Esta es nuestra página web. Y de acuerdo con el diseño y la información que hay en la página web. Este sitio web proporciona servicios de diseño y desarrollo de sitios web. Lo primero que vamos a hacer de nuevo, hay algunas webs para encontrar las palabras clave y todo menos lo que vamos a hacer, vamos a venir directamente a Google primer año, vamos a teclear diseño de sitios web. Mira lo que está llegando. No hay empresa de diseño de sitios web en Bangladesh, ahora mismo i en Bangladesh mostrando Bangladesh. Por lo que sólo vamos a hacer clic en esa consulta de búsqueda. Y lo primero que acabamos de venir es sumar porque ver este AD ADATs ahí. Tal vez lo sepas. Pero aún así estoy diciendo que AD es anuncio. Y siempre que no hay AD antes de este HTTPS, significa que es una búsqueda directa. Entonces en AD como búsqueda, sólo vamos a mantener esta parte de anuncio y vendremos a una sección de búsqueda directa. Y eres la primera empresa de diseño de sitio web de la escuela de sueños W3 en Bangladesh. Simplemente voy a hacer clic en este sitio web en particular y esto es simplemente pasar el puntero de mi mouse por ahí y ahí se puede ver el título está ahí. Pero el título es demasiado grande. Si vengo a ver fuente y entonces encontraremos el título. El título es demasiado grande. Es como web, el nombre de la empresa entonces sitio web diseño Bangalore empresa de desarrollo de sitios web en Bangalore empresa de desarrollo de sitios web en Bangalore volver de nuevo dos veces que han escrito empresa de desarrollo de sitios web en Bangladesh. Tenemos una idea de que si ese alguien ha buscado esta consulta en particular, esa empresa de diseño de sitios web en Bangladesh, o tal vez empresa de diseño de sitios web cerca de mí o algo así. Entonces qué título podemos guardar a nuestra página web donde puede aparecer en el resultado de búsqueda. Por lo que este es como una tienda web, servicios web, mejor empresa de desarrollo de sitios web web en Bangalore. Ok. Entonces este es el sitio web. No sé de quién es este sitio web. Y sí, no hay nada en las promociones o no. No estoy promocionando nada. Lo que vamos a hacer ahora nombraremos nuestro sitio web cavando algún tipo de partido en este particular Títulos. Vayamos al estudio de bootstrap. El título maestro, hay dos cosas. Uno es el título maestro y uno es el título basado en la página. Donde encontraremos el título maestro, haremos clic en los ajustes por aquí. Entonces encontrarás SEO. Y esto es malo. Este es el título. Entonces por defecto, resultado tecnológico es lo que el nombre del proyecto es. Por lo que se está tomando que lo que vamos a escribir es lo siento, sitios web desarrollo de diseño empresa dedesarrollo de diseñodesitios weben Bangladesh. Ahora puedes ver esto es lo que vamos a ver también en los resultados de búsqueda. Así empresa de diseño y desarrollo de sitios web en Bangalore. Y digamos si empiezo a escribir algo más, vendrá como punto, punto, punto porque está superando ese límite de caracteres. Entonces está mostrando punto, punto, punto. Estamos mostrando empresa de diseño y desarrollo de sitios web en Bangladesh. Esto es lo que va a ser nuestro título y vamos a describir alguna descripción general. Empezaremos con tech resolve, el nombre de la empresa forzó a tecnología RES ESOL con resolución tecnológica. Uno de los resultados de mazo de ESOL y ONE, uno. Tech resolve, una de las mejores empresas de desarrollo de diseñode sitios web diseño en Bengaluru. Camino. Este edificio es un B en Bengaluru. Omega Capital. Ok. De todos modos, así resultado tecnológico, una de las mejores empresas de diseño y desarrollo de sitios web en Bangladesh. Diseñamos D, E, G, y diseñamos sitios web y aplicaciones móviles. De acuerdo, esto es lo que va a ser nuestra descripción. Agreguemos este sitemap también. Entonces mapa del sitio no es más que como. Es que habrá en la página llamada dot XML, cual tendrá todos los títulos de la página web y los nombres de las páginas. Y este sitemap en particular será rastreado por el bot de Google. Y luego verán como, bien, qué cosa tenemos que buscar de esta página web para que cada vez que el usuario busque para que podamos mostrarles el mapa del sitio, simplemente encienda el mapa del sitio. Y eso es todo. Esto es como nuestro título maestro y descripción. Después de eso tenemos nuestro gráfico abierto, es decir OG, que te dije que OG significa gráfico de apertura. Entonces lo que haremos por Open Graph también el título maestro será el mismo. Simplemente lo copiaré y lo pegaré aquí de todos modos, te está mostrando, pero no es exactamente juego tú. Es como se puede decir, como un campo de entrada, algo así. Se lo pegará aquí. Y te mostraré por qué no es así. Si solo escribes algo, irá, se quedará en blanco. Yo también estoy copiando esto, Control C, y lo pegaré aquí. la misma cosa a la que iré. Lo mismo que voy a hacer al Twitter también. Pega aquí y el título, solo le traeré la copia del título. Y yo pegaré el título por aquí también. Ahora bien, este Anuncios dot EL robot.txt. Haremos eso, pero no ahora. En este apartado sólo vamos a hacer eso. Ahora tenemos que hacer lo más importante es que tenemos que ver esta imagen OG y esta imagen de Twitter también. Lo que vamos a hacer es en lugar de agregar las imágenes año, vamos a bajar, desplazarnos hacia abajo, y iremos a esta esquina, ver este enlace. Hay sección SEO es tanto, pero tenemos que ir con los de tela también. Por lo que voy a hacer clic en tela, y hay algunos tamaños que se mencionan y tenemos que añadir los tamaños en consecuencia. Como a menudo. Ahora, lo que vamos a hacer, sólo voy a hacer click en guardar. Este ícono en particular está ahí. Tenemos nuestra, ¿qué decimos? Tenemos que preparar nuestros iconos. Vamos a la página web llamada Canva. Basta con hacer click en ir a Canva, canva.com. Y vamos a crear una cosa. Vamos a crear un diseño. Y debe ser un diseño personalizado con un tamaño de cinco píxeles por phi, 12 píxeles. Eso fue, ese fue el máximo, y dos L por 512. Tú eres lo que voy a hacer. Sólo voy a ir al elemento y tomaré uno solo cualquier diseño. Diseño significa cualquier icono como la tecnología, algo así. Veamos cuál será la factible. Gráficos para tecnología. Creo que tomemos este así. A lo mejor este es nuestro logo, logo para iconos. Por lo que sólo voy a tomar este y descargaré este archivo PNG D2L. Voy a descargar esto. Esto será como sin título solamente. Vamos a abrir éste, así que lo tomaré por ahora y acaba de cambiar el nombre de esto como resultado tecnológico g, o eso es logo TR y solo lo llevaré aquí. Dentro de esto. Vamos, ahí está el logotipo de PR está ahí. Volverá a los ajustes una vez más. Y ahora voy a ir a fallar semana después. Phi dos L es el tamaño de la imagen. Entonces este es el tamaño de imagen que la tomaré. Lo que tienes que hacer es que puedas ir a Photoshop y simplemente teclear este número de talla, 182, luego 13216, y luego puedes cambiar el tamaño o de lo contrario puedes donde fue. Por lo que solo puedes hacer clic en redimensionar si tienes versión premium de eso. Hay una cosa más. Hay algunos sitios web donde puedes hacer algunos redimensionamientos. Puedes hacer las ideas desde ahí. Pero lo que voy a hacer, solo tomaré la misma imagen por varias veces. Esto también está bien. No tenemos ningún tema en eso. Tomará la misma imagen para todos los tamaños. Si hago clic en Guardar y lo dejo ir. Ahora, volveremos de nuevo a nuestra configuración y luego llegaremos a SEOs. Y si vengo al año OG, tenemos que poner el título. Pero si vienes a Twitter o algo así, si hemos dado los diferentes tamaños de pantalla, podría tomar el tamaño exacto de la pantalla. Tú lo eres. Se puede ver si alguien está compartiendo este post en particular mediante el uso de la URL de la página de índice, la publicación en Facebook o cualquier otra cosa que se verá así ejemplo.com. Vendrá como tech result.com o cualquiera que sea el nombre de dominio se encuentre. El título vendrá aquí, entrará la descripción y la imagen vendrá así. Y el tipo OG, te mostraré esa página web. Y en Twitter, solo iré a Twitter y vendré aquí y simplemente haga clic en Guardar. Ahora se puede ver cuando alguien ha compartido esta página en particular en Twitter, no habrá nada porque hemos demostrado que el tipo de corte de Twitter será ninguno. Tenemos dos tipos diferentes como resumen y alguien con imagen grande. Entonces si solo hago clic en resumen, se verá así en Twitter. Y si hago clic en alguien con imagen grande, se verá así, que no nos veo. A ellos les gusta porque la imagen es como cortar la imagen. Sólo tienes que ir a resumen. Esto está bien, no hay problema. Todo bien. Entonces PWA, acabaré de encender esta sección que es aplicación web progresiva. ¿ Cómo es cómo es exactamente la aplicación web progresiva? De nuevo, vendré a eso. Demos el título. Así que sólo pega este nombre corto, tal vez sólo resuelva, lo siento. No tenemos que dar este título y todo. El nombre será disminuido o solitario. **** resultados y acortamiento serán TR. Y cuál será la URL que voy a mostrar la URL debe ser índice. Siempre que alguien inicie este sitio web, la URL debe ser página de índice. Entonces simplemente encenderemos esta máscara, icono de Máscara y la imagen de fondo. Hagamos las imágenes de fondo amarillas, algo así. Tomemos esta imagen de fondo, amarilla, tipo de amarillo. Y el equipo E mayor tomará lo mismo, pero en un lado un poco más ligero. No esa luz. Se puede ver el color en tiempo real por aquí. Lo que va a venir. Y simplemente selecciona Sí, pantalla completa. Lo mantendré como pantalla completa y orientación. Lo mantendré como un anónimo como paisaje de retrato, tanto orientación va a funcionar. Ahora lo que sucedió aquí exactamente es cuando iremos a nuestro navegador móvil o algo así. Entonces hagamos una cosa. Veamos eso. Simplemente haga clic en Guardar. Cuando vayas a Vista previa. Ven a esta sección anterior, tú eres, verás esta. Ese es el número está ahí, 192 punto 168 punto un punto ocho colon 8 mil. Es posible que tengas un número diferente. Eso es seguro. Cualquier número diferente tendrás que hacer una cosa. Si tienes, como, obviamente tendrás wifi, wifi conecta el sistema como laptop o escritorio y tu teléfono móvil a la misma red Wi-Fi. Y abre el navegador. Por lo que sólo voy a agregar, estoy agregando mi pantalla móvil aquí. Lo que voy a hacer, simplemente, voy a abrir mi navegador por aquí. Sólo un segundo. Abriré mi navegador y escribiré este número que es 192 punto 168 dot c. hay siete. Y aquí está escrito como mayor parte del tiempo se cambia semilla ahora este número se guarda ciento ochenta doscientos sesenta y ocho punto un punto ocho colon 8 mil. Sólo voy a hacer click en Entrar. Ahí vamos. Ahora puedes ver el mismo sitio web en tiempo real en pantalla móvil. Ahora se puede ver esta área en particular. Sólo estoy señalando esta área en particular. Esto es amarillo. Ok. Vamos a bootstrap Studio e ir a Setting. Y regresa a nuestra PWA. Estás en este color. Tomemos cualquier color diferente. Digamos éste. Y sólo voy a hacer clic en, de acuerdo. Y haré clic en Guardar de inmediato. Se puede ver que hay un cambio de color. Esto es lo que sucede cuando estamos usando en PWA como estoy usando iPhone. Entonces hay una limitación que iOS y no me está permitiendo. Pero si vas a tu dispositivo Android solo un segundo. Ahora el color vuelve al original. Si vas a tus dispositivos Android y si solo haces clic en cualquiera donde tengas esa opción. Y en realidad no tengo un dispositivo Android conmigo en este momento. O de lo contrario te habría mostrado. Si vas al navegador y si seleccionas los tres puntos, algo así por ahí. Y en eso se puede seleccionar en cuál es el atajo o algo así. Significa que creará lanzador, icono de Launcher en la pantalla de inicio. Si hace clic en ese icono del lanzador, la aplicación se abrirá como aplicación Android. No habrá que no haya una barra de URL o algo así. Será como una aplicación Android pura. Entonces así es como vamos a utilizar esta PWA. Entonces PWA, aplicación web progresiva en iOS no es compatible. Pero sí, en Android y Android e iOS, Android funciona de esa manera. Entonces PWA es, así es como vamos a utilizar PWM. Así es como va a suceder. Y lo hemos hecho con nuestro SEO de página maestra, páginas maestras como esta. Seo va a solicitar todas las páginas. Ahora te mostraré cómo exactamente el fin de semana dar un título diferente y una descripción diferente, y OG y Twitter y todas esas cosas. Descripción del título para páginas individuales que haremos en nuestro próximo video. 63. Seo de una página: Bien, bienvenidos de vuelta chicos. En este video vamos a ver cómo exactamente vamos a dar título individual y descripción a páginas individuales. Índice es lo que hemos hecho en este momento. Y vamos a entrar en mantener ese título y descripción en particular a página de índice porque esta es la página de lanzamiento de un sitio web cada vez que alguien hace clic en la URL, vamos a nuestro punto de contacto HTML. Entonces esta es nuestra página de contacto. Selecciona la página de contacto. Yo hago clic derecho, vengo a propiedades. Y ahora tenemos esta configuración de SEO sobre tu primera para esta página en particular. Ahora aquí está escrito como una empresa de diseño y desarrollo de sitios web en Bangalore. Pero ahora lo que vamos a escribir es como contactar Tech resultado y resolver tu problema. Algo así. Contacta con Tech resultado y resuelve tu problema. Descripción será contactarnos y obtener su solución de resultado. Esta será la descripción y lo mismo. Obviamente, lo voy a hacer por OG. Og está tomando este título particular del maestro. Reemplaza esto por éste. Y para Twitter también, reemplazaré el título y la descripción. Lo tomaré desde aquí. Simplemente copiaré esta descripción. Esta descripción por aquí. También pagaré como la descripción por aquí. Y agreguemos estas imágenes. Será como este año, será como herencia. Significa que viene del maestro. Un año agregaré la imagen una vez más. Nuevamente, heredado viniendo del maestro uno. Y eso es todo. Ahí habrá ir. Esto se hace. Esto es lo que es la página individual SEO. Basta con hacer clic en guardar. Eso es todo. ¿ Qué pasará? ¿ Volviendo aquí? Ver a partir de ahora, ya se puede ver el ícono, ese ícono en particular está aquí no se cambia el título. Si compartes como cuando alojamos este sitio web, vamos a atacar result.com es el nombre del sitio web. Entonces la URL será algo así www dot tech result.com slash página de contacto porque va a estar en contacto con el índice predeterminado de landing pages. Por lo que se contactará si copia este enlace y si comparte eso en WhatsApp o en cualquier lugar, esa imagen que hemos agregado por ahí, esa imagen vendrá ahí y se los mostrará. Por lo que dará un fuerte atractivo más al usuario debe afirmar que sí, este sitio web está diseñado de manera muy profesional. la misma manera que puedes hacer con la solución empresarial, y de la misma manera como después de enviar formulario también puedes hacer parecer que también puedes hacerlo por OC. Eso es que son nuestros clientes felices. De acuerdo, Entonces así es como vamos a estar haciendo los SKUs de pH individuales. Eso es lo que esta sección en particular llamó SEO. Veamos una vez más. ¿ Nos perdimos algo o no? En SEO, desearíamos ver el SEO principal luego sitemap también. Y esto agrega punto TXT es que lo vamos a usar cuando vengan los anuncios que solo hay que pagar como esa cosa en particular. Sí, robot.txt. Robots.txt es como pendiente y que veremos en el siguiente video. Creo que podemos terminar esta sección SEO en particular aquí porque hemos visto la consola del bebé. Entonces entonces PW también metatag es como sí, podemos ver el título de Meta. Meta tag es siempre que ponemos ese particular como SUV y todas esas cosas, puedes ver los metadatos viniendo aquí. Un metatag que puedes agregar por aquí es solo click en Agregar etiquetas Meta. Esto se llama etiqueta Meta, y la etiqueta será palabra clave. Palabra clave y el contenido que puedes dar palabra clave. Por ejemplo, sitio web. Diseñando. El diseño de sitios web que está incluyendo el espacio es una palabra clave. Cuando quieras separar la palabra clave, lo que tienes que hacer es ponernos una coma. Coma significa que estas son dos palabras clave diferentes. Entonces el diseño de sitios web es una palabra clave y el desarrollo de sitios web es una palabra clave. Entonces así es como vas a usar la palabra clave para diferentes palabras clave. Una palabra clave puede ser varias palabras. Y si quieres diferenciar diferente el teclado, tienes que usar la coma por ahí. Entonces encabezar el contenido que ya hemos visto este contenido de cabeza. Y veamos cómo se llama esto como robot.txt. Veamos qué es robots.txt En nuestro próximo video. Veamos qué es este robot.txt en nuestro próximo video. 64. Robots txt: Antes de entender y antes agregar el contenido en robot.txt, te diré qué es exactamente robots.txt. C, motores de búsqueda como Google, Yahoo, Bing, DuckDuckGo, o cualquier cosa, cualquier motor de búsqueda. Hay un momento. En un tiempo frecuente basado. Visitan nuestra página web. Significa que nos gustaría que cualquier usuario no tenga hacer clic para esa URL de sitio web en particular o algo por el estilo. Vienen automáticamente. Hay un robot de fondo o comprado lo que sea. Hay un bot que vienen a nuestra página web. Y el buscar la información de un sitio web, es decir etiquetas H1, etiqueta H2 y algo así. Obtendrán la información de un sitio web y la almacenarán en su base de datos. Pero cada vez que los bots vendrán al sitio web, hay ciertos casos. Son v como propietario de un sitio web, no queremos que se compre. Debe escanear algunas páginas en nuestra página web. Digamos por ejemplo, en nuestro sitio web hay una página llamada después de un formulario de envío punto HTML. No queremos que eso se compre. Debe escanear este sitio web porque este sitio web no tiene información. Es igual que tenemos algo donde podemos ver esta página en particular cuando se activa, significa que alguien ha llenado el formulario después de eso sólo va a llegar la velocidad. No queremos que esta página deba indexar en los resultados de búsqueda de Google o cualquier motor de búsqueda en los resultados de búsqueda, este índice de pacientes. qué página queremos indexar esa página, agregaremos en Google comprada y qué página no queremos que nos despermitiremos. Agregaremos esa URL de página en la sección no permitir que vamos a ver cómo exactamente lo vamos a agregar. Ver iremos a Ajustes. Y luego nosotros SEO, tenemos esta sección llamada robots.txt. Hay múltiples bots. Para este ejemplo en particular, te diré cómo exactamente vamos a hacer por Googlebots. Vamos a empatar primer usuario, USAR nuestro tablero de usuario, agente AGE y te agent, colon space y Google compró GO, GLM, Google BOT board. Entrar. Entonces teclearemos despermitir. Entonces d debe ser capital. Esto EL ES TODO PROPIO espacio de colon no permitir. Y luego vamos a escribir el nombre de la página por aquí. Es decir, ¿cuál es el nombre de la página? Así que sólo lo guardaremos aquí. Vendré aquí, haga clic derecho o simplemente haga clic en Cambiar nombre, y controlaré una copia de este nombre de página. Entonces volveré a nuestro robots.txt. Espacio. Una barra lateral estará ahí porque antes de eso nuestro nombre de dominio estará ahí, ¿verdad? Y entonces solo voy a hacer clic en pegar a esto, no dar click en eso. Yo pegaré esto y pondré una slash más. Una vez hecho esto. Entonces el agente de usuario, Googlebot, cada vez que va a venir el tablero de Google y el sitio web del escáner, google compró sabe que no quiero escanear esto con este pH en particular porque no quiero indexar. Ahora lo que queremos indexar. Hablemos de nuevo. Éste, Googlebot studio, Googlebot. Y teclearé permitir. Permitir. Sólo pon esta slash. Significa que Googlebot sabe que no quiere que él o ella, quienquiera que sea. Googlebot sabrá que esta página está configurada para ser. No escanee esta página, pero qué página escanear en aleación es solo latigazo que significa excepto esta página. Escanea todas las páginas. Esto es lo que va a ser. Y esto es para el tablero de Google, ¿verdad? Pero, ¿y si viene el Microsoft Bot? Verá, está bien, esta condición es para Google pero no para mí. Voy a escanear todas las páginas de nuevo, si alguien está buscando buscando, cosa particular en entrada del motor de búsqueda de Microsoft es el motor de búsqueda Bing. Esta regla no va a funcionar por ahí. ¿ Sabemos cuántos virginianos hay en el mercado y cuáles son los motores de búsqueda que utilizan los usuarios? No. Tenemos una cosa para eso. En lugar de esto Google compró. Pondremos la marca estrella por aquí y arrancaremos Mar significa para todos los barcos, no es específicamente para esa caja en particular, por lo que acabaré de poner 11 marca estrella más. La estrella es como para todos los barcos. Y hay una cosa más, que podemos mostrarle, eso es sitemap. Hemos visto el mapa del sitio por aquí, justo en la media. Hemos activado estas opciones de sitemap, así que volveremos al robots.txt. Algunos espacios extra al golpear Enter. Y teclearé sitemap por aquí. Por lo que es como SID MAP sitemap pondrá colon, y ahora vamos a poner primero la URL del sitio web. Entonces digamos que este sitio web es https colon slash slash www dot tech result.com. Apenas asuma a partir de ahora, porque no tenemos ningún dominio, solo asuma que esta es la URL del sitio web que es www.Microsoft.com. Y antes de eso tenemos HTTPS también agregado a ella. O bien podemos simplemente escribir http. Simplemente escriba http porque S significa seguro. Entonces digamos como si es seguro o no, este es el mapa del sitio. No espacio. Después de eso, solo pon una slash. Recuerda que tu nombre de dominio estará ahí no picoteo resultado resultado tech es sólo para referencia. Si tu nombre de dominio es solo por ejemplo, lo que podemos, puede ser como, digamos abc.com. En lugar de resultado tecnológico, estarás escribiendo ABC.com.in.me, sea lo que sea. Su nombre de dominio slash, y luego escriba sitemap como mapa del sitio ITE MAP, todos los caracteres pequeños, ni uno solo. Podría ser capital u oído, sitemap dot xml. Eso es todo. Llamaste a tu sitemap por aquí. Y te estás diciendo, no escanees esta página en particular porque no quiero escanear esta página en particular y aceptar esa página. Puedes escanear todo en mi sitio web para que pueda venir en el resultado de búsqueda. No es tan rápido. Vale, digamos que si has agregado robot dot robots.txt En tu sitio web e inmediatamente al día siguiente vendrá. No es así. Siempre que venga el tablero de Google y rastree su sitio web, entonces solo se va a obtener, los datos, entonces solo se recuperarán los datos, y luego el sitio web se enumerará en su qué hacer usted dice? Resultados de motores de búsqueda. De acuerdo, entonces esta es una cosa, y así es como funciona. Demos clic en Guardar aquí. Eso es todo lo que tu robots.txt está hecho. ¿ Algo más? ¿Hay no, no queda nada. Así es como vamos a hacer nuestro SEO robot.txt. Si me preguntaste qué pasa con Anuncios dot TXT, siempre que quieras iniciar anuncios en tu sitio web, puedes ir a Google AdSense y crearás cuenta esa vez. Google te dará un archivo llamado Anuncios dot TXT. Dentro de eso, bueno, habrá un número, solo cópielo y péguelo aquí y haga clic en Guardar. Eso es todo lo que se hace. Entonces así es como vamos a hacer. Así es como hemos hecho nuestros SEOs en nuestra página web. Y lo hemos hecho para esta solución de negocio de página particular, podemos hacerlo en cualquier momento. Como a menudo. Sólo lo estoy manteniendo en blanco. Entonces cuando vamos a alojar el sitio web, puedo mostrarte algunas cosas más en eso, más cosas se significan como que si no hacemos nada en SEOs como la página privada ACoS, si no hacemos ahí y qué hay? Si hemos hecho algunos cambios en esa sección particular de SEO de página privada dedicada y cómo va a entrar en aparecer o cómo va a entrar en venir en esa cosa en particular. Esta cosa se hace y SEOS como optimización de motores de búsqueda se hace en videos posteriores como cuando vamos a alojar el sitio web, cuando veremos a los gestores de etiquetas de Google Analytics y todo eso cosas, entonces veremos cómo exactamente vamos a hacer con el resto de las cosas. Eso es todo por esta sección en particular, se hace SEO y si algo viene en mi mente en el futuro, como siempre, agregaré el nuevo video en esta sección en particular. Así que gracias chicos. Gracias por ver este video y esta sección. Y nos vemos en la siguiente sección. 65. Cómo comprar nombre de dominio y alojamiento: Hola y bienvenidos de vuelta chicos. En esta sección particular. En esta sección vamos a comprar un anfitrión dominante, un sitio web y hacer algo mucho más emocionado en esta cosa en particular. Este es un conocimiento práctico completo donde puedes obtener una dominante para tu cliente también y para tu propio. Y puedes alojar tu sitio web en tu servidor real. Y si no me equivoco, te lo he dicho en las conferencias anteriores donde te estaré mostrando cómo adjuntar o cómo agregar un video real directamente como video HTML al estudio Bootstrap. Hemos visto como YouTube y Vimeo video enlazando a él, pero no hemos visto el video HTML enlazando a él porque sí no estábamos teniendo el servidor en ese momento. Pero sí, en esta sección o en la sección que viene, estaremos haciendo eso. Lo que vamos a hacer, vamos a comprar un dominio que estás alojando. No voy a comprar porque ya tengo un hosting, pero sí, te mostraré cómo exactamente vas a comprar el hosting también. Entonces hay dos cosas ahí. Uno es dominante y uno es hospedaje. Veamos. En primer lugar, ¿qué es el alojamiento? El alojamiento no es más que obtendrás un espacio como un espacio en el disco duro en el servidor. Y su sitio web será arrojado a que los datos de la página web serán vertidos en ese servidor. Y ese servidor, obtendrá una carpeta en ese disco duro en particular. Y esa carpeta será mapeada a tu nombre de dominio. Y siempre que alguien haya buscado tu nombre de dominio, sean cuales sean los datos que hay en esa carpeta, son los archivos de nuestro sitio web que van a buscar y el usuario verá el sitio web. Esto es hospedaje. Entonces estoy usando hosting porque es muy barato y todos los servidores que proporcionan es muy rápido. Eso me gustó mucho. Ya tengo un par de sitios web alojados en hospedaje propio y de mis clientes también. Esto es hospedar y vamos a ver, alojamiento cosa. Si vas a hospedar por aquí, hay dos tipos de hosting, en realidad 34 tipos de hosting otros puedes ver esto es todo nuestro hosting solamente, pero te mostraré los dos más importantes hosting que necesitarás en el nivel inicial. Esto es hospedar tu alojamiento web, y este es un hosting en la nube. El alojamiento web es para pequeñas y medianas empresas donde los visitantes no son más sobre la base mensual, liderar seleccionar diez mil doscientos veinticinco, treinta mil así en base mensual visitante, la base en la nube es como más visitantes con más proceso de computación y muchas cosas como proyectos a gran escala en absoluto. Te mostraré lo que es el alojamiento web. Entonces abriremos esto en una nueva pestaña y nos iremos. Y una vez que me desplaza hacia abajo, puede ver que hay tres plantas al año, plan 691492179 rupias al mes. Pero este precio solo es aplicable si estás tomando este plan durante al menos 48 meses. Si estás bajando el número de meses o número de años, El precio aumenta. Y te mostraré que como veremos en 69 rupias planean, hay un sitio web con 30 GB de almacenamiento y 10 mil visitantes al mes. En este plan, se puede ver los aumentos del sitio web. Puedes alojar hasta 100 sitios web si tienes varios sitios web y no quieres gastar una y otra vez en esos servidores y hosting. Para que puedas llevar este plan de hosting donde puedes alojar un sitio web 100. He tomado esta planta sólo cual es premium donde presumir plan a sitio web para alojar mis múltiples sitios web. Para múltiples sitios web, puedes alojar múltiples sitios web para, pero tienes que comprar dominio todo el tiempo cuando vengas con un nuevo sitio web, obtendrás un 100 GB de almacenamiento SSD en 25 mil visitantes mensuales. Y este 25 mil visitantes mensuales, E es para todos los sitios web que has alojado en esta planta en particular. No es para un sitio web, es todo para todos los sitios web. Correos gratis. También puedes crear correos electrónicos gratuitos. Pero sí, en este curso en particular y en esta serie particular, vamos a ver cómo adjuntar o cómo mapear o cómo apuntar nuestro dominio a los correos electrónicos oficiales del zoológico. Y también te daré cuál es la ventaja y desventajas de señalarlo a Zoho, luego SSL y todas las cosas que vamos estar recibiendo como ancho de banda ilimitado, lo nulo. Ahora si vamos al hosting en la nube, solo voy a ir y crear click en nueva pestaña. Ahora si vas al hosting en la nube, entonces lo que hay es el plan de inicio es de 700 mil rupias al mes. Se puede ver el plan superior es de 79 rupias al mes. Aquí son 700 mil mensuales, pero la puesta en marcha viene con 200 GB de almacenamiento SSD, tres GB de RAM para ver dos núcleos de CPU. Entonces correos electrónicos gratuitos y SSL es Cloudflare integraciones está ahí, y luego todas las demás cosas también están ahí. Este plan puedes usar cuando el sitio web es como bastante grande y puedes, si encuentras que el sitio web tiene más código de tráfico, vale, Así que este es el plan. Entonces, lo que vamos a hacer, solo haremos click en Agregar al Carrito a partir de ahora. Pero cuando vamos por un checkout ese tipo, lo voy a quitar porque solo quería mostrar cómo exactamente vamos a comprar el hosting. ¿ Está esto en este plan? Digamos que este es un solo plan de sitio web. Simplemente puedes hacer click en Agregar al carrito de aquí, y te redirigirá a la sección de carrito. Ahora, antes de entrar en la sección de tarjetas, dirá qué plan tienes que comprar verá como 1600 rupias al mes es de 448 meses. Y si vas con un plan de un mes o te gusta un plan de 12 meses, esto es lo que vas a pagar si hago clic en el calentamiento del planeta es así mucho 349. Y si vas con 12 meses planeta es así mucho 1668. Después de impuestos, vendrá a esta cantidad que es de 1.2400968 rupias. Vale, entonces aquí es donde está ahí el plan de hospedaje. Y una vez hecho esto, entonces iremos por algo real que es nuestro dominio. Vámonos por el dominante. Y voy a hacer clic en este nombre de dominio por aquí. Y voy a hacer clic en este verificador de dominio. Y voy a hacer clic en el verificador de dominio. Por aquí encontrarás que hay múltiples extensiones y todas están ahí. Entonces dotnet.n.com en línea y todo lo que vamos a hacer en este video en particular ya que estamos comprando el dominio solo por mostrarte un propósito demo o un propósito tutorial. Voy a comprar un dominio que es muy barato, es decir 75 rupias y algo así. Cómo comprar un dominio primero, habrá un nombre en tu mente, como quiero este nombre particular de mi página web. Para que ese nombre hay que buscar por aquí. Por lo que estoy escribiendo mi nombre por aquí que es actual, clave ESTÁN EN actual, y sólo voy a hacer clic en la búsqueda. Una vez realizadas las búsquedas, se puede ver que hay punto actual se toma. Y esto me está pidiendo que verifique eso porque ya he buscado muchas veces. ¿ Qué es esto? Por favor, utilice el barco de correo electrónico. Ok. Se trata de un barco. Se trata de un barco. Y el segundo, esta es una junta directiva. Esta junta, esto es lo que, esto es lo que esto es madera y verifica. Este dominio ya está tomado. Me está mostrando. Entonces en lugar de eso, simplemente me desplazaré hacia abajo y veré qué dominio se puede tomar. Nodo en línea del tablero actual. Iremos con éste. Veamos que está disponible o no sitio de puntos actual global. Y sólo voy a hacer click en Agregar al carrito que es el sitio de puntos actual global. Y está comprobando la disponibilidad y sí, hemos verificado que y esto está disponible. Entonces lo que vamos a hacer ahora, sólo vamos a hacer click en, Continuar cortando. Una vez que haga click en Continuar, seguir al carrito, me está mostrando esta cantidad y por qué esto está mostrando esta cantidad mayor ahora, porque he seleccionado dos años por aquí, tengo que ir con el primero . Sólo voy a hacer clic en esto. Hay 75 rupias al año. Ahora me está diciendo 104 rupias, 0.31 Pesaro, como en moneda india se llama así solo como 104.31. De acuerdo, así que el siguiente paso es que me está mostrando también es pedirme que tome los planes de hosting. Entonces también lo eres, puedes seleccionar esa cosa plan que es las 68 rupias, 69 rupias planean por 12 meses o un mes, sea cual sea. Y ver aquí es una cosa más como ocultar información personal de mi dominio en repeticiones, hacer 99 al año. Lo que significa es que si solo revisas esto, agregarán otras 29 a 1900 rupias. Esto ocultará su información personal o de lo contrario, ¿qué pasará cuando realice el pago y cuando compre esto? Quien muerde este dominante es su nombre para el correo electrónico o en algún momento número de teléfono también, está disponible públicamente. Y las empresas que brindan servicios que podrían empezar a llamarte no fueron dos días. Si no quieres pagar esto a 99, entonces puedes simplemente ir con eso y puedes sentir el dolor durante dos o dos o dos o tres días. Después de eso, dejarán de llamarte. No es un gran problema. Simplemente haga clic en Checkout más de año. En checkout me está pidiendo que inicie sesión y luego iniciaré sesión con mi cuenta de Google. Esta opción de pago que tengo frente a mí, seleccionaré una opción UPI. En mi país. La opción UPA está ahí en tu país, PayPal o tal vez cualquier cosa sea popular para que puedas usar tu método de pago de confianza a lo largo del año me está mostrando una 104 rupias está ahí. Por lo que continúa con la UPI, mi sitio, se hace el pago y ahora se puede ver que su pago es exitoso. Por favor, no hagas nada. Estás redireccionando. Estamos redireccionando a algún lugar y a dónde nos llevan. Ahora está finalizado tu dominio y esto es, esto es lo que también obtendrás. Se trata de los nobles que hemos tomado que es el sitio de puntos actual global. Y acabo de ver en qué país estás en India. Por lo que sólo va a escribir India por aquí porque he seleccionado India por aquí y seleccionaré este personal solamente y solo hará clic en Siguiente configuración. Esto es pedir algunos de los detalles por aquí. Por lo que acabaré de introducir algunos detalles como estado y otras cosas, código PIN, entraré un número de teléfono que entraré. Y sólo voy a hacer click en Finalizar registro. El domicilio no debe ser demasiado largo. No se permiten comas por aquí donde casi terminas y luego haz clic en Continuar. Habrá un correo electrónico. Por lo que sólo tengo que verificar mi e-mail, por lo que sólo voy a ir a mi dirección de correo electrónico ahora, eso es Gmail. Si no has recibido ningún correo electrónico para la verificación, solo puedes hacer clic en reciente verificar correo electrónico de verificación de correo electrónico y ese correo estará ahí en tu bandeja de entrada. Este es el enlace de verificación de correo electrónico y tengo que dar click en este enlace. Y una vez que haga click en este enlace, me llevará al hosting o página una vez más. Y esta vez, debería ver como, sí, el correo electrónico ha tenido mucho éxito en el momento q. y podemos cerrar esto. Podemos volver a esta página y simplemente haga clic en Refrescar aquí. Tal vez puedas golpear F5 para refrescar la página. Eso es todo. El dominio ha sido verificado con éxito y nuestro dominio es el sitio de puntos actual global. En este video en particular, hemos adquirido el dominio con éxito. Y en el siguiente video veremos cómo vincular nuestro dominante a nuestra cuenta de hosting. Así que nos vemos en el siguiente video, chicos. 66. Apunta dominio al servidor de alojamiento: Bienvenidos de vuelta chicos. En este video, y en este video vamos a ver cómo vamos a apuntar nuestro nombre de dominio al servidor de hosting. Lo que vamos a hacer aquí es que vamos a hacer click en el hosting o tu ya tengo pocas cuentas alojadas. Lo estoy haciendo borroso. Sólo para algunos, se puede ver que hay razones de seguridad. Este es mi servidor premium hosting. Y encontrarás un botón como este llamado Agregar sitio web. Por lo que simplemente haga clic en ese botón del sitio web del anuncio por ahí. Y luego hay que escribir el nombre. Entonces veamos cuál es el nombre del dominio. Es como corriente global o algo así. Si no me equivoco. Y veo así es como sucede esto cuando tomas un dominio y solo tomas cualquier dominio. Entonces este es el dominio. Sólo estoy pegando este nombre de dominio por aquí. Simplemente copiaré este nombre. Voy a pegar el nombre por aquí y pondré una contraseña. Así que pongamos contraseña mágica por ahí. Cualquier cosa. Solo estoy difuminando esto también y haré clic en Agregar sitio web. Al hacer click en Agregar sitio web año vas a encontrar mi página web está listada ahora, solo tomaré todas las webs, así que estamos aquí y esta es mi página web. Tú estás, mi página web está ahí. Y luego haré clic en Administrar página web. cuanto hago clic en Administrar sitio web, se abre el este panel, entonces este es el nombre de mi sitio web y esto es todo lo que necesitamos. Ahora, veamos si vamos a esta URL llamada Global current dot site. Y sólo voy a usar esta URL por aquí. Haremos clic en Entrar. Está diciendo que no está asegurado y está mostrando esto su cuenta ha sido creada. Este es el dominio y esto es lo que es. Ahora lo que tenemos que hacer es ahora conectamos nuestro dominante al servidor. Ahora están señalando. Ahora cargaremos los archivos en el servidor. Después de eso, vamos a hacer vida a nuestro sitio web y que veremos en el siguiente video. Nos vemos en el siguiente video, chicos. 67. Cómo alojar el sitio web: Antes de avanzar, antes subir nuestra página web al servidor, lo que tenemos que hacer es que tengamos que exportar nuestra página web. Este es nuestro sitio web llamado Tech result. Y ahora vamos a exportar este sitio web. Entonces, ¿cómo vamos a exportar esto? Abriremos el sitio web tech Resolve en nuestro estudio bootstrap, y luego iremos a exportar. Y antes de eso sólo vamos a hacer click sobre esta flecha por aquí. Voy a hacer clic en la configuración de exportación. Estos son los ajustes de exportación y tenemos que hacer algunos cambios por aquí también. Antes de eso, tenemos que decir dónde exactamente queremos exportar este fichero. Por lo que voy a hacer click en Examinar. Y sólo vamos a ir a este BSS. Voy a ir a resolver, y voy a crear una carpeta más por aquí, y la nombraré esta carpeta como 6.5. Bajo scroll export. Vamos a conocer que en este archivo en particular, todos nuestros archivos se exportan en esta carpeta en particular en realidad. Por lo que sólo va a seleccionar esta carpeta. Significa como voy a simplemente hacer clic en esta carpeta y voy a hacer clic en Seleccionar carpeta. Y aquí está ahí el camino. Y ahora tenemos que hacer unos ligeros cambios por aquí, ligeros cambios aquí es lo primero que es como omitir imágenes no utilizadas. Tenemos que dar click en este enlace, activar esta opción. Lo que significa que era como tal vez hemos importado muchas imágenes. Digamos, vamos a dar un conteo. Digamos por ejemplo, hemos importado 20 imágenes en nuestro proyecto en este resultado de mazo. Y de los 20 solo usamos diez. Al mismo tiempo que exporta. Apenas exportar sólo aquellas imágenes que se utilizan en este proyecto. Las imágenes que no se utilizan sino que sólo se importan en el proyecto. No queremos que esas imágenes se exporten. De 20, solo diez imágenes lo vamos a exportar, que se utiliza en este proyecto y diez que no se utilizan. Se lo saltará. Debido a eso, el tamaño de nuestro sitio web y tamaño, nuestro tamaño de esa carpeta de imágenes en particular bajará cuando no estemos exportando las imágenes no utilizadas. De acuerdo, y exportar etiquetas, vamos a activar esta opción también. Las etiquetas es como cuando estamos usando las etiquetas, te mostraré cuáles son exactamente las etiquetas para que las etiquetas se exporten y la URL estará aquí. Así que vamos a ver. Esta es la URL y está diciendo que falta HTTPS en HTTP barra de barra de dos puntos. Esta es la URL del sitio web. Estoy poniendo esa URL por aquí. Entonces solo voy a hacer click en Guardar. Lo que está etiquetado es como se puede ver como un hashtag modelo dash one, y luego pie de página oscuro. Estas son las etiquetas que estamos haciendo explotando también las etiquetas. Entonces antes de exportar, ahorraremos este proyecto una vez más. El proyecto se está guardando y luego haré clic en este botón Exportar. Aquí verá como exportar datos y se exportó diseño de su sitio web eldiseño de su sitio weby se hará clic en esto. Y ahora se puede ver que la exportación es su sitemap. Hemos encendido el mapa del sitio, el mapa del sitio y el esquema a lo largo de un año. Este punto manifiesto JSON está ahí que en nuestra carpeta de activos. Podemos ver el bootstrap significa que CSS está ahí, entonces las carpetas CSS están ahí. Este es nuestro número y todas sus cosas y formas, qué formularios que hemos utilizado en los foros se exportan por aquí. Las imágenes que hemos utilizado en la estructura de carpetas. Todas las imágenes están aquí y los JavaScripts están aquí. Y fuera, podemos ver este index.html. Esta es la página principal, esta es la principal página desencadenante de aterrizaje. Y entonces veremos todas estas otras páginas también están ahí. Ahora vamos a nuestro servidor y vamos a importar todo esto a la vez. Sólo estoy sacando esta ventana de la pantalla. Y vamos. Vámonos, vamos a nuestra área de hospedaje y nos desplazaremos hacia abajo. Y hay dos opciones como en los archivos. Uno es File Manager Beta y uno es File Manager. Entonces esta no es la versión Beta, tal vez una. Estás viendo que tal vez haya Beta no está ahí hoy en día en el nivel de producción. Por lo que haré clic en este gestor de archivos Beta y se abrirá una ventana más por aquí. Y esta es la carpeta principal que es HTML de subrayado público. cuales sean los archivos que tengamos, Seancuales sean los archivos que tengamos,vamos a subir esos archivos dentro de esta carpeta solamente. Voy a hacer doble clic en esta carpeta. Y luego por defecto, cuando lo estás haciendo por primera vez, tenemos esta carpeta PHP de puntos predeterminada. Esto es lo que, esto es lo que elegimos C aquí que es página predeterminada o predeterminada que ves como punto predeterminado PHP que funcionan. De acuerdo, Entonces lo que vamos a hacer, sólo vamos a hacer click en Subir por aquí. Voy a hacer clic en carpeta. Una vez que haga clic en carpeta, veré que esta carpeta está ahí, eso es un resultado tecnológico exportar uno y voy a volver un paso atrás y seleccionaré esta carpeta, carpeta entera y haga clic en Subir. No solo hago clic en Subir aquí también. Por lo que esa carpeta ahora está cargada. Sea lo que sea que haya dentro de esta carpeta, tengo que moverlo todo y dejarlo caer dentro de esta carpeta HTML de subrayado público. Por lo que vamos a hacer doble clic en él. Se seleccionará todo por Control a. y sólo voy a hacer clic en Mover aquí, este botón mover archivo está ahí, mover archivo. Hay dos puntos. También obtendrás estos dos puntos. Sólo voy a hacer doble clic en estos dos puntos y moverme. Eso es todo nuestros archivos están completamente fuera de, fuera de esa carpeta de exportación ahora y no necesitamos esta, así que vamos a eliminar este año vamos ahora nuestro sitio web está alojado y si vienes aquí y simplemente refrescar esto, ahí vamos, nuestra página web está alojada. Ahora. Cualquiera viene a esta URL en particular que es el sitio de puntos actual global. Este sitio web estará ahí. Este este dominio es por tan solo un año. Este dominio vencerá el 19 de abril de 2023. Si estás viendo este video después de eso, tal vez no tengas acceso a este sitio web porque he tomado este dominio solo por un año. Así es como funciona. Entonces tenemos esta no asegurada, tenemos que arreglar eso también, pero vamos a arreglar esto. No asegurado, asegurado en los videos posteriores. En este video chicos, hemos visto cómo exportar y cómo alojar nuestro sitio web en un servidor real. Y eso resolvió chicos, eso es todo por este video y eso es todo por esta sección. Hemos alojado exitosamente nuestro sitio web en el servidor real. De esta manera se puede alojar n número de sitios web comprando un dominante. Y si quieres cambiarlo todo, así que lo que puedes hacer es simplemente seleccionar todo, eliminar, y volver a subir todos los archivos de nuevo. Así es como vamos a alojar nuestro sitio web y lo hemos hecho. Entonces eso es todo por esta sección. Y nos vemos en la siguiente sección, chicos. También estoy muy emocionado y contento de que con éxito hayamos alojado nuestro primer sitio web en el servidor real. Chicos, eso es todo por este video y nos vemos en la siguiente sección. 68. Introducción a Zoho Email: Bienvenidos de vuelta chicos. En esta nueva sección donde vamos a ver sobre XO ¿quién envía un correo electrónico? Xo que email es un proveedor profesional de servicios de correo electrónico que no sólo brinda servicio de e-mails, sino que aparte de eso, hay tantos otros productos y servicios que es Xu que ofrece, acabamos de ver muy rápidamente lo que todos los servicios x2 ofrece como en finanzas. Ofrece como libros o libros CRM Zoho donde podemos mantener todas las pistas contables y X2 personas para RRHH, negocios, correos electrónicos como machos, luego sistema de gestión de proyectos para proyectos. Entonces asistente reunión CLI IQ está dentro del sistema de charla de organización. Esto es como de nuevo, es gratis, luego CRM, luego finanzas, luego ver, se puede ver como ventas y mercadotecnia y luego servicio que correos electrónicos. Y tienen como los derechos. Hoja de trabajo es como la diapositiva de Excel es como un PowerPoint entonces Docs es como Dr. CLA, voz de IQ. Ver todas las características, todos los servicios que hay en esta plataforma en particular. Pocos de ellos son libres y pocos de ellos se les paga. No ver. Significa como pocos de ellos son libres. Y mucho como todo se paga. Pero en eso también encontrarás aquí y hay algunos servicios gratuitos, oferta gratuita para un determinado número de usuarios. Solo por ejemplo, estas facturas son completamente gratuitas. Y si vamos con emails como hasta cinco usuarios, es completamente gratuito. Ahora, veremos cómo vamos a apuntar nuestro nombre de dominio al correo electrónico xo email. Por qué queremos usar el correo electrónico. Tenemos hospedando tu e-mail si estás tomando si has tomado tu dominio de GoDaddy, también tenemos correos electrónicos de GoDaddy. Entonces la razón detrás de eso es que personalmente uso Zu quien envió por correo electrónico por un tiempo más largo ahora, pero antes de eso estaba usando GoDaddy y hosting o correo electrónico. El principal problema por aquí es GoDaddy y hospedar a ella y a todos los demás proveedores de servicios, como todos los demás proveedores de servicios, proporcionan panel de correo electrónico, pero no tienen un móvil aplicación. Y ahí está el almacenamiento y todo lo que las cosas están incluidas en los servidores, en el host, cosas que hemos tomado en x2. Lo que pasa aquí es que es la forma profesional de enviar correos. Es tan bueno como muy profesionalmente, correo electrónico muy bien construido, sistema de correo electrónico. Y también obtendrás la aplicación Android e iOS, la aplicación Windows, y todas las demás cosas están ahí, el soporte web está ahí. Y se puede ver la interfaz de este Zu particular que, que por correo. Donde puedes ver que principalmente es su calendario es que puedes hacer tus reservas sobre eso, los recordatorios de reservas, entonces tienes notas más de un año. Entonces también puedes tener una opción de tarea luego contactos y marcadores y todas las cosas, lo que necesites, facilidad disponible en el correo electrónico del zoológico. Entonces si ves en la sección de precios, por lo que levantamientos, sí, definitivamente hay levantamientos están ahí. Pero si tu organización no es tan grande y hasta cinco usuarios si quieres usar, entonces tenemos un plan para siempre gratis. Utilice hasta cinco usuarios, cinco GB por usuario, 25 MB de límite de adjuntos. Y dice Webex y acceso móvil y todas las demás cosas como Pero lo tienes, pero deberías tener tu correo electrónico de dominio alojado para un solo dominio. Lo haremos en esta área en particular. Tenemos nuestro nombre de dominio con nosotros que es sitio de puntos actual global con este nombre de dominio, vamos a hacer eso. Vámonos a dominar. Y vamos a hacer clic en este dominio. Sí, esperaremos aquí y procederemos con nuestro correo electrónico del zoológico y comenzaremos a crear nuestra cuenta en correo electrónico zoológico en fin corto así que h2 y después comenzaremos a proceder con los correos electrónicos de Zoe aportación y que veremos en nuestro próximo video. 69. Agregar registros de correo electrónico en DNS: De acuerdo, entonces vamos a empezar a configurar nuestro CSA que envió un correo electrónico con nuestro dominio. Por lo que sólo voy a hacer click en Probar ahora, año vamos, tenemos esto. Nosotros, estoy conectado con mi cuenta de Yahoo, por lo que habrá algún proceso de verificación también, creo que no, la verificación ya está hecha. También necesitarás hacer el proceso de verificación si es necesario o de lo contrario vendrás a esta página en particular. Entonces sólo voy a hacer clic en abdomen. Y este es nuestro dominio a lo largo del año, por lo que solo copiará este dominio. Y pegaré el año de dominio. Y ahí vamos. Y esta organización, como proporcionar el nombre de su organización. Así que simplemente escribiré como corriente global, tal vez el nombre de su organización y luego la industria. Simplemente lo pondré como educación. La educación será buena. Sólo voy a hacer click en Agregar. Entonces enhorabuena tu esto, este dominio agregó con éxito luego proceder a la verificación de dominio. Ahora esto es importante y ten mucho cuidado al hacer esto. Lo primero que tenemos que hacer es verificar el dominio. Verificando el dominio, tenemos tres pasos diferentes. Se recomienda primero uno, es decir agregar registro TXT en el DNS. Dns significa Sistema de nombres de dominio o servidor de nombres de dominio. Y luego la segunda opción es agregar un registro CNAME en DNS. Y la cuarta opción es subir archivo HTML en la página web. Entonces comenzaremos con el primero. Por lo general, la verificación de dominio no toma más tiempo. Si el TXT no funciona, entonces iremos con el, ¿qué dices? Éste. Pero lo que voy a hacer como por si acaso se ha verificado, entonces no puedo mostrarte esto. Por lo que sólo voy a hacer clic en este archivo HTML. Y ahora lo que tienes que hacer es este es el archivo HTML, justo si haces click en este Zu que verifica Zoho dot HTML, este archivo se descargará aquí. Lo que tienes que hacer es que vayas a tu servidor, esa carpeta HTML de subrayado público estará ahí, ¿verdad? Entonces te mostraré eso también. Iremos al hospedaje ahí. El hospedaje. Vamos a ir a nuestro dominio, que es este un año en este gestor de archivos. Sí, dentro de esta carpeta HTML de subrayado público, lo que tienes que hacer es ver, este es el enlace donde irá para verificar que este es el sitio actual del punto global, actual global DOT lateral slash, entonces es como Zoho. Verificar. Tienes que crear una carpeta con el nombre de Zoho verificar cómo exactamente vamos a hacer ese año por de Zoho verificar cómo si acaso bueno y estás verificando nuestro dominio por archivo HTML, basta con hacer click en una carpeta nueva por aquí. Y lo nombraremos como Zoho. Zoho verifica. Y vamos a crear esta carpeta. Ahora estamos dentro de esta carpeta de verificación Zoho y del archivo que hemos descargado. Acabo de abrir ese año que vamos. Simplemente arrastraré y soltaré este archivo por aquí. Y solo por alguna razón se renombró, tengo que simplemente renombrarlo como verificarlo para x2 dot HTML y simplemente lo cambiará el nombre. Si abre este archivo, verá algún número está ahí. Y de esa manera se puede verificar el dominio. Y si sólo hace clic en este enlace más de un año ahora tomará, se mostrará este número solamente. Una vez hecho esto, entonces puedes hacer click en Verificar archivo HTML y tu dominio se verificará. Y te mostraré una cosa más, cómo exactamente vamos a hacer con la verificación de dominio TXT. Para eso, cerraremos éste y llegaremos a lo de nuestro dominio. Y aquí es donde nos encontramos como servidor de nombres DNS. Cada nombre de dominio tiene un conjunto diferente de instrucciones. Por lo que hay que encontrar que donde vas a cambiar el sistema DNS. Y acabaremos de dar click sobre este DNS. Vas a volver a este Zoho. Y ahora lo que hay que hacer es primero ver que este es un registro TXT y este es el valor en diferentes dominios servicio que lo han nombrado de manera diferente, valor 0.2 o año de destino. Lo que tenemos que hacer es este es nuestro registro DNS gestionado. Y lo primero que tenemos que hacer tu ys, tenemos que ir al registro TXT antes de eso tenemos que ver lo que en realidad el verificar. Simplemente escribiré verificaré por aquí. No hay nada ahí. Ok. Sólo voy a hacer click en este botón Copiar por aquí. Sólo voy a hacer clic en el botón Copiar. Y el nombre estará al ritmo sólo el valor del texto será aquel que acabamos de copiar. Y lo pegaré aquí. Y TTL será el mismo. Y sólo voy a hacer click en Agregar registro. Una vez que haga clic en Agregar registro, volveré y simplemente haga clic en Verificar registro TXT. Ahí se puede ver que el registro TXT se ha verificado con éxito. De acuerdo, entonces así es como vamos a hacer eso. Y antes de avanzar, volveremos año atrás. Buscaré por MX año. Puedes escribir MX y puedes buscar MX año. Encontrarás mx dos dot hosting o dot in y mx1 dot hosting o punteado. Tenemos que eliminar ambos. Eliminaré éste, amex y eliminaré este MX segundo. Y entonces puedo teclear DKIM y tenemos que ver si hay descomposición MS ahí, que sea. Y luego SPF tengo que escribir este es el registro SPF para hospedarla que tengo que eliminar. Registro SPF que he borrado. Ok. Entonces MX un registro SPF tenemos que eliminar y ahora vamos a venir aquí este e-mail. Ahora se está pidiendo dirección de correo electrónico, que será el admin uno, el control de nivel admin. Puedes poner tu nombre o puedes poner el admin también son tuyos. Acabo de poner mi nombre actual en el sitio de puntos actual global y solo hará clic en Crear. Esta dirección de correo electrónico actuará como una dirección de correo electrónico de nivel admin donde puedo crear usuarios y puedo cambiar la contraseña para ellos o puedo eliminar todas las cosas del usuario. Se puede ver este ícono con el nivel super admin es que están mostrando hace una semana. Sí. Último inicio de sesión con esta dirección de correo electrónico que es actual contigüidad actual yahoo.com. Lo hice hace una semana, así que me está mostrando hace una semana. Entonces proceda a la configuración de grupos y no hay nada de configuración de grupos, por lo que vamos a proceder a la asignación DNS ahora. Ahora esto es como el debiera estar ahí o de lo contrario tu email no estará, no se activará al Zoho One, tres pasos están ahí, uno es MX que SPF y DKIM MX y SPF, que era el viejo uno. Hemos eliminado que ahora tenemos que sumar la nueva. Entonces volviendo a nuestros registros DNS, vendré a este registro DNS administrado y buscará registro MX, que es el segundo. Volveré año a la tasa seguirá siendo igual y copiaré este MX dot x2 dot in. Y pegaré esto en la sección del servidor de correo, y solo haremos clic en Agregar grabado. Se ha agregado el primer registro MX. misma manera voy a hacer esto por éste, pero la prioridad cambiará de diez a 20. Por lo que ahora tardaré un año más y solo lo pegaré aquí y la prioridad será 20. Simplemente haga clic en Agregar registro. Y se ha agregado el segundo registro de sumar MX. Ahora el tercero que es MX, tres puntos, Zoho dot in y la prioridad es 50. Volveremos aquí. El domicilio permanecerá igual, oh lo siento. Mx primero, después sumar, la tasa seguirá siendo igual y vamos a pegar esto y la prioridad será 50. Y haré click en Agregar registro. Este registro se ha agregado con éxito. Entonces tenemos que ir con SPF, que de nuevo es un registro TXT al ritmo y ver el valor SPF. Simplemente haremos click en Ver valor SPF. Y está mostrando que se ha formado múltiples registros SPF. Entonces lo es, éste es el hospedaje uno. Y no queremos eso, por lo que sólo vamos a hacer click en éste que SPF incluya éste, el primero, voy a copiar esto. Y antes de añadir este registro, volveré a buscar cualquier registro SPF. ¿ Hay por casualidad nodo no hay registro SPF ahí? En el registro de texto voy a nombrar, el nombre estará al ritmo y se pondrá este valor que copiamos y haré click en Agregar registro. Bien, bastante justo. Sólo voy a hacer click en Okay. Y el último es récord DKIM. Nuevamente es un registro TXT. Y ahora el valor host, en lugar de agregar el ID, tenemos un valor específico que tenemos que poner ahí. Entonces vamos a copiar éste. Volveré aquí y seleccionaremos el registro de texto. El nombre ahora será éste, Zed mail dot subvendido clave de dominio y algo así. Y el valor será éste. Se va a copiar este. Ven aquí y pega este valor por aquí y haz clic en Agregar registro. Ahora hemos sumado todos los registros. Y una vez que hacemos click en Verificar todos los registros lentamente y poco a poco se iniciará donde encuentres el registro. El tiempo habitual es de 30 minutos para verificar el registro. O tal vez puede tardar un día uno completo que sea 24 horas de acuerdo a las condiciones. Por lo que haremos click en Todos verificamos todos los registros. Veamos cuáles son verificados todos los registros. Y podemos ver que hay un mensaje por aquí que dice TTL. Dependiendo del TTL, puede llevar algún tiempo. Y podemos ver que el registro DKIM se verifica con éxito y el registro MX y SPF sigue pendiente. Se puede ver que todavía está mostrando este hosting o apuntando está ahí. Revisaremos una vez más después de 30 minutos, y luego veremos si está o no mapeado o no. Una vez hecho esto, y luego podemos seguir adelante mientras la migración de correo electrónico, pero no tenemos nada para Migrate. Por lo que procederemos a ir al móvil. Y me está pidiendo que descargue los e-mails y todo y luego cruzarlo la finalización. Ahora hay dos opciones. Uno es revisar tu bandeja de entrada y acudir a admin. Por lo que sólo voy a hacer clic en esto, ir a admin. Ahora, se puede ver así es como se ve el admin en Zoho CRM, Zoho masculino. Esta corriente global está ahí y el nombre del sitio está ahí. Ahí está la dirección de correo electrónico de nivel admin. Y entonces tenemos el plan como plan libre, hay para siempre? Plan gratuito. Cuántas licencia tenemos, es decir cinco licencia que tenemos y tenemos un dominio frecuencia o cuántos usuarios tenemos en nuestro sistema es uno solo. Lo siento, sólo voy a hacer clic en la espalda. Haremos clic en Dashboard y número de grupos creados, que es 0, luego el tráfico por correo electrónico y todas las cosas que se pueden ver año. Entonces puedes cambiar tus logotipos y todo. Haga clic en editar aquí. Entonces desde aquí puedes cambiar el logo de tu empresa. Y veamos, si voy a navegar. Y E, ¿hay algún logotipo o algo así? Digamos por ejemplo, si tomo éste como logo, subiré esto. Solo estoy usando cualquier logotipo aleatorio. A lo mejor este es un logotipo de alguna empresa también. No estoy seguro de eso. Una vez subido eso, entonces podemos ver ahora solo recuerda este logo que hemos usado por aquí. El logo se ha actualizado con éxito y por si acaso esta imagen de carga sigue pasando, pasando, pasando. Entonces lo que puedes hacer es simplemente refrescar la página. En ocasiones hay algunos temas. Y luego tenemos un dominio que dice como el registro MX aún no está apuntado, entonces está bien. Podemos hacerlo más tarde también. Los usuarios es que se pueden añadir los usuarios. Digamos que si hago click en Agregar usuario, puedes poner el FirstName, LastName, luego Nombre de Usuario. usuario será automáticamente solo tienes que poner el nombre de usuario. Digamos por ejemplo, si pongo nuevo gnarly ahí, se puede ver monarquía en el sitio de puntos actual global y luego pasar lo que se puede poner la contraseña. Y luego hay que depender de ti, como forzar usuario a cambiar contraseña en primer login si quieres que el usuario de esta dirección de correo electrónico rodilla deba cambiar la contraseña. Y luego puedes seguir chequeando esta opción y solo puedes desmarcar esa opción. De esta manera. Puedes sumar hasta cinco usuarios. Ahora puedes sumar hasta cuatro años porque ya se toma un usuario. Entonces la migración de datos del grupo, configuración de correo electrónico y todas esas cosas. Ahora también puedes acceder a este e-mail a partir de ahora puedes ver lo que dices? El logo está ahí. Y puedes acceder a este e-mail desde x2 e-mail aplicación móvil tanto en iOS como en Android están disponibles. Ahora vamos a nuestra Bandeja de entrada. Yo solo vendré tú, abriré una nueva pestaña y solo escribiré z2 macho. Voy a hacer clic aquí. Estar ahí por un segundo, y aquí está ahí el exceso de Zu que envía un correo electrónico. Y sólo voy a hacer click en el correo de Access x2. Ahora se puede ver actual en el sitio de puntos Bluebell está ahí. Aquí. Se puede ver tenemos nuestro logo por aquí. Tiene algunas instrucciones que tengo que simplemente saltaré esto por ahora. Tenemos nuestro logo, el logo de la empresa más fácil que el masculino. Entonces puedes ir con el calendario, luego tarea. Puedes tener el tasky ahí. Todo está ahí, como completamente profesionalmente, puedes ver algunas tareas demo están ahí. Y sólo voy a hacer clic en el correo electrónico por aquí. Y una vez que haga clic en este correo electrónico, este e-mail se abre así completamente fresco, agudo y hermoso interfaz de usuario y experiencia de usuario. Entonces sí, así es como eres la notificación está ahí entonces puedes ver como Xu e-mail y ESP EFN MX registros aún no están señalados que vamos a revisar después de 30 minutos. Entonces hay unas cuantas integraciones que están ahí a lo largo del año. Simplemente puedes encender el modo oscuro y el modo de luz también. Envía los comentarios. Y aquí puedes tener comunicación inter, interna con tus compañeros y como en tu organización. Así es como vas a integrar a Zu quien envía un correo electrónico a tu nombre de dominio. Pasados 30 minutos, revisaremos esa verificación para el registro MX y el registro SPF y luego todo configurado. Estoy bien para ir. Así es como vamos a hacer esto zu Emails. Y eso es todo por este video. Siguiente video, te mostraré después de señalar este correo electrónico, qué exactamente cómo se ve nada más. Sí. Nos vemos en el siguiente video. Y si quieres ver el siguiente video, entonces puedes ver o bien verte en la siguiente sección. Gracias, chicos. Muchas gracias. 70. Nota: Hola chicos. En este video, te voy a dar una información de que cuando estés descargando mis archivos de proyecto. Ok. Y cuando estás abriendo esos archivos en Bootstrap studio, hay formularios donde en el entrenamiento, lo que he hecho es el entrenamiento. He agregado mi dirección de correo electrónico por aquí que está vigente realizada en yahoo.com. ¿ Qué está pasando aquí? Cuando estás probando ese archivo mientras subes en algún lugar, los correos electrónicos vienen a mí. Se puede ver como smartphones, correos electrónicos esto como correos electrónicos de smartphone, ¿hay correos de formularios inteligentes están ahí los cuales vienen a mí donde está mostrando todos los e-mails de prueba. Se puede ver pruebas, pruebas, pruebas. Lo que tienes que hacer aquí es, en lugar de guardar mi dirección de correo electrónico, tienes que hacer click en Gestionar aquí. Y como te dije en los videos también, tienes que dar click en Administrar y luego hacer click en Agregar destinatario y poner tu dirección de correo electrónico donde quieras traer tus emails, como donde quieras tomar la forma enviar correo electrónico, poner su correo electrónico aquí, haga clic en Crear, luego obtendrá una OTP en ese correo electrónico, poner ese OTB, y luego podrá conectar su año de correo electrónico. En lugar de usar mi correo electrónico. Tienes que usar tu email para que venga en tu email y obtendrás dos Nokias. El formulario está funcionando correctamente. Bien chicos, eso es todo por este video. Eso es lo que quiero decirte. No uses éste porque esos correos están llegando a mí y vas a pensar así, no está funcionando. Pero sí, está funcionando, pero está llegando al correo electrónico equivocado. Muchas gracias. 71. Altly.in ahora es Lynko.in: Hola a todos. Este video es para informarte que ltle.in ahora está lincodt Todo sigue igual aparte de los planes de precios. Entonces hay un cambio enorme en el plan de precios. Ahora, no tenemos un traal vergin por aquí. Y en el plan gratuito, solo puedes crear un enlace corto, y solo habrá un clic en ese enlace corto por mes. Entonces esto no sirve para nada, pero tienes un acceso completo para Bepage En definitiva, en plan gratuito, puedes crear uno Bepage Y en el versin pagado desde el núcleo en adelante, tienes la mayoría de las funciones disponibles para ti Entonces en este plan básico, puedes ver que tienes 150 enlaces que puedes crear por mes, y no hay límite en el clic, y los datos permanecen en la base de datos por 30 días. Y Bepage vuelve a ser uno. Pero una ligera captura por aquí en el plan de crecimiento si ves, han mencionado gratis a pedido para el usuario dentro de 1,000 más seguidores de la historia de IG. Entonces, si tu cuenta de Instagram tiene más de 1,000 seguidores, puedes solicitarlos para obtener este plan de crecimiento de forma gratuita. Puede hacer clic en la solución y puede hacer clic en el LincoelitPass Puedes leer la información aquí. Puedes solicitarlos, y puedes obtener el plan Linkogrowth completamente gratis Entonces sí, esto es específicamente para hacerte saber que Atledt en ahora es lincodtn. Gracias.