セールスパネルショートコード
このショートコードを使用するにはDigiPressテーマ専用のプラグイン(有料)が必要です
最小限のパラメータのみで表示した例(3パネル)
メインタイトル1
ホバータイトル
メインタイトル2
ホバータイトル
メインタイトル3
ホバータイトル
Code
[spanel row1colnum='3' row2colnum='0'] [spanelitem title='メインタイトル1' caption='これはキャプション' hovertitle='ホバータイトル' hovercaption='マウスオーバー時のキャプション' bgimg='https://drive.google.com/uc?export=view&id=12pe8WYPvyvHbUoET1QheRqWgYCmoC_sB' url='#遷移先のURL'] [spanelitem title='メインタイトル2' caption='これはキャプション' hovertitle='ホバータイトル' hovercaption='マウスオーバー時のキャプション' bgimg='https://drive.google.com/uc?export=view&id=1vN2qQQ1pdqQyDN58wlNnEYmFUj0yP0Li' url='#遷移先のURL'] [spanelitem title='メインタイトル3' caption='これはキャプション' hovertitle='ホバータイトル' hovercaption='マウスオーバー時のキャプション' bgimg='https://drive.google.com/uc?export=view&id=1b4szhNJNJMzMwK5ZwkeWasQn1M2HOksf' url='#遷移先のURL'] [/spanel]
1行目2カラム + 2行目3カラムで様々なオプション付きで表示した例
AMP対応
高度で柔軟なAMPモード
pjax
Ajax + pushState
Shortcodes
for DigiPress
メディアスライダー
エフェクトは10種類
豊富なレイアウト
+ widget
Code
[spanel row1colnum='2' row2colnum='3' hoverfx='4' overlayopacity='2' hoveroverlayopacity='5' txtshadow='0'] [spanelitem title='AMP対応' titlesize='30px' titlebold='' titleitalic='1' caption='デザインと機能を損なわないAMP' captionsize='13px' txtcolor='#fff' overlaycolor='#337fea' hovertitle='高度で柔軟なAMPモード' hovercaption='詳細はこちら' hovertxtcolor='#fff' hoveroverlaycolor='#154d91' bgimg='https://drive.google.com/uc?export=view&id=12pe8WYPvyvHbUoET1QheRqWgYCmoC_sB' url='https://digipress.digi-state.com/about-amp-function/' newwindow='1'] [spanelitem title='pjax' titlesize='30px' titlebold='' titleitalic='1' caption='非同期通信による高速なページ遷移' captionsize='13px' txtcolor='#fff' overlaycolor='#49d17f' hovertitle='Ajax + pushState' hovercaption='詳細はこちら' hovertxtcolor='#fff' hoveroverlaycolor='#1c3526' bgimg='https://drive.google.com/uc?export=view&id=15s05GoPqIYlEXJccJTfL1_5_7FZICaCi' url='https://demo.dptheme.net/dp18/archives/3996'] [spanelitem title='Shortcodes' titlesize='27px' titlebold='' titleitalic='1' caption='豊富で実用的なショートコード' captionsize='13px' txtcolor='#fff' overlaycolor='#d61156' hovertitle='for DigiPress' hovercaption='ショートコード一覧をみる' hovertxtcolor='#fff' hoveroverlaycolor='#9b122e' bgimg='https://drive.google.com/uc?export=view&id=1vN2qQQ1pdqQyDN58wlNnEYmFUj0yP0Li' url='https://demo.dptheme.net/dp18/archives/1648'] [spanelitem title='メディアスライダー' titlesize='25px' titlebold='' titleitalic='1' caption='自動再生する動画と画像のスライダー' captionsize='13px' txtcolor='#fff' overlaycolor='#9b9412' hovertitle='エフェクトは10種類' hovercaption='YouTube, Vimeo, MP4対応' hovertxtcolor='#fff' hoveroverlaycolor='#4f4b04' bgimg='https://drive.google.com/uc?export=view&id=1b4szhNJNJMzMwK5ZwkeWasQn1M2HOksf' url='https://demo.dptheme.net/dp18/archives/4121'] [spanelitem title='豊富なレイアウト' titlesize='25px' titlebold='' titleitalic='1' caption='ハイセンスなアーカイブデザイン' captionsize='13px' txtcolor='#fff' overlaycolor='#0c9eb5' hovertitle='+ widget' hovercaption='専用ウィジェットも搭載' hovertxtcolor='#fff' hoveroverlaycolor='#065966' bgimg='https://drive.google.com/uc?export=view&id=1-7NeteUOMtiA7DQtu8msXGyRA6Xf8jN8' url='https://demo.dptheme.net/dp18/archives/3490'] [/spanel]