How to Create a Dynamic Progress Bar in Brizy

Sometimes, you need to show the data in a graphical design. Well, the progress bar might be the solution. Commonly, the progress bar is used to visualize the progression of an extended computer operation, such as a download/ upload file transfer, disk memory, processor, installation, and so on. Today, a progress bar is not only for showing a computer operation. With your creativity, the progress bar can be used for many things you can apply to your website.

The uses of the progress bar on the website following are below:

  • Reviews
  • Tabulation of Data
  • Indicator of Improvements
  • Indicator of Project Progression
  • Etc.

With Brizy, you can create a progress bar very easily. With the ability to display custom fields data, you can dynamically add custom elements to your content, including a progress bar. This article will show you how to create a dynamic progress bar in Brizy.

How to Create a Dynamic Progress Bar in Brizy

Step 1: Create the Custom Fields

First, you must create the custom fields and set the field type to a number. By default, WordPress doesn’t have a custom field feature. So, you need to download and install it first. There are many WordPress custom fields plugins on the WordPress directory. In this tutorial, we use ACF as our custom fields WordPress plugin. If you don’t like ACF, you can use Pods or other ACF alternatives that support the number field.

Once you’ve downloaded and installed the ACF plugin into your WordPress, on your WordPress dashboard, go to Custom Fields -> Add New to create a new custom fields group. Give your custom fields group a name and click the Add Field button to add a new field.

Next, you can set the field label and field name on the Field Label and Field Name fields. On the Field Type field, set to Number, and then you can set the minimum value and maximum value on the Minimum Value and Maximum Value fields. In this example, we set the minimum value to 1 and the maximum value to 100.

Click the Add Field button to add more fields and repeat the steps above. This example will create a dynamic progress bar for sneakers review. So, we added some fields relevant to sneakers rating.

Once you’ve added the custom fields, go to the Location section to set where the custom fields group is to be assigned. You can use the default rule if you want the custom fields group to be given to blog posts. Click the Publish button to publish the custom fields group.

Step 2: Create the Custom Template for Blog Post

The feature to create a custom template is available on the free version of Brizy, but we recommend you upgrade your Brizy to the pro version, it allows you to access all the elements on the elements panel. With Brizy Pro, your custom template can be maximized.

Okay, once your custom fields are ready, you can create the custom templates for the article types you want to add to the dynamic progress bar. If you already have a template/s, you can directly go to your existing template and edit it. In this tutorial, we will edit our current template. But, if you are new to Brizy and want to learn how to create a custom template, you can read the article “How to Create a Custom Single Post Template in WordPress Using Brizy.”

Go to your existing template, and click the Edit with Brizy button, which brings you to Brizy editor.

Alright, it’s time to add the progress bar to your template. On your Brizy editor, select the Progress element from the elements panel and then drag and drop it into the canvas area. You can place the Progress element anywhere you want. We will place the Progress element under the Content element in this example.

Next, it’s time to edit and style up the progress bar. First, we want to edit the width of the progress bar. On the options toolbar of the progress bar, go to the Settings and click on it. In this example, we set the Width to 60%.

Once you’ve edited the width of the progress bar, go to the leftmost of the options toolbar and click on it. There are some settings that you can set here. There are Style, Fill, Title, and Percentage. First, go to the Fill settings, click the hamburger icon (see the GIF), and assign a field label to the custom fields you’ve just created.

As we mentioned, we will create a dynamic progress bar for sneakers review. So, we want to disable the percentage option by sliding the Percentage toggle to the left.

Next, edit the title of the progress bar according to the field label you assigned on the Fill settings. Once you’ve edited the title, you can duplicate the progress bar by clicking the Duplicate button. Because we have four field labels of custom fields, so we duplicate the progress bar three times.

Now, you can edit for the other progress bars as you did on the first progress bar (assigning a field label on the Fill settings and editing the title of the progress bar). Once you’ve edited and styled up those progress bars, update your single post template by clicking the Update button.

