フォローする

【テクニック】商品画像のホバー表示

今回は、商品の情報をホバーで表示させる方法をご紹介致します。

具体例として、商品にマウスオンすると、以下のように表示されるように設定する方法を

ご紹介していきます。(デザイン上のアクセントになりますね。)

 

<設定方法>

1.商品[詳細]を選択

デザインパネル内「デザインタブ」を選択した状態で、

商品情報が記載されている箇所をクリックし、商品[詳細]が選択された状態にします。

 

2.デザインタブ内、「位置」項目の設定

1の状態で、デザインタブ内「位置」項目で以下の設定を行なってください。

 

「位置」                相対的

「上からの配置」  ⇒  0px(※半角英数字)

「右からの配置」  ⇒  0px(※半角英数字)

「下からの配置」  ⇒  0px(※半角英数字)

「左からの配置」  ⇒  0px(※半角英数字)

 

すると商品情報が商品画像の左上に配置されます。

 

3.余白、不透明度の設定

次に、デザインタグ内「間隔」の項目の中の「余白」より

上を120px

下を120px

に設定します。(これで商品詳細の文字が商品画像の中央に表示されています)

 

さらにその下の「エフェクト」項目の中の「不透明度」を0に変更します。

上記より、商品情報が商品画像の真ん中に移動し、

通常時に見えない状態となります。

 

 

4.デザインタグ内「マウスオーバー動作」の変更

デザインタグ内の「アクション」項目をデフォルトからマウスオーバー動作に変更します。

その状態で、「背景」項目内の背景色を「白」に変更し、「エフェクト」項目内の不透明度を

0.8」に変更します。

 

5.商品情報のホバー表示

以上の設定をすると、商品画像の上にカーソルを合わせた時に、

商品の情報がホバーで表示されるようになります。

 このようにネットショップのデザイン設定が簡単に行えます。

ちょっとした手を加えるだけで、競合サイトと差別化したオンラインショップになります。

ネットショップデザインのアクセントとしてご活用ください。

 

 

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

コメント

Powered by Zendesk