今回はSWELLで境界線を波線にする方法と３カラムにする方法を解説します。
境界線を波線にして３カラムにしよう
トップページをおしゃれにしたいな
SWELLではセクション区切りを波線や斜め線にすることができます。
また画像を横に並べると可視性もよくデザインも垢抜けます。
こんなイメージです
フルワイドセクション・３カラム
①フルワイドセクションを入れたい場所のすぐ上のセクションを選択します
②画面上の「+」ボタンをクリックする
左側メニューから「フルワイド」を選択します。
フルワイドが入った場合はうすいグレーの背景となります。
①タイトルを入力します（ここでは簡単バナーというタイトルを入れました）
②「+」ボタンをクリックしてショートカットメニューを表示し「カラム」を選択します。
（ショートカットメニューにない場合は「すべて表示」を押して左側メニューから探してください）
「+」が３つ並んで３カラムの枠ができました。
カラムの中に「バナーリンク」を設置し画像とテキストを配置します。
それぞれ画像とテキストを配置してみました。
３つの画像の大きさを揃えることがきれいに配置させるポイントです。
セクション区切りを波線にする
波線にしたいセクションを選択し右側メニューから「上部の境界線の形状」から「波」を選び高さレベルを好みの数値に設定します
波線にしたいセクションを選択し右側メニューから「下部の境界線の形状」から「波」を選び高さレベルを好みの数値に設定します
出来上がりイメージはこちら
実際に実装したイメージはこちらからご覧いただけます
https://xs116105.xsrv.jp/swell/#nami
メルマガ登録
ただいま50歳から起業したわたしの体験談PDFをプレゼント中！
47歳で離婚後、どうやってフリーランスとして収入を得ることができているか？
その秘密を覗いてみませんか？
まずは下のバナーをクリックしてください。
LINEお友達登録はこちら
LINEでは１対１で会話ができます。
ホームページを検討している、現在のホームページから集客ができない、インスタグラムを伸ばしたいなどのお悩みならどうぞお気軽にお問い合わせくださいね。
ワードプレス単発レッスン
初心者向けのワードプレス単発レッスンです。ここがどうしてもわからないなど30分〜レッスンいたします。
コメントを投稿するにはログインしてください。