Image Block
The image block is the simplest media block. We can use it to add single images to a page. The image can be aligned left, right, or center. We can add a link to the image, crop it, add text over the image, add a duotone filter to it, and add a caption. We can also add links to the caption. The picture below is center-aligned with square corners.
Accessibility Tip:
In order to make the images on your page more accessible, be sure to always include alt text with them. Alt text is a short (200 characters or less) and meaningful piece of text that describes what the image is communicating and serves as an effective equivalent when the user cannot access the image. This is especially important for images that contain text as screen readers cannot read image text. Only purely decorative images should omit alt text as this will direct assistive technology to ignore it.
In addition to alt text, be sure to keep color contrast in mind when adding text to images. Text should always be easy to read, with high enough contrast with its background.
To learn more about the image block, see this CAEN Knowledge Base Article.
Cover Block
The cover block can be used to add text over an image. This can be useful for emphasizing titles. We can also use the cover block to add text over a solid or gradient color. The customizations available for the paragraph block are also available for the text in the cover block.
Title
Text over a solid or gradient color
In addition to this, cover blocks can be used to fix background images, creating a parallax scroll effect, where the image scrolls at a different pace to the contained content.
A Heading
Sed consequat, nunc sed laoreet varius, eros enim lacinia ex, eu vulputate enim orci at dui. Nunc mi arcu, fermentum et tortor ut, elementum euismod elit. Integer sed est pretium, aliquam dui imperdiet, interdum enim. Suspendisse vulputate ullamcorper nisi. Phasellus facilisis in ligula a tempus.
Quisque in suscipit eros. Sed auctor urna quis lectus egestas laoreet. Phasellus in mauris a sapien sollicitudin semper. Etiam venenatis erat ligula, a tempor nunc tincidunt ut. Aliquam erat volutpat. Sed in risus nunc. In non ornare tellus. Nulla sed est et dolor ornare iaculis id eu lorem.
To learn more about the cover block, see this CAEN Knowledge Base Article.
Photo Gallery Block
To create a photo gallery or grid, we will use the Gallery Block. The block can have many pictures per row. We can move the picture locations by clicking on the picture and using the left/right arrow buttons.
To learn more about the gallery block, see this CAEN Knowledge Base Article.
Embedding a Video
To embed a video, we can use the video or embed blocks. The following is an embedded YouTube video. We can add a caption and automatically resize the video for smaller devices.
To learn more about embedding a video, see this CAEN Knowledge Base Article.
Audio Block
The audio block allows us to embed audio from a website or upload mp3 files. You can also embed a Spotify, SoundCloud or Podcast link. Below is an example of an embedded Spotify link.
To learn more about importing or embedding audio, see this CAEN Knowledge Base Article.
File Block
The file block can be used to link files and allow people to download files. The name of the file is listed to the left of the download button. When we click on the name of the file, the file opens in the same window and when we click download, the file downloads to one’s computer.
To learn more about the file block, see this CAEN Knowledge Base Article.
Metaslider
The Metaslider block is a special block that we use to create picture slideshows. We start by creating the slideshow. There is a tab on the left of the website dashboard named Metaslider. Once we have created our slideshow, we can add it to our page. Using the Metaslider block, we can select the slideshow we created from the block settings. If we edit this slideshow from our dashboard, it will automatically update on each page the slider is on.
First picture
To learn more about the file block, see this CAEN Knowledge Base Article.
Embed Block
The embed block allows us to embed a website, video, or audio as long as the external website allows it. For example, using this block, we can show a preview to the college of engineering Flickr page. There are only certain websites that we can embed from currently and they are listed here.
To learn more about the file block, see this CAEN Knowledge Base Article.
Ready to view more WordPress Blocks?
Learn the various options for organising content or discover the different text styles available to you!