Shortcode Manager Preview

We are happy to announce the new Macho Shortcode Manager.

If your Macho Theme has the support for it, you will be prompted to activate the Macho Shortcode Manager inside the Dashboard > Plugins

After the activation, a new icon will appear in the visual mode of your WYSIWYG WordPress editor

The Macho Shortcodes Button will pop-up the shortcode manager where you can choose from a various list of shortcodes:

All shortcodes have different layouts visibility options where you can choose to display or not the shortcode depending on the screen size resolution.

At the bottom of the shortcode the Insert Shortcode button has to be used in order to place the shortcode inside your section, page or post: 

Column Shortcode

Before inserting any shortcode, a layout of the page should be build in order to wrap your elements and benefit from the responsive layout.

Here you can choose how to display your content:

  • 1/2 will create an element on half the page, thus you'll need 2 of 1/2 elements to build a full-width section. 
[column md="6" hide_xs="false" hide_sm="false" hide_md="false" hide_lg="false"]You can enter any shortcodes here.[/column]
  • 1/3 will create an element taking 33% of your section, so 3 elements of 1/3 are required to complete a full-width page
[column md="4" hide_xs="false" hide_sm="false" hide_md="false" hide_lg="false"]You can enter any shortcodes here.[/column]
  • 1/4 will separate the page in 4 section, requiring 4 of them
[column md="3" hide_xs="false" hide_sm="false" hide_md="false" hide_lg="false"]You can enter any shortcodes here.[/column]
  • Using a 1/4 and 3/4 will create 2 elements, one spanning on 25% of the page with the other taking 75% of the section space.
[column md="3" hide_xs="false" hide_sm="false" hide_md="false" hide_lg="false"]You can enter any shortcodes here.[/column] [column md="9" hide_xs="false" hide_sm="false" hide_md="false" hide_lg="false"]You can enter any shortcodes here.[/column]
  • The same analogy applies for 1/6 and 5/6 column shortcode
[column md="2" hide_xs="false" hide_sm="false" hide_md="false" hide_lg="false"]You can enter any shortcodes here.[/column] [column md="10" hide_xs="false" hide_sm="false" hide_md="false" hide_lg="false"]You can enter any shortcodes here.[/column]
  • The general rule to create a full-width layout is to sum up to a 12 column md
[column md="12" hide_xs="false" hide_sm="false" hide_md="false" hide_lg="false"]You can enter any shortcodes here.[/column]

Every 12 columns full-width row must be wrapped inside a [row][/row] shortcode and the [row][/row] will be automatically added when you insert the shortcode.

At the bottom of the Column shortcode, you can remove or add another column, before inserting everything into the page.

Now that you completed a full-width row, you might want to add a Spacer Shortcode to continue with another set of elements. 

Here you can add white space with a custom CSS class and input the height in pixels.

The Divider Shortcode will add a spacing line with the form of a solid line, dashed or dotted. Instead of height, margin top and bottom can be added and colors can be chosen from the color picker

The Button Shortcode will add a button. Various options are available:

  • Button Text
  • Button Link
  • Button Background
  • Button Text Color
  • Button Size - small, medium or large
  • Button Target - _self (same browser tab) or _blank (new tab)
  • Button Border Radius - roundness of the button

You can also choose for a left Icon or right icon to better illustrate the button:

The Heading Shortcode will create a headliner for your website with the followin properties:

  • Title
  • Font size (px)
  • Color
  • Margin top and bottom
  • Type of the header (h1-h6)
  • Style
  • Alignment
  • Icon left or right options

Highlights shortcode will create text to be highlighted inside the normal text, for better appearance:

  • Text
  • Color

The Rounded Image Shortcode will insert a picture with rounded corners. For a perfect circle, values have to be at least half of the width and heigh of the picture.

Google Map Shortcode will introduce a map with the following options:

  • Map control (zoom in - out) ON/OFF
  • Scroll Wheel ON/OFF
  • Address
  • Height
  • Width
  • Zoom

Skillbar Shortcode to better illustrate your various capacities, in percentages or not:

  • Skillbar Text
  • Percentage
  • Color
  • Show Percentage ON(True)/OFF(False)

Callout Shortcode to better channel your visitors to the right direction:

  • Call-To-Action Content 
  • Button Text
  • Button Link
  • Button Target - _self (same browser tab) or _blank (new tab)

  • Callout Background Color
  • Callout Button Background Color
  • Callout Button Text Color

Pricing Table Shortcode will add a classic pricing table. The following options are available:

  • Features - a list of features is recommended, list that can be easily created with the List with Icon Shortcode
  • Size - same analogy as the Column Shortcode
  • Image
  • Position
  • Featured - suitable for the most important pricing plan, will provide a different style for the box
  • Plan 

  • Cost
  • Per (optional)
  • Button Text
  • Button Link
  • Button Target
  • Button Rel
  • Button Icon

Chart Shortcode will add a piechart visualisation of your content:

  • Text to be displayed inside the chart wheel
  • Percentage
  • Wheel Background Color
  • Percentage bar color
  • Icon

The Slider Shortcode will let you insert a Macho Power Slider, where available

Team Shortcode will let you add members to your website in a user-friendly way:

  • Member Name
  • Member Description
  • Member Image
  • Member Social Profiles

With List with Icon Shortcode you can easily create ul li Lists and choose from countless icons to better assist your content

Still need help? Contact Us Contact Us