Avisos
Vaciar todo
Buenas,
Empiezo diciendo que he revisado los foros #17588, #159013 y #159013 sobre añadir líneas pero creo que no son de aplicación para mí.
En Wordpress usando el tema DIVI con el plugin DIVI Builder, quiero añadir una línea horizontal blanca de 1 px entre secciones, línea que ha de ocupar todo el ancho de la página (también quiero añadirla bajo el menú principal).
DIVI cuenta con un módulo llamado "divider" que añade una línea pero de lóngitud inferior, así que a priori no creo que me valga, salvo que se pueda configurar de alguna forma (¿mediante código CSS?).
Lo curioso es que al añadir una página predefinida por DIVI, en una sección sí me muestra una línea blanca bajo la misma. Es justo lo que quiero. He revisado las propiedades de la sección, y no veo que tenga ninguna propiedad diferente al resto de las secciones donde no se muestra la línea.
En los ajustes de cada sección o módulo de DIVI hay una pestaña que permite incluir código CSS (de lo cual no tengo ni idea, muy a mi desgracia). Me pregunto si aquí (en la sección que me interesa, o añadiendo otra con un módulo divider) se puede añadir algo para que aparezca la línea. Probé a meter el código según la respuesta a la consulta del foro #159013, pero no marcha. En esa respuesta se habla de "meter el código en algún archivo less de mi plantilla". No sé que es un archivo less, no creo que sea de aplicación aquí.
En esos ajustes CSS hay varios campos, CSS ID, CSS Class, Before, Main Element y After. En el caso de que la solución sea incluir código CSS, ¿sería en el apartado de After? ¿Before en la sección posterior al menú principal?¿Y sería en las secciones que ya tengo o añadiendo un módulo divider? Mi preferencia sería no tener que utilizar un módulo divider porque veo que me aumenta el espaciado, por mucho que lo disminuya utilizando los ajustes. Por favor especificar bien para alguien con mis conocimientos nulos de CSS. 🙁
Gracias
URL del sitio: Contenido solo visible a usuarios registrados
Respondido : 06/03/2017 10:53 am
Hola Fernando.
DIVI cuenta con un módulo llamado "divider" que añade una línea pero de lóngitud inferior, así que a priori no creo que me valga, salvo que se pueda configurar de alguna forma (¿mediante código CSS?
Añade el modulo divider en alguna de las secciones y nos indicas con una URl donde podemos verlo.
Veremos que código es el que maneja y si podemos aumentar esa linea para que aparezca completa.
Un saludo
Respondido : 06/03/2017 11:14 am
Hola Pepe,
Gracias por tu respuesta.
He incluido un módulo divider debajo de donde pone: "Artistic Creations – Images of An Intangible World". La página estaba en mantenimiento pero he quitado el plugin de mantenimiento que tenía para que puedas acceder a ella. La dirección es:
Te comento:
- Haciéndolo he comprobado que la fila donde está el módulo divider se puede convertir en Full Width. No lo sabía, pero aun así, aunque aumenta su longitud, no llega a cubrir la página completa.
A ver si hay suerte encontrando el código. Como comentaba, el módulo añade un espaciado mayor (se puede reducir en gran medida pero aun así lo aumenta). Si la solución viene por el módulo divider, por favor mirad si se puede reducir el espaciado completamente, que sólo sea la línea de 1px. La alternativa es ver por qué la sección anterior sí incluye una línea, o qué tipo de módulo utilizaron (estaba predefinido).
Estoy convencido al 99% de que lo sabeis, pero por si acaso añado lo siguiente:
1) Al crear una nueva sección con DIVI, hay que empezar seleccionando si es una sección "Full width" (completa) o no. Cuando se elige completa, hay que insertar un módulo, pero en el listado que proporciona para el tipo de sección completa no incluye como opción el módulo divider. Sí incluye un módulo llamado "Code", para meter código, que a lo mejor vale para meter el código para crear una línea y que no añada espaciado (acabo de inventarme; es lo que hacemos los que no tenemos ni idea).
2) Cuando se crea una nueva sección, si en vez de seleccionar sección "Full width", se selecciona sección "Regular", entonces sí proporciona dentro de las opciones añadir un módulo "divider". Al realizar esto, se crea la sección, la fila y el módulo. En los ajustes de fila se puede seleccionar "convertir esta fila en full width", que es lo que he hecho, alargando la línea del divider, pero no hasta el final.
A ver si hay suerte. Gracias,
Fernando
Respondido : 06/03/2017 11:50 am
Hola Fernando.
No se si tienes algún archivo css para añadir las modificaciones que estas realizando el web, ya que me carga todo en cache.
En definitiva, seria añadir el siguiente código a tu archivo de estilos CSS
.et_pb_row.et_pb_row_fullwidth, .et_pb_specialty_fullwidth > .et_pb_row {
margin-top: -40px;
max-width: 100% !important;
width: 100% !important;
}
Si no sabes donde lo tienes que añadir o no conoces tu archivo custom, puedes editar el archivo style.css que encontraras en themes/Divi/style.css y añadirlo en ese archivo.
Un saludo
Respondido : 06/03/2017 12:25 pm
Hola Pepe,
Gracias por indigar sobre el problema.
Te comento:
PEPE: "No se si tienes algún archivo css para añadir las modificaciones que estas realizando el web, ya que me carga todo en cache"
FER: ni idea, ni siquiera del significado de lo que preguntas, no sé casi nada de programación ni de cómo se estructuran las webs.
PEPE: Si no sabes donde lo tienes que añadir o no conoces tu archivo custom, puedes editar el archivo style.css que encontraras en themes/Divi/style.css y añadirlo en ese archivo.
FER: efecivamente no sé dónde lo tengo que añadir. A través del administrador de archivos del panel de control he localizado en public_html/wp-content/themes/Divi/css dos archivos donde aparece código de estilos. Hay dos archivos que creo que podrían ser donde dices que puedo insertar el código ( te mando pantallazo)
1) editor-style.css
2) theme-customizer-controls-styles.css
¿Cúal de ellos sería? Te mando también los dos archivos, por si me puedes indicar dónde en concreto tengo que añadir el código, pues no he encontrado nada de "divider".
Por otro lado Pepe, ¿se podría estudiar la otra alternativa, en vez de resolver el problema utilizando el módulo divider, conseguir que la sección muestre una línea blanca al final de la misma?
Te lo comento porque por un lado:
1) Si en algún momento quiero utilizar un "divider" de menor longitud, con el nuevo código no parece que pueda hacerlo, salvo que lo configure localmente en cada módulo con las opciones de CSS que aparecen. Para separar las secciones de fotografía artística o normal que quiero crear, un divider normal podría ir bien.
2) El tema del espaciado que mencioné antes.
3) Además de al final de la sección, quiero que el menú superior muestre una línea blanca también. Eso no lo puedo hacer con un divider puesto que me mostraría la línea actual y el divider. Puede que con las opciones de menú consiga cambiar esta línea de color, no he indagado aún.
Gracias
Respondido : 06/03/2017 1:23 pm
Hola Pepe,
Lo tengo.
La clave es hacer una sección con color blanco de fondo y un custom padding (como se traduzca) inferior de 1 px.
A continuación insertar el módulo texto. En la fila que se crea, en ajustes, utilizar el color de fondo que se quiera. Además, hay que seleccionar convertir fila a Full Width, y además, que era lo que no sabía, seleccionar "Custom Padding" Sí, y dar un valor de 0. Con eso se consigue que se vea una línea blanca, que es la sección que asoma por debajo de la fila, que tiene otro color.
Gracias por tu tiempo.
Respondido : 06/03/2017 2:12 pm
Hola Fernando.
¿Cúal de ellos sería?
Lo tienes que añadir en el Archivo style.css que encontraras en la ruta wp-content/themes/Divi/style.css
.- Editas el archivo style.css y al final de ese archivo añades el código que te indique.
¿se podría estudiar la otra alternativa, en vez de resolver el problema utilizando el módulo divider, conseguir que la sección muestre una línea blanca al final de la misma?
Puedes utilizar La etiqueta ‘
’, esta introduce una introduce una línea horizontal, por ejemplo:
Esto lo puedes utilizar en cualquier parte tanto para separar bloques de texto en alguna entrada, al final de alguna pagina, después de un titulo etc....
te dejo información sobre el uso de esa etiqueta -> Etqueta hr
El tema del espaciado que mencioné antes.
En el código que te pase ya añadí para que se reduzca ese espacio.
Espero que esta información te pueda servir para lo que buscas 😉
Un saludo
Respondido : 06/03/2017 2:14 pm
