[mildthemes_structure]Your content[/mildthemes_structure]

Attributes:

  • Alignment: Define the alignment of the column text (center, left, right). Default: center.
  • Center: If it’s true, move all the column to the center of your screen. Default: false.
  • Cover: If it’s false, every column will have a gutter space of 20px. Default: false.
  • Column: The column width applied in a general behavior. Default: one. View the table below for all the widths availables.
  • Large: Column width applied in large desktop screens (>1500px).
  • Desktop: Column width applied in desktop screens (960px – 1500px).
  • Tablet: Column width applied in tablet screens (768px – 959px).
  • Mobile: Column width applied in mobile screens (601px – 767px).
  • Mini: Column width applied in little screens (<601px).
  • Extra_classes: Add extra classes to customize this column.

Behavior

In the next table you’ll find all the column widths available to build your structured content:

one

one-second
one-second



one-fourth
one-fourth
one-fourth
one-fourth


two-third

one-fourth

three-fourth


For example:

[mildthemes_structure column="one-third" mobile="one"]Vegan sem nec cred adipiscing lectus indie justo curabitur hoodie diam ligula biodiesel rutrum vitae Brooklyn leo donec. [/mildthemes_structure]
[mildthemes_structure column="one-third" mobile="one"]Vegan sem nec cred adipiscing lectus indie justo curabitur hoodie diam ligula biodiesel rutrum vitae Brooklyn leo donec. [/mildthemes_structure]
[mildthemes_structure column="one-third" mobile="one"]Vegan sem nec cred adipiscing lectus indie justo curabitur hoodie diam ligula biodiesel rutrum vitae Brooklyn leo donec. [/mildthemes_structure]

Prints:

If you see this text in a desktop, text will appear in three columns, but if you see this text in a mobile (or on < 600px screen), you will see all the three texts in just one column.

Example adding custom CSS classes to your shortcode:

[mildthemes_structure column="one-third" mobile="one" extra_classes="blue-block white-text"]Vegan sem nec cred adipiscing lectus indie justo curabitur hoodie diam ligula biodiesel rutrum vitae Brooklyn leo donec. [/mildthemes_structure]
[mildthemes_structure column="one-third" mobile="one" extra_classes="grey-block white-text"]Vegan sem nec cred adipiscing lectus indie justo curabitur hoodie diam ligula biodiesel rutrum vitae Brooklyn leo donec. [/mildthemes_structure]
[mildthemes_structure column="one-third" mobile="one" extra_classes="light-block"]Vegan sem nec cred adipiscing lectus indie justo curabitur hoodie diam ligula biodiesel rutrum vitae Brooklyn leo donec. [/mildthemes_structure]

Then, add these classes in your CSS sheet (or WordPress Customizer CSS Edito) and define their attributes:

.blue-block, 
.grey-block, 
.light-block {
 padding-top: 20px;
 padding-bottom: 20px;
}

.light-block {
 background-color: #ecf0f1;
}

.grey-block {
 background-color: #bdc3c7;
}

.blue-block {
 background-color: #2c3e50;
}

.white-text {
 color: white;
}

This code will print: