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!
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 */
}