Materia X2 Premium 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.
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 theBUTTON_HREF
to the URL you want. If it is not filled, it will automatically become#
.style
- Button Style (Optional). Change theBUTTON_STYLE
to the available attribute values below:- Style:
default
,outlined
,unelevated
,raised
. - Shape:
rounded
. - Ripple Effect:
elcreative_ripple
.
- Style:
rel
- Button Link Relation (Optional). Change theBUTTON_REL
to the Link Relation. If it is not filled, it will automatically becomenofollow noopener noreferer
.target
- Button Target (Optional). Change theBUTTON_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 theALERT_TYPE
to the available attribute values below:- Style:
default
,alert_warning
,alert_error
,alert_info
,alert_success
andalert_outline
.
- Style:
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.
- 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.
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 theSNACKBAR_BUTTON_STYLE
to the available attribute values below:- Style:
default
,outlined
,unelevated
,raised
. - Shape:
rounded
.
- Style:
text
- Snackbar Button Text (Required). Change theSNACKBAR_BUTTON_TEXT
to the text you want. If it is not filled, it will automatically becomeSnackbar
.duration
- Snackbar Duration (Optional). Change theSNACKBAR_DURATION
to the duration you want. Fill in milliseconds. If it is not filled, it will automatically become2000
(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:
[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 theFILE_SIZE
to the file size you want. If it is not filled, it will automatically become-
.type
- File Type (Required). Change theFILE_TYPE
to the available attribute values below:- File Type:
zip
,archive
,rar
andapk
.
- File Type:
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.
[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]