Teniendo en cuenta que la diferencia entre las pantallas de los ordenadores de sobremesa y las de los tel\u00e9fonos m\u00f3viles es bastante grande, es muy dif\u00edcil (casi imposible) crear un \u00fanico dise\u00f1o de sitio web que se vea perfecto en ambos y en todos los tama\u00f1os de pantalla intermedios. Por eso debes dise\u00f1ar tus sitios web para que sean responsivos.<\/p>\n\n\n\n
La edici\u00f3n adaptativa significa que tienes que modificar el dise\u00f1o de tu sitio web por separado para escritorio, tableta y m\u00f3vil para que se vea igual de bien en todas estas pantallas. En la mayor\u00eda de los casos, el contenido de tu sitio web se a\u00f1ade utilizando Page Builders, y todos ellos est\u00e1n equipados con opciones de edici\u00f3n responsive.<\/p>\n\n\n\n
Podr\u00e1s hacer lo mismo con la mayor\u00eda de los ajustes relacionados con el tema, ya que Astra viene con estas opciones incorporadas. Adem\u00e1s, es f\u00e1cil saber qu\u00e9 opciones pueden tener la edici\u00f3n responsiva activada, ya que ver\u00e1s un icono de edici\u00f3n responsiva junto a ellas.<\/p>\n\n\n\n
<\/a>Vista previa<\/h3>\n\n\n\nCuando su sitio web es responsivo, el navegador mostrar\u00e1 diferentes dise\u00f1os siguiendo los puntos de ruptura. El punto de ruptura es el ancho de pantalla espec\u00edfico, establecido para servir como punto que el navegador utiliza para distinguir las pantallas de escritorio, tableta y m\u00f3vil.<\/p>\n\n\n\n
Puedes cambiar entre la vista previa de escritorio, tableta y m\u00f3vil para editar y previsualizar el dise\u00f1o de tu sitio web en diferentes dispositivos. Para ello, puedes utilizar el icono de edici\u00f3n adaptable:<\/p>\n\n\n\n
Primer paso<\/strong> - Navegue hasta el ajuste que desea editar. Busque el icono de edici\u00f3n sensible junto a \u00e9l;<\/p>\n\n\n\nPaso 2<\/strong> - Haz clic en el icono para circular entre los ajustes de escritorio, tableta y dispositivo m\u00f3vil: elige la vista previa que necesites editar.<\/p>\n\n\n\n![\"\"](\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/09\/color1-1024x481.png\")
<\/a><\/figure>\n\n\n\nTambi\u00e9n puede cambiar la vista previa utilizando los botones predeterminados de la parte inferior del Personalizador.<\/p>\n\n\n\n![\"\"](\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/09\/color2-1024x481.png\")
<\/a><\/figure>\n\n\n\n<\/a>Unidades de tama\u00f1o<\/h3>\n\n\n\nEl factor importante en el dise\u00f1o responsivo es la unidad de tama\u00f1o que se utiliza, ya que cada unidad reacciona de forma diferente al cambiar el tama\u00f1o de la pantalla.<\/p>\n\n\n\n![\"\"](\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/09\/color3-1024x481.png\")
<\/a><\/figure>\n\n\n\nHay tres unidades disponibles: PX, EM y %. Entonces, \u00bfcu\u00e1l es la diferencia entre estas tres?<\/p>\n\n\n\n
- En p\u00edxeles (PX)<\/strong> se utilizan a menudo por su precisi\u00f3n. Teniendo en cuenta que 1px es una unidad relativamente peque\u00f1a, puede ajustar f\u00e1cilmente el tama\u00f1o tal y como imaginaba. Adem\u00e1s, 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\u00e1 este mismo espacio en cualquier elemento.<\/li><\/ul>\n\n\n\n
Por el contrario, tanto el EM como el porcentaje (%) son unidades relativas. Esto significa que cambian en funci\u00f3n de sus elementos padre (como cuerpo, cabecera, pie de p\u00e1gina, secciones, filas, columnas, widgets\/bloques, etc.):<\/p>\n\n\n\n
- EM<\/strong> es una unidad relativa al tama\u00f1o de fuente del elemento padre. Por ejemplo, si establece el tama\u00f1o de fuente de su encabezado (elemento padre) en 20 px, establecer un espaciado de 1 em para ese encabezado ser\u00e1 igual a 20 p\u00edxeles. Si cambia el tama\u00f1o de la fuente, el espaciado cambiar\u00e1 autom\u00e1ticamente.<\/li>
- A porcentaje (%)<\/strong> 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\u00f1adir\u00e1 un espaciado de 30px. Por lo tanto, si cambia la anchura de su logotipo, el espaciado se ajustar\u00e1 proporcionalmente.<\/li><\/ul>\n\n\n\n
Es importante mencionar que algunas opciones del Personalizador s\u00f3lo utilizan una unidad de tama\u00f1o espec\u00edfica. En consecuencia, estas opciones no tienen la posibilidad de elegir la unidad de tama\u00f1o.<\/p>\n\n\n\n
<\/a>Ajustes adaptativos con el personalizador Astra<\/h2>\n\n\n\nLos ajustes adaptativos est\u00e1n disponibles en casi todas las opciones del personalizador (s\u00f3lo 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\u00f3n adaptable:<\/p>\n\n\n\n
- Tama\u00f1o y colores de fuente<\/li>
- Color del borde<\/li>
- Tama\u00f1o, color y espaciado de los iconos<\/li>
- Colores de fondo, superposiciones e im\u00e1genes<\/li>
- Rellenos<\/li>
- M\u00e1rgenes<\/li>
- Alineaciones<\/li><\/ul>\n\n\n\n
<\/a>\u00bfC\u00f3mo hacerlo?<\/h3>\n\n\n\nPuedes a\u00f1adir ediciones responsivas a las opciones del Personalizador Astra, siguiendo estos pasos generales:<\/p>\n\n\n\n
Primer paso<\/strong> - Acceder al Personalizador. Cuando acceda al Personalizador, se establecer\u00e1 por defecto en la vista previa del escritorio;<\/p>\n\n\n\nPaso 2<\/strong> - Navegue hasta la ubicaci\u00f3n de la opci\u00f3n que desea editar;<\/p>\n\n\n\nPaso 3<\/strong> - Utiliza el icono de edici\u00f3n adaptable situado junto a la configuraci\u00f3n y haz un c\u00edrculo entre las vistas previas de escritorio, tableta y m\u00f3vil para seleccionar la que desees editar. Te sugerimos que empieces por el escritorio, ya que algunos ajustes podr\u00edan heredarse autom\u00e1ticamente de tama\u00f1os de ventana m\u00e1s peque\u00f1os (por ejemplo, la fuente o los colores de fondo);<\/p>\n\n\n\nPaso 4<\/strong> - Edite sus ajustes por separado para escritorio, tableta y m\u00f3vil. Haz clic en \"Publicar\" para aplicar los cambios.<\/p>\n\n\n\nA modo de ejemplo, le mostraremos c\u00f3mo hacer que sus migas de pan tengan un aspecto diferente para cada tama\u00f1o de ventana gr\u00e1fica:<\/p>\n\n\n\n
Primer paso<\/strong> - Vaya a Apariencia > Personalizador > Migas de pan y active las migas de pan en la pesta\u00f1a General;<\/p>\n\n\n\nPaso 2<\/strong> - Haga clic en la pesta\u00f1a Dise\u00f1o 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:<\/p>\n\n\n\n![\"\"](\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/09\/color4-1-1024x481.png\")
<\/a><\/figure>\n\n\n\nPaso 3<\/strong> - 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;<\/p>\n\n\n\nPaso 4<\/strong> - A\u00f1ada 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:<\/p>\n\n\n\n![\"\"](\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/09\/color5-1024x481.png\")
<\/a><\/figure>\n\n\n\nPaso 5<\/strong> - Cambie a la vista previa m\u00f3vil, y aplique los cambios para su configuraci\u00f3n m\u00f3vil. En el ejemplo, hemos decidido cambiar s\u00f3lo el color del \u00faltimo elemento de la ruta de las migas de pan (la p\u00e1gina actual; ajuste \"Color del texto\") para que destaque en el m\u00f3vil. Tambi\u00e9n a\u00f1adimos espaciado superior e inferior para m\u00f3viles.<\/p>\n\n\n\n![\"\"](\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/09\/color6-1024x481.png\")
<\/a><\/figure>\n\n\n\n<\/a>Encabezado y pie de p\u00e1gina adaptables<\/h3>\n\n\n\nCon el Header Footer Builder de Astras, tambi\u00e9n puedes hacer que tu encabezado y pie de p\u00e1gina sean responsivos y tengan un aspecto diferente para dispositivos de escritorio y m\u00f3viles:<\/p>\n\n\n\n
Paso 2<\/strong> - Haz clic en el icono para circular entre los ajustes de escritorio, tableta y dispositivo m\u00f3vil: elige la vista previa que necesites editar.<\/p>\n\n\n\n Tambi\u00e9n puede cambiar la vista previa utilizando los botones predeterminados de la parte inferior del Personalizador.<\/p>\n\n\n\n El factor importante en el dise\u00f1o responsivo es la unidad de tama\u00f1o que se utiliza, ya que cada unidad reacciona de forma diferente al cambiar el tama\u00f1o de la pantalla.<\/p>\n\n\n\n Hay tres unidades disponibles: PX, EM y %. Entonces, \u00bfcu\u00e1l es la diferencia entre estas tres?<\/p>\n\n\n\n Por el contrario, tanto el EM como el porcentaje (%) son unidades relativas. Esto significa que cambian en funci\u00f3n de sus elementos padre (como cuerpo, cabecera, pie de p\u00e1gina, secciones, filas, columnas, widgets\/bloques, etc.):<\/p>\n\n\n\n Es importante mencionar que algunas opciones del Personalizador s\u00f3lo utilizan una unidad de tama\u00f1o espec\u00edfica. En consecuencia, estas opciones no tienen la posibilidad de elegir la unidad de tama\u00f1o.<\/p>\n\n\n\n Los ajustes adaptativos est\u00e1n disponibles en casi todas las opciones del personalizador (s\u00f3lo 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\u00f3n adaptable:<\/p>\n\n\n\n Puedes a\u00f1adir ediciones responsivas a las opciones del Personalizador Astra, siguiendo estos pasos generales:<\/p>\n\n\n\n Primer paso<\/strong> - Acceder al Personalizador. Cuando acceda al Personalizador, se establecer\u00e1 por defecto en la vista previa del escritorio;<\/p>\n\n\n\n Paso 2<\/strong> - Navegue hasta la ubicaci\u00f3n de la opci\u00f3n que desea editar;<\/p>\n\n\n\n Paso 3<\/strong> - Utiliza el icono de edici\u00f3n adaptable situado junto a la configuraci\u00f3n y haz un c\u00edrculo entre las vistas previas de escritorio, tableta y m\u00f3vil para seleccionar la que desees editar. Te sugerimos que empieces por el escritorio, ya que algunos ajustes podr\u00edan heredarse autom\u00e1ticamente de tama\u00f1os de ventana m\u00e1s peque\u00f1os (por ejemplo, la fuente o los colores de fondo);<\/p>\n\n\n\n Paso 4<\/strong> - Edite sus ajustes por separado para escritorio, tableta y m\u00f3vil. Haz clic en \"Publicar\" para aplicar los cambios.<\/p>\n\n\n\n A modo de ejemplo, le mostraremos c\u00f3mo hacer que sus migas de pan tengan un aspecto diferente para cada tama\u00f1o de ventana gr\u00e1fica:<\/p>\n\n\n\n Primer paso<\/strong> - Vaya a Apariencia > Personalizador > Migas de pan y active las migas de pan en la pesta\u00f1a General;<\/p>\n\n\n\n Paso 2<\/strong> - Haga clic en la pesta\u00f1a Dise\u00f1o 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:<\/p>\n\n\n\n Paso 3<\/strong> - 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;<\/p>\n\n\n\n Paso 4<\/strong> - A\u00f1ada 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:<\/p>\n\n\n\n Paso 5<\/strong> - Cambie a la vista previa m\u00f3vil, y aplique los cambios para su configuraci\u00f3n m\u00f3vil. En el ejemplo, hemos decidido cambiar s\u00f3lo el color del \u00faltimo elemento de la ruta de las migas de pan (la p\u00e1gina actual; ajuste \"Color del texto\") para que destaque en el m\u00f3vil. Tambi\u00e9n a\u00f1adimos espaciado superior e inferior para m\u00f3viles.<\/p>\n\n\n\n Con el Header Footer Builder de Astras, tambi\u00e9n puedes hacer que tu encabezado y pie de p\u00e1gina sean responsivos y tengan un aspecto diferente para dispositivos de escritorio y m\u00f3viles:<\/p>\n\n\n\n![\"\"](\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/09\/color1.png\")
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a>Unidades de tama\u00f1o<\/h3>\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a>Ajustes adaptativos con el personalizador Astra<\/h2>\n\n\n\n
<\/a>\u00bfC\u00f3mo hacerlo?<\/h3>\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a>Encabezado y pie de p\u00e1gina adaptables<\/h3>\n\n\n\n