Crea sitios web modernos en Editor X

1. Tráiler/avance de la clase: [ MÚSICA] Hola, mi nombre es Jeremy, diseñador de marca de Sydney, Australia. En la clase de hoy te voy a mostrar cómo crear sitios web en Editor X. Te voy a mostrar los conceptos básicos de la plataforma sobre cómo crear sitios web realmente geniales si eres propietario de una agencia, un freelancer, o alguien que quiera cambiar al diseño web. Editor X es una gran herramienta de creación web que te permite crear sitios web a la forma que quieras, personalizarlos de la manera que quieras sin siquiera saber código. Es una herramienta sin código, y es una herramienta realmente genial para crear experiencias increíbles en la web. Hablaremos un poco sobre cuadrículas y flexbox en el diseño de herramientas en el Editor X, y vamos a tener una explosión creando sitios web geniales. [ RUIDO] Ahora para el proyecto de clase, todo lo que tienes que hacer es crear un sitio web basado en un cliente real o un proyecto conceptual. Podría ser para una empresa de tecnología, podría ser para la cafetería local, sea lo que sea. Simplemente crea un sitio web simple y pongamos en práctica todos los consejos y trucos y tomemos medidas al respecto. Inscribirse al curso hoy y te veo ahí dentro, y vamos a crear sitios web increíbles juntos [MÚSICA]. 2. Qué es Editor X + características: [ MÚSICA] ¿ Qué es el Editor X y qué características tienen? Editor X es una herramienta de creación web sin código que le permite construir sitios web con solo arrastrar y soltar elementos en una página. Tienes mucha funcionalidad. También puedes personalizar el CSS si así lo deseas. Pero en general, es una herramienta fácil de construir sitios web, y tienen muchas cosas diferentes. Pero algunos de los pros y los contras desde mi punto de vista personal es que los pros son, tienes bonitas plantillas editables. Tienes plantillas y también marcos de cables para construir. Tienen un montón en esta tienda y en realidad puedes usarlos de forma gratuita, y son simplemente súper fáciles de editar, agregar tus logotipos, agregar tus colores, tipografía, todas esas cosas realmente fácilmente. Creo que ese es uno de los pros clave. El segundo es que tienen una academia llena de tutorial, por lo que son fáciles de seguir. Lo descomponen en resumen, tutoriales de 2-5 minutos, y es una bonita academia. Descomponen todas sus herramientas, así que si alguna vez te quedas atascado y necesitas ayuda, entonces en realidad puedes saltar a la academia y aprender algo sobre el proceso de creación de la web. Número tres, como mencioné antes, es arrastrar y soltar, así que solo puedo arrastrar elementos, textos , secciones y diseños y un montón de cosas y composiciones en la página. Realmente fácil y solo puedo dar click y moverlo y me gusta esa flexibilidad con ella. Entonces por último, también tienes el mercado de aplicaciones, que incluye integración, para que puedas integrar diferentes cosas. Puedes instalar una tienda, o si es una determinada forma que necesitas o un procesador de pagos, puedes ponerlo en tu sitio web y todo es parte e integrado de dentro Editor X. Ahora, los pocos contras que pienso es que hay un poco de curva de aprendizaje porque no es como semanas normales. Editor X es diferente, es más para creadores, diseñadores, autónomos y agencias, por lo que hay un poco de curva de aprendizaje para acostumbrarse y construir el sitio web. Esa es una de las contras. Pero entonces el segundo con es que tiene algunas limitaciones. No tiene características locas en cuanto a animaciones locas, puedes hacer animaciones básicas, lo cual es bueno. Pero creo que le faltan algunas otras cosas también. Pero en general tiene las herramientas básicas que necesitas. Pero esos son los pros y los contras. Se puede ver que sólo estoy en un sitio web, si vas a características/diseño, puedes ver aquí tienes lo principal que son los puntos de corte personalizados. Puedes trabajar desde el escritorio directamente hasta el iPad y la vista del teléfono, así que creo que eso es realmente, realmente lindo. También tienes cuadrícula CSS, por lo que puedes crear cuadrículas que se ajusten en función de min-max o el contenido. Entonces si quieres columnas, dos columnas, tres columnas, cuatro filas, sea lo que sea, puedes adaptar eso y será receptivo. También tienes el repetidor, así que si tienes un blog o tienes ciertas piezas de cartera de contenido que necesitan repetir, automáticamente lo hace por ti, y funciona directamente en el CMS. También tienes la herramienta de diseño, por lo que puedes crear diseños flexibles que son básicamente cajas receptivas. Puedes personalizar marcos de cables en blanco y moverlos y cambiará por ti cuando lo escales hacia arriba o hacia abajo. También tienes atracado también. Puedes acoplar imágenes o elementos o iconos o texto, sea lo que sea a los contenedores padre o los diferentes cuadros en los que estás diseñando. También tenemos capas, así que al igual que Photoshop, siempre está limpio tener capas para que puedas gestionar eso. También tienes escala de texto, así que escala de texto, puedes establecer el tamaño mínimo y el tamaño máximo, ya sea que el sitio web lo escale o esté en móvil, se va a escalar a esos tamaños que establezcas. Esas son las principales características. También tienes otros como master, páginas, menús personalizados, stack, todas estas cosas. Puedes comprobarlo tú mismo, pero solo quería mencionar esas características principales. Ahora las otras características principales cuando se trata de interacciones y efectos, por lo que puedes comprobar eso también en el sitio web, es que tienen interacciones de hover. También puedes crear estados estacionarios. Cuando pongas el ratón sobre un elemento, va a hacer algo, lo que sea que lo establezcas para hacer. Creo que eso es realmente clave cuando se trata de diseño web. También tienes movimiento, tienes rotación, y es bastante sencillo, pero sí. Tienes opacidad, para que puedas hacer máscaras. También puedes hacer secuencias de tiempo, por lo que si lo estableces a un determinado objetivo en un determinado punto de activación. También tienes opacidad, cambio de color, y también tienes movimientos para que puedas mover texto. Esas son las principales características de interacción. Tienen posicionamiento pegajoso así como puedes ver, puedes crear estos efectos cool scroll y un montón de otras cosas. Esas son las principales características cuando se trata de Editor X, por lo que puedes ver que es muy, muy busto, es versátil y es genial si eres un diseñador freelance creando sitios web para tus clientes. 3. Uso del tablero: [ MÚSICA] Ahora quiero mostrarte el back-end del Editor X a medida que empieces a iniciar sesión en tu cuenta y lo que puedes hacer. Este es el tablero de tu cuenta para que puedas ver aquí tengo otros sitios web. Ahora lo bueno con esto es que se pueden crear carpetas, para que en la esquina superior derecha se pueda ver puedo crear nueva carpeta. A lo mejor quiero llamarlo Clientes 2022. Puedo crear eso y entonces lo que realmente puedo hacer es arrastrar diferentes sitios en este y tal vez quiero arrastrar este lado entonces puedo hacer clic derecho en la flecha allí y se puede decir Mover a carpeta y puedo hacer clic en eso y hacer clic en mover aquí. Está muy estructurado en términos de eso realmente fácil hacer eso y planificar tu contenido si tienes un montón de clientes diferentes. También tienes la esquina superior derecha, tienes configuración de cuenta, dominio, correo electrónico de tu negocio, vales, suscripciones, métodos de pago, todo eso está en la esquina ahí, eso es realmente fácil de usar. En la parte superior izquierda tienes tu tablero de Partner. Si hace clic en Mi sitio también puede seleccionar sus sitios desde aquí. También tienes los recursos que te llevan a la Academia x, características de diseño de inspiración que te mostré un par antes. Entonces tienes Ayuda, para que puedas hacer clic en Ayuda y te llevará a preguntas frecuentes o temas que estés teniendo. Si quieres editar los detalles y ajustes más finos del sitio web como cambiarle el nombre entonces puedes poner el mouse sobre él y hacer clic en Seleccionar sitio y te llevará a tu otro tablero principal para eso sitio web específico. Puedes ver aquí si necesito conectar mi dominio o comparar planes, puedo hacer todo lo que hay dentro de aquí. Puedo ir al lado derecho y dar click en las acciones del Sitio, puedo hacer clic en Renombrar sitio por lo que si quiero hacer clic en eso cambiarle el nombre, puedo renombrar eso y hacer clic en “Guardar” y se va a actualizar eso realmente simplemente. También puedes obtener comentarios, ver sitio en vivo, transferir el sitio a otra persona si es miembro del equipo o el cliente, puedes invitar a personas si sí tienes colaboradores. También puede mover el duplicado de confianza asignar o crear un nuevo sitio allí. También te da analítica que es realmente genial para que puedas ver informes, por lo que si haces clic en Ver todos los informes, te mostrará eso. Puedo ver cuántos visitantes tengo. También te dan algunas indicaciones para guiarte en la construcción de tu sitio, así que publícalo conectar un dominio, y que te encuentres en Google y te ayudará a conectarte a Google Analytics. También puedes personalizar tu dashboard Si hago clic con el botón izquierdo, puedes ver puedo añadir facturas, puedo añadir campañas de correo electrónico, próximas tareas, etc, para que puedas gestionar todo el proyecto de un sitio web cliente todo dentro de este dashboard. Puedes desplazarte hacia abajo y también obtendrás algunas sugerencias aquí y algunas otras cosas que puedes agregar a la página web. En la esquina superior se puede ver su bandeja de entrada o mensajes y notificaciones y nuevos lanzamientos, por lo que cualquier cosa nueva que el Editor X haya lanzado se puede ver que hay en la parte superior. Entonces a la izquierda tienes todas estas otras opciones como contactos, comunicaciones, automatizaciones, marketing, SEO, informes, finanzas, etc. y puedes gestionar todo desde back end. Si quieres editar el sitio web solo tienes que hacer click en Editar sitio y te llevará al diseñador y al espacio de trabajo. Lo que vamos a hacer es que vamos a crear un nuevo sitio, va a preguntarte qué plataforma quieres hacer clic en Editor X y una vez que eso suceda te preguntará algunas indicaciones sobre qué tipo de sitio web es, es una tienda, un diseño, un evento, etc. Para esto, solo voy a hacer click en Negocios y te va a dar algunas sugerencias sobre algunas plantillas aquí. Para que puedas ver aquí tenemos algunas plantillas. Puedo hacer click abajo por la parte inferior Ver todas las plantillas si quiero y te mostraré algunas de esas para que puedas ver que tienen otras extra aquí. Acabo de desplazarse a través, que no tengas que crear desde cero puedes literalmente simplemente crear usando [RUIDO] eso. También puedes hacer click en Wireframes en la parte superior derecha ves este pequeño botón. Si hago clic en eso sólo me mostrará wireframe así que sin ninguna imagen ni nada. Te muestra los huesos desnudos de la misma y puedes crear en base a eso también. Por lo que queremos hacer, solo voy a hacer click en Lienzo en Blanco porque vamos a construir desde cero. 4. Conceptos básicos de la edición X de la interfaz: [ MÚSICA] Así que ahora estamos en el espacio de trabajo principal del Editor X. Ahora te voy a mostrar lo básico y voy a empezar con ciertas partes de ella, y luego vamos a construir eventualmente el sitio web. Pero primero solo vamos a cubrir algunos de los conceptos básicos. Lo primero que quiero que notes es arriba de la parte superior del medio. Puedes ver que tienes tus puntos de quiebre. También puedo hacer click aquí y puedo ver mis páginas. Puedo hacer clic en Administrar páginas, puedo crear más páginas. Te mostraré cómo hacer eso en un minuto. Pero queremos pagar para usar los puntos de ruptura. Este primer punto de ruptura que se puede ver podemos editar desde 1,000 pixeles en adelante. Se puede ver el ancho de la página web actualmente está en 1,935. El botón central aquí en el punto de ruptura es un punto de ruptura más bajo, y es básicamente para un iPad o una tableta. Si hago clic en la inferior, se puede ver que tiene una vista móvil, y se puede ver eso también. Si hago clic en el escritorio, lo tengo ahí. Puedo hacer clic en los botones y también añadir unos puntos de corte personalizados. Lo que quiero hacer es sumar 1,440, y voy a hacer clic en “Hecho”. Ahora, podemos ver que tenemos un punto de ruptura personalizado que es 1440 en adelante. Podemos hacer clic en eso como se puede ver allí. Podemos traer aquí también. Se va a ajustar a tu punto de ruptura. Ves la zona gris, se ajustará a ese punto de ruptura, que es realmente genial. Lo arrastro hacia fuera. Iremos al siguiente punto de ruptura. Entonces, si me arrastro, iré a ese siguiente punto de ruptura ahí en la línea discontinua gris. Hermosa. Cuando estás diseñando para un tamaño o resolución específicos para tu cliente, va a hacer que sea fácil de diseñar. Para este sitio web, vamos a estar trabajando en 1,440 porque así diseñé el sitio web actual en el que vamos a trabajar. Entonces esto es 1,930 o 20, básicamente si lo redondas. Ahora, en el lado derecho, también tiene al Inspector. Si hago click en este pequeño icono del mezclador aquí, puedes verlo dice, “Inspector”, esto te permitirá diseñar ciertos elementos de la página, por lo que añades en tus colores, por ejemplo, el fondo. Pero quieres que este fondo sea negro por ahora, o lo que sea, verde o rosa, lo que sea , realmente no importa, puedo hacerlo negro por ahora. Pero básicamente te permite personalizar tus elementos. Si hago clic en el encabezado, se puede ver que puedo ajustar el dimensionamiento, puedo ajustar el posicionamiento. Puedo hacer click en este pequeño ícono con un poco de pincel, y puedo añadir el relleno del fondo ahí también. Yo puedo cambiarlo ahí. A lo mejor el encabezado, queremos un verde o queremos un azul, sea lo que sea. Entonces, tenemos una interacción de hover. El balón de forro es una interacción de hover, puedo hacer clic en “Añadir Interacción”, entonces puedo seguir adelante y empezar a jugar con eso. Pero lo haremos un poco más tarde. Ese es el Inspector. También tienes tus comentarios justo al lado de ese ícono. Si tienes un equipo, puedes agregar comentarios aquí, di: “Oye, diseña la página”. Si tienes un equipo, verán ese comentario dondequiera que hayas añadido eso, lo cual es realmente genial. También tenemos notificaciones aquí, así que si consigues visitantes del sitio, etcétera. En la parte superior derecha, tienes tu botón Publicar, tienes Invitaciones. Si quieres invitar a tu equipo a colaborar, entonces puedes hacerlo. Simplemente escribes el correo electrónico y los agregas a eso. Súper fácil de hacer, y genial si estás trabajando en una agencia. También tienes Previous, así que si hago clic en eso, en cualquier momento puedo ver mi sitio web en vivo. Obviamente puedo bajar esto también, y puedo escalarlo una vez más a esos puntos de ruptura, y puedo ver cómo se ve en vivo. Obviamente, no hay contenido ahí en este momento, pero es realmente útil. Entonces, solo tienes que volver atrás y haz clic en “Editar sitio” para volver a eso. Si vas al lado izquierdo, tenemos aquí nuestras barras Menu, y luego tenemos nuestros Add Elements. Voy a hacer clic izquierdo sobre eso. Haga clic en “Elementos”. Aquí es donde podemos sumar nuestro contenido. La carne de la página web. Podemos añadir botones, títulos, párrafos, contenedores, layouter, repetidores, menús, formas, líneas, etcétera. Podemos ahorrar activos también en este espacio. Ya podemos usar composiciones prefabricadas. Literalmente puedo hacer click sobre estos y añadir eso directamente a la página web sin tener que hacer mucho. Si hago clic con el botón izquierdo sobre esto, se puede ver boom, agrega eso así así en nuestra página web. Voy a volver. Tienes herramientas de maquetación. Una vez más, antes, mencioné que tenemos cuadrículas, por lo que puedo añadir una rejilla. Puedo añadir el layouter. Aquí hay secciones prefabricadas. tenemos el repetidor, y también una caja de luz. Eso es genial para una imagen de galería o un pop-up. Tienes botones prehechos a medida. Esto me gusta. No tengo que hacer uno, solo hago clic en eso o arrastrarlo, soltarlo ahí, y puedo seguir adelante y abrir el inspector, y empezar a jugar, y cambiar los colores y sombras, y todas esas cosas geniales. Tenemos Textos, Menú, Búsqueda. Tenemos barras de menú y navbars, un montón de cosas diferentes aquí. Es bueno ir en tu propio tiempo y ver lo que tienes. También tienes formularios de contacto. Entonces, tienes otras cosas como, puedes agregar un blog a tu sitio. Puedes agregar una tienda, puedes agregar una reserva, eventos, membresía, un gestor de contenidos, que es CMS, y un sitio multilingüe también, que está en Beta. Tienes un montón de elementos que usar. La segunda parte es la Capa. Si hago clic en este icono aquí para conseguir nuestra capa, así que sólo tengo una página, que es la Página principal. Se puede ver en verde, este es uno de nuestros componentes, que es básicamente un símbolo reutilizable, y se puede ver que estará en verde. Puedo cambiar la flecha pequeña, y me va a mostrar todos los elementos dentro de esa barra de navegación. Entonces, vas a Secciones. Puedo ver las capas. ir a Sección aquí, etcétera. Bastante sencillo cómo usar capas. Lo siguiente es maestros del sitio. Podemos crear secciones maestras de múltiples páginas. Por ejemplo, el encabezado y un pie de página, esto es un maestro, lo que significa que en cada página se va a tener esa misma cosa. Tendrá el pie de página y el maestro en cada página. Puedes configurarlo como predeterminado. En realidad se puede duplicar, y hacer otra cosa. Si quieres editar algo, editaría el encabezado usando esto porque por eso es verde, y luego lo va a aplicar a cada página. La siguiente parte es Pages. Puedo dejar click en “Añadir Nueva Página”. Puedes ver que es una página dinámica, diseña una vez, genera páginas ilimitadas o es solo una página en blanco estándar, para que puedas elegir lo que quieras. Si acabo de añadir una página, puedo hacer click en eso, y ahora ir a Page, y puedo llamar a este equipo, etcétera. Ahora, tenemos diferentes páginas, puedo hacer click sobre ellas, y se puede ver eso. El uno o el pequeño icono de casa, esa es tu página de inicio. Solo recuerda eso. Si quieres cambiar la configuración, puedes hacer clic en los tres puntos. Tienes Ajustes, SEO. Puedes cambiar el nombre de la capa, puedes duplicarla, y puedes editar la página o agregar un comentario para tu equipo. También tenemos Estilos del Sitio. Quieres hacer click en la A con una gotita pequeña. Tenemos tipografía. En realidad se puede tener el control sobre las fuentes. Tienes H1 a H6 y luego tienes un párrafo 1 al párrafo 3, que puedas personalizar todos esos. Si haces click en él, puedes ver lo que te va a mostrar. Puedes cambiar el tamaño, la audacia, italicizarlo, o añadir un color, lo que quieras hacer, realmente. Si hago clic en “Aplicar” va a aplicar eso. También tienes colores. Voy a hacer clic izquierdo en eso. editar nuestros colores globales aquí, para que nuestra paleta de colores, yo pueda cambiar eso. Además, tienes transiciones de página. Si solo quieres establecer transiciones generales para las páginas cuando cambias de páginas, puedes establecer eso en un out in, lo cual es genial. Aquí está el mercado de aplicaciones. clic en las casillas, mirando por aquí, y yo diría que probablemente no instales demasiadas porque no quieres empañar tu sitio web, pero puedes jugar y mirar lo más popular. Si haces click en “Popular Este Mes”, puedes ver lo que es popular o las Selecciones por Equipos. Puedes ver Selecciones de Equipo aquí. Un montón de plugins que puedes usar para tu sitio web. Entonces por último, tienes aquí el Content Manager a la izquierda, puedes ver. Si tienes un blog o una gran cartera o un gran sitio web de marketing, vas a estar usando eso. Para nuestro diseño de hoy, vamos a estar manteniéndolo simple, por lo que no vamos a necesitar usar el CMS. Entonces por último, tenemos algunas opciones de menú en la parte superior. Tenemos nuestra Diapositiva, así que puedo hacer click en eso. Aquí tienes tus opciones. Puedes invitar, puedes duplicar, transferir sitio, actualizar a una versión de pago. Tienes dashboard, roles y permisos para tu equipo, así que si quieres cambiar eso, y puedes ir y administrar tu sitio aquí también. También puedes hacer clic en “Ver” también. Puede acercar y alejar. Normalmente uso los atajos, que está justo aquí, Control plus y menos. También tienes Herramientas aquí. Si quieres hacer click en el Media Manager, que es otra cosa clave que necesitas. Voy a hacer clic en eso, y aquí es donde podemos subir nuestros activos. Voy a estar subiendo mis imágenes aquí. Si hago clic en “Subir”, subir desde el ordenador o quiero arrastrar algunas cosas, ahora puedo pasar por aquí y empezar a arrastrar mis imágenes, así que voy a arrastrar esto adentro. Voy a hacer click en “Archivos del sitio”. También tienes Unsplash también. Puedes ver que puedes obtener imágenes gratis justo dentro de eso, por lo que está todo integrado. Mis archivos de diapositivas van a aparecer aquí. Voy a arrastrar y soltar algunas de las imágenes ahí que voy a usar. Es súper fácil agregar imágenes. También puedes recortarlas, editarlas, y ajustarlas si es necesario. Si hago click en esto, en realidad puedo hacer click en “Mejorar” si quiero ajustar las cosas, puedo realzar auto. Puedo ajustar el brillo, etcétera. Es como Photoshop. Tienes filtros, puedes cortar cosas, agregar filtros si quieres, es bastante útil. Voy a volver atrás y simplemente haga clic fuera de eso. Entonces, también tienes el modo Dev. Si eres alguien que quiere agregar código personalizado a tu sitio web, tal vez estés trabajando en un sitio web creativo, puedes hacer clic en “Modo Dev” y puedes conectar API, puedes agregar código personalizado CSS, y hacer todas esas cosas. 5. Herramientas flexibles de diseño: [ MÚSICA] Quiero mostrarte las herramientas de maquetación central en el Editor X que creo que son muy útiles y son bastante fáciles de usar. Acabo de conseguir otra página aquí, sólo una página básica. Tengo un par de secciones, como se puede ver aquí. Ahora, voy a ir a mis elementos Plus y quieres bajar a Herramientas de maquetación. Ahora, aquí tienes cinco herramientas. Tienes cajas vacías, que también se conocen como contenedores. Tienes cuadrículas, tienes la herramienta layouter, tienes el repetidor, y también tienes lightboxes. Ahora te voy a mostrar los fundamentos de cómo usar estos. Una caja vacía es solo una caja promedio. Puedes ver que tienes algunas variaciones aquí. Por ejemplo, puedo simplemente arrastrar y soltar esta caja gris dentro de esta sección. Se puede ver aquí, si voy a la esquina superior izquierda, se puede ver que dice contenedor. Si voy a mis capas, también lo llama contenedor. A una caja se le conoce como un contenedor que solo debería llamar a un contenedor en mi opinión, pero por ahora eso es lo que se llama. También puedes estirarlo. Si hago clic en el pequeño ícono en la esquina superior derecha, hará que el contenedor llene todo el tamaño de la sección real aquí, como se puede ver eso. Puedo seguir adelante y cambiar el color de fondo si quiero. Puedo hacer lo que quiera ahí dentro. Dentro de este contenedor, puedo empezar a agregar objetos, imágenes, iconos, sea lo que sea. Por ejemplo, si quiero agregar una forma, puedo dejar caer una forma allí. Si voy a mis capas ahora se puede ver que dentro de este contenedor es una forma básica. Puedo mover esta forma alrededor, puedo escalarla. Puedo cambiar el color de la misma. Básicamente puedo hacer lo que quiera con él como se puede ver allí. Ahora puedo seguir adelante y eliminar la forma. Puedo borrar el contenedor también. Ahora siempre es bueno construir contenedores porque no quieres rellenar ningún diseño. Si estás diseñando o cambiando algo en segundo plano, puedes cambiar el contenedor en lugar de cambiar las casillas individuales del objeto. Así es como se utiliza el contenedor básico. Ahora la otra es cuadrículas. cuadrículas son realmente útiles si quieres tener una sección que esté cortada en diferentes cajas o columnas o filas, depende de ti. Por ejemplo, puedo usar esta cuadrícula de dos por dos. Yo lo puedo estirar, puedo hacerlo más grande como se puede ver allí. solo usar mi mouse, puedo usar las herramientas de alineación para alinearlo en el centro directo de esa sección. En realidad puedo cambiar el diseño de la cuadrícula. Si hago clic con el botón izquierdo en la parte superior, dice cambiar cuadrícula. Puedo hacer uno por cuatro. Puedo hacer un cuatro por uno. En realidad puedo ir al modo avanzado y en realidad empezar a personalizar el dimensionamiento. Si tienes estas dos lineas, puedo arrastrarla y puedo tener diferentes tamaños, como puedes ver ahí. También puedo aumentar el tamaño, la altura. Puedo hacer clic en el pequeño botón Plus, va a agregar una columna. Tienes tanto control sobre lo que puedes hacer. También puedo agregar huecos, tal vez quiero 20 pixel gap. Se puede ver que agregará un pequeño hueco agradable ahí. Te dará algunos lineamientos. Puedo hacer click en “Hecho”, y luego tenemos esta cuadrícula. Siempre puedo volver atrás y cambiar el modo avanzado y eliminar partes. Haga clic en el texto y haga clic en “Eliminar columna”. A lo mejor sólo quiero una rejilla de dos como esa, eso está bien. También puedo eliminar el fondo de la cuadrícula en la parte inferior y hacer clic en “Eliminar cuadrícula”. Voy a eliminar ese contenedor de antes. Es bastante fácil de usar las rejillas. Es genial si tienes piezas de cartera. Ahora, la siguiente herramienta se llama la herramienta layouter. Se puede ver aquí estoy en la sección y tiene secciones prefabricadas aquí. En layouter, puedes crear más de una sección receptiva. Voy a escalar esto. Voy a hacer click en el “Layouter” aquí, hacerlo un poco más ancho y un poco más largo. Si hago click en las “Opciones”, se puede ver que tengo mosaico. Puedo hacer ladrillos, puedo hacer filas, y también puedo hacer columnas y un slider. Ahora lo bueno con esto es que hace que todo responda y se puede personalizar todo. Puedo seleccionar esto y puedo más o menos. Si quiero ocupar más de un espacio, puedo cambiar eso. Se puede ver si quería hacer múltiples, tal vez quiero hacer esto un poco más largo, se puede hacer eso. Entonces lo que realmente puedo hacer es simplemente arrastrar y soltar imágenes aquí, arrastrarlas, y luego voy a estirarla. Entonces puedo cambiar la imagen. A lo mejor tenemos un miembro del equipo, puedo hacer doble clic para reajustar si lo necesito, y puedo dejar de las imágenes aquí también. Puedo soltar el texto si quiero. Se puede ver si me pongo a la vista móvil, lo hace receptivo. Eso es lo genial del layouter. Hace que sea receptivo y obtienes más de un look y sensación personalizados con estas rejillas que tienes. Puedo añadir imágenes. A lo mejor quieras agregar un poco de texto aquí o algo así, y cambiar el fondo a negro. Ahí vas. Se puede ver que esta es la herramienta layouter, y una vez más se puede ver que la hace sensible. Obviamente, los textos tendrían que ir más pequeños, pero esa es la herramienta layouter. Ahora, sólo voy a ir a esta otra sección aquí. Te voy a mostrar el repetidor. Ahora repetidor es realmente genial si tienes objetos repetidos del mismo tipo, para un post de blog o una cartera, etcétera Puedes ver que tienes todas estas herramientas realmente bonitas. Quiero arrastrar y soltar éste en él y dice reemplazar sección, por lo que va a reemplazar esa sección. Hermosa. Sólo voy a asegurarme de que esté escalado. Voy a hacer click en él. Voy a cambiar el color de fondo. Podemos hacerlo verde si quieres. No quieres conseguir el color gris. Puedo cambiar la imagen. Si hago doble clic ahí, puedo seleccionar, por ejemplo, seleccionemos aquí nuestro equipo. Se puede ver que cada muchacho es igual. Sólo voy a asegurarme de que se quede así. Genial. Ahora puedes ver aquí el texto, puedo entrar aquí y recordarlo. Se puede ver, para personalizar toma elementos completos que ya existen, haga clic en “Editar texto”. Si lo personalizo, se puede ver que va a cambiar el efecto para todos los textos porque básicamente está repitiendo el mismo estilo y diseño a través de cada elemento. Si lo agregamos o menos un elemento o un miembro del equipo, se va a hacer esos cambios. Por ejemplo, puedo obtener el párrafo 3 y hacerlo verde así. Se puede ver cómo está en una pila para que esté agrupada. Puedo hacer doble clic y editar el título. Encabezando tal vez quiero hacer como un rumbo 3, eso va a cambiar eso. A lo mejor quiero cambiar el texto por un guión. Se puede ver que va a cambiar todos los demás títulos ahí. Solo tenlo en cuenta. Un repetidor es realmente genial cuando lo usas correctamente. También puedes cambiar el contenedor. Quiero hacer eso verde. El texto aquí, también puedo ser capaz de editar un texto. Ese va a ir de párrafo, ahí vamos. Es súper fácil, repetidor es genial. Asegúrate de usarlo. Ahora también puedo hacer clic en “Administrar artículo”. Se puede ver que puedo duplicar un artículo. Si hago clic en “Duplicar”, se va a duplicar y empezar a agregar más miembros del equipo. A lo mejor tenemos un equipo de seis, se puede ver que solo lo está repitiendo. Hace que sea súper fácil agregar eso. Puedo hacer clic en “Cambiar diseño de cuadrícula”, y se puede ver que también puedo cambiar eso. Como de costumbre, también si quieres agregar una rejilla individual ahí entonces puedo. Use repetidor, es realmente útil. Ahora el último se llama caja de luz. Ahora, estos son básicamente pop-ups. A lo mejor quieras tener un pop-up galletas o tienes como una promoción o lo que sea, entonces podemos tener eso totalmente. Voy a hacer click en esto, y eso va a añadir esta caja de luz de galletas. Voy a hacer click en eso y en realidad puedo cambiar el color. Vamos con negro. Se puede decir que estos son el párrafo de política de cookies , eso es realmente genial. Puedo hacer click en “Configurar superposición”. Se puede ver clicar cierra lightbox, por lo que puedo apagar y encender eso. Voy a cerrar eso por ahora. Puedo establecer un punto de gatillo también. Puedes ver su política de cookies, mostrar automáticamente lightbox en las páginas. Puedo decir “Sí”. mostrar en qué página se va a mostrar en. Se va a hacer el retraso y se puede ver que está en el botón X en lugar del botón Cerrar. Tienes algunas opciones, puedes personalizar en eso. Ese es nuestro pop-up ahí. Solo tienes algunas opciones de estilo, así que solo rellena el color por ahora. Voy a hacer clic en “Vista previa” y veremos qué pasa. Genial. Una vez que esté contento con la caja de luz, voy a hacer click en “Vista previa”. Vamos a escalar la diapositiva hacia abajo al tamaño correcto y vamos a la página del Equipo y ahí la tenemos. Tenemos las galletas pop-up, los dos segundos de luz en la parte inferior ahí y puedo hacer click en la pequeña “X” Básicamente, eso es lo que hacemos. Lo hemos fijado en la página del Equipo. Puedes personalizarlo y configurarlo cualquier página que realmente quieras. Eso es super cool para ser útil. Básicamente, esas son las cinco herramientas que puedes usar, las herramientas de maquetación, son realmente útiles, realmente geniales, y usarlas en tus diseños. 6. Biblioteca de marca: construcción de barra de nav: [ MÚSICA] El sitio web que vamos a construir es esta que construí en Adobe XD. Se trata de una billetera criptográfica donde puedes almacenar activos y tokens y NFts dentro de tu billetera. Simplemente rápidamente batiré esta sencilla landing page y luego podrás ver la versión móvil ahí también. Vamos a construir esto, manteniéndolo simple. Podríamos hacer algunas otras páginas, ver cuánto tiempo va adelante la clase, pero esto es lo que vamos a crear y te mostraremos cómo hacer eso. Estamos en Editor X. Ahora, voy a hacer clic izquierdo en mi encabezado. Lo primero que quiero hacer es ir a mi inspeccionar en el lado derecho, click en el pincel y cambiar el fondo. Pero puedes ver aquí, en realidad no tengo mis colores. Puedo añadir color personalizado C, o puedo ir a la parte superior izquierda y hacer click en los colores del sitio de mi marca y voy a cambiar mis colores principales aquí. Para mi trasfondo, voy a ir a XD y se puede ver que sólo puedo copiar los códigos HEX que ya he creado. Se puede ver aquí, haga clic en eso. Pega en mi código HEX. Ahí vamos. Haga clic en “Aplicar” y postúlate y debe cambiar eso ahí mismo. Voy a hacer lo mismo por los grises también. Ahí tenemos nuestros colores para el fondo y el texto y luego nuestros colores de acción, que es básicamente ese llamado a las acciones. Nuestros fondos y esas cosas van a ser la materia verde. Para el texto también, voy a necesitar el verde aquí también. Algunos de los textos en realidad son verdes. Preciosa. Una vez que hayamos hecho eso y luego podemos volver. Voy a hacer click en el encabezado, click en el diseño en el lado derecho. Entonces ya puedes ver en qué colores añadí aquí. Vea nuestros colores temáticos. Puedo seguir adelante y dejar caer esos adentro. En realidad voy a usar el color negro. Voy a hacer lo mismo por el cuerpo también. Lo mismo para el pie de página. Ahí vamos. Ahora voy a ir a mi cabecera y hacer doble clic en la imagen del logo. Voy a hacer clic en “Cambiar arte vectorial”. Voy a hacer clic en los archivos de mi sitio a la izquierda y voy a seleccionar el diseño del logotipo, que he creado. Boom, es muy rápido. Simplemente se carga así. Voy a eliminar ese menú ahí. Voy a ir al botón más. Voy a añadir un menú. Voy a bajar al menú y buscar. Ahora lo que quiero hacer es agregar un menú sencillo y lo vamos a personalizar más adelante. Apenas esta cabecera aquí, básica. Voy a traerlo. Voy a copiar. Asegúrate de hacer clic en el encabezado, luego pegarlo dentro del encabezado usando Control V. Ahora puedes ver que tengo mis páginas aquí. Ahora necesito agregar mi otra página también. Si voy a las páginas, asegúrate de añadir una página. Voy a llamar a este es apoyo, blog de equipo y soporte. Voy a hacer click en el menú y hacer clic en “Administrar menú”. Ahora puedes verlo arriba, cualquiera de ellos está apareciendo, así que necesito agregar las otras páginas. Voy a hacer clic en “Páginas del sitio”. Voy a hacer click en todas las páginas. Comprobamos eso y hacemos clic en “Aplicar”. Entonces deberían estallar aquí. Entonces probablemente voy a hacer clic en “Administrar menú”. Si necesito mover las cosas, puedes arrastrarlas y soltarlas así así realmente fácilmente. Voy a ir al Inspector, bajar al texto y cambiar el color a blanco. Por eso no estaba apareciendo. Podemos ver la página que está seleccionada va a ser este color verde. Probablemente pueda cambiar eso. Si voy a llenar color y el hover, se puede ver que tiene este verde, pero tal vez quiero hacerlo gris o lo que sea, puede cambiar esas cosas. En realidad voy a seguir adelante y cambiar mis fuentes también. Voy a hacer click en los estilos de color del Sitio. Voy a ir a mi tipografía. Ahora, básicamente voy a cambiar. Tengo todos estos estilos de personajes por aquí guardados en nuestra XD. Ahora lo que voy a hacer, la fuente que estoy usando es Space Grotesk. Voy a hacer clic en el pequeño lápiz aquí. Haga clic en la barra Buscar y escriba Space Grotesk. Tienen aquello que es realmente genial. Para éste, debería ser audaz, lo cual es realmente genial. Entonces tenemos nuestros párrafos también. También conseguimos nuestro H2, que es de 42 pixeles para el primer H1, esto va a ser 56. Haré clic en “Aplicar”. Éste es 40. Ahora va a Space Grotesk. Será audaz. Haga clic en “Aplicar”. Ese va a ser el color verde también. H3 es 24, color negrita verde. Esto nos va a ahorrar tanto tiempo después, así que no tengo que hacerlo manualmente. Va a salvar todos nuestros encabezamientos y nuestros párrafos. Tengo párrafos Space Grotesk también, eso va a ser 16. Eso debería ser regular, lo cual es genial. Tenemos el párrafo 2 el cual será un Space Grotesk 16 blanco y aplicar. Tenemos una versión negra y una versión en blanco. Entonces también vamos a tener una versión verde también. Dieciséis años, escribe en Espacio Grotesk, haz clic en “Aplicar”. Ahora tenemos todo nuestro estilo de personaje guardado aquí. Si necesitamos agregar algo manualmente como el texto, por ejemplo, iré al Inspector, hago clic en el diseño, haga clic en el texto. Se puede ver, obviamente, se puede bajar y elegir la fuente desde aquí. Si escribo Space Grotesk, por lo general puedo cambiar ahí. Si hago clic en el tema, va a tener todos nuestros estilos de personaje guardados que acabo de hacer antes en la biblioteca. Ahora puedo seleccionar cualquiera de estos. Si voy rumbo 3 o rumbo 6, sea lo que sea o el párrafo 1, va a cambiarlo por los, los estilos que lo puse como pueden ver. Ahora si quiero cambiar el tamaño, todo lo que voy a hacer es simplemente arrastrar la caja para que pueda hacerla realmente amplia o acercarla más. Voy a bajar a elementos. Vamos a ir a Quick Add. Lo que voy a hacer es añadir mi título. Voy a hacer clic y soltar eso así. Súper fácil. También voy a ir a añadir un párrafo y además añadir un botón también. Lo genial son nuestras guías que puedes ver que me he encendido, así que todo se romperá donde lo configuramos. Realmente genial. Sólo voy a extender esta sección. Voy a colocar otra sección, que sea una en blanco. Lo que puedo hacer es simplemente arrastrar esto hacia abajo para traer la altura. Voy a Shift click y haga click en todos estos. Lo que puedes hacer es seleccionar stack o grupo. Si lo apilas, va a ponerlo dentro básicamente de una pila lo que hace que responda cuando lo ajustes. Como se puede ver ahí, lo cual es realmente genial. Me encanta que la capacidad de respuesta sea realmente genial. Este texto, lo voy a cambiar, este será un H1. Ahí vamos. Cuando haces clic dentro de la pila, solo quieres hacer clic de nuevo en el interior. Se hace clic en los objetos correctos. Trae eso. Hermoso, esto se ve bien. Voy a derribar eso así. Haga doble clic en el texto. Pega eso en justo así. Hagamos doble clic aquí. Se puede ver que tenemos nuestro botón. Voy a diseñar este botón. Voy a cambiar eso. Vamos a ir al Inspector en el lado derecho y también cambiar el color. Los textos en realidad necesitan ser negros. Eso se ve bien. Ahora, botón. En realidad quiero cambiar las esquinas. En el inspector, se quiere ir a la tercera opción, dice esquinas. Puedo redondear todo. En lugar de redondear, voy a ponerlo en cero. Pero si pongo 100 pixeles, se puede ver que lo convierte en una forma redondeada. Voy a poner 0 porque quiero un rectángulo plano ahí. Se puede añadir una sombra que sea genial. Podemos añadir una sombra como esta para el botón. Otra forma en que podemos hacerlo es solo agregar un borde. Sólo voy a añadir una forma básica de rectángulo. Voy a cambiar el color de la misma. Un atajo si quiero llevarlo a la espalda, puedo presionar Control y hacia abajo. Ella es genial. Voy a hacer el borde, el color verde. En el Inspector voy a hacer clic en tablero en la forma. Voy a poner la opacidad del relleno a cero por ciento. Sólo voy a usar mis teclas de flecha aquí. Voy a hacerlo un poco más pequeño. Para conseguir ese efecto como se puede ver cómo tenemos este pequeño contorno. Es básicamente un rectángulo con un borde, como se puede ver allí, que creo que es realmente genial. Solo quiero asegurarme de que presiono Control G, manteniendo pulsada Mayús y seleccionando estos dos, ahora tenemos este botón como grupo. Voy a hacer doble clic en el botón dentro del grupo y hacer clic derecho en el botón. Ahora lo que quieres hacer, queremos convertirlo en un activo. Voy a bajar al fondo, dice Guardar como activo. Voy a hacer clic en eso. Voy a llamarlo botón principal. Entonces podemos agregarlo para decir que es todo. También puedo crear una nueva biblioteca también. Sólo voy a hacer clic en “Agregar”. Ahora, si voy al botón más y hago clic en Activos, debería estar dentro de aquí. Lo que voy a hacer ahora es que voy a añadir una imagen. Voy a arrastrar y soltar una imagen aquí mismo. Voy a hacer clic en “Cambiar imagen”. Va a cargar mi mediateca. Voy a hacer click en mi imagen de héroe aquí y haga clic en “Actualizar”. Preciosa. Ahora solo voy a arrastrar eso para que sea grande y se encaje directamente al final de esta sección ahí. Se puede ver que la escala automáticamente, lo que hace que mi vida sea mucho más fácil. Ahora voy a añadir mi segunda imagen, que va a ir detrás de ella. Un pequeño elemento icono aquí. Voy a presionar Control Down y sacar eso. También puedes hacer clic en estos pequeño botón de estiramiento en la esquina derecha y debe estirarlo hasta el ancho completo de la sección real. Si no quiero eso, solo puedo apagarlo y simplemente escalarlo como quiero. Sólo voy a traerlo atrás aquí. Puedo usar mi Shift y estoy tocando las llaves ahí solo para mantener ese efecto. Preciosa. Creo que eso se ve muy bien. También está empezando a parecerse a nuestro diseño aquí. 7. Construye la página de inicio: Ahora voy a hacer click en “Agregar Elemento”. Voy a dejar caer un título aquí, y también queremos dejar caer el texto de párrafo. Esta sección es simplemente bastante sencilla pero para esta, necesitamos cambiar realmente orientación del texto para centrarla. Voy a hacer clic en “Editar texto” y en otras herramientas de texto que tienes la alineación de párrafo. Puede ajustar el espaciado entre líneas, también el espaciado de caracteres. Puedes hacer puntos y listas numeradas, y también tienes que cambiar la dirección del tipo. También tienes la etiqueta de encabezado, y ahí tienes un montón de opciones. Para éste, éste va a ser un H2. Sólo voy a seguir adelante y empezar a copiar este texto así. Yo sí necesito alinear este texto al centro, así así. Preciosa. Ahora, el texto del párrafo es ir aquí. Ahí vamos. Excelente. Suma dos por alguna razón. Voy a hacer clic en “Editar texto” y asegurarme de que estamos configurados en el blanco. En ocasiones hay que hacer click fuera de él y luego hay que hacer click en el párrafo. Hermoso, así como eso. Voy a hacer clic fuera de él y luego solo escalar así. Preciosa. Ahora quiero agregar un elemento aquí, así que aquí tenemos tres pequeñas secciones. Ahora, lo que puedo hacer por eso, solo puedo traer esta sección así. Voy a añadir otra sección. Preciosa. Ahora para éste, voy a hacer clic en el repetidor y se puede ver que tienen los tres aquí. Voy a hacer clic en eso y podemos ver que tenemos estas tres pequeñas cartas. Voy a arrastrar eso. Puedes ver que les llaman tarjetas puedes hacer una lista, también puedes hacer un slider, puedes hacer una celda de cuadrícula, lo cual es bastante genial. Voy a guardarlo sólo en las cartas. Solo controla Z eso y solo quiero asegurarme de que el diseño esté realmente centrado, hermoso. Ahora para estas tarjetas, solo quiero que el fondo sólo sea nada. Voy a apagar eso. Ahora tengo que sumar nuestro título aquí. Voy a poner el título. Se puede ver como lo estoy adjuntando, lo está repitiendo, lo cual es realmente útil. Voy a arrastrarme aquí y verás la cajita azul dice Adjuntar así. Sólo voy a hacer clic en el “Editar texto” real rápido, párrafo. Preciosa. Ahora vamos a añadir nuestros iconos al Repetidor. Lo que voy a hacer es ir a plus, voy a bajar a dar forma. En lugar de hacer imagen, en realidad vamos a subir un SVG. Voy a hacer click en Forma. Voy a arrastrarme aquí y lo voy a adjuntar, voy a escalarlo un poco. Entonces voy a hacer clic en “Cambiar forma básica”. Voy a ir a los archivos de mi sitio, y se puede ver que tengo las versiones PNG, pero queremos usar las versiones SVG. Voy a hacer doble clic. Entonces solo voy a hacer click y cambiar los otros también. Así como eso. Voy a volver a mi diseño. Solo asegúrate de que todo sea correcto. Creo que esto fue al revés. Voy a seguir adelante y copiar y pegar mi texto desde el diseño. Genial. Ahora eso se ve bien. Si necesitamos extender el repetidor, en realidad podemos hacerlo más amplio y más grande. Como se puede ver, podemos ampliarlo y el texto se va a ajustar. Obviamente, las formas están cambiando en realidad, por lo que probablemente tendremos que escalar eso hacia abajo. Solo ten en cuenta eso si estás jugando con la balanza o con todo. Pasando a la siguiente sección, voy a hacer clic en “Más Añadir nueva sanción”, y esta va a ser una sección en blanco. Ahora para éste, voy a volver a hacer un repetidor. Vamos a ir a Quick Add y voy a hacer click en “Repetidor”. Voy a asegurarme de que esté en el medio cuando añada un título también. Para éste, necesito asegurarme de que esté centrado, el texto, voy a centrar eso y esto debería ser, creo que también un H1. Es un H1 o H2. Entonces vamos a crear esta sección aquí así. Preciosa. Voy a hacer click en el artículo para que puedas ver que tienes los diferentes artículos. Voy a abrir mis capas. Voy a cambiar el nombre de estas secciones para que pueda ir testimonio, características, intro, solo doble clic para editar capas aquí. Sé lo que está pasando. Una vez que tenga mi Repetidor, lo que voy a hacer es ir al Inspector, click en el diseño, llenar el fondo y hacerlo este bonito color gris, gris oscuro que tenemos ahí, y luego solo haga clic fuera de ella. Ahora lo que voy a hacer es conseguir este look que tengo aquí es que necesito tener una imagen, algún texto, y tenemos que poner ese pequeño ícono de garrapata también. Voy a empezar y voy a poner una imagen aquí, arrastrarla y soltarla, y deberíamos ver adjuntar. Ya tenemos eso. Entonces lo que voy a hacer es cambiar la imagen. Voy a seleccionar a la persona allí. Entonces voy a jugar con éste también, cambiar éste. Ahora, ¿y si quisiera redondear esto? Debería poder ir a la imagen en el esperado click en las esquinas y quizá hagamos 20 pixeles, ver qué pasa. Eso es genial. Hagamos 100 pixeles. puede ver ordenarlo un poco redondo pero lo que quiero hacer es que yo quiero traer eso. Se parece más a un círculo. Lo haremos un poco más grande. Creo que vamos a ir 500 pixeles y eso debería redondear por completo eso de los también. Ahora voy a añadir algún texto en. Voy a traer aquí la redacción de texto de párrafo, sólo voy a asegurarme de que se escale correctamente. Ahora voy a seleccionar el párrafo 2 cuando añada un poco más de texto también. Cuadro de texto Litte. Éste, lo voy a poner al párrafo 3. Por fin puse el tamaño de la imagen ahí. El texto está atracado a la derecha. Si ves en el lado derecho el posicionamiento, atraco eso a la parte superior, y luego los márgenes aquí son 120 pixeles. Si necesito ajustar eso, puedo ajustar eso por lo que el espaciado está bien. Entonces conseguí estos comprador verificado, solo necesito conseguir un ícono así que voy a conseguir el botón más. Lo que podemos hacer es dar click en “Forma”. Obviamente podemos importar nuestras propias formas, pero sólo voy a cambiar la forma básica. Puedes filtrar ciertas formas. Si hago clic en eso, puedo hacer vector art. También puedes hacer categorías. Voy a buscar por iconos. Entonces voy a cambiar la categoría y te dan un montón de íconos realmente geniales. Se puede ver que es realmente increíble. Sólo voy a teclear la marca de cheques. Veamos qué aparece. Genial. Tenemos esto. Voy a hacer doble clic en eso, debería agregar eso a la página. Voy a escalar esto hacia abajo. Sólo voy a ir a mi color de relleno y cambiarlo a nuestro color verde por aquí. Voy a arrastrar esto. Voy a sostener Control Alt sólo para que lo toque, y voy a reducirlo. Acercar un poco. Se puede ver que mis guías lo meten en su lugar. Sólo voy a mover un poco al Comprador Verificado a la derecha. No demasiado. Boom, ahí lo tenemos. Se puede ver aquí esta fue una comprobación de campo, pero eso funcionará también. Voy a hacer click en él. Puedo ver si quería ajustarlo, pero creo que lo dejaré así. Preciosa. Ahora vamos a pasar a nuestra siguiente sección. Pero primero solo quiero sumar rápidamente la frontera. Se puede ver en esta foto tenemos un pequeño golpe ligero. Tenemos un tamaño de borde de uno, y aquí es de color gris. Voy a hacer click en el “Repetidor”. Doy click en el “Diseño” y queremos dar click en “Frontera”. Ahora lo que voy a hacer es ir a la Frontera, clic en el botón gris, y hacer el píxel, un píxel. puede ver que lo hizo alrededor toda la caja repetidora real. Se puede ver eso. Pero quiero hacerlo sobre las plazas reales ahí, las cartas. Voy a hacer click en el “Artículo”, y luego voy a cambiar el elemento color gris y un píxel. Asegúrate de que sea 100 por ciento. Se puede ver que ahora tiene eso. Si hago click en “Repetidor”, volveré a Border y solo apaga eso, ponlo en cero, y compruébalo. Ahora tenemos nuestro límite de un píxel en eso. Súper fácil de agregar, lindas fronteras. Simplemente lo hace estallar un poco más. Preciosa. Lo que voy a hacer es que voy a añadir otra sección. Nos quedaremos en uno en blanco. Lo que puedo hacer es que sólo puedo copiar toda esta sección o copiar este texto. Si voy aquí abajo y luego presiono “Pegar”, se puede ver sólo copia toda la sección. Esa es una forma de acelerar las cosas. Si quiero deshacerme de esta sección, puedo hacer clic derecho y simplemente haga clic en “Eliminar”, y debería deshacerme de ella. Ahora lo que vamos a hacer es que sólo vamos a ir a xt aquí. Voy a copiar y pegar mi texto. Este texto será un H1, y copia eso. Voy a atracar a la cima. Cambia el atraque. Ahí vamos. Ahora vamos a tener estos cuatro iconos. Entonces botón Descargar. Para esto, lo que voy a hacer, vamos al botón más y vamos a seleccionar el “Layouter”. Sólo voy a poner columnas como esta. Tenemos cuatro columnas. Trae eso así. Voy a escalar esto, esta sección. Acercar un poco. Voy a arrastrar esto hacia abajo. Sostenga Control y Alt para adjuntarlo a la sección. No sé qué pasó con eso. Debería ser así. Voy a sacar eso. Genial. Voy a hacer clic en “Agregar elemento”. Necesito ir a agregar los objetos a esto ahora. Lo que voy a hacer, estoy mirando plus y luego voy a ir a añadir forma, arrastrarla y soltarla en la caja de ahí, y voy a ir a cambiar forma básica. Voy a ir a “ Archivos del sitio ” y después voy a hacer click en el SVG que tenemos aquí del Chrome. Haga clic en “Agregar a página”. Sólo voy a escalarlo aquí. Así como eso. Voy a hacer lo mismo por las otras cajas también. Preciosa. Ahora sólo voy a hacer click en el “Layouter”, voy a ir al lado derecho. Entonces vamos a cambiar el color de fondo o simplemente apagarlo. Se puede ver eso. Sólo voy a apagarlo. Voy a abrir mis capas, así que sólo me aseguraré de haber seleccionado el elemento. Sólo voy a arrastrar. Voy a dejarlo ahí en el diseño. Arrastra eso también. Boom, y ahí vamos. Como se puede ver ahí. Es más o menos el dimensionamiento, solo necesita ser arreglado, por lo que las columnas. Vamos a Espaciado, vamos a Item. Podemos ajustar el relleno. Si necesitamos agregar más relleno, puedes escribir algo así en el artículo. Voy a pegar el botón aquí. Como pueden ver voy a desplazar hacia abajo. Sólo voy a ajustarme. No sabía qué pasó con esto. Simplemente ajustaré eso de verdad rápido. Ya tenemos nuestra página hecha. Ahora vamos a añadir el pie de página. Voy a ir a COMPOSICIONES y bajar a NAVEGACIÓN y haga clic en “Pie de página”. Se puede ver que tenemos unos cuantos aquí. Para mí, creo que quiero ir con éste porque es similar a lo que queremos. Voy a hacer click en eso. Ahora si alejo un poco, solo voy a asegurarme que el pie de página esté en la parte inferior, así que voy a hacer doble clic, cambiar el nombre del pie de página y arrastrarlo hasta la parte inferior. Lo que realmente puedo hacer es que puedo establecer como maestro y ponerme como pie de página, pero este pie de página ya está abajo por el fondo. Voy a hacer click en esto y voy a hacer click en “Eliminar”. Seleccionemos este pie de página e intentemos hacerlo de nuevo, Establecer como Maestro y haga clic en “Pie de página”. Tuvimos que eliminar el viejo pie para hacer de éste un pie de página. Ahora se puede ver que tenemos nuestro pie de página aquí, y voy a seguir adelante y usar el texto aquí. Esto va a ser el párrafo 2 y lo que realmente puedo hacer es simplemente entrar, copiar, hacer doble clic en el encabezado que hice clic en el Arte vectorial del logo. Voy a pegarlo aquí abajo. Ahí vamos. Tenemos el logo pop-up. Voy a dejarlo caer en esta pila. Voy a mover el texto hacia arriba así, manteniéndolo realmente simple. Voy a mover eso hacia arriba. Voy a ir al plus, entonces voy a bajar al contacto. Ya ves ahí están suscritos, tienen formularios de contacto. Lo que realmente puedo hacer es dar click en esto. Va a dejar caer esa lista. Puedo traer esto aquí. Tengo la llave de pila. Lo que voy a hacer es que lo voy a traer a la pila. Voy a hacer click sobre el inspector. Voy a editar el diseño de este campo. Voy a hacerlo de ese color gris, voy a apagar el borde del texto. Voy a hacerla blanca. También podría hacerlo verde. Yo quiero hacer ese blanco también, párrafo 2 tamaño de fuente. Voy a hacerlo como si pudieras cambiar los colores de entrada. Puedes cambiar todos estos ajustes realmente. Sólo voy a traer escala que abajo dentro de esto cabe dentro de la caja. Este es el mensaje de éxito. Si quiero previsualizarlo, ahí tenemos nuestro mensaje de éxito. Ahora eso saldrá una vez que haga clic en ese botón Unirse. No sé si en realidad se puede agregar el texto como he hecho aquí. Por ahora, sólo vamos a dejarlo así. Voy a eliminar el título del campo de título, por lo que no necesitamos eso y quiero quitar el botón requerido. Lo que vas a hacer es hacer clic en el cog pequeño y puedes editar esos ajustes. Puedes agregar reglas condicionales si quieres. Quiero agregar una regla para el formulario Wix, ahora podemos poner algún mensaje. Puedo apagar eso. Puedo convertirlo en un enlace a una URL externa si quiero. Incluso puedes agregar una descarga también, pero necesitas actualizar para eso, etcétera Tienes un montón de cosas diferentes aquí. De todos modos, pasemos a la pila de aquí. Voy a arrastrarlo por aquí. Voy a añadir las páginas. Tenemos descarga, esto va a ser el párrafo 2. Voy a sumar algunos de los márgenes. Voy a asegurarme de que seleccionas el texto, y tenemos 15 pixeles. Voy a ir Control C, Control V. Voy a ir a mi panel de capas. Voy a hacer clic derecho. Voy a ir duplicado. También puedes presionar Control D, y debe agregar el texto dentro de ahí. Asegúrate de acoplarlo a la izquierda y a la parte superior. Una vez más, 15 píxeles. Seleccione la capa Control D y arriba a la izquierda. Entonces voy a editar. Conseguimos un blog y apoyo. Entonces tengo esta pila. Voy a presionar Control C, Control V y pegarlo, y luego voy a romperlo así. Muy bien y sólo voy a eliminar los otros. Dulce, ahí lo tenemos. Esto tiene que ser un poco más así. Voy a cambiar, dejar eso ahí y vamos a tener Instagram, Facebook, y Twitter. Voy a ir al botón más de los elementos. En realidad podemos usar las redes sociales. Voy a bajar a encontrar el correcto. Quieres bajar a incrustar y sociales, y vas a encontrar lazos sociales. Se puede ver así. Puedes escoger el estilo que quieras. Voy a hacer clic en este estilo. Sólo voy a moverla por aquí. Queremos apilarlo en esa barra así así. Ahora puedo establecer los vínculos sociales. Lo que quieres hacer es hacer click sobre él, clic en Establecer enlaces sociales. Puedo agregar iconos si quiero. Pero solo voy a eliminar TikTok. Solo creo que estos son Instagram, Facebook, Twitter. Instagram, Facebook, Twitter eso está bien. Voy a eliminar estos. Yo también puedo hacer click en el piñón. Puedes cambiar estos ítems esto es para Twitter y puedo hacer click en el enlace aquí, y luego puedo ponerlo en mi cuenta de Instagram. Ahora he ido adelante y descargué los íconos sociales que quiero. Como se puede ver aquí. Ahora lo que puedo hacer es que puedo cambiar estos iconos. Voy a hacer click en Agregar. Llegué a los archivos de mi sitio. Voy a sumar todos estos a la galería. He ido adelante y añadí esos íconos en. Puedo borrar estos aquí. Twitter haga clic en Listo, y debe agregar estos iconos y si es necesario cambiar el diseño. Puede hacer clic en la capa y hacer clic en horizontal o vertical. Quiero hacer una foto para ésta, puedo bajar el tamaño del ícono también tal vez 25 espaciado. Creo que 10 píxeles deberían estar bien. Sólo voy a mantenerlo fácil, y voy a eliminar ese texto y solo guardo los iconos en su lugar, solo manteniéndome fácil y luego si necesito cambiar los enlaces, puedo hacer clic en Enlaces Sociales y puedo pegar el enlaces dentro de ahí. Preciosa, se ve bien. Estoy bastante contento con eso. Voy a hacer click en Vista previa. 8. Crea una página de equipo: Ahora, vamos a crear la página de adolescentes que he diseñado por aquí. Se puede ver que estoy en XD y he creado estas bonitas imágenes sólo avatar del equipo. Obviamente estas imágenes me bajé Unsplash y creé un gradiente en Photoshop. Se puede ver en Photoshop tomé las imágenes y luego agregué ese gradiente y algo exposición y el filtro blanco y negro en la parte superior para que esas imágenes se vean bonitas y pop. Pero básicamente los hacemos en marca realmente simplemente, y tenemos como una pequeña sección de empleos aquí, vamos a hacer algunas de esas tarjetas y luego también les gustan los beneficios. Te voy a mostrar cómo diseñar eso. Vamos a saltar al Editor X. Él es la página del equipo hasta ahora, básicamente acabo de crear una nueva página y ya tengo el texto de la página principal aquí. Sólo voy a construir a partir de eso. Voy a referirme de nuevo a mi archivo exe editor, así que sólo puedo copiar y pegar el texto. Voy a hacer eso de inmediato. Sólo voy a copiar y pegar el texto aquí. Por eso siempre es bueno prediseñar tu sitio para que solo puedas copiar y pegar, lo hace súper fácil. Sólo voy a escalar el tamaño de la sección. Sólo hay que asegurarse de que esto esté atracado. Voy a ir a mi inspector y atracar esto a la parte superior, no al fondo, y luego quiero escalar el fondo así. Genial, super cool. Ahora para éste, voy a volver a usar el repetidor, que es una de mis herramientas favoritas. Podemos usar los prefabricados si nos gustan. Pero para esto vamos a hacer uno personalizado, así que voy a arrastrar y soltar el repetidor ahí. Voy a ir a mi herramienta inspector y voy a poner el ancho al 80 por ciento. Voy a arrastrar eso y asegurarme de que se haga estallar, añadir líneas a mis textos de la izquierda, lo que se ve realmente bien. Ahora, lo que voy a hacer es que necesito agregar mis imágenes. Tengo que ir más rápido agregar y luego voy a ir a imagen y arrastrar eso ahí, voy a escalar eso hacia arriba, es estirar la imagen, voy a hacer clic en cambiar Imagen, y luego voy para arrastrar mis imágenes a esto. Selecciónalos, suéltalas ahí. Voy a seleccionar mi imagen principal y solo quiero asegurarme de la primera, voy a hacer clic en ese clic en actualizar, y luego debería actualizarse ahí. Preciosa. Voy a cambiar esta imagen, y en realidad quiero extender el repetidor ahora porque necesitamos un sexto grado. Vamos a entrar en la configuración. Voy a hacer click en el repetidor, voy a ir a mis capas y asegurarme de que haciendo clic en el repetidor aquí. Se puede ver que dice tarjetas. Lo que quiero hacer es hacer click en administrar artículos. Lo que realmente puedes hacer es duplicar. Puedo duplicar el elemento 3, y luego lo haré un par de veces más, y debería crear automáticamente el mismo estilo y diseño así. Ahora, por alguna razón, solo llegué a extender la altura de eso porque estaba chocando con el texto T. Sólo voy a derribar esto. Así como eso. Súper fácil. Preciosa. Ahora, todo lo que voy a hacer es simplemente hacer doble clic o haces clic en cambiar imagen y luego seleccionar esas otras imágenes ahora, y la última ahí, boom, excelente. Luciendo super increíble. Ahora, lo que voy a hacer es agregar algún texto. Voy a ir título, y necesito mantener el control, y también en realidad lo une al interior del repetidor real allí. Quiero hacer unos 18 pixeles desde abajo. Creo que eso va a funcionar. Voy a hacer clic en editar texto, y luego lo que voy a hacer es que necesito hacer el texto blanco. Necesito dejarlo en H2 y sólo voy a cambiarlo a blanco, así. Creo que eso funciona. Preciosa. Ahora, sólo voy a ir a copiar y pegar los nombres de los miembros del equipo. Ahora, todo el texto está ahí. Ahora, si lo dejo caer a la vista móvil, podemos ver que todo está ahí, solo vamos a tener que arreglarlo más adelante y cambiarlo para que sea sensible, pero por ahora se ve bastante cool. Solo voy a ajustar el dimensionamiento en estos bloques porque en realidad va a estar alrededor de 450 pixeles. Voy a ir a mi herramienta inspector, y necesito ir a la altura. Déjame ver esto. Voy a cambiarlo a 450. Por lo que ahí podemos tener una mejor vista de ello. Ahora, solo voy a hacer clic en vista previa cambio realmente rápido al tamaño correcto que hemos estado usando, y genial, para que la imagen se vea bien, solo tengo que asegurarme de que dimensionamiento no esté haciendo eso. Voy a hacer clic en el repetidor y quiero asegurarme de que esté atracado a la parte superior también, no al fondo. Yo apago eso. Sólo voy a arrastrar esto hacia abajo, encajarlo en su lugar, asegurarme de que deje un poco de espacio entre el título allí. Creo que eso se ve mejor. Genial. Excelente. DNS se ve genial. Estoy contento con eso. Ahora, me voy a pasar a mi siguiente sección. Tenemos algunos textos aquí. Voy a agregar un título de nuevo. Voy a soltar eso ahí dentro, arrastre hasta que añada a esa sección, y deberíamos hacerlo el H1. Creo que eso va a funcionar. Sólo voy a cambiar el ancho también, voy a ir 50 por ciento. Ahí vamos. Preciosa. Arrástrelo hacia arriba a 50 píxeles desde la parte superior , enviar a eso, también voy a arrastrar la parte inferior de esa sección allí para expandirla. Preciosa. Ahora, tenemos algunas cajas, así que esto va a ser un repetidor nuevo. Bueno todo repetidor. Herramientas de maquetación, repetidor, y sólo vamos a arrastrar y soltar éste así, y voy a hacer el ancho 80 por ciento. Para éste, la altura de eso es de unos 300 píxeles. Voy a asegurarme de seleccionar el artículo, y voy a ir con 300 pixeles para hacer eso más de un cuadrado, y voy a ir a hacer click en el diseño y hacer del fondo el color gris oscuro que tenemos aquí, y también ver si podemos sumar un borde ahí. Genial. Tenemos la frontera en marcha. Tenemos un bonito conjunto de frontera que hemos creado. Ahora, lo que voy a hacer es agregar algún texto. Voy a dejar caer un título ahí, vamos a dejar caer un párrafo también, y probablemente vamos a necesitar un par de párrafos más también. Voy a hacer clic en editar texto, y voy a seleccionar la versión blanca. Ahí vamos, sólo voy a acercar otra vez, y sólo voy a copiar el texto de aquí, voy a arrastrar eso hacia fuera, éste vamos a ir H2 y lo haremos blanco, y sólo tengo que escalar el ancho allí. No estamos cortando el texto. Tenemos al diseñador visual, tenemos este texto aquí, y también vamos a convertirlo en el párrafo verde. Vamos a arrastrarlo hacia arriba, también voy a arrastrar esto un poco a un costado, a 25 pixeles de los bordes. Ahora, voy a añadir aquí otro párrafo. Sólo voy a pegar eso, y luego vamos a ir a seleccionar el párrafo blanco. Asegúrate de que encaje en su lugar, hermoso. Ahora tenemos unas bonitas garrapatas grises por aquí por el salario. Podría simplemente copiar este texto aquí así. Ahora éste, no creía que tuviera el color adecuado para ello. Sólo voy a seleccionar la versión negra y luego hacer ese color gris claro. Te lo traeré. Preciosa. Voy a escalar esto hacia abajo. Entonces vamos a añadir un botón a la esquina aquí, cool. Voy a hacer click, Cambiar texto, Aplicar Ahora. Vamos a ir al botón Diseño cambiar el fondo a cero por ciento de opacidad. Vamos a sumar una frontera. Ese borde va a ser, digamos sólo dos píxeles y va a ser verde, hermoso. Ahora realmente no lo quiero redondeado, así que voy a apagar la redondez y luego boom, tenemos nuestro casi exacto mismo diseño que hemos creado aquí como se puede ver allí. Ese botón, puedo cambiarlo a la izquierda. El texto también tiene que ser verde en realidad. Iré al diseño, haga clic en el texto, cambie el color, haga clic con el botón izquierdo del ratón sobre el color de nuestro tema. Boom, tenemos nuestro fondo ahí. Preciosa. Ahora lo que hacemos es simplemente reemplazar el texto de los otros por lo que he hecho aquí y luego estamos hechos por esta pequeña sección también. Preciosa. Ahora en la siguiente sección. Voy a presionar el plus otra vez, voy a elegir sección en blanco. Voy a ir a mis capas y sólo nombrar esta sección Beneficios. Esto es Jobs, y esto es, sólo voy a llamar a ese equipo disparos. Me gusta tener las secciones nombradas aseadas, hermosas. Ahora voy a bajar. Una vez más, cambiaremos el color como de costumbre por el negro. Voy a duplicar este texto y ponerlo en esta sección aquí. Asegúrate de presionar Control C y luego Control V solo para copiar y pegar, eso debería funcionar. Déjame ir a meterlo en su lugar, pixeles fijos. Sólo voy a escalar la altura también. Tenemos algo de texto aquí. Puedo copiar este texto, pegarlo aquí, debería estar bien. Sólo quería cambiar el texto. Sólo quiero centrar esos textos así. Ahí vamos, hermosa. Ahora éste tiene un repetidor similar a éste. Voy a copiar este repetidor. Voy a pegarlo. Lo genial en realidad va a duplicar todo ese asunto, lo que hace que esto sea súper fácil. Para éste, en realidad no vamos a tener antecedentes. Voy a arrastrar la opacidad y sólo va a tener un borde de píxel de punto, como se puede ver allí. Ahora, ¿qué vamos a hacer? Voy a borrar el texto principal y me aseguraré de que lo hagas desde el primer cuadro luego lo borra de todas las demás casillas porque es un repetidor. Voy a eliminar eso, él tiene estos iconos, el H3 o H2, y luego el texto del párrafo. Puedo borrar esto, también puedo borrar el botón y creo que estamos bien para ir. Para éste, voy a ir a editar texto. Voy a ir H3. Es un poco audaz, pero voy a apagar la audacia. Excelente. Voy a escalar el ancho del contenedor ahí. Voy a arrastrar eso a un lado, lo cual es genial. Probablemente alrededor de 40 píxeles o 50 píxeles. Sólo voy a copiar y pegar este texto aquí. Entonces ahora solo voy a ver qué tan grandes estas cajas. La altura es alrededor de 210. Voy a cambiar eso. Haga click en el Elemento, y voy a ir a 210 pixeles. Arrastra el texto, y luego solo voy a centrar todo. Si mantienes pulsada Mayús y seleccionas por ellos, solo puedo tocar mi mantenga pulsada Mayús y las teclas de flecha y voy a tocarlo así. Preciosa. Arreglaré las otras cajas abajo. Sólo quiero agregar mi ícono aquí. Lo que puedo hacer es ir a plus. Voy a hacer clic en Forma. Voy a sostener Control Alt, asegurarme de que haga clic y encaje así. Voy a hacer clic en Cambiar forma básica. Ya he seguido adelante y los subo como SVGs y PNGs, por si acaso. Ahora tengo que simplemente agregarlos rápidamente al manager. Se va a ordenar por fecha. puede ver que va a subir como SVGs. En realidad les va a mostrar en el directivo, son hermosos. Quiero dar click sobre éste. Entonces porque ya lo he hecho en XD, todo lo que tengo que hacer es exportarlo y simplemente es realmente fácil hacerlo. Ahora, para mantenerlo realmente simple, solo puedo sostener Control Alt y dirigirme, duplicarlo, y pegarlo. En realidad comienza a pegarlo en todas las cajas de ahí. Ahora está dentro del repetidor. También tenemos que hacer clic en Administrar artículos. Ahora lo que voy a hacer es, haré clic en los tres puntos y los duplicaré igual que hice la última vez. Ahora tengo seis cajas así. Lo que voy a hacer ahora es solo asegurarme de que estoy seleccionando el elemento correcto. Haga clic en el vector art. Creo que ahí hay un duplicado. Voy a cambiar el vector art. El siguiente es el de salud. Entonces terminamos. Puedo hacer clic en Preview realmente rápidamente. Entonces podemos ver cómo se ve como la página del equipo, tiene la animación de lo original. Creo que deberíamos agregar un poco de animaciones para que se vea mejor. El botón tiene el efecto de hover que se ve realmente impresionante. Los textos de alguna manera fueron a la izquierda, pero tienes estas cajas geniales y tal vez podría agregar una cosa de hover ahí. Lo que voy a hacer, es en Editar. Sólo voy a revisar estos textos, asegurarme de que esté atracado a la cima. Se puede ver que estoy apagando el acoplamiento y asegurarme de que esté atracado a la cima. Voy a hacer click en las cartas aquí, y los ítems, y vamos a ver si podemos agregar una interacción hover. Ahora lo que quiero hacer es, hagamos un efecto de crecimiento. Lo haré 0.5 segundos. Facilidad de entrada y facilidad de salida, eso es hermoso. Se puede ver que así es como se ve cuando le pones el ratón sobre él. Voy a hacer clic en vista previa y ver cómo se ve. Se puede ver si le pones el ratón sobre él y ahora todos esos ítems tendrán el poco efecto de animación, creo que eso es bastante limpio. Se ve bastante guay, me encanta eso. Tenemos un poco de efecto de hover ahí. Ahora para éste, puedo dar click en el repetidor. Tengo seleccionado el repetidor. Voy a asegurarme de hacer clic en el derecho, repetidor, y luego haga clic en el ítem porque no podemos agregar una animación al repetidor, solo podemos hacerlo al elemento real. Voy a hacer click sobre el elemento en Hover. Ahora para éste, podemos agregar algo más. Vamos con flotador. Haré lo mismo, haremos como 0.5 segundos. Facilidad de entrada y salida. Como se puede ver, eso es lo que va a hacer. Si hago clic en Vista previa, ahora se puede ver lo que está haciendo. Está haciendo eso, eso es bastante limpio. Déjame arreglar eso. Impresionante, eso me gusta. Agrega un poco de efecto, fresco. Todas estas interacciones, solo tienes que añadir más detalles en el sitio web y simplemente haz que se vea 10 veces mejor. Entonces, por último, agregaremos una animación a estos ítems. Acabo de ir a las Capas, haga clic en el Elemento, por lo que se va a aplicar a todas ellas. Vuelve a hacer clic en el rayo. Voy a ir a agregar interacción hover. Ahora éste, hagamos otra cosa. Vamos a intentar adelante. Veamos qué hace éste. Facilidad de entrada y salida. Creo que me voy a ir, probemos un fregadero. Juega eso y va abajo, eso no está tan mal. También podemos hacer rotar. Creo que nos quedaremos con rotar. Para éste, lo dejaremos en 0.3 segundos. Haremos facilidad dentro y fuera. Voy a hacer clic en Vista previa. Haga clic en la vista de escritorio, solo escale eso hacia fuera para que esté en el tamaño correcto del diseño para, y luego ahora hace un poco de una rotación. Eso es bastante ordenado. Eso me gusta, realmente impresionante. Preciosa. Así es como se hace la página Equipo. Siempre puedo volver atrás y agregarle pequeños toques y acabados, pero creo que se ve realmente bien. 9. Que lo responda: [ MÚSICA] Una vez que estés contento con tu sitio web, tu página, sea lo que sea, entonces queremos ir al otro punto de ruptura y empezar a hacerlo responsivo. Voy a hacer click en el punto de ruptura del iPad, para que podamos ver algunas cosas fuera de lugar. Tienes que arreglar eso y también en el móvil también. Cada vez que hagas un cambio en un punto de ruptura superior en la resolución más alta, debería hacer el cambio en los bajos también. Si estás trabajando en el iPad, debería actualizarlo en el móvil. Voy a hacer click aquí, luego lo traigo. Solo queremos asegurarnos de que todo encaja bastante bien. Tengo que escalar las cosas para que quede en forma entonces eso es totalmente genial. Si hago un cambio ahí, puedes ver que en la vista de escritorio no debería rellenarlo. En esta vista, en realidad voy a agregar un menú de hamburguesas. Para esto, lo que realmente puedo hacer es esconder las capas. Quiero hacer clic derecho en el menú y puedo hacer click en “No mostrar”, y debe ocultar eso. Si voy a la vista de escritorio, se puede ver que todavía está ahí. Si quieres ocultar algo, simplemente haz clic con el botón derecho en la capa y haz clic en “No mostrar”. Si quieres volver a mostrarlo, solo tienes que hacer clic en “Display” y debería mostrarlo así. Pero si volvemos a la otra vista, no debería revelarla. En un móvil, tampoco debería mostrarlo. Entonces lo que realmente podemos hacer es que tengo un menú de hamburguesas ya aquí y sólo voy a cambiar el color a blanco. Puedes hacerlo verde si quieres. Eso funciona. Voy a escalarlo un poco, así que 40 pixeles. Lo que podemos hacer con este menú de hamburguesas es obviamente podemos usar eso. Voy a hacer clic en “Abrir menú”. Cuando alguien hace clic en él, así es como va a verse. Está en un contenedor. Puedo cambiar el fondo así que si quiero hacer verde o negro, sea lo que sea. Creo que sólo voy a hacer que sea un color verdoso. Ese es nuestro verde principal. Entonces voy a hacer click fuera de eso y el texto, puede ser negro, eso está totalmente bien. Puedo hacer el texto un poco más grande si quiero, tal vez como 24 pixeles. Creo que eso está bien. Si acabo de hacer clic fuera de eso se puede ver, si sólo hago clic en “Vista previa” y si hago clic en el menú de hamburguesas se puede ver cómo funciona. Ya está incorporado, hace que sea súper fácil de usar eso. Lo que voy a hacer aquí es que voy a ajustar el dimensionamiento. Tenemos el texto T. Podemos editar un texto. Podemos dejar caer el tamaño, o lo que realmente puedo hacer es sacar esto así. También voy a revisar la vista de escritorio. Voy a ver que no está causando ningún problema ahí. Tenemos esta imagen. Éste lo puedo escalar. Éste, no sé por qué estuvo ahí, así que voy a traer eso ahí. Voy a ir a mi disposición. Ahora sólo voy a cambiar la altura. Como se puede ver, voy a poner 300 pixeles ahí. Preciosa. Ahora este texto y este fondo deben estar abajo. Sólo voy a traer eso. Quitar esto. Voy a sacar la caja, así que 360 pixeles. Voy a arrastrar eso y luego el botón Descargar. Se ve bien. Ahora éste, sólo voy a hacer que el texto sea más amplio, el cuadro de ahí. Lo mismo va para estos en el Repetidor. Voy a entrar en las capas. Asegúrate de seleccionar el texto. En realidad puedo aumentar el tamaño del Repetidor, por lo que si quiero arrastrarlo, debería arreglar los problemas ahí. Quiero hacer click en el texto y puedo jugar por ahí con los márgenes. Vamos a ir 250, y se puede ver que agrega un poco más de espacio. Preciosa. Éste también, voy a añadir algunos píxeles en los márgenes. No creo que eso esté funcionando. Hagamos clic en el Repetidor. Arrastra esto hasta el borde. Voy a añadir algo de relleno en la parte superior. 50 pixeles, eso funciona. Entonces voy a hacer esto en una cosa de una línea, así que solo voy a arrastrar eso y arrastrarlo un poco hacia abajo como alrededor de 28 píxeles. Preciosa. Se ve mucho mejor. Ahora podemos ver aquí este texto está un poco relleno, así que voy a escalar eso. Arrástralo hacia abajo. Ahí vamos. Eso arregló eso. Tiene un poco demasiado dimensionamiento así que voy a ajustar el tamaño, los márgenes en la parte superior o hacerlo como 90 pixeles. Ahí vas. Preciosa. Entonces éste, podemos jugar alrededor del ancho. Quiero ponerlo en 70 por ciento. Solo voy a revisar la vista de escritorio. Preciosa. No está haciendo ningún cambio ahí. Ahora voy a hacer click en el punto de ruptura móvil para que pudiéramos ver eso. Se puede ver el máximo. Si lo escalamos, va a ser 720 y entonces el más bajo es 320 como podemos ver eso. El móvil será muy pequeño. Ahora, se puede ver que vamos a tener que hacer algunos ajustes nuevo también. Editemos el texto y cambiemos el tamaño a 40. [ MÚSICA] Ahora una vez que hayas hecho todo eso, todo debería encajar en el dimensionamiento. Esa es la vista del iPad y luego también el PhoneView también. Apenas ajustando el dimensionamiento. Básicamente sólo tienes que ir al tamaño, ajustar el fluido y luego ajustar el ancho para una gran cantidad de las cosas. Si se trata de un Repetidor o una tarjeta o un diseño, solo cambia el diseño a uno vertical. Por lo general, cuando haces clic derecho tienen configuraciones, por ejemplo, las tarjetas tenían un ListView. Pero básicamente se trata de ajustar el texto bien y hacerlo lucir bien. Entonces eso es eso. Ahora una vez que estés contento con ella y siempre puedes hacer clic en “Vista previa”, pero si quieres publicar simplemente haz clic en el botón “Publicar”. Te va a dar un enlace Editor X. Se puede ver aquí ya he establecido un enlace para eso y puedo hacer clic en “Ver sitio”. 10. Añadir animaciones: Te voy a mostrar cómo agregar interacciones en animaciones. Lo que quieres hacer es seleccionar una sección. Voy a seleccionar aquí mi sección Héroe. Como se puede ver, está seleccionado. Voy a ir al lado derecho del Specter, y haga clic en el rayo, y voy a hacer clic en “Agregar Interacción Hover”. Ahora, lo que realmente puedo hacer es agregar una interacción personalizada, así que voy a hacer clic en ese botón ahí. Ahora te dará algunas indicaciones para configurar el tiempo de interacción, comenzar a hacer cambios de diseño y diseño. Puede establecer el estado de desplazamiento al pasar cursor sobre la carga inicial del sitio web. Puedo apagar el cronometraje. Por ejemplo, si muevo esto tal vez hacia arriba así, y tal vez lo movemos fuera de la pantalla. Voy a hacer clic en “Listo”. Ahora, ya puedes ver si vuelvo a la Interacción Hover, tiene los segundos ahí. Para que pueda dar click en eso y puedo cambiar los segundos. Tal vez lo quieras a 0.6 y queremos facilitar dentro o facilidad dentro y fuera. Eso está bien. Podemos cambiar eso. Éste lo haré 0.6 también. Ahora, ya puedes ver si hago clic en “Jugar”, esa ubicación donde lo pongo, va a usar ese movimiento y bajarlo. Por lo que puedes ver que son básicamente ranura en su lugar realmente fácilmente. Voy a hacer clic en “Listo”. Ahora si hago clic en “Vista previa”, y voy a cambiar la vista, se puede ver eso, cómo funciona. Es tan fácil. Cuando pasas el cursor, es hacer eso. Si vuelvo a Editar, en realidad no quiero que el flotador esté en el texto, quiero que sea un estado inicial, por lo que debería estar en eso. Voy a hacer clic en “Listo”. Preciosa. Ahora voy a hacer click en el botón. Voy a agregar una interacción personalizada. Para el botón, voy a hacer de eso un estado de flotación. Voy a hacer el fondo, podemos hacerlo más oscuro. Queremos que sea de color verde oscuro. Eso va a ser facilidad en. Simplemente saldré el 0.3 en realidad. Voy a hacer clic en “Jugar”. Voy a hacer clic en “Listo”. Entonces voy a hacer clic en “Vista previa” solo para asegurarme de que la vista sea correcta. Ahora, se puede ver cómo me pongo sobre eso , está surtiendo efecto. Simplemente haciendo estas pequeñas interacciones, hace mucha diferencia. Hace que tu sitio web sea mucho más divertido. También puedes agregar cosas también. Vamos al repetidor. Voy a hacer clic en el Arte Vector justo por sí mismo, y en realidad puedo hacer una animación solo en el arte mismo. Así que solo haz doble clic en el interior, asegúrate de que estás en las capas dentro del objeto, y quieres hacer clic en “Animación”. Ahora, solo puedo agregar animaciones simples como esta en lugar de agregarla a toda la sección. Yo puedo hacer flotar en, puedo hacer dar vuelta, lo que quieras hacer. Hay tantas cosas que puedes hacer: girar, revelar, deslizarte. Me gusta el glide-in, así que voy a hacer clic en 'Glide-in”. Puedo hacer clic en “Personalizar”. Para que pueda cambiar la dirección, la distancia también, puedo cambiar eso, la duración, el retraso, y sólo animar por primera vez. Entonces hago clic en “Jugar”, se puede ver eso. Si quiero aumentar la distancia, hagámoslo como 150 pixeles de duración, vamos a ir 1.7 duración. Entonces podemos jugar eso. Es un poco demasiado lento. Ahí vamos. Ahora tenemos una animación personalizada. Cuando lo seleccionas, puedes ver que es azul, para que puedas ver que está animado. Ahora podemos hacer lo mismo. puede ver porque es un repetidor, está aplicando la misma animación. Entonces si acabo de refrescar, se puede ver que así es como se cierne. Puedes agregar animaciones a textos, iconos, cualquiera de las capas, y así es como agregas esos pequeños efectos y animaciones cool hover. 11. Instalación de aplicaciones desde el mercado: [ MÚSICA] Vamos por la parte superior izquierda y pulsamos en el ícono de App Market. Puedes ver que te va a llevar al mercado de aplicaciones en casa para las páginas. Recibirás recomendaciones, obtendrás lo que es tendencia ahora, obtendrás algunas soluciones de negocio ahí, alguna solución pagada, algunas cosas son gratis algunas cosas son pruebas también. Tienes hecho por Wix. Si quieres agregar una galería, puedes agregar grupos de foros de Wix, tiendas, incluso reservas, eso es comentarios extra, etcétera Puedes filtrar por selecciones de equipo, apps más nuevas, hay 70 cosas diferentes que puedes en realidad añadir. Si quieres agregar, tal vez vaya a recoger leads. Podemos ver, podemos agregar Formularios o popups. Lo que voy a hacer es que voy a añadir un chat de Wix. Voy a hacer click en eso. Puedo ver lo que parece que es un pequeño bot de chat que surge. Si alguien aterriza en mi sitio web, pueden chatear con atención al cliente. Voy a ver que es un plan gratuito disponible, lo cual es genial. Puedo mirar los puntos de vista, las críticas. Voy a hacer click en Agregar al sitio Wix. Ahora sólo voy a mover eso, inspeccionar eso. Ahora podemos ver que la app se conecta automáticamente directamente a tu sitio web. Puedo hacer click en la Configuración, se va a abrir el chat de Wix aquí. Puedo comprometerme con esto y cambiar las cosas. Participar visitó el capital A personalízalo. Puedo hacer clic en Administrar chat. Puedo ver las horas de chat. Tendrías que actualizar para eso, pero puedes editar las horas. Puedo elegir los campos del formulario, formulario en línea. Tienes tanto control sobre lo que realmente puedes hacer con él. Puedo mirar la pantalla. Así es como se ve. Eso se ve bastante genial. Está usando mis fuentes usadas y ya configuradas que he configurado para el diseño también. Voy a añadir el logo ahí se puede ver añade el logo. Puedo cambiar el color de los chats y tal vez quiero hacerlo como el color azul, tan leve interfiriendo con el verde ahí. Eso es realmente genial. Textos e ícono, eso está bien. Puedo encender y apagar el ícono. Yo también lo puedo cambiar. Puedo poner el logo si quiero. Voy a ir o a ti por ese redondeado, creo que está bien. Yo también puedo mirar el texto. Envía un mensaje muy lejos dentro unas horas para ayudar. Puedo añadir el email es remio1 @gmail, eso es bastante cool. Yo puedo cambiar eso. Puedo hacer una animación. Tú vas todo este control. Una vez más, si miro la pantalla, así es como se verá. Puedo hacer clic en Abrir bandeja de entrada y se conectará a mi bandeja de entrada integrada dentro de mi sitio web. Si voy a la bandeja de entrada, se puede ver que esto es como se verá si alguien envía un mensaje, voy a conseguir los mensajes aquí y puedo contestar. Hey Dan, aquí para ayudar o lo que sea y puedo mandar el email. Se puede ver, así así, me dan datos de contacto. Yo también puedo editar los ajustes aquí. Es realmente fácil de usar y así es básicamente como usas aplicaciones y es realmente genial. Si hago clic en Vista previa, y si alguien hace clic en él, se puede ver que así es como se ve. Ustedes necesitan ayuda con app o algo así, sea lo que sea. Tienes pequeños emojis que están bastante iluminados. Esa es una herramienta realmente ordenada para agregar cuando estás agregando aplicaciones a tu sitio web. [MÚSICA] 12. SEO básico: Te voy a mostrar cómo hacer algún SEO básico en tus páginas de tu sitio web. Quieres ir a la esquina superior izquierda, haz clic en Páginas, luego navega a la Página principal. Obviamente puedes editar cada página. Solo te voy a mostrar cómo hacer la página principal por ahora. Lo que quieres hacer es hacer click en estos tres pequeños puntos aquí. Quieres bajar a SEO Basics. Una vez que haga clic en eso, obtendrás un montón de opciones para gestionar en la esquina superior. Puedo ir a la página Info. Obviamente puedo cambiar el nombre de la página. Puedo llamar a eso Hogar si quiero. Me dirá que esta es la Página principal. Puedo hacer clic en Configuración avanzada. Puedo controlar manualmente el almacenamiento en caché también. Puedo ir a Permisos, y por el momento está realmente abierto a todos, pero tal vez sea una página de solo miembros o una página de inicio de sesión, o tal vez sea una página privada. Entonces puedes ponerlo en los titulares de contraseñas y puedes establecer una contraseña. También puedes hacer clic en miembros solo también. Si esto es sólo los miembros o clientes que pagan, entonces usted puede seleccionar eso. Voy a volver atrás y hacer clic en todos para que cualquiera pueda ver esta página. Voy a ir a SEO Basics ahora, y esto nos permitirá editar el título y también los textos de párrafo cuando se trata la meta-descripción en Google o cualquier motor de búsqueda. Entonces en la parte superior se puede ver solo dice espectro casero. Pero lo que voy a hacer es que voy a cambiar eso. Ahora lo que realmente puedo hacer es editar la etiqueta del título. En lugar de solo tener Home Specter quieres hacerlo más específico con palabras clave. Voy a pegar en algún texto. Specter, una billetera ethereum segura construida para Tokens, y NFts. Ahora obviamente puedo cambiar el texto si quiero editar eso. Entonces lo que tenemos aquí es la meta descripción. Se puede ver que allí no hay descripción. Voy a pegar algunos textos ahí. Ahora se puede ver que aparece. En Google cuando alguien mira hacia arriba Specter, entonces ese es el texto que van a ver en el primer resultado. Entonces puedo hacer clic en Ir a URL. Se va a abrir o previsualizar y obviamente solo muéstrame la página ahí. Entonces abajo abajo, quieres asegurarte de que vamos a indexar los motores de búsqueda esta página, por lo que entonces realmente aparece en Google. Si esto está apagado, entonces los bots en los motores de búsqueda no van a escanear realmente a través de las páginas y todos los backlinks. También puedes ir a compartir social también. Si alguien comparte tu sitio web en Facebook o Instagram o una de esas plataformas, entonces generalmente obtienes un pop-up que da una vista previa del sitio. Lo que quieres hacer es subir una imagen. Es sólo un simple agregar aquí. Se puede ver eso así que en lugar de tener algo en blanco o simplemente al azar, la búsqueda es seleccionar un logotipo o algo de la página web, cualquier imagen, va a aparecer con esta imagen aquí y obviamente va a copiar el título que hice en el SEO Basics y la meta descripción aquí. Se puede ver aquí esto es lo que parece la vista previa en social. Obviamente puedo ajustar la imagen y moverla, pero esta imagen fue de 1,080 por 600 pixeles, y se puede ver así es como se ve. Entonces puedes desplazarte hacia abajo y tienen configuraciones de Twitter aquí. Twitter se ve un poco diferente como se puede ver allí. Puedo cambiarlo para que sea pequeño o grande. Eso es realmente genial también, y puedo editar los metadatos para Twitter allí. Eso también es otra cosa genial. Tienes SEO avanzado. No suelo jugar con esto. Puedes llamarlo marcado de datos estructurados para que puedas agregar un nuevo marcado. Tienes Robots Meta Tags. Entonces, si no quieres que los bots sigan o indexen algo así, puedes cambiar eso, y luego también tienes etiquetas adicionales pero típicamente dejo eso para expertos en SEO. También puedes contratar a un socio SEO con Wix y ellos te van a ayudar. Eso es lo básico de SEO. Yo iría de acuerdo con cada página que has diseñado y hacer lo mismo, y sólo va a crear mejores resultados para ti. 13. Empuja Widget: [ MÚSICA] Te voy a mostrar cómo puedes incrustar un widget en tu sitio. Estoy en Calendly y voy a ir dar click en el cog y voy a hacer click en Agregar a Sitio Web. Calendly es mi sistema de reservas de calendario, y lo uso para mis clientes. Voy a seleccionar la opción incrustar en línea, y lo que vas a hacer es simplemente hacer clic en Copiar código y va a copiar este HTML y JavaScript aquí, que está bien. Puedo cambiar los colores, obviamente pero sólo voy a copiar eso, volver a Editor x. ahora lo que quieres hacer es hacer click en Agregar Elementos, y quieres bajar a Insertar y Social. Ahora puedes ver que puedes incrustar widget, puedes incrustar un sitio, y puedes incrustar un elemento personalizado. Ahora lo que quiero hacer es hacer clic en Insertar Widget, va a poner una caja aquí. Ahora sólo voy a estirar la caja abierta. Voy a hacer click en el menú ahí click Enter Code y voy a hacer clic en Control V para pegarlo. Ahora quiero hacer clic en Actualizar. Entonces ya puedes ver que tenemos nuestro sistema Calendly embebido justo ahí. Se puede ver que está incrustado ahí. Puedo seguir adelante y hacer clic en Vista previa. Solo voy a cambiar mi escritorio al tamaño correcto aquí. Ya puedes ver, puedo desplazarme y tiene una pequeña barra de desplazamiento. Tendré que ajustar los márgenes en ese apartado. Entonces puedo hacer click sobre él y puedo reservar un Calendly así. Súper fácil de hacer y realmente fácil. Si tengo un móvil, veremos cómo se ve en el móvil. Ver que es bastante receptivo. Obviamente, tiene la barra de desplazamiento, así que probablemente tendría que hacerla más larga. Volvamos a editar sitio. Sólo voy a ir a la vista de escritorio. Voy a hacer clic en la sección. Asegúrate de seleccionar la sección aquí. Entonces sólo voy a ajustar la altura. Haremos la altura 1,200. Eso es un poco demasiado. Vamos a ir 800 pixeles. Simplemente lo abre un poco más para que podamos ver eso. Entonces obviamente podemos deshacernos de algunas de estas otras partes en Calendly, para que podamos apagar y ocultar algunas de estas y solo tener una o dos se verá un poco mejor. Así es como incrustas un widget. Puedes incrustar un montón de cosas. 14. Crea un blog: [ MÚSICA] También vamos a trabajar en la página del blog. Vamos a construir eso. Para esta parte, en realidad voy a agregar un blog. Voy a bajar por la parte inferior en el menú 11 y haga clic en “Blog” y se puede ver habrá un botón que dice Agregar al Sitio. Voy a hacer click en “Agregar al sitio” y el Editor X va a hacer lo suyo. Ahora, puedes seleccionar un montón de cosas. Puedes hacer blog con el equipo de redacción, blog con los miembros de ahí, o simplemente un blog normal que es lo que queremos. Voy a hacer clic en “Empezar”. Una vez que añadas el blog, y así será como se verá, obtendrás una barra de búsqueda en la parte superior en la que puedo personalizar el diseño y hacer clic en “Configuración”. Puedes escribir encontrar blog o encontrar parse o lo que sea. También puedes apagar y encender eso. También puedes hacer clic en el diseño, para que pueda cambiar el color de relleno o la opacidad. Hago el fondo este gris claro y bajaré la opacidad hacia abajo. Ahora cambia el color del texto a este gris más claro, coloca todo el texto a gris más claro así como se puede ver allí. Gente, si quieren encontrar publicaciones de blog. También tenemos estas publicaciones de blog. Tenga en cuenta en el Inspector, solo le da el tamaño del acoplamiento y las herramientas de posicionamiento, por lo que hay que cambiar el diseño del mismo. Tiene un fondo blanco. Tengo que hacer clic en “Configuración” aquí para el blog porque es un widget embebido, tengo que cambiar el diseño aquí. Para el diseño, voy a hacer click en eso. Se puede ver que tenemos las etiquetas, botones, márgenes, publicaciones, y el menú del blog. Puedo hacer clic en “Blog Menu” como se puede ver allí. Puedo volver atrás, mensajes y puedo bajar los puestos de fondo. Si quiero cambiarlo, a lo mejor quiero hacer el verde. Pensé que se ve mejor con el gris ahí. Entonces con el texto, podría ir a cambiarlo a blanco así. Se puede ver que está actualizando los cambios ahí, lo que se ve realmente bien. Voy a volver atrás, Botones y Márgenes, Color de Fondo, eso es sólo fondo de área. Vamos a llevarla al cero por ciento. Se puede ver el fondo ahí, porque no quería esa cosa blanca. El color del texto está bien. Ese pequeño contorno es bueno. Tienes ajustes de Video al pasar el cursor, pero no voy a tener ningún video, lo cual está totalmente bien. También tienes el diseño. Puedo seguir editorial. Puedo hacer uno al lado del otro y debería cambiarlo así. Puedes hacer azulejos si quieres. Me gusta cómo te da información predetallada. Puedes tener puesto completo. Me gusta. Es realmente bueno. Voy a hacer clic en “Side By Side”. Creo que eso me gusta mucho. Muestra las imágenes muy bien. Puedes mostrar ciertas cosas. Si quiero deshacerme del tiempo de lectura, puedo deshacerme de eso, la fecha de publicación. Si quiero deshacerme de la insignia, también puedo deshacerme de eso. Puedes personalizarlo a cómo quieres que se vea realmente el blog. Vistas contador y comentarios, me desharé de eso, y el contador de me gusta, solo manténgalo realmente simple. Entonces lo que puedes hacer es en realidad ir a Crear Un Post o puedo hacer clic en “Administrar “Posts”. Se puede ver aquí. Voy a hacer clic en “Administrar” y me va a llevar a mi panel de back-end donde se almacenan las publicaciones del blog. En el lado izquierdo, se puede ver Blog, y tengo mi Visión General, mi Publicado, mis Borradores, Programados, y Papelera. Se puede ver que los mensajes muestreados que me ha dado. Quiero editar eso, así que voy a hacer clic en “Editar”. Voy a teclear 10 startup. Puedo editar el texto aquí. Se puede ver puedo escribir texto, puedo presionar “Plus”, puedo añadir un video, imágenes, regalos, archivos, divisores. Puedes hacer tantas cosas con esto. Puedo hacer click en esto. Voy a hacer click sobre la imagen, hacer doble clic en ella y debería llevarme a esto, voy a ir a Unsplash. Voy a escribir creativo. Veamos qué aparece. Hay muchas cosas geniales, me gusta esa foto en realidad. Voy a hacer clic en “Agregar a página”, y va a agregar esa imagen del blog, y luego voy a hacer clic en “Eliminar” en esa imagen ahí. Entonces tienes algún otro texto. Puedes jugar con tantas cosas. Puedes agregar etiquetas, categorías, SEO, ajustes, hay un montón de cosas diferentes. Si también quiero cambiar esta imagen, tengo que hacer click en “Actualizar”. Voy a volver a esa misma imagen también. Vayamos aquí. Va a cambiar mi imagen de portada de pantalla, no sólo las imágenes en el blog sino mi imagen de visualización allí. La fecha publicada, se puede ver 23, el autor, que soy yo. Si tienes un miembro de tu equipo, puedes cambiar el autor por esa persona. Tienes tantas herramientas. Una vez que estoy contento con eso, puedo hacer clic en “Guardar” y luego hacer clic en “Publicar”. Ahora puedes ver mi entrada de blog está ahí. Ahora volvamos a la página y todo debe cambiarse. Boom. Ahí puedes ver mi nueva imagen y el texto ahí también. Se ve super bien. Siempre puedes volver atrás y hacer clic en “Administrar publicaciones” para arreglarlo y ajustarlo. Hay mucha funcionalidad a la hora de construir un blog. Tienes algunos consejos aquí, tienes plantillas. Es una herramienta realmente buena en términos de Editor X.