Profile Card Hover Effect in WordPress Using CSS | WordPress Tips and Tricks

Hey Everyone, in this tutorial, I will show you how to create Profile Card Hover Effect in WordPress Gutenberg Editor using CSS. The purpose of this tutorial is to teach you how to create the creative content design in Gutenberg using default blocks without a 3rd party block plugin.

CSS Code:
https://gist.github.com/gutenberghub/70554147d53c45b369c496a49e9709c6

Useful Gutenberg Plugins:
Editor Plus | https://wordpress.org/plugins/editorplus/
Block Slider | https://wordpress.org/plugins/block-slider/
EditorsKit | https://wordpress.org/plugins/block-options/

Join The Gutenberg Community on Facebook:
https://www.facebook.com/groups/2617313881834451/?ref=pages_group_cta

Follow:
Facebook | https://www.facebook.com/GutenbergHub/
Twitter | https://twitter.com/gutenberghub
Website | https://gutenberghub.com/

Step by step instruction:
- Add columns block
- Select 3 column variation
- Add group block
- Add group block inside this group
- Add image block inside this group
- Select image
- Select image group from list view
- Add image class
- Add another group after image group
- Add heading block
- Change heading level to h3
- Add heading text
- Set typography
- Add paragraph block
- Add paragraph text
- Set typography
- Select content group from list view
- Remove block spacing
- Add content class
- Select first group from list view
- Set height
- Set background color
- Remove padding
- Add card class
- Publish the page
- Goto dashboard
- Goto editor plus options
- Click on advanced tab
- Paste CSS code here
- You can find the code in the video description
- Click on save button
- Goto frontend

#gutenberg #wordpress #block #tutorial #gutenberghub

Тэги:

#gutenberghub #gutenberg_hub #card_hover_effects_css #css_hover_effects #css_hover_animation #css_hover_image_effects

Скачать видео