How to integrate MailChimp with Divi Builder

How to integrate MailChimp with Divi Builder

In this tutorial I want to share you how to integrate Divi Builder with your MailChimp account. Building an email list is one of the most important things that can grow your business. If you build a mailing list, you will have the opportunity to send them your news and offers directly to their email. In my opinion, one of the best platforms to collect emails and send marketing campaigns is MailChimp.

How to integrate MailChimp with Divi Builder   For this, it´s necessary to create an API key to connect your MailChimp account with your Divi Builder.

Step 1

In your Mailchimp account, click your profile and select “Profile”.


Step 2

After logging in your MailChimp account, clicK “Extras” and select “API Keys“. How to integrate MailChimp with Divi Builder 02

Step 3

Click the Create A Key button to create a new API key. Once the API key is created, copy the API key on the API key column. How to integrate MailChimp with Divi Builder 03

Step 4

Go to your site and add an “Email Optin” module to your Divi layout and select your server Provider: MailChimp. How to integrate MailChimp with Divi Builder 04

Step 5

Enter your MailChimp Account Name and the API key you have created above. Click the Submit button. How to integrate MailChimp with Divi Builder 05

Step 6

Select a MailChimp list from the dropdown menu on the list section. Save changes.

Step 7 (optional)

Configuring Spam Protection Account Enabling it will offer you a much higher level of security. First of all, you will need to create a Google reCaptcha v3 profile for your website. To do it, go to and fill in the details like you can see on this screenshot: When you fill it in, click on  “Submit” button and you´ll get a  reCaptcha Site Key and Secret Key. Go to Emil Optin Settings, choose the option “Spam Protection”. Click to ADD a new reCAPTCHA v3 Account and copy & paste your Google reCaptcha site key & secret key here. Then click Submit.

Step 8

By default, the Email Optin module comes with 3 fields ( First Name, Last Name and Email ). You can remove the unnecessary fields checking Fields. And finally, customize it!

Example in Angeline Theme:

How to integrate MailChimp with Divi Builder 13

Do you need more info about Divi Email Optin Module ? How to add, configure and customize the Divi email optin module:

5 of the best free stock photo sites

5 of the best free stock photo sites

Any creative knows that photos are an essential part of making your blog or website look as beautiful as possible.

Many times we have little budget to buy premium photos and we find it difficult to find beautiful and copyright-free images.

Thanks to stock photography sites and the generosity of many photographers, you will find a large number of beautiful free photos to use on your site, blog or social media.

In this post, I’ve compiled my personal list of 5 best free stock photo sites I usually use for my WordPress Themes.

5 of the best free stock photo sites

Every photo published on these sites are licensed under Creative Commons Zero, which provides users with the freedom to copy, modify, distribute, and use all of the photos without permissions or attribution.

You do not need to ask permission from or provide credit to the photographer.

Most of them constantly feed new photos into their libraries, so it’s best to take a look once in a while.


5 of the best free stock photo sites - Pexels

This is my favourite site to find free stock images. It´s really easy to use and has a  good selection of stock images.

You can find thousands of free images searchable by popular, category, color,..

You can take a look my collections:


5 of the best free stock photo sites - Rawpixel

Rawel pixel is one of the first sites I visit for images, really easy to use and a good selection of stock images.

Here you will not only find images but other free design vectors resources like vectors, psd mockups so I love it.


5 of the best free stock photo sites - Kaboopics

Kaboonpics has a large selection of high quality stock photos completely royalty free.

The images are high quality easy to find. It´s possible filter the photos by categories (travel, lifestyle, people,..) and colors. It is a big advantage!


5 of the best free stock photo sites - Pixabay

This bank images contains more than 1.5 million shared images and videos so it is impossible not to find a good photo for your collection.

It has free pics, illustrations, and even videos.

The main advantage is that you can not only filter the images by categories, but also download the images in different sizes.


5 of the best free stock photo sites - Picjumbo

There are some really beautiful photos to choose from here, from a variety of different categories (such as business, abstract, Fashion, etc.)

In these sites the free stock images are limitless. By using any of my top 5 best free stock image sites, you’re sure to find gorgeous images for your creative project.



12 premium serif fonts for a website

12 premium serif fonts for a website

Choosing the right fonts for a creative project or website can be extremely time consuming since there are thousands of fonts out there.

I love serif typefaces. I include them in all my WordPress themes. I have an authentic arsenal on my computer!

Serif fonts have structural and delicate details at the end of each letter to help achieve that much needed traditional touch to your design.

If you really want to create a professional design work with a quality aspect, you must choose among the best serif fonts available and if they are little known, it will catch the attention of your readers.

Looking for the best serif font collection for your graphic design or website?

I have compiled together 12 premium serif fonts for a Website.

12 premium serif fonts for a website

Where to download these free fonts:

Silk Setif // Fragile // Sunflora // Solitas // Hello Paris // Imbue // Coachella // Merova // Musetta // Butler // Soria // Vanity

TIP: I always recommend a test drive from the source before buying. Enter the words you want to use before. I won’t lie to you, there were times when I loved a font until I saw how a letter formed and it didn’t work for my project.

How to Add Custom Fonts to your Genesis Child Theme

How to Add Custom Fonts to your Genesis Child Theme

Adding a unique font to your website is a great way to make your design stand out online.

In this post, I´ll walk you through the step-by-step process for adding any font to your website.


How to Add Custom Fonts to your Genesis Child Theme


1) Download the font to your computer and extract files if necessary.

Dafont and FontSquirrel are a great source of fonts that are free for commercial use.

I have several posts with awesome fonts for your project:

If you would like a more premium/unique font, you can use Creative Market.

The font I’m using in this tutorial, Simplicité, was purchase on Creative Market ($19)


