widgetマスター
コミュニティのコメント
-
既存のWidgetを修正しました！
なので入れ直していただければと思います！
既存ページの修正を行いたい場合は、Widget内の javascriptを javascript headに移動した上で、下記の複数のスライドに対応のjavascriptに入れ替えていただければと思います。
<script> var sbReactionSlide = sbReactionSlide || {}; (function(_) { const target = '.js-product-detail'; _.swiper = function(el, elIndex) { const swiperEl = el.querySelector('.swiper'); const navigationEl = swiperEl.closest('.product__info'); navigationEl.classList.add(swiper-${+elIndex}); const swiper = new Swiper(swiperEl, { loop: true, slidesPerView: 1, spaceBetween: 15, speed: 750, autoplay: { delay: 5000, disableOnInteraction: false, }, pagination: { el:.swiper-${+elIndex} .swiper-pagination, type: 'bullets', clickable: true, }, navigation: { nextEl:.swiper-${+elIndex} .swiper-button-next, prevEl:.swiper-${+elIndex} .swiper-button-prev, }, }); } _.init = function() { Array.from(document.querySelectorAll(target)).forEach((el, elIndex) => { if (el.classList.contains('EDITABLE')) el.classList.remove('EDITABLE'); _.swiper(el, elIndex); }); }; })(sbReactionSlide); </script> -
Widget作成いたしました🙌
————-
Widget名: よくある質問コンテンツ（背景色・右側矢印）
カテゴリ: 囲み枠
————-
-
widgetを登録いたしました🙌
●登録カテゴリーとwidget名
表 > シンプルなテーブル
●設置例
-
Widget作成いたしました💫
———-
Widget名: 画面サイズにより3列から1列に可変するブロック(タイトル+画像+テキスト)
カテゴリ: テンプレート記事
———-
設置例はバージョン配信幅を 1100px で設定しております。
またbeyond エディタの仕様上、バージョン配信幅 920px 以上でご利用の場合、下記CSSを javascript head に追加して下さい。
<style> @media screen and (min-width: 920px) { body {width: 100% !important;} } </style> -
確認させていただきます💪
-
Widget作成いたしました🙌
———-
Widget名: テキストの左右に下に流れ続ける矢印
カテゴリ: 自動表示
設置例: https://sb-draft-preview.squadbeyond.com/articles/KFYDIPHXjWneMvckQ/draft?token=96121092574e750115d62185c73ea757
———-
■ 確認事項
<div class="move-arrow" style="--arrow-color:#ffffff;--bgcolor:#fbabb8;--speed:3s;">
[Widgetの背景色]
「–bgcolor:#fbabb8;」の部分を変更するとWidgetの背景色が変わります。
[矢印 & テキストの色]
「–arrow-color:#ffffff;」の部分を変更すると矢印とテキストの色が変わります。
[矢印の動きの速さ]
「–speed:3s;」の部分を変更すると矢印の動きの速さが変わります。
※1s = 1秒
-
Widget作成いたしました！
———-
Widget名: セパレーター（ドットx3)
カテゴリ: 区切り線
———-
-
説明が分かりにくくすみません🙇♀️
こちらになります！
①WidgetのHTMLのJavaScriptを削除
(同じ種類の複数Widgetある場合はすべて削除)
②正しいコードをJavaScript headに貼り付け
-
ページの共有ありがとうございます！
拝見したところ、まだコンテンツを含めていないようなので、
新しくWidgetを入れ直していただくのが一番早いかと思います！
よろしくお願いいたします🙌
-
こちらで問題ないようでしたら反映しようと考えておりました！
反映しても問題ないでしょうか？？
-
念のため確認させてください！画像赤枠部分(https://t.gyazo.com/teams/squadbeyond/f6c9f45bada5c3fff87dad408fe06b7f.png)を「https://sb-draft-preview.squadbeyond.com/articles/kZLIRfqkobrRlNghQ/draft?token=1a27d9cb18b44a11833bb0331c9b8b38」に変更したいということであっていますでしょうか！？
-
かしこまりました💪
-
反映しました！
よろしくお願いいたします！
https://app.squadbeyond.com/ab_tests/HeMoqWvANRXJopjwg/articles#ItRDlpDeKwAXTbSKiw
