① ブロークンレイアウト | No Code Style

自動再生
オートコンプリート

前回の講義完了して続行

Elementorデザイン講座

メインビジュアル（MV）

① ブロークンレイアウト (11:30)
② ロゴを活かしたMV (8:20)
③ テキストに背景色を入れたMV (9:20)
④ 背景に動きのあるスライドショーを入れたMV (4:34)
⑤ ブロークンレイアウト２ (19:03)
⑥ 背景に動画を活用したMV (10:20)
⑦ マスクを活用したMV (10:41)
⑧ サブテキストを左下に配置したMV (22:19)
⑨ 画像がMVをはみ出すデザイン (13:40)

コンテンツ

① 2カラムのベーシックなコンテンツデザイン (12:08)
② 背景画像を大きく活用したデザイン (8:08)
③ コンテンツメニュー (10:44)
④ お問い合わせセクション (14:07)
⑤ ブロークンレイアウトコンテンツ (23:29)
⑥ 背景オーバーレイを活かしたデザイン (9:44)
⑦ 画像を大きく活用した2カラムコンテンツ (15:43)
⑧ ⑦をブロークンレイアウトに派生したデザイン (6:27)
⑨ 動くアイコンを活用したコンテンツ (8:28)
⑩ ブロークンレイアウトのコンテンツ (15:04)

見出しデザイン

① 英語と日本語を重ねた見出し (6:12)
② グラデーション見出し（コードあり） (7:39)
③ スライドアニメーションを付けた見出し (6:51)
④ 蛍光マーカーを付けた見出し (5:24)
⑤ 短いアンダーラインを付けた見出し (7:11)
⑥ グラデーション見出し（ノーコード） (6:48)
⑦ 円で囲んだ見出し (11:23)
⑧ イラストを活用した見出し (12:17)
⑨ タグ風見出し (8:20)

ボタンデザイン

① シンプルなボタンデザイン (5:08)
② 立体的なボタンデザイン (8:38)
③ テキスト型ボタン（アニメーション付） (9:20)

ステップフロー

① ベーシックなステップフロー (12:22)

ヘッダー

① スクロールで表示（Elementor pro版） (11:43)
② スクロールで表示（Header & Footer Bilder） (11:52)
③ 上部固定表示（Heder & Footer Bilder） (6:26)
④ MVの中にヘッダーを表示 (9:02)
⑤ オフキャンバスメニュー（Heder & Footer Bilder） (10:27)

フッター

① お問い合わせを下部に固定表示 (18:21)
② コーポレートサイト向けデザイン (16:07)

アニメーション

スクロールダウン (11:25)

Teach online with

① ブロークンレイアウト

完了して続行