>

การพัฒนา Web Layout ด้วย CSS และ HTML วาง Icon Images

วิธีการปรับ CSS ให้กับ Background ของ WordPress และวาง Layout ให้ตอบสนอง กับ SEO อย่างมีคุณภาพ ถือเป็นงาน On-Page ที่ทำได้ไม่มีวันจบสิ้น ทาง Search Monopoly ได้สร้างชิ้นงาน อันหนึ่ง โดย มีการปรับ เนื้อหา หน้า Homepage ขึ้นมาใหม่ หลังจากที่เผชิญปัญหา เดียวกัน กับ นักพัฒนาเว็บ ค่าย WordPress ที่เผชิญกัน ก็คือ การนำ Theme ที่ซื้อมาใช้ แต่ Theme ไม่ตอบสนองกับ Web Server ผู้ให้บริการ ทำให้ Engine ทำงานหนัก แล้วเกิดสภาวะ เว็บล่มบ่อย จนทำให้ อันดับทั้ง เว็บไซต์ ตกลงมามาก อย่างที่ Search Monopoly เอง นั้นได้เผชิญอยู่

ปีนี้ และ ตั้งแต่ปี 2018 เป็นต้นมา ทาง Search Monopoly ได้นำเนิน นโยบาย ปรับแผนการพัฒนาธุรกิจ และ ปรับขั้นตอนการทำงาน ที่ให้ผลลัพธ์ได้ดีกว่า แล้วก็หา ตัวช่วย เครื่องทุ่นแรง อีกทั้งนำกระบวนการทำงานที่ลดขั้นตอน ที่สิ้นเปลืองออกไป แต่ยังคงช่วยเหลือพัฒนา ธุรกิจให้แก่ SME ที่มี ศักยภาพ ได้อยู่ โดยการ ลด Scale ของการจัด Event ที่สิ้นเปลือง และไม่ก่อให้เกิดประโยชน์ออกไป โดยมุ่งหวังเพียงแต่ กลุ่มบริษัท SME ที่มี Potential เท่านั้น และให้แต่ละทีม ทำงานร่วมกันได้ง่าย และยังส่งเสริมในการพัฒนา เครือข่าย การช่วยเหลือกันทาง การทำอันดับ และ ศึกษาการทำ SEO ทั้งสาย Technique และสายบริหาร ธุรกิจ

บทความนี้ เราได้ทำเป็นแผนงานเชิง Experiment โดยสร้าง Properties เพื่อการผลิต ชิ้นงานในส่วนของ Home Page เพื่อเป็นแนวทางให้กับ ผู้ประกอบการ SME ที่กำลังศึกษา การสร้างเว็บ ด้วย WordPress และสามารถ ทำ Landing Page ได้อย่างถูกต้อง ตรงตามหลักการของการทำ Conversion Optimization โดยเน้นการปรับ Key Messages ที่ลึกซึ้งและ การสื่อสารกับผู้ใช้งานในเว็บเรา ได้อย่างครบถ้วนและใช้งานง่ายกว่าเดิม

Specifications;
Color Scheme = “Orange Black Service icons”
Implementation = “text decoration css3” , “CSS text-decoration Property” , “Text Decorations

การปรับ สี WordPress Theme ด้วย CSS ฉบับ คนเขียน Code ไม่เป็น

วันนี้ ระบบ War Room ได้สอน การทำโฆษณา ออนไลน์ ด้วย Google AdWords ไปช่วงระยะเวลานานแล้ว
ลูกค้า และผู้เรียนรู้ ต่างตื่นเต้นกับการปรับแก้ไขเว็บไซต์ (ที่เปรียบดั่ง หน้าตาร้านค้า หรือ ทำเลธุรกิจ) ของตนเองให้สวยงาม และ อาจล้อกับ สีของ Marketing Object อื่นๆ เพื่อให้ไปในทิศทางเดียวกัน

อิทธิพลของสี และการปรับ CSS

 

วันนี้ ทาง Search Monopoly ได้ [Request] ให้ช่วยเหลือ เรื่องการปรับแต่ง โทนสี ให้ดูดีขึ้น

