Biểu mẫu chọn tham gia nằm ngang trong Genesis bằng cách sử dụng plugin eNews Extended và Flexbox

Đây là phiên bản mới hơn và được cập nhật của hướng dẫn trước đó về đăng ký khu vực tiện ích tùy chỉnh và hiển thị tiện ích của plugin eNews Extended trong đó bên dưới tiêu đề trang web.

Chúng tôi sẽ sử dụng Flexbox để căn chỉnh tiêu đề widget và các trường đầu vào theo chiều ngang.

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

Cài đặt và kích hoạt plugin Genesis eNews Extended.

Bước 2

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

// Register Horizontal Opt-in widget area
genesis_register_widget_area(
array(
'id' => 'horizontal-opt-in',
'name' => __( 'Horizontal Opt-in', 'my-theme-text-domain' ),
'description' => __( 'This is the horizontal opt-in section.', 'my-theme-text-domain' ),
)
);

// Display Horizontal Opt-in widget area below header
add_action( 'genesis_after_header', 'sk_horizontal_optin' );
function sk_horizontal_optin() {
genesis_widget_area( 'horizontal-opt-in', array(
'before' => '<div class="horizontal-opt-in widget-area"><div class="wrap">',
'after' => '</div></div>',
) );
}

Bước 3

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

/* Horizontal Opt-in
-------------------------------------------- */

.horizontal-opt-in {
	background-color: #50c5b5;
	color: #fff;
	padding: 20px;
}

.horizontal-opt-in .enews {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
	max-width: 1000px;
	margin: 0 auto;
}

.horizontal-opt-in .widget-title {
	margin-bottom: 0;
	font-size: 20px;
	margin-right: 20px;
}

.horizontal-opt-in form {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	    -ms-flex: 1;
	        flex: 1; /* grow this item to fill the available space */
}

.horizontal-opt-in .enews-widget input {
	margin-bottom: 0;
	width: auto;
	margin-right: 10px;
	padding: 10px;
	line-height: 1;
	font-size: 15px;
	border: none;
	-webkit-box-flex: 3;
	-webkit-flex: 3;
	    -ms-flex: 3;
	        flex: 3;
}

.horizontal-opt-in .enews-widget input[type="submit"] {
	margin-right: 0;
	padding: 10px 50px;
	background-color: transparent;
	border: 2px solid #fff;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}

.horizontal-opt-in .enews-widget input[type="submit"]:hover {
	background-color: #fff;
	color: #333;
}

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

	.horizontal-opt-in .enews {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}

	.horizontal-opt-in .widget-title {
		margin-bottom: 20px;
	}

	.horizontal-opt-in form {
		width: 100%;
	}

}

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

	.horizontal-opt-in form {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
		width: 100%;
	}

	.horizontal-opt-in .enews-widget input {
		margin-right: 0;
		margin-bottom: 20px;
	}

	.horizontal-opt-in .enews-widget input:last-child {
		margin-bottom: 10px;
	}

}

Bước 4

Tại Appearance> Widgets, kéo widget Genesis - eNews Extended vào khu vực widget Chọn tham gia theo chiều ngang và định cấu hình nó.

Nếu bạn đang sử dụng MailChimp, bạn cần nhập URL từ mã nhúng biểu mẫu vào trường Hành động biểu mẫu. Xem trang đó để biết chi tiết.