Facilitati la vita con i codici ed esempi già pronti

Elementor

Ad oggi 01/03/2023 con elementor non è possibile in modo nativo dare un’aspetto grafico di impatto alla pagina dei risultati di ricerca. Magari in futuro questo sarà possibile, ma per il momento segui questi passaggi!

Allora come puoi renderla più accattivante senza perdere molto tempo, semplicemente scaricando uno dei modelli che trovi già pronti in questa pagina * oppure facendo da te con l’ausilio di questo codice css e seguendo questi pochi passaggi:

1. Vai alla tua pagina di ricerca dal Theme Builder di Elementor;
2. Attiva il tuo widget Archivio Articoli e vai alla Tab Avanzato >Layout e crea un CSS ID ad es. colori-alternati. Ricordati di non inserire né il . né #;
3. adesso vai a CSS personalizzato copia e inserisci il codice che vedi qui di seguito:
4. Copy

               
   #colori-alternati article:nth-child(odd){
       background-color: #fdfdfd;
       padding: 5px 5px 5px 5px;
       border-style: solid;
       border-width: 1px;    border-radius: 5px;
       border-color: #DDDDDD;
       
   }
   #colori-alternati article:nth-child(even){
       background-color: #f6f9fb;
       padding: 5px 5px 5px 5px;
       border-style: solid;
       border-width: 1px;
       border-radius: 5px;
       border-color: #DDDDDD;
   }
   .elementor-1043 .elementor-element.elementor-element-86b034a{
       margin-top: 50px;
   }
           

5. per farti capire meglio se non sei avvezzo al CSS, la parte del codice che contiene nth-child(odd) e nth-child(even) che gestisce le righe di colore, puoi trovare maggiori informazioni su questa pagina: Clicca qui

Una volta capito il procedimento sopra indicato, se hai scaricato uno dei miei modelli ti sarà più facile modificarlo.

Ti auguro di realizzare un modulo di ricerca che possa sodisfare le tue esigenze. Buon lavoro!