Micromanual para editar con DIVI
MICROMANUAL PARA SUBIR CONTENIDOS CON PLANTILLA.
Opcional: DESCARGAR MICROMANUAL EN PDF
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.
Pasos:
1º. Entrada como visitante: https://artes.puenteromano.net (cualquier persona puede visitar la web y los contenidos publicados)
2º Entrada para editar: https://artes.puenteromano.net/wp-admin
Estáis dados de alta con el perfil de dado de alta con el perfil de: editor.
El Administrador define los menús y la estructura, así como los comandos generales y opciones de configuración de la propia web.
El Editor 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 definir la estructura interna de las páginas que crea, así como para publicarlas 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.
Enlace para editar: se entra, como en todas las de Word Press, con esta ruta: https://artes.puenteromano.net/wp-admin, 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: si no la tenéis ya editada de etapas anteriores, empezad añadiendo una página y, para que se sitúe arriba del todo, tituladla “AAA Pruebas”, para borrarla después. Si ya tenéis página de pruebas o de edición, continuad.
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 «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, porque se pierden los contenidos. Como en este sitio web se usa el DIVI para todo, se recomienda NO EMPLEAR EL CONSTRUCTOR POR DEFECTO.
Editar con el Divi builder (clic en la pestaña de color fucsia)
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. Hay tres niveles de edición en cada página, entrada o proyecto, que se identifican con un color: azul para la “sección”, verde para la “fila” y gris oscuro para el “módulo”
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, y también para mover filas o secciones dentro de cada página.
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 emplearla 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).
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 (sólo para vídeos de poco peso), 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».