Thanh tiện ích ở Dynamik

Trong diễn đàn chỉ dành cho thành viên, Paul đã viết:

Chào Sridhar

Tôi đã cố gắng thêm thanh tiện ích của Carrie Dils vào Dynamik nhưng nó không xảy ra. Tôi có thể tạo thứ gì đó tương tự bằng cách sử dụng thanh điều hướng và nội dung nổi nhưng nó trông không đẹp trên điện thoại…

2 khu vực phụ tùng sẽ hoạt động tốt hơn rất nhiều!

Mong bạn giúp đỡ, cảm ơn

Hướng dẫn này cung cấp chi tiết về cách có thể thiết lập Thanh tiện ích phía trên tiêu đề trong Dynamik.

Các bước từ 1 đến 3 bên dưới sẽ được thực hiện sau khi điều hướng đến Genesis> Dynamik Custom trong quản trị viên WordPress của bạn.

Bước 1: Khu vực tiện ích con

Tạo và các khu vực phụ tùng.Utility Bar Left Utility Bar Right

Đảm bảo rằng chúng được thiết lập để Shortcode nhập.

Bước 2: Hộp móc

Đây là mã:

<div class="utility-bar">
<div class="wrap">
<?php echo do_shortcode( '[utility_bar_left]' ); ?>
<?php echo do_shortcode( '[utility_bar_right]' ); ?>
</div>
</div>

Bước 3: CSS

Thêm phần sau vào phần CSS:

.wrap {
	max-width: 1140px;
	margin: 0 auto;
}

/* Utility Bar
--------------------------------------------- */

.utility-bar {
	background-color: #333;
	border-bottom: 1px solid #ddd;
	color: #ddd;
	font-size: 12px;
	padding: 10px 0;
}

.utility-bar a {
	color: #ccff33;
}

.utility-bar a:hover {
	color: #ccff33;
	text-decoration: underline;
}

.utility-bar .dynamik-widget-area {
	background: transparent;
	color: #ddd;
	width: 50%;
}

.utility-bar .dynamik-widget-area p {
	margin-bottom: 0;
}

#utility_bar_left {
	float: left;
}

#utility_bar_right {
	float: right;
	text-align: right;
}

@media only screen and (max-width: 1140px) {

	.utility-bar {
		padding-left: 3%;
		padding-right: 3%;
	}

}

@media only screen and (max-width: 568px) {

	#utility_bar_left, #utility_bar_right {
		float: none;
		text-align: center;
	}
	
	#utility_bar_left {
		margin-bottom: 10px;
	}

	.utility-bar .dynamik-widget-area {
		width: 100%;
	}

}

Bước 4: Điền các khu vực tiện ích con

Đi tới Giao diện> Tiện ích và kéo các tiện ích mong muốn của bạn vào và các khu vực tiện ích.Utility Bar Left Utility Bar Right