- This topic has 5 replies, 3 voices, and was last updated 4 years, 11 months ago by
.
-
Posts
-
Hi I added this code to a code snippet
add_shortcode( 'add_animate', function () { $out = '<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> </head>'; return $out; } );Then I added the animate css class (animate__animated animate__pulse) to a h1 tag on my front page like this:
<h1 class=”gb-headline gb-headline-6183f8c3 gb-headline-text animate__animated animate__pulse”>modern webbdesign + bra användarvänlighet + smart seo = <mark class=”gb-highlight”><span DIN VINSTMASKIN!</mark></h1>
I would hope that the word “DIN VINSTMASKIN!” to animate but it disappeared. I guess I need to instert the short code from the snippet, but where? Or did I miss something else?
Customer Support
Hi there,
That’s not how you add the script or stylesheet to the head of the page. The
animate.min.cssstylesheet isn’t loading on your site.You can do it like this:
1.) Create a Hook element.
2.) Paste this code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>3.) Set the hook to
wp_head. Set the Display rule location to “Entire site”.4.) Save it.
With this, you’ve inserted animate.min.css on your site’s
<head>tag.Thanks Elvin! I tried that now but no animation is happening. I just added the class in the code editor. Is there anything else I need to do?
<span class=”animate__animated animate__pulse”>DIN VINSTMASKIN!</span>see the whole code block:
<!– wp:generateblocks/container {“uniqueId”:”d8b5604e”,”paddingBottom”:”30″,”backgroundColor”:”#fffce2″,”isDynamic”:true} –>
<!– wp:generateblocks/headline {“uniqueId”:”3ec55f22″,”element”:”h1″,”alignment”:”center”,”highlightTextColor”:”#fb6c2d”} –>
<h1 class=”gb-headline gb-headline-3ec55f22 gb-headline-text”>modern webbdesign + bra användarvänlighet + smart seo = <mark class=”gb-highlight”><span class=”animate__animated animate__pulse”>DIN VINSTMASKIN!</span></mark></h1>
<!– /wp:generateblocks/headline –>
<!– /wp:generateblocks/container –>Customer Support
Hi there,
this doc is handy – under Gotchas you will see the CSS doesn’t work with
inlineelements:https://animate.style/#gotchas
Give your span element a class of
is-inline-blockThen add this CSS:
.is-inline-block { display: inline-block; }Great! thanks, it solved the problem;)
Glad to hear that
- You must be logged in to reply to this topic.
