Home-theater-designers
Desain web lebih mudah diakses dari sebelumnya, tetapi masih membutuhkan banyak pekerjaan -- dan banyak keterampilan -- untuk menghasilkan hasil yang terlihat profesional.
Untungnya, Anda tidak perlu memulai dari awal setiap saat. Ada ribuan template CSS gratis yang tersedia secara online, semuanya menganut tren dan teknologi desain modern. Anda dapat menggunakannya dalam bentuk aslinya, atau menyesuaikannya untuk menjadikannya milik Anda.
Dalam panduan ini kita akan melihat lebih dekat pada template CSS, dan di mana menemukannya.
Apa Itu Template CSS?
Template CSS tidak hanya berisi CSS: template ini memberi Anda semua yang Anda butuhkan untuk membuat situs web yang berfungsi penuh. Saat Anda mengunduhnya, Anda biasanya akan mendapatkan folder yang berisi berikut ini:
- file HTML -- Anda akan mendapatkan file HTML untuk setiap halaman situs web. Ini akan berisi contoh teks dan gambar yang harus Anda ganti dengan konten Anda sendiri. Anda juga harus dapat menyesuaikan data meta, yang berkaitan dengan hal-hal seperti deskripsi situs.
- file CSS -- Anda biasanya mendapatkan satu file CSS utama yang berisi semua gaya untuk situs, ditambah tambahan seperti lembar gaya reset, atau satu untuk font web.
- File Javascript -- Jika situs berisi fungsi Javascript, idealnya mereka harus disertakan dalam file terpisah mereka sendiri, daripada dimasukkan ke dalam dokumen HTML.
- Gambar, font, dan ikon -- Setiap gambar yang digunakan dalam template juga harus disertakan. Anda mungkin ingin menyimpan hal-hal seperti ikon dan latar belakang, tetapi perlu mengganti gambar placeholder lainnya dengan gambar Anda sendiri. Beberapa font khusus mungkin juga disertakan.
Tidak seperti kebanyakan jenis template lain yang akan Anda temui -- baik itu Wordpress, Excel, atau template InDesign -- Template CSS memang membutuhkan sejumlah pengetahuan teknis.
Tidak ada antarmuka yang ramah untuk mengeditnya, jadi Anda harus tahu setidaknya bagaimana menemukan jalan di sekitar dokumen HTML hanya untuk menambahkan konten Anda sendiri. Untuk membuat kustomisasi Anda sendiri, Anda memerlukan pengetahuan yang layak tentang CSS .
bagaimana cara menghentikan video agar tidak otomatis diputar di firefox
Apa yang Harus Diperhatikan dalam Template CSS
Ada begitu banyak template CSS gratis untuk dipilih. Jadi bagaimana Anda tahu mana yang tepat untuk Anda? Berikut adalah beberapa hal yang harus diperhatikan:
- Desain -- Jelas, Anda menginginkan situs yang terlihat bagus dan mencerminkan gambar apa pun yang ingin Anda gambarkan. Namun pertimbangkan juga apakah template tersebut tepat untuk kebutuhan Anda baik saat ini maupun di masa yang akan datang. Banyak untuk situs web satu halaman; beberapa dirancang untuk beberapa halaman. Jika Anda membutuhkan yang terakhir, pertimbangkan apakah Anda mungkin lebih baik menggunakan CMS seperti Wordpress.
- Dioptimalkan untuk Seluler -- Penggunaan web seluler sekarang lebih tinggi daripada desktop, jadi situs Anda harus berfungsi dengan baik di ponsel cerdas. Template CSS apa pun yang layak harus menggunakan desain responsif sehingga situs bekerja dengan sempurna di layar berukuran apa pun. Jika yang Anda pilih tidak, beralihlah ke yang melakukannya.
- Ditulis dengan baik -- Unduh template dan lihat kodenya sebelum Anda berkomitmen untuk menggunakannya. Itu harus bersih, terstruktur dengan baik, dan mudah diedit. Itu juga harus sadar SEO, dengan penggunaan tag judul dan heading yang benar.
- Lisensi -- Pastikan untuk memeriksa lisensi untuk template CSS pilihan Anda. Banyak tersedia di bawah lisensi Creative Commons , tetapi versi yang berbeda dari lisensi ini menentukan apakah Anda dapat mengedit template, apakah Anda dapat menggunakannya secara komersial, dan apakah Anda perlu memberi kredit kepada desainer aslinya.
- tambahan -- Beberapa pengembang template CSS menawarkan pekerjaan mereka dengan basis 'freemium'. Anda mendapatkan template secara gratis, tetapi memiliki opsi untuk membayar penyesuaian tambahan untuk menjadikannya unik untuk situs Anda.
Dengan semua yang dijelaskan, mari kita lihat tempat terbaik untuk menemukan template CSS gratis.
1. templated.co
Koleksi menakjubkan lebih dari 800 template CSS ini berisi gaya untuk setiap kelas situs web. Semuanya dibuat khusus untuk situs, jadi Anda tidak akan melihatnya muncul di tempat lain.
Semua template responsif, dan dibuat dengan HTML5. Mereka kecil dan ringan, dengan fitur Javascript tambahan, seperti lightbox video atau efek gulir, hanya digunakan di mana mereka menambahkan nilai nyata pada pengalaman.
2. Styleshout.com
Styleshout menawarkan berbagai macam template gratis dan premium, yang pertama dirilis di bawah lisensi Creative Commons.
Template gratis mencakup berbagai kategori, dari situs web lengkap hingga halaman Segera Hadir, dan bahkan halaman kesalahan 404 yang sering diabaikan . Anda dapat menyesuaikannya sendiri dan menyesuaikannya dengan gaya situs Anda yang ada, atau Anda dapat membayar agar Styleshout melakukannya untuk Anda.
3. HTML5Up.net
Koleksi template yang sangat bergaya ini juga sangat populer. Sebagian besar telah diunduh ratusan ribu kali, dan mudah untuk mengetahui alasannya.
Semua kategori situs yang biasa dilayani, seperti blog dan halaman produk, dan ada beberapa desain yang sangat bagus bagi fotografer untuk memamerkan karya mereka. Template gaya grid dasar sangat dapat disesuaikan, sedangkan template yang lebih mencolok cenderung menggunakan Javascript cukup banyak sehingga mungkin kurang cocok untuk tweak Anda.
Empat. Freebiesbug.com
Apa yang tidak dimiliki Freebiesbug dalam kuantitas lebih dari sekadar menebusnya dalam kualitas. Situs tempat pengembang muda memamerkan keterampilan mereka, mencakup banyak desain premium kelas atas.
Koleksi templat gratis yang mengesankan dari situs ini sangat cocok untuk agensi, fotografer, pengembang aplikasi, dan materi iklan lainnya. Dikemas dengan efek dan animasi Javascript dan CSS, Anda dapat menyesuaikan situs, meskipun situs tersebut sering kali sangat bagus sehingga Anda mungkin tidak menginginkannya.
Selain itu, Freebiesbug.com mencakup semua jenis sumber daya gratis untuk desainer web, termasuk font, stok foto, sketsa Illustrator dan file PSD, dan banyak lagi.
5. Gratis-CSS.com
Free-CSS.com adalah situs web tanpa embel-embel yang menawarkan -- pada saat penulisan ini -- beberapa 2503 template gratis, ditambah banyak template premium juga, jika Anda masih tidak dapat menemukan apa yang Anda cari.
Dengan begitu banyak pilihan, mungkin agak sulit untuk menentukan desain yang sempurna. Kualitas umumnya baik, meskipun keberadaan situs selama 10 tahun berarti masih meng-host template yang ditulis dalam XHTML. Anda pasti ingin menghindari ini. Hal lainnya adalah memastikan Anda memeriksa lisensi untuk template pilihan Anda. Semuanya gratis, tetapi beberapa adalah domain publik, beberapa Creative Commons, dan beberapa menggunakan lisensi khusus penulis.
6. OS-Templates.com
28 halaman template CSS gratis, sebagian besar menggunakan tata letak modern berbasis grid pada satu halaman. Jika sederhana adalah apa yang Anda cari, maka ini adalah tempat untuk mencari. Desainnya bersih, menarik, dan mudah disesuaikan.
OS-Templates.com juga menawarkan banyak koleksi 'template dasar'. Ini memberi Anda struktur dasar untuk situs web dalam berbagai skema tata letak populer (dua kolom, tiga kolom, dll), sementara sama sekali tidak ditata. Seperti menggunakan tema default di Wordpress, kanvas kosong memungkinkan Anda mengubah situs Anda menjadi apa pun yang Anda inginkan.
7. boag.online [Tidak lagi tersedia]
Maglev adalah templat situs web satu halaman yang dapat pratinjau beraksi di boag.online .
Ini adalah template yang cepat dan bersih, ideal untuk halaman produk. Desain minimalis hanya ditambah dengan beberapa efek Jquery untuk membantu Anda menggulir antar bagian. Tata letak sederhana berfungsi dengan sendirinya, tetapi juga menjadi titik awal yang bagus untuk penyesuaian Anda sendiri.
8. Buddha Piksel
Template Pixel Buddha tidak hanya terbatas pada situs web, mereka juga menyertakan beberapa untuk buletin email.
Either way, semuanya dirancang dengan HTML5 dan CSS3, dan responsif sehingga tampak hebat di perangkat apa pun. Sorotan meliputi Howdy HTML, template portofolio/resume yang indah, dan SOHO HTML, halaman eCommerce yang tampak mengagumkan yang menyertakan file sumber PSD di atas HTML dan CSS.
cara terbaik untuk mendengarkan podcast di pc
9. Templatemo.com
Hampir 500 template gratis tersedia dari Templatemo. Beberapa yang terbaik adalah yang membebaskan diri dari sistem grid bergaya Bootstrap untuk mencoba sesuatu yang berbeda.
Sebagian besar template sederhana dan tidak berantakan, meskipun fitur seperti lightbox dan carousel konten disertakan di tempat yang dibutuhkan. Kami juga menyukai fakta bahwa beberapa template diatur untuk bekerja dengan sebanyak enam halaman secara default. Ini memudahkan jika konten Anda tidak sesuai dengan tata letak satu halaman yang semakin umum.
10. Startbootstrap.com
Bootstrap adalah kerangka kerja front-end yang sangat populer yang memungkinkan Anda membangun situs web berkualitas tinggi dalam waktu singkat. Namun, perlu sedikit waktu untuk belajar, di situlah Start Bootstrap masuk.
Koleksi template open source gratis ini semuanya dibuat menggunakan sistem grid Bootstrap. Ada lebih dari 30 untuk dipilih. Beberapa dirancang sepenuhnya, dan ditujukan untuk aplikasi, blog, dan halaman arahan, sementara yang lain adalah tata letak kosong yang menunggu Anda untuk bergaya.
sebelas. Bootswatch.com
Akhirnya, sesuatu yang sedikit lebih praktis. Bootswatch menawarkan 16 tema open source untuk gaya situs yang dibangun menggunakan Bootstrap.
Anda dapat membuat tata letak situs sendiri menggunakan Bootstrap, atau mengunduh salah satu templat kosong dari Mulai Bootstrap. Apa yang dilakukan Bootswatch adalah mengubah font, warna latar belakang, dan gaya untuk tombol, menu, dan elemen lainnya. Ini memberi situs Anda tampilan yang unik sambil tetap setia pada etos ultra-bersih Bootstrap.
Sangat mudah untuk menggabungkan situs web dasar dengan Bootstrap, dan Bootswatch memberikannya beberapa polesan instan.
Cara Menggunakan Template CSS
Secara garis besar, ada dua cara untuk menggunakan template. Anda dapat menggunakannya apa adanya atau menggunakannya sebagai dasar untuk desain Anda sendiri.
Bahaya saat menggunakan template adalah Anda berakhir dengan situs web yang identik dengan milik orang lain. Pilih template yang populer dan mungkin ada puluhan ribu situs yang identik. Ini adalah argumen utama yang mendukung penyesuaian mereka.
cara coret di facebook
Template CSS adalah jalan pintas yang bagus untuk desainer web berpengalaman yang memikirkan tata letak dasar dan ingin langsung menatanya.
Mereka juga cocok untuk siapa saja yang baru mengenal desain web. Jika Anda mengetahui HTML dan CSS tetapi belum memiliki kepercayaan diri atau pengetahuan untuk membangun situs dari awal, maka template CSS berfungsi sebagai cara mudah untuk mendapatkan situs yang tampak hebat, dan alat pembelajaran yang luar biasa.
Anda dapat memperlakukannya sebagai pekerjaan yang sedang berjalan. Mulailah dengan mengganti font dan mengubah skema warna , dan seiring waktu Anda dapat mendesain ulang elemen yang ada, menambahkan elemen baru, dan seterusnya. Tidak ada cara yang lebih baik untuk mempelajari apa pun selain melalui pengalaman praktis dan langsung.
Apakah Anda menggunakan template CSS saat membangun situs web? Apa tempat favorit Anda untuk menemukannya? Bagikan pengalaman dan kiat Anda dengan kami di komentar.
Membagikan Membagikan Menciak Surel Cara Membersihkan PC Windows Anda Menggunakan Command PromptJika PC Windows Anda kehabisan ruang penyimpanan, bersihkan sampah menggunakan utilitas Command Prompt yang cepat ini.
Baca Selanjutnya Topik-topik yang berkaitan- Pemrograman
- Desain web
- CSS
Andy adalah mantan jurnalis cetak dan editor majalah yang telah menulis tentang teknologi selama 15 tahun. Pada saat itu ia telah berkontribusi pada publikasi yang tak terhitung jumlahnya dan menghasilkan karya copywriting untuk perusahaan teknologi besar. Dia juga telah memberikan komentar ahli untuk media dan menjadi tuan rumah panel di acara-acara industri.
More From Andy BettsBerlangganan newsletter kami
Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!
Klik di sini untuk berlangganan