How to Add Resume Downloads & Typing Effects to Divi’s Copywriter Layout Pack

Last Updated on January 10, 2023 by 13 Comments

Editorial Note: We may earn a commission when you visit links on our website.
How to Add Resume Downloads & Typing Effects to Divi’s Copywriter Layout Pack
Blog / Divi Resources / How to Add Resume Downloads & Typing Effects to Divi’s Copywriter Layout Pack

Helping you get a website up and running without a lot of effort is the main goal of our Layout Pack Use Cases initiative. And this time, we’re helping you set up a copywriter website with the free Copywriter Layout Pack for Divi. Although this layout pack already has most of the elements your copywriter website needs, in this use case tutorial, we’re going to help you take it a step further by showing you how to add resume downloads and typing effects. These two additions will not only enhance the appearance of your website but will also help you discover your visitors’ needs.

Use Case Sneak Peek

Before diving into the tutorial, let’s take a look at the result.

Resume Download

For the resume download, we’re going to replace one of the buttons on the homepage into a download button that contains the resume file.

typing effect

Typing Effect

You can use the typing effect practically anywhere on your website. We’re going to give you a headstart by showing you how to use it in the hero section of the homepage.

typing effect

The Setup

1. Install and activate the Divi Theme
2. Install Plugins
3. Download the Layout Pack and Import the Copywriter_All.json file to your Divi Theme Library.
4. Create new pages for each layout.
5. Create your primary menu.

If you are confused by the setup listed above, you can find more detailed instructions on how to setup your layout properly by checking out these 10 steps for using a layout pack for your new project.

Part 1: Download & Install Download Manager Plugin

Step 1: Download Plugin

Start off by downloading the WordPress Download Manager plugin by going to the following page and clicking on the download button.

typing effect

Step 2: Install Plugin

Then, go to your WordPress website and upload the plugin by going to Plugins > Add New. Once you’ve uploaded the plugin, make sure you activate it as well.

typing effect

Part 2: Add Resume as Download File

Step 1: Create Resume with Canva or Upload Existing Resume

The next thing you will need is your resume file. If you don’t have one yet, you can easily create one without having any Photoshop experience by using Canva. Canva offers a ton of free pre-made designs for all kinds of purposes, resumes included.

typing effect

Step 2: Add New Download File to Download Manager

Once you’ve located your resume or created one, it’s time to add it to your Download Manager plugin. To do that, go to Downloads > All Files > Add New.

typing effect

Step 3: Add File, Title & Choose Icon

Then, add a title to your file and upload your resume.

typing effect

Moving on, scroll down the page and choose a matching icon. For this example, we’ve selected the following one:

typing effect

Part 3: Add Download Shortcode to Copywriter Layouts

Step 1: Open Homepage with Divi Builder

Once you’ve added your resume as a downloadable file, you can add it to your website. Start by enabling the Visual Builder on your homepage.

typing effect

Step 2: Delete Button Module & Add Text Module Instead

Then, scroll down until you come across the services section and remove the Button Module that’s located at the bottom of it. Instead of using a Button Module, we’re going to use a Text Module that contains our download shortcode.

typing effect

Step 3: Add Download Shortcode

Go ahead and add the shortcode to the Content Box within the Content tab.

typing effect

Step 4: Add Background Color to Text Module

Scroll down the Content tab, open the Background subcategory and add ‘#f16334’ as the background color.

typing effect

Step 5: Change Sizing Subcategory

Then, move on to the Design tab and make the following changes to the Sizing subcategory:

  • Width: 21% (Desktop), 35%(Tablet), 56%(Phone)
  • Module Alignment: Center

typing effect

Step 6: Add Padding to Text Module

Next, open the Spacing subcategory and add the following padding to your Text Module:

  • Top: 12px
  • Right: 8px
  • Bottom: 12px
  • Left: 15px

typing effect

Step 7: Add Rounded Corners to Button Subcategory

The Text Module needs some rounded corners as well. Open the Border subcategory and add ‘3px’ to all of the corners.

typing effect

Step 8: Change Text Subcategory

Then, open the Text subcategory and make the following changes to it:

  • Text Font: Montserrat
  • Text Size: 17px
  • Text Color: #FFFFFF

typing effect

Step 9: Change Link Text Settings

Lastly, use the following settings for the link option:

  • Link Font Style: Underline
  • Link Underline Color: #FFFFFF
  • Link Underline Style: Double
  • Link Text Color: #000000

