部品集の利用方法

部品集の使い方
部品はセクション単位に用意しました。

使いたい部品は1度だけ部品番号(セクション)単位で
①ライブラリー(図書館)に保存してください。
②使いたいページにライブラリーから1クリックで読み込めます。

 

*DIVIは文字・文字間・行間・余白・パディングすべて1ピクセル単位で微調整できるシステムです。

 

※今後新しくGWPDで用意した部品も部品集ページをサイトに読み込むことで利用できる様になっています(先に参加しても損はありません)

部品1(ヘッダー・インパクトキャッチ)

【セクション内部品構成】

行1
(文字部品)
(ボタン部品)

行2
(トグル部品)
(文字部品)

*行2に表示している画像はトグル行の背景を設定しています。

*行2画像内の文字は文字を上方向に表示位置(パディング)をずらしています。

<具体数値>
上部パディング数値
パソコンとタブレット = 45ピクセル
スマホ = 35ピクセル

*開発内部を見ていただくとよく分かります。

ホームページ
制作チャレンジ

制作のすべてをリアルタイムで公開中

ワードプレス制作

多少の無料ブログ経験の知識でも大丈夫です。

小学6年生でもやる気があればできる難易度です。

制作の様子もリアルタイムで公開中です。
それをご覧になりながら、できそうかご判断できます。

🔻

コロナ以降挑戦者が
急増しています。
チェンレンジして
技術も身に付けて!

部品2(ヘッダー:全面画像スライダー)

クーポン

クーポン

クーポン

部品3(商品横スクロール)

変更依頼等はこちらの確認番号とイメージまたは、参考になる画像、やURLをお伝えください。

 

部品4(仕切りタイトル)

 

 

ヴィンテージ古着

古着販売 商品情報

ヴィンテージ古着販売・買取店

部品4-2(仕切りタイトル)

キャッチコピー(H2)

リードコピー(H4)

補足説明

部品5(Flip ボックス)

 

 

部品5-2(Cubeボックス)

 

 

部品6(タイトルバナー)

人気サービス(H4)

人気商品(H4)

定番商品等(H4)

この美味さ 癖になる。

部品7(タイトル+サブタイトル+文)

 

 

H2タイトル

H3サブタイトル

テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト

部品7-2(4列ブロック)レスポンシブ

 

 

4列−1(H4)

この部品はレスポンシブデザインのDIVIで作った部品です。

*CSSは使っていません。
*きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。

4列−2(H4)

この部品はレスポンシブデザインのDIVIで作った部品です。

*CSSは使っていません。
*きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。

4列−3(H4)

この部品はレスポンシブデザインのDIVIで作った部品です。

*CSSは使っていません。
*きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。

4列−4(H4)

この部品はレスポンシブデザインのDIVIで作った部品です。

*CSSは使っていません。
*きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。

部品7-3(3列ブロック)レスポンシブ

3列−1(H4)

この部品はレスポンシブデザインのDIVIで作った部品です。

*CSSは使っていません。
*きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。

3列−2(H4)

この部品はレスポンシブデザインのDIVIで作った部品です。

*CSSは使っていません。
*きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。

3列−3(H4)

この部品はレスポンシブデザインのDIVIで作った部品です。

*CSSは使っていません。
*きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。

部品7-4(2列ブロック)レスポンシブ

 

 

2列−1(H4)

この部品はレスポンシブデザインのDIVIで作った部品です。

*CSSは使っていません。
*きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。

2列−2(H4)

この部品はレスポンシブデザインのDIVIで作った部品です。

*CSSは使っていません。
*きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。

部品7-5(1列ブロック)レスポンシブ

 

 

1列−1(H4)

この部品はレスポンシブデザインのDIVIで作った部品です。

*CSSは使っていません。
*きめ細かな微調整が可能ですので、ご自分のサイトに合わせたボックスに生まれ変わらせてください。

部品8(Hタグ+1列ブロック)

表題(H3)

DIVIはGoogleが提案するマテリアルデザインを簡単に再現する事が出来るワードプレス専用ツールです。

操作は画面でイメージを確認しながら直感的に情報入力する事が可能です。

その上、GWPDのテーマでは、Google検索で上位表示するための内部構造で作られていますので、画像・キャッチコピー・文章の修正と、文字間・行間・文字の大きさ・色合いなどを微調整するだけで、Google検索で上位表示するための条件を整えたホームページが出来上がります。

部品9(タブ)
タイトル
多種多様の用途にご利用下さい。

色などきめ細かな変更ができます。

多種多様の用途にご利用下さい。

色などきめ細かな変更ができます。

多種多様の用途にご利用下さい。

色などきめ細かな変更ができます。

多種多様の用途にご利用下さい。

色などきめ細かな変更ができます。

部品10(アコーディオン)

 

 

タイトル
あなたのタイトルはここに入ります
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
あなたのタイトルはここに入ります>
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
あなたのタイトルはここに入ります>
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
あなたのタイトルはここに入ります>
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
部品11(空き番)

 

 

スマホでも改行しない
1行表示部品
(ここから)

確認12(4-1非レスポンシブ・メニュー・バナー)

 

 

4列1-1部品

4列1-2部品

4列1-3部品

4列1-4部品

確認12-2(4-1非レスポンシブ・フルワードバナー)

 リンク先は自由に設定できます。

・POPUPで魅力的に表示できます。
・Youtube動画(ページから外にでません)
・商品販売ページ
など

 

バナー部品
(h3)

バナー部品
(h3)

バナー部品
(h3)

バナー部品
(h3)

確認12-3(3-1非レスポンシブ)

 

 

バナー部品
(h3)

バナー部品
(h3)

バナー部品
(h3)

確認12-4(2-1非レスポンシブ)

 

 

バナー部品
(h3)

バナー部品
(h3)