แชร์ผ่าน

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

  • บทความ

ตัวออกแบบเนื้อหามีทั้งตัวแก้ไขกราฟิกและตัวแก้ไขรหัส HTML HTML ที่สร้างจะสามารถใช้งานร่วมกับตัวแสดง HTML ได้ ทั้งยังรองรับแอตทริบิวต์แบบกำหนดเองบางชนิดที่รองรับองค์ประกอบการออกแบบลากและวาง รวมถึงการตั้งค่าลักษณะทั่วไปที่ให้มาพร้อมกับตัวแก้ไขกราฟิกด้วย เท็มเพลตข้อความเริ่มต้นและเท็มเพลตเพจที่ให้มาพร้อมกับ Dynamics 365 Customer Insights - Journeys จะใช้ประโยชน์จากแอตทริบิวต์แบบกำหนดเองเหล่านี้เพื่อช่วยให้คุณสามารถปรับแต่งเท็มเพลตด้วยวิธีเฉพาะได้ง่ายขึ้น นอกจากนี้ คุณยังสามารถใช้ประโยชน์จากแอตทริบิวต์แบบกำหนดเองเหล่านี้ในขณะที่ออกแบบเทมเพลตของคุณเองอีกด้วย

เคล็ดลับ

Microsoft ไม่ได้ให้การสนับสนุน HTML ที่กำหนดเองในอีเมล

สรุปแท็กและแอตทริบิวต์

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

แอตทริบิวต์แบบกำหนดเอง คำอธิบาย
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document"> เมื่อแท็กนี้ปรากฏใน <head> ของเอกสาร แท็บ ตัวออกแบบ จะแสดงคุณลักษณะลากและวาง หากแท็กนี้ไม่ปรากฏขึ้น แท็บ ตัวออกแบบ จะแสดงตัวแก้ไขแบบง่ายเต็มหน้า ข้อมูลเพิ่มเติม: แสดงกล่องเครื่องมือและเปิดใช้งานการแก้ไขลากและวาง
<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>"> เมื่อแท็กนี้ปรากฏใน <head> ของเอกสารของคุณ แบบอักษรที่แสดงใน <รายการแบบอักษร> (คั่นด้วยเครื่องหมายจุลภาค) จะได้รับการเพิ่มลงในเมนูแบบอักษรในแถบเครื่องมือการจัดรูปแบบสำหรับองค์ประกอบข้อความ ข้อมูลเพิ่มเติม: เพิ่มแบบอักษรใหม่ลงในแถบเครื่องมือองค์ประกอบข้อความ
<div data-container="true"> … </div> ทำเครื่องหมายที่ส่วนต้นและส่วนท้ายของคอนเทนเนอร์ที่ผู้ใช้สามารถลากและวางองค์ประกอบการออกแบบได้ ข้อมูลเพิ่มเติม: สร้างคอนเทนเนอร์ที่ผู้ใช้สามารถเพิ่มองค์ประกอบการออกแบบ
<div data-editorblocktype="<element-type>"> … </div> ทำเครื่องหมายที่ส่วนต้นและส่วนท้ายขององค์ประกอบการออกแบบ ค่าของแอตทริบิวต์จะระบุว่าองค์ประกอบเป็นชนิดใด (ข้อความ รูปภาพ ปุ่ม และอื่นๆ) องค์ประกอบการออกแบบบางส่วนรองรับแอตทริบิวต์เพิ่มเติมที่นี่ ข้อมูลเพิ่มเติม: ระบุองค์ประกอบการออกแบบ และ ล็อกองค์ประกอบในมุมมองตัวออกแบบ
<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>"> แท็กนี้จะกำหนดการตั้งค่าลักษณะของทั้งเอกสาร ซึ่งผู้ใช้สามารถแก้ไขได้โดยใช้แท็บ ตัวออกแบบ>ลักษณะ ข้อมูลเพิ่มเติม: เพิ่มการตั้งค่าไปยังแท็บลักษณะ
/* @<tag-name> */ … /* @<tag-name> */ ใช้ข้อคิดเห็น CSS เช่นนี้เพื่อล้อมรอบค่า CSS ให้มีการควบคุมด้วยการตั้งค่าลักษณะ โดยที่ <tag-name> เป็นค่าของแอตทริบิวต์ name สำหรับแท็กเมตาที่กำหนดการตั้งค่า ข้อมูลเพิ่มเติม: เพิ่มข้อคิดเห็น CSS เพื่อใช้การตั้งค่าลักษณะในส่วนหัว
property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …" วางแอตทริบิวต์นี้ในแท็ก HTML เพื่อวางแอตทริบิวต์ด้วยค่าที่มีการควบคุมด้วยการตั้งค่าลักษณะ โดยที่ <attr> เป็นชื่อของแอตทริบิวต์ที่ถูกสร้างขึ้นและ <tag-name> เป็นค่าของแอตทริบิวต์ name สำหรับแท็กเมตาที่กำหนดการตั้งค่า ข้อมูลเพิ่มเติม: เพิ่มแอตทริบิวต์การอ้างอิงคุณสมบัติเพื่อใช้การตั้งค่าลักษณะในเนื้อหา

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

แสดงกล่องเครื่องมือและเปิดใช้งานการแก้ไขลากและวาง

คุณสามารถวาง HTML ที่พัฒนาขึ้นในเครื่องมือของบุคคลภายนอกได้โดยตรง ในแท็บ HTML ของตัวออกแบบ เพื่อเริ่มต้นออกแบบได้อย่างรวดเร็ว อย่างไรก็ตาม เมื่อทำเช่นนี้แล้ว แท็บ ตัวออกแบบ จะแสดงเป็นตัวแก้ไข Rich Text เดียว ซึ่งมีแถบเครื่องมือการจัดรูปแบบข้อความ และแสดงรูปภาพ ลิงก์ และลักษณะทั้งหมดที่รวมอยู่ใน HTML ของคุณ แต่ไม่มีแท็บ กล่องเครื่องมือ, คุณสมบัติ หรือ ลักษณะ หรือฟังก์ชันการทำงานลากและวาง (มุมมอง ตัวออกแบบ ที่เรียบง่ายนี้บางครั้งถูกเรียกว่า ตัวแก้ไขแบบเต็มหน้า) อย่างไรก็ตาม คุณสามารถเปิดใช้งานฟังก์ชันลากและวางสำหรับการออกแบบใดๆ ที่ถูกวางไว้ โดยการเพิ่มแท็กเมตาต่อไปนี้ไปยังส่วน <head> ในเอกสารของคุณ:

<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document">

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

ตัวแก้ไขเต็มหน้าเทียบกับตัวแก้ไขการลากและวาง

หมายเหตุ

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

สร้างคอนเทนเนอร์ที่ผู้ใช้สามารถเพิ่มองค์ประกอบการออกแบบ

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

ใช้แท็ก <div> ที่ประกอบด้วยแอตทริบิวต์ data-container="true" เพื่อสร้างคอนเทนเนอร์ข้อมูล เช่น:

<table aria-role="presentation">
    <tbody><tr>
        <td>
            LOCKED
        </td>
        <td>
            <div data-container="true">
                <!-- DRAG HERE -->
            </div>
        </td>
    </tr>
</tbody></table>

ข้อความหรือแท็ก HTML ใดๆ ที่ซ้อนอยู่ภายในคู่ div-tag data-container และไม่ได้เป็นส่วนหนึ่งขององค์ประกอบการออกแบบ จะสร้างพื้นที่ที่ไม่สามารถลากและแก้ไขได้ระหว่างพื้นที่ที่สามารถลากได้สองแห่ง ตัวอย่างเช่น:

<div data-container="true">
    <!-- DRAG HERE --> <p> LOCKED </p> <!-- DRAG HERE -->
</div>

หมายเหตุ

เมื่อเปิดใช้งานตัวแก้ไขแบบเต็มหน้า คุณลักษณะลากและวางทั้งหมดจะถูกปิดใช้งาน และคุณสามารถแก้ไขเนื้อหาทั้งหมดได้ในแท็บ ตัวออกแบบ รวมถึงเนื้อหานอกแท็ก data-container div (ซึ่งไม่มีผลในตัวแก้ไขแบบเต็มหน้า)

ล็อกคอนเทนเนอร์ในมุมมองตัวออกแบบ

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

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

หากต้องการล็อกคอนเทนเนอร์ ให้เพิ่มแอตทริบิวต์ data-locked="hard" ลงในแท็กคอนเทนเนอร์ดังนี้:

<div data-container="true" data-locked="hard">
    <!-- All elements and content here are locked, with no properties shown -->
</div>

หมายเหตุ

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

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

ระบุองค์ประกอบการออกแบบ

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

องค์ประกอบการออกแบบถูกทำเครื่องหมายด้วยแท็ก <div> ที่ประกอบด้วยแอตทริบิวต์ของฟอร์ม data-editorblocktype="<element-type>" ซึ่งค่าของแอตทริบิวต์จะระบุชนิดขององค์ประกอบ ตัวอย่างเช่น แท็ก <div> ต่อไปนี้จะสร้างองค์ประกอบข้อความขึ้น:

<div data-editorblocktype="Text">
    ...
    <!-- Don't edit the element content here -->
    ...
</div>

ตารางต่อไปนี้แสดงรายการค่าที่ใช้ได้สำหรับแอตทริบิวต์ data-editorblocktype

ชื่อองค์ประกอบการออกแบบ ชนิดองค์ประกอบ data-editorblocktype ค่าแอตทริบิวต์
องค์ประกอบข้อความ องค์ประกอบการออกแบบทั่วไป Text
องค์ประกอบรูปภาพ องค์ประกอบการออกแบบทั่วไป Image
องค์ประกอบเส้นคั่น องค์ประกอบการออกแบบทั่วไป เส้นคั่น
องค์ประกอบปุ่ม องค์ประกอบการออกแบบทั่วไป ปุ่ม
องค์ประกอบบล็อกเนื้อหา องค์ประกอบการออกแบบทั่วไป เนื้อหา
(องค์ประกอบการออกแบบชนิดนี้ยังมีแอตทริบิวต์ data-block-datatype="<block-type>" ซึ่งจะระบุว่าบล็อกเนื้อหาเป็นชนิดใด โดยที่ <block-type> มีค่าของ text หรือ image อย่างใดอย่างหนึ่ง)
องค์ประกอบเพจทางการตลาด อีเมล เพจทางการตลาด
องค์ประกอบเหตุการณ์ อีเมล Event
องค์ประกอบแบบสำรวจ อีเมล Survey
องค์ประกอบฟอร์ม ฟอร์ม FormBlock
องค์ประกอบฟิลด์ เนื้อหาฟอร์ม Field-<field-name> ตัวอย่างเช่น: Field-email
องค์ประกอบรายการสมัครใช้งาน เนื้อหาฟอร์ม SubscriptionListBlock
องค์ประกอบการส่งต่อให้เพื่อน เนื้อหาฟอร์ม ForwardToFriendBlock
องค์ประกอบไม่อนุญาตอีเมลและองค์ประกอบจำข้อมูลของฉัน เนื้อหาฟอร์ม กล่องกาเครื่องหมายฟิลด์
(องค์ประกอบเหล่านี้แต่ละรายการจะสร้างกล่องกาเครื่องหมายและแยกความแตกต่างได้ด้วยการตั้งค่าภายใน)
องค์ประกอบของปุ่มส่ง เนื้อหาฟอร์ม SubmitButtonBlock
องค์ประกอบปุ่มรีเซ็ต เนื้อหาฟอร์ม ResetButtonBlock
องค์ประกอบ Captcha เนื้อหาฟอร์ม CaptchaBlock

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

สำคัญ

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

ล็อกองค์ประกอบในมุมมองตัวออกแบบ

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

data-protected="true"

ตัวอย่างเช่น:

