Capacitación de contenido Parte 1: Edición básica de páginas

Acceso al editor de páginas

Iniciando sesión

En el menú principal del sitio web de su comunidad, haga clic en Cuenta e inicie sesión con su nombre de usuario/correo electrónico y contraseña.

Tablero vs Frontend

Cuando inicie sesión como administrador o moderador, notará la Barra de administración en la cima. Esta barra aparecerá sobre el encabezado incluso cuando se desplace hacia abajo.

Busque el nombre del sitio web en la esquina superior izquierda. Haga clic para ir a la Tablero, un área solo accesible para moderadores y administradores. Cuando esté en el Tablero, haga clic nuevamente para volver a la Interfaz, el sitio que será visto por el público en general.

Para esta capacitación, usaremos el Frontend.

Conceptos básicos de edición de páginas

Acceso al editor de páginas

Para esta capacitación, nos enfocaremos en editar la página de inicio. Cuando esté en la página de inicio, haga clic en Habilitar constructor visual en la barra de administración.

Edición de módulos

A Módulo es un área en una página web con su propio conjunto de reglas. Un módulo puede ser un cuadro de texto, un botón, una imagen, una llamada a la acción, un encabezado y más.

Los módulos están organizados en Secciones – grandes grupos de Módulos; y filas – pequeños grupos de Módulos que se muestran lado a lado.

He aquí un ejemplo: hay una imagen a la izquierda de un párrafo de texto. La imagen es un módulo y el párrafo de texto es otro módulo. La imagen y el párrafo de texto son dos módulos organizados en una Fila.

Cuando mueva el mouse sobre un módulo, se mostrará un Cuadro gris oscuro alrededor de sus bordes, con un pequeño menú gris oscuro dentro del cuadro.

Las secciones pueden ser azules o violetas y las filas son verdes.

Edición de un cuadro de texto

Comencemos editando la sección "Acerca del sitio web de nuestra comunidad".

Haga clic en el Botón de engranaje, el segundo de la izquierda en el menú gris oscuro.

Esto abrirá el Ventana de configuración del módulo. En este caso, mostrará "Configuración de texto" en la parte superior. Puede mover la ventana haciendo clic en "Configuración de texto" y arrastrando. Puede cambiar el tamaño de la ventana usando el botón gris oscuro en la esquina inferior derecha de la ventana.

Ahora puedes editar el texto. Observe cómo cuando cambia el texto en la ventana de configuración del módulo, sus cambios en el módulo se mostrarán en tiempo real.

Sin embargo, solo verá cómo se verá la página cuando guarde los cambios. Si intenta salir del editor de páginas sin guardar, el editor le avisará. Repasaremos cómo guardar los cambios en una parte posterior de esta guía.

Cuando haya terminado de editar el cuadro de texto, haga clic en el botón verde en la parte inferior derecha de la ventana de configuración del módulo, justo al lado del botón de cambio de tamaño de la ventana circular.

Reemplazo de una imagen

Mantenga el mouse sobre una imagen y haga clic en el icono de la rueda dentada para abrir la ventana Configuración del módulo.

Para reemplazar la imagen, haga clic en la imagen dentro de la ventana. Desde aquí puede seleccionar una foto existente ya cargada en el sitio, o cargar la suya propia.

Cuando haya terminado de editar la imagen, haga clic en el botón verde en la parte inferior derecha de la ventana de configuración del módulo, justo al lado del botón de cambio de tamaño de la ventana circular.

Cambio de contenido móvil

Ciertos módulos en la página de inicio están configurados para mostrarse solo en un teléfono móvil, mientras que otros están configurados para mostrarse solo en una computadora de escritorio.

Puede editar los módulos atenuados. El efecto está ahí para mostrar qué partes del sitio son visibles en su dispositivo actual.

Puede obtener una vista previa de cómo se verá el sitio en un dispositivo móvil. En la parte inferior central del editor de páginas, haga clic en el botón de círculo morado con tres puntos. Esto abre la Menú Editor de páginas.

El menú gris oscuro en la parte inferior izquierda del Editor de páginas.

Haga clic en el icono del teléfono para ver cómo se verá la página en un teléfono móvil. Los módulos que estaban en gris se vuelven opacos, mientras que otros que no lo estaban antes se vuelven grises.

Haga clic en el icono del monitor de la computadora en el medio de la parte inferior derecha del Editor de páginas para volver a cambiarlo a la vista de computadora.

Cuando edites algo en la página de inicio, asegúrate de editar también la sección atenuada correspondiente.

• El control deslizante de imagen: En los teléfonos móviles, es una sola foto. El texto delante de la imagen también tendrá que cambiarse.
• La pancarta de emergencia: Hay una versión móvil del banner de información de emergencia que también debe editarse.

El control deslizante de imagen

Para editar el control deslizante de la imagen, comience seleccionando el módulo y haciendo clic en el icono de la rueda dentada para abrir la Ventana de configuración del módulo para el control deslizante.

La ventana de configuración del módulo T para el control deslizante muestra una lista de diapositivas, en el orden de aparición.

Al hacer clic en el botón de engranaje junto a una diapositiva, se abre la configuración de esa diapositiva.

Para cambiar la imagen de esa diapositiva:

1. Desplácese hasta el final de la configuración de la diapositiva y busque Fondo.

2. Haga clic en el tercer cuadro gris desde la izquierda. Debe ser el único relleno con azul.

3. Haga clic en la imagen para abrir una ventana donde puede cargar una foto para reemplazarla.

4. Una vez hecho esto, desplácese hacia abajo para encontrar el Etiqueta de administrador. Reemplace cualquier texto descriptivo que haya (por ejemplo, "lago de montaña con isla central") con texto que describa la foto que acaba de cargar. Esto hará que sea mucho más fácil encontrar la imagen si necesita editarla nuevamente en el futuro.

5. Haga clic en la casilla de verificación verde en la parte inferior derecha de la ventana para guardar la configuración de esa diapositiva. Desde allí, puede volver a hacer clic en el mismo botón para guardar los cambios en el control deslizante.

Habilitación del banner de emergencia

Habilitar el banner de emergencia implica dos cosas: permitir que las personas vean las versiones de computadora y móvil del banner, y editar el texto.

Comencemos con la versión para PC del banner. Comience moviendo el mouse sobre el banner naranja atenuado, luego haga clic en el ícono de la rueda dentada en el menú verde que aparece.

Ve a la Avanzado pestaña en el menú morado superior, donde Visibilidad ya debería mostrar información debajo. Desmarque "Tableta" y "Escritorio" para que la configuración se vea como en la imagen de arriba.

Ahora que está habilitado, si necesita editar el texto, es tan fácil como pasar el cursor sobre el texto en el banner y hacer clic en el ícono de la rueda dentada sobre el cuadro gris, como cualquier otra área de texto.

Ahora sigamos las mismas instrucciones con el banner de emergencia móvil.

Mueva el mouse sobre la versión móvil atenuada del banner de emergencia, que también tiene un fondo naranja. Se mostrarán dos menús uno al lado del otro. Asegúrate que menú azul más oscuro está resaltado, luego haga clic en el icono de la rueda dentada azul.

Ve a la Avanzado pestaña como lo hicimos antes. Esta vez tendrás que encontrar Visibilidad y haga clic en él para abrir la configuración. Desmarque "Móvil" para que la configuración se vea como la imagen de arriba.

Al igual que el banner de emergencia del escritorio, puede editar el texto normalmente desde aquí.

Una vez que guarde los cambios, los carteles estarán disponibles para brindar información de emergencia al público en general.

Para deshabilitarlos, siga exactamente las mismas instrucciones, pero en lugar de desmarcar las casillas debajo de la visibilidad, marque las tres casillas.

Terminando

Para guardar sus cambios, primero asegúrese de abrir el menú del editor de páginas, si aún no está abierto. Si no está abierto, haga clic en el botón morado en la parte inferior central de la pantalla.

En la parte inferior derecha del menú, haga clic en Ahorrar. Espere a que muestre una marca de verificación.

Luego, para salir del editor de páginas, busque Salir del constructor visual en la barra de administración y haga clic en él.

¡Felicidades! ¡Estás en camino de convertirte en un experto en edición de páginas!

Si tiene más preguntas, cree un ticket utilizando nuestro sistema de soporte.