วิธีสร้าง CTA ที่ “ขยาย” เช่น ธีมที่หรูหรา

เผยแพร่แล้ว: 2017-05-14

ธีมที่หรูหราเพิ่งเปลี่ยนการออกแบบเว็บไซต์เพื่อรวมคุณสมบัติบางอย่างที่ควรค่าแก่การเลียนแบบ ในโพสต์ก่อนหน้านี้ ฉันเขียนเกี่ยวกับวิธีใช้การออกแบบบล็อกของธีมที่สง่างามและทำซ้ำเมนูหลัก แต่สำหรับโพสต์นี้ ฉันจะแสดงวิธีทำซ้ำคำกระตุ้นการตัดสินใจ (CTA) ของ Elegant Themes CTA นี้ตั้งอยู่ที่ด้านล่างใกล้กับส่วนท้ายของเว็บไซต์ Elegant Themes ความพิเศษของ CTA นี้คือฟังก์ชันเพิ่มเติมที่ทริกเกอร์แอนิเมชันเมื่อผู้ใช้เลื่อนไปที่องค์ประกอบ

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

มาเริ่มกันเลย.

การใช้การออกแบบด้วย Divi

การสร้างคำกระตุ้นการตัดสินใจโดยใช้ Code Module

ใช้ Visual Builder เพิ่มส่วนปกติใหม่ที่มีคอลัมน์แถวเต็มความกว้าง

ถัดไปเพิ่ม Code Module ลงในแถวของคุณ

ภายใต้การตั้งค่ารหัสทั่วไป เพิ่ม html ต่อไปนี้ในส่วนเนื้อหา 

<div class="cta-info">

<h3>401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web</h3>

<p>We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!</p>

<a href="ENTER URL HERE" id="sign">Sign Up Today</a>

</div>

html นี้จะทำหน้าที่เป็นเนื้อหาสำหรับ CTA ของคุณ คุณจะสังเกตเห็นพาดหัว CTA หลักอยู่ในแท็ก h3 พาดหัวย่อยอยู่ในแท็ก p มาตรฐาน และลิงก์ (จะเป็นปุ่มเร็วๆ นี้) มี CSS ID ชื่อ "สัญลักษณ์"

นอกจากนี้ยังมี div ที่มีคลาส "cta-info" ล้อมรอบเนื้อหาด้วย นี่เป็นสิ่งสำคัญสำหรับการจัดแต่งทรงผมในภายหลัง

บันทึกการเปลี่ยนแปลง

ตอนนี้เราต้องเพิ่มรหัส CSS ใหม่ในส่วนใหม่ของคุณ คลิกไอคอนการตั้งค่าส่วนเพื่อเปิดการตั้งค่าส่วน

ใต้แท็บ CSS ในการตั้งค่าส่วน เพิ่ม CSS ID “ส่วน cta” และบันทึกการเปลี่ยนแปลงของคุณ

ต่อไปเราต้องเพิ่ม CSS ID ในแถวของคุณ คลิกที่ไอคอนการตั้งค่าแถว

ภายใต้แท็บ CSS ให้อัปเดตการตั้งค่าแถวด้วยรหัส CSS ใหม่ที่เรียกว่า "cta-row"

บันทึกการเปลี่ยนแปลง

นั่นคือทั้งหมดที่เราต้องการสำหรับเลย์เอาต์ของ CTA ด้วยเนื้อหาของเราและ CSS ID เราพร้อมที่จะเพิ่ม CSS ที่กำหนดเอง

การเพิ่ม CSS แบบกำหนดเอง

ไปที่ Divi → Theme Customizer → CSS เพิ่มเติม (หรือคุณสามารถอัปเดตไฟล์ style.css ของธีมลูกได้โดยตรง) ภายในกล่องโค้ด ให้เพิ่ม CSS ต่อไปนี้: 

/* Animated Call To Action */

/*** style CTA section and row when waypoint is not triggered ***/
#cta-section {
    padding: 0 80px;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
}
#cta-row {
    margin: 80px auto 0 auto;
    padding: 80px 0;
    max-width: 100%;
    background-color: #6c17dc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0px 10px 50px #939fa9;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;

}
/*** Style CTA section and row once waypoint toggles animate-cta class ***/
#cta-section.animate-cta {
    padding: 46px 0 66px 0;
    overflow: hidden;
}
.animate-cta #cta-row {
    margin: 0 auto 0 auto;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    background-color: #4843d2;
    width: inherit;
}
/*** style button ***/

#sign {
    display: inline-block;
    width: 246px;   
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    background-color: #f92c8b;
    padding: 20px 40px;
    margin-top: 30px;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -webkit-transition: all .8s ease;
    box-shadow: 0px 5px 20px #231f92;
    -moz-box-shadow: 0px 5px 20px #231f92;
    -webkit-box-shadow: 0px 10px 50px #231f92;
}
#sign:hover {
    background-color: #2cc2e6;
    box-shadow: 0px 20px 80px #1b1867;
    -moz-box-shadow: 0px 20px 80px #1b1867;
    -webkit-box-shadow: 0px 20px 80px #1b1867;
}

/*** style content within the code module ***/

.cta-info{
    color: #fff;
    text-align: center;
    margin: 0 auto !important;
    max-width: 1080px;
    padding: 50px;
}
.cta-info h3 {
    color: #fff;
    font-size: 35px;
    line-height: 1.3em;
}

ตอนนี้ CTA ของคุณเริ่มที่จะดูเป็นส่วนหนึ่ง สิ่งที่เราต้องทำคือเพิ่มสคริปต์สั้น ๆ เพื่อให้ CTA มีเอฟเฟกต์แอนิเมชั่นที่สะดุดตาเมื่อ CTA ปรากฏในวิวพอร์ตของเบราว์เซอร์ของคุณเมื่อเลื่อน

การเพิ่มสคริปต์ Waypoint เพื่อทำให้ CTA เคลื่อนไหวเมื่อเลื่อนไปที่ Element

วิธีที่ง่ายที่สุดวิธีหนึ่งในการทริกเกอร์ฟังก์ชันเมื่อคุณเลื่อนไปที่องค์ประกอบบนหน้าเว็บคือการใช้ไลบรารี JavaScript ที่เรียกว่า Waypoints เนื่องจาก Divi มาพร้อมกับ Waypoints ที่ติดตั้งไว้แล้ว (ใช่แล้ว!) สิ่งที่เราต้องทำคือรวมสคริปต์ที่ใช้ไลบรารี

ไปที่ Divi → ตัวเลือกธีม → การรวมและวางสคริปต์ต่อไปนี้ในส่วน "เพิ่มโค้ดที่ส่วนหัวของบล็อกของคุณ"

<script>
jQuery(document).ready(function(){
	jQuery('#cta-section').waypoint(function() {
		jQuery('#cta-section').toggleClass('animate-cta');
	}, {offset: '80%'});
});
</script>

สคริปต์นี้กำลังเพิ่มฟังก์ชันที่จะสลับคลาสที่เรียกว่า “animate-cta” เมื่อคุณเลื่อนไปที่ส่วน CTA (ด้วย CSS ID “cta-section”) สังเกตส่วนของโค้ดที่กำหนดออฟเซ็ตเป็น 80% ซึ่งหมายความว่าฟังก์ชันจะถูกเรียกใช้เมื่อส่วนบนของส่วน CTA อยู่ที่ 80% จากด้านบนของหน้าต่างเบราว์เซอร์ หากคุณต้องการหน่วงเวลาให้ฟังก์ชันทริกเกอร์เมื่อ CTA ไปถึงตรงกลางหน้า คุณสามารถเปลี่ยนค่าออฟเซ็ตเป็นค่าประมาณ 50% อย่างไรก็ตาม หาก CTA ของคุณจะอยู่ที่ด้านล่างสุดของหน้า คุณควรคงค่าไว้ใกล้กับ 80% – 90% เนื่องจาก CTA ของคุณอาจไม่ถึงกลางหน้าต่างเบราว์เซอร์ของคุณเมื่อเลื่อน ดังนั้นจะไม่ถูกทริกเกอร์

แค่นั้นแหละ!

ทีนี้มาดูโครงการที่เสร็จแล้วกัน

การเพิ่มฟังก์ชัน CTA ให้กับโมดูลอื่นๆ

หากคุณต้องการเพิ่มฟังก์ชัน CTA นี้ให้กับโมดูลอื่นๆ ภายใน Divi Builder การดำเนินการนี้ค่อนข้างง่าย นี่คือขั้นตอนในการเริ่มต้น:

  1. สร้างส่วนมาตรฐานที่มีแถวเต็มความกว้าง (คอลัมน์เดียว)
  2. ในการตั้งค่าส่วน ภายใต้ CSS ให้เพิ่ม CSS ID “cta-section”
  3. ในการตั้งค่าแถว ภายใต้ CSS ให้เพิ่ม CSS ID “cta-row” และเพิ่มคอลัมน์ CSS Class “cta-column”
  4. แทรก CSS ที่กำหนดเองต่อไปนี้:
    5.  .cta-column.et_pb_column:last-child {
 margin: 0 auto;
 margin-right: auto !important;
 max-width: 1080px;
 float: none;
}
  5. เพิ่มโมดูลใดๆ ที่คุณต้องการลงในแถว (เช่น โมดูลการเรียกร้องให้ดำเนินการ) และจัดรูปแบบตามนั้น คุณอาจต้องการเพิ่มพื้นหลังโปร่งใสให้กับโมดูลของคุณเพื่อไม่ให้ทับสีพื้นหลังของส่วน CTA ของคุณ

หมายเหตุสำคัญ: คุณไม่สามารถเพิ่ม CTA ได้มากกว่าหนึ่งรายการด้วยฟังก์ชันนี้ต่อหน้า

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

CTA ของชุดรูปแบบที่ซ้ำกันเป็นคุณลักษณะที่มีประโยชน์สำหรับโครงการในอนาคต มันดึงดูดความสนใจของผู้อ่านโดยไม่เอาแต่ใจจนเกินไป การใช้ Code Module ช่วยให้นักพัฒนามีความยืดหยุ่นมากขึ้นในการเพิ่ม html ที่กำหนดเองภายใน CTA และฟังก์ชันแอนิเมชั่นเวย์พอยท์ไม่ได้จำกัดอยู่แค่โมดูลโค้ดเท่านั้น คุณยังสามารถเพิ่ม CSS ID ที่จำเป็นให้กับส่วน แถว และคอลัมน์ใดๆ เพื่อสร้าง CTA ด้วยโมดูลใดก็ได้โดยใช้ Divi Builder

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็นด้านล่าง

ไชโย!