001_Tutorial

Este manual explica cómo editar los contenidos habituales de la web de Sociedad Civil Navarra y cómo mejorar la presentación visual de determinadas páginas y noticias cuando el formato automático no es suficiente.

Está pensado para un uso práctico y cotidiano, utilizando el Visual Builder tal y como está configurado en esta web.

El diseño general del sitio, su estructura y su funcionamiento ya están definidos y no forman parte del uso habitual.

Regla general
Lo que no figura en este manual es preferible no tocar.

Acceso al panel de administración

Para editar la web es necesario acceder al panel de administración.

Acceder a la dirección:
https://sociedadcivilnavarra.org/wp-admin
Introducir usuario y contraseña.

Es importante distinguir entre:

Ver la web: lo que ve cualquier visitante.
Editar la web: acceso al panel y a los editores.

Entrar al panel no modifica nada por sí solo.
Los cambios solo se aplican cuando se guardan.

Esto permite trabajar en la web mientras el público la está consultando, sin que vea el proceso de edición.

Ficha 1 - Editar una página ya publicada

FICHA 1 · Editar páginas del menú principal

(Quiénes somos, Junta Directiva, páginas raíz)

1. Ir a Páginas → Todas las páginas.

2. Localizar la página que se quiere editar y abrirla.

3. Pulsar Ver.

4. Habilitar Visual Builder

¿Para qué sirve? / Cómo hacerlo / Importante

FICHA 1 · Editar páginas del menú principal

(Quiénes somos, Junta Directiva, páginas raíz)

¿Para qué sirve?
Actualizar textos, imágenes, vídeos o documentos en las páginas principales de la web.

Cómo hacerlo

1. Ir a Páginas → Todas las páginas.

2. Localizar la página a editar, pasar el cursor por encima, se activan sus opciones y ticar en Ver.

3. Pulsar Habilitar Visual Builder. Está en la parte superior de la vista pública.

4. Una vez se habilita el modo edición pasar el ratón por el contenido hasta que se muestren los recuadros de colores.

5. Pulsar el engranaje del recuadro negro donde se encuentre el texto que se quiere editar.

6. Modificar el contenido dentro del cuadro morado.

7. Pulsar Guardar (botón verde ✅ ).

8. Al terminar toda la página, pulsar el círculo morado con tres puntos y después Guardar.

9. Salir del Visual Builder.

Importante

Estas páginas tienen una estructura definida.
No se crean nuevas secciones ni filas salvo necesidad muy puntual.
El objetivo es actualizar contenido, no rediseñar.

1. Guía Rápida

¿Para qué sirve?

Actualizar contenido.

¿Cómo hacerlo?

1. Ir a Páginas

2. Todas las páginas

3. Ver

4. Habilitar V. Builder.

¿Dónde edito?

Activamos cuadros de colores pasando el ratón sobre los textos.

Pulsar engranaje del recuadro negro.

Editar → Guardar ✅.

Importante

Evitar crear módulos o tocar la estructura.

Explicación detallada + imágenes

1. Edición de páginas principales

Entrar al nuevo editor en 4 pasos

1. Ir a Páginas → Todas las páginas.

2. Localizar la página que se quiere editar y abrirla.

3. Pulsar Ver.

4. Habilitar Visual Builder

Identificar los elementos editables

Al pasar el ratón por los contenidos de la página se activan distintos recuadros de colores:

Azul: secciones (superficie grande)
Verde: filas (superficie media)
Negro: módulos (elementos concretos como texto, imagen, vídeo...)
Un círculo morado con tres puntos situado en la parte inferior derecha. Visibiliza herramientas.

Para editar contenidos nos interesa el recuadro negro, en concreto el icono de engranaje.

Editar Contenido

1. Pulsar el engranaje negro del bloque que se quiere modificar.

2. Se abre una ventana de edición con encabezado morado.

3. Esta ventana se puede ampliar para trabajar más cómodamente, arrastrando desde la esquina inferior derecha.

Se activan la flecha de extensión al pasar el cursor por esta esquina.

4. El editor funciona de forma similar al editor tradicional, pero dentro de este cuadro.

Una vez realizados los cambios, pulsar el botón verde Salvar dentro del cuadro de edición.

Está situado en la parte inferior derecha del cuadro de edición.

Qué modificar y qué no

Dentro del cuadro morado de configuración:

1. Pulsar "Añadir Multimedia"

2. Subir el archivo desde el dispositivo o seleccionarlo desde la biblioteca.

Para que el contenido quede bien situado, el cursor debe estar colocado exactamente en el punto del texto donde se quiere insertar la imagen o el vídeo antes de pulsar “Añadir multimedia”.

Guardar

Repetir pasos por cada bloque de texto a modificar

Si se desean editar otros bloques de texto e imagen de la misma página, se repite la operación:

Pasar el cursor por el contenido, se activan los recuadros de colores y nos centramos en el recuadro negro.
Pulsar el engranaje del recuadro negro
Editar el texto dentro del cuadro de edición con encabezado morado.
Salvar: pulsando el stick verde ✅

Terminar la modificación de la pestaña y salir: Guardar

Salvar y guardar

Salvar: cada texto recién editado (con el stick ✅ verde del interior del cuadro de edición, el de encabezado morado)
Guardar y cerrar una vez hechos todos los cambios deseados en la pestaña se guarda la totalidad pulsando el círculo morado: emerge el botón "Guardar" pulsar, esperar que se estabilice el icono de "guardando" y cerrar.

Este botón guarda el conjunto de cambios realizados en la página.

Pasos en imagen

1. Salvar

Dentro del cuadro de edición en la parte inferior derecha.

2. Pulsar círculo morado

Se encuentra en la parte inferior derecha.

3. Guardar y salir

Aparece en la parte inferior izquierda.

Salir del editor

1. Pulsar Salir de Visual Builder.

2. Comprobar la página ya publicada.

Nota importante

En las páginas del menú principal no se crean nuevas secciones ni filas, salvo necesidad muy puntual.

Estas páginas, muy en especial las "Categorías raíz" que muestran noticias de forma automatizada, tienen una estructura definida y código personalizado oculto que garantiza la estética uniforme y correcta funcionalidad.

El objetivo es actualizar el contenido de estas pestañas, no rediseñar la página.

1a. Repaso en imágenes

de: Edición de páginas principales

Paginas

Elegimos_pagina_moficar

Dar-a-ver

Habilitar-Builder-Visual

Seccion_editadas_colores

Engranaje_negro_

Cuadro_texto_edicion

Extension_cuadro_edicion

Editor_texto

Agnadir_multimedia

Galeria_imagen

Stick_salvar_solo

Circulo_morado

boton_Guardar

Salir_Visual_Builder

Ficha 2 - Publicar una noticia sencilla

2. Guía Rápida

¿Para qué sirve?

Publicar una noticia normal sin maquetación especial.

¿Cómo hacerlo?

1. Ir a Entradas

2. Añadir Entrada

3. Añadir título / Escribir contenido

4. Asignar Categorías.

5. Incluir Imagen destacada y extracto

(es resumen en la portada)

6. Publicar o Actualizar

Nota aclaratoria

El formato se aplica automáticamente.
Es suficiente en la mayoría de los casos.

Explicación detallada + imágenes

2a. Repaso en imágenes

de: Publicar noticia sencilla

Entradas

Anadir_entrada_

Editar_categorias_imagen-destacada_extracto

imagen-destacada_extracto

Editor_tradicional

Habilitar_Visual_entradas_desde_frontal_SCN

2. Publicar una noticia sencilla

(modo recomendado)

Cuando una noticia no requiere una maquetación especial, este es el modo preferente.

Ir a Entradas → Añadir Entrada.

Editar Contenido

a) Escribir el título.

b) Añadir "Imagen destacada", "Extracto", "Categoría", etc.

c) Introducir el texto.

d) Publicar.

1. Entradas

2. Añadir Entradas

3. Asignar categoría.

Editar_categorias_imagen-destacada_extracto

4. Añadir imagen destacada.

5. Añadir texto

6. Publicar

Ficha 3 - Editar una noticia ya publicada

3. Guía Rápida

¿Para qué sirve?

Corregir o actualizar una noticia existente.

¿Cómo hacerlo?

Ir a Entradas → Todas las entradas.
Abrir la noticia.
Modificar el texto o las imágenes.
Pulsar Actualizar.

Nota aclaratoria

Mientras no se active el Visual Builder, se mantiene el formato automático.

Explicación detallada + imágenes

3a. Repaso en imágenes

de: Publicar noticia sencilla

Entradas

Anadir_entrada_

Editar_categorias_imagen-destacada_extracto

imagen-destacada_extracto

Editor_tradicional

Habilitar_Visual_entradas_desde_frontal_SCN

3. Editar una noticia ya publicada

1. Ir a Entradas → Todas las Entradas.

2. Encontrar la entrada (o noticia) a Editar.

3a. Pulsar Editar (edición de detalle menor).

3b. Pulsar "Ver" + "Habilitar Visual Builder" (Si requiere maquetación).

4. Resto de pasos como ya hemos visto en Edición de Páginas.

Ir a Entradas → Todas las entradas.

2. Elegir la entrada a modificar.

⇒ Mismos pasos que los explicados para modificar página.

3. Abrir la noticia pulsando Editar.

Se nos abre el editor conocido.

4. Modificar texto o imagen respetando los tipos de texto (título, párrafo, etc.).

5. Podemos cambiar el título, texto, imagen destacada, extracto, categorías...

* Imagen destacada, extracto, categorías... determina qué resumen se ve en portada de esta noticia.

Ficha 4 - Usar Visual Builder en una noticia

Cuándo usar el Visual Builder en una noticia

Usar el Visual Builder solo cuando sea necesario, por ejemplo:

Textos muy largos que quedan visualmente pesados
Necesidad de combinar texto e imagen en columnas
Inclusión de vídeos
Contenido que requiere una presentación más clara

Maquetar una noticia no es obligatorio.
Es una herramienta para mejorar la lectura cuando el formato simple no funciona bien.

Nunca utilzaremos esta forma de editar en páginas automatizadas (ej. pestañas de las categorías raíz). Puede romper el automatismo.

4. Guía Rápida

¿Cuándo usarlo?

Textos muy largos.
Necesidad de columnas.
Inclusión de varias imágenes o vídeos.

¿Cómo hacerlo?

Abrir la noticia.
Pulsar Ver.
Pulsar Habilitar Visual Builder.
Elegir Reemplazar contenido existente.

¿Qué debes saber?

Solo afecta a esa noticia.
No modifica el resto de la web.

4. Usar Visual Builder en una noticia

Ir a Entradas → Todas las entradas.

2. Elegir la entrada a modificar.

⇒ Mismos pasos que los explicados para modificar página.

3. Abrir la noticia pulsando Editar.

Se nos abre el editor conocido.

4. Modificar texto o imagen respetando los tipos de texto (título, párrafo, etc.).

5. Podemos cambiar el título, texto, imagen destacada, extracto, categorías...

* Imagen destacada, extracto, categorías... determina qué resumen se ve en portada de esta noticia.

6. Actualizar.

Mientras no se active el Visual Builder, la noticia mantiene el formato preconfigurado, es decir conforme a las reglas y modo del editor tradicional.

Una vez activado el "Builder", si se ha optado por editarlo en modo "maquetación media - avanzada" ya no se recomienda volver a editar la misma noticia del modo tradicional porque pueden perderse funcionalidades.

El sistema te avisa antes de pasar de un modo a otro en el caso de retroceder.

* Botón Builder para edición más avanzada.

Ficha 5 - Estructura del Visual Builder

Ficha 6 - Insertar imágenes, vídeos y crear columnas

5 y 6. Guía Rápida

Ficha 5 .- Estructura básica del editor visual

Elementos

Sección: bloque grande (azul).
Fila: estructura de columnas (verde).
Módulo: contenido (texto, imagen, vídeo).

¿Cómo se activan?

Pasando el cursor sobre el contenido cuando se está en modo "edición" con el Visual Builder.

Recomendación

Usar pocas secciones.
Filas simples (una o dos columnas).

Ficha 6 .- Insertar imágenes o vídeos

Cómo hacerlo

Pulsar el ➕ negro para añadir un módulo.
Elegir Imagen o Vídeo.
Seleccionar desde la biblioteca o subir uno nuevo.
Guardar.

Modificar o eliminar

Usar el engranaje (editar) o la papelera (eliminar).

Nota

No cambiar tamaños ni estilos.

Ficha 7 - Insertar un pdf.

7. Guía Rápida

¿Para qué sirve?

Mostrar un documento PDF directamente en la página, con scroll y opción de descarga.

¿Cómo hacerlo?

1. Editar página con Visual Builder.
2. Abrir módulo de Texto.
3. En la pestaña Visual, del módulo pulsar Añadir multimedia y seleccionar el PDF.
4. Cambiar a la pestaña Texto (código).
5. Ir enlace que comienza con:
<a href> y termina con <a>
y sustituir esa etiqueta por:
<embed src> y cerrar con </embed>.

*se expone en rojo la identificación del dato específico a sustituir.

Presentación más adecuada

Copiar la cadena de código que nos ha quedado en el módulo texto y pegarla en un módulo Código . Guardar.

Importante

El cambio debe quedar dentro de los símbolos "< >" Cuidado con ellos.

Ficha 8 - Duplicar página existente

Para crear una página raíz de categoría conservando todos sus automatismos, se debe duplicar una página existente que sirva de base. En "Todas las Páginas", cursor sobre la página a duplicar, se activan las opciones y ahí pulsar "Duplicar esto". Duplicada, la buscamos, que se presentará como copia en "borrador", pulsar "Editar". Se modifican únicamente los elementos necesarios: título, texto introductorio (de haberlo), imagen destacada, extracto y categoría. También modificable, salvo extracto e imagen destacada, en "Edición rápida".
Todo ello puede y debe hacerse preferiblemente desde Editar, donde tendremos que localizar, además, los dos módulos de blog (PC-móvil y tablet) en los que es necesario cambiar la categoría. Para ello pulsar el icono de engranaje, desmarcando la anterior categoría y seleccionando la nueva.
Es imprescindible repetir la selección en ambos blogs, guardar los cambios y, finalmente, añadir la nueva página al menú.
Se recomienda trabajar solo desde el editor tradicional y evitar el Visual Builder para no alterar los automatismos.

8. Guía Rápida

Level

Beginner

Duration

4.5 Hours

Type

Self Guided

Ver proceso en imágenes

Ficha 9 - Agregar nuevas pestañas al menú

La web utiliza varios menús distintos, por lo que este cambio debe realizarse en cada uno de ellos.
Acceder a Apariencia → Menús, seleccionar el menú correspondiente y añadir la nueva página desde el bloque «Añadir elementos al menú», pulsando «Añadir». El nuevo elemento se incorporará como última opción y deberá arrastrarse hasta la posición adecuada.

En los menús móvil, las dos últimas opciones son fijas (Haste Socio y Avisos legales), por lo que cualquier incorporación debe situarse por encima de ellas.
En los menús maqueta 2 y maqueta 4, existe además una opción fija al inicio, correspondiente al icono de inicio (Home), que debe mantenerse siempre en primera posición. Cualquier añadido debe colocarse a continuación.

Guardar los cambios y repetir el proceso en los cuatro menús, para que el elemento se muestre correctamente en todas las versiones de la web.

9. Guía Rápida

Instructor

Angela Charlton

Level

Beginner

Duration

1. Ir a Apariencia → Menús.
2. Seleccionar el menú correspondiente.
3. Añadir la página.
4. Colocarla en la posición correcta.
5. Guardar.

Importante

Esta web tiene varios menús (principal, móvil, interiores).
La pestaña debe añadirse en cada menú que corresponda.
Respetar el orden existente.

Enroll Now