21. Page Builder by SiteOriginで複雑なレイアウトを実現する

投稿日: カテゴリー: Page Builder by SiteOriginWordPressプラグイン

固定ページでメニューや社員紹介ページなど、画像やボタンを自由に配置したいときに便利なプラグインをご紹介します。

それは、Page Builder by SiteOriginというプラグインです。

このように、画像やボタンを配置したり、背景に色を付けたり、工夫次第でいろいろなレイアウトが実現できます。

25

この作業の基本的な考え方
rowで入れ物をつくり、その中にWidgetを配置します。

まずはプラグインをインストール

Page Builder by SiteOriginSiteOrigin Widgets Bundleの2つのプラグインをインストールします。

管理画面の「プラグイン > 新規追加」から、検索してインストールしてください。

投稿画面から作業を始めます

「Page Builder」タブをクリックします。
02

「row」をクリックし、レイアウトを作ります。
03

(1)で列を指定します。(2)で各列の幅を決めます。(3)は、実際に変更してみてください。
04

レイアウトがきまったら、「Insert」ボタンを押します。すべての作業は、青いボタンを押して確定させます。
05

編集したいエリアをクリックし、「Add Widget」ボタンを押します。
06

画像を入れたいので、「SiteOrigin Image」をクリックします。
07

「Edit」をクリックします。
08

画像を選択します。その他、いろいろ指定できるので試してみてください。編集が終わったら青いボタン「Done」を押します。
09

プレビューするとこのように表示されます。
10

編集したいエリアをクリックし、「Add Widget」ボタンを押します。
11

文章を入れたいので、「SiteOrigin Editor」をクリックします。
12

「Edit」をクリックします。
13

文章を入れます。余計な改行が入ってしまう場合は、「エディタ」タブをクリックして、改行を削除します。また、この部分は、テーマのCSSが影響するので、レイアウトが崩れる場合は、タイトル欄は空白にします。
14

プレビューするとこのように表示されます。
15

次にボタンを追加するので、編集したいエリアをクリックします。中に「SiteOrigin Editor」が入っているので、エリアの端っこをクリックします。

そして、「Add Widgets」ボタンを押します。
16

「Edit」をクリックします。
18

ボタンに入れる文字と、ボタンをクリックした時のURLを入れます。ボタンの色などもここから変えられるので、余裕が出たら、赤枠以外の部分の設定も試してください。
19

プレビューするとこのように表示されます。
20

次に、今まで作ったエリアの背景色を変えます。背景に画像を設定することもできます。

全体の背景を変えたいので、レンチのアイコンをクリックし、「Edit Row」をクリックします。
21

右側の「Dsign」から、色や画像を設定します。
22

プレビューするとこのように表示されます。
23

上下左右に余白が欲しいので、先ほど背景色を変更した画面で「Layout」を選択し、Paddingに数字を入れます。10から30ぐらいでしょうか。単位はpxを選択します。
24

プレビューするとこのように表示されます。
25

メニューなどを作る時は、このエリアを複製して中身を変えると便利です。レンチのアイコンをクリックし、「Duplicate Row」をクリックします。
26

複製されます。
27

プレビューするとこのように表示されます。
28

最後に、「公開」ボタンを押して公開します。

ちなみに、レイアウトをもっとなんとかしたい、という時は、CSSで調整します。

Chromeでサイトを開いて、右クリック、「検証」から、CSSを調べて設定するので、細かい設定まで完璧にとなると、CSSの知識も必要になります。
29

初心者でもできる ワードプレスレッスン

自分でホームページを作りたい方へ
東京都内でマンツーマンの個人レッスンを行なっております。
マンツーマンだから、確実に作業が進められます。

こんな方にご利用いただいています
自分でワードプレスを使ったホームページを作りたい女性起業家様
制作会社で作ってもらったワードプレスサイトを強化したい社長様
アフィリエイトで副収入を得たい会社員のお客様

21. Page Builder by SiteOriginで複雑なレイアウトを実現する” への2件のフィードバック

  1. Editor 内でHTMLコメントアウトを使って保存すると、受け側のタグ(–>)が消失してしまい、レイアウトが崩れてしまいます。。。対処法ご存知でしょうか?

コメントを残す