How to Add Custom Fonts to your Genesis Child Theme 02

2) Create a WebFont Kit for cross-browsing

Upload your .ttf or .otf file to the Webfont Generator and then download your Web Font Kit.

You´ll di

How to Add Custom Fonts to your Genesis Child Theme 03

Now your fonts are ready for the web, you can add them to WordPress. Thankfully, as is often the case with WordPress, this is a relatively simple process thanks to the power of plugins. Let’s dive in.

Typically this kit will include multiple file extensions such as  (.woff), (.woff2) and (.css).

3) Upload the font files to your website

Upload your font file to wp-content/themes/your-theme/fonts directory. Create a separate fonts folder if you don’t have one yet.

You can use an FTP client like FileZilla or Hosting File Manager for this task. In our example,

You have to upload (.woff) (.woff2) archives.

I have uploaded hv_simplicite_regular-webfont.woff and hv_simplicite_regular-webfont.woff2 archives using the File Manager in hPanel.

To upload a file through cPanel’s File Manager, please do the following:

  1. Login to cPanel and open the File Manager.
  2. Navigate to the folder where you want the upload to be located.
  3. Click on the Upload icon from the top toolbar.

File Manager - Upload Button








4) Tell WordPress where to find the font

Open the CSS file in a text editor such as Textedit, NotePad or Sublime.

You´ll find a code like this:

@font-face {
font-family: 'hv_simpliciteregular';
src: url('hv_simplicite_regular-webfont.woff2') format('woff2'),
url('hv_simplicite_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;


Replace the existing source URL with the new URL you created by uploading each file.

After update:

@font-face {
font-family: 'customfont';
src: url('wp-content/themes/yourtheme/fonts/hv_simplicite_regular-webfont.woff2') format('woff2'),
url('wp-content/themes/yourtheme/fonts/hv_simplicite_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;



Then, go to Appearance > Customize > Additional CSS  > add the following code.

Replace the existing source URL with the new URL you created by uploading each file.

By default, the source URL location is set within the downloaded Web Font Kit. It needs to be replaced by the location on your server.

Here’s my font:

@font-face {
font-family: 'hv_simpliciteregular';
src: url('wp-content/themes/Meryl_Theme/fonts/hv_simplicite_regular-webfont.woff2') format('woff2'),
url('wp-content/themes/Meryl_Theme/fonts/hv_simplicite_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;


Importantly, make sure you change the font name and the URL (copy the URL for the font file on your server).

You can then go ahead and use CSS rules to update the fonts on your site. Here’s an example of how to apply the custom font to Header 3 and paragraph sections…

5) Assign the font to elements style (headings, body, etc..)

Now you have to define which elements will use the new font.

To assign to the headings:

h1, h2, h3 {
font-family: 'font name';

To assign the font to the body (all content):

body {
font-family: 'font name';

For example, I want to assign the font to theme title´s:

Here’s the final result:

5 easy ways to improve WordPress site loading speed

5 easy ways to improve WordPress site loading speed

The biggest advantage of lowering your website’s loading time is that it will help tremendously in improving site’s usability and user experience which is essential for today’s online business.

5 easy ways to improve WordPress site loading speed

There are many ways to get started with top-end optimization. Here are 5 ideas to get you going.

1. Get a good Web Host

The major factor that influences the speed of a website is the hosting of your WordPress website. I have used many servers but the best option in terms of speed and service is without a doubt SiteGround. They provide excellent loading speed and customer support guaranteed 24/7.

2. Use an effective catching plugin

WordPress pages are “dynamic.” This means they’re built on the fly every time someone visits a post or page on your website. To build your pages, WordPress has to run a process to find the required information, put it all together, and then display it to your user. A cache plugin generates static pages and improves the site pagespeed 2-5x faster. The cached pages are stored in the memory and when a user makes a request the pages are delivered from the cache. By this the php execution and the database requests are skipped. There are a lot of good WordPress caching plugins available, but I recommend using either WP Fastest cache (free) or LiteSpeed Cache (free) plugin. WP Fastest Cache was rated the #1 (free) cache plugin in this Facebook poll.

3. Compress your images

According to httparchive, in August 2016 the images are more than 64% of the weight of an average website. Usually they tend to weigh more than all of your CSS, JS and HTML combined! If you have a website with lots of images you must optimize them to reduce the size. By reducing the image size, you´ll reduce web page size overall and save server´s bandwidth. There are multiple ways to optimize the images, but doing without losing quality is the smart way. In this article, I’ve covered three types of tools.


Compress and reduce your image size up to 90% with Compressor while maintaining high-quality resolution. It supports JPEG, PNG, GIF & SVG and files size limit is 10 MB.

Or any online tool that resizes images, like Bulk Resize

WebP Express

WebP is a raster image format from Google that’s designed specifically for the web. It provides lossless and lossy compression that allows web designers to show richer images at smaller file sizes. WebP lossy images use predictive coding to encode the image. It reduces the file sizes by looking at the neighboring pixels to predict the values, and then only encodes the differences. Lossy images are up to 34% smaller than the comparable image as a JPEG and 26% than the same as PNG.

4. Avoid using unnecessary plugins

Excess plugins can make your job harder and more complicated than it needs to be and could affect the performance as well as the security of a website. Actually, many times we have installed and activated plugins that we do not even know what they do or how to configure them. So why do we have them there without doing anything consuming resources?

5. Keep your site up-to-date

WordPress is updated frequently. Each update will not only offer new features but it will also fix security issues and bugs. Your WordPress theme and plugins may have regular updates, too. As a website owner, it’s your responsibility to keep your WordPress site, theme, and plugins updated to the latest versions. Not doing so may make your site slow and unreliable, and make you vulnerable to security threats.

Pin It on Pinterest

  • No products in the cart.