あなたはWORDPRESSの変換ソリューションにPSDをお探しですか？ WordPressにあなたの準備ができてウェブサイトのPSDを変換したいが、方法がわかりませんか？ わかった、私はこの問題であなたを助けることができます。
あなたはすでにWordPressが最近の最も使用され、汎用性の高いCMSプラットフォームの一つであることを知っています。 今、コーディングせずにPSDからWordPressのテーマに完全に機能するウェブサイトを作成することは、Elementorのようなページビルダーではるかに快適です。 この記事では、「Elementor&WidgetKitを使用してPSDをWordPressに変換する方法」を段階的に紹介します。
PSDデザインの選択
PSDをWordPressテーマに変換する前に、最初に行う必要があるのは、WEBサイトのPSDデザインを選択することです。 要するに、PSDはPhotoShopのデザインの略で、最も人気のあるデザインツールの1つで、ほとんどのWordPress webサイトのデザインが作成されています。
あなたはPSDHUBの豊富なコレクションからお好みのPSDデザインのいずれかを選択することができます。
それらはあなたのウェブサイトに優れた質の自由なPSDの型板を、個人的な、商業使用提供する。 覚えておいて、あなたの選択したPSDのデザインは、シンプルで現代的なデザインでなければなりません。
PSDデザインを選択する際には、次の要素を確認してください,
- 設計構造：あなたが考慮しなければならない最初の事は、設計構造です。 デザインには限界はありませんが、コーディングには限界があります。
- クリーンでエレガントなレイアウト: 第三に、お好みのPSDのデザインは、清潔でエレガントでなければならないということです。 これは、開発者がきれいでエレガントなレイアウトからピクセル完璧なウェブサイトを作るのに役立ちます。
- 目的の達成性：第二に、デザインがあなたの目的を達成するかどうかです。 あなたが旅行のウェブサイトを必要とすると仮定して、あなたのPSDデザインは旅行のウェブサイトPSDでなければなりません。
- 複雑さ：最後に、degnの選択でもPSDのように複雑さを無視してみてください。
ここでは、PSDHUBのEventia-会議およびイベント管理テンプレートを使用します。
ワードプレスをインストール
WordPressは、インストールの容易さのためによく知られています。 ほとんどの状況下では、WordPressのインストールは非常に簡単なプロセスで、完了するまでに5分未満かかります。 PSDをWordPressテーマに変換するには、WordPressをインストールすることを検討する2番目のステップです。
WordPress.org 自分のサイトのサポートページで”WordPressをインストールする方法”についての詳細な記事を提供します。 しかし、; ここではあなたのためのWordPressのインストールの基本的な手順です,
- 最初にWordPressパッケージをダウンロードして解凍します。
- Webサーバー上にWordPress用のデータベースとMySQLを作成します。
- WordPressをドメインのルートに統合したい場合は、解凍したWordPressディレクトリのすべての内容をwebサーバーのルートディレクトリに移動またはアップロードします。
- WordPressのインストールをウェブサイト上の独自のサブディレクトリにしたい場合は、サーバー上にblogディレクトリを作成し、解凍したWordPressパッケージの内容をFTP経由でディレクトリにアップロードします。
- webブラウザでURLにアクセスしてWordPressのインストールスクリプトを実行します。
それだ！ WordPressをインストールする必要があります。
Elementorをインストール
この記事では、Elementorを使用してPSDをWordPressテーマに変換することについて説明します。 だから、我々はカスタマイズだけでなく、PSDファイルを編集するためにElementorが必要です。 それでは、Elementorをインストールする方法を見てみましょう。
Elementorは、WordPressでピクセル完璧なデザインを作成するための最高の完全なデザインプラットフォームの一つです。 それは拡張可能なユーザーフレンドリーの設計アプローチのために最もよい。 Elementorのインストールプロセスも簡単な作業です。 ただ、いくつかの簡単な手順に従うと、あなたはElementorページビルダーであなたのPSDを設計する準備が整いました。
Elementorプラグインをインストールするには、二つの方法があります。 インストールプロセスは以下に説明されており、
Elementorサイトを介して
- 最初に移動しますelementor.com ダウンロードをクリックします。
- WordPressダッシュボードで、プラグイン>新規追加をクリックします。
- プラグインのアップロードをクリックし、Elementor用にダウンロードしたファイルを選択します。
WordPressダッシュボード経由
- ダッシュボードから、プラグイン>新規追加をクリックします。
- 検索フィールドに”Elementor”と入力し、インストールする”Elementor page builder”を選択します。
- インストール後、アクティブ化をクリックします。
これはElementor page builderをインストールするために必要なすべてです。 また、インストールプロセスについての詳細を知るために、以下のビデオに従うことができます.
WIDGETKITをインストール
ElementorのためのWidgetKit-より多くの要素およびレイアウトを加えることによってあなたのウェブサイトの建物の機能を高める最先端の&強力なElementorの追加のキッ ここでは、WORDPRESSの変換にPSDのためのウィジェットとその要素を使用しています。
WordPressとWidgetKitを使用してPSDからほぼすべての種類のページを作成できます。 Widgetkitのインストールは、それを使ってWORDPRESSのテーマにPSDを設計するのと同じくらい簡単です。 WordPressのダッシュボードからは、いくつかの簡単な手順に従うことで簡単にWidgetKitを追加することができます。 見てみましょう,
WordPressダッシュボードからWidgetKitをインストールする
- ダッシュボードから、プラグイン>新規追加をクリックします。
- 検索フィールドにWidgetKitと入力し、インストールするElementorのWidgetKitを選択します。
- インストールが成功したら、”有効化”をクリックします。
WidgetKitはElementorで使用できるようになりました。 あなたはまだ任意の混乱を持っている場合は、単にビデオに従ってください。 これは、WidgetKitの使用方法についても役立ちます。
あなたのPSDをWordPressに変換する
設置部分が完了しました。 今ではWORDPRESSのElementorとWidgetKitにPSDを変換する時間です。 現在、WordPressにPSDを提供しているWordPressサービスプロバイダとPSDからJOOMLAへの変換を提供しているPSDがたくさんあります。 しかし、; あなたはあなた自身の好みの方法を設計することができます。 ここでは、PSDをWordPressに変換する基本的な方法を示します。
また、あなたはまた、私たちのWordPressのテーマの豊富なコレクションから私たちの既製のテーマとテンプレートのいずれかを選択することができます&プラグインディレク
PSDからレイアウトを設計しながら、シーケンスに従ってみてください。 これはあなたに多くの助けになります、
新しいページを作成する
あなたがしなければならない最初のことは、WordPressのダッシュボードから新しいページを作 WordPressダッシュボードの左上から、「ページ」>「新規追加」をクリックします。
次に、Elementorで編集をクリックしてElementor Page Builderを入力します。 以下に示すように、Elementorパネルが表示されます。
PSDファイルからページを構築する
ページを構築したり、PSDをWordPressテーマに変換したりするには、主に3つの考慮事項があります。 ここでのセクションは、最大のビルディングブロックであり、列をキャプ 列の中にウィジェットを配置することができます。 編集オプションをクリックすると、セクション、列、およびウィジェットをハンドルで制御できます。
ヘッダーセクションを追加
ヘッダーセクションのためにここでは、Themexpertによって既存のテーマEventiaを使用します。 WordPressでは、テンプレートを設計するためのフレームとして既存のテーマを使用しています。 次に、既存のテーマのデザインやレイアウトを使用して、ロゴや複数のページを追加することができます。
英雄セクションを追加
今、私たちは英雄セクションを変換します。 まず、PSDのように背景画像を追加し、複数のコンテンツとアイコンを追加するために列を列に追加します。
ここでのカウンタオプションには、WidgetKit Countdown要素を使用します。 出力と編集オプションは以下の通りです。
内側のセクションを追加
今度は内側のセクションを設計する時間です。 ここでは、Elementor要素を使用して、2つの列の間に背景とテキストを追加します。
これは、Elementor要素を使用したこのイベントセクションの編集についてです。 ここでは、セクションの列内にいくつかのテキストとバナー画像を追加します。 ビューは以下のようになっています。
WidgetKitチームの垂直アイコンを使用すると、PSDファイルのスピーカーセクションを設計します。 そこには、名前と指定を持つ別の列に画像とソーシャルサイトのアイコンを追加します。
このセクションでは、我々はちょうどPSDからいくつかのランダムなアイコンを追加し、見出しを与えます。
私たちはElementorですべてを作ることはできません。 そのような場合、私たちは何をしますか？ 私たちは、別のテーマからアドオンを使用するか、私たち自身のためのアドオンを作 これは、WORDPRESSテーマへのPSDの設計中に一般的なことです。 ここでは、Eventiaテーマからスケジュールアドオンを使用します。
ブログセクションでは、WidgetKitのブログカルーセル要素を使用します。 視覚的な異なるコンテンツを使用すると、背景を追加することができますも、より多くのボタンを読みます。
我々はヘッダーセクションの前に行うようにここでは、Themexpertによって既存のテーマEventiaを使用します。 ここでは、複数のソーシャルサイトアイコンと購読ボタンを取得します。
プレビュー&ページを公開
PSDからページのデザインが完了したら、作業をプレビューして公開することができます。 また、公開されたページを編集して、作業内容を下書きとして保存することもできます。 つまり、作業を下書きとして保存している間に、公開されたページを台無しにしないことを意味します。 ここではEventia PSDのプレビュービジュアルです。