Page Builder by SiteOriginを使ってテンプレートを作る

スポンサーリンク

別サイト用のテンプレート

プラグイン「Page Builder by SiteOrigin」を使ってオリジナルの記事ページテンプレートを作ってみました。
左に記事を書込むテキストウィジェットを作ります。右には「img」用のウィジェットを用意します。 左右の比率は「Golden(0.618)」にしてみました。

左は記事を二つの段落に分ける為、テキストウィジェットを2段にしています。
右には商品の画像や、記事の内容が伝わるイメージの画像でもいいでしょう。
画像にはキャプションを付けるとそれっぽく見えます。

ここまでの「Page Builder by SiteOrigin」の設定画面が下です。
*この画像は「center」にしないと、何故か崩れてしまいます。

unknownbridge 2017.03.02

ここは巾いっぱいのテキストウィジェットです。
ボーダーを入れてみましたが反映されいるか心配でしたが大丈夫でした。
パディングを設定しないと左右が窮屈そうですので「左右を10px」にしました。

下は左右に均等に分けて画像を挿入。imgウィジェットを使わずテキストウィジェットに <img src="">で入れてみました。

あとがき

右側、下のバナーの「padding-bottom」が設定できないようです。

「Page Builder by SiteOrigin」を使った投稿ページのカスタマイズ。
まあ、こんなもんでしょうか?

最終的な「Page Builder by SiteOrigin」のレイアウトが下の画像です。

コメント

  1. 田中 より:

    こんにちは! 質問させてください!

    サイトオリジンを使って作ったボタンなどは保存して使いまわす事はできますか?

    あとボタンの幅を一定にしたいのですがどうすれば良いのか分かりません。お手数ですがぜひ回答の方をお願いします!

  2. 管理人 より:

    SiteOriginButtonで作ったボタンは画像データでは無いので使い回しはできないようですね。
    幅についてはサイズの設定でWidthの数値を統一するといいと思います。