パー パッシーガイ | Elementor
このWordPressチュートリアルでは、Elementor Cloudを使用して、わずか3分でWebサイトを作成する方法を学びます。ElementorCloudは、 Elementorを使用したWordPressブログ 初心者および専門家のブロガーまたはウェブマスター向け。
ビデオチュートリアルに従う場合は、次のビデオの上にあるボタンをクリックしてください。
コーディングを学んだり、開発者を雇ったりせずに独自のWebサイトを構築することは、ほぼ不可能でした。 しかし、WordPressのようなプラットフォームとElementorのようなプラグインのおかげで、かつてはミッションインポッシブルであったものが今では現実になっています。
このチュートリアルでは、WordPressとElementorを使用して新しいWebサイトを作成する方法を示し、プロセスを段階的に説明します。
しかし、私たちがあなたを発見するように誘う前に WordPressにElementorをインストールする方法 または WordPressにプラグインをインストール（追加）する方法
ElementorでWordPressウェブサイトを構築する
WordPress は、無料でダウンロードして使用できる強力なコンテンツ管理システムであり、あらゆるタイプのWebサイトを作成できます。 シンプルな個人ブログや中小企業のウェブサイトから大企業のウェブサイトや機能豊富なアプリまで。
Elementor一方、は使いやすく、しかも堅牢なページビルダーであり、どんなに複雑であっても、誰でも簡単にWebサイトを作成できます。
このチュートリアルでは、新しいElementorCloudプラットフォームを使用してWordPressWebサイトをXNUMX分で作成する方法を紹介します。 名前は強いかもしれませんが、ソリューションは本当に自動化されており、初心者にとっては簡単です。
最初に行うことは、Elementorページに移動し、ページの下部に移動して、ElementorCloudリンクを見つけることです。
新しいページにリダイレクトされます。 下にスクロールしてセクションを見つけます 隠された妖精はいない。 ボタンを右クリックします 今すぐ購入 下の写真のように。
支払いページが開き、メールアドレスを入力するよう求められます。 入力後、ボタンをクリックしてください アカウントを作成する
次に、次のページで国、州、住所、郵便番号などを入力し、ボタンをクリックします 持続する
その後、お支払い方法を選択してください。 クレジットカードまたはPayPalから選択できます。 方法を選びました PayPal.
画面の右側にある黄色のPayPalボタンをクリックします。
Un ポップアップ が開き、PayPalログイン情報を入力して検証するように求められます。
手順が成功すると、XNUMXつのボタンがあるありがとうページにリダイレクトされます。 最初 マイアカウントへ移動します あなたのアカウントとXNUMX番目にあなたを連れて行きます あなたのウェブサイトの作成を開始します あなたのウェブサイトの自動作成に向けて。
XNUMX番目のボタンをクリックします。 あなたはあなたのウェブサイトの名前を入力するようにあなたを招待する新しいポップアップを受け取る権利があります。 をクリックして検証します 次
.
Webサイトの作成の自動手順が終了するのを待ってから、ボタンをクリックします 行こう！
上をクリックします とった 下の写真のように。
[WPダッシュボードを開く]をクリックしてダッシュボードを開きます。
新しいウェルカムポップアップで、ボタンをクリックします ウェブサイトキットを使用する
Elementorが提供するリストからWebサイトテンプレートを選択するように求められます。 左側のいずれかをクリックすると、カテゴリでフィルタリングすることができます。
自分の願望に対応するモデルを見つけたら、その上にマウスポインターを置くと、新しいボタンが表示されます。クリックしてください。 デモを見る
このモデルが何を提供するかを見ることができます。 このモデルのすべてのページをナビゲートできるようになります。満足している場合は、ボタンをクリックしてください。 キットを適用する 誰があなたのウェブサイトにテンプレートをインストールしますか。
そうでない場合は、ボタン ライブラリに戻る テンプレートのリストに戻り、別のテンプレートをチェックアウトできます。
クリックした後 キットを適用する、確認ポップアップで、このモデル全体をインストールするのか、それとも数ページだけをインストールするのかを尋ねられます。 クリックできます すべてを適用 ou カスタマイズ 選択をカスタマイズします。
選択内容の概要が表示されますので、をクリックしてください 次
最後にをクリックします ダッシュボードに戻る Webサイトのダッシュボードに戻ります。
ダッシュボードで、をクリックします 私のウェブサイトの名前 画面の左上、次にVisitサイト あなたのウェブサイトがどのように機能しているかを見るために。
これで、ElementorCloudを使用してWordPressでWebサイトを作成できました。
あとは、必要に応じてカスタマイズするだけです。 このために、私たちは Elementorチュートリアルバンドル 私たちはあなたに発見することを勧めます。
このガイドを読み終えたら、他のガイドやチュートリアルでより具体的なページを確認することをお勧めします。
これらのチュートリアルを使用すると、Webサイトを改善し、それを最大限に活用することができます。
結論
それで ！ Elementorを使用して3分でWebサイトを作成する方法を示すこの記事は以上です。 そこへの行き方について懸念がある場合は、内でお知らせください commentaires.
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
パー パッシーガイ | Elementor
Elementorにボタンの効果音を追加する方法を見つける必要がありますか？ この記事で調べてください。
これらの2つのボタンが表示されますか？
クリックすると 猫の、ニャーを鳴らし、ボタンをクリックすると チェン、吠える音がします。 この記事では、追加する方法を紹介します Elementor クリックしたときのボタンの効果音。
まず、ボタンを作成する必要があります。Elementorにはボタンを美しく見せるためのオプションが多数あるため、必要に応じてボタンをカスタマイズできます。
ステップ2：効果音リンクを準備する
ボタンの準備ができたら、ボタンの効果音を準備し、WordPressメディアライブラリにアップロードします。 効果音にはMP3またはWAVファイル形式を使用できます。
サウンドファイルをWordPressメディアライブラリにアップロードするには、WordPressダッシュボードに移動してクリックします メディア->追加。 ファイルをドラッグアンドドロップするか、クリックすることができます ファイルを選択 それらをアップロードします。
ファイルがダウンロードされたら、メディアライブラリに移動し、サウンドのXNUMXつをクリックしてから、表示されるウィンドウでコピーします。 ファイルのURL 効果音のリンクを取得します。
ステップ3：次のHTMLコードを追加します
ボタンから音を出すには、次のHTMLコードを使用する必要があります。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
//Audio 1 Starts
var audio1 = new Audio('Sound-Effect-URL')
$(".button-class").mousedown(function() {
audio1.load();
audio1.play();
});
//Audio 1 Ends
});
</script>
キャンバス領域にHTMLウィジェットを追加し、ブロックにコードを貼り付けます HTMLコード.
効果音リンクを使用して置き換えます 効果音-URL ステートメントで
var audio1 = new Audio('Sound-Effect-URL')
ボタンのCSSクラスを選択し、ボタンのクラスCSSクラスのコードを変更します
$(".button-class").mousedown
コードを変更すると、次のようになります。
ボタンをコードに接続するには、CSSクラスをボタンに追加する必要があります。これにより、コードはどのボタンがクリックされたかを認識し、効果音をトリガーします。
そして、これは効果音付きのボタン用です。 これで、ボタンをカスタマイズできます。 また、効果音付きのボタンをさらに追加したい場合は、コードの一部をコピーして少し変更することで実行できます。
既存のボタンを右クリックして[コピー]を選択し、そのセクション内を右クリックして任意のセクションに貼り付けることで、既存のボタンをコピーできます。
コードの一部をコピーし、XNUMX番目のボタンの変数とCSSクラス名を調整します
効果音をトリガーする以前のHTMLコードの一部をコピーしてみましょう。以下のコードです。
//Audio 1 Starts
var audio1 = new Audio('Sound-Effect-URL')
$(".button-class").mousedown(function() {
audio1.load();
audio1.play();
});
//Audio 1 Ends
コードをコピーしたら、すぐ下に貼り付けます オーディオによる1終了。 変数を変更します オーディオ1 および変数を使用するすべてのコード オーディオ1 で新しく作成されたコード オーディオ2.
参照してください： Elementor：ポートフォリオからエフェクトカードを作成する方法
次に、新しいボタンに新しい効果音を使用している場合は、効果音のURLを置き換えて、コードを変更します ボタンクラス 新しく作成したボタンCSSクラスで。
最終的なコードは次の画像のようになります。
ボタンのCSSクラス名を置き換えます
新しく作成したボタンをクリックすると、効果音も鳴ります。 いくつでも作成できます。
オーディオ要素は、Webサイトへの優れた追加機能のXNUMXつです。 これらは、Webサイトに魅力的な要素を提供するだけでなく、エンドユーザーに永続的な印象を与えるのにも役立ちます。
また読みます： Elementor：WordPressWebサイトを移行する方法
ただし、アクションまたは結果は、ユーザーへの重要なメッセージを大幅に強化または明確にする場合にのみ、音を伴う必要があります。 代わりにWebサイトに悪影響を与えないように、注意が必要なことをユーザーに通知します。
結論
それで ！ Elementorにボタンの効果音を追加する方法を示すこの記事は以上です。 そこへの行き方について懸念がある場合は、内でお知らせください commentaires.
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
パー パッシーガイ | Elementor
ElementorにZインデックス付きのフローティングボタンを作成しますか？
すべての画面コンテンツの前に表示され、通常は円形で中央にアイコンが表示されるボタンについては、ご存知のとおりです。 さて、それはフローティングアクションボタンです。
フローティングアクションボタンは、アクションをトリガーしたり、どこかにセーリングを送ることができます。 電子メールのトリガー、ソーシャルネットワーク、訪問者にチャネルをサブスクライブするように指示するなど、さまざまな機能があります。
Elementorでは、フローティングアクションボタンを作成する方法はXNUMXつあり、次のとおりです。
- Z-Indexを設定する
- ポップアップウィンドウを作成する-Popup-
このチュートリアルでは、Zインデックスを設定してフローティングアクションボタンを作成する方法のみを示し、プロバージョンを使用してそれを実現します。
しかし、最初に、以下を見つけてください。 WordPressにElementorをインストールする方法
Elementorでフローティングアクションボタンを作成する方法
Elementorの無料バージョンを使用して、このメソッドでフローティングアクションボタンを作成できます。 ただし、Webサイトでボタンを表示するすべてのページに、設計したボタンを貼り付ける必要があります。
とともに Elementorプロ、この機能にアクセスすることもできます カスタムCSS、このチュートリアルで使用します。
Elementorエディターに移動します。 既存のコンテンツ（ページ、記事など）を変更したり、新しいコンテンツを作成したりできます。 このチュートリアルでは、ページを変更します。
まず、単一の列を持つ新しいセクションを作成します。 ボタンウィジェットを選択します ウィジェットパネルから編集領域にドラッグアンドドロップします。 次にボタンを変更します テキスト と リンク。
このチュートリアルでは、ボタンをトリガーとして使用して、訪問者にElementorWebサイトを閲覧するように促します。 次に、オプションで Alignement、に設定します ドロワット et, 最後に、 タイユ オンボタンの 非常に大きい.
上のGIFでわかるように、このボタンはセクション内で静止しています。 次に、同じ位置に保ちながらスクロールしながら動かします。
タブに移動します 高度な。 パラメータ内 レイアウト、幅を設定します インライン（車）で、 を定義する 固定上の位置、 セットする 水平方向 上の ドロワット 調整します décalage 必要に応じて。
次に、このメソッドの要点を定義します。 現場で Z-インデックス、番号9999を入力します ; ボタンが常に前面（フローティング）になります。
次に、フローティングアクションボタンを回転させます。 常にタブの下 高度な、アクセス cssクラス ブロックから レイアウト, 次に書く rotate 内部。
参照： Elementor：最高のWordPressページビルダーの紹介
その後、ブロックに移動します カスタムCSS 、次に次のコードをフィールドに貼り付けます。
.rotate.rotate
{transform: rotate(90deg);}
ノブがちょうど回転したことがわかりますが、画面の側面の間に奇妙なギャップがあります。 だから、調整して修正しましょう décalage à-92
最後に、このフローティングアクションボタンの最後の小さなタッチを行います。 ブロックにアクセスする トランスフォーマー、それを選択します 概要、 オプションにアクセスする シフト 各オプションをに設定します 7.
Elementorで特定のことを達成するためのいくつかのオプションがあります。 フローティングボタンに関しては、XNUMXつのオプションを使用できます。 ここではXNUMXつの方法のみを取り上げましたが、もうXNUMXつの方法は別のチュートリアルになります。
また読みます： Elementor：WordPressWebサイトを移行する方法
より多くのスタイリングオプションが必要な場合は、ポップアップのビルダーを使用してフローティングアクションボタンを作成することをお勧めします。ボタンをカスタマイズするオプションと、ボタンの閉じる時間、継続時間、開始または終了のアニメーションなどの動作があります。 。
このタスクは簡単に完了しました。 タブレットとスマートフォンの動作をプレビューし、各デバイスに合わせてマージンを変更してみてください。
結論
そう ！ プロファイルカードにズーム効果を適用する方法を示すこの記事は以上です。 そこへの行き方について懸念がある場合は、内でお知らせください commentaires.
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
パー パッシーガイ | Elementor
チュートリアルでは： Elementorを使用してWordPressWebサイトを手動で移行する方法。 すでに示しました WordPressDuplicatorプラグインを使用してWebサイトを移行する方法.
このWordPressプラグインを使用すると処理が簡単になりますが、コードを操作してプロセス自体を制御する必要がある場合もあります。
特に大規模なWebサイトがある場合、または何らかの理由で手動で操作したい場合でも、WordPress Webサイトを手動で移行することはそれほど難しくありません。
このガイドでは、WordPressのより技術的な動作にすでに慣れている場合にのみこの方法をお勧めするため、詳細については説明しません。
ステップ0：観察すべき予備知識
このチュートリアルを始める前に、次のことを行う必要があります。
- ウェブサイトのバックアップを作成します
- 既存のWebサイトホストのFTP資格情報と、Webサイトの移行先のFTP資格情報を持っている
また、ドメインを変更する場合は、新しいドメインのネームサーバーを新しいウェブサイトのサーバーに転送する必要もあります。
次に、WordPressを手動で移行する方法を示します。
手順1：ファイルを新しいサーバーに移動する
Webサイトから新しいサーバーにファイルを移動するには、いくつかの方法があります。 XNUMXつの方法は、FTPを使用してすべてのファイルをアップロードしてから、新しいサーバーにアップロードすることです。
ただし、このプロセスには何時間もかかる可能性があるため、cPanelで圧縮アーカイブファイルを作成し、新しいホストでチェックアウトするのが最も効率的な方法です。
ステップ2：データベースをエクスポートする
次に、既存のWebサイトデータベースをエクスポートする必要があります。
これはphpMyAdminを介して手動で行うことができますが、より簡単な解決策は DBフリーのWordPressプラグインを移行する.
WP Migrate DBはデータベースを簡単にエクスポートできるだけでなく、シリアル化されたデータも処理し、検索を実行してURLパスを置き換え、ドメイン名を変更した場合にすべてが正常に機能することを確認できます。 。
移行するWebサイトにプラグインをインストールしてアクティブ化します。 次に行きます ツール→DBの移行
ラジオボタンを選択します エクスポートファイル ( デフォルトで選択する必要があります).
ドメイン名を変更する場合は、機能を使用することもできます 検索/置換 データベースのURLを新しいドメイン名に置き換えます。
その後、クリック 輸出 データベースのコピーをダウンロードするには：
ステップ3：新しいMySQLデータベースを作成する
次に、Webサイトを移行したホストに、新しいデータベースユーザーとパスワードとともに新しいMySQLデータベースを作成します。
この情報は必要になるので、手元に置いておいてください。
ステップ4：データベースをインポートする
新しいWebホストでphpMyAdminを開き、以下を実行します。
- 左側のサイドバーを使用して、手順3で作成したデータベースを見つけます。
- タブをクリックします インポート
- 手順2でWP Migrate DBを使用してダウンロードしたデータベースファイルを選択します。
- 上をクリックします Go
ステップ5：wp-config.phpファイルを編集する
この時点で、Webサイトのファイルとデータベースは新しい場所にあるはずです。
次に、ステップ3で作成した新しいデータベースを使用するようにWebサイトに指示する必要があります。
これを行うには、ファイルを編集します WP-config.phpを 移行したWebサイトで、新しいデータベース情報を入力します。
手順6：Elementorコンテンツ内のURLを検索して置換する（ドメインを変更する場合）
ドメイン名を変更する場合は、 Elementor→ツール。 次に、タブをクリックします URLを置き換える そして、ツールを使用してElementorコンテンツのURLを更新します。
ステップ7：ElementorのCSSを再生成する
ElementorコンテンツのURLを更新した後、 Elementor→ツール ボタンをクリックします ファイルを再生成 ElementorにCSSを再生成させる：
WordPressを移行する方法について他に質問がありますか？
これで、Elementorコンテンツを含む、WordPressの移行方法に関するガイドが終わります。
結論
WordPressとElementor Proで作成したWebサイトを新しいWebホストやドメイン名に安全に移動する方法について質問がある場合は、 で教えてください commentaires.
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
パー パッシーガイ | Elementor, WordPressのチュートリアル
最高のWordPressページビルダー：Elementorのプレゼンテーションを見つけたいですか？
WordPressは世界で最も人気のあるCMSです。 ただし、フロントエンドでページをデザインする場合、WordPressのデフォルトのツールキットはWixやSquarespaceなどの他のサイト構築プラットフォームにはるかに及ばない。
WordPressのこの欠点は、作業を簡素化する多数の強力なプラグインではなくなり始めています。 これが、このチュートリアルで紹介する理由です。WordPressプラグインを使用すると、すばらしいホームページをすべて無料で作成できます。
Elementor は、プロ並みのページを驚異的な速度で作成できるページビルダーであり、これらすべてがブログに掲載されています。 プラグインは無料で、 WordPressプラグインディレクトリ.
Elementor 最近紹介されました 製品ハント、 Facebookグループの多くのWordPressユーザーの興味を引きました。
Elementorがどのように多くの人に対処するのか不思議に思うかもしれません ページ·ビルダー それはすでに存在します。
速度の利点
対処しなければならないとき ページビルダー »、速度の問題は重要です。 Elementorは現在最速のページビルダーです。 「 ドラッグアンドドロップ これは、ラグなしで機能するか、Elementorによって設計されたページの読み込み時間が高速です。
参照してください： Elementorを使用してポートフォリオからエフェクトカードを作成する方法
速度とパフォーマンスはサイトだけでなく、ユーザーエクスペリエンスにも影響します。 「」のアイデア ページビルダー 「速度を落とすことなくライブで作業できることは、ユーザーエクスペリエンスを決定する要因です。
オープンソースの利点
Elementorはオープンソースです。 他にもありますが ページビルダー 「無料で、他の同様のオープンソースプロジェクトはありません。さまざまな機能とウィジェットを備えたこれらの広範な設計機能を提供します。
無料版はまもなく利用可能になりますが、無料版ではユーザーがプロフェッショナルなページを作成できます。
参照してください： Elementorでテキストにカーソルを合わせて画像を変更する方法
発売後、6つ以上のウィジェットが用意されています。 あなたはそれを頼りにすることができます：スペーサー、アイコンボックス、画像ボックス、グリッドギャラリー、画像ギャラリー、カルーセルギャラリー。
コミュニティの利益
WordPressコミュニティは、Elementorの開発において重要な役割を果たしています。 このプロジェクトはGitHubにあり、開発者はそれを改善するのに役立ちます。
チュートリアルもご覧ください ElementorでWordPressテーマをカスタマイズする方法
また、日本語、ドイツ語、ヘブライ語など、いくつかの言語に翻訳されています。 それは唯一の「 ページビルダー »RTLおむつとの互換性（右から左へ）。 コミュニティは時間とともに成長しています。これはプラグインの将来にとって非常に有望です。
プラグインの進化
Elementorは10.000回以上ダウンロードされています。 Product Huntニュースレターで取り上げられており、すでに700の賛成票を獲得しています。 新機能は毎週追加されます。
最初のステップ
プラグインをインストールすると、ダッシュボードに新しいメニューが表示されます 「エレメンター」。
それをクリックすると、プラグイン設定ページに移動します。 ただし、デフォルト設定はほとんどのWebサイトで機能するため、この手順は実際には必要ありません。
ただし、たとえば、プラグインを使用するカスタム公開形式を定義する場合は、いくつかの調整を行う必要があります。
ガイドを読む Elementorでボタンをクリックするだけで画像を変更する方法
ページの作成を開始するには、ページにアクセスするだけです（または、パーソナライズされたパブリケーションタイプを作成するためのインターフェイス）。 このページには、「」というタイトルの新しいボタンがあります。 Elementorと編集"。
次に、ブログでライブのインターフェースにアクセスします。 そこからすべての魔法が作用します。 したがって、このインターフェイスから、右側で使用可能な要素をブログインターフェイスに追加できます。 あなたは物事がどれほど速く行われるかに気付くでしょう。
慣れるのに苦労するかもしれませんが、心配する必要はありません。 今のところ知っておく必要があるのはこれだけです。 ご不明な点がございましたら、お気軽にコメントを投稿してください。
結論
そこにそれがある ！ テキストにカーソルを合わせて画像を変更する方法を示すこの記事は以上です。 そこへの行き方について懸念がある場合は、内でお知らせください commentaires.
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
パー パッシーガイ | Elementor
Elementorプラグインを使用してWordPressテーマをカスタマイズする方法を知りたいですか？
WordPressテーマのカスタマイズは、WordPress Webサイトを構築する際の主要なタスクのXNUMXつです。 彼女はウェブサイトのデザインを管理しているため、多くの専門家がほとんどの時間を費やしています。
カスタムのWordPressテーマを作成するには、通常、テーマファイルとコードエディターを使用します。 レイアウトの変更はテンプレートファイルで行われ、デザインの変更はCSSを通じて行われます。 また、カスタマイズを表示するには常にブラウザーウィンドウを更新する必要があるため、多少面倒な場合があります。
幸いなことに、 Elementor、 このプロセスは非常に簡単になるので、チェックしてみてください。
しかし、前に、一緒に発見しましょう WordPressのブログ7の手順をインストールする方法 et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法.
それから、私たちがここにいる理由に戻りましょう。
WordPressテーマとは
WordPressテーマは、本質的には、WordPress Webサイトの外観を定義するテンプレートのコレクションです。
WordPressテーマには、ヘッダーやフッターから配色、レイアウトなど、ウェブサイトのデザインに影響を与えるすべてのものが含まれます。
無料とプレミアムの両方で利用可能なテーマがたくさんあり、次のようなほとんどすべての業界に適合します 写真のウェブサイト, ジムクラブのウェブサイト, 美容院のウェブサイト, 法律のウェブサイトそして、もっと。
WordPressテーマをカスタマイズする理由
ウェブサイトを構築する主な理由のXNUMXつは、ビジネスを宣伝することです。 これを行うには、ビジネスのスタイルとデザインを宣伝するユニークなWebサイトを作成するよりも優れた方法があります。
Amazon、eBay、Googleが独自のデザインを持たない存在であることを想像できますか？
もちろん、そうではありません。それが、WordPressテーマをカスタマイズしたい理由のXNUMXつです。 私たちはそれをユニークにし、会社のメッセージに適応させたいと思っています。
また、時々、またはむしろ、しばしば、貧弱なデザイン、うまくいかない色、または重すぎてサイトのパフォーマンスにのみ影響を与えるテーマに悩まされているWordPressテーマを実行します。ウェブ。 WordPressテーマは、面倒なことを除いて強力なものになる可能性があります。 それをカスタマイズしてこれを変更すると、すべての問題を解決して作成できます より良いユーザー体験.
WordPressテーマをカスタマイズする方法
WordPressテーマをカスタマイズする方法はいくつかあります。
- WordPressカスタマイザを介して手動で
- コード付き
- Elementorを使用
WordPressテーマを手動でカスタマイズする方法
組み込みのWordPressカスタマイザーを使用して、お好みのWordPressテーマをカスタマイズできます。 コードなしでそれを行うと、多くの場合、何を変更できるかが制限されます。 一部のプレミアムWordPressテーマでは、より多くのカスタマイズオプションを使用できますが、本質的には、多くのデザインオプションはありません。
この領域をさらに詳しく説明する前に、既存のWordPressテーマをカスタマイズするときは、 親テーマではなく子テーマ.
WordPress子テーマ
子テーマは、別のWordPressテーマである親テーマとまったく同じ機能と特徴を持つWordPressテーマです。 子テーマは、親テーマに影響を与えたり、更新する機能を失うことなく、テーマを安全にカスタマイズおよび変更するために使用されます。
WordPressテーマカスタマイザ
子テーマを使用するのが最善であることがわかったので、WordPressカスタマイザーでテーマをカスタマイズする方法を学びましょう。 アクセスするには、ダッシュボードに移動し、 apparence 左側で選択します パーソナライズ。
このカスタマイザで変更できる主な機能は次のとおりです。
ウェブサイトのタイトル、ロゴ、アイコンを追加する
タイトル、ロゴ、アイコンを追加または変更するには、WebサイトのIDパネルに移動します。 これらの各要素を選択して変更します。
WordPressテーマの色を変更する
一部のWordPressテーマでは、カラースキームを変更できますが、すべてを変更できるわけではありません。一般に、プレミアムWordPressテーマです。 WordPressテーマで配色を変更できる場合、カスタマイザにアクセスするとこのオプションが表示されます。
ナビゲーションメニューを追加
カスタマイザーでは、Webサイトのナビゲーションメニューを簡単に追加および変更することもできます。
コードでWordPressテーマをカスタマイズする方法
[外観]タブで、テーマエディタを選択するオプションがあります。 それをクリックすると、テーマコードのウィンドウが表示されます。 このオプションはCSSコーディングを十分に理解している必要があり、初心者にはお勧めできません。
ここでは、次のようなファイルにアクセスできます style.css、functions.php、これはまさにあなたがあなたのウェブサイトを壊さないようにあなたが子テーマを必要とするシナリオです。
コーディングによってテーマをカスタマイズするもうXNUMXつの方法は、FTPソリューションを使用してファイルをアップロードすることです。 このプロセスには、ホスティングプロバイダーを介したFTP資格情報の作成、FTPソリューション（FileZillaなど）のダウンロードとインストール、アカウントへのログイン、ファイルの編集が含まれます。 FTPソリューション。
ガイドをご覧ください FileZillaでWordPressをインストールする方法
コーディングに慣れていない限り、このオプションはお勧めしません。
ElementorでWordPressテーマを簡単にカスタマイズ
これは、ユーザーインターフェイスから直接実行できます。 コードをXNUMX行変更したり、ブラウザウィンドウをリロードしたりする必要は一度もありません。
Elementorを使用すると、マウスを数回クリックするだけでWebサイトのすべての要素をすばやく簡単に変更でき、モバイルプラットフォーム用にこれらの機能を最適化することもできます。
Elementorは、動的コンテンツを使用してページをプレビューできるようにすることで、このプロセスをはるかに簡単にします。 これにより、デザインの変更が実際のWebサイトとコンテンツにどのように影響するかをすぐに確認できます。
ヘッダーとフッターをカスタマイズする
Elementorは、ヘッダーとフッターのデザインに関して、完全な柔軟性を提供します。 私たちは皆、WordPressテーマがあり、ヘッダーやフッターのデザインのXNUMXつの側面を変更できないことは、どれほど退屈であるかを知っています。 特別なテーマ、プラグインなどが必要です。
Elementorがあれば簡単です。
1.ヘッダーテンプレートを作成する
まず、新しいヘッダーテンプレートを構成します。 これを行うには、Elementor> MyTemplatesに移動します。
ここで開始するXNUMXつの方法は、上部にある[新規追加]ボタンをクリックすることです。 次の画面で、ドロップダウンメニューを使用して、デザインするテンプレートのタイプとして[ヘッダー]を選択します。
前の画面の[ヘッダー]タブをクリックし、表示される大きな緑色のボタンを押しても、この画面にアクセスできます。
テンプレートタイプとしてヘッダーを事前に選択します。 どちらの方法でも、テンプレートの適切な名前を追加して（後でそれが何であるかがわかるように）、[テンプレートの作成]をクリックして続行する必要があります。
ここに到着します。
Elementor Proでは、あらかじめ設計されたヘッダーブロックから選択できます。 これらは、独自のデザインの開始点として使用できるデザインテンプレートです。この場合は、これを行います。
ヘッダーブロックにカーソルを合わせると、 インセット すぐに設計を開始できます。 それ以外の場合は、最初に画像をクリックして、拡大版を表示します。 その後、いつでも押すことができます インセット 上記。
それ以外の場合、最初からやり直したい場合は、ウィンドウをクリックして閉じます。 X 右上隅にあります。
2.基本的なヘッダーデザインを変更する
新しいヘッダーを入力した後、最初に気付くのは、前に構成したロゴとメニューがすでにそこにあることです。
これがまさに私たちがそれらを組み合わせた理由であり、私たちはそれらをカスタマイズする方法について話します。 ただし、最初にヘッダーセクション自体をカスタマイズする方法を見てみましょう。
これを行うには、その上にカーソルを合わせて、上部の編集ボタンをクリックします。 これにより、左側に編集オプションのリストが開きます。
以下は、さまざまなメニューで制御できるものです。
- レイアウト -セクションの幅、列間のスペースのサイズ、高さ、垂直列とコンテンツの配置、割り当てられたHTMLタグと一般的な構造を制御します。
- スタイル -ここでは、背景色を変更できます ホバー効果でも 画像またはビデオを追加する 必要に応じて、オーバーレイ、境界線、仕切り効果を追加し、タイポグラフィの設定を変更します。
- 上級 -この部分では、マージン、Zインデックス、アニメーション、ID、クラスなどのCSS属性を追加できます。 また、セクションを固定して応答性の高い設定を制御し、いくつかを追加することもできます。 カスタムCSS.
上記はすべて一目瞭然で、必要なものがすぐに手に入ります。
3.ヘッダー要素をカスタマイズする
ただし、ヘッダーセクション全体を編集できるだけでなく、ヘッダーセクションに含まれているアイテムも編集できます。 たとえば、ウェブサイトのロゴをカスタマイズするには、それをクリックするだけです。 これも、左側に編集オプションを提供します。
ロゴの場合、これにより次のオプションが提供されます。
- コンテンツ -画像のサイズ、配置、リンク先を変更します。
- スタイル -幅と高さを制御し、CSS効果とホバー効果を追加し、必要に応じて境界線と影を含めます。
- 上級 -ここには、基本的にヘッダーセクションと同じオプションがあります。
設定を使用して、ヘッダーに適切に表示するようにロゴをカスタマイズします。 また、各アイテムには独自のタイプのオプションがあるため、必ずチェックしてください。
4.アイテムを追加する
もちろん、Elementorではヘッダーにアイテムを追加することもできます。 右上の記号をクリックするだけで、何が利用できるかを確認できます。
Elementorは、ヘッダーテンプレートを編集するときに、関連するブロックをリストの最上部に自動的に表示します。これは、状況下で最も意味のあることです。 この場合、これらはWebサイトのロゴ、ナビゲーションメニュー、Webサイトのタイトルなどです。
たとえば、ロゴの横にWebサイトのタイトルを追加する場合は、ロゴをドラッグアンドドロップするだけです。 ただし、現在選択しているヘッダーテンプレートでは、ロゴの上または下に追加できます。 しかし、それは簡単に解決される問題です。
このような場合は、ヘッダーにカーソルを合わせてプラス記号を使用します–+-上記のセクションを追加します。
XNUMX列のデザインを選択するには、紫色のボタンをクリックしてください。
次に、要素を既存のヘッダーセクションから新しいセクションにドラッグし、中央にWebサイトのタイトルを追加します。
しかし、待ってください、スタイルはまったく異なります！ 問題ない。 既存のヘッダーを右クリックして選択します コピー。 次に、新しいセクションを右クリックして、ここをクリックします スタイルを貼り付けます。 Elementorは既存のセクションのスタイルを適用します。これは後で閉じることができます。
Elementorに含まれている他のすべての要素を使用して、他のヘッダー要素を使用して同じプロセスを実行できます。
独自の投稿テンプレートをカスタマイズする
Elementorでは、単一の投稿テンプレートをカスタマイズすることもできます。 方法は次のとおりです。
1.新しいモデルを作成する
テンプレートの作成は通常の方法で機能します。 ただし、今回は シングル モデルタイプとして。 次に、以下で、編集する固有のテンプレートを選択します。 この例では、 ポスト.
新しいページデザインを作成する場合は、404ページを編集するか（後で詳しく説明します）、または カスタム投稿タイプ 特に、他のものを選択します。 どちらの場合も、名前を入力して続行します。
次の画面では、通常どおり事前定義されたテンプレートから選択できます。 ただし、この場合は、最初から新しいモデルを作成します。 右上のXをクリックして、このウィンドウを閉じます。
2.プレビューを構成する
次に、プレビューウィンドウを既存の投稿に設定します。 これを行うには、エディターオプションの下部にある目のアイコンをクリックします。 設定を行います。
開いたメニューの プレビュー 動的コンテンツ、選択 公開。 その後、次の行で、既存の投稿を名前で検索して選択できます。
それが終わったら、 お申し込み & プレビュー。 この時点では何も表示されません（ページには何もないため）が、Elementorに今後この投稿のデータを使用するように指示します。 これが何を意味するかすぐにわかります。
3.上記のセクションを作成しましょう
まず、上記のセクションを作成します。 ここには通常、投稿のタイトルや、作成者、日付、カテゴリなどのメタデータなどが表示されます。
最初のステップはサインをクリックすることです + そして、単一の列セクションを作成します。
その場合、レイアウトセクションで、その幅、高さ、配置、スタイルを制御するオプションがあります。 この場合、ここで行うことはあまりありません。 また、心配する必要はありません。いつでも戻って後で変更できます。
次に、投稿タイトルウィジェットを新しいセクションにドラッグします。
その際、使用可能なすべてのオプションを使用して、デザインとレイアウトを好みに合わせて調整してください。 たとえば、これを行うための私の設定は次のとおりです。
あなたが学ぶべきクールな機能もあります。 投稿タイトルのキー記号をクリックすると、動的データの前後に静的コンテンツを追加できます。
たとえば、ニュースやレシピなどの特定の投稿カテゴリのテンプレートを作成する場合、次のように投稿のタイトルに追加できます。
そうすれば、そのデータはそのカテゴリのすべての投稿に表示されます。 この時点ではこれを使用しませんが、これは重要な副次的な注意であると考えました。
投稿のタイトルの下に、 ポスト インフォ ウィジェット 投稿のメタデータを表示します。
ここに私が使用する設定があります：
さらに、デザインをページの残りの部分に合わせるために、スタイルオプションを使用しました。 同じことを確認してください。
4.ポスト本体をセットアップする
ヘッダーの後に、ページの本文を作成します。 このパーツのデザインをヘッダーとは異なるものにする場合は、新しいセクションを設定する必要があります。 しかし、私はそれをシンプルに保つので、そうする必要はありません。
最初に挿入したいのは、注目画像です。 このため、同じ名前のウィジェットをすでにページにあるものの下に配置できます。
基本的に設定は一切変更せず、そのままにしておきました。
次に、コンテンツを投稿します。 ここにも対応するブロックがあります。
注目の画像と投稿コンテンツの場合、Elementorは自動的にWebサイトにあるものを自動的にプルします。 活版印刷の設定で遊ぶなど、必要な新しいブロックのデザインを調整します。
それ以外はそれだけです。 最後の部分に進むことができるように、ここで行うにはそれほど多くの作業はありません。
5.フッターを構成する
この場合、フッターに著者のプロフィール、共有オプション、読者のコメントを表示します。 これを行うには、まず、66.33つの列を持つ新しいセクションを作成する必要があります。 著者プロファイル用にさらにスペースを作成するために、XNUMXレイアウトに設定できます。
その後、ウィジェットを配置します 著者ボックス 左側のセクションにあります。
必要に応じてスタイルをカスタマイズしてください。 背景色を少し追加して、タイポグラフィの設定を少し調整しました。
その後、右側に共有ボタンブロックを追加します。
上記のスクリーンショットで私の設定を確認できます。
その後、あとXNUMX列下にセクションを作成し、そこに[コメントを投稿]ウィジェットをドラッグアンドドロップするだけです。
（ちなみに、これらのウィジェットが見つからない場合は、検索機能を使用してください）。
必要と思われるコメントセクションを調整し（私はそのままにしました）、投稿する準備が整います。 これが完成したデザインです：
アーカイブテンプレートをカスタマイズする
1. WordPressアーカイブテンプレートを設定する
これで、新しいモデルを作成するためのソリューションをすでに理解しています。 唯一の違いは、この場合は選択することです アーカイブ モデルタイプとして。
その後、いつものように、いくつかのブロックから選択するか、独自のモデルを最初から作成することもできます。 ただし、アーカイブの場合、おおよそXNUMXつしかありません。 ウィジェット とにかく重要なElementor。
2.アーカイブのタイトルを定義します
私が話したい最初のブロックはアーカイブのタイトルです アーカイブのタイトル.
以下の通常の設定に加えて スタイルと高度なの下にあるキー記号をクリックすると、重要なオプションを見つけることができます タイトル。
ここで、Elementorが[作成者：]と表示されている部分のようにページにアーカイブタイプを表示するかどうかを有効または無効にできます。 これは、下のボタンから発生します コンテキストを含める.
ちなみに、いつものように、プレビュー設定（[目の記号]> [設定]）を使用して、さまざまなアーカイブをプレビューできます。 このようにして、固有のカテゴリ、タグ、作成者などのデザインを確認できます。 それを覚えておいてください。
3.アーカイブパブリケーションブロックを使用する
アーカイブのXNUMX番目に重要なウィジェットはアーカイブ投稿です。 これにより、任意のアーカイブに属するすべての投稿がXNUMXつのページに表示されます。 テンプレートを選択すると、すでにそこにありますが、このブロックを使用して自分で簡単に追加することもできます。
アーカイブページをカスタマイズするためのオプションを見てみましょう。
- 肌 -投稿をクラシックまたはカードスタイルのデザインで表示することを選択します。
- コラム -投稿が表示される列の数を決定します。
- 画像を表示 -アーカイブページの注目画像をアクティブ化
- 石造建築 –組積造デザインのアイテムを表示するかどうか。
- 画像サイズ -Elementorがアーカイブページで使用する画像のサイズ。
- 役職 -投稿のタイトルを表示しますか？
- タイトルHTMLタグ -その場合、どのHTMLタグで囲む必要がありますか？
- 抜粋 -投稿からの抜粋を含めるか、タイトルのみを表示します。
- 抜粋の長さ -抽出の長さを決定します。
- メタデータ -訪問者が利用できる投稿メタデータを定義します。
- 間のセパレータ -メタデータ情報間の区切り記号。
- 続きを読む -「続きを読む」リンクを含めますか、はいまたはいいえ？
- バッジ -投稿にカテゴリやタグなどの情報を追加できます。
- 分類バッジ -ここで、含める情報を決定できます。
- アバター –これにより、記事の著者のプロフィール写真を変更できます
上記に加えて、いくつかのオプションがあります。 下 ページング、 アーカイブページングの処理方法を定義できます。 たとえば、表示方法、含めるページ数、テキストの配置などです。
最後に、 高機能 訪問者が空のアーカイブにアクセスしたときに表示するメッセージを設定できます。 他のすべてはよく知っている必要があります。 選択したスキンによってスタイルオプションが変わることに注意してください。
4.アーカイブごとのパブリケーション数を制御する
アーカイブテンプレートに関する簡単なメモ。 アーカイブ（またはブログページ）に表示される投稿の数を変更するには、WordPressの下で変更する必要があります。 設定>読み取り。
ここでは、訪問者に表示する投稿の数を入力します。
パーソナライゼーション 簡単に ElementorによるWordPressテーマ
WordPressのテーマをカスタマイズすることは、多くの専門家の基本です。 これには通常、ファイルの多くのコーディングと編集が含まれますが、Elementorではこれは不要になりました。
上で見たように、プラグインは本格的なWordPressテーマエディターです。 それは、ユーザーインターフェイスからそのすべての部分をカスタマイズすることができます。 Webサイトのヘッダー、フッター、ページと投稿のテンプレート、アーカイブテンプレートなどを編集できます。
動的コンテンツを使用してWebサイトの任意の部分をプレビューする機能により、トレンディなカスタマイズをすべて実装できます
つまり、Elementorを使用すると、WordPressテーマを簡単にカスタマイズできます。 数十のファイルと数百のコード行を苦労して変更する代わりに、すべてをXNUMXか所ですばやく行うことができます。
結論
そこにそれがある ！ Page BuilderElementorを使用してWordPressテーマをカスタマイズする方法を示すこの記事は以上です。 そこへの行き方について懸念がある場合は、内でお知らせください commentaires.
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
それが終わったら、 お申し込み & プレビュー。 この時点では何も表示されません（ページには何もないため）が、Elementorに今後この投稿のデータを使用するように指示します。 これが何を意味するかすぐにわかります。
