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.
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.
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.
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.
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.
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.
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.
Step 3: Add File, Title & Choose Icon
Then, add a title to your file and upload your resume.
Moving on, scroll down the page and choose a matching icon. For this example, we’ve selected the following one:
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.
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.
Step 3: Add Download Shortcode
Go ahead and add the shortcode to the Content Box within the Content tab.
Step 4: Add Background Color to Text Module
Scroll down the Content tab, open the Background subcategory and add ‘#f16334’ as the background color.
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
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
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.
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
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
Once you save your modified page and exit the visual builder, you will see the following result show up on your screen:
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.
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.
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.
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.
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.
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.
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:
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 / shutterstock.com