Audio WordPress Block – Detailed Overview

ABOUT THE AUTHOR

I’m the SEO specialist at Webcodebuilder and ZEMEZ, companies that create templates powered by Gutenberg WordPress editor and Elementor page builder . We also have ZeGuten multipurpose plugin, which expands Gutenberg's possibilities.

Image Block WordPress - an Experience Based Overview
Prev post
  • Feb 20, 2020
  • 3 min read
  • 2,937

Audio WordPress Block – Detailed Overview

From this quick overview, you will find out more about the Audio WordPress block. We will also learn how to customize this block in the Gutenberg editor.

To start with, you need to click on the plus icon and add an Audio Gutenberg block. After that, you become able to upload an audio file from the Media Library, your PC or insert from URL.

add Audio WordPress block

Once you’ve downloaded the track, you may set a bunch of options to customize your Audio WordPress block. For instance, you can set the alignment for the block or easily replace the song with another one.

Supposedly you want to showcase the song because you’ve written an article about the singer. You can write this in the caption, style the text and link it.

Customize Audio WordPress Block

add a track

Moving to the Audio setting tab, you can set the autoplay, however, be careful, because autoplaying audio may cause usability issues for disturb visitors.

In addition, you can enable the loop and choose one of the three preload variants: auto, metadata or none.

add a title for Audio WordPress block

If you need to style your Audio WordPress block to make it more suitable for the design of your website, you may go to the Advanced tab and set the additional CSS class.

add a class

Let’s figure out how to style the Audio widget WordPress block in the customizer, after having given it a CSS class. Firstly you need to go to the page, where your block is situated. Click on the “Edit with Customizer” text and in the Additional CSS tab write down the name of your class.

go to customizer

Now you can apply some of the CSS settings to customize your Audio WordPress block. Let’s set the font size for the text and choose the proper background color.

You can also add paddings to align the content. The box shadow and border radius for your block.

customize Audio WordPress block

Congratulations! Now you know what is Audio widget WordPress block and a few ways of how to style its interface in Gutenberg and Customizer.

We hope you liked our simple and quick Gutenberg Audio block overview. Find out more about other helpful free Gutenberg blocks. Subscribe to our newsletter and stay in touch for more useful tutorials and instructions!

4
Appreciate
WordPress Video Widget - Short Overview
Next post
Image Block WordPress - an Experience Based Overview
Prev post
WordPress Video Widget - Short Overview
Next post

Get Gutenix Subscription

Create unlimited Gutenberg, Brizy and Elementor websites with dozens of templates, premium blocks and a lightweight theme — all in one toolkit!

Meet Gutenix, the devoted team of developers that stands behind many projects created with Elementor & Gutenberg. We're inspired by WordPress, and are always looking for an opportunity to make WordPress easier for everyone.
Copyright © 2024 Gutenix. All Rights Reserved.