\n Requisitos de este tutorial
\n<\/h5>\n
\n Deber\u00e1 descargar ciertas im\u00e1genes, vectores y fuentes para crear este sitio. Pero a\u00fan puede seguir adelante sin estos activos. Para organizar el contenido correctamente, cree una carpeta separada para su sitio.\n<\/p>\n
- \n
- \n
\n Ve a pexels.com<\/a> y descarga:\n <\/p>\n
- \n
- \n
\n 4 im\u00e1genes de tama\u00f1o 1160 x 480 para presentaci\u00f3n de diapositivas. Aqu\u00ed hay una captura de pantalla de pexels. Puede poner este tama\u00f1o en el cuadro ‘tama\u00f1o personalizado' en este sitio web.\n <\/p>\n<\/li>\n
- \n
\n 6 im\u00e1genes de tama\u00f1o 271 x 208 para la secci\u00f3n ‘servicios'.\n <\/p>\n<\/li>\n
- \n
\n 1 imagen de tama\u00f1o 1160 x 692 para la secci\u00f3n ‘Cont\u00e1ctenos'.\n <\/p>\n<\/li>\n<\/ul>\n<\/li>\n
- \n
\n Ve a freepik.com<\/a> y descarga:\n <\/p>\n
- \n
- Un \u00edcono de cruz (puede editar este \u00edcono en Illustrator o simplemente descargar el archivo png de feepik).\n <\/li>\n
- 6 im\u00e1genes de rostros para la secci\u00f3n ‘Testimonios'.\n <\/li>\n<\/ul>\n<\/li>\n
- \n
\n Vaya a sutilpatterns.com<\/a> y descargue el patr\u00f3n ‘brickwall' para la secci\u00f3n ‘Testimonios'.\n <\/p>\n<\/li>\n
- \n
\n A medida que contin\u00fae con este tutorial, le dir\u00e9 c\u00f3mo descargar las fuentes requeridas (se puede hacer dentro de Muse).\n <\/p>\n<\/li>\n
- \n
\n Utilice el texto ficticio de lipsum.com<\/a>.\n <\/p>\n<\/li>\n<\/ul>\n
\n \u00a1EMPECEMOS!\n<\/p>\n
\n Preparaci\u00f3n del espacio de trabajo y configuraci\u00f3n del encabezado\n<\/p>\n
\n 1 Cree un nuevo sitio yendo a Archivo > Nuevo sitio (Ctrl+N) y coloque los valores como se muestra a continuaci\u00f3n. No olvide marcar la casilla de verificaci\u00f3n que dice ‘Pie de p\u00e1gina adhesivo'. Haga clic en Aceptar y tendr\u00e1 el modo PLAN. Haga doble clic en A-Master ubicado en la parte inferior en un \u00e1rea gris. Crear\u00e1s todo en esta p\u00e1gina maestra.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b3f0862.webp\")
<\/a><\/p>\n\n 2 Elija la herramienta de texto de la caja de herramientas ubicada en el lado izquierdo de la ventana de la aplicaci\u00f3n. Haga clic y arrastre en el lienzo o la p\u00e1gina para crear un cuadro de texto. Vaya al panel de texto (Ctrl+T), en el men\u00fa desplegable de fuentes, busque Fuentes web y elija ‘Agregar fuentes web' y descargue las siguientes fuentes:\n<\/p>\n
- \n
- rametto uno\n <\/li>\n
- Pedazo\n <\/li>\n
- Questrial\n <\/li>\n
- raleway\n <\/li>\n
- Noble\n <\/li>\n
- PT Sin\n <\/li>\n
- ubuntu\n <\/li>\n
- Langosta\n <\/li>\n<\/ul>\n
\n Despu\u00e9s de descargar estas fuentes, elimine este cuadro de texto.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b5afeaf.webp\")
<\/a><\/p>\n\n 3 Vaya al panel Capas ubicado en el lado derecho de la ventana de la aplicaci\u00f3n. Si no est\u00e1 all\u00ed, vaya al men\u00fa Ventana > Capas. Ver\u00e1s all\u00ed una capa llamada Capa 1 (color azul). Esta es la capa predeterminada y todo lo que crea o coloca en el lienzo va all\u00ed. Haga doble clic en esta capa y as\u00edgnele el nombre ‘Encabezado'.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b8cad84.webp\")
<\/a><\/p>\n\n 4 Dentro del panel de capas, haga clic en el peque\u00f1o \u00edcono de papel con borde doblado ubicado en la esquina inferior derecha. Al hacer clic en esto, se crear\u00e1 una nueva capa con color rojo. Nuevamente, haga doble clic en esta capa y c\u00e1mbiele el nombre a ‘Contenido'.\n<\/p>\n
\n 5 Haga clic y arrastre esta capa de contenido y col\u00f3quela debajo de la capa de encabezado. Hemos hecho esto porque queremos que nuestro encabezado est\u00e9 por encima de todo.\n<\/p>\n
\n 6 Seleccione la capa de encabezado y contraiga el panel de capas.\n<\/p>\n
\n 7 Seleccione la herramienta Rect\u00e1ngulo de la caja de herramientas o presione ‘m' en el teclado.\n<\/p>\n
\n 8 Dibuje un peque\u00f1o rect\u00e1ngulo en el lienzo y aseg\u00farese de que el color de su borde sea azul, lo que indica que este objeto est\u00e1 dentro de la capa de encabezado.\n<\/p>\n
\n 9 Vaya al panel Transformar ubicado en la parte superior derecha de la ventana de la aplicaci\u00f3n. Deje el ancho (W) y coloque 50 dentro del campo de altura (H) y presione enter. (No se preocupe por los valores X e Y).\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235bc3e592.webp\")
<\/a><\/p>\n\n 10 En la parte superior de la p\u00e1gina, ver\u00e1 dos l\u00edneas de color azul (que se muestran en la captura de pantalla a continuaci\u00f3n). Estos se llaman ‘gu\u00edas'. Cuando pasa el cursor sobre la primera gu\u00eda, dice \u00abParte superior de la p\u00e1gina, arrastre para ajustar el relleno sobre la p\u00e1gina\u00bb y la otra dice \u00abEncabezado, arrastre para ajustar la posici\u00f3n\u00bb. Establecer estas gu\u00edas desde el principio es muy importante.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235bf23e62.webp\")
<\/a><\/p>\n\n 11 Ahora, como hemos creado un rect\u00e1ngulo de H=50, haga clic, mantenga presionada y arrastre la gu\u00eda de ‘parte superior de la p\u00e1gina' hasta que el cuadro que aparecer\u00e1 debajo una vez que comience a arrastrar diga Y=50.\n<\/p>\n
\n 12 Del mismo modo, arrastre la gu\u00eda del encabezado de arriba a la gu\u00eda de la parte superior de la p\u00e1gina hasta que diga Y=0. Hemos hecho esto para configurar nuestra \u00e1rea de encabezado. (Es posible que desee experimentar colocando estas gu\u00edas en diferentes posiciones para obtener diferentes resultados, pero es bueno por ahora).\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c2cc503.webp\")
<\/a><\/p>\n\n 13 Seleccione el rect\u00e1ngulo que acabamos de crear, arr\u00e1strelo al \u00e1rea del encabezado para que encaje correctamente.\n<\/p>\n
\n 14 Ahora, tenemos que aumentar el ancho del rect\u00e1ngulo y hacerlo al 100% para que el encabezado se vea perfecto en todos los tama\u00f1os de pantalla. Expanda el rect\u00e1ngulo a ambos bordes y aseg\u00farese de que encaje con los bordes. Aparecer\u00e1 una gu\u00eda naranja que asegura que el objeto se ha ajustado. A medida que aumenta el ancho del rect\u00e1ngulo, la ventana emergente dir\u00e1 W=100 % o W=1160 cuando llegue al borde.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c5f0fa0.webp\")
<\/a><\/p>\n\n 15 Mantenga el rect\u00e1ngulo seleccionado, haga clic en la palabra Rellenar debajo del men\u00fa de la aplicaci\u00f3n y configure las opciones de la siguiente manera. Elija el primer color como Negro y el segundo color: R=37, G=37, B=37.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c90d279.webp\")
<\/a><\/p>\n\n 16 Vaya a Archivo > Guardar sitio. Guarda tu sitio cada vez que hagas un cambio.\n<\/p>\n
\n 17 Cree un cuadro de texto y escriba \u2013 ‘example.com' y cambie su formato como se muestra a continuaci\u00f3n.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235cc3e77d.webp\")
<\/a><\/p>\n\n 18 Ajuste el tama\u00f1o del cuadro de texto para que todo el texto aparezca en una l\u00ednea. Seleccione este cuadro de texto y arr\u00e1strelo sobre el rect\u00e1ngulo negro. Alin\u00e9elo con el centro vertical del rect\u00e1ngulo (una l\u00ednea azul le indicar\u00e1 cu\u00e1ndo est\u00e1 centrado) y aj\u00fastelo al borde izquierdo como se muestra a continuaci\u00f3n.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235cebd543.webp\")
<\/a><\/p>\n\n 19 Cree un cuadro de texto y escriba \u2013 ‘Inicio'. Cambie su formato de la siguiente manera. Ajuste el ancho y la altura del cuadro de texto en consecuencia. Tambi\u00e9n puede hacer esto desde el panel de transformaci\u00f3n. El m\u00edo es W=52, H=17.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d124081.webp\")
<\/a><\/p>\n\n 20 Copie y pegue este cuadro de texto y escriba ‘Servicios' en el nuevo. Ajuste el ancho. Arrastre y coloque este cuadro de texto junto a casa con una diferencia muy inferior entre los dos. Una vez m\u00e1s, las gu\u00edas le ayudar\u00e1n en la alineaci\u00f3n adecuada.\n<\/p>\n
\n 21 Copie y pegue este cuadro de texto cuatro veces m\u00e1s y escriba: Por qu\u00e9 nosotros, Testimonios, Cont\u00e1ctenos y Bolet\u00edn. Coloque estos cuadros de texto uno por uno a la misma distancia junto a ‘servicios'.\n<\/p>\n
\n 22 Con la herramienta de selecci\u00f3n seleccionada y la tecla May\u00fas presionada, seleccione todos estos cuadros de texto uno por uno. Vaya al panel de texto, cambie el color a blanco. Elija el grupo de estos cuadros y col\u00f3quelo sobre el rect\u00e1ngulo del encabezado. (Verticalmente centrado y alineado con el borde de la p\u00e1gina del lado derecho). Este es nuestro Men\u00fa.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d30933a.webp\")
<\/a><\/p>\n\n 23 De nuevo, con la herramienta de selecci\u00f3n seleccionada y la tecla May\u00fas presionada, seleccione estos cuadros de texto, el rect\u00e1ngulo y el cuadro de texto example.com. En la parte superior derecha, ver\u00e1 una opci\u00f3n llamada Pin. Haga clic en su cuadro central superior para anclar estos elementos. Esto significa que, cuando el usuario se desplace por su sitio, este encabezado permanecer\u00e1 fijo en la parte superior. Es muy \u00fatil ya que el usuario no tendr\u00e1 que desplazarse hacia arriba solo para elegir otra opci\u00f3n.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d5928ff.webp\")
<\/a><\/p>\n\n 24 Vaya al panel Capas y bloquee la capa de encabezado. Esto se puede hacer haciendo clic dentro del cuadro a la izquierda del nombre de la capa. Cuando bloquea una capa o cualquier objeto, no afectar\u00e1 su apariencia, pero no podr\u00e1 seleccionar estos elementos a menos que los desbloquee. Hemos hecho esto para eliminar por completo las posibilidades de mover accidentalmente los elementos.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d843d05.webp\")
<\/a><\/p>\n\n 25 Seleccione la capa de contenido y contraiga el panel de capas.\n<\/p>\n
\n Establecer presentaci\u00f3n de diapositivas
\n<\/h3>\n\n 26 Vaya a la biblioteca de widgets ubicada en el lado derecho de la ventana de la aplicaci\u00f3n. Si no est\u00e1 all\u00ed, vaya al men\u00fa Ventana> elija Biblioteca de widgets. Expanda la secci\u00f3n ‘presentaciones de diapositivas' y seleccione ‘En blanco'. Haga clic y arrastre este objeto al lienzo. Aparecer\u00e1 una ventana negra con opciones de presentaci\u00f3n de diapositivas.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235db65202.webp\")
<\/a><\/p>\n\n 27 Aseg\u00farese de que las opciones est\u00e9n configuradas como se muestra en la imagen a continuaci\u00f3n. En la secci\u00f3n de partes en la parte inferior, desmarque las casillas de verificaci\u00f3n que dicen Anterior, Siguiente, Subt\u00edtulos y Contador. No necesitamos ninguno de estos.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235deacba4.webp\")
<\/a><\/p>\n\n 28 Haga clic en cualquier parte del lienzo para que desaparezca esta ventana emergente. Ahora, haga clic con cuidado dentro de la presentaci\u00f3n de diapositivas. Al hacer clic una vez, ver\u00e1 que se ha escrito ‘Presentaci\u00f3n de diapositivas' en el ‘tipo de \u00e1rea de selecci\u00f3n actual'. Se encuentra en la esquina superior izquierda debajo del men\u00fa de la aplicaci\u00f3n. Esta \u00e1rea le permite ver lo que ha seleccionado. Es una caracter\u00edstica muy \u00fatil cuando el dise\u00f1o se complica. Vuelva a hacer clic y notar\u00e1 que la descripci\u00f3n dice \u00abImagen destacada\u00bb.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e121ebd.webp\")
<\/a><\/p>\n\n 29 Aumente el ancho de la imagen del h\u00e9roe manualmente expandi\u00e9ndola desde el medio. Aj\u00fastelo tanto a los bordes de la p\u00e1gina (para que tenga el 100 % del ancho) como a la parte inferior del rect\u00e1ngulo del encabezado, como se muestra a continuaci\u00f3n.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e337282.webp\")
<\/a><\/p>\n\n 30 Ir al panel de transformaci\u00f3n y poner H=500.\n<\/p>\n
\n 31 Vuelva a abrir las opciones de presentaci\u00f3n de diapositivas haciendo clic en el peque\u00f1o c\u00edrculo azul con un rect\u00e1ngulo blanco dentro (se encuentra en la esquina superior derecha de la presentaci\u00f3n de diapositivas).\n<\/p>\n
\n 32 Haga clic en el icono de la carpeta junto a la opci\u00f3n ‘Agregar im\u00e1genes…', busque las im\u00e1genes que descargamos para la presentaci\u00f3n de diapositivas. Seleccione los cuatro y haga clic en abrir.\n<\/p>\n
\n 33 Vaya a Archivo > elija ‘Vista previa de la p\u00e1gina en el navegador' o Ctrl+Shift+E y vea c\u00f3mo funcionar\u00e1 su presentaci\u00f3n de diapositivas una vez que el sitio est\u00e9 activo. Te recomiendo que memorices los atajos de teclado que estoy usando en este tutorial. Hacer esto te ayudar\u00e1 a acelerar tu proceso de dise\u00f1o.\n<\/p>\n
\n Creaci\u00f3n de la secci\u00f3n ‘Servicios'
\n<\/h3>\n\n 34 Ahora que hemos configurado nuestro encabezado y presentaci\u00f3n de diapositivas, es hora de crear secciones para cada elemento que agregamos a nuestro men\u00fa. Comencemos con ‘servicios'. Cree un cuadro de texto y escriba servicios en \u00e9l (todas las letras peque\u00f1as) y cambie su formato de la siguiente manera.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e4de8f0.webp\")
<\/a><\/p>\n\n 35 Haga doble clic dentro de este cuadro de texto y seleccione solo la letra ‘I'. Cambia su fuente a ‘Chunk' y deja todo igual. Ajuste la altura de este cuadro de texto. Cuando disminuya su altura, aparecer\u00e1 una l\u00ednea discontinua en un punto determinado y el cuadro no se acortar\u00e1. No reduzca el tama\u00f1o despu\u00e9s de eso. Esta es la altura m\u00e1s baja posible con este tama\u00f1o de fuente.\n<\/p>\n
\n 36 Con el cuadro de texto seleccionado, vaya al panel de transformaci\u00f3n y establezca el \u00e1ngulo de rotaci\u00f3n en -90 grados (90 grados negativos).\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e695d45.webp\")
<\/a><\/p>\n\n 37 Mueva el cuadro de texto al lado izquierdo del lienzo como se muestra a continuaci\u00f3n.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e88e04c.webp\")
<\/a><\/p>\n\n 38 Es posible que desee alejar un poco el zoom para ver todo el contenido a la vez o para ajustar los objetos correctamente. Para hacer esto, intente escribir diferentes valores (menos del 100%) en la secci\u00f3n de nivel de zoom en la parte superior. Despu\u00e9s de escribir el valor, presione enter.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235eab2968.webp\")
<\/a><\/p>\n\n 39 Vaya a Archivo > elija ‘Lugar'. Seleccione la primera imagen que descargamos para nuestra secci\u00f3n de servicios. Haga clic en abrir.\n<\/p>\n
\n 40 El cursor cambiar\u00e1 su apariencia a un lugar arma cargada con una imagen. Haga clic en el lienzo para colocarlo. Mu\u00e9valo y col\u00f3quelo de modo que se alinee con la parte superior del cuadro de texto \u00abservicios\u00bb.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235ed9df42.webp\")
<\/a><\/p>\n\n 41 Copia esta imagen y p\u00e9gala dos veces. Seleccione estas im\u00e1genes pegadas una por una y alin\u00e9elas a la misma distancia que la primera imagen.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f1531ed.webp\")
<\/a><\/p>\n\n 42 Selecciona la segunda imagen, haz clic derecho sobre ella y elige ‘reemplazar imagen' (es la \u00faltima opci\u00f3n). Busque la segunda imagen y haga clic en abrir. Reemplace la tercera imagen tambi\u00e9n.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f44fa27.webp\")
<\/a><\/p>\n\n 43 Cree cuadros de texto para la informaci\u00f3n sobre los servicios y aplique el formato para encabezados y p\u00e1rrafos como se escribe a continuaci\u00f3n. Las gu\u00edas le ayudar\u00e1n a alinearlos correctamente.\n<\/p>\n
- \n
- \n Para encabezados:<\/strong> fuente: Raleway Bold, tama\u00f1o = 20, color: negro, alineado a la izquierda y 100% inicial.\n <\/li>\n
- \n Para P\u00e1rrafos:<\/strong> Fuente: Questrial, Tama\u00f1o=15, Color: R=67 G=67 B=67, Alineado a la izquierda y 120% de interlineado.\n <\/li>\n<\/ul>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f67e871.webp\")
<\/a><\/p>\n\n 44 Coloque tres im\u00e1genes m\u00e1s como lo hicimos en los pasos anteriores y, de manera similar, cree un texto de descripci\u00f3n para ellas. Deber\u00edas tener el siguiente resultado.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f8b3f61.webp\")
<\/a><\/p>\n\n Resultado Final Secci\u00f3n ‘Servicios'
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235fb6b3b2.webp\")
<\/a><\/p>\n\n Creaci\u00f3n de la secci\u00f3n ‘Por qu\u00e9 nosotros'
\n<\/h3>\n\n 45 La siguiente es la secci\u00f3n ‘Por qu\u00e9 nosotros'. Este es un poco complicado. Tenga cuidado al seleccionar los objetos. Primero, crea un rect\u00e1ngulo de 100% de ancho y H=996. Rell\u00e9nalo con un color (R=47, G=48, B=55). Haga clic derecho en este rect\u00e1ngulo> Organizar> elija ‘enviar hacia atr\u00e1s' (no enviar hacia atr\u00e1s).\n<\/p>\n
\n 46 Ampl\u00ede su \u00e1rea de trabajo haciendo clic y arrastrando la gu\u00eda de ‘parte inferior de la p\u00e1gina' para que tenga suficiente espacio para crear contenido que se colocar\u00e1 en este rect\u00e1ngulo que acabamos de crear.\n<\/p>\n
\n 47 Despl\u00e1cese hacia abajo hasta el espacio vac\u00edo en blanco y haga otro rect\u00e1ngulo de W=351 y H=351. Rell\u00e9nalo con color blanco y sin trazo.\n<\/p>\n
\n 48 Vaya a la opci\u00f3n ‘radio de esquina' (se encuentra junto al trazo debajo del men\u00fa de la aplicaci\u00f3n). Haz clic en todas las esquinas para redondearlas y pon 500 en la casilla de al lado.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235fd21bf3.webp\")
<\/a><\/p>\n\n 49 Tendr\u00e1s un c\u00edrculo. Arrastra este c\u00edrculo al rect\u00e1ngulo y aj\u00fastalo de la siguiente manera. Junto al radio de la esquina, hay una opci\u00f3n llamada ‘Opacidad'. Con el c\u00edrculo seleccionado, pon 14 en esta casilla.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235ff30452.webp\")
<\/a><\/p>\n\n 50 Cree un cuadro de texto y escriba \u2013 por qu\u00e9 nosotros (todo peque\u00f1o). Cambie su fuente a Rammetto One, tama\u00f1o = 100, Color R = 241 G = 244 B = 247, 100% de avance y alinee el centro. Coloque este cuadro de texto dentro del c\u00edrculo y alin\u00e9elo correctamente.\n<\/p>\n
\n 51 Ahora crearemos las l\u00edneas discontinuas. Haz un rect\u00e1ngulo de W=9 y H=9, sin relleno. Haga clic en la palabra ‘trazo' junto al relleno. Elige el color R=241 G=244 B=247. Haga clic en el icono de la cadena para romperlo y coloque ‘1' en el peso del trazo inferior.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236015d3b8.webp\")
<\/a><\/p>\n\n 52 Copie este rect\u00e1ngulo de trazo de un lado y p\u00e9guelo varias veces. Col\u00f3quelos en una l\u00ednea (acerque un poco con la herramienta de zoom si le resulta dif\u00edcil ver estos rect\u00e1ngulos). Una vez que obtenga la longitud deseada de su l\u00ednea discontinua, seleccione todos estos rect\u00e1ngulos, haga clic derecho y elija ‘Grupo'. Copie y pegue este grupo para otras l\u00edneas discontinuas.\n<\/p>\n
\n 53 Para l\u00edneas discontinuas inclinadas, intente poner diferentes \u00e1ngulos de rotaci\u00f3n en el panel de transformaci\u00f3n. He usado 150 y 30 grados. Deber\u00e1 eliminar algunos rect\u00e1ngulos de este grupo para tener longitudes m\u00e1s cortas. Ajuste estas l\u00edneas cerca del c\u00edrculo como se muestra a continuaci\u00f3n.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823602da73a.webp\")
<\/a><\/p>\n\n 54 Ahora agregaremos m\u00e1s texto para n\u00fameros, encabezados y descripciones. Use la siguiente configuraci\u00f3n para cada uno de ellos y ajuste estos cuadros de texto como se muestra a continuaci\u00f3n.\n<\/p>\n
- \n
- \n Para n\u00fameros:<\/strong> Font=Rammetto One, Color: R=196 G=214 B=193, alineado al centro y 100% interlineado, tama\u00f1o: 200 (para el n\u00famero ‘1'), 160 (para los n\u00fameros ‘2' y ‘3') y 120 (para los n\u00fameros ‘4' y ‘5').\n <\/li>\n
- \n Para encabezados:<\/strong> fuente = Raleway negrita, tama\u00f1o = 18, color: blanco, alineado al centro y 100 % inicial.\n <\/li>\n
- \n Para P\u00e1rrafos:<\/strong> Fuente=Questrial, Tama\u00f1o=16, Color: R=241 G=244 B=247, Centrado y 120% de interlineado.\n <\/li>\n<\/ul>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823605a97a7.webp\")
<\/a><\/p>\n\n Resultado final de la secci\u00f3n ‘Por qu\u00e9 nosotros'
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360890068.webp\")
<\/a><\/p>\n\n Creaci\u00f3n de la secci\u00f3n ‘Testimonios'
\n<\/h3>\n\n 55 Nuevamente, cree algo de espacio para trabajar arrastrando hacia abajo la gu\u00eda de la parte inferior de la p\u00e1gina. Haz un rect\u00e1ngulo de 100% de ancho y H=486.\n<\/p>\n
\n 56 Con el rect\u00e1ngulo seleccionado, haga clic en la palabra ‘Rellenar' y haga clic en ‘Agregar imagen' junto a la opci\u00f3n de imagen. Busque la imagen del patr\u00f3n de pared de ladrillo que descargamos. En la opci\u00f3n Ajuste, elija ‘Mosaico' para llenar todo el rect\u00e1ngulo con esta textura.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360b46ae7.webp\")
<\/a><\/p>\n\n 57 Despl\u00e1cese hacia abajo hasta el espacio vac\u00edo y cree un cuadro de texto de tama\u00f1o W=406, H=289 con la ayuda del panel de transformaci\u00f3n. Escriba – ‘lo que otros tienen que decir' (todo peque\u00f1o). Cambie su fuente a Rammetto One, tama\u00f1o = 70, alinee a la izquierda, valores de color R = 37 G = 37 B = 37 e interlineado = 100%.\n<\/p>\n
\n 58 Con este cuadro de texto seleccionado, haga clic en la palabra trazo, apl\u00edquele un trazo derecho de peso uno y de color negro. Arrastre este cuadro de texto y col\u00f3quelo sobre el rect\u00e1ngulo con patr\u00f3n de pared de ladrillo.\n<\/p>\n
\n 59 El siguiente paso es agregar testimonios de clientes. Para esto, usaremos las im\u00e1genes vectoriales de cara redonda que descargamos de freepik.com. Nuevamente, baje al espacio vac\u00edo en blanco para que pueda personalizar su composici\u00f3n correctamente.\n<\/p>\n
\n 60 Vaya a la biblioteca de Widgets y arrastre ‘En blanco' desde la secci\u00f3n de composiciones al lienzo. Haga clic en el signo m\u00e1s para agregar tres activadores m\u00e1s. Seleccione cuidadosamente el primer disparador y aseg\u00farese de su selecci\u00f3n con la ayuda del \u00e1rea de selecci\u00f3n actual que dice disparador. Y justo al lado, hay una opci\u00f3n llamada ‘Activo'. Haga clic aqu\u00ed para expandir. Seleccione el estado ‘Normal' y elija ‘sin relleno' y ‘sin trazo' para este estado. Repita esto para cada estado que sea Rollover, Mouse Down y Active. Vaya al panel de transformaci\u00f3n con el primer disparador seleccionado y ponga W=10, H=10.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360de4579.webp\")
<\/a><\/p>\n\n 61 Repetir el paso anterior para cada disparador que tengamos. Esto significa que no aplique relleno ni trazo para cada estado y transforme los disparadores a un tama\u00f1o de 10 x 10. Mueva los gatillos m\u00e1s cerca uno del otro.\n<\/p>\n
\n 62 Ahora. Personalizaremos los objetivos para cada uno de estos disparadores. El rect\u00e1ngulo grande que est\u00e1 viendo es el objetivo. Seleccione el primer activador y seleccione su estado normal en el panel de estados. Despu\u00e9s de eso, seleccione el objetivo para este disparador y no aplique relleno ni trazo para cada estado. Luego ve al panel de transformaci\u00f3n y haz el objetivo de W=360, H=370.\n<\/p>\n
\n 63 Repita el paso anterior para cada objetivo. Solo aseg\u00farese de seleccionar primero el activador, llevarlo al estado normal, luego seleccionar el objetivo respectivo con el estado normal y luego aplicar sin relleno ni trazo. No necesitar\u00e1 cambiar el tama\u00f1o de cada objetivo. Solo hazlo por uno y se aplicar\u00e1 a todos.\n<\/p>\n
\n 64 Ahora, comenzaremos a agregar contenido a esta composici\u00f3n. Vaya a Archivo > Colocar y abra la imagen de la primera cara y col\u00f3quela fuera de la composici\u00f3n. Arrastra esta imagen y col\u00f3cala dentro de la composici\u00f3n ahora. Ver\u00e1s que aparecer\u00e1 un c\u00edrculo azul en la esquina superior derecha que indica que esta imagen ahora es parte de la composici\u00f3n.\n<\/p>\n
\n 65 Cree tres cuadros de texto: uno para el nombre de la persona, otro para su designaci\u00f3n y otro para la declaraci\u00f3n o revisi\u00f3n. Aplique el formato como est\u00e1 escrito a continuaci\u00f3n y coloque estos cuadros de texto dentro de la composici\u00f3n. Solo aseg\u00farate de que cada uno de ellos tenga un c\u00edrculo azul en la esquina.\n<\/p>\n
- \n
- \n Para el nombre de la persona:<\/strong> Fuente: cursiva mediana Nobile, tama\u00f1o = 18, color: R = 37 G = 37 B = 37, alineaci\u00f3n central y 100 % de interlineado.\n <\/li>\n
- \n Para Designaci\u00f3n:<\/strong> Fuente: Nobile, tama\u00f1o=15, Color: R=37 G=37 B=37, alineado al centro y 100% interlineado.\n <\/li>\n
- \n Para declaraciones (con comillas invertidas):<\/strong> Fuente: PT Sans Italic, tama\u00f1o = 18, color: R = 69 G = 64 B = 68, alineado al centro y 100% interlineado.\n <\/li>\n<\/ul>\n
\n 66 Con la imagen de la cara seleccionada, aplica trazo de peso 4 en cada lado, color: blanco, redondea todas las esquinas y aumenta el radio hasta que envuelva la imagen. He usado 100 como radios de esquina.\n<\/p>\n
\n 67 Vaya a ‘Efectos' (ubicado junto a la opci\u00f3n de esquinas redondeadas) y marque la casilla de verificaci\u00f3n ‘sombra'. Ponga los valores como; Color=Negro, Opacidad=37%, Desenfoque=12, \u00c1ngulo=78 y Distancia=5.\n<\/p>\n
\n 68 Repita los pasos anteriores (del 64 al 67) para agregar contenido a cada destino y guarde los cambios (Ctrl+S). Ponga esta composici\u00f3n sobre el rect\u00e1ngulo con patr\u00f3n de pared de ladrillo.\n<\/p>\n
\n 69 Ahora, seleccione toda la composici\u00f3n (aseg\u00farese con el \u00e1rea de selecci\u00f3n actual) y expanda sus opciones haciendo clic en el peque\u00f1o c\u00edrculo azul. Configure las opciones como se muestra a continuaci\u00f3n. Presione Ctrl+Shift+E y vea si funciona bien.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361123532.webp\")
<\/a><\/p>\n\n 70 Deber\u00eda tener el siguiente resultado.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361448e2e.webp\")
<\/a><\/p>\n\n Resultado Final de la Secci\u00f3n ‘Testimonios'
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823618421c8.webp\")
<\/a><\/p>\n\n Creaci\u00f3n de la secci\u00f3n ‘Cont\u00e1ctenos'
\n<\/h3>\n\n 71 La siguiente secci\u00f3n es Cont\u00e1ctenos. Agregaremos una imagen de fondo, un formulario y algunos cuadros de texto en esta secci\u00f3n. Primero, haz un rect\u00e1ngulo de 100% de ancho y H=692. Rell\u00e9nelo con una imagen que hayamos descargado para esta secci\u00f3n y elija ‘escala para llenar' en Ajuste. Cambia su opacidad al 72%.\n<\/p>\n
\n 72 Haga otro rect\u00e1ngulo del mismo ancho y alto y rell\u00e9nelo con un degradado. Ponga los valores de gradiente como; Opacidad=90% a 46%, Color: Negro a R=69 G=64 B=68, Punto Focal=66%, Direcci\u00f3n: Horizontal y Tama\u00f1o: autom\u00e1tico. Coloque este rect\u00e1ngulo sobre la imagen y aseg\u00farese de que encaje con todos los bordes.\n<\/p>\n
\n 73 Ir a la biblioteca de widgets. En formularios, seleccione ‘contacto simple' y arr\u00e1strelo al lienzo. Aparecer\u00e1 una ventana con opciones de formulario. Coloque el nombre del formulario: Formulario de contacto, Correo electr\u00f3nico a: ingrese su direcci\u00f3n de correo electr\u00f3nico en la que desea recibir la informaci\u00f3n ingresada por los visitantes, Despu\u00e9s de enviar: seleccione ‘permanecer en la p\u00e1gina actual'. La \u00faltima opci\u00f3n es ‘Editar juntos'. Aseg\u00farate de que est\u00e9 marcado. De esta manera, deber\u00e1 realizar cambios solo en un campo y se aplicar\u00e1n a todos. Haga clic en cualquier parte del lienzo para que desaparezca el cuadro de opciones.\n<\/p>\n
\n 74 Seleccione el formulario. Haga clic en la etiqueta ‘Nombre' y haga clic nuevamente hasta que vea ‘Etiqueta' escrito en el \u00e1rea de selecci\u00f3n actual. Presiona eliminar. Repita esto para las etiquetas de mensajes y correos electr\u00f3nicos y elim\u00ednelos.\n<\/p>\n
\n 75 Seleccione el formulario nuevamente y seleccione el primer campo de formulario que dice ‘Ingresar nombre' hasta que vea ‘Entrada de texto' en el \u00e1rea de selecci\u00f3n actual. Aplique sin relleno y trazo inferior (peso uno y color blanco) para cada estado, desde Vac\u00edo hasta Foco. Para el estado de error, seleccione sin relleno y trazo inferior de color rojo con peso 1.\n<\/p>\n
\n 76 Despu\u00e9s de eso, con el campo de correo electr\u00f3nico seleccionado> elija su estado vac\u00edo nuevamente y personalice la fuente y el color del texto para cada estado como se escribe a continuaci\u00f3n.\n<\/p>\n
- \n
- \n Para estado vac\u00edo, no vac\u00edo y foco:<\/strong> Fuente: Questrial, tama\u00f1o = 14, color: blanco, alineado a la izquierda, 100% inicial y sin cursiva.\n <\/li>\n
- \n Para el estado de rollover:<\/strong> simplemente cambie el color del texto a R=196 G=196 B=196 y sin cursiva.\n <\/li>\n
- \n Para estado de error:<\/strong> cambie el color del texto a rojo y sin cursiva.\n <\/li>\n<\/ul>\n
\n 77 Haga clic y seleccione el bot\u00f3n Enviar. Elija su estado normal, redondee todas las esquinas con 40 radios y aumente su ancho como se muestra en la captura de pantalla a continuaci\u00f3n. Cambie su fuente a Raleway Bold, tama\u00f1o = 20, alineado al centro, color: R = 241 G = 244 B = 247, encabezado: ajuste el texto ‘enviar' en el centro del bot\u00f3n aumentando este valor (he usado 130%) .\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361be815c.webp\")
<\/a><\/p>\n\n 78 Para sus estados de rollover y rat\u00f3n presionado, cambie el color del trazo y el color del texto a gris (R=127 G=127 B=127). Finalmente, para su estado de ‘env\u00edo en curso', cambie el trazo y el color del texto a azul cielo (R=41 G=171 B=226).\n<\/p>\n
\n 79 Cuando seleccione el estado ‘enviar en curso' para este bot\u00f3n de env\u00edo, ver\u00e1 que hay otro cuadro de texto que dice ‘enviando formulario…'. Seleccione esta casilla y elija su estado ‘enviar en curso'. Cambie la fuente a Questrial, tama\u00f1o = 14, color: gris, alineado al centro y sin cursiva. Elija su estado ‘enviar con \u00e9xito' y cambie el color del texto a azul cielo (sin cursiva). Elija su estado ‘enviar error' y cambie el color del texto a rojo (sin cursiva). El formulario de contacto est\u00e1 listo.\n<\/p>\n
\n 80 Haz dos cuadros de texto. Escriba \u2013 cont\u00e1ctenos y en su segunda l\u00ednea, escriba ‘todos los campos son obligatorios'. Para el texto de contacto, use la fuente: Rammetto One, tama\u00f1o = 60, color: R = 241 G = 244 B = 247, interlineado = 100 % y alineado a la izquierda. Para el texto \u00abtodos los campos son obligatorios\u00bb, use la fuente: cursiva Nobile, tama\u00f1o = 26, color: R = 241 G = 244 B = 247, interlineado = 100% y alineado a la izquierda. Para este cuadro de texto, aplique un trazo inferior de peso 1 y color blanco.\n<\/p>\n
\n 81 Escriba alg\u00fan p\u00e1rrafo en el segundo cuadro de texto que creamos. Utilice fuente: PT Sans Italic, tama\u00f1o = 14, color: R = 241 G = 244 B = 247, interlineado = 120 %, alineado a la izquierda y espacio antes = 15.\n<\/p>\n
\n 82 Ponga estos cuadros de texto y el formulario en la imagen que colocamos. Aj\u00fastelos de la siguiente manera.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361dd708d.webp\")
<\/a><\/p>\n\n 83 Cree un cuadro de texto m\u00e1s para alguna informaci\u00f3n de contacto como la direcci\u00f3n de la oficina, el correo electr\u00f3nico y los n\u00fameros de tel\u00e9fono. Coloque este cuadro de texto en la imagen. Deber\u00edas tener el siguiente resultado.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361fd3a10.webp\")
<\/a><\/p>\n\n Resultado Final de la Secci\u00f3n ‘Cont\u00e1ctenos'
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236220ca76.webp\")
<\/a><\/p>\n\n Crear pie de p\u00e1gina
\n<\/h3>\n\n 84 La \u00faltima secci\u00f3n es el pie de p\u00e1gina. Hay tres gu\u00edas en la parte inferior, a saber: parte inferior de la p\u00e1gina, pie de p\u00e1gina y parte inferior del navegador. Lo que debe hacer ahora es asegurarse de que la gu\u00eda de la \u00abparte inferior de la p\u00e1gina\u00bb coincida con la parte inferior de la secci\u00f3n de contacto y que la gu\u00eda del \u00abpie de p\u00e1gina\u00bb coincida con la gu\u00eda de la \u00abparte inferior de la p\u00e1gina\u00bb. Despu\u00e9s de eso, puede arrastrar la gu\u00eda ‘parte inferior del navegador' hacia abajo para ajustar el espacio que necesita para el pie de p\u00e1gina.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236248fda2.webp\")
<\/a><\/p>\n\n 85 Crea dos rect\u00e1ngulos de 100% de ancho y H=168 para el primero y H=37 para el otro. Cambie el color de relleno del rect\u00e1ngulo grande a blanco y use R=47, G=48, B=55 para uno m\u00e1s corto.\n<\/p>\n
\n 86 Seleccione el primer rect\u00e1ngulo e intente colocarlo en el \u00e1rea del pie de p\u00e1gina. No ir\u00e1 all\u00ed. En cambio, la gu\u00eda de la parte inferior de la p\u00e1gina comenzar\u00e1 a expandirse hacia abajo. Para convertir este rect\u00e1ngulo en un elemento de pie de p\u00e1gina, marque la casilla de verificaci\u00f3n ‘Pie de p\u00e1gina' ubicada en el \u00e1rea superior derecha de la ventana de la aplicaci\u00f3n. Hazlo tambi\u00e9n para el segundo rect\u00e1ngulo.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823626e43d3.webp\")
<\/a><\/p>\n\n 87 Ahora coloque estos rect\u00e1ngulos en el \u00e1rea del pie de p\u00e1gina y aseg\u00farese de que el rect\u00e1ngulo grande est\u00e9 ligeramente por encima de la gu\u00eda del pie de p\u00e1gina. La parte inferior del rect\u00e1ngulo de color debe encajar con la parte inferior de la gu\u00eda del navegador. De lo contrario, ver\u00e1 un peque\u00f1o espacio en blanco despu\u00e9s del pie de p\u00e1gina que no se ve bien.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823629217b3.webp\")
<\/a><\/p>\n\n 88 Crea cuadros de texto para el pie de p\u00e1gina y escribe lo que quieras. Simplemente marque la casilla de verificaci\u00f3n ‘pie de p\u00e1gina' para los cuadros de texto que agregar\u00e1. He agregado un texto que contiene informaci\u00f3n sobre el descargo de responsabilidad y los derechos de autor.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382362b623c3.webp\")
<\/a><\/p>\n\n 89 La insignia ‘Hecho con Adobe Muse CC' se puede agregar desde la biblioteca de widgets en la secci\u00f3n social. Tambi\u00e9n puede agregar enlaces a su p\u00e1gina de Facebook, Twitter, Google+, LinkedIn, Pinterest, canal de YouTube o enlace de Vimeo.\n<\/p>\n
\n 90 El s\u00edmbolo de derechos de autor y muchos otros s\u00edmbolos que ve junto al texto Todos los derechos reservados se pueden agregar desde el panel \u00abGlifos\u00bb ubicado en el lado derecho de la ventana de la aplicaci\u00f3n. Si no est\u00e1 all\u00ed, vaya al men\u00fa Ventana> elija Glifos.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382362e4f736.webp\")
<\/a><\/p>\n\n Creaci\u00f3n de la secci\u00f3n ‘Bolet\u00edn'
\n<\/h3>\n\n 91 Hasta ahora, hemos dise\u00f1ado secciones para todos los elementos del men\u00fa menos uno y es ‘Bolet\u00edn'. Hagamos algo interesante con \u00e9l. Recuerde el s\u00edmbolo de la cruz que descargamos, se usar\u00e1 aqu\u00ed (est\u00e1 bien si no lo ha descargado, a\u00fan puede seguirlo). En primer lugar, seleccione el cuadro de texto Bolet\u00edn y anote su ancho y alto desde el panel de transformaci\u00f3n. El mio es 81 x 17.\n<\/p>\n
\n 92 Ahora, abra la biblioteca de widgets y arrastre ‘Lightbox Display' desde la secci\u00f3n de composiciones. Elimine los dos primeros disparadores (ubicados en la parte superior) y elimine todos los subt\u00edtulos (ubicados en la parte inferior). Haga que el tama\u00f1o del tercer activador sea el mismo que el del cuadro de texto del bolet\u00edn informativo, que es de 81 x 17. Cambie su relleno y trazo a ninguno para todos los estados.\n<\/p>\n
\n 93 Arrastre el cuadro de texto del bolet\u00edn y col\u00f3quelo dentro de este disparador de tal manera que todos los bordes del cuadro de texto coincidan con los bordes del disparador. Ahora arrastre este grupo y col\u00f3quelo nuevamente en el men\u00fa donde se coloc\u00f3 anteriormente. Lo que hemos hecho es que hemos aplicado un enlace al cuadro de texto del bolet\u00edn. Cuando el usuario haga clic en \u00e9l, el sitio web se desvanecer\u00e1 y aparecer\u00e1 el objetivo.\n<\/p>\n
\n 94 El siguiente paso es personalizar nuestro objetivo. Seleccione el \u00e1rea gris y aseg\u00farese de que el \u00e1rea de selecci\u00f3n actual diga \u00abObjetivo\u00bb. Tendr\u00e1s que hacer clic tres veces para seleccionarlo. Cambie el relleno y el trazo a ninguno para todos sus estados.\n<\/p>\n
\n 95 Agregue dos cuadros de texto y un formulario de contacto simple (elimine sus campos de nombre y mensaje y mantenga solo el campo de correo electr\u00f3nico). Arr\u00e1strelos dentro de esta composici\u00f3n y aseg\u00farese de que todos tengan un c\u00edrculo azul en las esquinas.\n<\/p>\n
\n 96 Personaliza el formulario como hicimos en la secci\u00f3n de contacto. Deber\u00edas tener el siguiente resultado. Para el campo de texto \u00abMant\u00e9ngase en contacto\u00bb, use fuente: Langosta, tama\u00f1o = 40, color: blanco, alineado al centro y 100 % a la izquierda. Para el texto de descripci\u00f3n debajo, use la fuente: Ubuntu Light Italic, tama\u00f1o = 14, color: blanco, alineado al centro y 120% de interlineado. Cambie el texto del bot\u00f3n de env\u00edo a ‘Suscribirse'.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823631ea47b.webp\")
<\/a><\/p>\n\n 97 Ahora seleccione el bot\u00f3n de cerrar, mu\u00e9valo y col\u00f3quelo en la esquina superior derecha de esta pantalla de caja de luz como se muestra a continuaci\u00f3n. Haga clic dentro de \u00e9l hasta que vea ‘Etiqueta' escrito en el \u00e1rea de selecci\u00f3n actual. Eliminar la etiqueta.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363507e52.webp\")
<\/a><\/p>\n\n 98 Cambie el relleno y el trazo de este bot\u00f3n de cierre a ninguno para todos los estados y haga que sea W=40 y H=40. Vaya a Relleno > Agregar imagen y busque la imagen cruzada. Elija ‘escala para ajustar' en la opci\u00f3n de ajuste.\n<\/p>\n
\n 99 Haga clic en Bolet\u00edn y ver\u00e1 un c\u00edrculo azul en su esquina. Haga clic en \u00e9l y aseg\u00farese de que las opciones est\u00e9n configuradas de la siguiente manera.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236383b97c.webp\")
<\/a><\/p>\n\n Resultado Final Secci\u00f3n ‘Newsletter'
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363ae64bc.webp\")
<\/a><\/p>\n\n Creaci\u00f3n de hiperv\u00ednculos
\n<\/h3>\n\n 100 La tarea final que queda es aplicar enlaces a cada secci\u00f3n. Para hacer esto, elija la opci\u00f3n ‘anclaje de enlace' ubicada en el \u00e1rea superior central o presione la letra ‘a' en su teclado. Ver\u00e1s que el cursor cambia su apariencia a un arma cargada con un ancla de enlace.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363d80277.webp\")
<\/a><\/p>\n\n 101 Cuando haga clic en el lienzo para colocar esto, aparecer\u00e1 un cuadro de di\u00e1logo que le permitir\u00e1 cambiar el nombre de un ancla.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363feb1d6.webp\")
<\/a><\/p>\n\n 102 Cree anclas de enlace para cada secci\u00f3n que hemos dise\u00f1ado, es decir, Inicio, Servicios, Por qu\u00e9 nosotros, Testimonios y Cont\u00e1ctenos. Coloque los anclajes en la parte superior de cada secci\u00f3n. El ancla de inicio se muestra a continuaci\u00f3n como ejemplo. Colocar estos anclajes es un paso importante y debe hacerse con cuidado. Cuando el usuario haga clic en un enlace en particular, el sitio web se desplazar\u00e1 a la posici\u00f3n donde se coloc\u00f3 el ancla.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823642ca0c4.webp\")
<\/a><\/p>\n\n 103 Ahora aplicaremos los enlaces. Para hacer esto, seleccione el cuadro de texto ‘Inicio'. Vaya a la opci\u00f3n ‘Hiperv\u00ednculos' (ubicada en la parte superior), haga clic en la peque\u00f1a flecha hacia abajo para expandir la lista. Aqu\u00ed puedes ver todos los anclajes que acabamos de colocar. Vinc\u00falelo al ancla ‘Inicio'. Repita este paso para otros cuadros de texto, excepto Bolet\u00edn, ya que le hemos aplicado una visualizaci\u00f3n de cuadro de luz.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364694c80.webp\")
<\/a><\/p>\n\n Resultado final despu\u00e9s de crear hiperv\u00ednculos
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364a29ed4.webp\")
<\/a><\/p>\n\n Toques finales: cambiar las propiedades de la p\u00e1gina y agregar Favicon
\n<\/h3>\n\n 104 Dentro del modo Plan, haga clic con el bot\u00f3n derecho en la p\u00e1gina de inicio y elija ‘Propiedades de la p\u00e1gina'. Aparecer\u00e1 un cuadro de di\u00e1logo. Elija la pesta\u00f1a ‘Opciones' y debajo del nombre de la p\u00e1gina, ponga – ‘Bienvenido a ejemplo.com' y haga clic en Aceptar. Este es el texto que aparecer\u00e1 en la parte superior de la ventana del navegador.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364d02485.webp\")
<\/a><\/p>\n\n 105 Vaya a Archivo > Propiedades del sitio. En la pesta\u00f1a Dise\u00f1o, la \u00faltima opci\u00f3n es ‘Favicon'. Cuando pasa el cursor sobre \u00e9l, aparecer\u00e1 una ventana emergente que describe qu\u00e9 es un favicon y cu\u00e1l debe ser el tama\u00f1o \u00f3ptimo. Es bueno agregar un favicon, ya que ayuda a que su marca se destaque y tambi\u00e9n sirve para ayudar a los usuarios a identificar f\u00e1cilmente su sitio si lo han marcado.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364f684c8.webp\")
<\/a><\/p>\n\n Prueba y exportaci\u00f3n
\n<\/h3>\n\n 106 Pruebe su sitio yendo a Archivo > Vista previa del sitio en el navegador o Ctrl+Alt+E. No elija ‘Vista previa de la p\u00e1gina en el navegador' esta vez, ya que los enlaces no funcionan en la vista previa de la p\u00e1gina. Es posible que desee intentar colocar los anclajes en diferentes lugares para asegurarse de que cuando el usuario haga clic en un enlace, el sitio se desplace a la secci\u00f3n correcta y a la posici\u00f3n correcta.\n<\/p>\n
\n 107 Por \u00faltimo, vaya a Archivo > Exportar como HTML (Ctrl+E). En la URL del sitio, coloque cualquier nombre como ‘example.com' y elija la ubicaci\u00f3n. Haga clic en Aceptar. El sitio web est\u00e1 listo.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236528be8c.webp\")
<\/a><\/p>\n\n Resultado final de cada p\u00e1gina
\n<\/h3>\n\n P\u00e1gina delantera
\n<\/h5>\n<\/a><\/p>\n\n Secci\u00f3n ‘Servicios'
\n<\/h5>\n<\/a><\/p>\n\n Secci\u00f3n ‘Por qu\u00e9 nosotros'
\n<\/h5>\n<\/a><\/p>\n\n Secci\u00f3n ‘Testimonios'
\n<\/h5>\n<\/a><\/p>\n\n Secci\u00f3n ‘Cont\u00e1ctenos'
\n<\/h5>\n<\/a><\/p>\n\n Secci\u00f3n de pie de p\u00e1gina
\n<\/h5>\n - \n Para el estado de rollover:<\/strong> simplemente cambie el color del texto a R=196 G=196 B=196 y sin cursiva.\n <\/li>\n
- \n Para Designaci\u00f3n:<\/strong> Fuente: Nobile, tama\u00f1o=15, Color: R=37 G=37 B=37, alineado al centro y 100% interlineado.\n <\/li>\n
- \n Para encabezados:<\/strong> fuente = Raleway negrita, tama\u00f1o = 18, color: blanco, alineado al centro y 100 % inicial.\n <\/li>\n
- \n Para P\u00e1rrafos:<\/strong> Fuente: Questrial, Tama\u00f1o=15, Color: R=67 G=67 B=67, Alineado a la izquierda y 120% de interlineado.\n <\/li>\n<\/ul>\n
- \n Para encabezados:<\/strong> fuente: Raleway Bold, tama\u00f1o = 20, color: negro, alineado a la izquierda y 100% inicial.\n <\/li>\n
- \n
- \n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382365f01860.webp\")
<\/a><\/p>\n