<div data-editorblocktype="Divider" data-protected="true">
    …
        <!-- Don't edit the element content here -->
    …
</div>

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

หมายเหตุ

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

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

นำเข้า HTML ที่สร้างภายนอกไปยังนักออกแบบ

คุณสามารถใช้เครื่องมือใดๆ ที่คุณต้องการเพื่อสร้างเค้าโครง HTML และเนื้อหาเริ่มต้นสำหรับอีเมลทางการตลาด หน้า หรือฟอร์ม เมื่อ HTML ของคุณพร้อม เพียงวางลงในตัวออกแบบที่เกี่ยวข้อง แล้วจากนั้นเพิ่มคุณลักษณะ Dynamics 365 Customer Insights - Journeys ที่คุณต้องการ ตามที่อธิบายไว้ในส่วนย่อยต่อไปนี้

นำเข้ารหัส HTML ของคุณ

หากต้องการนำ HTML ที่สร้างภายนอกมาสู่นักออกแบบ ให้เริ่มต้นด้วยการทำสิ่งต่อไปนี้:

  1. สร้างอีเมลทางการตลาด หน้า หรือฟอร์มใหม่ใน Dynamics 365 Customer Insights - Journeys
  2. ไปยังแท็บ ออกแบบ>HTML ของนักออกแบบ
  3. ล้างเนื้อหาทั้งหมดจากแท็บ HTML และวางใน HTML ที่คุณสร้างขึ้นภายนอก
  4. ไปที่แท็บ ออกแบบ>นักออกแบบ ของนักออกแบบ และตรวจสอบการออกแบบของคุณ
  5. หากคุณกำลังทำงานกับอีเมลทางการตลาด ต้องแน่ใจว่าใช้ การช่วยแก้ไข เพื่อ วางเนื้อหาและลิงก์ที่จำเป็นทั้งหมด (ซึ่งรวมถึงลิงก์ศูนย์การสมัครใช้งานและที่อยู่ผู้ส่งทางกายภาพของคุณ)

เคล็ดลับ

เนื่องจากคุณเพิ่งวางใน HTML ภายนอก การออกแบบของคุณจึงอาจไม่มีรหัสที่เฉพาะเจาะจงสำหรับ Dynamics 365 Customer Insights - Journeys ดังนั้น ตัวออกแบบ แสดงให้เห็นว่า เครื่องมือแก้ไขแบบเต็มหน้า ซึ่งมีคุณลักษณะสำหรับการจัดรูปแบบข้อความพื้นฐาน การจัดรูปแบบรูปภาพ และ (สำหรับอีเมล) ตัวช่วยแก้ไข สำหรับการเพิ่มเนื้อหาแบบไดนามิก สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานกับเครื่องมือแก้ไขแบบเต็มหน้า ดู แสดงกล่องเครื่องมือ และเปิดใช้งานการแก้ไขการลากและวาง หากเครื่องมือแก้ไขแบบเต็มหน้ามีฟังก์ชั่นทั้งหมดที่คุณต้องการ จากนั้นให้ใช้เพื่อปรับแต่งการออกแบบของคุณ แล้วเริ่มใช้งานตามปกติ หากคุณต้องการใช้ ตัวแก้ไขลากและวาง เพื่อปรับแต่งการออกแบบของคุณ ดูส่วนถัดไปสำหรับข้อมูลเกี่ยวกับวิธีการเปิดใช้งาน

เปิดใช้งานเครื่องมือแก้ไขการลากและวาง หลังจากนำเข้า

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

  1. กลับไปที่แท็บ ออกแบบ>HTML ของนักออกแบบ

  2. เปิดใช้งานเครื่องมือแก้ไขแบบลากและวางโดยเพิ่มเมตาแท็กที่จำเป็นลงในส่วน ของเอกสารของคุณตามที่อธิบายไว้ใน แสดงกล่องเครื่องมือและเปิดใช้งานการแก้ไขแบบลากและวาง

  3. ทำสิ่งต่อไปนี้ตามต้องการ ขณะทำงานบนแท็บ ออกแบบ>HTML :

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

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

