SHORTCODES
Youtube shortcode
To use add:
[youtube id="O6qUu7jS5X8"]
This will have the most basic schema markup added in the background
Options for additional schema (Recommended to use for better seo ):
[youtube id="O6qUu7jS5X8" name="Discover Culligan Water - About Us" description="Description of the video" thumbnail="https://demo.culligandigital.com/wp-content/uploads/2022/12/Culligan-Discover-360x200-Card.webp" thumbnailUrl="https://demo.culligandigital.com/wp-content/uploads/2022/12/Culligan-Discover-360x200-Card.webp"]
[youtube id="O6qUu7jS5X8" name="Discover Culligan Water - About Us" description="Description of the video" thumbnail="https://demo.culligandigital.com/wp-content/uploads/2022/12/Culligan-Discover-360x200-Card.webp" thumbnailUrl="https://demo.culligandigital.com/wp-content/uploads/2022/12/Culligan-Discover-360x200-Card.webp" imgurl="https://demo.culligandigital.com/wp-content/uploads/2022/09/Group-303.png" type="img" autoplay=true]
id – The ID of the video
autoplay=true – Autoplay video on load
type="img" – Will play video after click on chosen image
imgurl – Thumbnail image URL, when type="img" is chosen
name – Name of the video (SEO)
description – Description of the video (SEO)
thumbnail – Url of the thumbnail of the video (SEO)
thumbnailUrl – Url of the thumbnail of the video (SEO)
uploadDate – Date of video upload (SEO)
duration – duration of the video the format is PT1M30S ( PT= Period Time 1M = 1 minute and 30s = 30seconds ) (SEO)
Menu shortcode
Culligan Settings -> Footer Menu
Appearance -> Menus
-used mostly in footer
-will retrieve WP menu
[menu id="13"]
id – ID of WP menu
Social media shortcode
Culligan Settings -> Footer Menu
This shortcode will create social media 20×20 icons :
[social_media]
Custom links and images
To add a link use the shorcode:
[link url="https://demo.culligandigital.com/get-a-quote/" text="Click here"]
url= Here goes the URL of the page we are linking to or the PDF to download
text= Here goes the visible text which the visitor will be clicking on
to add an image use the shortcode:
[image url="https://demo.culligandigital.com/wp-content/themes/culligan-emea/img/close.svg" alt="logo" width="15" height="15"]
url= URL (src) of the image
alt= alt text
width= in pixels, without units written explicitly, if this is not set, the default is 100%
height= in pixels, without units written explicitly, if this is not set, the default is 100%
Scroll to
To link to Points in a page Please use our custom scroll functionality instead of linking to div ids
To use the scroll functionality add #scroll-something-custom-here and then use that as a class on the div you want to scroll to
this is just an example in combination with the link shortcode this can be added to available link or href fields in chosen modules
example
[link url="#scroll-mycustomname" text="Click here"]
this is the html example but ideally the scroll-mycustomname will be put in the available classes field of the module you with to scroll to Notice the # is not used when adding it to the class just in the link
<div class="scroll-mycustomname">Some div on the page <div>
Buttons Shortcode
To add a button use the shorcode:
[button class="btn btn-primary" link="/page"]Button[/button]
for all the button styles go to Style guides page
