Ejemplo práctico con Muse CC: landing page

Creación del formulario de contacto con Adobe Muse

¡Prueba gratis durante 10 días

nuestros 1145 cursos !

Prueba gratis Mostrar modalidades de suscripción
Dado que el objetivo de nuestra landing page es recolectar una base de datos, necesitaremos un formulario de contacto para que el usuario ingrese sus datos y haga el envío requerido. Para este fin usaremos un widget.
03:46

Transcripción

El objetivo de esta "landing page" es recolectar una base de datos de usuarios. Por ese motivo estamos ofreciendo una guía a las personas que diligencien un formulario de contacto y nos envíen esa información. Vamos entonces a crear nuestro formulario de contacto. Para eso voy al panel Biblioteca de widgets y en la categoría Formularios tomo este formulario de Contacto (sencillo) y lo arrastro hacia la página. Ahora vamos a realizar las transformaciones o modificaciones necesarias para personalizar este formulario. Lo primero que necesito es modificar el ancho de este widget. El ancho es de 340 píxeles actualmente y yo lo necesito de 300 píxeles. Como ustedes pueden ver, no es posible modificar este ancho actualmente. Esto es una característica de algunos widgets: no permiten modificar su escala o su tamaño de forma general. Entonces, lo que tenemos que hacer es realizar esa transformación de escala a los elementos de forma independiente. Actualmente yo tengo seleccionado el widget completo, por eso en el panel de control en la parte izquierda dice Formulario, pero si yo hago clic de forma repetitiva, puedo seleccionar los elementos de forma independiente. Aquí seleccioné el campo de introducción de texto, vamos a cambiar entonces el tamaño a 300 píxeles. Debo verificar que esta casilla o este botón no esté marcado, para no afectar el alto. Generalmente en los widgets, cuando yo hago el cambio sobre un elemento que hace parte del widget, los otros elementos que son del mismo tipo también se transforman. Por ese motivo, este campo también se escaló. Vamos ahora a seleccionar este campo: Introducción de texto en varias líneas, 300 píxeles de ancho. Ahora voy a tomar este de texto, lo voy a ubicar en la parte inferior, alineándolo en la parte izquierda con los demás elementos, y vamos a aplicarle la escala: 300 píxeles de ancho, al botón también: 300 píxeles de ancho. Tomamos ahora todo el formulario, nos aseguramos de seleccionar todo el widget, alineamos en la parte derecha con la guía de margen y en la parte superior con el texto que tenemos en la parte izquierda. Ahora voy a seleccionar esta caja de tres, vamos a escalar un poco de forma vertical, selecciono este grupo de elementos, los elimino tomo estos dos elementos y los arrastro hacia la parte superior. El motivo por el cual eliminé ese campo de formularios es porque necesito que mi formulario sea lo más simple posible. Normalmente estamos tentados, por el contrario, a agregar campos de formulario. Probablemente pensemos que necesitamos el teléfono del usuario, la dirección del usuario, el nombre de la empresa donde trabaja. Pero a mayor cantidad de campos que tenga un formulario, hay más probabilidad de que el usuario no termine el proceso de diligenciar estos campos ni de enviar esa información. Por el contrario, entre más sencillo, entre más simple sea un formulario, hay mayor probabilidad de que el usuario termine la tarea. Por ese motivo, los formularios de contacto de los sitios web y más aún de los "landing page" deben ser tan simples como sea posible.

Ejemplo práctico con Muse CC: landing page

Lleva a la práctica tus conocimientos de Adobe Muse CC con este ejemplo sobre la creación de una landing page con comportamiento responsive y correctamente estructurada.

47 min (15 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.