コード不要の実装:Blocksyテーマで美しい商品ショーケースページを公開する

を使用している場合は ワードプレス ウェブサイトを構築していて、見栄えがよく機能的な商品紹介ページを作りたいが、コードが書けない。ブロックシー テーマは、まさにそのためのツールです。この記事では、商品ショーケースのページをすばやく完成させるために、Blocksy テーマをステップバイステップでご紹介します。

图片[1]-零代码打造产品展示页:Blocksy 使用指南

なぜブロックジーなのか?

图片[2]-零代码打造产品展示页:Blocksy 使用指南

Blocksyは無料で軽量、カスタマイズ可能なWordPressテーマです。それは グーテンベルク エディターやElementorのようなページビルダーとうまく連携できる。Blocksyを使えば、これが可能になります:

  • ページ構成とレイアウトのカスタマイズ
图片[3]-零代码打造产品展示页:Blocksy 使用指南
  • フルワイドまたはカセットインナーパッケージのセットアップ
图片[4]-零代码打造产品展示页:Blocksy 使用指南
  • 商品画像、プロフィール、価格などのモジュールを追加します。
图片[5]-零代码打造产品展示页:Blocksy 使用指南
  • カードスタイルで複数の商品情報を表示

II.準備作業

作業を始める前に、以下の作業を完了してください:

1.Blocksyテーマをインストールして有効にする
バックステージ → 外観 → テーマ → テーマの追加 → 「Blocksy」を検索し、インストールをクリックして有効にする。

图片[6]-零代码打造产品展示页:Blocksy 使用指南

2.Blocksy Companion プラグインをインストールする
インストール後、Blocksy Companionプラグインを有効化するよう促されますので、クリックして確認します。このプラグインは追加のモジュールとページテンプレートを提供します。

图片[7]-零代码打造产品展示页:Blocksy 使用指南

3.製品素材の準備
事前に製品写真タイトル、価格、特徴などを素早く編集できる。

第三に、新しい商品表示ページである。

  • 新規ページ作成
    バックエンド → ページ → 新規作成 → 「商品ショーケース」など、ページ名を入力してください。
图片[8]-零代码打造产品展示页:Blocksy 使用指南
  • セットアップページテンプレート全幅レイアウト
    ページの右側にある設定欄で、テンプレートを「Blocksy - Full Width Page」として選択します。
图片[9]-零代码打造产品展示页:Blocksy 使用指南
  • 表示コンテンツの追加

Gutenbergエディタを推奨:

  • カラム」モジュールの挿入(例:2カラム、3カラム構造
图片[10]-零代码打造产品展示页:Blocksy 使用指南
  • 各欄に画像、タイトル、紹介文、「今すぐ購入」などのボタンを追加する。

また、「Media & Text」モジュールを使用して、グラフィックとテキストを明確に並べて表示することも可能です。

图片[11]-零代码打造产品展示页:Blocksy 使用指南

あるいは、ブロックジーの スターターサイト テンプレート機能:

  • ブロックシーへ → スターターサイト
图片[12]-零代码打造产品展示页:Blocksy 使用指南
  • 商品ショーケース(例:「ショップ」や「ビジネス」)のあるデモサイトテンプレートを選択してください。
  • ワンクリックでインポートし、コンテンツの内容を直接修正できる
图片[13]-零代码打造产品展示页:Blocksy 使用指南

IV.スタイルの詳細を調整する

  • 配色とフォントの変更
    外観 → カスタマイズ → 色とフォント で、背景色、ボタンの色、テキストのスタイルなどを設定できます。
图片[14]-零代码打造产品展示页:Blocksy 使用指南
  • 画像の角丸とシャドウ効果を有効にする
    ブロックのスタイル設定では、角を丸くしたり、画像にカードシャドウをつけたりして、より美しいページにすることができます。
图片[15]-零代码打造产品展示页:Blocksy 使用指南
  • 様々なデバイスへのページの適応
    ブロックジーはレスポンシブレイアウト機能、余分な設定なし、ページは携帯電話やタブレット、その他の端末に適応可能。

V. ページの公開とメニューの管理

デザインが完成したら、ページの右上にある「公開」ボタンをクリックします。その後、外観 → メニューを開き、メインサイトにページを追加します。ナビゲーションメニュー訪問者が製品情報を閲覧しやすい。

图片[16]-零代码打造产品展示页:Blocksy 使用指南

まとめ

ブロックシー このテーマを使えば、すべてのWordPressユーザーが商品ショーケースのページを簡単に作成することができます。テンプレートの選択から、コンテンツの追加、スタイルの調整まで、開発スキルを必要とせず、簡単な操作だけで完成させることができます。一つの商品を表示する場合でも、複数の商品情報を表示する場合でも、プロレベルの視覚効果を得ることができます。

今すぐバックエンドを開き、Blocksyを使って独自の商品ショーケースページを作成しましょう。


お問い合わせ
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
客服微信
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨询:1025174874
Eメール:[email protected]
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
この記事はlmxによって書かれた
終わり
好きなら応援してください。
クドス153 分かち合う
linmeixuan的头像-光子波动网 | WordPress教程、Elementor教程与故障修复
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし