• 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

At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.
At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.
At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.
At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.
At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.
At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.

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

At vero eos et accusam et justo duo dolores et ea rebum.

comment-o

At vero eos et accusam et justo duo dolores et ea rebum.

bookmark

At vero eos et accusam et justo duo dolores et ea rebum.

bookmark-o

At vero eos et accusam et justo duo dolores et ea rebum.

bell

At vero eos et accusam et justo duo dolores et ea rebum.

bell-o

At vero eos et accusam et justo duo dolores et ea rebum.

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

facebook

google-plus

twitter

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

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.
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.
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.
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.

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

Lorem ipsum dolor sit amet. Stet clita kasd gubergren, searatum.

star

At vero eos et accusam et justo duo dolores et ea rebum. Nam liber tempor.

heart-o

At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum.

heart

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.

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]

Laisser une réponse

Your email address will not be published. Required fields are marked *