Custom Top Header Divi Theme dengan Skew CSS

Divi Hack1 comment4779 Views

Sebagai pembuka artikel pertama saya akan memberikan tutorial sederhana tentang bagaimana meng-custom top header dari Divi Theme hanya dengan CSS saja. Rencananya saya akan membuat beberapa artikel yang membahas beberapa bagian yang menurut saya menarik untuk di bagikan untuk anda, seri artikel akan saya masukkan ke topik membedah proyek website Attaraya. Proyek website Attaraya merupakan proyek website development untuk perusahaan kontraktor, klien telah memiliki desain UI dan saya hanya perlu membuat websitenya saja mengikuti desain tersebut, karena desain sudah ada, sehingga saya tidak perlu susah-susah memikirkan desain websitenya, saya hanya perlu memikirkan bagaimana membuat website mirip seperti desain UI yang diberikan.

Untuk desain UI bagian headernya seperti dibawah ini, untuk saat ini saya fokus di bagian untuk menampilkan email dan telepon pojok kanan atas, tanpa child theme hanya css saja.

Desain UI untuk header

Oke, langkah pertama silahkan masuk ke Dashboard sorot menu Divi > Theme Customizer, klik Header & Navigation dan masuk ke Header Element, silahkan masukkan email dan nomor telepon disana. Dan klik Save Changes.

Setelah klik Publish, kembali ke Header & Navigation dan klik Secondary Menu Bar. Silahkan ubah

  • Text Size: 14px
  • Background Color: rgba(0,0,0,0) -> warna transparent
  • Text Color: #FFFFFF -> warna putih
  • Dropdown Menu Background Color: #003674 -> biru

Klik Publish.

Silahkan tutup Customizer WordPress anda dan setelah masuk ke Dashboard, buka Divi > Theme Options. Scroll ke bawah sampai Custom CSS, masukkan kode dibawah ini.

/* TOP HEADER */
#top-header {
    border-top: 5px solid #003674;
    background-color: #FFF;
}
.et-fixed-header#top-header, .et-fixed-header#top-header #et-secondary-nav li ul {
    background-color: #FFF;
}
#top-header .container {
    padding: 0;
}
#top-header #et-info {
    float: right;
    background-color: #003674;
    padding: 8px 20px 12px;
    position: relative;
}
#top-header #et-info:after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: #003674;
}
#top-header #et-info:before {
    content: '';
    position: absolute;
    top: 0;
    right: 87%;
    width: 100px;
    height: 100%;
    background-color: #003674;
    -ms-transform: skewX(50deg);
    -webkit-transform: skewX(50deg);
    transform: skewX(50deg);
}
#top-header #et-info:after {
  content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: #003674;
}
#et-info-phone {
    border-right: 1px solid rgba(255, 255, 255, 0.45);
    padding-right: 13px;
}
#et-info-email:before, #et-info-phone:before {
    margin-right: 7px;
}

Tampilan kode CSS seperti ini

Dan silahkan lihat website anda, tampilannya akan seperti ini.

Responsive

Untuk tampilan mobile desain diatas akan terlihat kacau, untuk memperbaikinya dengan cara menghilangkan #top-header  #et-info saat ukuran layar dibawah 540px. Silahkan tambahkan CSS dibawah ini ke Custom CSS:

/* RESPONSIVE TOP HEADER */
@media (max-width: 540px){
   #top-header #et-info{
      display:none
   }
}

 

Dan hasil akhirnya akan seperti ini: 

Penutup

Artikel ini hanya membahas cara meng-custom top header hanya dengan CSS saja, sehingga tampilannya tidak akan sama dengan desan UI diatas. Untuk membuat tampilan mirip seperti itu harus membuat child theme, karena akan banyak merubah script di header.php, Insya Allah akan saya bahas dilain artikel.

Artikel selanjutnya saya akan membahas cara meng-custom menu navigasi di header tersebut agar terlihat seperti desain UI.

Artikel Terkait

Komentar

1 Comment

Submit a Comment

Your email address will not be published. Required fields are marked *