Menata Menu Layar Penuh Divi

Menu layar penuh Divi menghadirkan peluang besar untuk desain khusus. Tidak seperti empat gaya tajuk lainnya yang tersedia di Penyesuai Tema Divi, menu layar penuh mengisi seluruh layar saat aktif. Ini memberi ruang bagi tata letak kreatif untuk menu dan elemen header Divi.

Dalam posting hari ini, saya akan menunjukkan kepada Anda bagaimana menata menu layar penuh Anda untuk memberikan nuansa yang lebih khusus bagi pengunjung Anda. Untuk mencapai ini, saya akan mengubah beberapa opsi di penyesuai tema dan menambahkan beberapa CSS khusus.

Mari kita mulai.

Sebelum dan Setelah

Seperti inilah tampilan menu fullwidth secara default:

Berikut ini adalah sneak peek dari desain barunya:

Menata Menu Layar Penuh Divi

Berlangganan Saluran Youtube Kami

Mulai

Sebelum kita memulai desain, pastikan Anda memiliki menu utama aktif dengan item menu yang sudah ditambahkan.

Perbarui pengaturan di penyesuai tema

Dari Dasbor WordPress Anda, buka Divi > Theme Customizer > Header & Navigation > Header Format. Kemudian pilih Layar Penuh sebagai Gaya Header.

Setelah gaya Header Layar Penuh diatur, kembali ke Header & Navigasi. Sekarang Anda akan melihat satu set opsi baru yang disebut "Slide In & Fullscreen Header Settings".

Perbarui Pengaturan Header Slide In & Fullscreen sebagai berikut:

Periksa Opsi Tampilkan Bilah Teratas
Ukuran Teks Menu: 46px
Ukuran Teks Bilah Atas: 24px
Font: Tampilan Playfair
Gaya Font: Tebal (B)
Warna Tautan Menu: #ffffff
Warna Tautan Aktif: #edef86
Warna Teks Bilah Atas: #ffffff

Sekarang kembali ke pengaturan Header & Navigasi dan klik Elemen Header. Di bawah Elemen Header, perbarui yang berikut ini:

Pilih Tampilkan Ikon Sosial
Pilih Tampilkan Ikon Pencarian
Nomor Telepon: [masukkan nomor]
Email: [masukkan email]

Setelah semuanya diatur, seperti inilah tata letak defaultnya:

Sekarang mari tambahkan beberapa CSS khusus.

Menambahkan CSS Khusus

Menambahkan CSS khusus di Divi dapat dilakukan di beberapa tempat. Karena kita sudah menggunakan penyesuai tema, buka CSS Tambahan. Di sinilah kita akan menambahkan CSS kita. Tentu saja jika Anda lebih suka menambahkannya ke file style.css eksternal Anda di tema anak Anda, lakukanlah.

Bagi Anda yang terdesak waktu, Anda dapat melompat ke versi lengkap kode CSS yang dapat Anda salin dan tempel ke bagian CSS Tambahan Anda. Ketahuilah bahwa Anda masih harus kembali dan menambahkan beberapa elemen seperti gambar latar belakang ke kode Anda.

Sekarang kembali menambahkan CSS kita.

Karena sebagian besar CSS khusus hanya akan diterapkan ke versi desktop dari header layar penuh, kita akan mulai dengan menambahkan kueri media yang menargetkan ukuran layar dengan lebar minimum 980px. Tambahkan yang berikut ini di bagian CSS tambahan:

@media all and (min-width: 980px){

}

Sekarang mari kita sedikit mengubah tata letak header layar penuh dengan menyesuaikan posisi menu navigasi dan elemen bilah atas sehingga navigasi akan berada di sebelah kiri layar dan elemen bilah atas akan ditumpuk secara vertikal di sebelah kanan layar. layar. Untuk membuat perubahan ini, tambahkan css berikut di dalam kurung kueri media.

/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
	width: 50%;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
	padding-top: 0px !important;
}

/*adjust position of top bar elements*/
.et_header_style_fullscreen .et_slide_menu_top {
    width: 50%;
    text-align: center;
    display: table !important;
    vertical-align: middle;
    position: initial;
    float: right!important;
    height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
    display: table-cell !important;
    position: relative;
    vertical-align: middle;
    text-align: left!important;
	padding: 0 15%;
	width: 100%;
}

.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
    width: 100%;
}

.et_header_style_fullscreen div#et-info {
	float: none!important;
	width: 100%;
}

.et_header_style_fullscreen div#et-info span {
	display: block;	
	margin-bottom: 30px;
	
}

Selanjutnya, mari kita tingkatkan ukuran bilah pencarian kita dengan CSS berikut:

/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
	margin-top: 30px !important;
	margin-bottom: 15px;
	width: 100% !important;
	max-width: 300px !important;
	padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
	width: 50px;
	height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
	font-size: 22px;
}

Dan mari tambahkan CSS berikut untuk membuat menu sejajar dengan benar:

/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
	text-align: right;
	padding: 0 15%;
}

Kemudian mari kita buat ikon close menu di pojok kanan atas lebih besar dan lebih mudah untuk diklik:

/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
	font-size: 120px;
}

Mari kita juga menghilangkan overlay latar belakang di belakang elemen menu atas dan menghilangkan opacity untuk latar belakang.

/*take out background overlay*/
.et_slide_menu_top {
background: none;
}

/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}

Jika Anda memiliki item sub menu, CSS ini membuat panah drop-down di sebelah kanan item menu menjadi lebih besar:

/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;

}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}

Mari kita periksa apa yang kita miliki sejauh ini:

Sekarang kita siap untuk menambahkan gambar latar belakang kita. Karena saya ingin gambar latar belakang saya ditampilkan di semua perangkat, saya akan menambahkan CSS ini di luar kurung kueri media sehingga latar belakang tidak tersembunyi pada ukuran layar dengan lebar kurang dari 980px.

/*add background image*/
body #page-container .et_slide_in_menu_container{
	background: url('INSERT IMAGE URL') center center !important;
	background-size: cover !important;
}

Jika Anda belum memiliki URL gambar latar belakang, unggah gambar latar (1920×1080) ke galeri media WordPress dan salin URL-nya.

Sekarang ganti teks yang bertuliskan "INSERT IMAGE URL" dengan menempelkan URL gambar Anda di kode.

Sekarang Anda sudah selesai!

Berikut adalah versi lengkap dari kode CSS yang harus Anda tambahkan ke CSS Tambahan Anda (kecuali untuk URL gambar yang perlu Anda berikan):

@media all and (min-width: 980px){

/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
	width: 50%;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
	padding-top: 0px !important;
}

/*adjust position of top menu and elements*/
.et_header_style_fullscreen .et_slide_menu_top {
    width: 50%;
    text-align: center;
    display: table !important;
    vertical-align: middle;
    position: initial;
    float: right;
    height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
    display: table-cell !important;
    position: relative;
    vertical-align: middle;
    text-align: left!important;
	padding: 0 15%;
	width: 100%;
}

.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
    width: 100%;
}

.et_header_style_fullscreen div#et-info {
	float: none!important;
	width: 100%;
}

.et_header_style_fullscreen div#et-info span {
	display: block;	
	margin-bottom: 30px;
	
}

/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
	margin-top: 30px !important;
	margin-bottom: 15px;
	width: 100% !important;
	max-width: 300px !important;
	padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
	width: 50px;
	height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
	font-size: 22px;
}

/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
	text-align: right;
	padding: 0 15%;
}

/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
	font-size: 120px;
}

/*dark background overlay*/
.et_slide_menu_top {
background: none;
}

/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}

/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;

}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}

}

/*add background image*/
body #page-container .et_slide_in_menu_container{
	background: url('http://megamenu.wpengine.com/wp-content/uploads/2017/08/bgdark.jpg') center center !important;
	background-size: cover !important;
}

Klik Simpan & Terbitkan

Sekarang Mari kita periksa:

Tata letak menu kisi alternatif

Untuk menambahkan tata letak kisi untuk menu Anda, tambahkan CSS berikut di bawah kode Anda saat ini dan di dalam tanda kurung kueri media:

/*add grid menu links*/
.et_header_style_fullscreen .et_mobile_menu li {
    opacity: 1;
    width: 46%;
    float: left !important;
    margin-right: 2%;
    margin-bottom: 2%;
}

.et_slide_in_menu_container #mobile_menu_slide li a, .et_slide_in_menu_container #mobile_menu_slide li.current-menu-item a {
    padding: 20% 0;
    border: 1px solid #fff;
    color: #fff;
    width: 100%;
    text-align: center;
}

Catatan Penting: Anda mungkin perlu mengubah ukuran font menu menjadi 30px (atau mendekati itu) untuk memastikan item menu Anda tidak tumpang tindih pada ukuran layar yang lebih kecil. Juga, tata letak ini tidak akan berfungsi jika menu Anda memiliki item sub menu.

Item Sub Menu di Header Layar Penuh

Perlu diingat bahwa jika Anda memiliki item sub menu, item menu induk hanya akan berfungsi sebagai tautan sakelar untuk menampilkan dan menyembunyikan item sub menu. Ini tidak akan berfungsi sebagai tautan menu itu sendiri.

Responsif?

Pemotongan ini responsif dan berfungsi dengan baik di semua ukuran layar.

Header layar penuh dibuat dengan dua sel tabel yang berdekatan yang disejajarkan secara vertikal. Sel tabel kiri berisi menu dan sel kanan berisi elemen header lainnya. Karena konten disejajarkan secara vertikal dan sel tabel masing-masing akan menempati 50% (setengah) dari ukuran layar setiap saat, konten akan selalu menyesuaikan dengan baik ke ukuran layar apa pun.

Jika ukuran layar kurang dari 980px (tablet dan ponsel), tata letak Divi default akan muncul dan menampilkan menu dengan baik di ponsel.

Pikiran Akhir

Jika Anda berpikir untuk menambahkan header layar penuh di situs Anda, saya harap desain ini akan menjadi inspirasi yang bermanfaat. Simetri elemen header dan item menu menyeimbangkan hal-hal dan membawa lebih banyak perhatian pada informasi kontak yang penting bagi banyak klien.

Perlu diingat bahwa karena menu ini adalah layar penuh, gambar latar belakang akan menjadi kuncinya. Anda tidak ingin gambar yang akan mengalihkan perhatian atau menenggelamkan isi menu yang penting. Jika Anda tidak dapat menemukan gambar sempurna yang menghadirkan kepribadian yang Anda inginkan, carilah gambar yang terlihat bagus sebagai latar belakang dan sesuai dengan desain Anda. Atau Anda cukup menggunakan opsi warna latar belakang default.

Yah, hanya itu yang saya miliki.

Looking forward untuk mendengar dari Anda di komentar.