{"id":2262,"date":"2021-04-21T16:09:27","date_gmt":"2021-04-21T14:09:27","guid":{"rendered":"https:\/\/investiga.puenteromano.net\/?page_id=2262"},"modified":"2021-04-21T16:23:17","modified_gmt":"2021-04-21T14:23:17","slug":"ayuda-con-divi-builder","status":"publish","type":"page","link":"https:\/\/investiga.puenteromano.net\/index.php\/ayuda-con-divi-builder\/","title":{"rendered":"Ayuda con Divi builder"},"content":{"rendered":"<p>[et_pb_section fb_built=\u00bb1&#8243; fullwidth=\u00bbon\u00bb _builder_version=\u00bb4.9.4&#8243; _module_preset=\u00bbdefault\u00bb][et_pb_fullwidth_header title=\u00bbAyuda para editar con DIVI builder\u00bb _builder_version=\u00bb4.9.4&#8243; _module_preset=\u00bbdefault\u00bb background_color=\u00bb#8300E9&#8243;]<\/p>\n<p>Micromanual realizado para ayudar a editar con el constructor DIVI<\/p>\n<p>[\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.9.4&#8243; _module_preset=\u00bbdefault\u00bb][et_pb_row _builder_version=\u00bb4.9.4&#8243; _module_preset=\u00bbdefault\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.9.4&#8243; _module_preset=\u00bbdefault\u00bb][et_pb_accordion _builder_version=\u00bb4.9.4&#8243; _module_preset=\u00bbdefault\u00bb][et_pb_accordion_item title=\u00bbEDITAR CON DIVI BUILDER\u00bb open=\u00bbon\u00bb open_toggle_text_color=\u00bb#8300E9&#8243; _builder_version=\u00bb4.9.4&#8243; _module_preset=\u00bbdefault\u00bb]<\/p>\n<p><span style=\"color: #333399;\"><b>Editar con el Divi builder (clic en la pesta\u00f1a de color fucsia)<\/b><\/span><\/p>\n<p>Divi es el tema (entorno o conjunto de plantillas) de Word Press que empleamos. Permite editar en el entorno cl\u00e1sico de WP (etiqueta verde, m\u00e1s sencillo pero m\u00e1s r\u00edgido) o emplear el \u201cConstructor Divi\u201d (etiqueta fucsia, flexible, con muchas posibilidades de edici\u00f3n), un plugin muy flexible.<\/p>\n<p>Al hacer clic en la pesta\u00f1a Divi builder, se abre una pantalla con tres cuadros:<\/p>\n<p><b>Construir desde cero<\/b>: empezar sin plantilla, desde cero, definiendo y empleando los m\u00f3dulos.<\/p>\n<p><b>Elegir dise\u00f1o<\/b>: elegir dise\u00f1os pre-definidos o plantillas. Hay muchas plantillas, con subfamilas de plantillas, pero son algo complejos. No los emple\u00e9is por ahora.<\/p>\n<p><b>Clonar p\u00e1gina existente<\/b>. <b>RECOMENDADO<\/b>: te permite \u201cclonar\u201d o copiar alguna de las p\u00e1ginas que ya han sido publicadas en nuestra web. Puedes \u201cA\u00f1adir p\u00e1gina\u201d, ponerle un t\u00edtulo que empiece por \u201cA\u201d, para que se te sit\u00fae arriba del todo, en el escritorio, y clonar la que quieras.<\/p>\n<p>Una vez cargada la plantilla, por clonaci\u00f3n de cualquier p\u00e1gina, puedes empezar a explorar su estructura:<\/p>\n<p><span style=\"color: #0000ff;\"><b>Secci\u00f3n<\/b>: etiqueta <b>azul<\/b>.<\/span> No usar de momento, porque como est\u00e1 creada la plantilla, es preferible actuar en los otros dos rangos. La Secci\u00f3n tiene varias posibilidades. Secciones est\u00e1ndar, Secciones de anchura completa, y Secciones especiales (con estructuras alternativas), cada una de ellas con particularidades espec\u00edficas. La mayor parte de los m\u00f3dulos est\u00e1n asociados a las secciones estandarizadas. De momento no las toqu\u00e9is. Se podr\u00eda definir la \u201csecci\u00f3n\u201d como un \u201cArmario\u201d.<\/p>\n<p><span style=\"color: #99cc00;\"><b>Fila<\/b>: etiqueta <b>verde<\/b><\/span>. Es la estructura de cada nivel, se podr\u00eda considerar como<span class=\"Apple-converted-space\">\u00a0 <\/span>y se puede modificar para obtener una vista de banda \u00fanica, doble, triple, 3\/4, etc. La estructura de las secciones se modifica haciendo clic en una cuadr\u00edcula de la pesta\u00f1a verde, parecida a una rejilla que te permite elegir un espacio, dos, tres o cuatro, y con diferentes proporciones. Se podr\u00eda definir la \u201cfila\u201d como un \u201cnivel\u201d, en horizontal, de un armario<\/p>\n<p><span style=\"color: #333333;\"><b>M\u00f3dulo<\/b>: etiqueta <b>gris<\/b> oscuro<\/span>. Es el espacio principal porque en ellos, en los m\u00f3dulos, se alojan los contenidos. Se podr\u00edan definir los \u201cm\u00f3dulos\u201d como los \u201ccajones\u201d de cada fila y de cada armario.<\/p>\n<p><b>TRABAJANDO CON M\u00d3DULOS (etiqueta gris que se activa al hacer clic sobre ellos):<\/b><\/p>\n<p><b>Bot\u00f3n de m\u00f3dulo \u00abcrucecita\u00bb<\/b>: est\u00e1 a la izquierda del todo. Sirve para enganchar el m\u00f3dulo y moverlo (con cuidado) por el interior de la Fila o Secci\u00f3n. Tambi\u00e9n se pueden coger y moverlos a otra Fila o Secci\u00f3n.<\/p>\n<p><b>Bot\u00f3n de m\u00f3dulo \u00abruedecita dentada\u00bb<\/b> (ajustes del m\u00f3dulo): en cada caja de m\u00f3dulo (tambi\u00e9n en las filas o secciones), el bot\u00f3n \u201crueda dentada\u201d es el principal. Haciendo clic en \u00e9l, 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 \u201cVista Previa de los cambios\u201d para observar c\u00f3mo va quedando la cosa<\/p>\n<p><b>Bot\u00f3n de m\u00f3dulo \u00abrect\u00e1ngulo duplicado\u00bb<\/b>: peque\u00f1o rect\u00e1ngulo para clonar (duplicar) un m\u00f3dulo (tambi\u00e9n una secci\u00f3n o fila).<\/p>\n<p><b>Bot\u00f3n de m\u00f3dulo \u00abflecha hacia abajo dentro de un c\u00edrculo\u00bb<\/b>: no lo us\u00e9is de momento, no es para guardar lo que est\u00e1is editando y conviene no emplarla al principio, pues es para almacenar un m\u00f3dulo, fila o secci\u00f3n que os haya quedado lo suficientemente chula como para volver a emplearla en otra edici\u00f3n.<\/p>\n<p><b>Bot\u00f3n de m\u00f3dulo \u00abtres puntitos verticales\u00bb<\/b> No lo us\u00e9is de momento, pues es para tareas m\u00e1s complejas.<\/p>\n<p>Abajo del todo: de vez en cuando hay que \u201c<b>Guardar<\/b>\u201d, <b>abajo a la derecha, tras hacer click previamente en el bot\u00f3n redondo fucsia \u201ccon tres puntos\u201d tambi\u00e9n de abajo<\/b>. Explorad los botones de abajo: permiten varias cosas y recuperar una edici\u00f3n anterior.<\/p>\n<p>Para empezar explorad haciendo clic en la \u201crueda dentada\u201d, y despu\u00e9s en las pesta\u00f1as \u201cContenido\u201d, con opci\u00f3n de editar texto, im\u00e1genes asociadas al texto y enlaces. O bien la pesta\u00f1a \u00abDise\u00f1o\u00bb (para cambiar tipos de letra, colores, y dise\u00f1os).<\/p>\n<p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbPARA SUBIR CONTENIDOS EN GENERAL\u00bb _builder_version=\u00bb4.9.4&#8243; _module_preset=\u00bbdefault\u00bb open=\u00bboff\u00bb]<\/p>\n<p><b>Pasos<\/b>:<\/p>\n<p>1\u00ba. Entrada como visitante: https:\/\/investiga.puenteromano.net (cualquier persona puede visitar la web y los contenidos publicados)<\/p>\n<p>2\u00ba Entrada para editar: <b>https:\/\/investiga.puenteromano.net\/wp-login <\/b>(o admin, es lo mismo)<\/p>\n<p>Puedes estar dado de alta con el perfil de: administrador (el rango m\u00e1s alto), editor, autor, colaborador.<\/p>\n<p>El <b>Administrador<\/b> define los men\u00fas y la estructura, as\u00ed como los comandos generales y opciones de configuraci\u00f3n de la propia web.<\/p>\n<p>El <b>autor<\/b> puede \u201cPublicar\u201d y subir \u201ccontenidos\u201d (texto, imagen, video, audio, etc) pero no puede configurar la estructura de la web, que es privilegio del perfil \u201cAdministrador\u201d<\/p>\n<p>El \u201c<b>Editor<\/b>\u201d tiene autonom\u00eda para publicar contenidos online (OJO: si se publica una imagen o texto hay que estar seguros de que est\u00e1 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).<\/p>\n<p><b>C\u00f3mo editar, actualizar o publicar contenidos.<\/b><\/p>\n<p>Para editar hay que entrar como editor, no como visitante simple. Hay que conocer nuestro <b>Nombre de usuario y contrase\u00f1a<\/b> para entrar como editor. Es el administrador de la web quien puede dar de alta a los nuevos usuarios.<\/p>\n<p>Y se entra, como en todas las de Word Press, con esta <b>ruta: https:\/\/investiga.puenteromano.net\/wp-login<\/b>, tecleado arriba, en la barra de direcciones.<\/p>\n<p>Una vez dentro, las pesta\u00f1as principales son:<\/p>\n<p><b>Escritorio<\/b>: banda negra a la izquierda de la pantalla, con varios espacios. Los principales, para subir contenidos, son:<\/p>\n<p><b>Medios<\/b>: para subir im\u00e1genes, videos, etc<\/p>\n<p><b>P\u00e1ginas<\/b>: para publicar p\u00e1ginas (empezad a\u00f1adiendo una p\u00e1gina y, para que se sit\u00fae arriba del todo, tituladla \u201cAAA Pruebas\u201d)<\/p>\n<p><b>Proyectos<\/b>: para publicar unidades o espacios homog\u00e9neos de una serie (posible s\u00f3lo en Divi, pensados para visualizarlos despu\u00e9s en el m\u00f3dulo \u201cPortafolio\u201d. Pero dejad esto para m\u00e1s adelante.)<\/p>\n<p><b>Entradas<\/b>: para publicar noticias o eventos ordenados por fechas (adecuado para publicar en el m\u00f3dulo \u201cBlog\u201d)<\/p>\n<p>__________________________________<\/p>\n<p>RUTAS PRINCIPALES PARA SUBIR CONTENIDOS:<\/p>\n<p><b>Trabajando con \u00abProyectos\u00bb (desde la banda negra del Escritorio).<\/b><\/p>\n<p>Las noticias de prensa o comunicados, m\u00e1s ligados al calendario y ef\u00edmeros, es mejor editarlos como \u201centradas\u201d, pero los <b>Proyectos<\/b> se prestan mejor a su visibilidad en portafolios o carruseles. Est\u00e1n m\u00e1s pr\u00f3ximos a las p\u00e1ginas que las \u201centradas\u201d. Pero todos ellos son intercambiables.<\/p>\n<p><b>Proyectos\/A\u00f1adir nuevo<\/b><\/p>\n<p>Poner t\u00edtulo y Usar el Constructor Divi, como antes.<\/p>\n<p>Puedes clonar un \u00abProyecto (ejemplo)\u00bb o cualquier plantilla de las predefinidas, si lo prefieres. Elige una sencilla. Tambi\u00e9n puedes \u00abclonarte\u00bb tu propia p\u00e1gina para cada proyecto.<\/p>\n<p>Una vez cargado el \u00abProyecto\u00ab, o desde cero, hay que ir modificando o a\u00f1adiendo m\u00f3dulos: textos, im\u00e1genes, v\u00eddeos y dem\u00e1s m\u00f3dulos que est\u00e9n cargados en el dise\u00f1o predefinido o en la plantilla que tengamos guardada.<\/p>\n<p>Click en Publicar\/Guardar (ambos botones son el mismo): clic en el bot\u00f3n redondo de abajo y despu\u00e9s en el bot\u00f3n \u00abGuardar\u00bb o \u00abPublicar\u00bb si es la primera vez. (OJO: no hacer clic nunca en la pesta\u00f1a verde \u201cUSAR EL CONSTRUCTOR POR DEFECTO\u201d, porque lo desmonta todo).<\/p>\n<p>Los \u201cProyectos\u201d aparecen publicados en orden de subida. Se pueden re-ordenar manualmente editando la fecha y hora de la edici\u00f3n de cada \u201cproyecto\u201d, a la derecha, arriba, fuera del Constructor, encima del bot\u00f3n de Actualizar, \u201cforzando\u201d al editor para que los reubique.<\/p>\n<p>Las im\u00e1genes de los proyectos deben ser homog\u00e9neas, para conseguir un efecto similar en el carrusel, cuando se haga, o en la p\u00e1gina-resumen de todos los proyectos. Las im\u00e1genes se pueden editar y recortar en \u201cMedios\/Biblioteca, haceendo clic en el bot\u00f3n de \u201cEditar\u201d.<\/p>\n<p>Si queremos que nuestros \u201cProyectos\u201d o unidades b\u00e1sicas de informaci\u00f3n fija, puedan aparecer en un \u201cPortafolios\u201d, con carrusel incluido, hay que crear las Categor\u00edas correspondientes. Se pueden crear directamente desde cada Proyecto, a la derecha del todo, fuera del Divi, o bien en el Escritorio\/Proyectos\/Categor\u00edas de Proyecto (No confundir con \u201cCategor\u00edas de Entradas\u201d, que son para organizar los blogs).<\/p>\n<p>_____________________<\/p>\n<p><b>Trabajando con Entradas:<\/b><\/p>\n<p><b>Entradas\/A\u00f1adir nueva:<\/b><\/p>\n<p>Este es el modo id\u00f3neo para subir textos como \u201cArt\u00edculos, Noticias o Eventos\u201d, porque se integra en el modulo pre-instalado de \u201cBlog\u201d (No conviene emplearlo hasta saber c\u00f3mo va todo). Es el modo conveniente para noticias porque se integra en un visor de \u201cRecientes\u201d y traen predefinidos c\u00f3digos de imagen \u201cLeer m\u00e1s\u201d etc, propios de los blogs.<\/p>\n<p><b>Se pone el T\u00edtulo, se rellena el cuerpo.<\/b><\/p>\n<p><b>En las entradas se puede emplear el \u00abConstructor por defecto (en verde)<\/b>. Es m\u00e1s sencillo y menos flexible, pero para noticias y enlaces sencillos es suficiente.<\/p>\n<p>Se a\u00f1aden las <b>im\u00e1genes<\/b> que se consideren oportunas.<\/p>\n<p>Se selecciona la <b>Categor\u00eda<\/b> correspondiente (ya hay algunas creadas, pero se pueden crear nuevas categor\u00edas si se preven m\u00faltiples entradas del mismo tipo) y se hace \u201cclic\u201d.<\/p>\n<p><b>Las categor\u00edas est\u00e1n fuera del Divi, a la derecha<\/b>, antes de hacer clic en el \u201cUsar el Constructor Divi\u201d: hay que hacer clic (si es el caso del contenido) en la categor\u00eda correspondiente.<\/p>\n<p>(Tambi\u00e9n hay \u201cCategor\u00edas\u201d para los \u201cProyectos\u201d, pero est\u00e1n en el apartado \u201cProyectos\u201d, y no son las mismas que las de \u201cEntradas\u201d. Cuando se crea una \u201cCategor\u00eda\u201d, hasta que no haya un Proyecto o Entrada asignados, no aparecen en los carruseles, pero esta parte es para m\u00e1s adelante)<\/p>\n<p><b>A la derecha tambi\u00e9n, y m\u00e1s abajo est\u00e1 la caja Asignar imagen destacada<\/b>, que es donde haremos click para seleccionar la imagen que aparecer\u00e1 en el resumen del Proyecto o Entrada en la p\u00e1gina general que resume todos los Proyectos o Entradas, adem\u00e1s de los blogs o carruseles espec\u00edficos.<\/p>\n<p>_______________________________<\/p>\n<p><b>Trabajando con \u00abMedios\u00bb.<\/b><\/p>\n<p>Medios: espacio donde se alojan todas las im\u00e1genes, audios o videos y documentos (en PDF preferiblemente)<\/p>\n<p><b>Medios\/Biblioteca<\/b>: muestra todas las im\u00e1genes, videos y audios ya subidos a la web, con la URL a la derecha para poder enlazarlos desde las cajas de los m\u00f3dulos grises (haciendo clic en la \u00abruedecita dentada\u00bb del Constructor Divi<\/p>\n<p><b>Medios\/A\u00f1adir nuevo<\/b>: clic para subir archivos desde tu ordenador a la web.<\/p>\n<p>OJO: no se pueden subir im\u00e1genes de m\u00e1s de 1 mega por defecto, porque ralentizan mucho la carga de contenidos. Si se necesita subir archivos de m\u00e1s peso tiene que ser a trav\u00e9s del perfil de \u201cAdministrador\u201d.<\/p>\n<p><b>Videos<\/b>: Pod\u00e9is embeber o insertar v\u00eddeos, mediante el m\u00f3dulo \u00abV\u00eddeo\u00bb, con tres procedimientos:<\/p>\n<p>1. Pegando en el interior del m\u00f3dulo \u201cVideo\u201d el <b>c\u00f3digo obtenido en Youtube desde el bot\u00f3n de \u00abCompartir\u00bb<\/b>.<\/p>\n<p>2. Con los <b>videos propios, subi\u00e9ndolos primeramente como \u00abmedio<\/b>\u00ab, en \u00abA\u00f1adir medio\u00bb, y copiando la URL, una vez subido a la Biblioteca de Medios, e insert\u00e1ndola en el m\u00f3dulo \u00abviddeo\u00bb a continuaci\u00f3n.<\/p>\n<p>3. <b>Con el m\u00f3dulo \u00abC\u00f3digo\u00bb<\/b> para aquellos videos subidos a Internet que permiten \u00abembeber\u00bb su contenido a trav\u00e9s de c\u00f3digo. En esas webs suele aparecer un bot\u00f3n que sugiere \u00abcopiar c\u00f3digo\u00bb, \u00abinsertar\u00bb o \u00abiframe\u00bb.<\/p>\n<p>_______________________<\/p>\n<p><b>Trabajando con \u00abP\u00e1ginas\u00bb<\/b><\/p>\n<p><b>P\u00e1ginas\/A\u00f1adir nueva<\/b><\/p>\n<p>Ponle t\u00edtulo a la p\u00e1gina propia. Es muy importante titular la p\u00e1gina antes de seguir.<\/p>\n<p>Despu\u00e9s de poner el t\u00edtulo, clic en \u201cUse Divi Builder\u201d (OJO: hay que dejar que cargue el Divi antes de ponerse a rellenar campos; tarda unos segundos). Quienes usan el Divi pueden usar tambi\u00e9n el \u201cConstructor por defecto\u201d, pero nunca a la vez, pues la edici\u00f3n de contenidos puede entrar en conflicto.<\/p>\n<p>__________________<\/p>\n<p>[\/et_pb_accordion_item][\/et_pb_accordion][et_pb_button button_text=\u00bbManual DIVI en PDF\u00bb _builder_version=\u00bb4.9.4&#8243; _module_preset=\u00bbdefault\u00bb custom_button=\u00bbon\u00bb button_text_color=\u00bb#FFFFFF\u00bb button_bg_color=\u00bb#8300E9&#8243; button_bg_enable_color=\u00bbon\u00bb button_border_radius=\u00bb12px\u00bb hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243; button_url=\u00bbhttps:\/\/investiga.puenteromano.net\/wp-content\/uploads\/2021\/04\/Micromanual-DIVI-9-investiga.pdf\u00bb][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Micromanual realizado para ayudar a editar con el constructor DIVIEditar con el Divi builder (clic en la pesta\u00f1a de color fucsia) Divi es el tema (entorno o conjunto de plantillas) de Word Press que empleamos. Permite editar en el entorno cl\u00e1sico de WP (etiqueta verde, m\u00e1s sencillo pero m\u00e1s r\u00edgido) o emplear el \u201cConstructor Divi\u201d [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-2262","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/investiga.puenteromano.net\/index.php\/wp-json\/wp\/v2\/pages\/2262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/investiga.puenteromano.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/investiga.puenteromano.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/investiga.puenteromano.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/investiga.puenteromano.net\/index.php\/wp-json\/wp\/v2\/comments?post=2262"}],"version-history":[{"count":6,"href":"https:\/\/investiga.puenteromano.net\/index.php\/wp-json\/wp\/v2\/pages\/2262\/revisions"}],"predecessor-version":[{"id":2279,"href":"https:\/\/investiga.puenteromano.net\/index.php\/wp-json\/wp\/v2\/pages\/2262\/revisions\/2279"}],"wp:attachment":[{"href":"https:\/\/investiga.puenteromano.net\/index.php\/wp-json\/wp\/v2\/media?parent=2262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}