แก้ไขโดยใช้ Fusion Builder ในธีม Avada WordPress

อัปเดตพฤศจิกายน 2559 : ThemeFusion ได้อัปเดต Avada เป็นเวอร์ชัน 5.0 การอัปเดตนี้แยกตัวสร้าง Fusion ออกจากปลั๊กอินแต่ละตัว แทนที่จะรวมเข้ากับปลั๊กอิน Fusion Core Fusion Builder ได้รับการออกแบบใหม่ทั้งหมดและแตกต่างจากเวอร์ชันก่อนหน้าอย่างมาก

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

หากคุณได้ทำการอัพเกรด Avada 5.0 แล้วและเพจของคุณเสีย ให้รับมือกับ Avada รุ่นก่อนหน้า การใช้ FTP ไปที่โฟลเดอร์ wp-content/themes และสำรองข้อมูลเวอร์ชันใหม่ จากนั้นเปลี่ยนชื่อและ FTP เวอร์ชันก่อนหน้า คุณควรได้หน้าเว็บของคุณในเวอร์ชันที่เรียบร้อยกว่านี้กลับมา

โพสต์นี้มีไว้สำหรับเวอร์ชัน 2.0.3 หรือเก่ากว่า

การใช้ธีมอวาดา

หากคุณมีธีม Avada ในการติดตั้ง WordPress คุณสามารถใช้ Fusion Builder เพื่อสร้างบทความและเพจของคุณ ซึ่งค่อนข้างแตกต่างจากการอัปเดตหน้ามาตรฐาน

Fusion Builder เป็นปลั๊กอินที่พัฒนาโดย ThemeFusion ซึ่งเป็นผู้พัฒนา Avada ที่เปิดใช้งานเลย์เอาต์ที่ตอบสนองภายในธีม

อาจทำให้สับสนเล็กน้อยสำหรับผู้ที่มาครั้งแรก

ฉันได้เขียนคำแนะนำบางอย่างเพื่อช่วยคุณแก้ไขหน้าหรือโพสต์โดยใช้ Fusion Builder ภายในธีม Avada WordPress

สำรองข้อมูลทุกครั้งก่อนทำการเปลี่ยนแปลง

อย่าอัปเดตคอร์ ธีม หรือปลั๊กอินของ WordPress โดยไม่ได้สำรองข้อมูลปลั๊กอิน ธีม การอัปโหลดและฐานข้อมูลอย่างเต็มรูปแบบก่อน

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

เปิดใช้งาน Fusion Builder ของ Avada

ขั้นแรกให้เปิดใช้งาน Fusion Builder บนเพจหรือโพสต์ โดยใช้ปุ่มสีน้ำเงินเหนือพื้นที่แก้ไขเนื้อหา

หากนักออกแบบเว็บของคุณตั้งค่าเพจไว้แล้ว แสดงว่าพวกเขาอาจคลิกปุ่มนั้นแล้ว มันจะเปลี่ยนรูปลักษณ์ของตัวแก้ไขเนื้อหาของคุณดังด้านล่าง

การใช้ Fusion Builder ของ Avada คุณสามารถสร้างหน้าเว็บที่ตอบสนองได้

วิธีแก้ไขหน้าโดยใช้ Fusion Builder

เข้าสู่ระบบส่วนหลัง WordPress ของคุณ

ไปที่หน้าหรือโพสต์โดยใช้แท็บทางด้านซ้าย แล้วแก้ไข

กล่อง Fusion Builder ควรอยู่ที่ด้านบนของหน้าจอแก้ไขเพจของคุณ ปุ่มที่ด้านบนมีป้ายกำกับ 'ตัวเลือกคอลัมน์', 'องค์ประกอบตัวสร้าง', 'เทมเพลตที่กำหนดเอง' และ 'เทมเพลตที่สร้างไว้ล่วงหน้า'

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

เริ่ม

ตัวเลือกคอลัมน์ Fusion Builder

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

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

หากคุณเพิ่มคอลัมน์ขนาด 5 x 6 ทางด้านซ้าย ตัวเลือกอื่นที่จะพอดีทางด้านขวาคือ 1 x 6

คุณสามารถลากหนึ่งคอลัมน์จากด้านซ้ายของหน้าไปทางขวาของหน้า

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

Fusion Builder Elements

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

มีตัวเลือก Builder Element มากมายใน Avada เริ่มจากข้อความกันก่อน เมื่อคุณเพิ่มคอลัมน์แล้ว คุณอาจต้องการเพิ่มบล็อกข้อความลงในคอลัมน์ดังที่กล่าวไว้ข้างต้น

เพียงคลิกปุ่ม Builder Element ค้นหา TEXT จากนั้นคลิกและลากไปที่คอลัมน์ของคุณ

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

องค์ประกอบทั้งหมดสามารถแก้ไขได้โดยใช้ไอคอนแก้ไขเดียวกัน

เปลี่ยนข้อความหรือสื่อภายในองค์ประกอบ จากนั้นคลิก บันทึก กล่องจะปิดลง

เมื่อหน้าต่างนั้นปิดลง ให้คลิกปุ่ม UPDATE สีน้ำเงินเพื่อบันทึกการเปลี่ยนแปลงของคุณ

การแก้ไขกล่องเนื้อหาภายใน Avada

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

ภายในองค์ประกอบเดียว 'กล่องเนื้อหา' สามารถมี 'กล่องย่อย' หรือ 'รายการ' ได้หลายรายการ ซึ่งสามารถเพิ่มได้โดยการเลื่อนไปที่ด้านล่างสุดของหน้าจอกล่องเนื้อหา

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

ไปที่หน้าจอแก้ไขสำหรับกล่องเนื้อหาของคุณ โดยใช้ไอคอนพู่กัน

ตัวเลือกภายในกล่องเนื้อหามีดังนี้:

การตั้งค่าผู้ปกครอง / เด็ก
การตั้งค่า "ระดับผู้ปกครอง" จะควบคุมรูปแบบกล่องทั้งหมดด้วยกัน การตั้งค่า "ระดับเด็ก" จะควบคุมรูปแบบกล่องแต่ละแบบแยกกัน

เค้าโครงกล่องเนื้อหา
เลือกเค้าโครงสำหรับกล่องเนื้อหา

จำนวนคอลัมน์
กำหนดจำนวนคอลัมน์ต่อแถว

การจัดตำแหน่งเนื้อหา
ใช้งานได้กับตัวเลือกเลย์เอาต์ "Classic Icon With Title" และ "Classic Icon On Side"

ขนาดชื่อเรื่อง
ควบคุมขนาดของชื่อเรื่อง เว้นว่างไว้สำหรับการเลือกตัวเลือกธีม เป็นพิกเซล เช่น 18px

ชื่อแบบอักษรสี
ควบคุมสีของฟอนต์ชื่อเรื่อง เว้นว่างไว้สำหรับการเลือกตัวเลือกธีม ตัวอย่าง: #000

สีตัวอักษรของร่างกาย
ควบคุมสีของฟอนต์เนื้อหา เว้นว่างไว้สำหรับการเลือกตัวเลือกธีม ตัวอย่าง: #000

สีพื้นหลังกล่องเนื้อหา
เว้นว่างไว้สำหรับการเลือกตัวเลือกธีม

พื้นหลังไอคอน
เลือกให้แสดงพื้นหลังด้านหลังไอคอน เลือกค่าเริ่มต้นสำหรับการเลือกตัวเลือกธีม

รัศมีพื้นหลังไอคอน
เลือกรัศมีเส้นขอบของพื้นหลังไอคอน เว้นว่างไว้สำหรับการเลือกตัวเลือกธีม ในหน่วยพิกเซล (px) เช่น 1px หรือ “รอบ”

ไอคอนสี
เว้นว่างไว้สำหรับการเลือกตัวเลือกธีม

สีพื้นหลังของไอคอน
เว้นว่างไว้สำหรับการเลือกตัวเลือกธีม

ไอคอนพื้นหลังสีเส้นขอบด้านใน
เว้นว่างไว้สำหรับการเลือกตัวเลือกธีม

ไอคอนพื้นหลังขนาดเส้นขอบด้านใน
เว้นว่างไว้สำหรับการเลือกตัวเลือกธีม

ไอคอนพื้นหลังสีขอบด้านนอก
เว้นว่างไว้สำหรับการเลือกตัวเลือกธีม

ไอคอนพื้นหลังขนาดเส้นขอบด้านนอก
เว้นว่างไว้สำหรับการเลือกตัวเลือกธีม

ขนาดไอคอน
ควบคุมขนาดของไอคอน เว้นว่างไว้สำหรับการเลือกตัวเลือกธีม เป็นพิกเซล เช่น 18px

ไอคอนโฮเวอร์นิเมชั่นประเภท
เลือกประเภทภาพเคลื่อนไหวสำหรับไอคอนเมื่อวางเมาส์เหนือ เลือกค่าเริ่มต้นสำหรับการเลือกตัวเลือกธีม

โฮเวอร์นิเมชั่นสี
เลือกสีเฉพาะจุดสำหรับแอนิเมชั่นโฮเวอร์ เว้นว่างไว้สำหรับการเลือกตัวเลือกธีม

ประเภทลิงค์
เลือกประเภทของลิงก์ที่ควรแสดงในกล่องเนื้อหา เลือกค่าเริ่มต้นสำหรับการเลือกตัวเลือกธีม

พื้นที่ลิงค์
เลือกพื้นที่ที่จะกำหนดลิงค์ให้ เลือกค่าเริ่มต้นสำหรับการเลือกตัวเลือกธีม

ลิงค์เป้าหมาย
_self = เปิดในหน้าต่างเดียวกัน
_blank = เปิดในหน้าต่างใหม่ เลือกค่าเริ่มต้นสำหรับการเลือกตัวเลือกธีม

ภาพเคลื่อนไหวล่าช้า
ควบคุมการหน่วงเวลาของแอนิเมชันระหว่างแต่ละองค์ประกอบในชุด หน่วยเป็นมิลลิวินาที 1000 = 1 วินาที

ออฟเซ็ตของแอนิเมชั่น
เลือกว่าควรเริ่มแอนิเมชั่นเมื่อใด

ประเภทแอนิเมชั่น
เลือกประเภทของแอนิเมชั่นที่จะใช้กับรหัสย่อ

ทิศทางของแอนิเมชั่น
เลือกทิศทางที่เข้ามาสำหรับแอนิเมชั่น

ความเร็วของแอนิเมชั่น
พิมพ์ความเร็วของแอนิเมชั่นเป็นวินาที (0.1 – 1)

ขอบบน
เป็นพิกเซล (px) เช่น 1px

ขอบล่าง
เป็นพิกเซล (px) เช่น 1px

CSS Class
เพิ่มคลาสให้กับองค์ประกอบ HTML การตัดคำ

CSS ID
เพิ่ม id ให้กับองค์ประกอบ HTML การตัดคำ

การแก้ไขกล่องเนื้อหา 'ลูก'

คลิกไอคอนพู่กัน เพื่อแก้ไขกล่องเนื้อหา

เลื่อนไปที่ด้านล่างเพื่อค้นหา 'เพิ่มกล่องเนื้อหาใหม่' หรืออาจเป็น 'รายการกล่องเนื้อหา 1+' หากมีรายการภายในกล่องเนื้อหาอยู่แล้ว

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

ตอนนี้คลิกปุ่มบันทึกสีน้ำเงิน กล่องแก้ไขจะปิดลง

อย่าลืมคลิกปุ่ม UPDATE ทางด้านขวามือเพื่อบันทึกหน้า

ลิงค์ที่มีประโยชน์

ข้อมูลอัปเดตของ Avada