{"id":8224,"date":"2020-06-01T03:38:49","date_gmt":"2020-06-01T10:38:49","guid":{"rendered":"https:\/\/www.waveplayer.info\/?p=8224"},"modified":"2020-06-01T04:32:18","modified_gmt":"2020-06-01T11:32:18","slug":"using-multiple-skins-on-the-same-page","status":"publish","type":"post","link":"https:\/\/www.waveplayer.info\/docs\/using-multiple-skins-on-the-same-page\/","title":{"rendered":"Using multiple skins on the same page"},"content":{"rendered":"\n
\n
\n\t
\n\t\t
<\/div>\n\t<\/div>\n\t
\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t\t
<\/div>\n\t\t\t
\n\t\t\t\t
<\/div>\n\t\t\t<\/div>\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t
<\/div>\n\t\t
<\/div>\n\t\t
<\/div>\n\t<\/div>\n\t
\n\t\t
\n\t\t\t
<\/div>\n\t\t\t
<\/div>\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t
\n\t\t\t
\n\t\t\t\t
<\/div>\n\t\t\t<\/div>\n\t\t\t
<\/div>\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t
\n\t\t\t
<\/div><\/div>\n\t\t<\/div>\n\t<\/div>\n\t
\n\t\t
<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n\n\n

<\/p>\n<\/div>\n\n\n\n

\n

With WavePlayer 3 you have now the possibility to use multiple skins on the same page. The page you are reading now was assembled using the Gutenberg editor. After structuring the page and adding several players to each section, each player was adjusted to use one of the six skins included with the plugin.<\/p>\n\n\n\n

For example, the player on the left side of this paragraph uses the W3 Exhibition<\/strong> skin \u2013 a version of the W3 Standard<\/strong> skin where the thumbnail of the current track is used as a blurred background for the player. While the player right after this paragraph uses the Play’n’Wave<\/strong> skin \u2013 the skin that is used by default for the player automatically added to the WooCommerce single product page.<\/p>\n<\/div>\n<\/div>\n\n\n

\n\t
\n\t\t
<\/div>\n\t<\/div>\n\t
\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t\t
<\/div>\n\t\t\t
\n\t\t\t\t
<\/div>\n\t\t\t<\/div>\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t
<\/div>\n\t\t
<\/div>\n\t\t
<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n\n\n

In the following section, you can appreciate the Thumb’n’Wave<\/strong> skin, an interface we designed as a companion for the WooCommerce shop page<\/a><\/strong>. <\/p>\n\n\n\n

\n
\n\t
\n\t\t
<\/div>\n\t\t
\n\t\t\t
<\/div>\n\t\t\t
<\/div>\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t<\/svg>\n\t\t\t\t
<\/div>\n\t\t\t\t
\n\t\t\t\t\t
<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
<\/div>\n\t\t\t<\/div>\n\t\t\t
<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n\n\n

<\/p>\n<\/div>\n\n\n\n

\n\t
\n\t\t
<\/div>\n\t\t
\n\t\t\t
<\/div>\n\t\t\t
<\/div>\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t<\/svg>\n\t\t\t\t
<\/div>\n\t\t\t\t
\n\t\t\t\t\t
<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
<\/div>\n\t\t\t<\/div>\n\t\t\t
<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
\n\t
\n\t\t
<\/div>\n\t\t
\n\t\t\t
<\/div>\n\t\t\t
<\/div>\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t<\/svg>\n\t\t\t\t
<\/div>\n\t\t\t\t
\n\t\t\t\t\t
<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
<\/div>\n\t\t\t<\/div>\n\t\t\t
<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
\n\t
\n\t\t
<\/div>\n\t\t
\n\t\t\t
<\/div>\n\t\t\t
<\/div>\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t<\/svg>\n\t\t\t\t
<\/div>\n\t\t\t\t
\n\t\t\t\t\t
<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
<\/div>\n\t\t\t<\/div>\n\t\t\t
<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

With WavePlayer 3 you have now the possibility to use multiple skins on the same page. The page you are reading now was assembled using the Gutenberg editor. After structuring the page and adding several players to each section, each player was adjusted to use one of the six skins included with the plugin. For […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47],"tags":[],"class_list":["post-8224","post","type-post","status-publish","format-standard","hentry","category-docs"],"_links":{"self":[{"href":"https:\/\/www.waveplayer.info\/wp-json\/wp\/v2\/posts\/8224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.waveplayer.info\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.waveplayer.info\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.waveplayer.info\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.waveplayer.info\/wp-json\/wp\/v2\/comments?post=8224"}],"version-history":[{"count":0,"href":"https:\/\/www.waveplayer.info\/wp-json\/wp\/v2\/posts\/8224\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.waveplayer.info\/wp-json\/wp\/v2\/media?parent=8224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.waveplayer.info\/wp-json\/wp\/v2\/categories?post=8224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.waveplayer.info\/wp-json\/wp\/v2\/tags?post=8224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}