Beaver Builderの教科書、はじめます。
私は、2006年頃から仕事としてウェブ制作を始め、これまで中小企業やNPOなどのウェブサイト、会員向けサイトやショッピングサイトなど、（ちゃんと数えていませんが）200以上のウェブサイトを構築してきました。
2015年頃からは、ほぼ全てのサイトをWordpressベースで作成、1人でデザインから構築までやることもあれば、2〜3人のチームで制作することもあり、その中でいかに効率よく、また納品後もお客さんが運用・更新しやすいウェブサイトの仕組みはどのようなものか、考え続けてきました。
そんな中で出会ったのが「Beaver Builder」
確か、初めて使ったのは2015年頃、当時は現在に比べれば機能も少なく、使い勝手もイマイチでしたが、それでもパワーポイントで画面を構成していくようにドラッグ&ドロップでウェブページを作成することができる感覚は、とても可能性を感じました。
以降、Beaver Builderを使い続け、現在はほぼ全ての案件で導入しています。
当サイトでは、これまで培ってきたBeaver Builderの構築ノウハウの全てを詰め込んでいきます。
- WordPressでサイト制作をすることは多いけどイマイチ生産性が上がらないとお悩みの方
- フリーランスウェブデザイナーでコーディングに苦手意識を持っている方
- 納品後、クライアント側で更新できる（投稿だけではなく固定ページもヘッダーもフッターも！）ウェブサイトを提案したい方
のお役に立てるような情報を書いていきたいと思います。
今後予定している記事の内容
BeaverBuilderの紹介
導入編
- 購入から利用までの流れ
- プラグインのダウンロードとインストール手順、ライセンス登録
- テーマのダウンロードとインストール手順
- BeaverBuilderとの連携で有効活用できるおすすめプラグイン
- BeaverBuilderの初期設定（グローバル設定）
- 基本編に入る前に、サイトマップに合わせてページを作成する
基本編
- BeaverBuilderの起動方法
- BeaverBuilderの基本的な更新の流れ
- Beaver Builderは行・カラム（列）・モジュールでページを構成していく
- カラム（列）の配置と設定
- レスポンシブ対応（スマホ・タブレット・PC）の手順
- カラムのネスト（入れ子）で複雑なレイアウトを実現
- モジュール（要素）の配置と設定
- マージンとパディングの設定
- 実用的なよく使うモジュールの紹介
- リビジョン、ヒストリー機能の活用
- モジュール、カラム、行の保存、グローバル設定で一元管理
- 設定やスタイルのエクスポートとインポート
- テンプレート保存とテンプレートの適用
- Breakpoint設定でデバイス毎の表示切り替え対応
- conditional logicで複雑な条件分岐（事例紹介：会員制サイト）
- アニメーションの設定
- box-shadowや角丸の指定
- 拡張されたWordpress”カスタマイズ”機能
- Themer Layoutsでヘッダー、フッター、アーカイブページの管理
- カスタム投稿タイプの作成と表示
- カスタムフィールドプラグイン「Advanced Custom Fields」との連携
- 投稿モジュールのカスタマイズ
- ページ単位で反映するCSS/Javascriptを設定、サイト全体に反映されるCSS/Javascriptを設定
- PHPファイルの読み込み
- 背景動画の作成と活用
- レスポンシブ対応されたYouTubeの埋め込み
- Beaver Builderでカスタムアイコンセットを追加する方法
実践編（商品カタログコンテンツのあるコーポレートサイトを作成してみよう）
- WordPressのインストール・初期設定とレンタルサーバの設定
- 固定ページ、カスタム投稿タイプで必要なページの作成
- カスタムフィールドの作成・設定
- Themer Layoutsでヘッダー、フッター、アーカイブ、シングル、404ページの作成
- グローバルナビゲーション、フッターメニューの作成
- ヘッダー、フッターの作り込み
- HOMEコンテンツの作成
- 下層ページの作成とテンプレート機能の活用
- 会員だけが閲覧できる会員限定コンテンツの作成と設定
- フォームプラグイン「MW WP FORM」の導入と注意点
- 投稿の新着情報にNEWマークをつける
- 開発環境（サブドメイン）から本番環境への移行方法
トラブルシューティング・その他
- WordPressのセキュリティ対策
- サイト公開時に確認しておくべき各種設定
- WordPressのインストールディレクトリと公開ディレクトリを変更する
