WordPressの投稿に複数列のコンテンツを追加しますか?

列を使用して作成できます 出版物やページの魅力的なレイアウト.

新聞や雑誌などの従来の印刷媒体は、印刷の初期から複数列のレイアウトを使用してきました。 彼らの目的は utilisateurs 使用可能なスペースを経済的に使用しながら、小さいテキストを読みやすくします。

WordPressでウェブサイトやブログをまだ作成していない場合は、次の7つのステップでWordPressブログをインストールする方法を参照することをお勧めします。 あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法

単一列のレイアウトは、Webでより一般的に使用されます。 しかし グリッド 複数の列がある場合でも、コンテンツを強調表示し、読み取りと分析を容易にするのに役立ちます。

このチュートリアルでは、HTMLコードを記述せずに、複数列のコンテンツをWordPressの投稿に簡単に追加する方法を示します。

複数のワードプレス列にコンテンツを追加するe1565264744355

WordPressに複数列のコンテンツを追加する-簡単なソリューション

WordPressではグリッドコンテンツとも呼ばれる複数列のコンテンツの作成は、デフォルトの機能であるため、簡単になりました。 ザ・ 新しいWordPress Gutenbergブロックエディター 列のブロックを提案します。

複数列のレイアウトを追加するには、新しい投稿を作成するか、投稿を編集する必要があります。 編集エリアに入ったら、「 アドオン 上部にブロックを追加します。

次に、ブロックを選択する必要があります コラム 「レイアウト要素」タブの下にあります。

ワードプレスの列を追加する

左の列にマウスポインターがジャンプし、右の列にテキストのプレースホルダーが表示されます。

ワードプレスグテンベグの列

上のスクリーンショットでわかるように、ブロック コラム 最初は空の領域のように見えます。 マウスを左にホバーすると、強調表示されたブロックの境界線が表示されます。

画面の右の列にブロックパラメータを表示することもできます。

グーテンベルクカラムの例デフォルトでは、列ブロックはXNUMXつの列を追加します。 右側のブロック設定から、追加する列の数を増やすことができます。 これにより、XNUMXつの行に最大XNUMXつの列を追加できます。

グーテンベルクのワードプレスの列を編集する列をクリックして入力を開始するだけで、コンテンツを追加できます。 キーボードのTabキーを使用して、次の列に移動できます。

次のワードプレス列に移動マルチメディアおよびその他のコンテンツを列に追加する

テキストコンテンツに加えて、WordPress列に画像を追加したりビデオを埋め込んだりすることもできます。

列ブロックを使用すると、各列内にブロックを追加できます。 列の上にマウスを置くだけで、「新しいブロックを追加内側。 ブロックの名前を入力してブロックを追加することもできます。

列に画像を追加する

選択したブロックが列に表示されます。 そこに行ってコンテンツを追加できます。

メディアをアップロード-アップロード-するには、上の記事をご覧ください あなたの一括メディアをWordPressにアップロードする方法

グーテンベルク列画像ブロック

これは、新しい列が ワードプレスのテーマ デフォルトは XNUMX です。 この例では、XNUMX つの列を使用しており、最後の列には画像が含まれています。

画像はグーテンベルク列を追加

側面に画像とテキストのみを追加する場合は、ブロックを使用することもできます メディアとテキスト 列の代わりに。 このブロックは、テキストの横に画像やビデオなどのメディアを表示するように特別に設計されています。

ワードプレスブロックテキストメディア

のクラシックエディタにいくつかの列を追加 WordPress

WordPressをGutenbergにアップグレードしておらず、まだ使用している場合クラシックエディターグリッドレイアウトを作成するには、別のプラグインをインストールする必要があります 列の.

プラグインをインストールしてアクティブ化することから始めます 軽量グリッドコラム

詳細な手順については、ステップバイステップガイドに従ってください。 WordPressにプラグインをインストールする.

アクティブ化すると、新しいメッセージを作成したり、古いメッセージを開いて編集したりできます。 次に、「 列を追加する ビジュアルエディタのツールバー。

列を追加WordPressクラシックエディターこれで、最初の列を追加できるポップアップウィンドウが表示されます。 デスクトップ、タブレット、モバイルデバイスで、列がカバーできる領域をさまざまに選択できます。

発見してさらに進む ワードプレスの全ページの幅を作成する方法

たとえば、50%デスクトップグリッドの割合を設定すると、列は行の半分をカバーします。

列の割合を定義する

5%から100%まで、5間隔で列の幅を設定する多くのオプションがあります。 ドロップダウンメニューをクリックして、いずれかを選択できます。

列幅オプション

