Diviで子供向け商品の楽しい商品ページテンプレートを作成する方法
公開: 2020-01-06子供向け商品のウェブサイトには独特のスタイルがあります。 彼らは楽しく、カラフルで、笑顔を刺激する傾向があります。 子供向け製品のWooCommerceストアは、Diviテーマビルダーとカスタマイズ可能なwooモジュールを使用して簡単に作成できるようになりました。 ユニークで楽しいデザインでもう少し特別なものにしてみませんか？ この投稿では、すべての商品に適用されるテーマビルダーで子供向けの商品ページテンプレートを作成する方法を紹介します。 背景が透明な商品画像で最適に機能します。 JSONファイルも無料でダウンロードできます！
始めましょう。
プレビュー
デザインの再作成を開始する前に、さまざまな画面サイズでの結果を見てみましょう。
デスクトップ
モバイル
楽しいキッズ製品テンプレートを無料でダウンロード
無料の楽しいキッズ製品テンプレートを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
1.キッズ製品テンプレートのデザイン準備
製品写真から背景を削除する
子供向けの製品デザインを始める前に最初に行うことは、画像を準備することです。 商品画像から背景を削除します。 これは、Adobe Photoshop、Adobe Illustrator、またはremove.bgを使用して実現できます。 製品の周囲にスペースを残して、デザインにうまく収まるようにします。 最終的な画像の最適なサイズは600X400ピクセルです。
背景デザインを作成する
2番目のステップは、画像の背後に配置する背景デザインを作成することです。 形状が重なっているこのデザインは、AdobeIllustrator内で簡単に作成できます。 または、この背景画像は上のダウンロード可能なフォルダにあります。 背景を作成する場合に従う手順は次のとおりです。
- シェイプを作成（またはソース）します。
- 形にあなたが望む色を与えてください。
- 形状を複製します。
- オリジナルと同じ色調で着色してください。
- 2番目の形状を回転させて、素敵な構図を作成します。
- 両方の形状に透明度を追加します。
- 最終的なデザインの背景と同じ色の背景を追加します。
- 約1750X1650ピクセルでJPGとして保存します。
2.新しいWoocommerce製品を作成/追加します
製品データ
商品の画像と背景のデザインの準備ができたら、子供向けの商品を作成します。 私たちとまったく同じデザインを作成するには、次の情報を挿入します。
- タイトル：ウッドレターブロック
- 長い説明：これらの天然木のブロックは、子供たちが楽しく創造的な方法で文字や数字を学ぶのに最適です。 小指のために境界線は丸みを帯びており、塗料は無毒です。
- 旧セール価格：12,99
- 新規販売価格：7,99
- 注目の画像：木製のブロックの画像を切り取ります。 推奨サイズ：600 x 400 px
- 属性：以下を参照してください
[属性]タブで、追加情報モジュールの値を入力します。
- 素材：天然松材
- ペイント：無毒の白いペイント
- 塗装色：白、青、緑、フクシア
3.テーマビルダーで新しいテンプレートを作成します
Diviテーマビルダーを開き、新しいテンプレートを追加します
それでは、Diviテーマビルダーに進みましょう。 そこでデザインを構築します。 新しいテンプレートを追加します。
すべての製品のカスタムボディの構築を開始
このテンプレートをすべての製品で使用して、ボディの構築を開始します。
テーマビルダープロのヒント：
テーマビルダー内で製品デザインを作成するときは、常に別のウィンドウで製品ページを開いたままにして、変更を確認してください。
4.キッズ製品のデザインを再現する
新しいセクションを追加
バックグラウンド
ボディテンプレートビルダー内に、セクションがあります。 そのセクションを開き、背景色を変更します。
- 背景色：パレストピンク＃f9f2f2
新しい行を追加
カラム構造
次に、2列の新しい行を追加します。
サイジング
次に、行のサイズを調整します。
- カスタムガター幅：2
- 幅：90％
- 最大幅：90％
列1の設定
バックグラウンド
列1の設定で、図形を重ねて作成した背景画像のデザインを追加します。
- 背景：画像
間隔
次に、それに応じて間隔を調整します。
- 上下のパディング：5vw
- 左右のパディング
- タブレット：2vw
- 電話番号：0vw
列2の設定
間隔
列2に移動し、次のように間隔の値を調整します。
- トップパディング：1vw
- ボトムパディング：
- タブレット+電話：1vw
- 左右のパディング：
- デスクトップ：2vw
- タブレットと電話：7vw
Wooイメージモジュールを列1に追加
コンテンツ
次に、モジュールを追加します。 まず、列1に、ウーイメージモジュールを追加し、コンテンツの下でこの製品を選択します。
- 製品：この製品
要素
次に、デザインに表示される要素を選択します。
- 注目の画像：はい
- ギャラリー：いいえ
- セールスバッジ：はい
セールバッジテキスト
[デザイン]タブで、セールバッジの値を次のように調整します。
- バッジの色：透明
- フォント：Nunito
- フォントの太さ：太字
- テキストの色：ピンク＃f24881
- 文字サイズ：
- デスクトップ：5vw
- タブレット：12vw
- 電話：10vw
サイジング
次に、間隔を調整して、物事がより良くフィットするようにします。
- トップパディング：
- デスクトップとタブレット：1vw
- 電話：2vw
- ボトムパディング：0vw
- 左右のパディング：0vw
Wooタイトルモジュールを列2に追加
コンテンツ
2番目の列で、wooタイトルモジュールを追加し、コンテンツタブでこの製品を選択します。
- 製品：この製品
バックグラウンド
モジュールの背景を白にします。
- 背景色：白#ffffff
タイトルテキスト
次に、タイトルテキストをH1レベルでスタイル設定します。
- 見出しレベル：H1
- フォント：Nunito
- フォントの太さ：超太字
- テキストの配置：中央
- テキストの色：緑がかったダークグレー＃314942
- 文字サイズ：
- デスクトップ：2.6vw
- タブレットと電話：6.4vw
間隔
モジュールの間隔を調整して続行します。
- 上部と下部のパディング：
- デスクトップ：1.5vw
- タブレットと電話：2.5vw
- 左右のパディング：2vw
国境
最後に、デスクトップサイズとレスポンシブサイズの両方の境界線を調整します。
- 丸い角：
- デスクトップ：1vw四隅すべて
- タブレットと電話：3vw四隅すべて
Woo説明モジュールを列2に追加
コンテンツ
製品タイトルの下に、woodescriptionモジュールを追加します。 [コンテンツ]タブで説明の種類とこの製品を選択します。
- 製品：この製品
- 説明タイプ：説明
バックグラウンド
次に、モジュールに背景色を付けます。
- 背景色：白#ffffff
文章
[デザイン]タブに移動して、テキストのスタイルを設定します。
- フォント：Nunito
- 色：緑がかったダークグレー＃314942
- サイズ：
- デスクトップ：1vw
- タブレット：2.5vw
- 電話：3vw
間隔
次に、モジュールの間隔を調整します。
- トップマージン：
- デスクトップとタブレット：-0.5vw
- 電話番号：-3vw
- 上部と下部のパディング：
- デスクトップ：1.5vw
- タブレットと電話：4vw
- 左右のパディング：
- デスクトップ：2vw
- タブレットと電話：6vw
国境
最後に、丸みを帯びた角を追加します。
- 丸い角：
- デスクトップ：1vw四隅すべて
- タブレットと電話：3vw四隅すべて
Woo追加情報モジュールを列2に追加
コンテンツ
説明モジュールの下に、woo追加情報モジュールを追加します。 コンテンツタブでこの製品を選択します。
- 製品：この製品
バックグラウンド
次に、白い背景を追加します。
- 背景色：白#ffffff
文章
[デザイン]タブで、さまざまなテキストタイプのスタイル設定を開始します。 まず、属性の値に適用されるテキスト。
- フォント：Nunito
- スタイル：斜体
- 色：緑がかったダークグレー＃314942
- サイズ：
- デスクトップ：0.8vw
- タブレット：1.5vw
- 電話：2vw
タイトルテキスト
次に、タイトルテキストのスタイルを設定します。
- フォント：Nunito
- 重量：超太字
- カラー：ピンク＃f24881
- サイズ：
- デスクトップ：1.7vw
- タブレット：3vw
- 電話：3.5vw
- 線の高さ：1em
属性テキスト
3番目に、属性テキストのスタイルを設定します。
- フォント：Nunito
- 重量：太字
- 色：緑がかったダークグレー＃314942
- サイズ：
- デスクトップ：0.9vw
- タブレット：2vw
- 電話：3vw
間隔
次に、次のように間隔を調整します。
- トップマージン：
- デスクトップとタブレット：-0.5vw
- 電話番号：-3vw
- トップパディング：
- デスクトップ：1.5vw
- タブレット：3vw
- 電話：5vw
- 左パディング：1vw
- 右パディング：
- デスクトップ：2vw
- タブレットと電話：5vw
国境
最後に、丸みを帯びた角を追加します。
- 丸い角：
- デスクトップ：1vw四隅すべて
- タブレットと電話：3vw四隅すべて
ウー価格モジュールを列2に追加
コンテンツ
ウー価格モジュールを追加し、コンテンツタブでこの製品を選択します。
- 製品：この製品
バックグラウンド
また、モジュールにピンクの背景を追加して、モジュールを目立たせます。
- 背景色：ピンク＃f24881
セール旧価格テキスト
[デザイン]タブに移動して、セールの古い価格のスタイルを設定します。
*新旧のセール価格を商品に追加すると、ウー価格モジュールはテーマビルダーに両方を表示しません。 実際の製品ページで、最終的なデザインがどのように見えるかを確認してください。
- フォント：Nunito
- 色：白#ffffff
- サイズ：
- デスクトップ：1.5vw
- タブレット：2.5vw
- 電話番号：3vvw
セール新価格テキスト
新しい価格をスタイリングして続行します。
- フォント：Nunito
- 重量：太字
- 色：白#ffffff
- サイズ：
- デスクトップ：2vw
- タブレット：2vw
- 電話：4vw
- 文字間隔：1px
間隔
次に、モジュールの間隔を調整します。
- トップマージン：
- デスクトップとタブレット：-0.5vw
- 電話番号：-3vw
- 上部と下部のパディング：
- デスクトップ：1.5vw
- タブレットと電話：
- 左右のパディング：
- デスクトップ：2vw
- タブレットと電話：5vw
国境
最後に、丸みを帯びた角を追加します。
- 丸い角：
- デスクトップ：1vw四隅すべて
- タブレットと電話：3vw四隅すべて
最終設計
これは、実際の製品でのデザインとテーマビルダーでのデザインの違いです。
Woo Add to CartModuleを列2に追加
コンテンツ
価格モジュールの下に、カートモジュールに追加するウーを配置します。 コンテンツタブでこの製品を選択します。
* woo add to cartモジュールを追加すると、上部にカラーオプションのドロップダウンメニューがあることに気付くでしょう。 製品ページでこれを指定しなかった場合、最終的なデザインには表示されません。 テーマビルダー内でビルドしているときに、ライブ製品をチェックすることで確認できます。
- 製品：この製品
要素
次に、モジュールに表示される要素を選択します。
- 数量フィールド：オフ
- 在庫：オフ
バックグラウンド
次に、白い背景色を追加します。
- 背景色：白#ffffff
ボタン
次に、ボタンのスタイルを設定します。 次のように値を追加します。
- 文字サイズ：
- デスクトップ：2vw
- タブレット：3vw
- 電話：5vw
- テキストの色：ピンク＃f24881
- 背景色：白#ffffff
- 文字間隔：1px
- フォント：Nunito
- 重量：重い
- 上マージンと下マージン：-0.3vw
間隔
次に、モジュールの間隔を調整します。
- トップマージン：
- デスクトップとタブレット：-0.5vw
- タブレット：-3vw
- 上下のパディング：0vw
- 左右のマージン：0vw
国境
最後に、丸い境界線を追加します。
- 丸い角：
- デスクトップ：1vw四隅すべて
- タブレットと電話：3vw四隅すべて
プレビュー
さまざまな画面サイズで完成したデザインを最終的に見てみましょう。 キッズ商品のデザインテンプレートが、ストア内のすべての商品に適用されます。 必ず戻って画像サイズをチェックし、すべてがうまく収まっていることを確認してください。
デスクトップ
モバイル
キッズ商品ページのまとめです！
この投稿では、子供向けの商品ページのデザインを再現する方法を紹介しました。 ソフトなエッジ、楽しい背景デザイン、そして幸せな色を備えたこのデザインは、すべての製品を魅力的ですぐに購入できるように見せます。 このデザインが気に入って、Diviの作品にインスピレーションを与えるために使用していただければ幸いです。 コメントにあなたの考えを残してください！