ชนิดองค์ประกอบการออกแบบ วางรหัสนี้ บันทึกย่อ                                                     
Text <div data-editorblocktype="Text"><p> Enter your text here</p></div> คุณสามารถป้อนเนื้อหา HTML ระหว่างแท็ก <p> โดยตรงที่นี่ หรือไปที่ นักออกแบบ เพื่อใช้เครื่องมือแก้ไข Rich Tex เพื่อทำเช่นนั้น
Image <div data-editorblocktype="Image"><div align="Center" class="imageWrapper"><a href="example.com" title="example.com"><img alt="Some alt text" height="50" src="about:blank" width="50"></a></div></div> วิธีที่ง่ายที่สุดในการเปลี่ยนแหล่งรูปภาพ และ/หรือลิงค์รูปภาพคือ การไปที่ นักออกแบบ และใช้แผง คุณสมบัติ แต่คุณยังสามารถแก้ไขแอตทริบิวต์ต่อไปนี้ได้โดยตรงใน HTML:
  • ตั้งค่าลิงค์รูปภาพและ/หรือชื่อโดยแก้ไข href และ/หรือแอตทริบิวต์ชื่อขององค์ประกอบ <a>
  • หากต้องการลบลิงก์ออกจากภาพ ให้ล้างเนื้อหาของแอตทริบิวต์ href และ title ขององค์ประกอบ <a> (แต่เก็บแอตทริบิวต์และใบเสนอราคา เช่น href="")
  • ตั้งค่าแหล่งรูปภาพโดยแก้ไขแอตทริบิวต์ src ขององค์ประกอบ <img>
อย่าแก้ไขรหัสอื่นใดๆ
Divider <div data-editorblocktype="Divider"><div align="center" class="dividerWrapper"><table aria-role="presentation" style="padding: 0px; margin: 0px; width: 100%"><tbody><tr style="padding: 0px;"> <td style="margin:0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 5px; vertical-align:top;"> <p style="margin: 0px; padding: 0px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); line-height: 0px; width: 100%;"><span>&nbsp;</span></p></td></tr></tbody></table></div></div> อย่าแก้ไขรหัสใดๆ นี้โดยตรงในตัวแก้ไข HTML แต่ไปทำ นักออกแบบ และใช้แผง คุณสมบัติ
Button <div data-editorblocktype="Button"><!--[if mso]><div align="center"><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" อย่าแก้ไขรหัสใดๆ นี้โดยตรงในตัวแก้ไข HTML แต่ไปทำ นักออกแบบ และใช้แผง คุณสมบัติ

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

เพิ่มแบบอักษรใหม่ลงในแถบเครื่องมือองค์ประกอบข้อความ

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

ตัวเลือกแบบอักษรสำหรับองค์ประกอบของข้อความ

การเพิ่มแบบอักษรใหม่ลงในตัวเลือกแบบอักษร ให้เพิ่มแท็ก <meta> ที่ใช้ฟอร์มต่อไปนี้กับ <head> ของเอกสาร:

<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>">

โดยที่ <รายการแบบอักษร> เป็นรายการของชื่อแบบอักษรที่คั่นด้วยเครื่องหมายจุลภาค

เพิ่มการตั้งค่าไปยังแท็บลักษณะ

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

แท็บตัวออกแบบ > ลักษณะ

เมื่อต้องการเพิ่มการตั้งค่าไปที่แท็บ ลักษณะ คุณต้องดำเนินการดังต่อไปนี้:

  • เพิ่มแท็ก <meta> ไปที่ <head> ของเอกสารเพื่อกำหนดการตั้งค่า
  • ตั้งค่าลักษณะและ/หรือแท็ก HTML ที่ใช้การตั้งค่าที่สร้างขึ้นโดยแท็กเมตา

ส่วนย่อยต่อไปนี้จะอธิบายวิธีดำเนินการต่างๆ เหล่านี้

เพิ่มแท็กเมตาเพื่อกำหนดการตั้งค่า

