The content of the website can be enriched by using the control elements of Bootstrap Shortcodes, like presented below. These elements are provided by the Twitter Bootstrap library and embedded here via a Plugin. All Elements can be embedded by using the following Toolbar or via the shortcodes like some of the are explained below.
There are five types of headings available in our theme. They can be used by marking the text that should be outlined and selecting the appropriate size in the editor like shown here:
While the Heading 1 is reserved for Titles all other heading sizes are not defined.
A Grid is useful to display a huge amount of text on one page. It is the similar typographic effect then in newspapers that are also using many columns to present huge text passages.
[bs_row class="row"]
[bs_col class="col-sm-4"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum[/bs_col]
[bs_col class="col-sm-4"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum[/bs_col]
[bs_col class="col-sm-4"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum[/bs_col]
[/bs_row]
A grid can be embedded by using the following shortcodes. Copy them, customize the text and delete the empty spaces after each opening bracket (otherwise only the columns would be displayed).
[ bs_row class="row"]
[ bs_col class="col-sm-4"]Text[ /bs_col]
[ bs_col class="col-sm-4"]Text[ /bs_col]
[ bs_col class="col-sm-4"]Text[ /bs_col]
[ /bs_row]
Tabs are useful if the visitor should stay within the same content and be informed about different options. This might look like this:
[bs_tabs]
[bs_thead]
[bs_tab class="active" type="tab" href="#bs_first_tab9" title="Tab A"]
[bs_tab class="" type="tab" href="#bs_tab311095559" title="Tab B"]
[bs_tab class="" type="tab" href="#bs_tab311229709" title="Tab C"]
[/bs_thead][bs_tcontents]
[bs_tcontent class="active" id="bs_first_tab9"]Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.[/bs_tcontent]
[bs_tcontent class="" id="bs_dropdown19"]Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.[/bs_tcontent]
[bs_tcontent class="" id="bs_dropdown29"]Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.[/bs_tcontent]
[bs_tcontent class="" id="bs_tab311095559"]asdfasf asdfasdf adsfasdf [/bs_tcontent]
[bs_tcontent class="" id="bs_tab311229709"]asdfasdf öja dsfp ökas fjp nadsf[/bs_tcontent]
[/bs_tcontents]
[/bs_tabs]
Tabs can be embedded by using the following shortcodes. Copy them, customize the text and titles of the tabs and delete the empty spaces after each opening bracket (otherwise only the tabs would be displayed).
[ bs_tabs]
[ bs_thead]
[ bs_tab class="active" type="tab" href="#bs_first_tab9" title="Tab A"]
[ bs_tab class="" type="tab" href="#bs_tab311095559" title="Tab B"]
[ bs_tab class="" type="tab" href="#bs_tab311229709" title="Tab C"]
[ /bs_thead][ bs_tcontents]
[ bs_tcontent class="active" id="bs_first_tab9"]Content Tab A[/bs_tcontent]
[ bs_tcontent class="" id="bs_tab311095559"]Content Tab B [/bs_tcontent]
[ bs_tcontent class="" id="bs_tab311229709"]Content Tab C[/bs_tcontent]
[ /bs_tcontents]
[ /bs_tabs]
A Collapse is very useful if a huge amount of content should be presented, while only one certain part of it might be useful for the visitor. He can select the title of the collapse to get more information or leave it by the broad overview.
[bs_collapse id="collapse_af9c-d5a9"]
[bs_citem title="Collapsible Group Item 1" id="citem_bea3-c795" parent="collapse_af9c-d5a9"]
Collapse content goes here....
[/bs_citem]
[bs_citem title="Collapsible Group Item 2" id="citem_e7fd-2f44" parent="collapse_af9c-d5a9"]
Collapse content goes here....
[/bs_citem]
[bs_citem title="Collapsible Group Item 3" id="citem_2977-f95c" parent="collapse_af9c-d5a9"]
Collapse content goes here....
[/bs_citem]
[/bs_collapse]
A collapse can be embedded by using the following shortcodes. Copy them, customize the text and titles of the collapse groups and delete the empty spaces after each opening bracket (otherwise only the tabs would be displayed).
[ bs_collapse id="collapse_af9c-d5a9"]
[ bs_citem title="Collapsible Group Item 1" id="citem_bea3-c795" parent="collapse_af9c-d5a9"]
Collapse content goes here....
[ /bs_citem]
[ bs_citem title="Collapsible Group Item 2" id="citem_e7fd-2f44" parent="collapse_af9c-d5a9"]
Collapse content goes here....
[ /bs_citem]
[ bs_citem title="Collapsible Group Item 3" id="citem_2977-f95c" parent="collapse_af9c-d5a9"]
Collapse content goes here....
[ /bs_citem]
[ /bs_collapse]
A Well is useful to provide feedback for the visitor (e. g. if a form was submitted successfully).
[bs_well size="sm"]This well needs your attention.[/bs_well]
It can be embedded by using the following shortcode. Copy it, customize the text and delete the empty spaces after each opening bracket (otherwise only the well would be displayed).
[ bs_well size="sm"]This well needs your attention.[ /bs_well]
There are different types and purposes of buttons. The default Button of the greenXchange Website should look like this.
[bs_button size="md" type="default" value="click me!" href=""]
It can be embedded by using the following shortcode. Copy it, customize the text and the link and delete the empty spaces after each opening bracket (otherwise only the well would be displayed).
[ bs_button size="md" type="default" value="click me!" href="https://www.greenxchange.de/"]
Twitter Bootstrap provides some standardized icons that are useful in very different websites. The following pictures provides an overview of all available icons.
Lead texts are for very important texts that should be outlined to get the attention of the visitor:
[bs_lead]This is a lead text and needs your attention. This is a lead text and needs your attention. This is a lead text and needs your attention. This is a lead text and needs your attention. [/bs_lead]
It can be embedded by using the following shortcode. Copy it, customize the text and delete the empty spaces after each opening bracket (otherwise only the lead would be displayed).
[ bs_lead]This is a lead text and needs your attention. [ /bs_lead]