The code shows nice promotions for flatsome like Cellphones

The code displays a nice promotion for flatsome like Cellphones.

This is a code snippet that displays a beautiful promotion section. It helps make the promotion section on your flastsome interface more prominent. Below is the code and detailed instructions on how to install The code shows nice promotions for flatsome like Cellphones Please. You can also find more content at Code or Code wordpress

Product image after adding code

• SEO standard website management course to get to the top of Google quickly
• Code to automatically save images to hot when copying images from other pages
• Website management services effectively take care of websites
• Website design service according to SEO standards, good conversion
• Online Computer Software Installation Service

Instructions for inserting code to display beautiful promotions for flatsome

Step 1: Log in with your web administrator rights

You need to log in with the highest administrative rights to insert code into your website.

Step 2: Determine exactly if your website is using Flatsome

After logging in with administrative rights, find the following path: Interface > interface

Step 3: insert code

Please follow the following link to safely insert code without losing it when updating the interface. Appearance > Customization > Additional CSS Then paste the code below into the additional CSS

/* Badge Sale */ .badge-container {margin:0} .badge-circle-inside .badge-inner, .badge-circle .badge-inner {border-radius: 8px 30px 30px 0;background: #f00;position: relative;padding: 0 5px;} .badge-circle-inside .badge-inner:after, .badge-circle .badge-inner:after {position: absolute;content: '';width: 3px;height: 15px;background : #8b0018;bottom: -5px;left: 0;z-index: -1;border-radius: 0 0 0 15px;} .badge {height: 30px;width: 45px;font-size: 13px;margin-left: -3px;margin-top: 0px;}

Step 4: Set up display

In order for the code to display beautifully, please add Settings according to the following link.

After you select this correct display, your code will work as described in the article

1. .badge-container {margin:0}: Set the margin of the container containing the markup to 0.
2. .badge-circle-inside .badge-inner, .badge-circle .badge-inner: Format for inner circle and outer circle markers.
3. border-radius: 8px 30px 30px 0: Use radius to make the corner of the mark circular and rectangular.
4. background: #f00: Select the background color for the markup.
5. position: relative: Use relative position for markup.
6. padding: 0 5px;: Add space between content and border.
7. .badge-circle-inside .badge-inner:after, .badge-circle .badge-inner:after: Format the tail of the inner circle and outer circle markup.
8. position: absolute: Use absolute positioning for the tail of the markup.
9. Nội dung: ”;: Adds content to the end of the markup.
10. width: 3px;Cao: 15px;: Set the size for the tail of the markup.
11. background: #8b0018;: Choose the color for the tail of the bookmark.
12. bottom: -5px;left. left: 0;: Aligns the position of the bottom and left part of the promotion.
13. z-index: -1: Set z-index for the tail of the markup.
14. border-radius: 0 0 0 15px;: Use radius to make the tail of the marker L-shaped.
15. .badge: Format for main markup.
16. Cao: 30px;width: 45px;: Set the size position for the promotion display frame
17. font-size: 13px;: Set the text size for the main markup.
18. margin-left: -12px;margin-top: -10px;: Set the position of the main markup so that it is visible on the promotional product.

 Summarize

The above code creates a markup on the left of the rectangle and the right of the circle to display the promotion for the product on Flatsome. Hopefully this code will help a lot to make your website display more beautiful and vivid.

So I just shared with you details on how to make and insert The code displays a nice promotion for flatsome If you find it interesting and useful, don't forget to like, rate 5* or share with me.