แท็ก <meta> ที่กำหนดมีฟอร์มต่อไปนี้:

<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>">

โดยที่:

  • <ชื่อ> ระบุแท็กเมตา ซึ่งคุณต้องอ้างอิงในลักษณะและแท็ก HTML ที่จะมีการใช้การตั้งค่า
  • <ค่าเริ่มต้น> คือค่าเริ่มต้นที่เหมาะสมสำหรับลักษณะ
  • <ชนิดข้อมูล> ระบุชนิดของค่าที่ผู้ใช้จะระบุ การตั้งค่านี้จะมีผลต่อชนิดการควบคุมที่แสดงบนแท็บ ลักษณะ คุณต้องใช้ค่าใดค่าหนึ่งที่ระบุในตารางต่อไปนี้
  • <ป้ายกำกับ> ระบุข้อความที่จะแสดงในแท็บ ลักษณะ สำหรับการตั้งค่า
ค่าชนิดข้อมูล คำอธิบาย
color ตั้งค่าสีโดยใช้ค่าแฮชแท็ก เช่น #000 หรือ #1a32bf สร้างการควบคุมตัวเลือกสีบนแท็บ ลักษณะ
font ตั้งค่าชื่อตระกูลแบบอักษร คุณยังสามารถตั้งค่าสแตกแบบอักษรโดยใช้รายการที่คั่นด้วยเครื่องหมายจุลภาคของชื่อแบบอักษรตามลำดับความพึงพอใจ สร้างฟิลด์ป้อนข้อมูลแบบง่ายบนแท็บ ลักษณะ
number ตั้งค่าที่เป็นตัวเลขโดยไม่ใส่หน่วย (ใช้ข้อความที่ให้อนุญาตให้ระบุหน่วย เช่น px หรือ em ร่วมกับค่า) สร้างฟิลด์ป้อนข้อมูลด้วยปุ่มขึ้น/ลงที่ยังสามารถใช้ในการเพิ่ม/ลดค่าปัจจุบันบนแท็บ ลักษณะ ได้
picture ตั้งค่าแหล่งที่มาของรูปภาพ (เป็น URL) สร้างฟิลด์ป้อนข้อมูลแบบง่ายบนแท็บ ลักษณะ
text ตั้งค่าข้อความที่สามารถมีทั้งข้อความและตัวเลข ใช้ชนิดข้อมูลนี้สำหรับค่าที่เป็นตัวเลขที่อาจมีหน่วย (เช่น px หรือ em) สร้างฟิลด์ป้อนข้อมูลแบบง่ายบนแท็บ ลักษณะ

หมายเหตุ

ป้ายกำกับที่แสดงบนแท็บ ลักษณะ อาจปรากฏในวงเล็บเหลี่ยม เช่น "[ลักษณะของฉัน]" วงเล็บเหลี่ยมระบุว่าข้อความที่แสดงไม่มีคำแปล หากคุณเลือกค่าที่รองรับโดยเทมเพลตแบบพร้อมใช้งาน (เช่น "สี 1") การแปลจะพร้อมใช้งาน ดังนั้นวงเล็บเหลี่ยมจะไม่ปรากฏ

หมายเหตุ

การตั้งค่าลักษณะที่สร้างขึ้นโดยใช้แท็ก <meta> ตามที่อธิบายไว้ที่นี้จะแสดงบนแท็บ ลักษณะ เท่านั้น เมื่อการตั้งค่าดังกล่าวถูกอ้างถึงในลักษณะจริงหรือในแท็ก HTML อย่างน้อยหนึ่งรายการ ตามที่อธิบายไว้ในส่วนถัดไป

เพิ่มข้อคิดเห็น CSS เพื่อใช้การตั้งค่าลักษณะในส่วนหัว

การตั้งค่าที่ทำบนแท็บ ลักษณะ สามารถนำไปใช้กับลักษณะ CSS ที่สร้างขึ้นใน <head> ของเอกสาร HTML ของคุณได้ โดยการล้อมรอบค่า CSS ด้วยข้อคิดเห็น CSS สองรายการที่มีค่าของแอตทริบิวต์ name สำหรับการจับคู่แท็กเมตา xrm/designer/setting คู่ข้อคิดเห็น CSS ใช้ฟอร์มต่อไปนี้:

/* @<tag-name> */ <value> /* @<tag-name> */

โดยที่:

  • <tag-name> คือแอตทริบิวต์ชื่อสำหรับแท็กเมตา xrm/designer/setting ที่กำหนดการตั้งค่าแท็บ ลักษณะ ที่เกี่ยวข้อง
  • <ค่า> คือค่าที่จะได้รับการแทนที่เมื่อผู้ใช้แก้ไขการตั้งค่าแท็บ ลักษณะ ที่เกี่ยวข้อง

สำคัญ

คุณสามารถใช้ได้เฉพาะคู่ของข้อคิดเห็น CSS นี้ในลักษณะและคลาสที่กำหนดไว้ภายในแท็ก <style> ในส่วน <head> ยิ่งไปกว่านั้น จะต้องมีแท็ก <style> เพียงชุดเดียว พร้อมกับมีการตั้งค่าลักษณะ CSS ทั้งหมดในนั้น

ต่อไปนี้เป็นตัวอย่างที่ซึ่งคุณจะสามารถเห็นแท็กเมตา xrm/designer/setting ที่สร้างตัวควบคุมตัวใช้เลือกสีที่มีชื่อว่า "สี 1" บนแท็บ ลักษณะ จากนั้น ลักษณะ CSS จะนำการตั้งค่านี้ไปใช้กำหนดสีของข้อความให้แก่องค์ประกอบ <h1>

<head>
    <meta type="xrm/designer/setting" name="color1" value="#ff0000" datatype="color" label="Color 1">
    <style>
        h1 {color: /* @color1 */ #ff0000 /* @color1 */;}
    </style>
</head>

เพิ่มแอตทริบิวต์การอ้างอิงคุณสมบัติเพื่อใช้การตั้งค่าลักษณะในเนื้อหา

การตั้งค่าที่ดำเนินการในแท็บ ลักษณะ สามารถนำไปใช้เป็นค่าแอตทริบิตว์กับแท็ก HTML ใน <body> ของเอกสารได้โดยการเพิ่มแอตทริบิวต์ของฟอร์มต่อไปนี้ลงในแท็กแต่ละแท็กที่เกี่ยวข้อง:

property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …"

โดยที่:

  • <attr> คือชื่อของแอตทริบิวต์ที่จะสร้าง
  • <tag-name> คือค่าของแอตทริบิวต์ name สำหรับแท็กเมตาที่กำหนดการตั้งค่า
  • หากจำเป็น แอตทริบิวต์หลายรายการต้องถูกคั่นด้วยเครื่องหมายอัฒภาคภายในแอตทริบิวต์การอ้างอิงคุณสมบัติ

ต่อไปนี้เป็นตัวอย่างซึ่งคุณจะเห็นแท็กเมตา xrm/designer/setting ที่กำหนดการตั้งค่าสองแบบเพื่อควบคุมรูปภาพหลัก (แบนเนอร์) ในเอกสาร พร้อมด้วยตัวควบคุมที่เรียกว่า "ภาพหลัก" และ "ความสูงของภาพหลัก" ในแท็บ ลักษณะ จากนั้น คุณสมบัติ property-reference จะถูกนำมาใช้ในแท็ก <img> เพื่อใช้การตั้งค่าเหล่านี้

<head>
    <meta type="xrm/designer/setting" name="hero-image" value="picture.jpg" datatype="picture" label="Hero image">
    <meta type="xrm/designer/setting" name="hero-image-height" value="100px" datatype="text" label="Hero image height">
</head>
<body>
    <img property-reference="src:@hero-image;height:@hero-image-height;">
</body>

ดังนั้น ในตัวอย่างนี้ แท็ก <img> อาจช่วยแก้ปัญหาอย่างเช่น:

<img src="picture.jpg" height="100px">