Tôi là một fan hâm mộ của những thứ đơn giản, nhưng những gì tôi làm nhất thiết phải đẹp nhất. Cũng bởi vì studiopress khuyên bạn nên sử dụng Genesis eNews Extended plugin cho phép bạn tạo ra những form lấy email kết hợp với những dịch vụ email makerting nổi tiếng như mail chimp, hay getreponse.
Và dưới đây là những gì bạn nhận được khi sử dụng Genesis eNews Extended.
Có rất nhiều cách để bạn có thể tùy biến những mẫu bản tin trong Genesis eNews Extended cho hấp dẫn hơn đối với những người đăng ký email tiềm năng của bạn.
Và trong bài viết này tối sẽ hướng dẫn các bạn thủ thuật CSS để thiết kế form theo mẫu bên dưới.
Đó là một quy trình làm việc gồm ba bước.
Bước 1: Tạo một cột dưới chân trang của genesis.
Bước 2: Tùy biến CSS theo thiết kế bên trên.
Bước 3: Tạo mội mẫu form đăng ký trong Genesis eNews Extended.
Kiểm tra file functions.php của bạn với đoạn mã bên dưới.
//* Add support for 1-column footer widgets add_theme_support( 'genesis-footer-widgets', 1 );
Nếu chủ đề của bạn nhiều cột thì bạn chỉ cần phải thay thế số 1 cho tương ứng, với magazine pro mặc định là 3 thì bạn có thểm thay đổi số 3 thành số 4 theo đúng nội dung trang web của bạn.
Trong bước thứ 2 này bạn cần phải thêm CSS vào file style.css
/* Thêm cột vào Footer - Và thiết kế lại form eNews Extended trong genesis */
.footer-widgets-1 {
width: 100%;
}
.enews-widget input {
font-size: 17px;
margin-bottom: 12px;
width: 400px;
background: transparent;
border-color: #fff;
padding: 16.4px 20px;
border-right: none;
color: #fff;
}
.enews-widget input[type="submit"] {
margin: 0;
padding: 0 20px;
height: 55px;
width: auto;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: 1.11px;
border-radius: 0;
border: 1px solid #e6e6e6;
background-color: #fff;
color: #0f1c2a;
font-size: 14px;
margin-left: -4px;
font-weight: bold;
}
.enews-widget {
text-align: center;
}
.site-footer {
background-color: #fff;
}
.footer-widgets {
background-color: #333;
}
.footer-widgets .widget-title {
font-size: 25px!important;
text-align: center;
}
@media only screen and (max-width: 1023px) {
.enews-widget input { width: 100%; float: left; }
.enews-widget input[type="submit"] { margin-left: -64px; float: right; position: absolute;}
}
Trong bước thứ ba, bạn phải cài đặt plugin eNews Extended và sau đó thêm nó vào footer bằng cách:
Truy cập vào Apperarance > widgets kéo Genesis – eNews Extended vào phần Footer 1 lưu lại.
Lưu ý: Tùy thuộc vào thiết kế giao diện của bạn, bạn có thể tùy chỉnh CSS một chút để phù hợp với thiết kế riêng.
Đó là tất cả những gì để Genesis – eNews Extended hiển thị một cách tuyệt vời hơn bao giờ hết.
Hãy cho tôi biết những thắc mắc của bạn trong phần comment bên dưới. 🙂
