iT邦幫忙

2021 iThome 鐵人賽

DAY 28
2
Modern Web

30天以設計+切版實作(Adobe XD、Bootstrap 5)系列 第 28

【設計+切版30天實作】|Day28 - CTA區塊 - 超快速切出簡約CTA,讓使用者註冊起來!!

前面完成了「Plans」區塊,今天來完成「CTA」的區塊。

https://ithelp.ithome.com.tw/upload/images/20211010/201394896oNENmeOvz.png

數據收集

CTA的樣式

https://ithelp.ithome.com.tw/upload/images/20211010/20139489IoK6SNQu3B.png

https://ithelp.ithome.com.tw/upload/images/20211010/20139489UCiFZSww0h.png

https://ithelp.ithome.com.tw/upload/images/20211010/20139489r1topUmWar.png

  • Background-color:$Primary
  • Padding-y:96px
  • 標題與input各佔6欄會比較好喔

標題的樣式

https://ithelp.ithome.com.tw/upload/images/20211010/20139489SiigIwzxqk.png

  • Font-weight:Normal
  • Font-size:24px
  • Text-color:$Secondary

Input的樣式

https://ithelp.ithome.com.tw/upload/images/20211010/20139489ekzAYMrxBC.png

  • Border:$Secondary 1px
  • Spacer:16px

https://ithelp.ithome.com.tw/upload/images/20211010/20139489ZwkWL3KcAI.png

  • Padding:12px 176px 12px 24px

Placeholder的樣式

https://ithelp.ithome.com.tw/upload/images/20211010/20139489wi6t99o2EW.png

  • Font-weight:Regular
  • Font-size:16px
  • Text-color:$Secondary 60%

Button的樣式

https://ithelp.ithome.com.tw/upload/images/20211010/20139489IPlaOsvesl.png

https://ithelp.ithome.com.tw/upload/images/20211010/20139489nUM09Q8dkk.png

  • Background-color:$Secondary
  • Font-weight:Medium
  • Font-size:16px
  • Text-color:$Primary

步驟

先開一個新區塊 ,加入container

  1. 一樣先新增section ,設定背景顏色為bg-primary ,以及padding
  2. 標題與input都在container裡面,所以在section裡新增containerrowcol-6
<section class="bg-primary py-10">
	  <div class="container">
	    <div class="row">
				<div class="col-6"></div>
			</div>
	  </div>
</div>

加入並設定標題

  1. col-6裡新增<h4>和標題內容
  2. 加上標題的顏色text-primarfw-normal
  3. 由於標題有兩行,所以加入<br>讓第二句換行
<div class="col-6">
    <h4 class="text-secondary fw-normal">
        現在註冊會員, 
        <br>
        即享首月免費試用,立即註冊吧!
    </h4>
</div>

加入並設定input

  1. col-6裡新增d-flexalign-items-center ,讓input與btn可以水平置中

  2. 在div裡面新增input 和 btn

  3. 設定input的樣式:py-3ps-6bg-transparentborderborder-secondaryme-5 ,新增style去設定寬度60%

  4. 設定placeholder的內容

  5. 設定btn的樣式:btn-secondaryborder-1py-3px-8text-primaryfw-medium

    雖然本身btn沒有border,但因為要跟input的高度一樣,所以再加上一個border給它,不然會差2px喔!

    <div class="col-6 d-flex align-items-center">
        <input class="py-3 ps-6 me-5 bg-transparent border border-secondary " style="width: 60%;" type="text" placeholder="email : gtmate@email.com">
        <button class="py-3 px-8 btn btn-secondary border-1 text-primary fw-medium ">立即註冊</button>  
    </div>
    

登登登登,CTA的區塊就完成啦!明天繼續來切下一個區塊吧 (๑´ㅂ`๑)

https://ithelp.ithome.com.tw/upload/images/20211010/201394890ZqWJYL0Dr.png

https://ithelp.ithome.com.tw/upload/images/20211010/20139489P52mnR0vE6.png


上一篇
【設計+切版30天實作】|Day27 - Plans區塊 - 怎麼做出背景陰影?原來陰影還可以調數據!
下一篇
【設計+切版30天實作】|Day29 - Footer區塊 - 切出最後一步,看似不起眼但必須存在的footer
系列文
30天以設計+切版實作(Adobe XD、Bootstrap 5)30

1 則留言

0
juck30808
iT邦新手 3 級 ‧ 2021-10-12 18:34:17

恭喜即將完賽!!!

烙詩 iT邦新手 5 級 ‧ 2021-10-14 09:50:34 檢舉

謝謝你~~~~~XDD

我要留言

立即登入留言