La importancia de los dispositivos móviles, aunque ya enorme, es cada vez mayor. Por lo tanto, al diseñar su sitio web, es esencial que su diseño sea responsivo y se mantenga consistente en todos los tamaños de pantalla. Este documento te ayudará a utilizar las opciones de edición responsive integradas en Astra Theme.
Con estas opciones, puede ajustar la configuración en todo su sitio web para que se vea perfecto en escritorio, tableta y móvil.
Edición con capacidad de respuesta
Teniendo en cuenta que la diferencia entre las pantallas de los ordenadores de sobremesa y las de los teléfonos móviles es bastante grande, es muy difícil (casi imposible) crear un único diseño de sitio web que se vea perfecto en ambos y en todos los tamaños de pantalla intermedios. Por eso debes diseñar tus sitios web para que sean responsivos.
La edición adaptativa significa que tienes que modificar el diseño de tu sitio web por separado para escritorio, tableta y móvil para que se vea igual de bien en todas estas pantallas. En la mayoría de los casos, el contenido de tu sitio web se añade utilizando Page Builders, y todos ellos están equipados con opciones de edición responsive.
Podrás hacer lo mismo con la mayoría de los ajustes relacionados con el tema, ya que Astra viene con estas opciones incorporadas. Además, es fácil saber qué opciones pueden tener la edición responsiva activada, ya que verás un icono de edición responsiva junto a ellas.
Vista previa
Cuando su sitio web es responsivo, el navegador mostrará diferentes diseños siguiendo los puntos de ruptura. El punto de ruptura es el ancho de pantalla específico, establecido para servir como punto que el navegador utiliza para distinguir las pantallas de escritorio, tableta y móvil.
Puedes cambiar entre la vista previa de escritorio, tableta y móvil para editar y previsualizar el diseño de tu sitio web en diferentes dispositivos. Para ello, puedes utilizar el icono de edición adaptable:
Primer paso - Navegue hasta el ajuste que desea editar. Busque el icono de edición sensible junto a él;
Paso 2 - Haz clic en el icono para circular entre los ajustes de escritorio, tableta y dispositivo móvil: elige la vista previa que necesites editar.
También puede cambiar la vista previa utilizando los botones predeterminados de la parte inferior del Personalizador.
Unidades de tamaño
El factor importante en el diseño responsivo es la unidad de tamaño que se utiliza, ya que cada unidad reacciona de forma diferente al cambiar el tamaño de la pantalla.
Hay tres unidades disponibles: PX, EM y %. Entonces, ¿cuál es la diferencia entre estas tres?
- En píxeles (PX) se utilizan a menudo por su precisión. Teniendo en cuenta que 1px es una unidad relativamente pequeña, puede ajustar fácilmente el tamaño tal y como imaginaba. Además, es una unidad absoluta, lo que significa que siempre aparece exactamente igual y no se ve influida por otros elementos del sitio web. Por ejemplo, un margen ajustado a 20px siempre ocupará este mismo espacio en cualquier elemento.
Por el contrario, tanto el EM como el porcentaje (%) son unidades relativas. Esto significa que cambian en función de sus elementos padre (como cuerpo, cabecera, pie de página, secciones, filas, columnas, widgets/bloques, etc.):
- EM es una unidad relativa al tamaño de fuente del elemento padre. Por ejemplo, si establece el tamaño de fuente de su encabezado (elemento padre) en 20 px, establecer un espaciado de 1 em para ese encabezado será igual a 20 píxeles. Si cambia el tamaño de la fuente, el espaciado cambiará automáticamente.
- A porcentaje (%) es una unidad relativa al elemento padre. Esto significa que si establece la anchura de su logotipo (elemento padre) en 150 px, al establecer el margen 20% se añadirá un espaciado de 30px. Por lo tanto, si cambia la anchura de su logotipo, el espaciado se ajustará proporcionalmente.
Es importante mencionar que algunas opciones del Personalizador sólo utilizan una unidad de tamaño específica. En consecuencia, estas opciones no tienen la posibilidad de elegir la unidad de tamaño.
Ajustes adaptativos con el personalizador Astra
Los ajustes adaptativos están disponibles en casi todas las opciones del personalizador (sólo las opciones de barra lateral y rendimiento no tienen ajustes adaptativos). Estos son los tipos de ajustes que puede utilizar con la capacidad de edición adaptable:
- Tamaño y colores de fuente
- Color del borde
- Tamaño, color y espaciado de los iconos
- Colores de fondo, superposiciones e imágenes
- Rellenos
- Márgenes
- Alineaciones
¿Cómo hacerlo?
Puedes añadir ediciones responsivas a las opciones del Personalizador Astra, siguiendo estos pasos generales:
Primer paso - Acceder al Personalizador. Cuando acceda al Personalizador, se establecerá por defecto en la vista previa del escritorio;
Paso 2 - Navegue hasta la ubicación de la opción que desea editar;
Paso 3 - Utiliza el icono de edición adaptable situado junto a la configuración y haz un círculo entre las vistas previas de escritorio, tableta y móvil para seleccionar la que desees editar. Te sugerimos que empieces por el escritorio, ya que algunos ajustes podrían heredarse automáticamente de tamaños de ventana más pequeños (por ejemplo, la fuente o los colores de fondo);
Paso 4 - Edite sus ajustes por separado para escritorio, tableta y móvil. Haz clic en "Publicar" para aplicar los cambios.
A modo de ejemplo, le mostraremos cómo hacer que sus migas de pan tengan un aspecto diferente para cada tamaño de ventana gráfica:
Primer paso - Vaya a Apariencia > Personalizador > Migas de pan y active las migas de pan en la pestaña General;
Paso 2 - Haga clic en la pestaña Diseño y realice los ajustes necesarios. En este ejemplo, hemos decidido que el color de fondo de las migas de pan sea negro y el color de la fuente blanco para la vista previa de escritorio:
Paso 3 - Cambie a la vista previa de tableta haciendo clic en cualquiera de los iconos de respuesta de las opciones disponibles o en el icono de tabla de la parte inferior del personalizador;
Paso 4 - Añada ajustes para la tableta. En la siguiente captura de pantalla, puede ver que en nuestro ejemplo, decidimos tener un fondo blanco con la fuente Breadcrumbs configurada en negro para la tableta:
Paso 5 - Cambie a la vista previa móvil, y aplique los cambios para su configuración móvil. En el ejemplo, hemos decidido cambiar sólo el color del último elemento de la ruta de las migas de pan (la página actual; ajuste "Color del texto") para que destaque en el móvil. También añadimos espaciado superior e inferior para móviles.
Encabezado y pie de página adaptables
Con el Header Footer Builder de Astras, también puedes hacer que tu encabezado y pie de página sean responsivos y tengan un aspecto diferente para dispositivos de escritorio y móviles:
- Establecer un ancho de logotipo diferente
- Título del sitio y lema Fuente y color
- Diferentes alturas de cabecera y pie de página
- Añade diferentes widgets a tu cabecera o pie de página para cada tamaño de ventana.
- Reorganizar y colocar los elementos de forma diferente
Ocultar elementos
La opción "Ocultar en" está disponible para todos los elementos de cabecera y pie de página. También está disponible para cada sección de cabecera y pie de página (Primaria, Arriba y Abajo). Puede ocultar el elemento o la sección de encabezado/pie de página en cualquiera de las vistas previas utilizando esta opción.
Uno de los ejemplos en los que esta opción podría ser útil sería mostrar diferentes elementos activos para la vista previa de tabletas y móviles en su encabezado o pie de página:
Primer paso - Ve al constructor de encabezado o pie de página (Personalizar > Constructor de encabezado o Personalizar > Constructor de pie de página). Dado que el encabezado y el pie de página están vinculados para las vistas de tableta y móvil, estas vistas tendrán los mismos elementos activos;
Paso 2 - Cambie a la ventana en la que desea ocultar un elemento activo;
Paso 3 - Haga clic en el elemento y active la opción "Ocultar al" para ocultarlo.
