Webmonster Lab สอนทำเว็บไซต์ WordPress SEO เพื่อธุรกิจยุคใหม่ - LogoWebmonster Lab สอนทำเว็บไซต์ WordPress SEO เพื่อธุรกิจยุคใหม่ - LogoWebmonster Lab สอนทำเว็บไซต์ WordPress SEO เพื่อธุรกิจยุคใหม่ - LogoWebmonster Lab สอนทำเว็บไซต์ WordPress SEO เพื่อธุรกิจยุคใหม่ - Logo
  • บทความ/ฮาวทู
    • Videos – How to
    • WordPress
    • Design
    • Marketing
    • Tips & Trick
    • Free Tools
    • Inspiration
  • คอร์สเรียน
  • เกี่ยวกับ
    • Portfolios
    • ประวัติการทำงาน
    • ติดต่อ
  • Follow me
    • Facebook
    • YouTube
✕

แจก Free – Bootstrap Grid 12 Columns Desktop 1170px (PSD/AI)

Published by Yui Kanchita
Categories
  • Free Tools
Tags
  • design
  • theme
  • website
  • wireframe
  • ของฟรี
แจก Free – 2016 Bootstrap Grid 12 Columns Desktop 1170px (PSD/AI)
  • Facebook iconFacebook
  • Twitter iconTwitter
  • LINE iconLine

เพื่อ UX/UI ที่ดี พี่ยุ้ยนี่แทบจะสิงจออยู่แล้น นั่งทำเส้น guides ตาลาย วิ๊ง…มากตอนเน้ ตอนแรกก็ download free – Bootstrap Grid System ที่เขาแจกกันมาใช้แหละ แต่ยังไม่ค่อยถูกใจเท่าไหร่ ก็เลยทำเองใช้เอง แล้วเอามาแจกฟรีดีกว่า ทีนี้เลยเข้าใจแล้วว่าตัวแจกฟรี กับตัวที่ต้องเสียเงินซื้อ มันแตกต่างกันอย่างไร อิอิ

พี่ยุ้ยทำมาให้ทั้ง 2 แบบเลย PSD และ AI Vector (CS5) ฟรี 100% จ้า หรือใครอยากจะโอนเงินให้ก็ได้นะ ฮ่าๆๆ …เดินมากอดพี่ยุ้ยแน่นๆ 1 ทีพอละจ้ะ สำหรับกำลังใจ

Download – Bootstrap Grid 12 Columns Desktop 1170px (PSD/AI)

ดาวน์โหลด Grid PSD (ฟรี) ดาวน์โหลด Grid AI (ฟรี)

พรีวิวกันดีกว่าแมะว่าในไฟล์มีอะไร ใช้ยังไง (สำหรับมือใหม่)

  • เปิดไฟล์ขึ้นมาแล้วเลือก เปิด/ปิด Layer ได้ค่ะ …ปิดเครดิตได้นะ ไม่ว่า อิอิ :}
  • สำหรับไฟล์ AI พี่ยุ้ย Lock Layer ไว้บางตัว กันไปจิ้มโดนแล้วมันเลื่อน
  • ตัว Desktop นี้ทำมาที่หน้าจอ 1366px จะได้เห็นภาพรวมของจริงเวลาวาง Layout ที่ 1170px
  • พี่ยุ้ยทำเส้น guides ให้เรียบร้อยแล้ว กด Ctrl + ; เพื่อโชว์หรือซ่อนเส้น guides ได้
  • ทำ Column บวกลบเลข มาให้ด้วย จะได้เห็นชัดๆ ไม่ต้องกดเครื่องคิดเลขบ่อยๆ (อันนี้ inner ตัวเอง)
  • เปลี่ยนสีเองได้ตามใจชอบ
  • วิธีใช้:  New Layer ขึ้นมาให้อยู่ใต้ Layer ของ Grid
    แล้วลด opacity ที่ Layer Grid หรือปิดไปเลย ใช้แต่เส้น guides ก็ได้จ่ะ
    ตัว Column สีฟ้าๆ เพิ่มความสูงให้มันด้วยการจับทีเดียวทั้งแผง แล้วลากยาวๆ ลงมา

PSD – Bootstrap Fluid Grid

Large Displays > 1200px Width
70px Colums, 30px Gutters, 1170px Total Grid Width
(1 Column มี Gutter 15px (ซ้าย-ขวา) เมื่อ 2 ตัวมาชนกันจึงมี Gutter เท่ากับ 30px)

bootstrap-grid-12col-1170px-psd-webmonsterlab

AI – Bootstrap Fluid Grid

Large Displays > 1200px Width
70px Colums, 30px Gutters, 1170px Total Grid Width
(1 Column มี Gutter 15px (ซ้าย-ขวา) เมื่อ 2 ตัวมาชนกันจึงมี Gutter เท่ากับ 30px)

bootstrap-grid-12col-1170px-ai-webmonsterlab

ตัวอย่าง Mockup – Webmonster Lab

ใช้ WordPress Theme ที่ออกแบบด้วย Bootstrap Grid System 1170px
bootstrap-grid-12col-1170px-mockup-guides2-webmonsterlab
bootstrap-grid-12col-1170px-mockup-grid-webmonsterlab
bootstrap-grid-12col-1170px-mockup-columns-webmonsterlab

Resource/บทความ/รูปภาพ : Webmonster Lab | Yui Kanchita

  • Facebook iconFacebook
  • Twitter iconTwitter
  • LINE iconLine
Yui Kanchita
Yui Kanchita
เรียนจบนิเทศ + MBA รักการออกแบบเว็บไซต์ ux/ui ก็เลยเทรนตัวเองเพื่อทำเป็นอาชีพมาตลอด 20 ปี และยังคงทำต่อไปจ้า : ) About me

Related posts

free-background-generator-gradients-color
August 24, 2023

ฟรี! background พื้นหลังเท่ๆ gradients สวยๆ


Read more
สอนวิธีใช้ WordPress Elementor ออกแบบ Features รูปตรงกลาง - ตัวฟรี
July 28, 2023

[วิดีโอ] วิธีใช้ Elementor ตัวฟรี ออกแบบ Features แบบมีรูปตรงกลาง


Read more
วิดีโอ สอนวิธีใช้ Elementor ตัวฟรี ออกแบบเว็บไซต์ได้อิสระ
June 24, 2023

[วิดีโอ] วิธีใช้ Elementor ตัวฟรี ออกแบบเว็บไซต์ได้อิสระ


Read more

ค้นหาบทความ

✕
Ads banner - คอร์สเรียน สร้างเว็บไซต์ธุรกิจด้วย WordPress สำหรับมือใหม่

Webmonster Lab

บล็อกฮาวทู แชร์ความรู้การออกแบบ
เว็บไซต์ สำหรับมือใหม่!
วิธีทำเว็บไซต์ธุรกิจ แบบไม่เขียนโค้ด
WordPress, Elementor, UX/UI
ยุ้ย กัญญ์ชิตา
Web Design Expert

บทความล่าสุด

  • free-background-generator-gradients-color
    ฟรี! background พื้นหลังเท่ๆ gradients สวยๆ
    August 24, 2023
  • สอนวิธีใช้ WordPress Elementor ออกแบบ Features รูปตรงกลาง - ตัวฟรี
    [วิดีโอ] วิธีใช้ Elementor ตัวฟรี ออกแบบ Features แบบมีรูปตรงกลาง
    July 28, 2023
  • การออกแบบเว็บไซต์ที่ดี ไม่ใช่แค่มี
    การออกแบบเว็บไซต์ “ที่ดี” ไม่ใช่ “แค่มี”
    July 1, 2023
  • ลงคอร์สเรียนมาเยอะ ทำไม ทำไม่ได้สักที
    ลงคอร์สเรียนมาเยอะ ทำไม “ทำไม่ได้สักที”
    June 24, 2023
  • วิดีโอ สอนวิธีใช้ Elementor ตัวฟรี ออกแบบเว็บไซต์ได้อิสระ
    [วิดีโอ] วิธีใช้ Elementor ตัวฟรี ออกแบบเว็บไซต์ได้อิสระ
    June 24, 2023

บทความแนะนำ

  • ทำไมธุรกิจจำเป็นต้องมี Website ในเมื่อใช้ Social ฟรีๆ ได้นี่นะ
    ทำไมธุรกิจจำเป็นต้องมี Website ในเมื่อใช้ Social ฟรีๆ ได้นี่นะ
    January 13, 2020
  • วิธีการติดตั้ง WordPress บน localhost (XAMPP)
    วิธีการติดตั้ง WordPress บน localhost (XAMPP) สอนละเอียดยิบ
    June 27, 2014
  • wordpress-updates
    คุณก็อัพเดท WordPress ได้ด้วยตัวเอง
    April 2, 2014

Tags

add-ons Branding browser code color content CSS design Digital Marketing elementor font Google How To HTML image install WordPress life localhost MS-Office plugins SEO social theme tool tools twitter update UX/UI Webmaster website wireframe WooCommerce WordPress work-life xampp การตลาด ของฟรี ความรู้ คอร์สเรียน ทำเองได้ ธุรกิจ พัฒนาตนเอง รูปภาพ แก้ปัญหา

© Webmonster Lab. All rights reserved.
บทความในบล็อกนี้ ยุ้ยเขียนและจัดทำขึ้นเองทั้งหมดค่ะ อนุญาตให้เผยแพร่เนื้อหาบทความและนำไฟล์ที่แจกไปใช้ได้ฟรี เพื่อการแบ่งปันสิ่งดีๆ :)
โดยขอให้คุณอ้างอิงแหล่งที่มา
link กลับมาหน้าเว็บที่นำไปใช้ด้วยทุกครั้งนะคะ
❤︎
พี่ยุ้ย กัญญ์ชิตา

093-649-5544


ห้องเรียนคอร์สตัวต่อตัว อยู่ที่แอมพาร์ค จุฬา
รับสอนเพียงเดือนละ 4 คิว

ข้อตกลงการใช้งานเว็บไซต์ | นโยบายข้อมูลส่วนบุคคล
ตั้งค่าคุกกี้

© 2023 Webmonster Lab. All Rights Reserved.
Created with ❤︎ Kanchita Varitthinanon
การยอมรับคุกกี้
เว็บไซต์นี้ใช้ระบบคุกกี้เพื่อให้คุณได้รับประสบการณ์ที่เกี่ยวข้องกับคุณ คุณสามารถเลือกให้ความยินยอมทั้งหมดหรือเฉพาะบางส่วนได้โดยเข้าไปที่ "Cookie Settings"
ตั้งค่าคุกกี้ ปฏิเสธ ยอมรับทั้งหมด
Manage consent

Privacy Overview

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

Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
คุกกี้ที่ใช้งานฟังก์ชัน
คุกกี้ที่ใช้งานได้ช่วยดำเนินการฟังก์ชันบางอย่าง เช่น การแบ่งปันเนื้อหาของเว็บไซต์บนแพลตฟอร์มโซเชียลมีเดีย รวบรวมคำติชม และคุณสมบัติอื่นๆ ของบุคคลที่สาม

Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
คุกกี้เพื่อประสิทธิภาพ
คุกกี้เพื่อประสิทธิภาพ ใช้เพื่อทำความเข้าใจและวิเคราะห์ดัชนีประสิทธิภาพหลักของเว็บไซต์ซึ่งช่วยในการมอบประสบการณ์ผู้ใช้ที่ดีขึ้นสำหรับผู้เยี่ยมชม

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
คุกกี้เพื่อการวิเคราะห์
คุกกี้เพื่อการวิเคราะห์ ใช้เพื่อทำความเข้าใจว่าผู้เยี่ยมชมโต้ตอบกับเว็บไซต์อย่างไร คุกกี้เหล่านี้ช่วยให้ข้อมูลเกี่ยวกับตัวชี้วัดจำนวนผู้เข้าชม อัตราตีกลับ แหล่งที่มาของการเข้าชม ฯลฯ

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
คุกกี้เพื่อการโฆษณา
คุกกี้เพื่อการโฆษณา ใช้เพื่อจัดเตรียมโฆษณาและแคมเปญการตลาดที่เกี่ยวข้องให้แก่ผู้เยี่ยมชม คุกกี้เหล่านี้ติดตามผู้เยี่ยมชมเว็บไซต์และรวบรวมข้อมูลเพื่อจัดหาโฆษณาที่ปรับแต่งเอง

Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
คุกกี้ที่ไม่ได้จัดประเภทอื่นๆ
คุกกี้ที่ไม่ได้จัดประเภทอื่นๆ คือคุกกี้ที่กำลังวิเคราะห์และยังไม่ได้จัดประเภทเป็นหมวดหมู่

Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT