6 Microinteractions ที่จะทำให้ไซต์ Divi ของคุณสนุกสนานยิ่งขึ้น (บทช่วยสอน + ดาวน์โหลดฟรี)

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

วันนี้ฉันจะแสดงให้คุณเห็น microinteractions ง่ายๆ ที่คุณสามารถเพิ่มลงในเว็บไซต์ Divi ของคุณโดยใช้ Divi Builder และ Custom CSS (ไม่มี jquery) ฉันจะเน้นไปที่องค์ประกอบที่ผู้ใช้โต้ตอบด้วยตามปกติ เช่น ปุ่ม ไอคอน รูปภาพ

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ ของ microinteractions ที่เราจะสร้างในบทช่วยสอนนี้

#1 ปรับขนาดรูปภาพบน Hover

เริ่มสร้าง Microinteraction #1

#2 ไอคอนเลื่อนเด้งเด้ง

เริ่มสร้าง Microinteraction #2

#3 หมุนไอคอนแจ้งความและปุ่มบน Hover

เริ่มสร้าง Microinteraction #3

#4 ไอคอนปุ่มเลื่อนเพื่อแสดงและซ่อนข้อความปุ่ม

เริ่มสร้าง Microinteraction #4

#5 การหมุนมุมมองภาพ 3 มิติ

เริ่มสร้าง Microinteraction #5

#6 ไมโครอินเทอร์แอคชันของตัวเลื่อนปุ่ม

เริ่มสร้าง Microinteraction #6

สมัครสมาชิกช่อง Youtube ของเรา

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น สิ่งที่คุณต้องมีคือ Divi เราจะเป็นตัวอย่างของเราตั้งแต่ต้นโดยใช้ Divi Builder ที่ส่วนหน้า

ดาวน์โหลดไฟล์สำหรับ Easy Access

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

ดาวน์โหลด

#1 ปรับขนาดรูปภาพบน Hover

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

ไปข้างหน้าและสร้างส่วนใหม่ที่มีแถวสามคอลัมน์เพื่อให้เราสามารถเพิ่มแต่ละตัวอย่างของเราในแต่ละคอลัมน์

การปรับขนาดภาพเมื่อวางเมาส์ไว้โดยใช้โมดูลภาพ

ในการเพิ่ม microinteraction ของรูปภาพที่ปรับขนาดให้กับรูปภาพโดยใช้โมดูลรูปภาพ ก่อนอื่นให้เพิ่มโมดูลรูปภาพในคอลัมน์แรก

จากนั้นเพิ่มรูปภาพลงในโมดูลที่คุณเลือก

ถัดไป เพิ่มคลาส CSS ต่อไปนี้ภายใต้แท็บขั้นสูงในการตั้งค่ารูปภาพของคุณ:

คลาส CSS: scale-image

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

/**This scales the image in the image module with the CSS class "scale-image" **/
.scale-image {
  overflow:hidden;
}
.scale-image img{
 transition: all 0.2s;
}
.scale-image:hover img {
  transform: scale(1.3)
}

ตอนนี้ตรวจสอบผลลัพธ์

ปรับขนาดรูปภาพโมดูล Blurb บน Hover

ในการเพิ่มเอฟเฟกต์เดียวกันกับรูปภาพในโมดูลการนำเสนอ ขั้นแรกให้เพิ่มโมดูลการนำเสนอลงในคอลัมน์ที่สอง

จากนั้นเพิ่มรูปภาพที่คุณเลือกลงในโมดูลการนำเสนอ

จากนั้นเพิ่มคลาส CSS ต่อไปนี้ในโมดูลการนำเสนอ

CSS Class: มาตราส่วน Blurb-image

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

/**This scales the image in the bl module with the CSS class "scale-blurb-image" **/

.scale-blurb-image .et_pb_main_blurb_image {
  overflow:hidden;
}
.scale-blurb-image .et_pb_main_blurb_image img {
  transition: all 0.2s;
}
.scale-blurb-image .et_pb_main_blurb_image:hover img {
  transform: scale(1.3);
}

นี่คือผลลัพธ์

ปรับขนาดภาพโมดูลบุคคลบน Hover

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

