Advanced Design 🏗

☚ Go Back

Now that you have the basics down, you can use the shortcodes below to enhance the design of your webpage.

By using special [ms_] codes on your page you can add features that go beyond what the editor itself could do.

My favorite/most useful codes are:

• Button Shortcode: There are 8 button styles and 4 button sizes you can choose.
  • View Code

    [ms_button style="normal" link="" size="medium" shape="" shadow="" block="" target="" gradient="" color=""  text_color="#ffffff" icon="" icon_animation_type="" border_width="0" class="" id=""]Button Text[/ms_button]

• Column Shortcode: There are 12 types of content columns for the Column shortcode, which can meet most of the column requirements.
  • View Code

    [ms_row]
    [ms_column style="1/3" align="left" class="" id=""] Column Content #1 [/ms_column]
    [ms_column style="1/3" align="left" class="" id=""] Column Content #2 [/ms_column]
    [ms_column style="1/3" align="left" class="" id=""] Column Content #3 [/ms_column]
    [/ms_row]

• Custom Box Shortcode: Text box with a background image.
  • View Code

    [ms_custom_box backgroundimage="" font_size="14" font_color="#ffffff" fixed_background="yes" background_position="top left" padding="30" class="" id=""] Content [/ms_custom_box]

• Divider Shortcode: Divider Shortcode provides 10 styles of the divider.
  • View Code

    [ms_divider style="normal" align="left" width="100%" margin_top="30" margin_bottom="30" border_size="2" border_color="#f2f2f2" icon="" class="" id=""][/ms_divider]

• Expand Text Shortcode: Specifies additional details that the user can view or hide on demand.
  • View Code

    [ms_expand class="" id="" more_icon="fa-eye" more_icon_color="" more_text="Click Me" less_icon="fa-eye-slash" less_icon_color="" less_text="Read Less"]Lorem Ipsum is simply dummy text of the printing and typesetting industry.[/ms_expand]

• Feature Boxes Shortcode: Feature Boxes Shortcode with optional icons/images and multiple layouts.
  • View Code

    [ms_featurebox style="1" title_font_size="18" title_color="#54595F" icon_circle="" icon_size="46" title="Feature Box" icon="fa-line-chart" alignment="" icon_animation_type="bounce" icon_color="" icon_background_color="" icon_border_color="" icon_border_width="0" flip_icon="none" spinning_icon="" icon_image="" icon_image_width="100" icon_image_height="100" link_url="#" link_target="_self" link_text="Read More" link_color="" content_color="" content_box_background_color="" class="" id=""]Your Content Goes Here[/ms_featurebox]

• Google Map Shortcode: Google map with custom info box.
  • View Code

    [ms_google_map address="London" type="roadmap" overlay_color="" infobox_background_color="#cd2f23" infobox_text_color="#ffffff" infobox_content="London City" icon="" width="100%" height="300px" zoom="14" scrollwheel="yes" scale="yes" zoom_pancontrol="yes" popup="yes" animation="no" api_key="GET_YOUR_OWN_GOOGLE_MAP_API_KEY" class="" id=""][/ms_google_map]

• Heading Shortcode: Heading Shortcode provides 5 styles of heading.
  • View Code

    [ms_heading style="border" color="#000000" border_color="#000000" text_align="left" font_weight="400" font_size="36" margin_top="0" margin_bottom="0" border_width="5" responsive_text="yes" class="" id=""]Title Text[/ms_heading]

• QR Code Shortcode: Generates a QR code that can be scanned for contact information or a web address.
  • View Code

    [ms_qrcode alt="Scan QR code" size="200" click="no" fgcolor="#000000" bgcolor="#FFFFFF"]https://www.thunderbayshopping.com/[/ms_qrcode]

• Scheduled Shortcode: Select a time in one day to show the content.
  • View Code

    [ms_scheduled_content time="6-12,13-16" day_week="1-5,7" day_month="10-15,20-25" months="1,5,8-9" years="2021,2022,2345-2666" class="" id=""]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/ms_scheduled_content]

• Section Shortcode: Content section with background and beautiful separators, you can also use it with columns shortcode.
  • View Code

     
     
    Section content.[/ms_section]

• Social Icon Shortcode: Create an icon with a link using Font Awesome and some effects.
  • View Code

    [ms_social icon_size="30" title="" icon="fa-twitter" iconcolor="#6EC1E4" effect_3d="no" backgroundcolor="" iconboxedradius="normal" iconlink="#" icontarget="_blank" class="" id=""][/ms_social]

• Table Shortcode: Add some style to your table.
  • View Code

    [ms_table style="simple" striped="yes" class="" id=""]
    <table>
    <thead>
    <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Item #1</td>
    <td>Description</td>
    <td>Subtotal:</td>
    <td>$1.00</td>
    </tr>
    <tr>
    <td>Item #2</td>
    <td>Description</td>
    <td>Discount:</td>
    <td>$2.00</td>
    </tr>
    <tr>
    <td><strong>All Items</strong></td>
    <td><strong>Description</strong></td>
    <td><strong>Your Total:</strong></td>
    <td><strong>$3.00</strong></td>
    </tr>
    </tbody>
    </table>
    [/ms_table]

• Tabs Shortcode: Turn your one very long page into a couple of short tabbed pages.
  • View Code

    [ms_tabs style="normal" title_color="" class="" id=""]
    [ms_tab title="Tab Title #1" icon=""]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. [/ms_tab]
    [ms_tab title="Tab Title #2" icon=""]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.[/ms_tab]
    [/ms_tabs]

• Targeted Shortcode: Targeted Content Shortcode, displays content by role (‘private’ for the author only, ‘members’ for logged-in users, or ‘guests’ for users not logged in).
  • View Code

    [ms_targeted_content type="guests" alternative="alternative text"]note text[/ms_targeted_content]

• Tooltip Shortcode: Have text in a bubble above, below, left, or right of an object/text when you hover or click.
  • View Code

    [ms_tooltip title="Tooltip #1" background_color="" border_radius="0" placement="top" trigger="hover" class="" id=""]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.[/ms_tooltip]

That is not all of them, you can find more here -> Magee Shortcodes.

Another shortcode added to the advanced design toolbox: IsMobile.

☚ Go Back