Editar páginas en SitioSimple

Ahora nos enfocaremos en el contenido de cada sección o página de tu sitio. Afortunadamente, nuestro editor tipo "arrastra y suelta" te permite personalizar y completar el contenido de manera fácil, ágil y rápida, adaptándose a todas las pantallas.

¿Cuánto contenido necesitas?

Los productos digitales tienen reglas de redacción específicas. Los usuarios no dedican tanto tiempo a la lectura en pantalla como lo harían con otros medios impresos. Es importante considerar cuánto tiempo dedican los usuarios a leer en cada pantalla y qué elementos les atraen más, como imágenes o videos.

Patrones de lectura

Al igual que existen patrones de navegación, también hay patrones de lectura. Según estudios de eye tracking, los usuarios tienden a escanear el contenido en forma de "F". Prestan atención a la parte superior y a la parte izquierda de la pantalla. Por lo tanto, es recomendable colocar el menú de navegación principal y la información relevante en esas zonas.

Diagramación del contenido

Los usuarios suelen leer con atención los tres primeros párrafos y luego hacen un escaneo rápido del resto de la página. Es esencial que lo más importante y relevante se encuentre en esos primeros párrafos para que los visitantes puedan captar rápidamente la esencia de tu producto digital.

❕Los usuarios buscan minimizar el tiempo de lectura y obtener la información de manera eficiente.

Ahora que ya sabemos para qué público usuario creamos y organizamos el contenido, veamos una rápida guía para aprender a hacerlo.

¿Cómo editar una página?

1. En el creador de SitioSimple, haz clic en la pestaña "Sitio web" y luego en "Páginas".
2. Selecciona la página que desees modificar y se habilitará el botón  justo antes de la configuración⚙️.
   
   Recuerda que en la lista de páginas que aparece debajo de "Menú del sitio" aparecerán las páginas que hayas seleccionado. Si quisieras agregar alguna más al menú, puedes volver al tutorial que explica cómo hacerlo.
   
   
3. A la izquierda de la pantalla vas a encontrar 5 pestañas:

• Los componentes son elementos que puedes utilizar para completar tu página web con contenido como texto, imágenes, botones, columnas, tablas, etc. Son elementos individuales que puedes organizar e interactuar entre sí.
  Hay cinco grupos de componentes disponibles: Estructura, Elementos básicos, Multimedia, Formularios y Social.
  📍Estructura
  
  
  Estos son fragmentos de contenido específicos, como columnas, apilamiento vertical, apilamiento horizontal y grillas, que te ayudarán a organizar los bloques de contenido de tu sitio. Ver más detalle.

  
  📍Elementos básicos
  
  
  

  Estos son fragmentos de contenido específicos, como texto, enlaces, botones, espaciadores, etc. Algunos ejemplos son: Contenedor, Botón, Slider, Grupo de botones, Título, Alerta, Tarjeta y Lista de grupos.
  ¿Cómo agregar un elemento?
  Para agregar un componente a tu página web, simplemente arrastra y suelta el componente que desees al lugar que hayas elegido.
  Si pulsas sobre el elemento, se despliega un menú de opciones. Entre ellas tendrás la posibilidad de arrastrar, seleccionar su padre (o elemento que lo contiene), mover hacia arriba, mover hacia abajo, copiar o eliminar el elemento.
  
  
  📍Multimedia
  

  Con estos elementos podrás agregar gráficos, imágenes, galerías de imágenes, iconos y plugin de video.
  
  📍Formulario
  
  

  Puedes crear formularios de contacto simples o personalizarlos con campos específicos para que tus visitantes te envíen un correo electrónico con la información que necesitas.
  
  Diseño de formularios: Los formularios son elementos importantes para interactuar con tus usuarios y cumplir sus objetivos. Aquí tienes algunos consejos para su construcción:
  ➡️Pregunta solo lo indispensable: Evita formularios largos y solicita solo la información necesaria. Cuantos más campos agregues, más probable es que los usuarios abandonen el proceso.
  ➡️Ordena de manera lógica: Piensa en el flujo de información y organiza el formulario de forma coherente. Pregunta información relevante antes que detalles menos importantes.
  ➡️Agrupa campos relacionados: Organiza los campos de manera que estén agrupados por temas o categorías. Esto facilita la comprensión del formulario y evita confusiones.
  ➡️Utiliza una columna de campos: Organiza el contenido del formulario en una única columna para evitar confusiones y proporcionar una guía clara sobre cómo completarlo.
  ➡️Evalúa la necesidad de cada campo: Cuestiona si cada campo es realmente necesario para tu negocio. Algunos campos pueden no ser relevantes y generar fricción al completar el formulario. Por ejemplo, ¿es necesario conocer el género del usuario si tienes un restaurante?
  
  Recuerda que diseñar formularios pensando en la experiencia del usuario es crucial. Puedes profundizar en este tema consultando el artículo sobre la importancia de diseñar formularios centrados en la experiencia del usuario.
  
  📍Social
  
  
  Son pequeñas integraciones con otros programas que puedes agregar fácilmente a tu sitio web sin necesidad de escribir código HTML. Algunos ejemplos son: Mapas de Google, Página de Facebook, Instagram, Twitter...

• En contenido, y siempre según de qué elemento se trate, podrás modificar aquello que constituye al elemento; cambiar la alineación del texto, si se trata de un párrafo, cargar una imagen y editar su ancho y alto, agregar animaciones, modificar el texto que cada botón tiene y a qué enlaza, elegir qué tipo de mensaje usar ante un aviso de alerta, entre otras configuraciones que veremos con mayor precisión más adelante.
  
  
  

• En estilo, puedes encontrar todo aquello que hace a la configuración "visible" de tus elementos. En esta sección vas a encontrar la tipografía que quieres para ese elemento, con su alineación, tamaño y peso; el tamaño, margen, relleno y borde del contenedor donde está incluido ese elemento; y tendrás también la posibilidad de sumar una imagen de fondo para usar en el contenedor que hayas seleccionado.
  
  
  

• Los bloques son estructuras prearmadas que contienen componentes organizados para crear diseños interactivos sin necesidad de conocimientos en diseño gráfico o programación. En la pestaña "Bloques" del editor, encontrarás varias opciones, como Tarjeta de producto, Usuario en línea, Acerca de y equipo, Tabla de precios, Cita, Diseño de una columna, Diseño de dos columnas, Diseño de tres columnas y Diseño de cuatro columnas. Cada bloque tiene contenido precargado que puedes modificar fácilmente con el editor. También puedes agregar elementos como un slider de bienvenida con imágenes, un formulario con mapa, una portada con imágenes, una caja con frase o un listado con imágenes, entre otras opciones.
  
  Cómo agregar un bloque:
  1 - En el menú lateral del editor, haz clic en la pestaña "Bloques".
  2 - Se desplegarán varias opciones de bloques. Pasa el cursor sobre el bloque que te interese y verás aparecer un signo ➕.
  3 - Haz clic en el signo ➕ y el bloque se agregará a continuación del último elemento.
  4 - Al seleccionar el bloque, se mostrará un menú de opciones que te permitirá arrastrar, seleccionar padre, mover hacia arriba, mover hacia abajo, copiar o eliminar el bloque.
  
  Una vez que hayas posicionado el bloque, se activará el panel de edición en el lado derecho de la pantalla. Las opciones de edición variarán según el bloque seleccionado.
  
  
  
  
• Esta función te permite copiar cualquier contenido, éste pasa automáticamente al portapapeles. Después, tienes la opción de volver a pegarlo en cualquier lugar. Por ejemplo, puedes copiar texto o imágenes y luego ponerlos en otra sección.
  
  

✅¡Listo! Una vez que hayas completado toda la información, no olvides guardar los cambios. Para ello, presiona el botón "Guardar" y publica los cambios en tu sitio.