จากนั้นเพิ่มคลาส CSS ต่อไปนี้ในโมดูลบุคคล

CSS Class: มาตราส่วน-บุคคล-รูปภาพ

ตอนนี้เปิดการตั้งค่าหน้าและเพิ่ม CSS ที่กำหนดเองต่อไปนี้

/**This scales the image in the person module with the CSS class "scale-person-image" **/

.scale-person-image .et_pb_team_member_image {
  overflow:hidden;
}
.scale-person-image img {
  transition: all 0.2s;
}
.scale-person-image img:hover {
  transform: scale(1.3);
}

ตรวจสอบผลลัพธ์ของทั้งสามโมดูลด้วย microinteraction ของภาพการปรับขนาด

#2 ไอคอนเลื่อนเด้งเด้ง

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

นี่คือวิธีการทำ

ขั้นแรกให้เพิ่มส่วนเต็มความกว้างใหม่ด้วยโมดูลส่วนหัวแบบเต็มความกว้าง

จากนั้นอัปเดตสิ่งต่อไปนี้:

การวางแนวข้อความและโลโก้: ศูนย์
แสดงปุ่มเลื่อนลง: ใช่
ไอคอน: [เลือกไอคอนที่ต้องการ]

จากนั้นเพิ่มคลาส CSS ต่อไปนี้:

CSS Class: bounce-scroll-icon

คลาสนี้จะช่วยให้เราสามารถกำหนดเป้าหมายไอคอนเลื่อนด้วย css เพื่อทำให้ไอคอนเคลื่อนไหวตามค่าเริ่มต้นในการโหลดหน้าเว็บ

จากนั้นทำซ้ำโมดูลส่วนหัวแบบเต็มและอัปเดตคลาส CSS เป็นดังต่อไปนี้:

CSS Class: เด้ง-เลื่อน-ไอคอน-โฮเวอร์

คลาสนี้จะช่วยให้เราสามารถกำหนดเป้าหมายไอคอนเลื่อนด้วย css เพื่อทำให้ไอคอนเคลื่อนไหวเมื่อวางเมาส์ไว้

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

.bounce-scroll-icon-hover .et-pb-icon {
  position: absolute;
  top:-10px;
  left:0;
  right:0;
}
.bounce-scroll-icon-hover .et-pb-icon:hover {
  animation-duration: 2s;
  animation-name: bounce;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: all .2s;
}

.bounce-scroll-icon .et-pb-icon {
  position: absolute;
  top:-10px;
  left:0;
  right:0;
  animation-duration: 2s;
  animation-name: bounce;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: all .2s;
}
.bounce-scroll-icon .et-pb-icon:hover {
  animation-name: none;
}

@keyframes bounce {
      0%   {top: -10px; opacity: 1;}
    50%  {top: 15px; opacity:0;}
    100% {top: -10px;opacity:1;}
}

ตรวจสอบผลลัพธ์ของทั้งสองตัวอย่าง ไอคอนเลื่อนส่วนหัวด้านบนจะเคลื่อนไหวตามค่าเริ่มต้น และไอคอนเลื่อนส่วนหัวด้านล่างจะเคลื่อนไหวเมื่อวางเมาส์เหนือ

#3 ไอคอนหมุนบน Hover

การเพิ่มการหมุนเล็กน้อยให้กับไอคอนอาจเป็นไมโครอินเทอร์แอคชันที่มีประสิทธิภาพในการดึงดูดให้ผู้ใช้คลิกองค์ประกอบ เนื่องจากโมดูล Divi ยอดนิยมสองโมดูลที่มีไอคอนในตัวคือโมดูลปุ่มและโมดูลการนำเสนอ ฉันคิดว่าฉันจะแสดงวิธีเพิ่มการหมุนให้กับไอคอนเหล่านั้นเมื่อโฮเวอร์

การหมุนไอคอนปุ่มบน Hover

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

หากต้องการหมุนไอคอนปุ่มบนโฮเวอร์ ขั้นแรกให้เพิ่มส่วนใหม่ที่มีแถวหนึ่งคอลัมน์ จากนั้นเพิ่มโมดูลปุ่มในแถว

