TABLE OF CONTENTS
Your website is obviously not an isolated island on the web, and you will constantly refer to or integrate content from other sources. Images, videos, maps, plugin features, etc.
Media library
Use your media library to upload all the images and documents (such as PDFs) that you will use on your website!
For sounds and videos, their size would unnecessarily slow down your site. Leave them hosted on specialized platforms (YouTube, Deezer, Spotify, SoundCloud, etc.). You can integrate them into your website by pasting their link into the Text section of your block editors.
For videos, you have a block whose function is precisely to display a video correctly on the site!
Optimize your images for performance
While videos are hosted elsewhere, your images live on your site. To prevent them from slowing down navigation:
1. Weight and Format (The Golden Rule)
- WebP Format: The new standard. Much lighter than JPG or PNG.
- Compression: Always use tools like Squoosh.app or TinyPNG to reduce file size before uploading.
- Target Weight:
- Banners: 400-500 Kb
- Illustrations & Artists: 150-200 Kb.
Did you know? A 5MB image (direct from a smartphone) takes 10 times longer to load than an optimized 200KB image, draining your visitors' mobile data!
To keep your site fast, treat your images differently based on their size on the screen. Remember this simple principle: the less space an image takes up, the more you can lower its quality without anyone noticing.
- Large Images (Hero Banners, Backgrounds): * Must be high quality (Weight: ~400 Kb). If compressed too much, they will look blurry.
- Medium Images (Artist Profiles, Grid Photos): * Since they appear smaller in a grid, you can use medium quality (Weight: ~100-150 Kb).
- Small Images (Icons, Decorative elements, Logos): * They are tiny on the screen. You can use low quality (Weight: < 50 Kb). Compression artifacts will be invisible to the naked eye.
2. Recommended Dimension To avoid image distortion :
Content Type / Block | Ratio | Recommended Size |
Hero (Background / Text Box / Round BG) | 16:9 | 1400 × 788 px |
Hero (Classic Center) / Video / Editor | 5:3 | 1000 × 600 px |
Hero (Classic Right-Left / Round / Overlay) | 1:1 | 800 × 800 px |
Hero (Overlay Background) | 1:2 | 1400 × 788 px (Portrait) |
Posts / Events / Columns | 5:3 | 500 × 300 px |
Text / Image | 4:5 | 600 × 750 px |
Team | 1:1 | 400 × 400 px |
3. Accessibility (SEO) Don't forget to fill in the "Alt Text" in the media library. Describe the image (e.g., "Portrait of illustrator John Doe").
Shortcode
Shortcode is another element that is regularly used to display plugin features, for example.
There are two ways to insert it into your page:
Method 1 : Paste the shortcode into a block editor (any block, but usually the Editor block)
- Copy the shortcode where it is provided
- In your block editor, go to the Text tab, which is the coded version of what you see in Visual.
- Paste the shortcode where you want it and save. It is important that this shortcode is enclosed in square brackets: [ MY SHORTCODE ]. They look like rectangular brackets.
- On a PC: On most keyboards, hold down Shift + Alt + (opening or closing parenthesis) or Alt G + (opening or closing parenthesis).
- On a Mac: Hold down Option + Alt + 5 + (opening parenthesis) or ° + (closing parenthesis) simultaneously.
Method 2 : Using the Shortcode block
To add a Shortcode block
- Click on the Add a block button, or on the + at the top left of the page.
- Edit the block and paste the shortcode you received into the field indicated.
This is the only block that cannot be configured. It will always take on the background color of your site and/or that of the shortcode you add in the designated field.
If you still want to configure its appearance, you can do so with additional custom CSS. Contact your representative for more information.