Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

新しい機(jī)能をWordPressサイトの グーテンベルグ?ブロック一貫性のあるカスタムスタイルを提供するEssential Blocksプラグインはとても便利なツールです。毎回一からカスタマイズすることなく、簡単にグローバルスタイルの設(shè)定を行うことができ、ウェブサイトのデザインをより一貫性のある効率的なものにします。この記事では、Essential Blocksプラグインを使ってグローバルスタイルを設(shè)定し、Gutenbergブロックに適用する方法を紹介します。

畫像[1] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

Essential Blocksプラグインの紹介

Essential Blocks プラグインWPDeveloperによって開発され、Gutenbergエディタ用に設(shè)計(jì)されたEssential Blocksは、ユーザーが様々なレイアウトやデザインを簡単に作成できる豊富なブロック要素セットを提供します。初心者であろうとプロの開発者であろうと、Essential Blocksを使えば簡単に、ウェブサイトのコンテンツをよりリッチで魅力的なものにすることができます。

このプラグインには、インフォボックス、価格表、プログレスバー、イメージギャラリーなど、カスタマイズ可能なブロックエレメントが含まれています。直感的なドラッグ&ドロップ操作で、Essential Blocksはコードを書かずに複雑なページデザインを數(shù)分で完成させることができます。

畫像[2] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

1.エッセンシャルブロックのグローバルスタイル設(shè)定を行います。

グローバルスタイルは、Essential Blocksプラグインで設(shè)定する必要があります。以下の設(shè)定は、あなたのウェブサイト上の複數(shù)のページや投稿に一貫したスタイルを適用するのに役立ち、時間を節(jié)約し、ユーザーエクスペリエンスを向上させます。

ステップ1:白紙のページを開く

WordPressのダッシュボードで、新しい空白のページを作成します。このページでEssential Blocksプラグインのグローバルスタイル設(shè)定を行います。

畫像[3] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

ステップ2:エッセンシャル?ブロックの設(shè)定

  • ページエディターの右上にある エッセンシャル?ブロック アイコン
畫像[4] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法
  • 下にスクロールして ブロック?デフォルト?メニューをクリックし、「グローバルスタイル設(shè)定」オプションを選択します。
畫像[5] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

ステップ3:インフォボックス?ブロックのスタイルを設(shè)定する

  • グローバルスタイル設(shè)定で インフォボックス(infobox)ブロックをクリックします。をクリックしてください。 インフォボックス設(shè)定ウィンドウが表示されます。
畫像[6] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

複數(shù)のスタイルオプションが表示され、必要に応じて調(diào)整できる:

畫像[7] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法
  • クリック可能な設(shè)定インフォボックスをクリック可能なアイテムにするかどうかを選択できます。
  • ボタン設(shè)定ボタンは保持、削除が可能で、同時にボタンのスタイルも調(diào)整できる。
  • コンテンツアライメント: アライメント オプションでは、メッセージ?ボックス內(nèi)のコンテンツの位置を設(shè)定できます。
  • メディア?スタイル適切なインフォボックス?アイコンを選択し、その色をカスタマイズします。
  • タイトル?スタイル: タイトル?スタイル タイトルの色を設(shè)定し、希望のフォントを選択します。
  • 字幕スタイルを通して コンテンツ?スタイル字幕の色とフォントスタイルを設(shè)定できます。
  • ボタンスタイルボタンの文字色を設(shè)定します。
  • 背景設(shè)定インフォボックスの背景色を調(diào)整し、適切な マージン 歌で応える パディング.
畫像[8] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

すべてのカスタマイズが完了したら セーブ(保存)ボタンで現(xiàn)在のスタイル設(shè)定を保存します。

2.Gutenbergエディタでカスタムブロックを使う

一度設(shè)定すると、カスタムスタイルはすべてのエッセンシャルブロックに適用されます。次に、このカスタムスタイルをGutenbergページエディタに適用する方法を紹介します。

ステップ1:Gutenbergエディタにインフォボックス?ブロックを追加する

  • Gutenbergエディターを開き、インフォボックスを挿入したい場所をクリックします。 + ボタン。
畫像[9] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法
  • 検索ボックスに入力 インフォボックスのカスタマイズされたスタイルを選択する。 インフォボックス?ブロック.
畫像[10] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法
  • カスタマイズされたインフォボックス?ブロックはすぐにページに挿入され、設(shè)定されたスタイルで表示されます。
畫像[11] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

ステップ2:さらなるカスタマイズと保存

ブロックをさらにカスタマイズしたい場合は、Gutenbergエディタのサイドバーから行うことができます。必要に応じてテキスト、色、その他のスタイルを変更してください。

畫像[12] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

すべての変更が完了したら セーブ(保存)ボタンをクリックして、すべての設(shè)定が保存?適用されたことを確認(rèn)します。

畫像 [13] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

3.グローバル?スタイルの利點(diǎn)

エッセンシャルブロックで設(shè)定したグローバルスタイルは、サイト全體の一貫性を保つのに役立つだけでなく、編集のたびにスタイルをリセットする手間を省くこともできます。カスタムEssential Blocksブロックをページや投稿に挿入するたびに、設(shè)定したグローバルスタイルが自動的に適用され、一貫したデザインを維持することができます。

結(jié)語

この記事のチュートリアルで、Essential Blocksプラグインを使ってグローバルスタイルを設(shè)定?適用する方法を?qū)Wびました。Gutenbergブロックのカスタマイズであれ、ページ間でのスタイルの再利用であれ、WordPressウェブサイトの見た目を管理し最適化するのは簡単です。これらのヒントが、ウェブサイトのデザイン効率を向上させ、すべてのページで一貫性のあるスタイリングを?qū)g現(xiàn)するのに役立つことを願っています。

WordPressに関連するチュートリアルや情報については、以下を參照してください。光子ゆらぎネットワーク最も充実したWordPressチュートリアルと、最もアクティブなWordPress Exchange コミュニティ.


お問い合わせ
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業(yè)サイトのための無料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨詢:1025174874
Eメール:info@361sale.com
勤務(wù)時間: 月~金、9:30~18:30、祝日休み
? 複製に関する聲明
この記事はEarly Seasonが執(zhí)筆しました。
終わり
好きなら応援してください。
クドス12 分かち合う
解説 ソファ購入

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

    コメントなし