transform letters in background divi

Transform letters in background divi: When it comes to background masks, users tend to use image-editing software outside of Divi and then upload the image to the website they create. While this is a pretty convenient way to personalize your website, it isn’t necessarily the only solution. You can also create background masks within Divi, combining the different design elements and filter options in a creative way. This is exactly what we are about to do in this post! We turn oversized characters into background masks that look great no matter the screen size. We hope this tutorial will inspire you to create your designs using oversized characters and Divi’s built-in options.

transform letters in background divi

Transform letters in background Divi Design

We will begin the design by creating a black background with a letter that has an image as a background.

Add a new section

Background color

Let’s start with the first example! Add a new regular section to a new or existing page and add a background to this section:

  • Background Color: # 000000

Spacing

Then go to the spacing settings and remove all the default top and bottom padding.

  • Top Padding: 0px
  • Bottom padding: 0px

Overflow

Switch to the Advanced tab and hide the section overflows. This will become important later in this tutorial when we reposition the text module containing the oversize character.

  • Horizontal overflow: hidden
  • Vertical overflow: hidden

Add row 1

Column structure

Continue by adding a new row using the column structure:

Column 1 Background color

Without adding any modules yet, open the row settings and add a background color to the first column.

  • Column 1 Background color: # 848484

Column 1 Background image

Also, add a background color. To combine the background color and the image, we are going to apply a blend mode.

  • Column background image blend: Multiply

Sizing

Switch to the Design tab and let the row fill the full width of the screen by applying the following sizing settings:

  • Use custom gutter width: Yes
  • Gutter width: 1
  • Width: 100%
  • Maximum width: 100%

Spacing

We also get rid of all custom top and bottom row padding.

  • Top Padding: 0px
  • Bottom padding: 0px

Add a text module to a column

Add a character to the content area

It’s time to add the text module containing an oversized character. Add the letter “o” to the content area.

Background color

Continue by going to the background settings and add a black background color.

  • Background Color: # 000000

Text settings

Go to the Design tab and change the text settings. Notice how we use a high value for the text size.

  • Text Font: Poppins
  • Text size: 100vw
  • Text Orientation: Center

Spacing

Then go to the spacing settings and add custom margin and padding values.

  • Top margin: -6vw
  • Best padding: 15vw
  • Bottom padding: 49vw

Filters

It’s time to do some magic! Go to the module filters settings and change the blend mode accordingly:

  • Blend Mode: Multiply
  • Brightness: you can change this value to your liking

Add row 2

Column structure

Once your oversized character has been added to the design, you can continue adding any remaining mods you want to show in the section, preferably adding a new line:

Sizing

Without adding any modules yet, open the row settings and let them occupy the entire width of the screen.

  • Use custom gutter width: Yes
  • Gutter width: 1
  • Width: 100%
  • Maximum width: 100%

Spacing

Also, remove all top and bottom padding by default

  • Top Padding: 0px
  • Bottom padding: 0px

Add text module # 1 to column

Add H1 content

In this new line, you can add the modules of your choice. To recreate the exact example shared in the preview for this post, start by adding a text module that contains H1 content.

H1 text parameters

Go to the Design tab and change the H1 text settings.

  • Title font: Playfair Display
  • Font Weight: Bold
  • Title Text Alignment: Center
  • Title text color: #ffffff
  • Text Title Size: 6vw

Spacing

Continue by going to the spacing settings and let the text module overlap the oversized character by adding a negative top margin. We also make sure there is room to the left and right of the module to ensure responsiveness.

  • Top margin: -47vw
  • Left margin: 1vw
  • Right margin: 1vw

Add a division module to the column

Visibility

The next module we need is a division module. Make sure the “Show Separator” option is enabled.

  • Show divider: Yes

Color

Go to the design tab next and change the color of the divider.

  • Color: #ffffff

Sizing

Also, change the sizing parameters.

  • Divider Weight: 13px
  • Width: 16%
  • Module alignment: center

Spacing

Also, add a top margin to create a space between the text module and the division module.

  • Top margin: 16vw

Add text module # 2 to column

Add content

The next module we need is a text module with paragraph content.

Text settings

Go to text settings and make the following changes:

  • Text Font: Open Sans
  • Text color: #ffffff
  • Text size: 1vw (desktop), 2vw (tablet), 2.5vw (phone)
  • Text Line Height: 1.9em
  • Text Orientation: Center

Spacing

Also add custom spacing values.

  • Top margin: 3vw
  • Bottom margin: 3vw (desktop computer), 10vw (tablet and phone)
  • Left margin: 27vw (desktop), 10vw (tablet), 8vw (phone)
  • Right margin: 27vw (desktop), 10vw (tablet), 8vw (phone)

Read more: How to use hover effects to reveal content in Divi

Add button module to column

Add a copy

On the next and last module, which is a button module. Enter a copy of your choice.

Alignment

Continue by changing the button alignment on the Design tab.

  • Button alignment: center

Button settings

Go to button settings and customize the button as you want.

  • Use custom styles for the button: Yes
  • Button text size: 1vw (desktop), 2.5vw (tablet), 3vw (phone)
  • Button Text Color: #ffffff
  • Button border width: 1px
  • Button border radius: 0px
  • Button Font: Open
  • Without Font Weight: Ultra Bold
  • Font style: uppercase

Spacing

Finally, we also add custom margin and padding values ​​to achieve the desired result.

  • Bottom margin: 10vw
  • Padding: 15px
  • Bottom padding: 15px
  • Left padding: 50px
  • Right Padding: 50px

Final thoughts on Transform letters in background divi

In this article, we’ve shown you how to use oversized characters to create awesome background masks with Divi. This is a great way to create a custom web design without having to use image-editing software.

 

for website maintenance service contact us.

Leave a comment

echo "";