จากนั้นอัปเดตการตั้งค่าปุ่มดังนี้:

ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: NO
ไอคอนปุ่ม: [เลือกไอคอนที่ต้องการ]

จากนั้นเพิ่มคลาส CSS ต่อไปนี้:

CSS Class: ปุ่มหมุนไอคอน

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

/** This rotates the button icon on hover for the button module with the CSS class "rotate-button-icon" **/
.rotate-button-icon:after {
transform: rotate(-90deg);
}

.rotate-button-icon:hover:after {
transform: rotate(0deg);
}

การดำเนินการนี้จะหมุนไอคอนทวนเข็มนาฬิกา 90 องศาในตอนแรก แล้วจึงกลับไปเป็น 0 องศาเมื่อโฮเวอร์

นี่คือผลลัพธ์

การหมุนไอคอนโมดูล Blurb

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

ใช้ไอคอน: ใช่
ไอคอน: [เพิ่มไอคอนที่เลือก]
การวางแนวข้อความ: center
CSS Class: หมุน-blurb-icon

ตอนนี้เพิ่ม Custom CSS ต่อไปนี้ในการตั้งค่าเพจ:

/** This rotates a blurb icon with the css class "rotate-blurb-icon" **/

.rotate-blurb-icon .et-pb-icon {
  transition:  0.2s ease-out;
  transform: rotateZ(-90deg);
}

.rotate-blurb-icon .et_pb_blurb_content:hover .et-pb-icon {
  transform: rotateZ(0deg);
}

นี่คือผลลัพธ์

นอกจากนี้ยังใช้งานได้กับไอคอนที่วางอยู่ทางด้านซ้ายของชื่อ สิ่งที่คุณต้องทำคืออัปเดตการตั้งค่าการนำเสนอดังนี้:

ตำแหน่งรูปภาพ/ไอคอน: ซ้าย
ความสูงของบรรทัดหัวเรื่อง: 1.7em

ตรวจสอบผลลัพธ์

#4 ไอคอนปุ่มเลื่อนเพื่อแสดงและซ่อนข้อความปุ่ม

ปุ่มข้อความเป็นไอคอนบน Hover

microinteraction นี้แสดงข้อความปุ่มพร้อมไอคอนตามค่าเริ่มต้น แล้วย้ายไอคอนเพื่อปิดข้อความเมื่อวางเมาส์เหนือ

นี่คือวิธีการทำ

เพิ่มส่วนใหม่ด้วยแถวหนึ่งคอลัมน์ จากนั้นเพิ่มโมดูลปุ่มในแถวและอัปเดตการตั้งค่าปุ่มต่อไปนี้:

ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
สีพื้นหลังของปุ่ม: #0c71c3
ความกว้างของเส้นขอบของปุ่ม: 0px
สีไอคอนปุ่ม: #ffffff
CSS Class: ปุ่มข้อความเป็นไอคอน

ตอนนี้เพิ่ม CSS ที่กำหนดเองต่อไปนี้ในการตั้งค่าหน้า:

/** This styles button to cover button text with icon on hover when button has class "button-text-to-icon" **/

body #page-container .et_pb_button.button-text-to-icon:after {
  width: 1em;
  transition: all .3s !important;
  margin-left: 0;
  border-left: 1px solid #dddddd;
  left: calc(100% - 1em);
}

body #page-container .et_pb_button.button-text-to-icon:hover:after {
  border-left: 1px solid transparent;
  left: calc(50% - 0.5em);
  transform: scale(1.3);
}

body #page-container .et_pb_button:hover:after {
    color: #ffffff;
    margin-left: 0px;
    left: 0;
    width: 100%;
    text-align: center;
    transform: scale(1.5);
}

ตอนนี้ตรวจสอบผลลัพธ์

ไอคอนปุ่มเป็นข้อความบน Hover

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

สีข้อความของปุ่ม (ค่าเริ่มต้น): #0c71c3
สีข้อความของปุ่ม (โฮเวอร์): #ffffff

จากนั้นแทนที่คลาส CSS ด้วยสิ่งต่อไปนี้:

CSS Class: ปุ่มไอคอนเป็นข้อความ

จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในการตั้งค่าหน้า:

/** This styles button to reveal button text from icon on hover when button has class "button-text-to-icon" **/

body #page-container .et_pb_button.button-icon-to-text:after {
    width: 1em;
    transition: all .3s !important;
    margin-left: 0;
  border-left: 1px solid transparent;
      left: calc(50% - 0.5em);
    transform: scale(1.3);
}

body #page-container .et_pb_button.button-icon-to-text:hover:after {
  border-left: 1px solid #dddddd;
    left: calc(100% - 1em);
  transform: scale(1);
}

ตอนนี้ตรวจสอบผลลัพธ์

#5 การหมุนมุมมองภาพ 3 มิติ

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

นี่คือวิธีการทำ

ขั้นแรก ให้สร้างส่วนใหม่ที่มีแถวสามคอลัมน์ จากนั้นเพิ่มโมดูลรูปภาพลงในคอลัมน์ 1 และเพิ่มรูปภาพลงในโมดูลรูปภาพที่คุณเลือก

สำหรับเอฟเฟกต์นี้ เราสามารถเพิ่ม CSS ที่กำหนดเองลงในโมดูลได้โดยตรง ไปที่แท็บขั้นสูงและเพิ่ม CSS ที่กำหนดเองต่อไปนี้ภายใต้องค์ประกอบหลัก:

องค์ประกอบหลัก CSS (ค่าเริ่มต้น):

transform: perspective(700px) rotateY(45deg);
transition: all .2s;

CSS นี้ทำสองสิ่งกับรูปภาพของเราโดยใช้คุณสมบัติ Transform CSS ขั้นแรก จะเพิ่มเปอร์สเปคทีฟ 700px ซึ่งเป็นระยะระหว่างรูปภาพกับเปอร์สเปคทีฟของผู้ใช้เมื่อดูหน้าเว็บ CSS ยังเพิ่มการหมุนให้กับรูปภาพอีกด้วย การหมุน Y(45deg) จะหมุนรูปภาพบนแกน Y 45 องศา (ตามเข็มนาฬิกา) และด้วยเปอร์สเปคทีฟที่ลงตัว รูปภาพจึงมีรูปลักษณ์สามมิติ

องค์ประกอบหลัก CSS (โฮเวอร์):

transform: perspective(700px) rotateY(0deg);

การดำเนินการนี้จะทำให้การหมุนของรูปภาพเมื่อวางเมาส์ไว้นั้นดูปกติเพื่อให้ผู้ใช้ได้ดูภาพที่ดีขึ้น

ทีนี้มาดูผลลัพธ์กัน

ลองทำตัวอย่างเพิ่มเติมของไมโครอินเทอร์แอคชันนี้กัน ไปข้างหน้าและคัดลอกโมดูลรูปภาพแล้ววางในคอลัมน์ 2 และคอลัมน์ 3 ในโมดูลรูปภาพที่ซ้ำกันในคอลัมน์ 2 ให้อัปเดต CSS ที่กำหนดเองดังนี้:

องค์ประกอบหลัก CSS (ค่าเริ่มต้น):

transform: perspective(700px) rotateX(45deg);
transition: all .2s;

องค์ประกอบหลัก CSS (โฮเวอร์):

transform: perspective(700px) rotateX(0deg);

สังเกตความแตกต่างเพียงอย่างเดียวที่นี่คือตัวอักษร "X" หลัง "หมุน" สิ่งนี้บอกให้รูปภาพหมุนบนแกน x ที่ 45 องศา จากนั้นเราตั้งค่าระดับเป็น 0 เมื่อโฮเวอร์เพื่อให้กลับมาเป็นปกติ

นี่คือผลลัพธ์

ในโมดูลรูปภาพที่ซ้ำกันในคอลัมน์ 3 ให้อัปเดต Custom CSS ดังนี้:

องค์ประกอบหลัก CSS (ค่าเริ่มต้น):

transform: perspective(700px) rotateY(-45deg);
transition: all .2s;

องค์ประกอบหลัก CSS (โฮเวอร์):

