Is there any way in Wordpress (using Elementor) to make the tags break down like button

Question

Is there any way in Wordpress (using elementor) to make the tags break down like this: (https://i.sstatic.net/lGHnnDb9.png)

I have tried using a button and text editor with dynamic tags, but all the tags are merged into the background color. So I might ask, is there any way to break those tags into buttons.

Thank you very much!

Answer 1

yes, of course. First you should add this code to the functions.php file:

function break_tags_shortcode() {
    $tags = get_tags();
    $html = '<div class="break-tags">';
    foreach ( $tags as $tag ) {
        $tag_link = get_tag_link( $tag->term_id );
        $html .= "<a href='{$tag_link}' class='tag'>{$tag->name}</a>";
    }
    $html .= '</div>';
    return $html;
}
add_shortcode('the_break_tag_shortcode', 'break_tags_shortcode');

then find the shortcode widget in elementor and use this shortcode: [the_break_tag_shortcode]

for the style that you want you can add this css code:

.break-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Adjust gap between tags */
}
.break-tags .tag {
    background-color: #e0f0ff; /* Background color of tags */
    color: #333; /* Text color */
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
}
.break-tags .tag:hover {
    background-color: #b0d0ff; /* Background color on hover */
}