ElementorとWidgetKitを使用してPSDをWordPressに変換する方法

公開: 2019-12-12

PSDからWordPressへの変換ソリューションをお探しですか？準備ができているウェブサイトのPSDをWordPressに変換したいのですが、方法がわかりませんか？さて、私はこの問題であなたを助けることができます。

WordPressが最近最も使用され多用途のCMSプラットフォームの1つであることはすでにご存知でしょう。現在、コーディングなしでPSDからWordPressテーマまで完全に機能するウェブサイトを作成することは、Elementorのようなページビルダーではるかに快適です。

この記事では、 「ElementorとWidgetKitを使用してPSDをWordPressに変換する方法」を段階的に紹介します。

方法を見てみましょう。

PSDデザインの選択

ElementorとWidgetKit1を使用してPSDをWordPressに変換する方法

PSDをWordPressテーマに変換する前に、最初に行う必要があるのは、WebサイトのPSDデザインを選択することです。要するに、PSDはPhotoShop Designの略で、ほとんどのWordPressWebサイトデザインで最も人気のあるデザインツールの1つが作成されています。

PSDHUBの豊富なコレクションからお好みのPSDデザインを選択できます。

彼らはあなたのウェブサイトのために個人的および商業的使用の両方でプレミアム品質の無料PSDテンプレートを提供します。選択したPSDデザインは、シンプルで現代的なデザインでなければならないことを忘れないでください。

PSDデザインを選択する際は、次の要素を確認してください。

設計構造：最初に考慮しなければならないのは、設計構造です。デザインには限界がありますが、コーディングには限界があります。
クリーンでエレガントなレイアウト： 3つ目は、お好みのPSDデザインがクリーンでエレガントでなければならないということです。これは、開発者がクリーンでエレガントなレイアウトからピクセルパーフェクトなWebサイトを作成するのに役立ちます。
目的の達成： 2つ目は、デザインが目的を達成するかどうかです。旅行ウェブサイトが必要な場合、PSDデザインは旅行ウェブサイトPSDである必要があります。
複雑さ：最後に、PSDの場合と同様に、設計の選択においても複雑さを無視するようにしてください。

ここでは、PSDHUBのEventia-Conference and EventManagementTemplateを使用します。

WordPressをインストールする

ElementorとWidgetKit2を使用してPSDをWordPressに変換する方法

WordPressはインストールのしやすさでよく知られています。ほとんどの場合、WordPressのインストールは非常に単純なプロセスであり、完了するまでに5分もかかりません。 PSDをWordPressテーマに変換するには、WordPressのインストールを検討する2番目のステップです。

WordPress.orgは、サイトのサポートページで「WordPressのインストール方法」に関する詳細な記事を提供しています。しかし; WordPressのインストールの基本的な手順は次のとおりです。

まず、WordPressパッケージをダウンロードして解凍します。
MySQLだけでなく、Webサーバー上にWordPress用のデータベースを作成します。
WordPressファイルをWebサーバー上の目的の場所にアップロードします。
WordPressをドメインのルートに統合する場合は、解凍したWordPressディレクトリのすべてのコンテンツをWebサーバーのルートディレクトリに移動またはアップロードします。
WordPressをWebサイトの独自のサブディレクトリにインストールする場合は、サーバー上にブログディレクトリを作成し、解凍したWordPressパッケージのコンテンツをFTP経由でディレクトリにアップロードします。
WebブラウザでURLにアクセスして、WordPressインストールスクリプトを実行します。

それでおしまい！これでWordPressがインストールされます。

Elementorをインストールする

ElementorとWidgetKit3を使用してPSDをWordPressに変換する方法

この記事は、Elementorを使用してPSDをWordPressテーマに変換することに関するものです。したがって、PSDファイルをカスタマイズおよび編集するにはElementorが必要です。それでは、Elementorのインストール方法を見てみましょう。

Elementorは、WordPressでピクセルパーフェクトなデザインを作成するための最高の完全なデザインプラットフォームの1つです。拡張可能なユーザーフレンドリーな設計アプローチに最適です。 Elementorのインストールプロセスも簡単な作業です。いくつかの簡単な手順に従うだけで、ElementorページビルダーでPSDをデザインする準備が整います。

Elementorプラグインをインストールするには2つの方法があります。インストールプロセスは以下のとおりです。

Elementorサイト経由

まず、 elementor.comにアクセスして、[ダウンロード]をクリックします。
WordPressダッシュボードで、[プラグイン]>[新規追加]をクリックします。
[プラグインのアップロード]をクリックして、Elementor用にダウンロードしたファイルを選択します。

WordPressダッシュボード経由

ダッシュボードから、[プラグイン]>[新規追加]をクリックします。
「検索」フィールドに「Elementor」と入力し、「 ElementorpageBuilder 」を選択してインストールします。
インストール後、[アクティブ化]をクリックします。

Elementorページビルダーをインストールするために必要なのはこれだけです。以下のビデオに従って、インストールプロセスについて詳しく知ることもできます。

WidgetKitをインストールする

ElementorとWidgetKit4を使用してPSDをWordPressに変換する方法

WidgetKit for Elementor-要素とレイアウトを追加することでWebサイト構築機能を強化する、最も高度で強力なElementorアドオンキット。ここでは、PSDからWordPressへの変換にウィジェットとその要素を使用します。

WordPressとWidgetKitを使用して、PSDからほぼすべての種類のページを作成できます。 Widgetkitのインストールは、PSDからWordPressへのテーマを設計するのと同じくらい簡単です。 WordPressダッシュボードから、いくつかの簡単な手順に従ってWidgetKitを簡単に追加できます。どれどれ、