次に、[コンテンツ]領域に列のコンテンツを追加し、[OK]ボタンをクリックしてパブリケーションに挿入する必要があります。

diviカラムの内容

プラグインは、コンテンツとともに必要なショートコードを生成し、それを投稿エディターに追加します。

このチュートリアルで発見する WPスーパーキャッシュプラグインをインストールして構成する方法 ブログのパフォーマンスを改善します。

従来のワードプレスエディターに列を追加

最初の列が追加されたので、このプロセスを繰り返して列を追加できます。 最後の列については、チェックボックスをオンにすることを忘れないでください '行の最後の列'。

従来のワードプレスエディターに別の列を追加する

その後、プレビューを保存してプレビューできるようになります。 Twenty SeventeenテストWebサイトでの表示は次のとおりです。

列にワードプレスのデモを追加

ページや出版物に列を作成するのに役立つWordPressテーマも見つけたい場合は、3 WordPressテーマをご覧ください 保険料 このタスクに最適です。

1。 TheGem

がたくさんあります WordPressテーマ OnePageレイアウトを提供すると主張するかもしれませんが、TheGem WordPressテンプレートが持つ豊富なオプションと機能を提供できるものはありません. 

Thegem多目的ワードプレスのテーマはウェブサイトを作成します

優れた OnePage Web サイトに関連するすべてのデザイン要素がこの中に存在します。 ワードプレスのテーマ : 全画面スライダー (付属の Revolution Slider プラグインを使用して作成できます) ワードプレスのテーマ)、XNUMX つのヘッダー スタイルから選択でき、パッケージに含まれる Visual Composer プラグインを使用して全幅セクションを作成する機能が備わっています。

さらに、フォント、色、アイコンなどのアイテムのカスタマイズオプションが多数あります。 これはまれなことですが、TheGemについて気に入らない詳細もあります。 しかし、基本的には、それが持っている肯定的なポイントの数を考えると、あなたに合ったWordPressテーマです。 OnePage Webサイトの作成を促進する強力な競合他社です。

ダウンロードデモ | ウェブホスティング

2。 ストックホルム

Stockholm は、建設会社、土木工学、または建物の改修の世界に関連する会社の Web サイトを作成するのに役立つように設計された WordPress テーマです。 これ ワードプレステンプレート 品質とディテールにこだわるプロフェッショナル向けです。

ストックホルム・テーマ・ワードプレス・多目的・多用途の作成 - サイト、インターネット

オプションパネルとユーザーフレンドリーなバックエンドが付属しており、コンテンツを簡単に管理できます。 このテンプレートの約20のデモがあり、このWordPressテーマを使用できるさまざまなアクティビティを紹介しています。 また、これらを将来のカスタマイズの基礎として使用して、Webサイトの外観を独自のものにすることもできます。

非常に応答性が高く、あらゆるタイプの画面に完全に表示されます。 このテンプレートのカスタマイズまたはインストール中に問題が発生した場合、パッケージに含まれている完全なドキュメントをガイドとして使用できます。 それでもできない場合は、このテーマに特化したサポートWordPressを自由に使用できます。

ダウンロードデモ | ウェブホスティング

3。 ジュピター

木星は、もう1つの非常に人気のあるWordPressテーマです。 代理店、クリエイティブ、教育、食品、健康、eコマースなどのカテゴリの25をカバーする6デモがあり、今後のアップデートでさらに追加されます。 そのレイアウトのほとんどは、快適なタイポグラフィを備えたミニマルなデザインです。

木星 - テーマ - ワードプレス・多目的・多用途の作成 - サイト、インターネット

Jupiterの主なセールスポイントの1つは、Webサイトのヘッダーデザインをすばやく簡単にカスタマイズできるCreative Header Customizerです。 Visual Composer、3スライダー(レイヤー、レボリューション、およびiCarousel)、10の新しいショートコード、1800を超えるアイコン、および10のカスタム投稿タイプがすべて配信に含まれています。

ページの読み込み時間も優れています。 これは素晴らしい製品であり、これほど多くを見つけるのは難しいでしょう。 WordPressテーマ その特徴を持っています。

ダウンロードデモ | ウェブホスティング

その他の推奨リソース

ブログやウェブサイトの最適化をさらに進めるために、グーテンベルクの世界に没頭するリンクを参照することをお勧めします。

まとめ

ここに ! このチュートリアルは以上です。 この記事が、WordPressの投稿やページに列を追加する方法を学ぶのに役立つことを願っています。 お気軽に このチュートリアルをソーシャルネットワークで友達と共有する.

提案やコメントがあれば歓迎します。 しかし、あなたが初心者であれば、私たちに相談することを勧めます ressources.

...