Terima kasih telah mengimpor Broadcast 🙂
Broadcast dibuat terutama menggunakan fitur bawaan GP yang mengagumkan dengan beberapa CSS untuk menyediakan gaya kustom.
Bagian di bawah ini memberikan ikhtisar singkat tentang bagaimana situs ini dibangun dan beberapa potensi modifikasi. Semua CSS yang disebutkan di bawah ini dapat ditemukan di bidang CSS Tambahan di customizer.
Header/Navigasi
Header/navigasi cukup dibuat dengan menggunakan opsi customizer. Anda dapat memodifikasinya di bagian Identitas Situs, Navigasi Utama, dan Navigasi Lengket di customizer.
Elemen Header/Pahlawan Halaman
Bagian di bawah navigasi utama dibuat dengan menggunakan modul Header Element. Anda bisa menemukan 4 elemen header dalam
Penampilan > Elemen: Pahlawan halaman, Pahlawan arsip, Pahlawan tulisan dan Pahlawan beranda.
CSS digunakan untuk menyediakan lebar container yang unik, latar belakang gradien dan gaya untuk elemen <h2> dan <p>:
/* Page hero styles */
.page-hero.gradient {
background-image: linear-gradient( 145deg, transparent 0%, rgba(255,255,255, 0.5) 100%);
max-width: 1440px;
margin: auto;
}
.inside-page-hero h2 {
font-size: 40px;
}
.inside-page-hero p {
font-size: 20px;
}Situs ini adalah sumber yang sangat baik untuk mengubah gradien sesuai keinginan Anda: https://cssgradient.io/.
Kontainer Umum
CSS berikut ini digunakan untuk menata gaya container utama, termasuk penggabungan dengan elemen header di atas.
/* Main container styles */
.separate-containers .page-hero + #page .site-main {
margin-top: -80px !important;
}
@media (max-width: 768px) {
body .site.grid-container {
margin-left: 20px;
margin-right: 20px;
}
}
.site-content .inside-article, .sidebar .widget, .comments-area {
box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
}Daftar Tulisan
Daftar postingan halaman beranda dapat dimodifikasi menggunakan modul Blog kami.
Berikut ini CSS yang digunakan untuk menatanya:
/* Posts grid styles */
@media (min-width: 769px) {
.generate-columns .inside-article {
transition: all 0.2s ease-in;
transform: scale(1);
}
.generate-columns .inside-article:hover {
transform: scale(1.01);
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}
p.read-more-container {
opacity: 0;
transition: all 0.3s ease-in-out;
}
.generate-columns .inside-article:hover p.read-more-container {
opacity: 1;
}
}
.generate-columns .inside-article {
display: flex;
flex-direction: column;
border-radius: 3px;
}
.generate-columns .inside-article .entry-summary {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.entry-summary p:not(.read-more-container) {
display: none;
}
.read-more-container {
margin-top: auto;
text-align: center;
}
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
border-width: 1px;
border-style: solid;
border-color: inherit;
border-radius: 3px;
}
.blog footer.entry-meta, .archive footer.entry-meta {
margin-top: 0;
}Bilah samping
Plugin Recent Posts Widget With Thumbnails digunakan di area widget sidebar kiri untuk menampilkan postingan terbaru dalam satu postingan.
Widget bilah sisi pertama diwarnai dengan CSS di bawah ini:
/* Sidebar styles */
.sidebar .widget:first-child {
background-image: linear-gradient( 145deg, rgb(164,218,216) 0%, rgb(228,243,242) 100%);
}