Divi Essential Documentation

⌘K
  1. Home
  2. Docs
  3. Divi Essential Documentat...
  4. Modules Documentation
  5. Divi Promo Box

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 tab → Image Mask 

Here are the prebuilt shapes included in the Image Masking Feature. You get 15 trendy shapes. Try it out! 

Let’s go over the Use Image Mask options:

  1. Use Image Mask – enable to open the settings for Image Mask.
  2. Select Shape – there are various premade shapes available here. Select the one you like best and get started.
  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 → 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 Sizehere, 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.

How can we help?