Functionality

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)

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