Step 3: Create a New Blog Post

Alright, you can create a new blog post once everything is ready. Make sure to add the values on the custom fields you have created in step one above. The given values will be used to set the fills of the bars.

Last but not least, make sure to set the category according to the category of the custom template it is assigned to (step 2).

The Bottom Line

This article shows you how to create a dynamic progress bar in Birizy. Brizy is one of the easiest tools to create websites, blogs, and online shops. The integration between Brizy and custom fields WordPress plugin makes us possible to create a dynamic progress bar for our site. Besides the progress bar, we can add dynamic content to any Brizy elements that offer an option to set the value dynamically. Rating element is another example whereby you can use it to create a dynamic star rating.

How to Create an Image Gallery in Brizy

Image is worth a thousand words. Maybe that sounds cli·ché, but we believe an image has magical power. Just like a work of art, an image can be processed or customized into anything. One of them is to make it into an image gallery. There are many benefits of an image gallery on the website, such as below:

  • Showing the shop products and services
  • Showing the photographs you’ve taken
  • Many other things relevant to your business

Brizy has a feature where you can easily create an image gallery. The feature is called Gallery element. The Gallery element is only available on Brizy Pro, so ensure you have already upgraded to Brizy Pro. This article will show you how to create an image gallery in Brizy.

How to Create an Image Gallery in Brizy

On your WordPress Dashboard, go to the Pages -> Add New. Click the Edit with Brizy button, which brings you to the Brizy editor.

Once you enter the Brizy editor, continue to add a new block by clicking the plus (+) icon. You will see the Blocks library because we want to start everything from scratch, so please select the Create your own option.

Click the plus (+) icon, select the Gallery element from the Elements panel, then drag and drop it into the block. By default, two columns will appear where we can add the images. In this example, we want the image gallery to display four images in two columns. So, we need two more boxes for another two images. On the image options toolbar, click the Duplicate. Do it twice; you will get two additional boxes for placing the images.

Now you have two columns with four images compartment. Next, adjust the width of the image gallery by clicking the mixer icon, then go to Settings and click on it. For your reference, we will set the Width at 60 %.

You can go to the Gallery settings if you want more or fewer columns on your image gallery. On Gallery settings, you can set the Columns, Spacing, and the option to Open in Lightbox.

This tutorial will create an image gallery of summer outfit collections. First, we will add a title to the image gallery by selecting the Text element from the elements panel and then dragging and dropping it into the above columns. You can put any title and style up the text with your preference.

Well, let’s start to add the images. You can add any images you want. In this gallery, we use four images with the same aspect ratio (1013×1013). Using the same aspect ratio (width and height) for those images will help you to get images that look proportional.

Once you’ve added the images to your gallery, we will add an effect to those images where you click on them, and they can open up into a larger frame; that effect is called a lightbox.

To add a lightbox effect into the gallery is very easy. Go to the Gallery settings, and you will find an option to activate the Lightbox effect. Slide the toggle of Open in Lightbox to the right to activate it.

Click the Preview button and see how it worked.

The Bottom Line

The image gallery can introduce your visitors to your website’s purpose. It can be a showcase of your products or your services. In other words, having a stunning gallery is a must for every website. With Gallery element from Brizy, you can make it come true. We hope this article helps you improve on customizing an image, especially in creating the image gallery.

How to Disable Embeds in WordPress (without a Plugin)

You may have seen Youtube videos or some tweets displayed on third-party sites. If WordPress powers the site, chances are they are using the oEmbed feature that WordPress has merged since WordPress 4.4.

The oEmbed feature allows users to embed content from another third-party site with just a URL. You just need to place the source URL in the content area, then WordPress will automatically turn it into an embed and display it on your page as a live preview of the source.

