การสร้าง CTA แบบสไลด์ด้วยการตั้งค่าการจัดแนวแถวและแอนิเมชั่นของ Divi

ทุกสัปดาห์ เรามอบชุดเค้าโครง Divi ใหม่และฟรีให้คุณ ซึ่งคุณสามารถใช้สำหรับโครงการต่อไปของคุณได้ สำหรับชุดเลย์เอาต์ชุดใดชุดหนึ่ง เรายังแชร์กรณีการใช้งานที่จะช่วยให้คุณยกระดับเว็บไซต์ของคุณไปอีกระดับ ในสัปดาห์นี้ โดยเป็นส่วนหนึ่งของการริเริ่มการออกแบบ Divi ที่กำลังดำเนินอยู่ เราจะแสดงวิธีสร้าง CTA แบบสไลด์อินด้วยการตั้งค่าการจัดตำแหน่งแถวและแอนิเมชั่นของ Divi โดยใช้ Cleaning Company Layout Pack

เพื่อช่วยดึงสิ่งนี้ออก เราจะเริ่มต้นด้วยการลบแอนิเมชั่นทั้งหมดที่มีอยู่แล้ว ด้วยวิธีนี้ เราสามารถเน้นคำกระตุ้นการตัดสินใจที่เลื่อนเข้ามา

ไปกันเถอะ!

ดูตัวอย่าง

มาดูตัวอย่างที่แตกต่างกันสามตัวอย่างที่เราจะพูดถึงในโพสต์นี้:

อัพโหลดหน้า Landing Page บริษัททำความสะอาด

เพิ่มหน้าใหม่ & เปลี่ยนเป็น Visual Builder

ตามที่กล่าวไว้ก่อนหน้านี้ เราจะใช้ Cleaning Company Layout Pack เพื่อสร้างบทช่วยสอนนี้ แต่อย่าลังเลที่จะใช้วิธีนี้กับเว็บไซต์ใดๆ ที่คุณกำลังสร้าง เพิ่มหน้าใหม่ ป้อนชื่อหน้าของคุณและสลับไปที่ Visual Builder ทันที

อัพโหลดหน้า Landing Page บริษัททำความสะอาด

เมื่อดำเนินการแล้ว คุณจะเห็นสามตัวเลือกปรากฏขึ้นบนหน้าจอของคุณ คุณสามารถเริ่มสร้างตั้งแต่เริ่มต้น เลือกเค้าโครงที่สร้างไว้ล่วงหน้า หรือโคลนหน้าที่มีอยู่ เลือกตัวเลือกที่สอง

ค้นหา Cleaning Company Layout Pack เลือกเค้าโครงหน้า Landing Page และอัปโหลดไปยังหน้าของคุณ

การลบการตั้งค่าแอนิเมชั่นทั้งหมดบนเพจ

ค้นหาส่วนในหน้า

เมื่อเลย์เอาต์ถูกอัปโหลดไปยังเพจของคุณแล้ว ให้ไปที่ส่วนต่อไปนี้

ลบแอนิเมชั่น

เปิดการตั้งค่าและลบภาพเคลื่อนไหวที่มีอยู่แล้ว

ขยายสไตล์ไปยังทุกส่วน

เพื่อเป็นการประหยัดเวลา เราจะขยายรูปแบบแอนิเมชั่นนี้ไปยังองค์ประกอบการออกแบบทั้งหมดบนหน้า เราจะเริ่มต้นด้วยส่วนต่างๆ ในหน้าเว็บของเราโดยคลิกขวา เลือก 'ขยายรูปแบบแอนิเมชั่น' ทำให้ใช้กับทุกส่วนทั่วทั้งหน้าและคลิกที่ 'ขยาย'

ขยายสไตล์ไปยังทุกแถว

ทำซ้ำขั้นตอนเดิม แต่ให้นำไปใช้กับแถวทั้งหมดทั่วทั้งหน้าแทน

ขยายสไตล์ไปยังทุกโมดูล

สุดท้ายนี้ ให้นำไปใช้กับทุกโมดูลในหน้าด้วย

การสร้าง CTA #1

เพิ่มแถวใหม่

ที่ตั้ง

มาเริ่มสร้าง CTA แบบสไลด์อินแรกกันเลย! เพิ่มแถวใหม่ที่ด้านล่างของส่วนต่อไปนี้:

โครงสร้างคอลัมน์

เลือกโครงสร้างคอลัมน์ต่อไปนี้สำหรับแถวที่คุณเพิ่งเพิ่ม:

การจัดแนวแถว

เราจะดันแถวไปทางซ้ายเพื่อช่วยสร้างเอฟเฟกต์การเลื่อนเข้า

• การจัดแนวแถว: ซ้าย

ขนาด

เราจะลดความกว้างของแถวด้วย

• ใช้ความกว้างที่กำหนดเอง: ใช่
• กำหนดความกว้าง: 500px

ระยะห่าง

และเพื่อกำจัดพื้นที่สีขาวที่ไม่จำเป็น ให้ถอดช่องว่างด้านบนและด้านล่างของแถวออก

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มโมดูลการเรียกร้องให้ดำเนินการ

เพิ่มสำเนา

ตอนนี้เราสามารถเพิ่ม Call to Action Module ได้แล้ว! เพิ่มเนื้อหาที่เลือก

เพิ่มลิงค์

เพิ่มลิงก์ไปยังโมดูล CTA ของคุณต่อไป หากคุณยังไม่มีลิงก์สำหรับเปลี่ยนเส้นทาง คุณสามารถป้อน '#' ได้ หากไม่เพิ่มข้อมูลลงในช่องนี้ คุณจะไม่สามารถเห็นปุ่มได้ ดังนั้นโปรดอย่าเว้นว่างไว้

ลบสีพื้นหลัง

โมดูล CTA มีสีพื้นหลังเป็นค่าเริ่มต้น ไปข้างหน้าและลบออกในการตั้งค่าพื้นหลัง

คัดลอกส่วนไล่ระดับ

เปิดส่วนที่มีพื้นหลังไล่ระดับสีน้ำเงิน คลิกขวาและคัดลอกการตั้งค่าโดยไม่ต้องเปลี่ยนแปลงอะไร

วางการไล่ระดับสีในโมดูล CTA

วางพื้นหลังการไล่ระดับสีนี้บนโมดูล CTA

การตั้งค่าข้อความชื่อเรื่อง

เปิดการตั้งค่าโมดูล CTA อีกครั้ง ไปที่การตั้งค่าข้อความชื่อและทำการเปลี่ยนแปลงบางอย่างเพื่อให้ตรงกับชุดเค้าโครง:

• แบบอักษรของชื่อเรื่อง: Ubuntu
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• ขนาดข้อความของชื่อเรื่อง: 24px (เดสก์ท็อปและแท็บเล็ต), 16px (โทรศัพท์)
• ความสูงของบรรทัดชื่อเรื่อง: 1.2em

การตั้งค่าข้อความเนื้อหา

เปลี่ยนน้ำหนักแบบอักษรของร่างกายด้วย

• น้ำหนักแบบอักษรของร่างกาย: กึ่งหนา

การตั้งค่าปุ่ม

เปลี่ยนการตั้งค่าปุ่มถัดไป

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 18px
• สีข้อความของปุ่ม: #557df3
• สีพื้นหลังของปุ่ม: #FFFFFF
• ความกว้างของขอบปุ่ม: 10px
• สีเส้นขอบของปุ่ม: #FFFFFF
• รัศมีเส้นขอบของปุ่ม: 0px
• แบบอักษรของปุ่ม: Ubuntu
• น้ำหนักแบบอักษร: ตัวหนา

ระยะห่าง

เพิ่มช่องว่างภายในของโมดูลด้วย

• ช่องว่างภายในด้านบน: 80px
• ช่องว่างภายในด้านล่าง: 80px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

ชายแดน

จากนั้น เพิ่มรัศมีเส้นขอบบนขวาและล่างขวาในการตั้งค่าเส้นขอบ

• ขวาบน: 100px
• ล่างขวา: 100px

กล่องเงา

เพื่อสร้างความลึกมากขึ้น เราจะเพิ่มเงาของกล่องที่ละเอียดอ่อน

• ความแรงของกล่องเงาเบลอ: 71px
• ความแรงของการกระจายเงาของกล่อง: -5px

แอนิเมชั่น

สุดท้ายแต่ไม่ท้ายสุด ให้โมดูล CTA ของคุณมีเอฟเฟกต์แอนิเมชั่น

• ทิศทางของแอนิเมชั่น: ขวา
• ความเข้มของแอนิเมชั่น: 100%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
• ภาพเคลื่อนไหวความเร็ว Curve: เชิงเส้น

การสร้าง CTA #2

โคลน CTA #1 แถว & ทำการเปลี่ยนแปลง

โคลนโรว์

ในการสร้างตัวอย่างที่สอง ให้ดำเนินการต่อและโคลนแถวแรก

ลากไปที่ Section

เลื่อนลงมาที่หน้าแล้ววางสำเนาไว้ที่นี่:

ลบส่วนเสริมด้านบน

เปิดการตั้งค่าของส่วนที่คุณใส่แถวและลบช่องว่างภายในด้านบนออก

• ช่องว่างภายในด้านบน: 0px

ลบส่วนรัศมีขอบซ้ายบน

ไปที่การตั้งค่าเส้นขอบถัดไปและลบรัศมีขอบด้านซ้ายบนด้วย

ลบรัศมีขอบขวาบนของ CTA

จากนั้นเปิดโมดูล CTA และลบรัศมีขอบขวาบนเพื่อให้ส่วนและโมดูลผสมผสานกัน

เปลี่ยนแอนิเมชั่น

สำหรับ CTA แบบสไลด์นี้ เราจะใช้แอนิเมชั่นอื่น อย่าลังเลที่จะเล่นกับตัวเลือกแอนิเมชั่นอื่นๆ เช่นกัน

• ทิศทางของแอนิเมชั่น: ศูนย์
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
• ภาพเคลื่อนไหวความเร็ว Curve: เชิงเส้น

การสร้าง CTA #3

โคลน CTA #1 แถว & ทำการเปลี่ยนแปลง

โคลนโรว์

ในการสร้างตัวอย่างสุดท้าย เราจะทำการโคลนแถวอีกครั้ง

ลากไปที่ Section

วางสำเนาในส่วนต่อไปนี้:

เปลี่ยนการจัดแนวแถว

เปิดการตั้งค่าแถวของโมดูลและเปลี่ยนการจัดตำแหน่งไปทางขวา

• การจัดแนวแถว: ขวา

ลบพื้นหลังไล่ระดับสี CTA

ลบพื้นหลังไล่ระดับของโมดูลด้วย

ใช้สีพื้นหลังแทน

ใช้สีพื้นหลังแทน

• สีพื้นหลัง: #f2835a

เปลี่ยนสีข้อความของปุ่ม

เพื่อให้เข้ากับสีพื้นหลัง ให้เปลี่ยนสีข้อความของปุ่มด้วย

• สีข้อความของปุ่ม: #f2835a

ลบรัศมีเส้นขอบ CTA

เรากำลังเปลี่ยนโมดูล CTA ให้เป็นสี่เหลี่ยมจัตุรัสโดยลบรัศมีขอบทั้งหมดที่ได้รับ

เปลี่ยนแอนิเมชั่น

เปลี่ยนการตั้งค่าภาพเคลื่อนไหวต่อไป

• ทิศทางของแอนิเมชั่น: ลง
• ความเข้มของแอนิเมชั่น: 100%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
• ภาพเคลื่อนไหวความเร็ว Curve: เชิงเส้น

ลบส่วนเสริมด้านล่าง

สุดท้ายแต่ไม่ท้ายสุด เราจะดันโมดูลไปที่ด้านล่างของส่วนโดยลบช่องว่างด้านล่างของส่วนที่วางไว้ เท่านี้ก็เสร็จเรียบร้อย!

• ช่องว่างภายในด้านล่าง: 0px

ดูตัวอย่าง

มาดูตัวอย่างสุดท้ายของ CTA แบบสไลด์อินที่เราสร้างขึ้น

ความคิดสุดท้าย

ในโพสต์นี้ เราได้แสดงวิธีสร้าง CTA แบบสไลด์อินโดยใช้ Divi's Cleaning Company Layout Pack เราเริ่มต้นด้วยการนำแอนิเมชั่นที่มีอยู่แล้วบนหน้าออก หลังจากนั้น เราได้สร้าง CTA แบบสไลด์อินสามรายการเพื่อดึงดูดความสนใจ โพสต์ในบล็อกนี้เป็นส่วนหนึ่งของโครงการริเริ่มการออกแบบ Divi ที่เราพยายามใส่บางสิ่งลงในกล่องเครื่องมือการออกแบบของคุณทุกสัปดาห์ หากคุณมีคำถามหรือข้อเสนอแนะใด ๆ โปรดแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง!