トータルテーマでグーテンベルクにヒーローウェブサイトセクションを作成する方法

公開: 2020-07-24

Total WordPressテーマには、ビジネスWebサイトで必要になる可能性のあるさまざまなツールが付属しています。

このテーマでは、WordPressカスタマイザーによるビジュアル編集と、デモデータのクイックインポートが提供されます。これは、優れたフロントページを作成するのに特に役立ちます。

ご覧のとおり、Totalの無料バージョンは、追加のWordPressページビルダーであなたを閉じ込めることはありませんが、WebサイトをデザインするためのWordPressネイティブの方法を提供します。

ブロックベースのWordPressエディターであるGutenbergの登場により、Totalを含むすべてのWordPressテーマをさらにカスタマイズできるようになりました。コンテンツ要素（ブロック）の選択により、WordPressコアではこれまでにないカスタマイズの自由が得られ、それを否定することはできません。

ただし、一部のブロックスタイル設定は、デフォルトのエディターではまだ非常に制限されています。したがって、新しいGutenbergエディターを使用していて、Totalがより優れたコンテンツの構築と設計を検討している場合は、このチュートリアルで役立つヒントをいくつか見つけることができます。

より正確に言うと、この投稿では、グーテンベルクでヒーロー、サブヒーロー、召喚状のセクションなどの重要なWebサイト要素を構築およびカスタマイズする方法の例をいくつか示します。通常ビジネスを支援するもの：

イントロ/ウェルカムウェブサイトセクションを作成する
主要な製品やイベントを宣伝する
特定のポートフォリオアイテムやサービスなどに焦点を当てます。

グーテンベルクのカスタマイズの可能性を高めるために、Totalテーマユーザー向けに推奨するGetwidWordPressBlocksプラグインを使用します。 Totalユーザーの中にはすでにGetwidを試してみた人もいると思います。

しかし、Getwidとは何か疑問に思っている方のために、以下に簡単な説明を示します。

一言で言えば、これは無料のグーテンベルクネイティブアドオンであり、これまでのところプレミアムのようなブロックの最大のライブラリと、グーテンベルクに合わせたピックアンドペーストのデザインのコレクションが付属しています。それが私たちがそれをお勧めする唯一の理由ではありません。

このプラグインは、デフォルトのTotalスタイリングとうまく調和し、不要なブロックをオフにすることができ、本当に機能が豊富であるため、特にこのプラグインに関心があります。

Totalをアクティブにすると、プラグインが推奨プラグインとしてポップアップ表示されます。これは、お客様に適しているかどうかを確認するための一時的なソリューションです。

しかし、まあ、それがあなたの解決策であるかどうかを確認するために自分で試してみる必要があります。その間に、私たちが何とか作成した例を見てみましょう。

Getwidを使用して作成されたヒーローと召喚状のセクションの例

Totalテーマの無料バージョンでこれらのテスト実行を実行しましたが、ほとんど制限はなかったと言っても過言ではありません。

ただし、Webサイトのコンテナの合計幅のオプションには制限があるため、フルスクリーンの没入型レイアウトを探している場合は、TotalPlusについて検討することをお勧めします。

まず第一に、ほとんどの場合、GetwidWordPressブロックによるSectionブロックを使用する必要があります。これは、他の任意の数のブロックを処理できるコンテナーです。したがって、ヒーローセクションにはあらゆる種類のコンテンツを表示できます。

セクションコンテナのもう1つの顕著な点は、画像、色、ビデオ（WPメディアライブラリまたはYouTubeから）、マルチカラーグラデーションなど、多くの背景タイプを提供することです。

したがって、Sectionブロックを使用してWebサイト領域を設計するときの主なタスクは、次のとおりです。

背景の種類を選択してカスタマイズし、その上のコンテンツが読みやすく明確になるようにします。
必要なブロックを優先順に挿入します。
間隔を調整します（ビジュアルビルダーのように、内側と外側のスペースを設定するためのドラッグ可能な角度があります）。
オプション：アニメーション、シェイプディバイダー、その他の装飾要素を追加します。

例を見てみましょう。

例1.製品のショーケース

この例のすべてのブロックは、Sectionブロック内に配置されています。

高度な見出し
高度な見出し
高度な見出し
ボタングループ
セクションの背景：画像（[位置]>[右上];[サイズ]>[自動]）

見出しブロックを使用すると、任意のGoogleフォント、テキストサイズ、フォントの太さなどを使用できます。ボタンにはいくつかのスタイル（塗りつぶしまたはアウトライン）もあります。

発生する可能性のある最大の課題は、ビューポートに基づいて自動的にサイズ変更されるため、適切な背景画像を見つけて適切な画像位置を選択することです。