If you think you don’t need the oEmbed feature for your WordPress site, you may want to disable the feature to improve your site’s overall load time since every time you load a page, it generates an additional HTTP request on your WordPress site to load the wp-embed.min.js file. The request itself is sometimes a bigger deal than the content download size because things like these add up over time.

In this tutorial, we will show you how to optimize your WordPress site by disabling the embed features.

Disabling Embeds in WordPress Using Custom Code

Before you get started, you may want to backup your site and use a child theme to avoid breaking the parent theme or losing your changes when you update your theme.

Once you’re ready, go to Appearance -> Theme File Editor from your WordPress admin dashboard, then proceed to open up the function.php file.

Once you have opened up the file, then add the following custom code to the child theme (or parent theme if you don’t use a child theme) function.php file.

function disable_embeds_code_init() {
 // Remove the REST API endpoint.
 remove_action( 'rest_api_init', 'wp_oembed_register_route' );
 // Turn off oEmbed auto discovery.
 add_filter( 'embed_oembed_discover', '__return_false' );
 // Don't filter oEmbed results.
 remove_filter( 'oembed_dataparse', 'wp_filter_oembed_result', 10 );
 // Remove oEmbed discovery links.
 remove_action( 'wp_head', 'wp_oembed_add_discovery_links' );
 // Remove oEmbed-specific JavaScript from the front-end and back-end.
 remove_action( 'wp_head', 'wp_oembed_add_host_js' );
 add_filter( 'tiny_mce_plugins', 'disable_embeds_tiny_mce_plugin' );
 // Remove all embeds rewrite rules.
 add_filter( 'rewrite_rules_array', 'disable_embeds_rewrites' );
 // Remove filter of the oEmbed result before any HTTP requests are made.
 remove_filter( 'pre_oembed_result', 'wp_filter_pre_oembed_result', 10 );
}
add_action( 'init', 'disable_embeds_code_init', 9999 );
function disable_embeds_tiny_mce_plugin($plugins) {
    return array_diff($plugins, array('wpembed'));
}
function disable_embeds_rewrites($rules) {
    foreach($rules as $rule => $rewrite) {
        if(false !== strpos($rewrite, 'embed=true')) {
            unset($rules[$rule]);
        }
    }
    return $rules;
}

Alternatively, you can disable the embed script by using the wp_dequeue_script function for it. And the code is as follows.

function my_deregister_scripts(){
 wp_dequeue_script( 'wp-embed' );
}
add_action( 'wp_footer', 'my_deregister_scripts' );

How to Create a Rounded Image in Brizy

On the website, images are used for all kinds of reasons, as below:

  • Presenting products or services
  • Illustrating stories
  • Showing ads
  • Etc

There are many ways to make the images on our website look great and exciting to the visitors. This article will show you how to create a rounded, specifically circular image in Brizy. With Brizy, you can create a round image very easily. Brizy is a next-gen website builder that anyone can use. It just takes a few minutes to make a rounded image with Brizy.

How to Create a Circular Image in Brizy

Step 1: Add an Image Element

First of all, go to your Brizy editor. You can create a new page or edit the existing one. In this example, We will edit our testimonials page.

As you can see from the image above, there is no photo of the people who gave the testimonial. So right now, our job is to add a photo/ avatar for each person who shows a testimonial and make it rounded.

Well, we’re going to start with the middle column. Add an image into the middle column by selecting the image element from the elements panel and then dragging and dropping it into the middle column (between the testimonial and the people’s names who gave the testimonial). After that, add an image. For your information, we are using an image with a 512 width x 512 height aspect ratio.

Note: When you want to create a circular image, we recommend you add an image that has an aspect ratio that has the same values as the width and the height. It will make it easier to create circular images. Still, you can use an image with different values for width and height, but you need to adjust the image’s width and height manually.

Step 2: Setting the Image

Once you’ve added the image, set the image size to the Original. On the options toolbar, go to the Settings and click on it. Adjust the size as you want to. As your reference, we set the height at 18%.

Next, go to the Styling tab and click on it. Click the Styling option to open the settings panel, and you can start to make a rounded image by adjusting the toggle of the Corner option. You can change the corner value as you want to. In this example, we want to make a circular image, so we set the value that can make the image circular, and 30 px is good enough to make it circular.

As you can see from the image above, when we’ve set the corner value to 30 px, the photo/ avatar is rounded perfectly (circular). Play around with those settings and create your best-rounded image.

The Bottom Line

This article shows you how to create a rounded image in Brizy. With Brizy, applying corners to the image is seamless and effortless. We hope this article helps you to improve on customizing an image which is, in this case, a rounded image.

How to Create a Drop Shadow in Brizy

Wise people say that an image is worth a thousand words. Maybe that sounds cli·ché, But we believe the image has magical power. One of the effects that can help an image be more interesting is the shadow effect. The shadow in the image is essential. But, adding a shadow effect could distract an image. So we need to be careful to play with it. Once we know how to play with the shadow, it can be a great advantage to make your image stunning. There are some types of shadow; the most popular one people commonly use is the drop shadow.

With Brizy, you can create a drop shadow very easily. This article will show you how to create a drop shadow in Brizy. Let’s get started!

How to Add a Drop Shadow on the Image

On your WordPress Dashboard, go to the Pages -> Add New. Click the Edit with Brizy button, which brings you to the Brizy editor.

Once you enter the Brizy editor, continue to add a new block by clicking the plus (+) icon. You will see the Blocks library because we want to start everything from scratch, so please select the Create your own option.

Next, click the mixer button. On the panel, go to Settings and change the block’s width. In this tutorial, we set the Width at 40%. You can customize more by editing and styling the block to your preference. Once you have finished editing and styling up the block’s setting, add an image element by clicking the plus (+) icon and dragging the Image element from the Elements panel. After that, add an image.

T

The shadows are grouped within color. So, within the options toolbar, go to the Colors and click on it. You will see the three selections in the tab. There are Overlay, Border, and Shadow. Click the Shadow tab, and you’ll start adding the shadow to the image.

On the Shadow settings, you will find several things that you can set as below:

  • Shadows color and opacity
  • Shadows direction (Right, left, up, bottom, and all four cardinal at once)
  • Shadows Spread

First, start with the shadow color. You can write the hex color code or move the cursor to pick the shadow color and set the shadow opacity as your preference. Once you have finished selecting the color and opacity, you can continue to edit the shadow directions and spreading.

As shown in the GIF above, we applied some changes to shadow settings. There are the following changes that we’ve applied as below:

  • Color: #373434
  • Opacity: 72%
  • Shadow directions:
    • Right: 6 px
    • Bottom: 6 px
    • Spreading: 14 px

That’s it. Play around with the shadow settings and make your image outstanding.

The Bottom Line

This article shows how to add a drop shadow to the image element. But. you can apply this tutorial to add a drop shadow for other elements or any purpose, such as below:

  • Columns
  • Rows
  • Blocks
  • Etc

Well, as we mentioned in the introduction above, we must be careful to play with shadow effects. We suggest you consider when you’re working with the shadows in website design, they should not be harsh (subtle).

How to Make Content Vertically Centered in Divi Column

By using the Divi spacing options, you can give the column equal top and bottom padding to make the module vertically centered in the column. You can also make the content top-aligned within the column by adding bottom padding.

However, it may be not easy to keep the alignment on different browser widths and you may have to adjust the spacing when updating your page with more content.

Then you might be asking, how to vertically align content without having to worry about that?

In this tutorial, we are going to show you how to make sure the size of the columns will adjust to the size of the column with the most content in the row by using the “Equalize Column Heights” setting in the row settings which have “The Flex” CSS property (Flex Box) that let you set flexible length on flexible items.

And also by utilizing the setting, we will make the content vertically centered in Divi by adding a few small CSS snippets to vertically align the content in any column,

Let’s get into practical, shall we?

