• JUST STRIKING MULTIFLEX OFFERS YOU •
CONTENT CHOREOGRAPHY
In responsive sites, the blocks of content get rearranged differently depending on the screen width and resolution in order to give a better experience to the user. That is performed automatically, but sometimes it is desirable to have it done in a particular way, in one word, to have more control over the process. Striking Multiflex is the first theme to offer Content Choreography for that purpose, so you can decide how the different columns move around on the smaller devices. For the following examples try resizing the width of your browser with your mouse.
SOME EXAMPLES
Six-Column Layout – Three Possible Choreographies
If your six columns are related to each other with a specific logic then they should be rearranged in a concrete way in narrower screens. A picture is worth a thousand words so let’s have a look at the following examples.
6 columns become 1
Get the Code
[one_sixth][icon_font type="group" color="#cc2d2d" size="3x" pull="left"]At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris. [divider_padding]
[/one_sixth]
[one_sixth] [icon_font type="coffee" color="#2795d1" size="3x" pull="left"]At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.[divider_padding]
[/one_sixth]
[one_sixth] [icon_font type="camera" color="#cc2d2d" size="3x" pull="left"] At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.[divider_padding]
[/one_sixth]
[one_sixth][icon_font type="globe" color="#2795d1" size="3x" pull="left"] At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.[divider_padding]
[/one_sixth]
[one_sixth][icon_font type="trophy" color="#cc2d2d" size="3x" pull="left"]At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.[divider_padding]
[/one_sixth]
[one_sixth_last][icon_font type="dashboard" color="#2795d1" size="3x" pull="left"]At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.[divider_padding]
[/one_sixth_last]
6 columns become 2
comment
comment-o
bookmark
bookmark-o
bell
bell-o
Get the Code
[one_third]
[one_half][iconbox icon="comment" iconColor="#cc2d2d" title="comment" type="center"]At vero eos et accusam et justo duo dolores et ea rebum.[/iconbox]
[/one_half]
[one_half_last][iconbox icon="comment-o" iconColor="#cc2d2d" title="comment-o" type="center"]At vero eos et accusam et justo duo dolores et ea rebum.[/iconbox]
[/one_half_last]
[/one_third]
[one_third]
[one_half][iconbox icon="bookmark" iconColor="#2795d1" title="bookmark" type="center"]At vero eos et accusam et justo duo dolores et ea rebum.[/iconbox]
[/one_half]
[one_half_last][iconbox icon="bookmark-o" iconColor="#2795d1" title="bookmark-o" type="center"]At vero eos et accusam et justo duo dolores et ea rebum.[/iconbox]
[/one_half_last]
[/one_third]
[one_third_last]
[one_half][iconbox icon="bell" iconColor="#cc2d2d" title="bell" type="center"]At vero eos et accusam et justo duo dolores et ea rebum.[/iconbox]
[/one_half]
[one_half_last][iconbox icon="bell-o" iconColor="#cc2d2d" title="bell-o" type="center"]At vero eos et accusam et justo duo dolores et ea rebum.[/iconbox]
[/one_half_last]
[/one_third_last]
6 columns become 3
check
check-circle
check-circle-o
google-plus
Get the Code
[one_half]
[one_third][iconbox icon="check" iconColor="#cc2d2d" title="check" type="center"][/iconbox]
[/one_third]
[one_third][iconbox icon="check-circle" iconColor="#cc2d2d" title="check-circle" type="center"][/iconbox]
[/one_third]
[one_third_last][iconbox icon="check-circle-o" iconColor="#cc2d2d" title="check-circle-o" type="center"][/iconbox]
[/one_third_last]
[/one_half]
[one_half_last]
[one_third][iconbox icon="facebook" iconColor="#2795d1" title="facebook" type="center"][/iconbox]
[/one_third]
[one_third][iconbox icon="google-plus" iconColor="#2795d1" title="google-plus" type="center"][/iconbox]
[/one_third]
[one_third_last][iconbox icon="twitter" iconColor="#2795d1" title="twitter" type="center"][/iconbox]
[/one_third_last]
[/one_half_last]
Four-Column Layout – Two Possible Choreographies
If your four columns are related to each other with a specific logic then they should be rearranged in a concrete way in narrower screens. A picture is worth a thousand words so let’s have a look at the following examples.
4 columns become 1
Get the Code
[one_fourth][icon_font type="hand-o-up" color="#c12f2f" size="5x" pull="left"]
Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
[divider_padding]
[/one_fourth]
[one_fourth][icon_font type="hand-o-right" color="#2692cc" size="5x" pull="left"]
At vero eos et accusam et justo duo dolores et ea rebum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accu consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accu.sequat, vel illum dolore.
[divider_padding]
[/one_fourth]
[one_fourth][icon_font type="hand-o-down" color="#c12f2f" size="5x" pull="left"]
At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit duo dolores et ea rebum.
[divider_padding]
[/one_fourth]
[one_fourth_last] [icon_font type="hand-o-left" color="#2692cc" size="5x" pull="left"]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata.
[divider_padding]
[/one_fourth_last]
4 columns become 2
star-o
star
heart-o
heart
Get the Code
[one_half]
[framed_box width="45%" bgColor="transparent" borderColor="transparent" align="left"][iconbox icon="star-o" iconColor="#2692cc" title="star-o" type="center"]Lorem ipsum dolor sit amet. Stet clita kasd gubergren, searatum.[/iconbox]
[/framed_box]
[framed_box width="45%" bgColor="transparent" borderColor="transparent" align="right"][iconbox icon="star" iconColor="#2692cc" title="star" type="center"]At vero eos et accusam et justo duo dolores et ea rebum. Nam liber tempor.[/iconbox]
[/framed_box]
[/one_half]
[one_half_last]
[framed_box width="45%" bgColor="transparent" borderColor="transparent" align="left"][iconbox icon="heart-o" iconColor="#cc2d2d" title="heart-o" type="center"]At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum.[/iconbox]
[/framed_box]
[framed_box width="45%" bgColor="transparent" borderColor="transparent" align="right"][iconbox icon="heart" iconColor="#cc2d2d" title="heart" type="center"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.[/iconbox]
[/framed_box]
[/one_half_last]