แชร์ผ่าน

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

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

เคล็ดลับ

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 comments เช่นนี้เพื่อล้อมรอบค่า CSS ให้ควบคุมโดยการตั้งค่าสไตล์ โดยที่ <tag-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">

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

ตัวแก้ไขแบบเต็มหน้าเทียบกับตัวแก้ไขแบบลากแล้วปล่อย

Note

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

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

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

ใช้ <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 ของ คอนเทนเนอร์ข้อมูล และไม่ได้เป็นส่วนหนึ่งขององค์ประกอบการออกแบบ จะสร้างพื้นที่ที่ไม่สามารถลากได้และไม่สามารถลากได้ระหว่างพื้นที่ที่ลากได้สองพื้นที่ ตัวอย่างเช่น:

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

Note

เมื่อเปิดใช้งานตัวแก้ไขเต็มหน้า คุณลักษณะการลากและวางทั้งหมดจะถูกปิดใช้งาน และคุณสามารถแก้ไขเนื้อหาทั้งหมดบนแท็บ ตัวออกแบบ รวมถึงเนื้อหาภายนอก 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>

Note

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

หากต้องการบังคับใช้การล็อกคอนเทนเนอร์เพิ่มเติม คุณสามารถจํากัดการเข้าถึงแท็บ 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 ค่าแอตทริบิวต์
องค์ประกอบข้อความ องค์ประกอบการออกแบบทั่วไป ข้อความ
องค์ประกอบรูปภาพ องค์ประกอบการออกแบบทั่วไป Image
องค์ประกอบตัวแบ่ง องค์ประกอบการออกแบบทั่วไป แบ่ง
องค์ประกอบปุ่ม องค์ประกอบการออกแบบทั่วไป ปุ่ม
องค์ประกอบของบล็อกเนื้อหา องค์ประกอบการออกแบบทั่วไป เนื้อหา
(องค์ประกอบการออกแบบชนิดนี้ยังมี data-block-datatype="<block-type>" แอตทริบิวต์ ซึ่งระบุชนิดของบล็อกเนื้อหาที่บล็อกอยู่ โดยที่ <บล็อกชนิด> มีค่าเป็น text หรือ image)
องค์ประกอบหน้าการตลาด Email หน้าการตลาด
องค์ประกอบเหตุการณ์ Email เหตุการณ์
องค์ประกอบของแบบสํารวจ Email สํารวจ
องค์ประกอบของฟอร์ม ฟอร์ม FormBlock
องค์ประกอบเขตข้อมูล เนื้อหาของฟอร์ม Field-field-name<> ตัวอย่างเช่น: Field-email
องค์ประกอบรายการการสมัครใช้งาน เนื้อหาของฟอร์ม SubscriptionListBlock
องค์ประกอบแบบ forward-to-a-friend จากเนื้อหา ForwardToFriendBlock
องค์ประกอบอีเมลและองค์ประกอบ Remember-me เนื้อหาของฟอร์ม กล่องกาเครื่องหมายเขตข้อมูล
(องค์ประกอบเหล่านี้แต่ละสร้างกล่องกาเครื่องหมาย และแตกต่างจากการตั้งค่าภายใน)
องค์ประกอบปุ่มส่ง เนื้อหาของฟอร์ม 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" (หรือเอาออก) เพื่อลบการป้องกันออกจากองค์ประกอบการออกแบบ

Note

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

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

นําเข้า HTML ที่สร้างขึ้นภายนอกลงในตัวออกแบบ

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

นําเข้าโค้ด HTML ของคุณ

เมื่อต้องนํา HTML ที่สร้างขึ้นภายนอกลงในตัวออกแบบ เริ่มต้น โดยทําดังต่อไปนี้:

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

เคล็ดลับ

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

เปิดใช้งานตัวแก้ไขการลากแล้วปล่อยหลังจากนําเข้า

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

  1. ย้อนกลับ ไปยังแท็บ>ออกแบบ HTML ของตัวออกแบบ

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

  3. ทําสิ่งต่อไปนี้ตามความจําเป็นขณะทํางานบนแท็บ ออกแบบ>HTML :

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

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

ชนิดองค์ประกอบการออกแบบ วางโค้ดนี้ หมาย เหตุ                                                     
ข้อความ <div data-editorblocktype="Text"><p> Enter your text here</p></div> คุณสามารถใส่เนื้อหา HTML ระหว่าง <p> แท็กได้โดยตรงที่นี่ หรือไปที่ตัว ออกแบบ เพื่อใช้ตัวแก้ไข Rich Text เพื่อดําเนินการดังกล่าว
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> องค์ประกอบ
อย่าแก้ไขรหัสอื่น
แบ่ง <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 ให้ไปในตัว ออกแบบ และใช้แผง คุณสมบัติ แทน
ปุ่ม <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>">

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

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

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

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

หากต้องการเพิ่มการตั้งค่าไปยังแท็บ สไตล์ คุณต้องทําสิ่งต่อไปนี้:

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

ส่วนย่อยต่อไปนี้อธิบายวิธีการทําแต่ละอย่างเหล่านี้

เพิ่มเมตาแท็กเพื่อสร้างการตั้งค่า

แท็กที่จําเป็น <meta> จะอยู่ในรูปแบบต่อไปนี้:

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

โดยที่:

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

Note

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

Note

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

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

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

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

โดยที่:

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

สําคัญ

คุณสามารถใช้ได้เฉพาะคู่ของข้อคิดเห็น 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 เมตาแท็กที่สร้างสองการตั้งค่าสําหรับการควบคุมรูปภาพฮีโร่ (แบนเนอร์) ในเอกสาร ที่มีตัวควบคุมที่เรียกว่า "รูปภาพ Hero" และ "ความสูงของรูปภาพ Hero" บนแท็บ สไตล์ คุณสมบัติ 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">
  • Last updated on