Seleccionar página

Ayuda para editar con DIVI builder

Micromanual realizado para ayudar a editar con el constructor DIVI

EDITAR CON DIVI BUILDER

Editar con el Divi builder (clic en la pestaña de color fucsia)

Divi es el tema (entorno o conjunto de plantillas) de Word Press que empleamos. Permite editar en el entorno clásico de WP (etiqueta verde, más sencillo pero más rígido) o emplear el “Constructor Divi” (etiqueta fucsia, flexible, con muchas posibilidades de edición), un plugin muy flexible.

Al hacer clic en la pestaña Divi builder, se abre una pantalla con tres cuadros:

Construir desde cero: empezar sin plantilla, desde cero, definiendo y empleando los módulos.

Elegir diseño: elegir diseños pre-definidos o plantillas. Hay muchas plantillas, con subfamilas de plantillas, pero son algo complejos. No los empleéis por ahora.

Clonar página existente. RECOMENDADO: te permite “clonar” o copiar alguna de las páginas que ya han sido publicadas en nuestra web. Puedes “Añadir página”, ponerle un título que empiece por “A”, para que se te sitúe arriba del todo, en el escritorio, y clonar la que quieras.

Una vez cargada la plantilla, por clonación de cualquier página, puedes empezar a explorar su estructura:

Sección: etiqueta azul. No usar de momento, porque como está creada la plantilla, es preferible actuar en los otros dos rangos. La Sección tiene varias posibilidades. Secciones estándar, Secciones de anchura completa, y Secciones especiales (con estructuras alternativas), cada una de ellas con particularidades específicas. La mayor parte de los módulos están asociados a las secciones estandarizadas. De momento no las toquéis. Se podría definir la “sección” como un “Armario”.

Fila: etiqueta verde. Es la estructura de cada nivel, se podría considerar como  y se puede modificar para obtener una vista de banda única, doble, triple, 3/4, etc. La estructura de las secciones se modifica haciendo clic en una cuadrícula de la pestaña verde, parecida a una rejilla que te permite elegir un espacio, dos, tres o cuatro, y con diferentes proporciones. Se podría definir la “fila” como un “nivel”, en horizontal, de un armario

Módulo: etiqueta gris oscuro. Es el espacio principal porque en ellos, en los módulos, se alojan los contenidos. Se podrían definir los “módulos” como los “cajones” de cada fila y de cada armario.

TRABAJANDO CON MÓDULOS (etiqueta gris que se activa al hacer clic sobre ellos):

Botón de módulo «crucecita»: está a la izquierda del todo. Sirve para enganchar el módulo y moverlo (con cuidado) por el interior de la Fila o Sección. También se pueden coger y moverlos a otra Fila o Sección.

Botón de módulo «ruedecita dentada» (ajustes del módulo): en cada caja de módulo (también en las filas o secciones), el botón “rueda dentada” es el principal. Haciendo clic en él, se modifica o adaptan los ajustes de la plantilla cargada desde la Biblioteca. Conviene explorarla de arriba a abajo. Se pueden ir guardando cambios sin publicar, y emplear la “Vista Previa de los cambios” para observar cómo va quedando la cosa

Botón de módulo «rectángulo duplicado»: pequeño rectángulo para clonar (duplicar) un módulo (también una sección o fila).

Botón de módulo «flecha hacia abajo dentro de un círculo»: no lo uséis de momento, no es para guardar lo que estáis editando y conviene no emplarla al principio, pues es para almacenar un módulo, fila o sección que os haya quedado lo suficientemente chula como para volver a emplearla en otra edición.

Botón de módulo «tres puntitos verticales» No lo uséis de momento, pues es para tareas más complejas.

Abajo del todo: de vez en cuando hay que “Guardar”, abajo a la derecha, tras hacer click previamente en el botón redondo fucsia “con tres puntos” también de abajo. Explorad los botones de abajo: permiten varias cosas y recuperar una edición anterior.