transform: perspective(700px) rotateY(0deg);

สังเกตว่าความแตกต่างเพียงอย่างเดียวระหว่าง CSS นี้กับ CSS ที่ใช้ในรูปภาพในคอลัมน์ 1 คือค่า "-45deg" สิ่งนี้จะหมุนรูปภาพบนแกน Y ทวนเข็มนาฬิกา

นี่คือผลลัพธ์สุดท้ายของ microinteractions ของภาพทั้งสามโดยใช้เปอร์สเปคทีฟและการหมุน

อย่าลืมเพิ่มเอฟเฟกต์โฮเวอร์และการออกแบบในตัวให้มากขึ้นโดยใช้การตั้งค่าในตัวของโมดูลรูปภาพ ตัวอย่างเช่น นี่จะเป็นสถานที่ที่ยอดเยี่ยมในการเพิ่มเอฟเฟกต์เงาของกล่องด้วย

#6 ไมโครอินเทอร์แอคชันของตัวเลื่อนปุ่ม

สำหรับไมโครอินเทอร์แอกชันสุดท้ายนี้ เราจะสร้างตัวเลื่อนปุ่มที่แสดงข้อมูลเพิ่มเติม (ที่จริงแล้วเป็นปุ่มใหม่ทั้งหมด) บนโฮเวอร์ แนวคิดพื้นฐานคือการกำหนดให้คอลัมน์ของคุณมีความสูงที่กำหนดเอง จากนั้นจึงซ้อนโมดูลปุ่มสองปุ่มภายในคอลัมน์ ปุ่มด้านบนจะเป็นสิ่งที่ผู้ใช้เห็นโดยค่าเริ่มต้น แต่ปุ่มที่สองจะเป็นปุ่มที่มี "ข้อมูลเพิ่มเติม" ซึ่งผู้ใช้จะเห็นเมื่อวางเมาส์เหนือปุ่ม

นี่คือวิธีการสร้าง

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

สร้างส่วนใหม่ด้วยแถวหนึ่งคอลัมน์ จากนั้นเพิ่มโมดูลปุ่มในแถวและอัปเดตการตั้งค่าปุ่มต่อไปนี้:

ข้อความปุ่ม: “ดาวน์โหลด”

การจัดตำแหน่งปุ่ม: ศูนย์
ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
สีข้อความของปุ่ม: #ffffff
สีพื้นหลังของปุ่ม: #0c71c3
ความกว้างของขอบปุ่ม: 0px
รัศมีเส้นขอบของปุ่ม: 0px
ไอคอนปุ่ม: ดูภาพหน้าจอ
สีไอคอนปุ่ม: #ffffff
ตำแหน่งไอคอนปุ่ม: ซ้าย
แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: NO

มาร์จิ้นที่กำหนดเอง: 0px ด้านล่าง

ถัดไป ทำซ้ำปุ่มที่คุณเพิ่งสร้างขึ้นเพื่อให้กองที่ซ้ำกันอยู่ใต้ปุ่มที่คุณเพิ่งสร้างขึ้น จากนั้นอัปเดตการตั้งค่าปุ่มที่ซ้ำกันดังนี้:

ข้อความปุ่ม: MP3(3.5 mb)

สีข้อความของปุ่ม: #0c71c3
สีพื้นหลังของปุ่ม: #ffffff
ไอคอนปุ่ม: ดูภาพหน้าจอ
ปุ่มไอคอนสี: #0c71c3

ก่อนที่เราจะจัดรูปแบบแถวของเรา เราต้องเพิ่มคลาส CSS ที่ปุ่มบนสุด เปิดการตั้งค่าปุ่มด้านบนและเพิ่มคลาส CSS ต่อไปนี้:

CSS Class: ปุ่มบน

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

กำหนดความกว้าง: 200px
คลาส CSS ของคอลัมน์: ปุ่มเลื่อน

ตรวจสอบให้แน่ใจว่าได้เพิ่มคลาส CSS ลงในคอลัมน์ ไม่ใช่แถว

ตอนนี้เราพร้อมที่จะเพิ่ม CSS ที่กำหนดเองแล้ว เปิดการตั้งค่าหน้าและเพิ่ม CSS ต่อไปนี้:

/** This styles the slider button **/

.slider-button {
  height: 50px;
  overflow:hidden;
  border:2px solid #0c71c3;
}

.slider-button .et_pb_button {
  display:block;
  margin: 0 !important;
}

.slider-button:hover .top-button {
  margin-top: -48px !important;
}

CSS นี้จะทำงานกับปุ่มที่ขนาดเริ่มต้นเท่านั้น เนื่องจากเราต้องกำหนดความสูงให้กับคอลัมน์เพื่อซ่อนปุ่มที่สองจนกว่าจะวางเมาส์เหนือ ตอนนี้ความสูงของคอลัมน์ (ด้วยคลาส "ปุ่มตัวเลื่อน") มีความสูง 50px บัญชีนี้สำหรับเส้นขอบ 2px ที่กำหนดให้กับคอลัมน์ด้วย เมื่อวางเมาส์เหนือปุ่มบนสุด (ที่มีคลาส “ปุ่มบนสุด” จะถูกย้ายขึ้นจากมุมมองโดยมีระยะขอบบน -48px (ความสูงของปุ่มลบด้วยเส้นขอบ 2px อันใดอันหนึ่ง) แต่ถ้าคุณเปลี่ยนฟอนต์- ขนาดหรือช่องว่างภายในของปุ่ม คุณจะต้องปรับความสูงของคลาสปุ่มตัวเลื่อนพร้อมกับระยะขอบของปุ่มบนสุดตามลำดับ

นี่คือผลลัพธ์สุดท้าย

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

ดาวน์โหลดฟรี: รับ Premade Layout และไฟล์ CSS สำหรับบทช่วยสอนนี้

หากคุณต้องการเริ่มต้นอย่างรวดเร็วว่า microinteractions เหล่านี้จะมีลักษณะอย่างไรบนเว็บไซต์ของคุณ คุณสามารถดาวน์โหลดไฟล์ zip ด้านล่าง เมื่อคุณดาวน์โหลดไฟล์ zip แล้ว ให้ค้นหาไฟล์ในฮาร์ดไดรฟ์ของคุณ จะเรียกว่า "microinteraction-examples.zip" เมื่อคุณคลายซิปไฟล์ คุณจะเห็นไฟล์สองไฟล์ ไฟล์ชื่อ “microinteraction-examples.json” คือเลย์เอาต์ Divi จะต้องอัปโหลดไปยังห้องสมุด Divi ของคุณ คุณสามารถทำได้จากแดชบอร์ด WordPress โดยไปที่ Divi > Divi Library จากนั้นคลิกปุ่มนำเข้าที่ด้านบนของหน้า ไฟล์ชื่อ “microinteractions.css” มี CSS ที่กำหนดเองที่ใช้ในบทช่วยสอน CSS นี้จะต้องถูกคัดลอกลงใน CSS แบบกำหนดเองของการตั้งค่าเพจ หรือลงในกล่อง CSS เพิ่มเติมของ Theme Customizer คุณยังสามารถใช้คุณลักษณะการลากและวางของ Divi เพื่อลากไฟล์ microinteractions.css ลงใน Divi Builder ได้โดยตรงเมื่อโหลดเลย์เอาต์ของคุณแล้ว สิ่งนี้จะเพิ่ม css ให้กับการตั้งค่าเพจของคุณโดยอัตโนมัติ

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

เข้าร่วมจดหมายข่าว Divi แล้วเราจะส่งอีเมลสำเนาชุดเค้าโครงหน้า Landing Page ของ Divi ที่ดีที่สุดให้คุณ พร้อมแหล่งข้อมูล เคล็ดลับ และลูกเล่นที่น่าตื่นตาตื่นใจและฟรีอีกมากมายของ Divi ทำตามแล้วคุณจะเป็นผู้เชี่ยวชาญ Divi ในเวลาไม่นาน หากคุณสมัครรับข้อมูลแล้ว เพียงพิมพ์ที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลดเพื่อเข้าถึงชุดเค้าโครง

ดาวน์โหลด

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

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

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

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

ไชโย!