Materia X2 Premium Shortcode

Steps to Using Materia X2 Shortcode
Yasya El Hakim
Materia X2 - Post Shortcode

A shortcode feature from Materia X2 that can make it easier to make posts. Thanks to this feature, you don't need to write complex HTML codes to customize web pages and blog content.

Although Materia X2 has this feature, we recommend against using it directly. Don't worry, you can still use this Post Shortcode by converting it via the Shortcode Playground.

Before using this Post Shortcode, make sure you have enabled the Post Shortcode feature.

Table of Contents

Buttons

This shortcode allows you to add buttons:

Default Button

This shortcode allows you to add default button style:

[buttonLink]Default Button Link[/buttonLink]
[buttonLink style=outlined]Outlined Button Link[/buttonLink]
[buttonLink style=unelevated]Unelevated Button Link[/buttonLink]
[buttonLink style=raised]Raised Button Link[/buttonLink]

Try it in Shortcode Playground.

Rounded Button

This shortcode allows you to add rounded button style:

[buttonLink style=rounded]Default Rounded Button[/buttonLink]
[buttonLink style=rounded outlined]Outline Rounded Button[/buttonLink]
[buttonLink style=rounded unelevated]Unelevated Rounded Button[/buttonLink]
[buttonLink style=rounded raised]Raised Rounded Button[/buttonLink]

Try it in Shortcode Playground.

Button with Ripple Effect

This shortcode allows you to add material design ripple effect to the button:

[buttonLink style=elcreative_ripple]Default Button[/buttonLink]
[buttonLink style=outlined elcreative_ripple]Outlined Button[/buttonLink]
[buttonLink style=unelevated elcreative_ripple]Unelevated Button[/buttonLink]
[buttonLink style=raised elcreative_ripple]Raised Button[/buttonLink]

Try it in Shortcode Playground.

Default Shortcode:

[buttonLink]BUTTON_TEXT[/buttonLink]
[buttonLink href=BUTTON_HREF style=BUTTON_STYLE rel=BUTTON_REL target=BUTTON_TARGET]BUTTON_TEXT[/buttonLink]

Attributes:

  • href - Button URL. Change the BUTTON_HREF to the URL you want. Example: https://www.elcreativeacademy.com/.
  • style - Button Style. Change the BUTTON_STYLE to the available attribute values below:
    • Style: default, outlined, unelevated, raised. Cannot be combined at once. Just select one of the available options.
    • Shape: rounded.
    • Ripple Effect: elcreative_ripple.
    For example, if you want to use a Raised Style, Rounded Shape, and have a ripple effect. You can enter "raised rounded elcreative_ripple".
  • rel - Button Link Relation. Change the BUTTON_REL to the Link Relation. If it is not filled, it will automatically become nofollow noopener noreferer.
  • target - Button Target. Change the BUTTON_TARGET to the Link Target. You can set it to _blank, _self, _parent or _top. If it is not filled, it will automatically become _blank.
  • BUTTON_TEXT - Button Text. Change the BUTTON_TEXT to the button text. You can also add content in HTML format. But make sure you edit it in HTML View mode.

Alerts

This shortcode allows you to add alerts:

Default Alert

This shortcode allows you to add default alerts:

[alert]Alert message.[/alert]
[alert type=alert_warning]Warning message.[/alert]
[alert type=alert_error]Error message.[/alert]
[alert type=alert_info]Info message.[/alert]
[alert type=alert_success]Success message.[/alert]

Try it in Shortcode Playground.

Outline Alert

This shortcode allows you to add outline alerts:

[alert type=alert_outline]Outline Alert message.[/alert]
[alert type=alert_outline alert_warning]Outline Warning message.[/alert]
[alert type=alert_outline alert_error]Outline Error message.[/alert]
[alert type=alert_outline alert_info]Outline Info message.[/alert]
[alert type=alert_outline alert_success]Outline Success message.[/alert]

Try it in Shortcode Playground.

Default Shortcode:

[alert]ALERT_CONTENT[/alert]
[alert type=ALERT_TYPE]ALERT_CONTENT[/alert]

Attributes:

  • type - Alert Type. Change the ALERT_TYPE to the available attribute values below:
    • Style: default, alert_warning, alert_error, alert_info and alert_success. To create an Alert Outline, add alert_outline.
  • ALERT_CONTENT - Alert Content (Required). The value of this attribute is useful for displaying text on alerts. You can also add content in HTML format. But make sure you edit it in HTML View mode.

YouTube Embed

This shortcode allows you to video from YouTube with Lazyload:

[youtube id=Kafe4rl_S_w]

Try it in Shortcode Playground.

