MANUAL DE USO - SITIOS WEB - FE Y ALEGRÍA by Federación Internacional de Fe y Alegría

MANUAL DE USO SITIOS WEB

FE Y ALEGRÍA

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA

1. Fuentes Tipográficas ........................................................................................................ 3 2. Colores ............................................................................................................................. 4 3. Estilo de Imágenes ........................................................................................................... 6 4. Ingreso a la Administración .............................................................................................. 7 5. Descripción de Interfaz de la Administración .................................................................... 9 6. Añadir una nueva noticia ............................................................................................... 10 6.1 Publicar una nueva noticia ........................................................................................... 11 7. Añadir una nueva Página................................................................................................ 12 7.1 Publicar una nueva página ........................................................................................... 13 8. Editor de texto ............................................................................................................... 14 9. Cambiar las fotos de la presentación de la página del Inicio ........................................... 14 10. Botones........................................................................................................................ 15 11. Listar publicaciones del blog......................................................................................... 18 12. Accordion ..................................................................................................................... 28 13. Círculos con Imágenes (Hover) ..................................................................................... 31 14. Videos .......................................................................................................................... 36 15. Apariencia .................................................................................................................... 37 15.1 Widgets ...................................................................................................................... 38 15.2. Menús ....................................................................................................................... 40 16. Contact ........................................................................................................................ 41 17. Ninja Forms .................................................................................................................. 42 18. Usuarios ....................................................................................................................... 43 19. Calendario.................................................................................................................... 44 20. Redes Sociales .............................................................................................................. 45 21. Formato de recursos (Imágenes y vídeos) del sitio ....................................................... 50

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA

1. Fuentes Tipográficas 1.1. Para Títulos y subtítulos: La fuente de los títulos es Fira Sans con el color: #aa0f16, utilizando letras mayúsculas únicamente en la primera letra de las palabras principales con las siguientes opciones para cada etiqueta de encabezado: <h1> font-size: 34px; line-height: 34px; font-weight: bold; <h2> font-size: 30px; line-height: 30px; font-weight: bold; <h3> font-size: 24px; line-height: 24px; font-weight: bold; <h4> font-size: 18px; line-height: 18px; font-weight: bold; <h5> font-size: 16px; line-height: 16px; font-weight: bold;

Ejemplo: Somos Fe y Alegría 1.2. Para párrafos (texto): La fuente de los textos es Fira Sans con el color: #3a3a3a, los textos deben estar justificados además de las siguientes opciones de etiqueta: <p> font-size: 15px; font-weight: 400; line-height: 29px; Ejemplo:

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA

2. Colores

#aa0f16 Color Principal

#3a3a3a Color Textos

- Títulos - Subtítulos - Elementos - Hover

#e4e4e4 Color Sección Inferior

#727176 Color Footer Copyright - Bordes y color de Botones

Colores Secundarios

#749c39

#f7ac13

#5583bf

Textos

Usados para identificar elementos, como por ejemplo contenedores que hacen referencia a la radio.

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA 2.1. Color Principal El color principal del sitio es el #aa0f16.Este color debe estar presente en los títulos, subtítulos, botones y elementos adicionales dentro del sitio. 2.2. Títulos y Subtítulos Para los títulos y Subtítulos el color a utilizar es el principal: #aa0f16. 2.3. Texto Para párrafos de texto el color es: #3a3a3a. 2.4. Colores para Sección inferior Footer: Esta sección debe tener el siguiente color de fondo: #e4e4e4 con el color predeterminado del texto e iconos #3a3a3a como lo muestra la siguiente imagen:

Footer Copyright: Esta sección debe tener el siguiente color de fondo: #727176 con el color de texto #fff como lo muestra la siguiente imagen:

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA

3. Estilo de Imágenes Las imágenes deben tener los bordes redondeados, para esto en las opciones de estilo de imagen seleccionamos Rounded:

El resultado sería este:

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA

4. Ingreso a la Administración El sitio web está realizado con la plataforma de gestión de contenidos WordPress, para ingresar a la administración se deben seguir los siguientes pasos: 4.1. Ingresar al enlace de administración correspondiente al país: - Federación Internacional > https://www.feyalegria.org/wp-admin/ - Venezuela > https://www.feyalegria.org/venezuela/wp-admin/ - Italia > https://www.feyalegria.org/italia/wp-admin/ - Perú > https://www.feyalegria.org/peru/wp-admin/ - Colombia > https://www.feyalegria.org/colombia/wp-admin/ - Honduras > https://www.feyalegria.org/honduras/wp-admin/ - Ecuador > https://www.feyalegria.org/ecuador/wp-admin/ - Uruguay > https://www.feyalegria.org/uruguay/wp-admin/ - Guatemala > https://www.feyalegria.org/guatemala/wp-admin/ - Chile > https://www.feyalegria.org/chile/wp-admin/ - Panamá > https://www.feyalegria.org/panama/wp-admin/ - Congo > https://www.feyalegria.org/congo/wp-admin/ - Nicaragua > https://www.feyalegria.org/nicaragua/wp-admin/ - Argentina > https://www.feyalegria.org/argentina/wp-admin/ - Brasil > https://www.feyalegria.org/brasil/wp-admin/ - Paraguay > https://www.feyalegria.org/paraguay/wp-admin/

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA Cargará la página como en la imagen:

4.1.2. Para entrar a la administración, ingresar los datos asignados previamente: • Usuario o Correo electrónico • Contraseña Luego hacer clic en el botón Acceder y con esto ya entramos a la administración cómo se ve en la siguiente imagen:

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA

5. Descripción de Interfaz de la Administración Al lado izquierdo de la ventana de administración, visualizamos el panel de control del sitio web cómo lo muestra la siguiente imagen:

En este panel se ubican todas las opciones de configuración y funciones del sitio, a continuación, se nombran las más relevantes:

• Entradas: Sección para publicar y editar las noticias que se visualizan en el • • • •

módulo del Inicio, llamado Novedades. Páginas: Sección para publicar y editar las páginas del sitio web. Contact: Plugin (Función) para crear Formularios. Ninja Forms: Plugin (Función) para crear Formularios. Apariencia: Apartado donde se encuentran configuraciones como: o Temas: Plantillas. 9

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA o Personalizar: Configuraciones generales de visualización. • Widgets: Permiten añadir bloques de texto, imágenes, enlaces, menús y demás contenido en ciertas posiciones de la web. • Menús: Publicación y edición de los menús del sitio web. • Usuarios: Gestión de roles de perfiles de administración del sitio web. • Ajustes: Configuración y parámetros del sitio web, aquí se encuentran desde el nombre del sitio hasta la estructura de los enlaces.

•

Theme options: Configuraciones generales de visualización.

6. Añadir una nueva noticia Para publicar una noticia vamos a la sección del panel izquierdo > Entradas luego > Añadir nueva, aparecerá de edición como esta:

Después, dar clic en el botón WPBakery Page Builder, tal cual como se visualiza en la anterior imagen.

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA

6.1 Publicar una nueva noticia Después de realizar el paso anterior, carga el editor clásico del sitio web. En la siguiente imagen se nombran los pasos para completar este proceso. 1. Título Añade el título de la noticia que vas a publicar. 2. Editor Visual Es la herramienta con la cual puedes crear elementos como cajas de texto y subir imágenes. (Ver el siguiente vídeo) > https://www.youtube.com/wa tch?v=mDb_-V7Eb5k 3. Categorías Seleccionar la categoría a la cual pertenece tu noticia 4. Opciones Nd Header Image Selecciona la imagen que quieres en la parte superior. La imagen debe ser formato jpg y tener una medida de 1240 px de ancho x 300 px de alto Peso no mayor de 400 KB 5. Imagen destacada Selecciona la imagen destacada que desees. La imagen debe ser formato jpg y tener una medida de 570 px de ancho x 380 px de alto 6. Clic en Publicar

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA

7. Añadir una nueva Página Para publicar una noticia vamos a la sección del panel izquierdo > Páginas luego > Añadir nueva, aparecerá de edición como esta:

Después, dar clic en el botón WPBakery Page Builder, tal cual como se visualiza en la anterior imagen.

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA

7.1 Publicar una nueva página Después de realizar el paso anterior, carga el editor clásico del sitio web. En la siguiente imagen se nombran los pasos para completar este proceso. 1. Título Añade el título de la página que vas a publicar. 2. Editor Visual Es la herramienta con la cual puedes crear elementos como cajas de texto y subir imágenes. (Ver el siguiente vídeo) > https://www.youtube.com/wa tch?v=mDb_-V7Eb5k 3. Opciones Nd Header Image Selecciona la imagen que quieres en la parte superior. La imagen debe ser formato jpg y tener una medida de 1240 px de ancho x 300 px de alto Peso no mayor de 400 KB

4. Clic en Publicar

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA

8. Editor de texto Cuando queremos añadir un bloque de texto contamos con un editor que brinda la facilidad de añadir estilos de una forma similar al Word.

Aquí podemos asignar el estilo correspondiente de cada texto ya sea un párrafo o título además de añadir Negritas o cursivas, listar, añadir enlaces entre otras funciones.

9. Cambiar las fotos de la presentación de la página del Inicio En el panel lateral vamos al apartado llamado Slider Revolution. Para editar la presentación actual seleccionamos la opción Open Editor (icono lápiz) sobre el Módulo que se desee editar o también es posible crear un módulo nuevo en New Blank Module Aparecerá el editor de la presentación. Para entender las funciones se recomienda ver el siguiente vídeo: https://www.youtube.com/w atch?v=WrG3ASgtDGM

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA

10. Botones Botones Leer más o Ver más: Los botones del sitio web deben tener las siguientes configuraciones en el editor: Primero desactivar el modo fácil del editor: Después: • Typography: color: #727176 ; size: 12px ; LineHeight: 1em ; Text: (Leer más o Ver más) • Border: width: 2px ; style: solid; color: #727176 ; Radius: 4px • Padding: top: 4px ; right: 34px ; bottom:8px ; left:34px ; unit: px • Margin: top: 4px ; right: 10px; bottom: 4px; left:10px ; unit: px • Hover: Title color: #ffffff • Hover-background: Type: Color; Color: #aa0f16 ; Hover Effect: Fade; • Hover – Border: Width:2px ; Style: Solid; color: #aa0f16; radius: 4px Y damos clic en Guardar Cambios. Así deberían quedar las configuraciones:

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA Además de que su texto solo utilice mayúsculas en las palabras principales Para que se vea así:

Al poner el cursor sobre el botón es decir la función Hover, debe visualizarse de la siguiente forma:

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA

11. Listar publicaciones del blog Para crear un módulo que muestre las diferentes publicaciones del blog como lo muestra la siguiente imagen:

Los pasos a seguir son: 11.1. En el editor visual de la página donde se quiera mostrar el módulo, agregar un elemento tipo Grid Post, como lo muestra la imagen

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA

11.2. Primero desactivar el modo fácil del editor: Después los ajustes generales son estos: Columns Number: (Depende del espacio del módulo, si este ocupará el ancho de la pantalla se recomienda utilizar 4 columnas) Gap: 30

Los demás ajustes son:

Source: • • • • • •

Data source: Entradas Taxonomies or Tags: (Seleccionar la categoría que se desea listar) Sort by: Date Order: Descending Items Per Page: (Items por página) en este caso 12 Include \ Exclude taxonomies?: Include

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA (Ver imagen con ajustes):

Post: Seleccionar la 3ra opción:(Ver imagen con ajustes):

Item: • • • • •

Tiles size: Fixed Height Thumbnail Height: 300px Image Quality: large ; Title: Title Overflow: Disable ; Title – Typography: Typography Preset: Montserrat - Title 20

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA • • • • • • •

Meta: Date Meta – Typography: Typography Preset: Lato – Typography Date – Typography: Typography Preset: Lato – Date Excerpt – Typography: Typography Preset: Lato – Excerpt Excerpt – Padding: Top: 10 ; Right: 0 ; Bottom: 15 ; Left: 0 ; Content – Background: Type: Color ; Color: #ffffff ; Content – Border: Top: 1px ; Right: 1px ; Bottom: 1px ; Left: 1px ; style: solid ; color: #e4e4e4 ; radius: 5px ; • Content – Padding: Top: 25px ; Right: 25px ; Bottom: 25px ; Left: 25px ; Unit: px (Ver imagenes con ajustes):

MANUAL DE USO SITIOS WEB - FE Y ALEGRÍA

Hover state: • • • •

Hover State: Overlay in Effect: Fade ; Background Color: rgba(240,240,240,0.5) ; Lightbox Icon: Disable Lightbox: Disable ; Read More Icon: Disable Read More: Disable ;

(Ver imagen con ajustes):