0

I am not building a theme from scratch and am using a given Wordpress template that allows for full site editing with Gutenberg block editor.

I have been able to add custom CSS (using the Additional CSS feature in Wordpress) that allows me to tweak things site-wide, but not for specific blocks.

For example, on my homepage I have an introduction like this:

Hello, I am a writer, designer, artist 

Currently as a paragraph block.

What I would like to do is to do a scroll animation for the words writer / designer / artist, that looks like this example: https://codepen.io/yoannhel/pen/DMzjog

I've looked at the code there but can't figure out how to apply it to that specific paragraph block only. I tried editing it as an html block, following the code there, and adding a custom css class, but it doesn't work.

Regardless, it would be super helpful to know how to do custom css with specific blocks on my website without going into editing the native theme code as I am using one provided to me.

I'm pretty new to all this, so tips and pointers are really appreciated. Thank you all.

1

1 Answer 1

2

Many blocks allow you to add a class and/or an ID. If you select the block in the Editor, then look on the right side of the screen under the Advanced tab, it will often show "HTML Anchor" (which is an ID) and "Additional CSS class(es)". If the effect is something you plan to repeat, a class is often a good way to go - say, word-animation or something descriptive enough that it's not likely to conflict with other CSS on your website.

As to how to add the CSS itself, there are a variety of ways. Many themes allow you to go to Appearance > Customize, then into an Additional CSS area, and you can add your CSS there. If your theme doesn't support that, you can either look into a plugin that allows you to add in your custom CSS, or else create a child theme. The child theme doesn't require a lot of code but can sometimes feel more intimidating than the Customizer or a plugin that just lets you write it in.

1
  • Thanks so much! I tried twiddling with the additional CSS classes + the theme additional CSS, but it still doesn't work - but maybe I'm missing something. Here is what I'm doing to test: 1. Created a custom HTML gutenberg block 2. Gave it the additional CSS class "wanimate" 3. Pasted the HTML area of the example: codepen.io/yoannhel/pen/DMzjog changing the div class content to "wanimate" and every instance of "content" to "wanimate" 4. Pasted the CSS of the example into the additional CSS of my site, adding ".wanimate" to the start (I'm a beginner at CSS so bear with me!) Aug 31, 2022 at 0:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.