Columns
Crea più colonne sulla pagina, in modo responsive, e le sposta verticalmente una sopra l’altra quando la pagina è visualizzata in uno schermo piccolo.
Puoi nidificare altri shortcode all’interno delle colonne.
esempio di codice con testo + pulsante + immagine da incollare direttamente nella pagina:
|
1 2 3 4 5 6 7 8 9 10 11 |
[su_row][su_column size="1/2" center="no" class=""] Integer a risus quis libero faucibus eleifend bibendum vitae odio. Curabitur sit amet mi eleifend elit viverra auctor a non nulla. Ut varius et lacus ac aliquam. Curabitur augue velit, cursus nec consequat quis, condimentum ut diam. Sed ac sem vitae arcu venenatis pretium. Fusce in enim pulvinar, venenatis turpis ac, ultricies mauris. [su_button target="blank" background="#348beb" color="#fdfdfd" center="yes" icon="icon: check-circle" icon_color="#fefefe"]Button text[/su_button] [/su_column] [su_column size="1/2" center="no" class=""] [su_image_carousel source="media: 1733" limit="1" crop="none" spacing="no" align="center" arrows="no" dots="no" autoplay="0" outline="no"] [/su_column][/su_row] |
risultato:
Integer a risus quis libero faucibus eleifend bibendum vitae odio. Curabitur sit amet mi eleifend elit viverra auctor a non nulla. Ut varius et lacus ac aliquam. Curabitur augue velit, cursus nec consequat quis, condimentum ut diam. Sed ac sem vitae arcu venenatis pretium. Fusce in enim pulvinar, venenatis turpis ac, ultricies mauris.
Usa lo shortcode Table per inserire le colonne in una tabella responsive, mantenendo il riposizionamento in verticale su piccoli schermi.
codice di esempio da incollare come codice html (click sul tab [Testo]):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
[/su_table]</pre> <p>risultato:</p> <p>[su_table responsive="yes" alternate="no"]</p> <table> <tbody> <tr> <td> <p>[su_row][su_column size="1/2" center="no" class=""]</p> <p>Integer a risus quis libero faucibus eleifend bibendum vitae odio. Curabitur sit amet mi eleifend elit viverra auctor a non nulla. Ut varius et lacus ac aliquam. Curabitur augue velit, cursus nec consequat quis, condimentum ut diam. Sed ac sem vitae arcu venenatis pretium. Fusce in enim pulvinar, venenatis turpis ac, ultricies mauris.</p> <p>[su_button target="blank" background="#348beb" color="#fdfdfd" center="yes" icon="icon: check-circle" icon_color="#fefefe"]Button text[/su_button]</p> <p>[/su_column] [su_column size="1/2" center="no" class=""]</p> <p>[su_image_carousel source="media: 1733" limit="1" crop="none" spacing="no" align="center" arrows="no" dots="no" autoplay="0" outline="no"]</p> <p>[/su_column][/su_row]</p> </td> </tr> </tbody> </table> |
risultato:
|
Integer a risus quis libero faucibus eleifend bibendum vitae odio. Curabitur sit amet mi eleifend elit viverra auctor a non nulla. Ut varius et lacus ac aliquam. Curabitur augue velit, cursus nec consequat quis, condimentum ut diam. Sed ac sem vitae arcu venenatis pretium. Fusce in enim pulvinar, venenatis turpis ac, ultricies mauris. |
Puoi anche aggiungere bordi e sfondo alle colonne utilizzando codice CSS da aggiungere al setup del plugin in Bacheca/Shortcode/Settings.
Ad esempio:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.su-row.columns-with-border .su-column-inner { border: 2px solid #333333; padding: .5rem 1rem; } .su-row.columns-with-border .column-with-yellow-border .su-column-inner { border: 2px solid #E3AD27; } .su-row.columns-with-background .su-column-inner { background: #ffffff; color: #333333; padding: .5rem 1rem; } .su-row.columns-with-background .column-with-grey-background .su-column-inner { background: #000000; } |
Poi modifica il codice aggiungendo le classi CSS allo shortcode:
|
1 2 3 4 5 6 7 8 9 10 11 |
[su_row class="columns-with-border columns-with-background"][su_column size="1/2" center="no"] Integer a risus quis libero faucibus eleifend bibendum vitae odio. Curabitur sit amet mi eleifend elit viverra auctor a non nulla. Ut varius et lacus ac aliquam. Curabitur augue velit, cursus nec consequat quis, condimentum ut diam. Sed ac sem vitae arcu venenatis pretium. Fusce in enim pulvinar, venenatis turpis ac, ultricies mauris. [su_button target="blank" background="#348beb" color="#fdfdfd" center="yes" icon="icon: check-circle" icon_color="#fefefe"]Button text[/su_button] [/su_column][su_column size="1/2" center="no" class="column-with-grey-background column-with-yellow-border"] [su_image_carousel source="media: 1733" limit="1" crop="none" spacing="no" align="center" arrows="no" dots="no" autoplay="0" outline="no"] [/su_column][/su_row] |
risultato:
Integer a risus quis libero faucibus eleifend bibendum vitae odio. Curabitur sit amet mi eleifend elit viverra auctor a non nulla. Ut varius et lacus ac aliquam. Curabitur augue velit, cursus nec consequat quis, condimentum ut diam. Sed ac sem vitae arcu venenatis pretium. Fusce in enim pulvinar, venenatis turpis ac, ultricies mauris.
