Google chrome(グーグル ク...
続きを読む
Hello Elementorの使い方【Elementor公式ワードプレステーマ】
Elementor公式ワードプレステーマ「Hello Elementor」でWEBサイトを作る方法と制作例を紹介します!
誰でも無料で使えるWordPressのページビルダープラグイン「Elementor」。
見出しやテキスト、画像やボタンなどの様々な要素をブロックのように組み合わせることで簡単にプロ級のWEBサイトやブログを作成することができます。
今回は、2025年のElementor「web.fwrd」(商品や企画の発表会)でも紹介された新しいワードプレステーマ「Hello Biz」についてその特徴や「Hello」テーマとの違い、使い方を詳しくご紹介します。
特にElementorを使ってWEBサイトやコーポレートサイトを作成している方は必見の内容です!👀
「Hello Biz」テーマは、Elementorが新たに発表した無料のワードプレステーマです。
様々な業種やカテゴリで使える異なる8つのテンプレートから作成することもでき、素早く簡単にホームページを作成することが可能です。
Elementor Proや専用プラグインを使わずにヘッダーとフッターを作成でき、お問合せフォームまでテーマに含まれています!
Hello Bizテーマには、あらかじめテーマにセットされているウィジェット(要素)が5つあります。
ヒーローウィジェットは、ユーザーが初めにサイトを訪れた時に、一番に目に入る大きな画像の部分です。
デフォルトでフル幅の画像が設定できるようにセットアップされており、テンプレートを使う場合も画像を差し替えるだけで簡単に設定できます。
「Hello Biz」テーマでは、Elementorの無料版では使うことができなかった、「フォーム」機能を使えます!
お問合せや見積もりなど、顧客との重要な接点とな「お問合せフォーム」の設置もシンプル&簡単です。
ジグザグ ウィジェットは、その名の通り「ジグザグ」にコンテンツを交互レイアウトで整理して設置することができるウィジェットです。
サービスや商品の紹介など、複数のものを一つのウィジェットで掲載することができるので、とても便利です。
CTAとは「Call to Action(コール・トゥ・アクション)」の略で、サイトを見たユーザーが商品や問い合わせなど、何らかのアクションをしてもらうために重要な要素です。
CTAをシンプル且つ目立つように設置することで、商品の購入や問い合わせの増加に繋げることができます。
ヘッダーとフッターがテーマに含まれているのも「Hello Biz」テーマの大きな特徴の一つです。
Elementor Proを使わずに無料で簡単にヘッダーとフッターを作成することができます!
お問合せフォームやヘッダー・フッターなど、Elementor Proの使用や専用のプラグインとの併用をしなければならなかった機能が搭載されているので、サイト制作のスピードが格段に上がります!
Elementorを使っている方(もしくは使った事がある方)であれば、Helloテーマとの使い分けは気になるところではないでしょうか😌
今回は筆者が実際に「Helloテーマ」と「Hello Bizテーマ」どちらも使ってわかった違いを紹介したいと思います。
Hello BizテーマがHelloテーマと大きく異なる点の一つは、「テーマの中に機能が搭載されているかどうか」です。
Helloテーマは、テーマとは言いながらもテンプレートなどを何も使わなければ全くの白紙状態から全て自分でセットアップしていく必要があります。
Hello Bizテーマは、既に用意された選べるテンプレートや、ビジネスのサイトに特化したウィジェット(お問い合わせフォームやCTAなど)があらかじめ機能として含まれているので、簡単に素早くサイトを作ることが可能です。
・企業サイト等に特化したウェブサイトを短時間で作成したい人
・デザインにあまり時間をかけたくない人
・自由なデザインで、オリジナルのウェブサイトを作りたい人
・クライアントやご自身の希望に合わせてカスタマイズしたい人
Elementorの新しいテーマ「Hello Biz」は、企業やお店などのウェブサイトを作成する際に素早く簡単にウェブサイトを作成できるテーマです。
一方で、まだテンプレートの数も9つと少なく、日本語対応もしていない(2025年1月現在)ため、100%希望に合ったサイトを作成するには今後のアップデートに期待したいところです。
「Helloテーマ」は自身で設定、カスタマイズさえすればほぼほぼイメージ通りのウェブサイトやブログを作成することができます。
もしよろしければweblemonで紹介している「Hello Elementorの使い方」も合わせてご覧ください👀
Elementor公式ワードプレステーマ「Hello Elementor」でWEBサイトを作る方法と制作例を紹介します!
ここからは実際に「Hello Bizテーマ」のインストール方法と使い方について解説していきます!
↑ワードプレスのメニューから「外観」→「テーマ」をクリックし、画面上部の「新しいテーマを追加」をクリックします。
↑画面右上の「テーマを検索」部分で「Hello Biz」と入力します。
「Hello Biz」が表示されたら、「インストール」をクリックし、その後「有効化」もクリックしてテーマを有効化します。
↑テーマを有効化すると、上の画像のような画面になります。(「Welcome to Hello Biz!」と表示されています。)
「Bigin Setup」というボタンが表示されるので、このボタンをクリックします。
↑「Welcome! Let’s create your website.」と表示されたら、中央にある「Start building my website」というボタンをクリックします。
↑Hello Bizテーマには9種類のテンプレートキットが用意されています。(2025年1月現在)
好みのテンプレートをクリックすると、そのテンプレートのデモと詳細を確認することができます。
↑テンプレートをクリックすると、右上に「Apply Kit」というボタンが表示されるので、ここをクリックします。
↑「Apply Juice Bar?(Juice Barはこのテンプレートの名前)」と表示されるので、テンプレートを適用する場合は「Apply All」をクリックします。
※既にコンテンツ(固定ページや投稿)がある場合、このテーマに上書きされてしまうので、後から変更する場合は注意が必要です。
↑上記の画像なような画面で「Congratulations, you’ve・・・」と表示されればテーマの設定は完了しです!
下の「Customize my site」をクリックするとテンプレートの中身を編集することができます。
↑テーマをインストールすると、ワードプレスのメニューに「Hello Biz」が追加されます。
テーマのページやウィジェットの内容はこの画面から全て設定することができます。
↑「Quick links」の箇所でサイトの名前やロゴ、カラー、フォントの設定ができます。
また、その下の「Site Parts」「Recent Pages」「General」でヘッダーやフッター、固定ページなどの編集が可能です。
Hello Bizテーマをインストールしたら、あとは自分の好みにサイトをカスタマイズしていきます。
今回は例として「Juice Bar」というテンプレートを使って、カフェのWEBサイトを作っていきたいと思います。
全て解説すると膨大な量になってしまうため、今回はサイト設定とヘッダー、フッターの設定方法について紹介します。
↑まず初めに、サイトの名前、ロゴ、ファビコンを登録します。
登録したら「変更を保存」を忘れずにクリックします。
↑次にヘッダーを設定していきます。
ヘッダーの編集画面で「スタイル」を選択した状態で「Site Identify」を開きます。
「Align logo」ではロゴの位置(左端、もしくは中央)を設定できます。
「Logo Width」ではロゴの大きさを調整できます。
↑ヘッダーの背景色は、「Box」を選択した状態で「色」という箇所から変更・設定できます。
↑メニューの文字の色は、「Navigation」を選択した状態で「Text Color」という箇所から変更・設定できます。マウスオーバーした時の色や選択されている状態の色も設定可能です。
↑フッターの設定も行なっていきます。
フッターの編集画面から「スタイル」を選択した状態で「Brand」をクリックします。
「Logo」の「Width」でフッター内のロゴの大きさを調整できます。
また、「Description」の「Text Color」では文字の色を設定することが可能です。
↑フッターの背景色は、「Box」を選択し「色」から変更することができます。
ロゴや文字色とのコントラストを意識した色に設定することが重要です。
今回の記事では、Elementorの新テーマ「Hello Biz」について特徴とインストール方法、そして初期設定についてご紹介しました。
Hello Bizテーマのサイト自体のカスタマイズ方法については、詳しい解説記事を近々公開予定ですので、もしよければweblemonをぜひブックマークしてお待ちください!
weblemonではElementorに関する記事もたくさんご用意していますので、ぜひこちらもご覧ください〜!👀⭐️
ワードプレスやWEB制作界隈で近年急速に耳にするようになった「Elementor(エレメンター)」とは何?? 詳しく紹介します!
Elementorでウェブサイトやブログを運営している人必見!!2024年最新のElementorにおすすめなプラグインを紹介します。
2025-02-15
Saturday
20代後半のWEBマーケター&WEBデザイナー
新卒で商社に入社しWEBマーケターとして勤務後、
カナダに渡航し現地企業のWEB制作と
マーケティング支援を行う。
現在は帰国し某企業でWEBマーケターをしています。
自分がWEBマーケター・WEBデザイナーとして
仕事をしているときに気になった事を
調べた経緯を残しておきたいなという思いと、
それを誰かのお悩み解決に
役立てることができたらいいなと思っています。
“ネコとレモンのWEBマーケ&デザインブログ”
みたいな感じで覚えてもらえたら嬉しいです😺🍋
Google chrome(グーグル ク...
続きを読むWebマーケターへの転職コースがある「マ...
続きを読む