MANUAL DE USO
Web de Sociedad Civil Navarra
Edición de contenidos y uso del Visual Builder
Temas por Fichas de trabajo
- Ficha 1 · Editar páginas del menú principal
- Actualizar contenidos de páginas como Quiénes somos, Junta Directiva y páginas raíz.
- Ficha 2 · Publicar una noticia sencilla
- Crear una noticia normal con el formato automático de la web.
- Ficha 3 · Editar una noticia ya publicada
- Corregir o actualizar textos e imágenes de una noticia existente.
- Ficha 4 · Usar el Visual Builder en una noticia
- Mejorar la presentación de una noticia cuando el formato simple no es suficiente.
- Ficha 5 · Estructura básica del editor visual
- Entender qué son secciones, filas y módulos para no romper la estructura.
- Ficha 6 · Insertar imágenes o vídeos
- Añadir, modificar o eliminar imágenes y vídeos dentro del contenido.
- Ficha 7 · Insertar documentos PDF
- Insertar documentos PDF en páginas o noticias, de forma equivalente al sistema anterior.
- Ficha 8 · Crear una página de noticias por categoría
- Generar páginas que muestren automáticamente noticias según su categoría.
- Ficha 9 · Añadir una nueva pestaña al menú
- Gestionar los distintos menús de la web (principal, móvil e interiores).
- Ficha 10 · Buenas prácticas
- Recomendaciones generales para editar sin errores ni riesgos.
- Ficha 11 · Si algo no queda claro
- Qué hacer cuando no se sabe cómo resolver un cambio.
Manual Paso a Paso con imágenes - Guía Extensa
ÍNDICE - Manual paso a paso con imágenes
1. Acceso al panel de Administración
2. Edición de páginas del menú principal
3. Publicar una noticia sencilla
4. Editar una noticia existente
5. Usar el Visual Builder en una noticia
6. Estructura básica de uso del Visual Builder: habilitar espacios para textos, fotos, vídeos...
7. Crear páginas de listados de noticias por categoría
10. Buenas prácticas
11. Si hay dudas
A. Resumen - Guía Rápida
0. Introducción
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
Si algo no aparece en este manual, no se toca.
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 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.
FICHA 2 · Publicar una noticia sencilla
(forma habitual y recomendada)
¿Para qué sirve?
Publicar una noticia normal sin maquetación especial.
Cómo hacerlo
1. Ir a Entradas → Añadir nueva.
2. Escribir el título.
3. Escribir el texto.
4. Asignar la categoría correspondiente.
5. Añadir imagen destacada.
6. Publicar.
Nota
-
El formato se aplica automáticamente.
-
Es suficiente en la mayoría de los casos.
FICHA 3 · Editar una noticia ya publicada
¿Para qué sirve?
Corregir o actualizar una noticia existente.
Cómo hacerlo
1. Ir a Entradas → Todas las entradas.
2. Abrir la noticia.
3. Modificar el texto o las imágenes.
4. Pulsar Actualizar.
Nota
-
Mientras no se active el Visual Builder, se mantiene el formato automático.
FICHA 4 · Usar el Visual Builder en una noticia
(cuando el formato simple no funciona)
¿Cuándo usarlo?
-
Textos muy largos.
-
Necesidad de columnas.
-
Inclusión de varias imágenes o vídeos.
Cómo hacerlo
1. Abrir la noticia.
2. Pulsar Ver.
3. Pulsar Habilitar Visual Builder.
4. Elegir Reemplazar contenido existente.
Qué debes saber
-
Solo afecta a esa noticia.
-
No modifica el resto de la web.
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).
Recomendación
-
Usar pocas secciones.
-
Filas simples (una o dos columnas).
FICHA 6 · Insertar imágenes o vídeos
Cómo hacerlo
1. Pulsar el ➕ negro para añadir un módulo.
2. Elegir Imagen o Vídeo.
3. Seleccionar desde la biblioteca o subir uno nuevo.
4. Guardar.
Modificar o eliminar
-
Usar el engranaje (editar) o la papelera (eliminar).
Nota
-
No cambiar tamaños ni estilos.
FICHA 7 · Insertar documentos PDF
(equivalente al sistema anterior)
Opción recomendada
1. Editar el contenido con el Visual Builder.
2. Abrir un módulo de Texto.
3. En el editor de texto trabajamos en la pestaña "visual"
4. Pulsar Añadir multimedia y seleccionar el PDF.
5. Pulsar en la pestaña "Texto", pestaña de código.
- Aparecerá algo así: <a href=»https://anebuitronzazpe-psicologa.eus/wp-content/uploads/2025/11/Manifiesto-dia-de-Navarra-031225.pdf» rel=»attachment wp-att-987533834″>Manifiesto día de Navarra 031225</a>
- Cambiar lo que aquí pongo en rojo: < a href=»https://anebuitronzazpe-psicologa.eus/wp-content/uploads/2025/11/Manifiesto-dia-de-Navarra-031225.pdf» rel=»attachment wp-att-987533834″>Manifiesto día de Navarra 031225 </a>
- Cambiar a href por embed src y la a del final por embed
Resultado:
- < embed src=»https://anebuitronzazpe-psicologa.eus/wp-content/uploads/2025/11/Manifiesto-dia-de-Navarra-031225.pdf» rel=»attachment wp-att-987533834″>Manifiesto día de Navarra 031225 </embed>
- Cuidado no quitar < >
5. Guardar.
Se mostrará el documento con scroll, descargable, etc.
El texto con el nombre del archivo se puede borrar si no se desea.
Opción alternativa igual de válida pero con resultado más adecuado (solo si es necesario)
-
Copiar el código generado en el módulo texto.
- Abrir el selector de módulos (el "+" del recuadro negro)
- Seleccionar módulo de código.
-
Pegarlo
-
Guardar y publicar.
FICHA 8 · Crear una página de noticias por categoría
¿Para qué sirve?
Mostrar automáticamente noticias de una temática concreta.
Cómo hacerlo
1. Ir a Páginas.
2. Duplicar una página de listado existente.
3. Editar la página duplicada.
4. Cambiar título, imagen y texto introductorio.
5. Abrir el módulo de listado de noticias.
6. Seleccionar la categoría.
7. Repetir la selección en:
-
-
Ordenador
-
Tablet
-
Móvil
-
8. Guardar y publicar.
Importante
-
El diseño ya está configurado.
-
No tocar estilos ni opciones avanzadas.
FICHA 9 · Añadir una nueva pestaña al menú
(menús específicos de esta web)
Cómo hacerlo
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.
FICHA 10 · Buenas prácticas
Usar
-
Estructuras simples.
-
Guardar con frecuencia.
-
Visual Builder solo cuando haga falta.
Evitar
-
Cambiar colores o tipografías.
-
Usar efectos decorativos.
-
Probar opciones sin saber qué hacen.
-
Acceder a ajustes avanzados.
FICHA 11 · Si algo no queda claro
Si una página o noticia no queda como se espera y no se tiene claro cómo mejorarla:
-
dejarla en formato sencillo
-
y consultar antes de hacer cambios complejos.
B. Guía Paso a Paso con imágenes
MANUAL DE USO
Web de Sociedad Civil Navarra
Edición de contenidos y uso del Visual Builder
ÍNDICE
1. Acceso al panel de Administración
2. Edición de páginas del menú principal
3. Publicar una noticia sencilla
4. Editar una noticia existente
5. Usar el Visual Builder en una noticia
6. Estructura básica de uso del Visual Builder: habilitar espacios para textos, fotos, vídeos...
7. Crear páginas de listados de noticias por categoría
10. Buenas prácticas
11. Si hay dudas
0. Introducción
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
Evitar tocar lo que no esté recogido en este manual.
1. 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.
2. Edición de páginas del menú principal
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
- 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.
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.
4. El editor funciona de forma similar al editor tradicional, pero dentro de este cuadro.
Está situado en la parte inferior derecha del cuadro de edición.
Qué modificar y qué no
Modificar únicamente
- Textos
- Imágenes
- Vídeos
- Documentos
Incluir imágenes o vídeos integrado en bloque de texto (modo tradicional conocido pero dentro del cuadro de edición)
Guardar
Repetir pasos por cada bloque de texto a modificar
- 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.
Salir del editor
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.
3. 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.
3. Introducir el texto.
4. Editar una noticia existente
- Ir a Entradas → Todas las entradas.
⇒ Mismos pasos que los explicados para modificar página.
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.
5. Usar el 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.
Los pasos serán los siguientes.
Nivel de manejo 1: Editar sólo elementos que hay
A. Editar con Builder una entrada existente.