Para empezar explorad haciendo clic en la “rueda dentada”, y después en las pestañas “Contenido”, con opción de editar texto, imágenes asociadas al texto y enlaces. O bien la pestaña «Diseño» (para cambiar tipos de letra, colores, y diseños).

PARA SUBIR CONTENIDOS EN GENERAL

Pasos:

1º. Entrada como visitante: https://investiga.puenteromano.net (cualquier persona puede visitar la web y los contenidos publicados)

2º Entrada para editar: https://investiga.puenteromano.net/wp-login (o admin, es lo mismo)

Puedes estar dado de alta con el perfil de: administrador (el rango más alto), editor, autor, colaborador.

El Administrador define los menús y la estructura, así como los comandos generales y opciones de configuración de la propia web.

El autor puede “Publicar” y subir “contenidos” (texto, imagen, video, audio, etc) pero no puede configurar la estructura de la web, que es privilegio del perfil “Administrador”

El “Editor” tiene autonomía para publicar contenidos online (OJO: si se publica una imagen o texto hay que estar seguros de que está libre de derechos o que es nuestra, propia. Otra cosa es enlazar nuestra web a otras, aunque hay que ser cuidadosos con los enlaces: no se puede reenviar a nadie a sitios inadecuados).

Cómo editar, actualizar o publicar contenidos.

Para editar hay que entrar como editor, no como visitante simple. Hay que conocer nuestro Nombre de usuario y contraseña para entrar como editor. Es el administrador de la web quien puede dar de alta a los nuevos usuarios.

Y se entra, como en todas las de Word Press, con esta ruta: https://investiga.puenteromano.net/wp-login, tecleado arriba, en la barra de direcciones.

Una vez dentro, las pestañas principales son:

Escritorio: banda negra a la izquierda de la pantalla, con varios espacios. Los principales, para subir contenidos, son:

Medios: para subir imágenes, videos, etc

Páginas: para publicar páginas (empezad añadiendo una página y, para que se sitúe arriba del todo, tituladla “AAA Pruebas”)

Proyectos: para publicar unidades o espacios homogéneos de una serie (posible sólo en Divi, pensados para visualizarlos después en el módulo “Portafolio”. Pero dejad esto para más adelante.)

Entradas: para publicar noticias o eventos ordenados por fechas (adecuado para publicar en el módulo “Blog”)

__________________________________

RUTAS PRINCIPALES PARA SUBIR CONTENIDOS:

Trabajando con «Proyectos» (desde la banda negra del Escritorio).

Las noticias de prensa o comunicados, más ligados al calendario y efímeros, es mejor editarlos como “entradas”, pero los Proyectos se prestan mejor a su visibilidad en portafolios o carruseles. Están más próximos a las páginas que las “entradas”. Pero todos ellos son intercambiables.

Proyectos/Añadir nuevo

Poner título y Usar el Constructor Divi, como antes.

Puedes clonar un «Proyecto (ejemplo)» o cualquier plantilla de las predefinidas, si lo prefieres. Elige una sencilla. También puedes «clonarte» tu propia página para cada proyecto.

Una vez cargado el «Proyecto«, o desde cero, hay que ir modificando o añadiendo módulos: textos, imágenes, vídeos y demás módulos que estén cargados en el diseño predefinido o en la plantilla que tengamos guardada.

Click en Publicar/Guardar (ambos botones son el mismo): clic en el botón redondo de abajo y después en el botón «Guardar» o «Publicar» si es la primera vez. (OJO: no hacer clic nunca en la pestaña verde “USAR EL CONSTRUCTOR POR DEFECTO”, porque lo desmonta todo).

Los “Proyectos” aparecen publicados en orden de subida. Se pueden re-ordenar manualmente editando la fecha y hora de la edición de cada “proyecto”, a la derecha, arriba, fuera del Constructor, encima del botón de Actualizar, “forzando” al editor para que los reubique.

