Divi Promo Box

Promote anything in a more fruitful method with the Divi Promo Box module from Divi Essential. This will clearly help you stay leading in the competitions.

Content → Image

Place the image of your product, goods, and services here in this field. 

Content → Button

1. Use Button – enable to view the settings to include a button
2. Button Text – place the text for your button (e.g. Read more, Learn More, Buy Now)
3. Link – add a link to the button
4. Link Target – when clicking the link, how would you want the user to view the page? (it could be either in a new window or in a new tab)

Content → Offer

1. Use Offer – enable to place an offer on the product on display
2. Offer Text – put the set amount of percentage as an offer

Content → Image Mask (continued)

Within the modules where we have placed the Image Mask feature, you also get to upload a custom shape in SVG format!

1. Use Upload Mask – enable to see the upload mask tools
2. Upload Mask – upload an SVG formatted file where you have set the desired shape for the image
3. Select Mask Size – here, you can either contain or cover the image, and the image will automatically position itself. 
4. Image Horizontal Position – adjust the horizontal position
5. Image Vertical Position – adjust the vertical position 

Content → Text

1. Pre-Heading – Type the pre heading text in the text field presented here
2. Heading – write the title or heading for your promo box design
3. Post Heading – type the post heading for the product displayed
4. Content – write short summary about the product you have displayed on your promo box design

Design → Pre Heading Settings

Here we discuss what options you’re getting for text stylization of the pre heading within the Promo Box module.

1. Font – Select a font from the collection or use custom font.
2. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
3. Font Style – Pick a style of font.
4. Text Alignment – align the text to the left, right, or center.
5. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
6. Text Size – easily resize the text using the slider.
7. Letter Spacing – space out the letters using the slider for an easier read for the website visitors.

Design → Pre Heading Settings (continued)

1. Line Height – adjust the space between the lines using the slider.
2. Text Shadow – select a prebuilt shadow for your text
3. Rounded Corners – adjust the four corners to include rounded corners
4. Border Styles – include borders on any side of the text or all four sides. 

Design → Pre Heading Settings (continued)

1. Border Width – adjust the width of the border using the slider.
2. Border Color – pick a color for the border you’ve added.
3. Border Style – select a style of the border from the premade border styles.
4. Title One Box Shadow – choose a box shadow to the pre heading text

Design → Heading Settings

1. Heading Level – Select a level for the heading from H1 to H6
2. Font – Select a font from the collection or use custom font.
3. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
4. Font Style – Pick a style of font for the design.
5. Text Alignment – align the text to the left, right, or center.
6. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
7. Text Size – easily resize the text using the slider.
8. Letter Spacing – space out the letters using the slider for an easier read for the website visitors.
9. Line Height – easily include gaps between the lines using the slider

Design → Heading Settings (continued)

1. Text Shadow – select a prebuilt shadow for your text
2. Rounded Corners – adjust the four corners to include rounded corners
3. Border Styles – include borders on any side of the text or all four sides
4. Border Width – adjust the width of the border you have included using the slider

Design → Heading Settings (continued)

1. Border Color – pick a color for the border you’ve added.
2. Border Style – select a style of the border from the premade border styles.
3. Title Two Box Shadow – choose a box shadow to the heading text

Design → Post Heading Settings

Here we discuss what options you’re getting for text stylization of the post heading within the Promo Box module.

1. Font – Select a font from the collection or use custom font.
2. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
3. Font Style – Pick a style of font for the design.
4. Text Alignment – align the text to the left, right, or center.
5. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
6. Text Size – easily resize the text using the slider.
7. Letter Spacing – space out the letters using the slider for an easier read for the website visitors.
8. Line Height – adjust the space between the lines using the slider

Design → Post Heading Settings (continued)

1. Text Shadow – select a prebuilt shadow for your text
2. Rounded Corners – adjust the four corners to include rounded corners
3. Border Styles – include borders on any side of the text or all four sides
4. Border Width – adjust the width of the border you have included using the slider

Design → Post Heading Settings (continued)