- Abrir la noticia desde "Todas las Entradas".
- Pulsar Ver.
La dinámica para editar una entrada (noticia) con el Builder es la misma que ya hemos visto en edición/modificación de Páginas.
⇒ Si necesita volver a consultar cómo se entra con el Builder a editar una página ya exitente pulsar aquí.
Nivel de manejo 2: Control funcional de filas y módulos
En noticias se recomienda usar pocas secciones y filas sencillas.
A. Incluir imágenes o vídeos de forma independiente.
6. Estructura básica del Builder: habilitar espacios para texto, imagen, vídeo, etc.
El manual aborda este punto de mayor alcance a menor.
- El "+" azul abre secciones. Superficie grande. Es un nivel que no corresponde en este momento.
- El "+" verde añade filas. Superficie media.
- El "+" negro añade módulos menores como son texto, imagen, vídeo, etc. Añadir pdf. se verá más adelante.
A. Estructuras recomendadas para noticias
Opción A · Texto e imagen en columnas (facilitado por el Builder)
- 1 sección
- 1 fila de dos columnas
- Texto en una columna, imagen en la otra
Opción B · Contenido en vertical (por defecto con el editor tradicional)
- Varias filas
- Cada fila con:
- Texto
- Imagen
- Vídeo
Es preferible usar varias filas simples antes que estructuras complejas.
B. Manejo de Filas y Columnas
a) Si necesitamos editar fila existente
Las columnas se duplican iguales.
Si necesitásemos cambiar la proporción:
Selección y salir.
La distribución que aparece en la imagen anterior como seleccionada (franja más negra) suele ser muy adecuada para noticias: columna estrecha para albergar imagen y columna ancha con texto.
El texto que hubiera en la columna también se ha duplicado. Se elimina dando a la papelera y con el "+", se abre "Insertar módulo", añadimos el del icono "T" Texto.
b) Si necesitamos añadir fila
![]()
Los cuadros verdes indican la proporción que ocupará cada columna dentro de la fila.
4. Salimos.
En la imagen podemos ver cómo en el centro de cada columna aparece el símbolo "+" sobre fondo negro que nos invita a añadir un módulo: texto, imagen, vídeo, documento...
Abrimos un campo Texto
El código trasnformado a "embed src" en el "módulo Texto", podemos copiarlo y pegarlo en el módulo código y el pdf. se muestra de una forma algo más precisa. Pero si se deja en módulo texto es correcto también.
C. Mover contenido sin romper nada.
- Los módulos se pueden arrastrar.
- Las filas completas también se pueden mover.
- No es necesario borrar para reorganizar.
Si algo no queda bien, se puede recolocar.
D. Deshacer cambios y recuperar versiones.
- Si se comete un error:
- Usar el botón Deshacer (flecha retroceso)
- Acceder al Historial de cambios (reloj).
Mientras no se cierre sin guardar, siempre se puede volver atrás.
7. Crear una página que muestre noticias con una nueva categoría
Se indicarán dónde al editar se debe integrar esta circunstancia.
Nueva categoría
Nueva página que muestre noticias de categoría recién creada o distinta de las actuales
⇒ Elegir una página de Categorías Raíz ya existente que sirva de base.
Ej. "Educación"
- La opción "Duplicar esto" no es una función propia de wordpress, se ha incluido en ese sitio web principalmente para facilitar tareas como la presente: que el/a usuario/a pueda crear (clonar) pestañas con funciones avanzadas integradas y otras conservando la maquetación base.
- Modificar páginas raíz debe ser excepcional.
- Las pesañas de Categorías Raíz tienen en oculto código específico creado para ellas y diversos automatismos. Se recomienda evitar ediciones en este tipo de páginas.
- Parrafo introductorio de pestaña:
- Sólo en párrafo del encabezado de estas pestañas está configurado como "módulo texto" directamente editable. En caso de necesitarse su edición hay que tener en cuenta que tampoco es un campo de texto simple. Debe incluirse el mismo texto en todos los apartados donde este párrafo (introductorio de la categoría) aparezca tanto si se ve nítido, como borroso. El texto borroso se activará con condiciones específicas para tamaños más pequeños de pantalla y se desactivará el texto que se ve nítido en la edición en PC. Es decir, si se edita debe escribirse lo mismo en todos los párrafos iguales que veamos aunque estos nos parezca que están borrosos.
- Parrafo introductorio de pestaña:
Editar Página Duplicada
Entramos a "Editar"
- Nota: datos como título, categorías, borrador o publicado podemos cambiarlo también en "Edición rápida" pero en este momento, tras haber duplicado página, es preferible entrar en "Editar" y hacer el cambio completo de datos evitando así arrastrar información de la pestaña copiada.
- Blog - PC y Móvil
- Blog - Tablet
- Blog - PC y Móvil
y se nos abre la siguiente ventana.
![]()
- Blog - Tablet
8. Insertar un pdf. legible desde la web
2. Damos a "Añadir multimedia" y seleccionamos el pdf. que queremos exponer.
Resultado
Manifiesto día de Navarra 031225
El nombre del documento que aparece ahí se puede quitar seleccionando el texto y borrar.Mejor si se trae hecho del cuadro de texto antes de copiar la cadena de código aquí.
- Ir a Apariencia → Menús.
- "Menú Principal Maqueta 1"
- "Menú Principal Maqueta 2"
- "Menú Principal Maqueta3-Móvil"
- "Menú Principal Maqueta4-Móvil"
-
- Arrastrar la nueva pestaña hasta colocarla en el orden que queramos.
Particularidades de cada menú
Aspectos a tener en cuenta
7. En los menús "móvil"
- "Menú Principal Maqueta3-Móvil"
- "Menú Principal Maqueta4-Móvil"
Son el botón "Colabora" y Aviso Legal/Privacidad
8. En los menús interiores
- "Menú Principal Maqueta 2"
- "Menú Principal Maqueta4-Móvil"
11. Buenas prácticas
- Usar estructuras simples.
- Priorizar la lectura clara.
- Guardar los cambios con frecuencia.
- Maquetar solo cuando sea necesario.
Evitar:
- Cambiar colores o tipografías.
- Usar efectos decorativos.
- Probar opciones sin saber su función.
- Tocar ajustes avanzados.