Las imágenes de los proyectos deben ser homogéneas, para conseguir un efecto similar en el carrusel, cuando se haga, o en la página-resumen de todos los proyectos. Las imágenes se pueden editar y recortar en “Medios/Biblioteca, haceendo clic en el botón de “Editar”.

Si queremos que nuestros “Proyectos” o unidades básicas de información fija, puedan aparecer en un “Portafolios”, con carrusel incluido, hay que crear las Categorías correspondientes. Se pueden crear directamente desde cada Proyecto, a la derecha del todo, fuera del Divi, o bien en el Escritorio/Proyectos/Categorías de Proyecto (No confundir con “Categorías de Entradas”, que son para organizar los blogs).

_____________________

Trabajando con Entradas:

Entradas/Añadir nueva:

Este es el modo idóneo para subir textos como “Artículos, Noticias o Eventos”, porque se integra en el modulo pre-instalado de “Blog” (No conviene emplearlo hasta saber cómo va todo). Es el modo conveniente para noticias porque se integra en un visor de “Recientes” y traen predefinidos códigos de imagen “Leer más” etc, propios de los blogs.

Se pone el Título, se rellena el cuerpo.

En las entradas se puede emplear el «Constructor por defecto (en verde). Es más sencillo y menos flexible, pero para noticias y enlaces sencillos es suficiente.

Se añaden las imágenes que se consideren oportunas.

Se selecciona la Categoría correspondiente (ya hay algunas creadas, pero se pueden crear nuevas categorías si se preven múltiples entradas del mismo tipo) y se hace “clic”.

Las categorías están fuera del Divi, a la derecha, antes de hacer clic en el “Usar el Constructor Divi”: hay que hacer clic (si es el caso del contenido) en la categoría correspondiente.

(También hay “Categorías” para los “Proyectos”, pero están en el apartado “Proyectos”, y no son las mismas que las de “Entradas”. Cuando se crea una “Categoría”, hasta que no haya un Proyecto o Entrada asignados, no aparecen en los carruseles, pero esta parte es para más adelante)

A la derecha también, y más abajo está la caja Asignar imagen destacada, que es donde haremos click para seleccionar la imagen que aparecerá en el resumen del Proyecto o Entrada en la página general que resume todos los Proyectos o Entradas, además de los blogs o carruseles específicos.

_______________________________

Trabajando con «Medios».

Medios: espacio donde se alojan todas las imágenes, audios o videos y documentos (en PDF preferiblemente)

Medios/Biblioteca: muestra todas las imágenes, videos y audios ya subidos a la web, con la URL a la derecha para poder enlazarlos desde las cajas de los módulos grises (haciendo clic en la «ruedecita dentada» del Constructor Divi

Medios/Añadir nuevo: clic para subir archivos desde tu ordenador a la web.

OJO: no se pueden subir imágenes de más de 1 mega por defecto, porque ralentizan mucho la carga de contenidos. Si se necesita subir archivos de más peso tiene que ser a través del perfil de “Administrador”.

Videos: Podéis embeber o insertar vídeos, mediante el módulo «Vídeo», con tres procedimientos:

1. Pegando en el interior del módulo “Video” el código obtenido en Youtube desde el botón de «Compartir».

2. Con los videos propios, subiéndolos primeramente como “medio“, en “Añadir medio”, y copiando la URL, una vez subido a la Biblioteca de Medios, e insertándola en el módulo “viddeo” a continuación.

3. Con el módulo “Código” para aquellos videos subidos a Internet que permiten “embeber” su contenido a través de código. En esas webs suele aparecer un botón que sugiere “copiar código”, “insertar” o “iframe”.

_______________________

Trabajando con «Páginas»

Páginas/Añadir nueva

Ponle título a la página propia. Es muy importante titular la página antes de seguir.

Después de poner el título, clic en “Use Divi Builder” (OJO: hay que dejar que cargue el Divi antes de ponerse a rellenar campos; tarda unos segundos). Quienes usan el Divi pueden usar también el “Constructor por defecto”, pero nunca a la vez, pues la edición de contenidos puede entrar en conflicto.

__________________