1. Border Color – pick a color for the border you’ve added.
2. Border Style – select a style of the border from the premade border styles.
3. Title Three Box Shadow – choose a box shadow to the post heading text

Design → Content Settings

Here we discuss what options you’re getting for text stylization of the content settings within the Promo Box module.

1. Font – Select a font from the collection or use custom font.
2. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
3. Font Style – Pick a style of font for the design.
4. Text Alignment – align the text to the left, right, or center.
5. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
6. Text Size – easily resize the text using the slider.
7. Letter Spacing – space out the letters using the slider for an easier read for the website visitors.
8. Line Height – adjust the space between the lines using the slider

Design → Content Settings (continued)

1. Text Shadow – select a prebuilt shadow for your text
2. Rounded Corners – adjust the four corners to include rounded corners
3. Border Styles – include borders on any side of the text or all four sides
4. Border Width – adjust the width of the border you have included using the slider

Design → Content Settings (continued)

1. Border Color – pick a color for the border you’ve added.
2. Border Style – select a style of the border from the premade border styles.
3. Content Box Shadow – choose a box shadow to the content text

Design → Image Settings

1. Image Width – adjust the image width using the slider
2. Rounded Corners – adjust the four corners to apply rounded corners
3. Border Styles – add a border on each side or on all four sides
4. Border Width – adjust the image’s border width using the slider 
5. Border Color – select a color for the border using the pointer or simply put the hex code to get the exact color required

Design → Image Settings (continued)

1. Border Style – select a prebuild border for the image
2. Image Box Shadow – include a box shadow to your image

Design → Button Settings

Here we talk about what options you’re getting for text stylization for the Button within the Promo Box module.

1. Button Background – select a color for the background of the button using the pointer or you can simply put the hex code and get the exact color you require.
2. Button Alignment – align the button either to the Left, Center, or Right. 
3. Button Font – Select a font from the collection or use a custom font.
4. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
5. Font Style – Pick a style of font for the design.
6. Text Color – manually select a color for the text using the pointer or you can simply state the hex code and get the exact color you require.
7. Text Size – easily resize the text using the slider.
8. Letter Spacing – space out the letters using the slider for an easier read for the website visitors.

Design → Button Settings (continued)

1. Line Height – adjust the space between the lines using the slider
2. Border Text Shadow – add shadow to your text from the following prebuilt shadows
3. Rounded Corners – adjust the four corners to include rounded corners
4. Border Styles – include borders on any side of the text or all four sides

Design → Button Settings (continued)

1. Border Width – adjust the width of the border you have included using the slider
2. Border Color – select a color for the border using the pointer or simply put the hex code to get the exact color required
3. Border Style – select a prebuild border for the button
4. Button Box Shadow – include a box shadow to your button

Design → Offer Settings

Here we talk about what options you’re getting for text stylization for the Button within the Promo Box module.

1. Offer Background – select a color for the background of the button using the pointer or you can simply put the hex code and get the exact color you require.
2. Offer Width – adjust the width of the offer using the slider
3. Offer Height – adjust the height of the offer placed
4. Horizontal Position – adjust and align the horizontal positioning of the offer.
5. Vertical Position – adjust and align the vertical positioning of the offer.
6. Offer Font – Select a font from the collection or use custom font.
7. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
8. Font Style – Pick a style of font for the design.
9. Text Color – manually select a color for the text using the pointer or you can simply state the hex code and get the exact color you require.

Design → Offer Settings (continued)

1. Text Size – easily resize the text using the slider.
2. Letter Spacing – space out the letters using the slider for an easier read for the website visitors.
3. Line Height – adjust the space between the lines using the slider
4. Text Shadow – add shadow to your text from the following prebuilt shadows
5. Rounded Corners – adjust the four corners to include rounded corners
6. Border Styles – include borders on any side of the text or all four sides

Design → Offer Settings (continued)

1. Border Width – adjust the width of the border you have included using the slider
2. Border Color – select a color for the border using the pointer or simply put the hex code to get the exact color required
3. Border Style – select a prebuild border for the button
4. Offer Box Shadow – include a box shadow in your offer.