ปัญหาของ ผู้ใช้งาน หรือ ลูกค้า ที่ไม่มีพื้นฐาน การปรับ Layout / UX / Design และไม่มีพื้นฐานงาน Coding – Programming มาก่อน เราจะกลัวกันไปเอง ว่าการทำเว็บ WordPress นั้น ยาก และ ไกลเกินเอื้อม

แต่ LOGO Search Monopoly size 45pxSearch Monopoly อยากบอกว่า — มันไม่ยากอย่างที่คิดครับ การปรับหน้าตาเว็บ ล้วนเป็นเรื่องสนุก เอาใจใส่
เราจะอยู่กับเว็บไซต์ของเราไปนานๆ – และให้มองว่า เว็บคือ ทำเลทอง เป็น Real Estate ของเราเองครับ
ใครทำมาก ได้มาก ใครทำน้อยได้น้อย ใครไม่ทำ จ้างเอา ก็เสียเลือดเยอะ // ฉนั้น ใครงบจำกัด เข้ามาเรียนรู้กับ Search Monopoly ครับ โดยเฉพาะ หลักสูตรของระบบ “The War Room” เรามีสอนในเรื่องการวาง โครง Layout / UX และการจัดทำเนื้อหา ให้สอดประสานกับการทำโฆษณา และ SEO – Organic Traffic อย่างดีเยี่ยม มี LOGIC ที่พิสูจน์ได้ครับ เรียนรู้ อย่างเป็นเหตุเป็นผล เรียนสนุกได้เพื่อนทางธุรกิจที่หลากหลายให้เหมาะสมกับ หน้าตาธุรกิจ เราจึงเขียนบทความนี้แบบ Step By Step มาให้ลองเล่นกันดูนะครับ

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

STEP 1 – ติดตั้ง FireFox ก่อนครับ

ความจริง จะใช้ Google Chrome ก็ได้ครับ คือๆกัน แต่ บทเรียนนี้ ขอใช้ tool เป็น FireFox ก่อนนะครับ

ติดตั้งเสร็จแล้ว ให้ LOG IN Admin Dashboard ใน Web WordPress ของเราเองครับ
เมื่อเรา เข้า WordPress ด้วย บัญชี Admin ของเราเองได้แล้ว

ให้เข้าไปที่ Dashboard ครับ แล้ว ดูตามภาพครับ ให้กดคลิ๊กไปที่ “Appearance”
มันจะขึ้น Tab Menu ให้คลิ๊กที่ Editor

 

 

STEP 2 – กลับมาที่ หน้า Home Page ของเราครับ เข้าผ่าน FireFox ครับ

สังเกต สีของหน้าตาเว็บ เป็นสีเขียว ตุ่นๆ แลดู ไม่ดี ไม่มีสง่าราศีเลย เราจะทำการ ตรวจสอบว่า สี ของ Header หน้า Home Page นั้น ซ่อนอยู่ตรงไหนของ CSS. ให้ทำตามขั้นตอนต่อไปได้เลยครับ

 

STEP 3 – ใช้ Inspecting Element Tool ใน FireFox ครับ (Chrome ก็ได้)

3.1 เลื่อนหัว เมาส์ไปที่ พื้นที่ สี ที่เราอยากเปลี่ยน
3.2 คลิ๊กขวา 1 ครั้ง
3.3 คลิ๊กที่ Inspect Element (Q) —-> กด Q แทนการคลิ๊กได้ครับ

ถ้าทำถูก เราจะพบ แถบรายงาน ที่ชื่อว่า “Inspector” ในหน้าจอ Browser ของเราครับ

STEP 4 – หา code CSS และ สีที่เราจะแก้ไข

จากภาพ พอลอง Inspect. ดูแล้ว เราจะเห็น ฝั่งขวามือของหน้าจอครับ

 

สังเกตคำว่า “style.css” (อันนี้ WordPress Theme ฟรีๆ มักจะใช้ CSS ชื่อนี้) ถ้าเจอแปลกแหวกแนวกว่านี้ ไม่ต้องตกใจครับ กินยานอนหลับ แล้วนอนให้สนิท แล้ว พรุ่งนี้เช้าค่อยโทรมาติดต่อผม เดี๋ยวเข้าไปดูให้ครับ

ในภาพ เราจะเห็นว่า Theme ตัวนี้ มีการใส่สี Header Background ในบรรทัดที่ “682”
โดย code ที่ใช้ control สี คือ

.site-header {
background: #4F4F00;

นั่นแหละครับ สีที่เราจะแก้ไข คือ “#4F4F00” ต้องเปลี่ยนเป็น code สีอันอื่นครับ

 

STEP 5 – มาหาสีในดวงใจกันครับ

เข้าไปที่เว็บ “http://www.computerhope.com/htmcolor.htm”

ผมใช้ตัวนี้ ครับ ในการค้นหาสีที่อยากเอามาระบายใน web layout / WordPress Theme ของเราครับ

จากรูป ให้เรากด Colore Shade ที่เราต้องการเลยครับ ชอบแดงกดแดง ชอบฟ้ากดฟ้า
ตัวอย่างนี้ผมเลือกไปที่ น้ำเงินครับ

 

STEP 6 – copy code สี ที่เราชอบครับ

เมื่อกด shade สีที่เราต้องการแล้ว *** ใช้เวลาเลือกนานๆหน่อยครับ อย่าเอาอย่างผม เปลี่ยนบ่อย งานไม่เดิน เลือกแล้วเลือกเลย อย่าแก้ไปมา มันจะไม่จบ

ในภาพ เราเลือกสี น้ำเงินเข้มครับ


เอาหล่ะ ตอนนี้ STEP 1 – 6 คือ PART A เป็นการเตรียมงาน
ต่อไป Part B – คือการ ลงมือเปลี่ยน code สีจริงจังแล้ว

สรุป PART A)

1) code สีเดิม = #4F4F00
2) code สีใหม่ = #000050
3) ตำแหน่ง ไฟล์ = style.css
4) บรรทัดที่ต้องแก้ = 682
5) code control สี

.site-header {
 background: #4F4F00;

 

PART B)
Step 7 – การเข้าไปแก้ไข CSS ใน WordPress File Editor

อันที่จริง ถ้าอยาก AdVance กว่านี้ ติดตั้ง Plugin เป็น CSS Controlor หรือ CSS Custom ก็ได้ครับ
แต่ search Monopoly คิดว่า ลัดขึ้นตอนดีกว่าครับ

เข้าไปที่ Appearance > Editor
เลือกไฟล์ stylesheet ตามภาพครับ ถ้าปกติที่พบบ่อย จะเป็นไฟล์ style.css

 

STEP 8 – control + F ค้นหา code ที่เราจะแก้ครับ

ให้ใส่คำว่า .site-header {


*** อาจไม่เหมือนกันนะครับ อย่าตกใจ ถ้าไม่เหมือน ให้กลับไปฝึก Inspect ดีๆ แล้วจะรู้ว่า บรรทัดที่ต้องใส่คืออะไร ตัวไหน
ตัวอย่าง CSS ของเว็บนี้ ใช้ code ว่า “.site-header {”

พอใส่ปุ๊บ Find ปั๊บ เราจะพบ บรรทัด code ที่อยู่ใน CSS อันนี้ครับ ตามภาพ

 

STEP 9 – นำ code code สีใหม่ = #000050 ไปแทน code สีเดิม = #4F4F00

Copy เอา #000050 ลงไปแทน #4F4F00 ครับ แล้วกดปุ่ม สีฟ้าๆ “Update File”

แค่นี้เป็นอันเสร็จครับ

ชีวิตไม่ยากครับ แก้ปัญหาทีจะจุด อย่ารีบ
งานเว็บ สนุก ปล่อยให้ระบบพังๆ อย่าไปยึดความ “Perfect”

งาน Online Marketing ไม่มี Perfect ครับ มีแต่ การเรียนรู้ และการเปลี่ยนแปลง

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

บางที แก้สีแค่นี้ หากผู้ประกอบการไม่รู้ โดน Charge ไปแล้ว 7,500 บาทครับ

< แก้ 1 บรรทัด ใช้เวลา 3 นาที เท่านั้น >
แก้งานเสร็จแล้ว
อย่าลืมตรวจสอบ Pageload Speed ด้วย FireBug นะครับ
ผมค่อนข้าง Serious กับ Site Performance มั่นใจเสมอว่า การแก้ code ไม่ทำให้ site Performance Drop โดยเด็ดขาด สำหรับคนที่อยากยึดหัวหาดทางฝั่ง SEO / Organic.
เอ้าจบแล้ว หากสนใจอยากเรียน ลึกๆ แบบโหดๆ โค่นคู่แข่ง ประหยัดต้นทุน แนะนำ การเรียนรู้ที่ระบบ “The War Room” ครับ
ของดี ให้ฟรี มีน้อยๆ แต่ให้ด้วยใจ สังคมเล็กๆ ค่อยๆเติบโต

คู่แข่งไม่ทำ เราทำมากกว่าคู่แข่ง — สุดท้าย ใครถึก ก็ชนะตลาดไปครับ

WordPress Theme สำหรับ โรงงาน และอุตสาหกรรม

หากคุณกำลังสนใจ ออกแบบเว็บทางด้านอุตสาหกรรมให้ลูกค้า ทางเราขอแนะนำ Theme ที่ตอบสนองการทำ SEO ที่ดีมากๆ

KEYWORD การค้นหา : wordpress theme industry

http://www.templatemonster.com/demo/54938.html
http://www.templatemonster.com/category/industrial-wordpress-themes/
http://www.templatemonster.com/demo/52370.html

เปลี่ยน WordPress theme มาเป็นแบบ BASIC สุดๆ

กลับมา เรียนรู้เรื่อง wordpress อีกครั้ง ได้เวลามากขึ้นกับการเขียนบล๊อกส่วนตัว
หลังจากไปทำงานสาย วิเคราะห์ ข้อมูล ในอินเตอร์เน็ต เป็นเวลานานเสียนานมากๆ

ผมกลับมาดูแลเว็บ SEARCH MONOPOLY ของตนเองอีกครั้ง และเข้ามาดู สถิติการเข้าชม ที่ลดน้อยถอยลง

เว็บไซต์ แบบ แนวโรงงาน – การออกแบบ Web Design สำหรับโรงงาน

การออกแบบเว็บไซต์ ที่เหมาะสมกับการนำไปใช้ในธุรกิจโรงงานอุตสาหกรรม ดูดี มีมาตรฐาน เพื่อความน่าเชื่อถือที่สูง
เว็บที่ออกแบบแนวโรงงาน ต้องดี ใหญ่ หนักแน่น ชัดเจน ไม่อ้อมค้อม
ผู้ Deal งาน ใช้ความจริงจัง

เนื่องจาก ฝ่ายจัดซื้อ ของลูกค้าเรา เขาเลือกเว็บที่ดูน่าเชื่อถือกว่า

การเอาของหลักล้านๆ ธุรกิจพันล้าน ไปถ่ายรูปลงเล่นๆ ใน FACEBOOK แฟนเพจ ถือว่าไม่มีความเป็นมืออาชีพ กลายเป็นธุรกิจในครัวเรือน ยิ่งดูแล้ว จะน่าเชื่อถือในสายตาลูกค้าหรือเปล่า?

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

http://www.djavaweb.com/selector.php?theme=billio
http://www.templatemonster.com/demo/52551.html
http://www.templatemonster.com/demo/52707.html
http://themeforest.net/item/industriple-multi-industrial-wordpress-theme/full_screen_preview/12142283?ref=freshdesignweb
http://themeforest.net/item/enhenyero-engineeringindustrial-wordpress-theme/full_screen_preview/11720776?ref=freshdesignweb
http://www.templatemonster.com/demo/54938.html
http://themeforest.net/item/bizspeak-responsive-industrial-wp-theme/full_screen_preview/12816780?ref=freshdesignweb
http://themeforest.net/item/factory-industrial-business-wordpress-theme/full_screen_preview/14026307?ref=freshdesignweb