typing effect


Once you save your modified page and exit the visual builder, you will see the following result show up on your screen:

typing effect

Part 4: Download & Install Typing Effect Plugin

Step 1: Download Plugin

Once you’ve added the resume download to your copywriter website, you can move on to the typing plugin. To download the free plugin, go to the following page and click on the download button.

typing effect

Step 2: Install Plugin

Then, install the plugin by going to Plugins > Add New > Uploading the plugin. Make sure you activate the plugin as well.

typing effect

Part 5: Generate Shortcode & Add Shortcode to Copywriter Layouts

Step 1: Add as Many Sentences as You Want

Once you’ve installed the plugin, you can start using the typing effect for any sentence you want. You can use it for one sentence in particular or add as many sentences that follow up on each other. Using multiple phrases allows you to share more content while people read the typing effect.

typing effect

Step 2: Change Settings

Another thing you can do with this plugin is changing the speed and delay. You can also enable the ‘loop’ options which will keep the interaction going on your page.

typing effect

Step 3: Generate Shortcode

Once you have chosen all of your sentences and modified the settings, you can click on ‘Generate Shortcode’ which will share a custom shortcode that you can add to your homepage. Make sure you copy it beforehand.

typing effect

Step 4: Replace Text in Text Module with Shortcode

Then, open the homepage with the Visual Builder and replace the second sentence within your hero section Text Module with the shortcode. Make sure that you are replacing the text (instead of removing it) so the appearance of your text remains the same as it was before.

typing effect


Lastly, make sure that you save your page and exit the visual builder. Your homepage will, now, have the typing effect included which looks like this:

typing effect

Final Thoughts

In this post, we’ve shown you how you can take your copywriter to the next level with two things; resume downloads and typing effects. This use case goes perfectly with the free Copywriter Layout Pack for Divi and is part of our ongoing Divi initiative where we try to put something extra into your design toolbox each and every week. If you have any questions or suggestions; make sure you leave a comment in the comment section below!

Featured Image by 32 pixels /

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

👋 Download The Free Cyber Monday Store Website Pack!

👋 Download The Free Cyber Monday Store Website Pack!

Posted on December 4, 2023 in General News

This year as a special thank you to everyone who purchases an Elegant Themes Membership during our Cyber Monday Sale (and to our wonderful Lifetime customers!) we’ve created several exclusive gifts from our staff to you. Today we’re highlighting the first Divi Website Pack. This vibrant...

View Full Post


  1. Excellent tutorial ?

  2. Why not just use a Divi button for the download? There is a divi tutorial on this somewhere, very easy, not need for additional plugin.

  3. Typing Effect Plugin does not work properly with IE and Edge. With more than one string the order of the sentences is not respected.

  4. great stuff. May I suggest an “ultimate resource guide” post with all of the best Go-to PLugins the Divi team suggest.

  5. I’m searching for a way to give customers a download, but after filling in a contactformular. Do you know a way?

    • You can either A) send a download link (or the file itself) in an automatic confirmation e-mail, B) have the user confirm their form submission and *then* give them the download link, C) redirect to a page with the download after submission or D) show the download link in the success message shown after submission.

      The available options depend on what form software you use on your site.

  6. Very useful tips.

    Thanks a lot

  7. Shouldn’t we write “Résumé” (and not “resume”)?

    • Seriously?

      • Seriously.
        I agree that being the grammar police for no good reason is troll-ish behavior; but in this instance, the feedback is warranted.

        It is not clear because “resuming a download” is something that makes sense in the context of this company’s specialty. The accent marks would have made the meaning clear right away.

        • Thank you, Amy, it was exactly what I was pointing at…
          My first thought when seeing “resume download button” was: is it something about “resuming download that was interrupted”?
          What a difference a small accent mark makes!

          Thanks to Donjete for two interesting plugins suggestions (even though in this particular case – a simple download button – it is probably an overkill).

          • You’re right, Victor.
            (See what I did there? I gave you a positive feedback)
            But your feedback sounded as though it were negative; instead of giving a constructive feedback, you went straight to pointing out typos in the thread. Which is OK, but not teacher-ish.
            Wouldn’t you agree that after giving accumulative appreciation of a product that is for free, you at the end put into parentheses “(Hey, one thing: it’s spelled: Résumé)” Good work.

  8. Thank you, a very useful post.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

👋 It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Join To Download Today