Default Shortcode:

[youtube]
[youtube id=YOUTUBE_ID]

Attributes:

id - YouTube Video ID. Example: Kafe4rl_S_w. If your YouTube video URL is https://www.youtube.com/watch?v=Kafe4rl_S_w, then your YouTube video ID is Kafe4rl_S_w.

YouTube video above will not contain an iframe, but only an image. So don't worry about your blog being slow due to the iframe loading process. The YouTube embed will only work when the user clicks the play button.

Contact Form

This shortcode allows you to add Contact Form:

Default Shortcode:

[contactForm]

Try it in Shortcode Playground.

Attention!
  • Before using the Contact Form Shortcode. Make sure you have the Contact Form Widget already in the Blogger Layout.
  • The Contact Form will only appear on static pages.
Materia X2 is designed as much as possible to have a standard page speed score. In fact, Blogger loads a default script called widget.js. Here, we're wrapping it so that it doesn't load when the page is rendered. So, some of the blogger's default gadgets that require this script will only work on Static pages, including the Contact Form.

Snackbar

This shortcode allows you to add snackbar:

[buttonSnackbar style=raised text=Open Snackbar duration=2000]This snackbar will disappear in the duration of 2000 milliseconds or 2 seconds.[/buttonSnackbar]

Try it in Shortcode Playground.

Default Shortcode:

[buttonSnackbar]SNACKBAR_CONTENT[/buttonSnackbar]
[buttonSnackbar style=SNACKBAR_BUTTON_STYLE text=SNACKBAR_BUTTON_TEXT duration=SNACKBAR_DURATION]SNACKBAR_CONTENT[/buttonSnackbar]

Attributes:

  • style - Snackbar Button Style (Optional). Change the SNACKBAR_BUTTON_STYLE to the available attribute values below:
    • Style: default, outlined, unelevated, raised.
    • Shape: rounded.
  • text - Snackbar Button Text (Required). Change the SNACKBAR_BUTTON_TEXT to the text you want. If it is not filled, it will automatically become Snackbar.
  • duration - Snackbar Duration (Optional). Change the SNACKBAR_DURATION to the duration you want. Fill in milliseconds. If it is not filled, it will automatically become 2000 (2 Seconds).
  • SNACKBAR_CONTENT - Snackbar Content (Required). The value of this attribute is useful for displaying text on snackbar.

Downloadable File

This shortcode allows you to add Downloadable File Component:

[fileDownload name=Materia_X2_Premium.zip size=2000 GB]https://materiax.elcreativeacademy.com/[/fileDownload]

Try it in Shortcode Playground.

Default Shortcode:

Attributes:

  • name - File Name (Required). The value of this attribute is useful for displaying file name.
  • size - File Size (Optional). Change the FILE_SIZE to the file size you want. If it is not filled, it will automatically become -.
  • type - File Type (Required). Change the FILE_TYPE to the available attribute values below:
    • File Type: zip, archive, rar and apk.
  • FILE_URL - File URL (Required). The value of this attribute is useful for setting the file URL.

Masonry Image

This shortcode allows you to add Masonry Image Component:

[imageMasonry]
https://images.unsplash.com/photo-1653287805993-9a1a7ea28c20?w=800,
https://images.unsplash.com/photo-1557123481-ef06b737a474?w=800,
https://images.unsplash.com/photo-1653297526910-4834e6763f58?w=800,
https://images.unsplash.com/photo-1587280717868-fff936890905?w=800,
https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=800,
https://images.unsplash.com/photo-1557033051-1d426c3a4d42?w=800,
https://images.unsplash.com/photo-1558769673-de478227d1f5?w=800,
https://images.unsplash.com/photo-1503631285924-e1544dce8b28?w=800,
[/imageMasonry]

Try it in Shortcode Playground.

Default Shortcode:

[imageMasonry]IMAGE_URL[/imageMasonry]

Attributes:

IMAGE_URL - Image URL (Required). Fill with multiple image URLs separated by commas.

Those are some steps to use Post Shortcode in the Materia X2 Theme. If you have any questions, please write them in the comments section.

If you want to report some bugs, you can write them in the comments section on the Bug Report page and if you want to request new features or want to provide feedback, please write them in the comments section on the Request and Feedback page.

Labels:
Yasya El Hakim
404 Not Found!
Comments
To add an image:
[image] image_url [/image]

To add a code block:
[code] your_code [/code]

To add a quote:
[quote] your_quote [/quote]

To add a link:
[link] your_link_text | link_url [/link]
DGraphinx
Comment Poster
awesome bro
Yasya El Hakim
Replied
Thanks.
Reply to This Comment