Cách thiết lập phần Chào mừng với Hình ảnh ở bên trái và tiện ích Văn bản ở bên phải trong Genesis

Thủ thuật WordPress
#1

Trong nhóm Genesis Facebook, người dùng muốn biết cách thiết lập phần chào mừng / anh hùng xuất hiện bên dưới tiêu đề tương tự như phần tại http://www.melyssagriffin.com/.

Trong hướng dẫn này, tôi chỉ ra cách chúng ta có thể đăng ký một khu vực tiện ích Chào mừng và hiển thị nó bên dưới tiêu đề trong Genesis. Chúng tôi sẽ viết CSS đáp ứng để hiển thị một hình ảnh ở bên trái với một widget văn bản được đặt trong khu vực widget ở bên phải của nó. Hình ảnh sẽ được thiết lập để xuất hiện bên dưới văn bản ở độ rộng khung nhìn nhỏ hơn.

Mặc dù hướng dẫn đã được viết cho chủ đề con Genesis Sample, nó sẽ hoạt động với những điều chỉnh nhỏ trong bất kỳ chủ đề con nào của Genesis.

Bước 1

Thêm phần sau vào functions.php của chủ đề con :

// Register Welcome widget area
genesis_register_widget_area(
	array(
		'id'          => 'welcome',
		'name'        => __( 'Welcome', 'my-theme-text-domain' ),
		'description' => __( 'Welcome section below header', 'my-theme-text-domain' ),
	)
);

// Display Welcome widget area below header
add_action( 'genesis_after_header', function () {
	genesis_widget_area( 'welcome', array(
		'before'	=> '<div class="welcome widget-area"><div class="wrap">',
		'after'		=> '</div></div>',
	) );
} );

Bước 2

Tải hình ảnh của phần chào mừng mong muốn của bạn lên thư mục hình ảnh của chủ đề con. Trong ví dụ này, tôi đang sử dụng một png trong suốt 500 x 500 có tên là headshot.png .

Bước 3

Thêm phần sau vào style.css của chủ đề con :

.welcome {
	background-color: #f5d355;
}

.welcome .wrap {
	background: url(images/headshot.png) no-repeat left bottom;
	padding: 170px 0;
}

.welcome .widget {
	text-align: center;
	/*float: right;*/
	max-width: 500px;
	margin-left: 580px;
}

.welcome .widget-title {
	color: #fff;
	text-transform: uppercase;
	font-size: 30px;
	font-weight: bold;
}

.welcome .button {
	text-transform: uppercase;
	background-color: #82dce9;
	border-bottom: 3px solid #73d2e0;
	border-radius: 3px;
	font-size: 18px;
	letter-spacing: 2px;
	padding: 14px 50px;
}

.welcome .button:hover {
	background-color: #73d2e0;
}

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

	.welcome .wrap {
		padding: 130px 0;
	}

}

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

	.welcome .wrap {
		background-size: 40%;
		padding: 60px 0;
	}

	.welcome .widget {
		margin-left: 400px;
	}

}

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

	.welcome .wrap {
		padding: 70px 0;
	}

	.welcome .widget {
		margin-left: 300px;
		padding: 0 40px;
	}

}

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

	.welcome .wrap {
		background-position: center bottom;
		background-size: 300px;
		padding-bottom: 350px;
	}

	.welcome .widget {
		margin: 0 auto;
	}

}

Bước 4

Tại Giao diện> Tiện ích, kéo một tiện ích văn bản vào vùng tiện ích Chào mừng và điền vào tiêu đề và văn bản.