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:

Default Button Outlined Button Unelevated Button Raised Button

[button href=https://materiax.elcreativeacademy.com/]Default Button[/button]
[button href=https://materiax.elcreativeacademy.com/ style=outlined]Outlined Button[/button]
[button href=https://materiax.elcreativeacademy.com/ style=unelevated]Unelevated Button[/button]
[button href=https://materiax.elcreativeacademy.com/ style=raised]Raised Button[/button]
Try it in Shortcode Playground.

Rounded Button

This shortcode allows you to add rounded button style:

Default Rounded Button Outline Rounded Button Unelevated Rounded Button Raised Rounded Button

[button href=https://materiax.elcreativeacademy.com/ style=rounded]Default Rounded Button[/button]
[button href=https://materiax.elcreativeacademy.com/ style=rounded outlined]Outline Rounded Button[/button]
[button href=https://materiax.elcreativeacademy.com/ style=rounded unelevated]Unelevated Rounded Button[/button]
[button href=https://materiax.elcreativeacademy.com/ style=rounded raised]Raised Rounded Button[/button]
Try it in Shortcode Playground.

Button with Icon

This shortcode allows you to add button with icons:

Default Button Outlined Button Unelevated Button Raised Button Default Rounded Button Outline Rounded Button Unelevated Rounded Button Raised Rounded Button

[button href=https://materiax.elcreativeacademy.com/]<svg width="24" height="24" viewBox="0 0 24 24"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"></path></svg><span>Default Button</span>[/button]
[button href=https://materiax.elcreativeacademy.com/ style=outlined]<svg width="24" height="24" viewBox="0 0 24 24"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"></path></svg><span>Outlined Button</span>[/button]
[button href=https://materiax.elcreativeacademy.com/ style=unelevated]<svg width="24" height="24" viewBox="0 0 24 24"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"></path></svg><span>Unelevated Button</span>[/button]
[button href=https://materiax.elcreativeacademy.com/ style=raised]<svg width="24" height="24" viewBox="0 0 24 24"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"></path></svg><span>Raised Button</span>[/button]
[button href=https://materiax.elcreativeacademy.com/ style=rounded]<svg width="24" height="24" viewBox="0 0 24 24"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"></path></svg><span>Default Rounded Button</span>[/button]
[button href=https://materiax.elcreativeacademy.com/ style=rounded outlined]<svg width="24" height="24" viewBox="0 0 24 24"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"></path></svg><span>Outline Rounded Button</span>[/button]
[button href=https://materiax.elcreativeacademy.com/ style=rounded unelevated]<svg width="24" height="24" viewBox="0 0 24 24"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"></path></svg><span>Unelevated Rounded Button</span>[/button]
[button href=https://materiax.elcreativeacademy.com/ style=rounded raised]<svg width="24" height="24" viewBox="0 0 24 24"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"></path></svg><span>Raised Rounded Button</span>[/button]
Try it in Shortcode Playground.

Button with Ripple Effect

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

Default Button Outlined Button Unelevated Button Raised Button

[button href=https://materiax.elcreativeacademy.com/ style=elcreative_ripple]Default Button[/button]
[button href=https://materiax.elcreativeacademy.com/ style=outlined elcreative_ripple]Outlined Button[/button]
[button href=https://materiax.elcreativeacademy.com/ style=unelevated elcreative_ripple]Unelevated Button[/button]
[button href=https://materiax.elcreativeacademy.com/ style=raised elcreative_ripple]Raised Button[/button]
Try it in Shortcode Playground.

Default Shortcode:

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

Attributes:

  • href - Button URL (Required). Change the BUTTON_HREF to the URL you want. If it is not filled, it will automatically become #.
  • style - Button Style (Optional). Change the BUTTON_STYLE to the available attribute values below:
    • Style: default, outlined, unelevated, raised.
    • Shape: rounded.
    • Ripple Effect: elcreative_ripple.
  • rel - Button Link Relation (Optional). Change the BUTTON_REL to the Link Relation. If it is not filled, it will automatically become nofollow noopener noreferer.
  • target - Button Target (Optional). Change the BUTTON_TARGET to the Link Target. If it is not filled, it will automatically become _blank.
  • BUTTON_TEXT - Button Text (Required). The value of this attribute is useful for displaying the text on the button.

Alerts

This shortcode allows you to add alerts:

Default Alert

This shortcode allows you to add default alerts:

[alert type=default]Alert message. This is a <a href="#">sample link</a>.[/alert]
[alert type=alert_warning]Warning message. This is a <a href="#">sample link</a>.[/alert]
[alert type=alert_error]Error message. This is a <a href="#">sample link</a>.[/alert]
[alert type=alert_info]Info message. This is a <a href="#">sample link</a>.[/alert]
[alert type=alert_success]Success message. This is a <a href="#">sample link</a>.[/alert]
Try it in Shortcode Playground.

Outline Alert

This shortcode allows you to add outline alerts:

[alert type=alert_outline alert_warning]Outline Warning message. This is a <a href="#">sample link</a>.[/alert]
[alert type=alert_outline alert_error]Outline Error message. This is a <a href="#">sample link</a>.[/alert]
[alert type=alert_outline alert_info]Outline Info message. This is a <a href="#">sample link</a>.[/alert]
[alert type=alert_outline alert_success]Outline Success message. This is a <a href="#">sample link</a>.[/alert]
Try it in Shortcode Playground.

Default Shortcode:

[alert type=ALERT_TYPE]ALERT_CONTENT[/alert]

Attributes:

  • type - Alert Type (Required). Change the ALERT_TYPE to the available attribute values below:
    • Style: default, alert_warning, alert_error, alert_info, alert_success and alert_outline.
  • ALERT_CONTENT - Alert Content (Required). The value of this attribute is useful for displaying text on alerts.

YouTube Embed + Lazyload

This shortcode allows you to video from YouTube with Lazyload:

[youtube id=Kafe4rl_S_w]
Try it in Shortcode Playground.

Default Shortcode:

[youtube id=YOUTUBE_ID]

Attributes:

id - YouTube Video ID (Required). 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 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:

Materia_X2_Premium.zip2000 GB
[fileDownload name=Materia_X2_Premium.zip size=2000 GB]https://materiax.elcreativeacademy.com/[/fileDownload]
Try it in Shortcode Playground.

Default Shortcode:

[fileDownload name=FILE_NAME size=FILE_SIZE type=FILE_TYPE]FILE_URL[/fileDownload]

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