Start Making Content Vertically Centered in Divi Column

To get started, you need to create a new page then use the Divi Builder to edit the page. Once you are in the editor select Choose A Premade Layout to start choosing a premade layout.

For this tutorial, we are using the Interior Design Company – Portfolio premade layout for demonstration. If by chance you want to edit an existing page, then you may want to skip this part and proceed to the method part of this tutorial.

Go ahead and select the layout from the Layout Packs. You can use the search function to find the layout faster because Divi has so many premade layouts to choose from.

Once you have the layout loaded in the editor, open the second row or the first of the Case Study Row setting, go to the Design tab then open the Sizing block and you’ll see that the “Equalize Column Height” setting is already active which means the flex property is present on this row.

In this tutorial, we will use 2 methods to demonstrate making content vertically centered in Divi.

Method 1: Make Content Vertically Centered Using Align Item Center and Auto Margin

The first method is by adding a small CSS snippet to the row settings to adjust the margin automatically.

After you make sure the “Equalize Column Height” setting is active in the Row Settings, continue by going to the Advanced tab and toggle open the Custom CSS block. On the Main Element code editor, add the following snippet there.

align-items: center;

As you can see in the above image, the content of the column is vertically centered.

And you can make the other row apply the same snippet to their Main Element CSS so their content will be vertically centered as well by taking advantage of Divi’s “Extend” style feature.

To do so, just hover a bit on the Main Element CSS editor, then click on the overflow icon or you can right-click Main Element to show the Extend Main Element option, then proceed to select it. On the appearing window, you will be asked where to extend the CSS snippet to. Let’s apply it to all the rows in the current section by selecting the following option.

  • To: All Rows
  • Throughout: This Section

Once you did the above steps, you’ll find all the columns are vertically centered.

You may also choose to individually make the column content vertically centered by opening the Column Settings and then moving to the Advanced tab →  Custom CSS block to place margin: auto; CSS snippet in the Main Element code editor.

If you want the content to be bottom-aligned or top-aligned you can do so by modifying the margin: auto; CSS snippet as follows:

  • Bottom-aligned: margin: auto auto 0;

  • Top aligned: margin: 0 auto auto;

Method 2: Make Content Vertically Aligned Using Flex Direction

In the first method, you may have noticed the background of the text column shrinking to fit the content. That white background is the background of the second column. So, if you make the row background white instead of the column, the white background will span to the full height of the row, or you can make the background of the page white.

For this method, you can leave the background color as default. By using the flex-direction to align the content of our column, not only you don’t have to lose the flex from the “Equalize Column Height” setting which keeps your column height the same, but also you will keep the background color of the column span to the row height.

Let’s get into how to use the flex-direction, start by opening the Row settings from the previous example and clear any custom code you may have there by right clicking the Custom CSS block, then select Reset Custom CSS Style.

Once the Custom CSS is clear, continue by going back to the Content tab then opening up column 2 settings, then proceed to the Advanced tab and add the following CSS snippet in Custom CSSMain Element.

display: flex;
flex-direction: column;
justify-content: center;

Now, you will get the full height of the column background back along with the content is vertically centered also.

If you want to align the content to the top or the bottom of the column, you just need to modify the code snippet a bit, which is the justify-content: center; part. Here’s the example of the modified snippet:

  • Top-aligned content:
display: flex;
flex-direction: column;
justify-content: flex-start;
  • Bottom-aligned content:
display: flex;
flex-direction: column;
justify-content: flex-end;

The Bottom Line

Vertically aligning your content may come in handy if you have some columns and you want to make sure the other column is vertically centered. For example, you may want to have the logos for your sponsor section that have a five-column layout to be vertically centered, or when you want to make sure your download button or CTA button on the other column is always vertically centered.

Top Disadvantages of Copying Another Business Creative Designs

“Imitation is the best form of flattery.

Artistic inspiration has been a phenomenon for centuries; whether it is literature, art, music, or even writing, humans have been inspired by each other’s work to become more creative and develop better ideas.

However, there is a big difference between being inspired by someone else and copying their work; the latter is an illegal act that should not be applied at all costs. In marketing, advertising, or branding, copying the graphic designs of others negatively impacts the business. It is most likely full of risks and serious consequences, so here are some of the critical reasons for avoiding such a mistake and concentrating on uniqueness only.

It is Illegal

Designs belong to their original designer who first created them or the companies they work for, particularly if they own the copyright of their work as official proof. Copying other businesses’ designs might cause legal issues if competitors press charges or file a lawsuit.
Generally, the law protects graphic designs and digital artwork. For example, when a company’s brand is a protected trademark, its logo design, brand identity, color lines, and other features are protected. No other business can come close to its designs or branding approaches.

It is Hard to Adjust to Your Business

Copying another brand’s graphic designs makes it hard to edit and adjust them to fit a different branding approach. Despite the temptation of getting creative work as quickly as possible, it usually doesn’t fit easily. It can’t match the company’s vision or identity because it was designed for another business.

Sometimes companies utilize graphic designs for a specific campaign with an intention to expand the work and launch further campaigns all under the same concept. However, when another business copies those designs and uses them, they’ll lose the context and visionary meaning. Moreover, they won’t deliver the same message they were initially created to provide.

The Targeted Audience Can Be Different

Despite establishing your brand in the same market as the brand you are copying from, their targeted audience may be different than yours. Unless you have their targeting strategy, copying them will negatively affect your brand more than you have thought about.

For example, the target audience of an event website, Helpdesk services, Restaurant, or Hotel are all different and need a different kind of strategy to approach.

An innovative graphic design plan is essential and has to be preceded by studying and analyzing your audience’s desires and mindsets. It’s the only way to benefit from graphic designs to the maximum. Otherwise, it might be no more than a good set of visuals projected on your accounts or printable materials.

Less Confidence in Your Brand

Your customers are most likely to recognize your copied design, which conveys that your brand lacks creativity and credibility. Therefore, they will have less confidence in your business and possibly prefer to choose other brands over yours.

Also, copying your competitors’ work does not allow you to test the waters to check if your designs and marketing strategies are working well. That way, you will lose a significant opportunity to develop the business based adequately on accurate customer feedback.

Alternative Solutions to Avoid Copying Your Competitors

Define Your Targets

Every marketing strategy needs specific goals and a clear plan; you might need to increase your sales and followers on social media, modify your website content, spread brand awareness using billboards, etc. By planning correctly, you will be able to realize the design method, targeted audience, and marketing content you need to achieve your goals.

Choosing the Right Employee and Tools

Nowadays, many graphic design tools are available online and offline. Most importantly, those tools are affordable and can provide a great advantage when utilized correctly. Moreover, many graphic design professionals are available for freelance work; All you need is the tools and the skillful specialist.

Instead of focusing on competitors’ work, equip your staff with the proper tools to create brilliant designs, prepare a comprehensive plan including your target goal and buyer persona, then let the graphic designers handle the rest of the work.

Hire the Innovative Designer

Once you have your plan, strategy, and vision built up, and you might need to conduct competitive tests to hire a designer qualified enough to come up with new ideas and creative designs dedicated to your business, with no copying of someone else’s work.

Conclusion

“Copying is a design error.”

Inspiration is one of the powerful methods for creativity. Still, copying is basically the shortest way to stay behind or even drop out of the market if the brand you copy press charges against you. Or the audience recognizes it.

Considering all the above, there are always proper solutions for building a creative brand instead of copying others’ creativity, especially since its cons are much more than its pros.
Lastly, keep in mind that success does not happen overnight, but if you are hardworking, dedicated, and taking the right steps towards your goals, you will be able to outperform your competitors.

How to Create Dynamic Download Link in Divi

If you run a file download site or want to create a custom post type that requires you to add a download link on each post, then you need to use a dynamic download link for the file. With a dynamic download link, you can add a distinct link on each post with the same layout.

The dynamic link is created by filling a custom field with a link, and the custom field itself is created with the help of a custom field plugin like ACF (Advanced Custom Field) or Pods. Then by using Divi Theme Builder, you create a custom template to pull the link to the download button (or text) with the dynamic content function.

Here is the gist of the steps that you’ll follow in the tutorial:

  • Create a custom field to place the dynamic download link
  • Create a custom template for the posts with a download button to pull the download link from the custom field
  • Create a post using the template you created and place the link in the download link custom field

Step 1: Create the Dynamic Download Link Custom Field

To get started, you need to install and activate the ACF plugin first since we use it for this tutorial. You can get the plugin for free from wordpress.org. Or you can skip this step if you are using another plugin (read: ACF alternatives).

Once you’re ready, go to Custom FieldsAdd New from the WordPress dashboard. On this page, you will create a field group for the custom field. Start by giving the group a title then proceed to add the field to this group by clicking the +Add Field button.

Continue by filling out all the necessary fields. Then set the Field Type section to URL so the field can be used to place your download link later.

You can add more custom fields by clicking on the +Add FIeld button.

Since we just need one custom field for the download link, let’s continue our tutorial by moving to the Location block to set the rules for the custom field location to appear. Here you can choose where to add your custom field. From the page, post, and if you have created a custom post type for it, you also can select it from this block also. This time we will use the regular post (blog post) by setting the rules as follow:

  • Post type Is Equal to → Post

You can leave the Settings block to its default, and once you’re ready, save your custom field by clicking the Publish button.

Step 2: Create a Custom Template in Divi Theme Builder

After you created the custom field to place the download link, the next step is to create a custom template for the blog post since the custom field is assigned to it.

The custom template’s purpose is to pull the link from the blog post by using the Divi dynamic content functionality.

Start by going Divi → Theme Builder from your WordPress dashboard. On this page, start to create a new template by clicking on the + Add New Template button.

On the new appearing window, select the Post All Post option then continue by clicking on the Create Template button.

Once clicked, you still need to select which part of the post you want to create the template for. Since we need to create a post content with the dynamic download link, then click on the Add Custom Body block, and you will be offered to use the premade layout by clicking Add From Library or if you want to build the template from scratch, simply click Build Custom Body option.

Once you clicked the button, you will be taken to the Divi Builder editor to create your template. Feel free to add all the modules you need to the editor. Once you are ready, add the button module for the download button. You can customize the button style in the Design tab, and the button position in the Advanced tab.

After you finished the button design, then proceed to add the dynamic download link for the button.

As we said before, the link in the button will be the link from the URL you’ll place in the custom field on the blog post later. To make it so, go back to the Content tab of the Button Settings then move to the Link block, then hover a bit on the right side of the Button Link URL field to display the database icon and click it to show the dynamic content option. Proceed to select the dynamic download link custom field you created from the list.

Once you did the step above, proceed to save your changes to the button, and your button will be ready for the dynamic download link!

Remember to save your template to proceed to the next step.

Step 3: Create a New Post

It’s time to create a new post! And make sure you create the post type according to the template and custom field you’ve created for the dynamic download link.

As we use the blog post type for this tutorial, then add a title, a featured image, the content, and another blog-related thing as usual, then proceed to place the download link in the dynamic download link custom field on the custom field section below the editor.

Publish the post once the post is ready.

The Bottom Line

Introduced in 2018, dynamic content in Divi allows you to build dynamic posts that automatically update themselves as the content changes. If combined with the custom field and the custom post type you’ll have some of the main keys to unlock WordPress power to build custom dynamic WordPress sites.

A dynamic download link is just one of the implementations of dynamic content in Divi, which will be very useful if you run a file download website or stock photo website.

Pin It on Pinterest

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.