Avisos
Vaciar todo

Poner una segunda y tercera linea de Widgets en la Home

13 Respuestas
2 Usuarios
0 Reactions
419 Visitas
Respuestas: 123
Estimable Member
Topic starter
 

Buenas tardes, me gustaría poder poner dos lineas más de Widgets en la home, como el que tengo "Utility" con las 4 fotos pequeñas y que muestro en la captura adjunta.
Como tengo que hacerlo?
Gracias

URL del sitio: Contenido solo visible a usuarios registrados


 
Respondido : 29/05/2018 7:13 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

Entiendo que lo que se muestra en utility son widgets que has ido agregando con separadores desde Apariencia > Widgets , lo que podrías evaluar es copiar todo ese código HTML que se genera en el front-end y agregarlo en un solo widget de texto o html y luego agregar otro widget (sin separador) y copiar y modificar el código

En conclusión tendrías que hacerlo con código HTML usando los widgets de texto.

Saludos.


 
Respondido : 29/05/2018 7:53 pm
Respuestas: 123
Estimable Member
Topic starter
 

He realizado lo indicado colocando solo dos Wigest en "Utility" con toda la información en cada uno y ha roto la linea de 4 horizontales y ha puesto la información en vertical. Adjunto captura.
Gracias


 
Respondido : 31/05/2018 10:08 am
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

Debes usar el código HTML generado en el front-end del sitio que ya tiene las columnas definidas, puedes usar el inspector de código de tu navegador para ubicar el código html

Prueba usar el siguiente ´codigo CSS, como verás hay un contenedor rt-container y cada apartado esta dentro de un rt-grid-3

Toda la libreria

Aquí textos, bandas sonoras y derechos de representación.

Bandas sonoras

Aquí las bandas sonorras de algunos espectáculos musicales o teatrales.

Derechos de representación

Para realizar mas funciones adquiera los derechos pertinentes.

Solo textos musicales

En esta pagina encontrará solos textos que son obras de teatro musical.

Saludos.


 
Respondido : 31/05/2018 5:20 pm
Respuestas: 123
Estimable Member
Topic starter
 

Estimado Jhon podrías darme una pista más o camino a seguir porque estoy algo perdido y no he logrado hacerlo. que no he logrado hacerlo. También he leído que en lugar de hacerlo con los Widgets tambien podría modificar la plantilla para incluir esas tres lineas de cuatro fotos cada una.
Muchas gracias.


 
Respondido : 01/06/2018 1:24 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

Primero deja la posición transition sin ningún widget, luego crea un widget de texto o html ( en modo codigo) agrega todo el código HTML que te envié anteriormente.

Es decir estas maquetando las columnas directamente con el HTML y no usando divisores
Luego para probar puedes agregar otro widget de texto y poner el mismo código, debería aparecer debajo nuevamente 3 columnas.

Saludos.


 
Respondido : 01/06/2018 6:32 pm
Respuestas: 123
Estimable Member
Topic starter
 

Buenas tardes Jhon todo a funcionado bien, he colocado dos lineas de fotos y he cambiado los enlaces al texto en lugar de a las fotos.
Pero las fotografias están pegadas una a lado de las otras, es posible realizar una pequeña separación entre ellas?
Adjunto imagen.
Gracias por tu ayuda.


 
Respondido : 04/06/2018 8:56 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

Podrías añadir código CSS, sin embargo para que este código no entre en conflicto con otras partes de tu sitio, al contenedor principal añade alguna clase, es decir ahora tienes

class="rt-container"

Dejalo por ejemplo con

class="rt-container linea"

Luego podemos usar linea como clase para codificar CSS

Saludos.


 
Respondido : 04/06/2018 10:23 pm
Respuestas: 123
Estimable Member
Topic starter
 

Perdón mi torpeza creo este archivo class="rt-container linea" en la carpeta CSS?
Me puedes aclarar la ruta
Gracias


 
Respondido : 05/06/2018 7:10 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

No se trata de crear archivos, simplemente cambia el código, en el inicio del código tienes

La idea es dejarlo con una clase adicional para identificarlo únicamente y poder hacer cambios

Saludos


 
Respondido : 05/06/2018 7:33 pm
Respuestas: 123
Estimable Member
Topic starter
 

Ya he realizado la modificación, pero no veo ningún cambio.


 
Respondido : 05/06/2018 8:08 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

Cierto, aún no se ve ningún cambio porque "linea" no tiene ningún código CSS, ahora agrega lo siguiente al final de tu archivo CSS:

@media (min-width:768px){
  .rt-container.linea .rt-grid-3{
    width:24%;
    margin-right:1%;
  }  
}

Puedes colocar este código al final de este archivo:
/wordpress/wp-content/themes/helena_wp/style.css

PD: Refresca tu navegador para ver los cambios

Saludos.


 
Respondido : 05/06/2018 9:21 pm
Respuestas: 123
Estimable Member
Topic starter
 

Gracias Jhon todo solucionado, funciona perfectamente.
Un saludo


 
Respondido : 06/06/2018 9:01 am