WordPressダッシュボードからWidgetKitをインストールする

ダッシュボードから、[プラグイン]>[新規追加]をクリックします。
[検索]フィールドにWidgetKitと入力し、 WidgetKitforElementorを選択してインストールします。
インストールが正常に完了したら、[アクティブ化]をクリックします。

これで、WidgetKitをElementorで使用できるようになりました。まだ混乱している場合は、ビデオに従ってください。これは、WidgetKitの使用方法についても役立ちます。

PSDをWordPressに変換する

インストール部分が完了しました。次に、PSDをWordPressElementorとWidgetKitに変換します。現在、PSDからWordPressへの変換とPSDからJoomlaへの変換を提供しているPSDからWordPressへのサービスプロバイダーはたくさんあります。しかし; あなたはあなた自身の好みの方法を設計することができます。ここでは、PSDをWordPressに変換する基本的な方法を示します。

さらに、WordPressのテーマとプラグインディレクトリの豊富なコレクションから、既製のテーマとテンプレートのいずれかを選択することもできます。

PSDからレイアウトを設計するときは、シーケンスに従ってください。これはあなたに大いに役立ちます、

新しいページを作成する

最初に行う必要があるのは、WordPressダッシュボードから新しいページを作成することです。 WordPressダッシュボードの左上から、[ページ]>[新規追加]をクリックします。

ElementorとWidgetKit6を使用してPSDをWordPressに変換する方法

次に、「Elementorで編集」をクリックして、ElementorPageBuilderに入ります。以下に示すようなElementorパネルが表示されます。

ElementorとWidgetKit7を使用してPSDをWordPressに変換する方法

PSDファイルからページを作成する

ページを作成したり、PSDをWordPressテーマに変換したりするには、主に3つの考慮事項があります。セクション、列、およびウィジェット。ここで、セクションは最大の構成要素であり、列をキャプチャします。列内にウィジェットを配置できます。編集オプションをクリックすると、セクション、列、ウィジェットをハンドルで制御できます。

ElementorとWidgetKit8を使用してPSDをWordPressに変換する方法

ヘッダーセクションを追加

ここのヘッダーセクションには、Themexpertによる既存のテーマEventiaを使用します。 WordPressでは、テンプレートをデザインするためのフレームとして既存のテーマを使用しています。それ以外の場合は、WordPress自体がテンプレートを追加します。次に、既存のテーマのデザインまたはレイアウトを使用して、ロゴと複数のページを追加できます。

ElementorとWidgetKit9を使用してPSDをWordPressに変換する方法

ヒーローセクションを追加

次に、ヒーローセクションを変換します。まず、PSDのように背景画像を追加し、次に複数のコンテンツとアイコンを追加するために列を列に追加します。

ElementorとWidgetKit10を使用してPSDをWordPressに変換する方法

ここでのカウンターオプションには、WidgetKitカウントダウン要素を使用します。出力と編集オプションは以下のとおりです。

ElementorとWidgetKit11を使用してPSDをWordPressに変換する方法

内側のセクションを追加

次に、内部セクションを設計します。ここでは、Elementor要素を使用して、2つの列の間に背景とテキストを追加します。

ElementorとWidgetKit12を使用してPSDをWordPressに変換する方法

これは、Elementor要素を使用した「このイベントについて」セクションの編集です。ここでは、セクション列内にテキストとバナー画像を追加します。ビューは下を見ています。

ElementorとWidgetKit13を使用してPSDをWordPressに変換する方法

WidgetKitチームの垂直アイコンを使用して、PSDファイルのスピーカーセクションをデザインします。そこで、名前と指定のある別の列に画像とソーシャルサイトのアイコンを追加します。

ElementorとWidgetKit14を使用してPSDをWordPressに変換する方法

このセクションでは、PSDからランダムなアイコンを追加し、見出しを付けます。

ElementorとWidgetKit15を使用してPSDをWordPressに変換する方法

Elementorですべてを作ることはできません。そのような場合、私たちは何をしますか？異なるテーマのアドオンを使用するか、独自のアドオンを作成します。これは、PSDをWordPressテーマに設計する際によくあることです。ここでは、EventiaThemeのScheduleAddonを使用します。

ElementorとWidgetKit16を使用してPSDをWordPressに変換する方法

ブログセクションでは、WidgetKitのブログカルーセル要素を使用します。さまざまなコンテンツビジュアルを使用して、背景を追加することもできます。さらにボタンを読むこともできます。

ElementorとWidgetKit17を使用してPSDをWordPressに変換する方法

ここのフッターセクションでは、ヘッダーセクションの前と同じように、Themexpertによる既存のテーマEventiaを使用します。ここでは、複数のソーシャルサイトアイコンとサブスクライブボタンが表示されます。

ElementorとWidgetKit18を使用してPSDをWordPressに変換する方法

ページをプレビューして公開する

PSDからページのデザインが完了したら、作業をプレビューして公開できます。公開ページを編集して、作業内容をドラフトとして保存することもできます。つまり、ドラフトとして作業を保存している間、公開されたページを台無しにすることはありません。これがEventiaPSDのプレビュービジュアルです。

最後の言葉

今日はこれですべてです。この記事を楽しんでいただき、ElementorページビルダーとWidgetKitを使用してPSDをWordPressに変換する方法について明確なアイデアを持っていただければ幸いです。リソースを適用してください。もちろん、以下のコメントセクションであなたの経験と貴重な意見を共有することを忘れないでください。