例2.ポートフォリオの抽出

すべてのブロックはSectionブロック内に配置されます。

高度な見出し
高度な見出し
3列（段落、画像、画像、画像）
セクションの背景：グラデーション

また、行動を促すフレーズのボタンを配置して、ポートフォリオ全体のページにリンクすることもできます。

例3.機能またはイベントカード

このようなヒーローセクションでは、製品、イベント、サービス、物、人などを紹介できます。

Advanced Headingブロックでは、任意のフォントを選択できます。

この例では、グラデーションの背景と背景の下部の形状の仕切り（Waves Multilayered）を使用しました。

2つの高度な見出し
段落
ボタン
画像
セクションの背景：グラデーション+形状の仕切り

例4.召喚セクション

ここでも、Sectionブロックから始める必要があります。以下の例のように見出しを配置するには、Getwidテンプレートライブラリのテンプレートを使用するか、最初からパターンを作成します。

これは、背景画像、いくつかの見出し、およびボタンが一元化された非常に簡単なセクションです。

3つの高度な見出しブロック
ボタンブロック
セクションの背景：不透明な画像（サイズ>カバー）

また、ドラッグ可能な角度でコンテンツの配置を簡単に調整できることもお楽しみいただけます。

画像の上に見出しを配置してオフセットレイアウトを作成することもトレンドです。

Getwidでは、テキスト行に空白を入れて適切な背景画像を設定することで、これを実現できます。

例5.サブヒーローセクション

多くの場合、サブヒーローのセクションでは、プロジェクトや人物に関する詳細情報が提供されます。それはあなたのバイオ、ストーリー、または主要な目的を特集するのに適しています。

視覚的な要素として、いくつかのスタイルが付属しているGetwidのImageStackGalleryブロックを使用しました。ただし、画像、ビデオ、またはその他のコンテンツ要素に置き換えることはできます。

2つの高度な見出し
段落
ボタン
画像スタックギャラリーブロック
セクションの背景：単色

例6.視覚的なアクセント

画像ギャラリー、スライダー、およびビデオは、注目を集めるセクションを作成するための非常に一般的なビジュアルツールです。

たとえば、GetwidのMedia＆Text Sliderブロックを使用して、オプションのテキストコンテンツを含むスライドショーを作成できます。

メディア＆テキストスライダー
セクションの背景：グラデーション+カスタムの高さの上部と下部の仕切り

スライダーに表示できるポストベースのGetwidブロックも多数あります（これらはWebサイトのコンテンツから自動的に取得されます）。最新の投稿または手動で選択した投稿をスライダーまたはグリッド/リスト形式で表示したいですか？そのためのブロックがあります。

例7.バナー

Getwidには、画像とテキストのデフォルトコンテナを提供する便利なバナーブロックが付属しています。また、アニメーション効果の選択肢があり、バナーのあるセクションをより動的にすることができます。

このブロックは、一時的な販売と絶え間ないハイライトの両方に最適です。

バナー
セクションの背景：モノクログラジエント

例8.有益なセクション

構造化されたコンパクトな方法でより多くの情報を表示したい場合、Getwidは、この目的のために、タブ、アコーディオン、およびトグルの3つの専用ブロックを提供します。

これは、アコーディオンブロックとその横にある画像を含む2列のレイアウトです。

これらのブロックのユニークな機能は、タブ付きウィジェット内に任意のブロックを含めることができることです。つまり、テキストに加えて、画像、リスト、ビデオ、ギャラリー、スライダーをタブに追加できます。

マーケティングセクションに独自の機能を追加できるブロックは他にもたくさんあります。たとえば、有益な画像セクションを構築するための画像ホットスポット、サービス用のアイコンボックス、リアルタイムのInstagramギャラリーフィードなどです。

空白のグーテンベルクページから同様のセクションを作成および設計し、[合計ページ設定]で必要なページレイアウトを選択できます。

まとめる

無料のトータルテーマでグーテンベルクとゲトウィドのコンボを使用することの一番いいところを知っていますか？いいえ、重要なのはブロックの数だけではありません。

さらに重要なのは、見栄えの良いコンテンツを作成するためにデザイナーの目（または開発者のスキル）を持っている必要がないことです。あなたを助けるためにそこにある非常に多くの既製のスキン、ブロックパターンとすぐに使えるデザインがあります。 Getwid WordPress Blocksは、無料版のTotalを使用している場合は、ページビルダーの代わりにもなります。

ブロックエディタが十分に成熟しなくなるまで、追加のグーテンベルクネイティブアドオンが出発点として最適です。

グーテンベルクやゲトウィドを試しましたか？コメントで教えてください。