Visibilidad de elementos en páginas responsivas

Responsive & Embed

Al editar una página responsiva, tienes opciones de estilo para mostrar y ocultar ciertos elementos para ciertos tamaños de pantalla. Cuando decidas ocultar un elemento determinado, simplemente selecciona el tamaño de pantalla para el que te gustaría ocultar ese elemento. En ion, cada tipo de dispositivo es identificado con una sigla correspondiente a su tamaño:

  • XS = Celular (modo retrato)
  • SM = Celular (modo paisaje)
  • MD = Tablet
  • LG = Notebook/Escritorio

Por lo tanto, si deseas ocultar un elemento de una página en un dispositivo móvil, puedes marcar "Hide in XS" y el elemento seleccionado no se mostrará cuando la página se vea en un dispositivo móvil.

 

Embed

En la misma sección de estilo del estudio creativo, encontrarás la opción Hide when embedded. Esta opción es ideal para las páginas de ion que te gustaría incrustar en un sitio web externo, ya que te permite publicar páginas como lo harías normalmente, pero también utilizar un código de inserción para añadir ciertas partes de la página a otro sitio web.

Por ejemplo, después de crear una página, te das cuenta de que quieres insertar el formulario y el contenido de la página de agradecimiento en tu sitio web. Puedes hacer esto simplemente seleccionando el contenido que no deseas mostrar en el sitio web y marcando la opción Hide when embedded. Luego, puedes utilizar el código de inserción para añadir el formulario y el contenido de la página de agradecimiento en tu sitio web. Para saber más sobre el código de inserción, haz clic aquí.

Reglas de Mostrar y Ocultar

En la sección Show Conditionally puedes configurar que un contenido sea mostrado u ocultado de manera condicional en función de la presencia o no de datos en un campo de datos. Esto le permite mostrar contenido diferente a diferentes visitantes en función de la presencia de ciertos valores de query string o datos recopilados en otras partes de la publicación.

Por ejemplo, puedes configurar que el campo de email en tu formulario sea ocultado si anteriormente ya se ha recopilado el email de ese visitante. También puedes mostrar y ocultar diferentes títulos e imágenes según los valores de query string para adaptar la publicación de acuerdo al origen del visitante. Incluso podrías configurar tus formularios de manera, que cuando un visitante regrese a la página después de rellenar un formulario x, se le muestre un formulario diferente.

Simular condiciones de página

¡También puedes probar el contenido condicional directamente en el estudio creativo! Después de configurar todo, verás un icono en la barra superior del estudio creativo llamado Simulate page conditions.

Después de habilitar esta función, simula si los datos están presentes o no, y prueba diferentes valores para ver cómo la página identificará a los diferentes visitantes de la página en función de los datos que se hayan recopilado sobre ellos. También puedes utilizar esta función para verificar cómo se vería la página si estuviera incrustada en un sitio externo.