Flatsome là theme bán chạy nhất tại themeforest tính tới thời điểm tôi viết bài chia sẻ này Flatsome đã có gần 90.000 lượt bán ra. Với khả năng tùy chọn tuyệt vời không giới hạn, flatsome phù hợp để làm giao diện với các website bán hàng với plugin Woocommerce, hay những website giới thiệu công ty, các dịch vụ mở rộng khác. Tất cả những điều đó có trong flatsome, bạn sẽ tạo được 1 giao diện rất đơn giản mà không cần biết bất cứ 1 dòng lệnh php hay html nào cả, chỉ với thao tác kéo thả mọi thứ sẽ hoàn tất với Drag and Drop Page Builder.
Hiện tại Flatsome có version mới nhất là 3.8.1 được bán với giá $59 trên hệ thống ThemeForest, nếu bạn có điều kiện có thể mua theme này ủng hộ tác giả. Hoặc tải Flatsome sạch v3.8.1 nút dưới:
Tính năng của Flatsome:
- Cập nhật miễn phí suốt đời!
- Sẵn sàng cho WordPress 5.0+
- Tương thích cực tốt với WooCommerce
- Xây dựng mọi giao diện web wordpress chỉ với các thao tác kéo và thả
- Không giới hạn lựa chọn (màu sắc, hình ảnh, thuộc tính v.v..)
- Sẵn sàng WPML Ready (bao gồm các tệp .po)
- Tối ưu hóa SEO
- Tốc độ website được tối ưu
- Tương thích tuyệt đối với mobile, sticky nút Add to Cart trên mobile rất hay
- Tài liệu trực tuyến
- Hỗ trợ Chrome, Safari, Firefox, IE
- Chế độ danh mục tùy chọn (Ẩn giỏ hàng và chức năng thanh toán)
- Cập nhật dễ dàng bằng Bộ công cụ Envato WordPress Child Theme
- Các tệp PSD và nội dung được kèm theo
Tip
Không mở được tính năng Flatsome Studio thì nhập key: c173b5f9-c7a7-4f30-83be-90e22de44f0d
Một số đoạn code dùng cho theme Flatsome
Tất cả code dưới đây thêm trong flasome-child để dễ sửa sau này.
Thêm nút Đọc Tiếp dưới mỗi tin
Để thêm nút Đọc Tiếp, sửa trong flasome-child/function.php:
function new_excerpt_more( $more ) {
return '<br><br>'.'<button style="background:#ee6262;color:#fff;border-radius:20px;">Đọc tiếp</button>';
}
add_filter('excerpt_more', 'new_excerpt_more');Demo sau khi thêm nút Đọc Tiếp
Tạo nút gọi điện ngay hoặc chat qua Facebook, Zalo trên mobile đẹp mắt
Thêm 1 file footer.php trong folder flasome-child:
<?php
/**
* The template for displaying the footer.
*
* @package flatsome
*/
global $flatsome_opt;
?>
</main><!-- #main -->
<footer id="footer" class="footer-wrapper">
<?php do_action('flatsome_footer'); ?>
</footer><!-- .footer-wrapper -->
</div><!-- #wrapper -->
<?php wp_footer(); ?>
</body>
<style>
.mobile-hotline{display:none}
.hotline {
position: fixed;
right: 10px;
bottom: 10px;
z-index: 9000;
display: block;
background: #22253c;
color: #fff;
padding-top: 5px;padding-bottom:5px; padding-left:12px; padding-right: 12px;
border-radius: 99px;
}
.hotline .hotline-number{font-size:20px; color: #fff; font-weight: bold}
@media (max-width: 767px) {
.hotline{
display :none;
}
.mobile-hotline{display: block; bottom: 0; width: 100%; background:rgba(0,0,0,0.5); height: 60px; position: fixed; z-index:9999999}
.mobile-hotline .mobile-hotline-left{width: 45%; float: left; text-align: center; background: #0075ff; margin-left: 10px; margin-right:5px; margin-top: 7px; height: 45px; border-radius: 4px}
.mobile-hotline .mobile-hotline-left a{color: white; line-height: 46px; font-size:16px; font-weight: bold}
.mobile-hotline .mobile-hotline-right{width: 45%; float: right; text-align: center; background: #fac100; margin-left: 5px; margin-right: 10px; margin-top: 7px; height: 45px; border-radius: 4px}
.mobile-hotline .mobile-hotline-right a{color: red; line-height: 46px; font-size: 16px; font-weight: bold}
}
</style>
<a href="tel:+84916793131">
<div class="hotline">
<span class="before-hotline">Hotline:</span>
<span class="hotline-number">0916.79.31.31</span>
</div>
</a>
<div class="mobile-hotline">
<div class="mobile-hotline-left">
<a href="https://zalo.me/0916793131" target="blank">Chat Zalo</a>
</div>
<div class="mobile-hotline-right">
<a href="tel:+84916793131" target="blank">Gọi điện ngay</a>
</div>
</div>
</html>Demo sau khi thêm:
Nguồn: sharengay.com
Chúc các bạn thành công!
0 comments: