{"id":3729,"date":"2014-02-19T11:32:53","date_gmt":"2014-02-19T11:32:53","guid":{"rendered":"https:\/\/thethemebuilders.review\/demonew\/?page_id=3729"},"modified":"2014-02-19T11:32:53","modified_gmt":"2014-02-19T11:32:53","slug":"content-choreography-responsive-freedom","status":"publish","type":"page","link":"https:\/\/thethemebuilders.review\/demonew\/content-choreography-responsive-freedom","title":{"rendered":"Content Choreography"},"content":{"rendered":"
<\/div>\n

<\/i> \u2022 JUST STRIKING MULTIFLEX OFFERS YOU \u2022<\/span> <\/i><\/p>\n

CONTENT CHOREOGRAPHY<\/span><\/p>

\n\t
\n\t\t

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.<\/p> \n\t\t

<\/div>\n\t<\/div>\n<\/div>\n<\/h1>\n
<\/div>\n

SOME EXAMPLES
\n<\/i><\/p><\/h2>\n

<\/div>\n
<\/div>\n

Six-Column Layout – Three Possible Choreographies<\/p><\/h2>\n

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.<\/p>\n

<\/div>\n

6 columns become 1<\/p><\/h3>\n

<\/div>\n
<\/i>At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.
<\/div><\/div>\n
<\/i>At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.
<\/div><\/div>\n
<\/i> At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.
<\/div><\/div>\n
<\/i> At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.
<\/div><\/div>\n
<\/i>At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.
<\/div><\/div>\n
<\/i>At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.
<\/div><\/div>
<\/div>\n

<\/i>Get the Code<\/span><\/h4>
[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]\n[\/one_sixth]\n[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]\n[\/one_sixth]\n[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]\n[\/one_sixth]\n[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]\n[\/one_sixth]\n[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]\n[\/one_sixth]\n[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]\n[\/one_sixth_last]<\/code><\/div><\/div>\n
<\/div>\n

6 columns become 2<\/p><\/h3>\n

<\/div>\n
<\/i><\/span>

comment<\/h4>
At vero eos et accusam et justo duo dolores et ea rebum.<\/div><\/div><\/div><\/div>\n
<\/i><\/span>

comment-o<\/h4>
At vero eos et accusam et justo duo dolores et ea rebum.<\/div><\/div><\/div><\/div>
<\/div><\/div>\n
<\/i><\/span>

bookmark<\/h4>
At vero eos et accusam et justo duo dolores et ea rebum.<\/div><\/div><\/div><\/div>\n
<\/i><\/span>

bookmark-o<\/h4>
At vero eos et accusam et justo duo dolores et ea rebum.<\/div><\/div><\/div><\/div>
<\/div><\/div>\n
<\/i><\/span>

bell<\/h4>
At vero eos et accusam et justo duo dolores et ea rebum.<\/div><\/div><\/div><\/div>\n
<\/i><\/span>

bell-o<\/h4>
At vero eos et accusam et justo duo dolores et ea rebum.<\/div><\/div><\/div><\/div>
<\/div><\/div>
<\/div>\n

<\/i>Get the Code<\/span><\/h4>
[one_third]\n[one_half][iconbox icon=\"comment\" iconColor=\"#cc2d2d\" title=\"comment\" type=\"center\"]At vero eos et accusam et justo duo dolores et ea rebum.[\/iconbox]\n[\/one_half]\n[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]\n[\/one_half_last]\n[\/one_third]\n[one_third]\n[one_half][iconbox icon=\"bookmark\" iconColor=\"#2795d1\" title=\"bookmark\" type=\"center\"]At vero eos et accusam et justo duo dolores et ea rebum.[\/iconbox]\n[\/one_half]\n[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]\n[\/one_half_last]\n[\/one_third]\n[one_third_last]\n[one_half][iconbox icon=\"bell\" iconColor=\"#cc2d2d\" title=\"bell\" type=\"center\"]At vero eos et accusam et justo duo dolores et ea rebum.[\/iconbox]\n[\/one_half]\n[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]\n[\/one_half_last]\n[\/one_third_last]<\/code><\/div><\/div>\n
<\/div>\n

6 columns become 3<\/p><\/h3>\n

<\/div>\n
<\/i><\/span>

check<\/h4><\/div><\/div><\/div>\n
<\/i><\/span>

check-circle<\/h4><\/div><\/div><\/div>\n
<\/i><\/span>

check-circle-o<\/h4><\/div><\/div><\/div>
<\/div><\/div>\n
<\/i><\/span>

facebook<\/h4><\/div><\/div><\/div>\n
<\/i><\/span>

google-plus<\/h4><\/div><\/div><\/div>\n
<\/i><\/span>

twitter<\/h4><\/div><\/div><\/div>
<\/div><\/div>
<\/div>\n

<\/i>Get the Code<\/span><\/h4>
[one_half]\n[one_third][iconbox icon=\"check\" iconColor=\"#cc2d2d\" title=\"check\" type=\"center\"][\/iconbox]\n[\/one_third]\n[one_third][iconbox icon=\"check-circle\" iconColor=\"#cc2d2d\" title=\"check-circle\" type=\"center\"][\/iconbox]\n[\/one_third]\n[one_third_last][iconbox icon=\"check-circle-o\" iconColor=\"#cc2d2d\" title=\"check-circle-o\" type=\"center\"][\/iconbox]\n[\/one_third_last]\n[\/one_half]\n[one_half_last]\n[one_third][iconbox icon=\"facebook\" iconColor=\"#2795d1\" title=\"facebook\" type=\"center\"][\/iconbox]\n[\/one_third]\n[one_third][iconbox icon=\"google-plus\" iconColor=\"#2795d1\" title=\"google-plus\" type=\"center\"][\/iconbox]\n[\/one_third]\n[one_third_last][iconbox icon=\"twitter\" iconColor=\"#2795d1\" title=\"twitter\" type=\"center\"][\/iconbox]\n[\/one_third_last]\n[\/one_half_last]<\/code><\/div><\/div>\n
<\/div>\n

Four-Column Layout – Two Possible Choreographies<\/p><\/h2>\n

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.<\/p>\n

<\/div>\n

4 columns become 1<\/p><\/h3>\n

<\/div>\n
<\/i>\nLorem 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.
\n
<\/div><\/div>\n
<\/i>\nAt 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.
\n
<\/div><\/div>\n
<\/i>\nAt 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.
\n
<\/div><\/div>\n
<\/i>\nLorem 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.
\n
<\/div><\/div>
<\/div>\n
<\/div>\n

<\/i>Get the Code<\/span><\/h4>
[one_fourth][icon_font type=\"hand-o-up\" color=\"#c12f2f\" size=\"5x\" pull=\"left\"]\nLorem 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.\n[divider_padding]\n[\/one_fourth]\n[one_fourth][icon_font type=\"hand-o-right\" color=\"#2692cc\" size=\"5x\" pull=\"left\"]\nAt 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.\n[divider_padding]\n[\/one_fourth]\n[one_fourth][icon_font type=\"hand-o-down\" color=\"#c12f2f\" size=\"5x\" pull=\"left\"]\nAt 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.\n[divider_padding]\n[\/one_fourth]\n[one_fourth_last] [icon_font type=\"hand-o-left\" color=\"#2692cc\" size=\"5x\" pull=\"left\"]\nLorem 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.\n[divider_padding]\n[\/one_fourth_last]<\/code><\/div><\/div>\n
<\/div>\n

4 columns become 2<\/p><\/h3>\n

<\/div>\n
\n\t
\n\t\t
<\/i><\/span>

star-o<\/h4>
Lorem ipsum dolor sit amet. Stet clita kasd gubergren, searatum.<\/div><\/div><\/div>\n\n\t\t
<\/div>\n\t<\/div>\n<\/div>\n\n
\n\t
\n\t\t
<\/i><\/span>

star<\/h4>
At vero eos et accusam et justo duo dolores et ea rebum. Nam liber tempor.<\/div><\/div><\/div>\n\n\t\t
<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n
\n\t
\n\t\t
<\/i><\/span>

heart-o<\/h4>
At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum.<\/div><\/div><\/div>\n\n\t\t
<\/div>\n\t<\/div>\n<\/div>\n\n
\n\t
\n\t\t
<\/i><\/span>

heart<\/h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.<\/div><\/div><\/div>\n\n\t\t
<\/div>\n\t<\/div>\n<\/div>\n<\/div>
<\/div>\n

<\/i>Get the Code<\/span><\/h4>
[one_half]\n[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]\n[\/framed_box]\n[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]\n[\/framed_box]\n[\/one_half]\n[one_half_last]\n[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]\n[\/framed_box]\n[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]\n[\/framed_box]\n[\/one_half_last]<\/code><\/div><\/div>\n
<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":6,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3729","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thethemebuilders.review\/demonew\/wp-json\/wp\/v2\/pages\/3729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thethemebuilders.review\/demonew\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thethemebuilders.review\/demonew\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thethemebuilders.review\/demonew\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thethemebuilders.review\/demonew\/wp-json\/wp\/v2\/comments?post=3729"}],"version-history":[{"count":0,"href":"https:\/\/thethemebuilders.review\/demonew\/wp-json\/wp\/v2\/pages\/3729\/revisions"}],"wp:attachment":[{"href":"https:\/\/thethemebuilders.review\/demonew\/wp-json\/wp\/v2\/media?parent=3729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}