Muse CC para diseño web responsivo

Ajustes de la página inicio en el punto de rotura de 768 px

¡Prueba gratis durante 10 días

nuestros 1201 cursos !

Prueba gratis Mostrar modalidades de suscripción
En este video terminamos de ajustar la posición y tamaño de los elementos que hacen parte de la página de inicio para el punto de rotura o break point de 768 px que, generalmente, está orientado a tablets.
05:10

Transcripción

Vamos a seguir trabajando en la adaptación de contenido en el "breakpoint" 768 de la página Inicio. Voy a seleccionar esta imagen y marcamos la opción de proporción. El tamaño al ancho va a ser 526 pixeles. Vamos a centrar este elemento. Tomamos el texto, va a tener el mismo ancho: 526 pixeles. Y también nos aseguramos de centrar horizontalmente este elemento. Necesitamos más espacio, entonces vamos a seleccionar esta imagen, arrastramos hacia la parte inferior, este lo arrastramos de forma manual, tomamos el botón y el ancho del botón va a ser 324. Alineamos al centro, ubicamos un poco mejor y listo, ya tenemos esta sección. Vamos a hacer un pequeñísimo ajuste de tamaño, vamos a verificar que haya 45 pixeles de separación, así que vamos al área Transformar y estos son los 45 pixeles que necesitamos. Aquí lo podemos hacer de forma visual, para tratar de dejar la misma separación o al menos muy cercana a la parte inferior. Ahora no necesitamos estas imágenes en este "breakpoint", nosotros podemos prescindir del uso de imágenes por varios motivos: el principal simplemente, por espacio, ya que vamos a organizar estos elementos también de forma vertical, entonces al utilizar las imágenes vamos a hacer que el "scroll" sea mucho más extenso. Así que para simplificar, todo el contenido que vamos a tener disponible en el "breakpoint" o punto de rotura de 768, vamos a seleccionar estas tres imágenes, hacemos un clic derecho y seleccionamos Ocultar en punto de rotura. Los tamaños de estas cajas de texto y los tamaños de estos botones van a ser similares a los que tenemos en la parte superior. Esta caja de texto tiene 526 pixeles, entonces vamos a decirle 526 pixeles y alineamos al centro. Este texto va a estar centrado, desplazamos la caja de texto hasta que toque el borde de esta caja azul y separamos 45 pixeles. El botón lo vamos a dejar en esta posición aproximadamente, 324, y 324 de ancho entonces. Esto pasa simplemente porque tenemos marcada la opción de proporción, entonces voy a deshacer, desmarco y 324. Aquí ya tenemos ese elemento alineado al centro, o si quiero estar totalmente seguro, entonces hago clic sobre este ícono para alinear de forma horizontal, 526 y 324, 526 y 324, texto alineado al centro, texto alineado al centro. Y todos estos elementos los podemos seleccionar a la vez y en un solo paso nos aseguramos que todos estén centrados. Un poco más despacio en estos dos elementos, hacia la parte inferior. Y ya tenemos la adaptación del contenido correspondiente al "breakpoint" o punto de rotura de 768 pixeles en la página de inicio.

Muse CC para diseño web responsivo

Crea una web responsive sin escribir una sola línea de código gracias a Adobe Muse CC, la aplicación de la familia Adobe que te permite diseñar tu página de forma gráfica.

3:10 horas (41 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:15/09/2016

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.