Adding Media
Add links, images, videos, and documents to your website.
Adding links
Add contact links and links to pages with simple Markdown. You can learn more about Markdown here.
Add a phone number
Use this syntax to add the phone number you want to link to. If the customer is on a mobile device, the link will open the “call” option on their phone. You can type the phone number in between the brackets in any way you like, but the phone number must have a +1 and no spaces in the parentheses.
[312-468-3077](tel:+13124683077)
When published, the above syntax will show as 312-468-3077
Add an email address
The email address syntax will open a blank email with the “To” field prefilled with the address you enter when clicked. You can enter any text in between the brackets.
[contact@steersman.works](mailto:contact@steersman.works)
When published, the above syntax will show as contact@steersman.works
Adding links
Link to other pages from your website or to outside websites.
Add the text you wish to use as a link in brackets, then add the slug of your URL in parenthesis to link to another page from your website, as seen in the example below.
[Contact us!](/support)
When published, the above syntax will show as Contact us!
You can also add the syntax {:target="_blank"} after your link to have it open in a new tab.
[Contact us!](/support){:target="_blank"}
When published, the above syntax opens in a new tab. Contact us!
If you want to add your link as a button, add {:.button .primary} after your link.
[Contact us!](/support){:.button .primary}
When published, the above syntax will be a button.
Contact us!
Adding images
We’ll first need to find our image in the image library. In the PIM App, under the Media tab, click Images.
You can select Upload (button on the top left) or locate your image in the image library. Select your image to see its details. Here, you can copy the image’s “Markdown Tag” and paste it in your pod.
Adjust your image’s size and position with the “Position” and “Max Width” fields. To set these fields, ensure you are in Edit mode (the button on the top left will say Save if you are in Edit mode).
- Position: Select from Left, Center, Right, and Inline. The image will automatically be left aligned if you do not select an option.
- Max Width: Choose a pixel size or percentage. If you do not choose a size, the image will be set to the full width allowed.
Once you apply these inputs, the “Markdown Tag” for the image will change, and this is what you will copy and paste into your post.
*Clicking “Save” will automatically erase your inputs.
The example below has a no set Position and a Max Width of 200px.
Images as links
Images can also be a link. Add the link in parentheses after the image “Markdown Tag.” The image’s “Markdown Tag” should be in brackets like a regular text link.
Clicking the image below will take you to Steersman’s contact page.
Below is the syntax for the above example.
[{:width="100px"}](/support)
Adding videos
You can embed YouTube videos onto your page.
In the PIM App, click the Videos link under the Media tab.
Click the Create button on the top left, paste a YouTube link here, and click the Save button. Copy and paste your “Markdown Tag” in your pod.
You can adjust your video’s position, aspect ratio, and size. To set these fields, ensure you are in Edit mode (the button on the top left will say Save if you are in Edit mode).
- Position: Select from Left, Center, and Right. The video will automatically be left aligned if you do not select an option.
- Aspect Ratio: Select from a 16x9 or 4x3 ratio. The video will automatically be set to 16x9 if an option is not selected.
- Max Width: Choose a pixel size or percentage. The video will be set to the full width allowed if you do not choose a size.
Once you apply these inputs, the “Markdown Tag” for the image will change, and this is what you will copy and paste into your post.
*Clicking “Save” will automatically erase your inputs.
The example below has a center Position with a Max Width set to 20%.
Adding documents
Add downloadable PDF links to your website page. Upload PDFs to your Documents library under the Media tab in the PIM App. You can attach your PDF documents by clicking the Upload button on the top left.
Select the document to view details. Select the entire “Markdown Tag” to create a downloadable link.
The Name of your document will be the name of your PDF download. You can edit the name and save the changes in the document details.
Below is the “Markdown Tag” copied and pasted.
You can also select to have this PDF link styled as a button.
- Style as: Choose from “Button” (secondary styling) or “Primary Button.” The example below is set to Steerman’s secondary button style.
Steersman example
You can add the downloadable link within your copy text. For this, you would include the “(doc:#)” portion of the markdown tag after the bracketed text you want as a link (formatted the same as website links).
Here is an example of attaching a document within your text.
Images as downloadable links
Images can also link to downloadable PDFs. Add the “(doc:#)” portion of the document’s “Markdown Tag” after the image’s “Markdown Tag.” The image’s “Markdown Tag” should be in brackets like a regular text link.
Clicking the image below will download a PDF.
Below is the syntax for the above example.
[{:width="100px"}](doc:36)
Save and publish
To see your updated content on your website, you need to publish your page. In the Websites App, click on the Publish tab. Once there, click the Create button. On the next screen, you will select the website you want the page to publish to (if you have multiple websites) and check the Pages checkbox. Click Save at the top, then click Start.
