[et_pb_section bb_built=”1″ fullwidth=”on” specialty=”off”][et_pb_fullwidth_header _builder_version=”3.0.85″ title=”รูปภาพ (ซ้าย) – พร้อมคำอธิบาย DIVI (ขวา)” text_orientation=”center” header_fullscreen=”off” header_scroll_down=”off” image_orientation=”center” background_layout=”light” content_orientation=”center” custom_button_two=”off” button_two_icon_placement=”right” custom_button_one=”off” button_one_icon_placement=”right” /][/et_pb_section][et_pb_section bb_built=”1″ fullwidth=”off” specialty=”off” _builder_version=”3.0.85″][et_pb_row _builder_version=”3.0.85″][et_pb_column type=”4_4″][et_pb_text admin_label=”FULL WIDTH HEADER” _builder_version=”3.0.86″ background_layout=”light”]
Full Width Header
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.85″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601107174029-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.85″ background_layout=”light”]
- รูปภาพทางด้านซ้ายที่เห็นนี้จะเป็นการใช้ Header แบบ Full Width โดยใช้พื้นหลังเป็นสีน้ำเงินและมี Title เป็น Page Title และ Sub Heading Text เป็น “Here is basic page………….” ที่จะได้อธิบายต่อในภาพถัดไป
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.85″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601107174006-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.85″ background_layout=”light”]
- 1 จากาพด้านบนนั้นเราจะใช้ Full width Section และ module อย่าง Full Width Header เป็นพื้นฐานในการสร้าง
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.85″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601107174046-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.85″ background_layout=”light”]
- 2 ส่วนภาพนี้จะแสดงถึงการใส่คำพูดที่บริเวณ Title และ Sub-headings เพื่อเพิ่มรูปแบบเหมือนภาพในข้อ 1.
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section bb_built=”1″ fullwidth=”off” specialty=”off” _builder_version=”3.0.85″][et_pb_row _builder_version=”3.0.85″][et_pb_column type=”4_4″][et_pb_text admin_label=”TEXT FOR TWO COLUMNS” _builder_version=”3.0.86″ background_layout=”light”]
ตัวหนังสือ 2 คอลัมน์ // STANDARD SECTION
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.85″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601107174127-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.85″ background_layout=”light”]
2. ข้อความแบบสองคอลั่มจะแสดงตามภาพที่ได้เห็นซึึ่งจะมีรายละเอียดในการตั้งค่าตามรูปต่อๆไป
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.85″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601107174115-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.85″ background_layout=”light”]
2.1 การตั้งค่าตามด้านบนนั้น ผู้ใช้งานจำเป็นที่จะต้องเลือก Standard Section / Colum แบบ 1/2 || 1/2 (แบ่งครึ่งโดยเท่ากัน) หลังจากนั้นทำการเลือก Module เป็น Text ทั้งสองฝั่ง
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.85″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601107174136-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.85″ background_layout=”light”]
2.2 หลังจากนั้นให้ผู้ใช้งานเข้าไปพิมพ์คำหรือประโยคที่ต้องการในส่วนของ CONTENT
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section bb_built=”1″ fullwidth=”off” specialty=”off” _builder_version=”3.0.85″][et_pb_row _builder_version=”3.0.85″][et_pb_column type=”4_4″][et_pb_text admin_label=”TEXT FOLLOWED BY IMAGE” _builder_version=”3.0.86″ background_layout=”light”]
ภาพและตามด้วยตัวหนังสือ
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.85″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601107174313-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.85″ background_layout=”light”]
3. รูปแบบการแสดง DIVI ในลักษณะนี้ค่อนข้างได้รับการใช้งานมากและมีความยืดหยุ่นในการใช้งานมากทีเดียว
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.85″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601107174319-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.85″ background_layout=”light”]
3.1 ส่วนภาพนี้จะเป็นการแสดงรูปแบบการตั้งค่า DIVI ในการใช้ TEXT (ตัวหนังสือ) และ IMAGE (รูปภาพ) ซึ่งผู้ใช้งานสามารถตั้งค่าในลักษณะนี้ได้โดยเริ่มต้นที่การเลือก STANDARD SECTION จากนั้นให้ทำการเลือกคอลั่มเดี่ยวและเพิ่มโมดุล (MODULE) จากนั้นตามด้วย IMAGE
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.85″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601107174327-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.85″ background_layout=”light”]
3.2 หลังจากนั้นให้ผู้ใช้งานเพิ่มคำพูดต่างๆที่ต้องการในโมดุล TEXT ที่บริเวณ CONTENT
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.85″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601107174333-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.85″ background_layout=”light”]
3.3 หลังจากนั้นผู้ใช้งานสามารเพิ่มรูปาพตามที่ต้องการเพื่อให้รูปาพที่ถูกเลือกเข้ามาอยู่ที่ใต้ภาพตามภาพด้านบนสุดของหัวข้อนี้ (3)
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section bb_built=”1″ fullwidth=”off” specialty=”off” _builder_version=”3.0.85″][et_pb_row _builder_version=”3.0.85″][et_pb_column type=”4_4″][et_pb_text admin_label=”HALF IMAGE / HALF TEXT” _builder_version=”3.0.86″ background_layout=”light”]
ภาพกับตัวหนังสืออย่างละครึ่ง
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.85″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601107175003-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.86″ background_layout=”light”]
4 รูปทางซ้ายแสดงลักษณะการแบ่งคอนเท้นท์โดยใช้ภาพและคอนเท้นท์อย่างละครึ่งโดยเท่ากัน
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.85″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601107191619-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.85″ background_layout=”light”]
4.1 อย่างไรก็ตามการแบ่งรูปาพและตัวอักษรอย่างละครึ่งนี้ไม่ได้ใช้ Text ทางด้านขวาแต่เปลี่ยนไปใช้เป็น Call To Action ที่สะดวกในการแสดงปุ่มให้ลูกค้ากดเพื่อทำรายการได้ง่ายกว่า Call To Action นั้นไม่ได้แตกต่างจาก Text มากนักโดยเน้นไปที่การกดให้ลูกค้าทำรายการได้เร็วขึึ้นเท่านั้น
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.85″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601107175012-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.85″ background_layout=”light”]
4.2 ขั้นต่อมาคือการกำหนดรูปาพทางฝั่งซ้าย
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.85″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601107175033-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.85″ background_layout=”light”]
4.3 อีกขั้นนึงคือการใส่เนื้อหาในโมดุลฝั่งขวานั่นก็คือ Call To Action
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section bb_built=”1″ fullwidth=”off” specialty=”off” _builder_version=”3.0.85″][et_pb_row _builder_version=”3.0.85″][et_pb_column type=”4_4″][et_pb_text admin_label=”SLIDER” _builder_version=”3.0.86″ background_layout=”light”]
ภาพสไลด์
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.86″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601108171417-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.86″ background_layout=”light”]
5. จากภาพด้านซ้ายแสดงการใช้ SLIDER ซึ่งในแบบ FULL WIDTH และ STANDARD SECTION ไม่ได้มีความแตกต่่างแต่อย่างใด
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.86″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601108171440-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.86″ background_layout=”light”]
5.1 สไลด์เดอร์ในตัวอย่างนี้จะประกอบไปด้วยสไลเดอร์ 2 สไลด์ซึ่งก็คือาพนี้และภาพถัดไป
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.86″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601108171447-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.86″ background_layout=”light”]
5,2 สไลเดอร์ที่ 2
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.86″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601108171452-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.86″ background_layout=”light”]
5.3 ภาพภายในโมดุล SLIDER แสดงให้เห็นสไลเดอร์สองเซคชั่น
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.86″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601108171458-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.86″ background_layout=”light”]
5.4 สิ่งที่ผู้ใช้งานต้องทำคือการเข้าไปเซ็ท HEADING หัวข้อภายในแต่ละสไลด์เพื่อสร้างเนื้อความเป็นอย่างน้อย
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.86″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601108171505-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.86″ background_layout=”light”]
5.5 นอกจากนั้นผู้ใช้งานยังต้องมาเพิ่มภาพพื้นหลังหรือสีพื้นหลังให้กับสไลด์เพื่อเพิ่มสีสันเข้าไปซึ่งภาพนี้คือการเพิ่มภาพหลังให้กับสไลด์แรก
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.86″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601108171512-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.86″ background_layout=”light”]
5.6 ส่วนภาพนี้เป็นการใส่หัวข้อให้กับสไลด์ที่ 2
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.86″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601108171519-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.86″ background_layout=”light”]
5.7 ส่วนภาพท้ายสุดนี้เป็นการใส่ภาพพื้นหลังให้กับสไลด์ที่ 2
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section bb_built=”1″ fullwidth=”off” specialty=”off” _builder_version=”3.0.85″][et_pb_row _builder_version=”3.0.85″][et_pb_column type=”4_4″][et_pb_text admin_label=”YOUTUBE” _builder_version=”3.0.86″ background_layout=”light”]
การเพิ่มวีดีโอ YOUTUBE
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.86″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601108171529-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.86″ background_layout=”light”]
6. การเพิ่มวีดีโอเข้าไปในเว็บเราจะใช้โมดุล CODE พร้อมใช้วิธีการฝัง
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.86″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601108171806-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.86″ background_layout=”light”]
6.1 ให้ผู้ใช้งานเสิร์ชหาวีดีโอที่ต้องการบน YOUTUBE หลังจากนั้นเมื่อเข้าไปสู่วีดีโอที่ต้องการแล้วให้กดที่ปุ่มแชร์ตามภาพ
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.86″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601108171816-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.86″ background_layout=”light”]
6.2 หลังจากนั้นให้ผู้ใช้งานเลือกกดปุ่มฝัง (EMBEDDED) เพื่อเอาโค้ดที่ได้ไปฝังในโมดุลของเรา
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”1_2″][et_pb_image _builder_version=”3.0.86″ src=”http://km.incart.co/wp-content/uploads/2017/11/snip_25601108171545-1.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.0.86″ background_layout=”light”]
6.3 นำเอาโค้ดที่ได้จาก YOUTUBE เข้ามาวางบนพื้นที่ว่างฟิลด์ CODE เพื่อสิ้นสุดขั้นตอนการวางวีดีโอบนเว็บ
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]