Hi pal. i like this video. its really clear and easy to apply. i have a question for you. how do a make a button that plays/ turns background music off and on on a website?
@rushx0099
2 жыл бұрын
*thank you and have a good day that all :)*
@chrisnicol8175
Жыл бұрын
Thanks for this, really good intro into those extra custom tools. One question, how do I change the colour of the background behind the button? I don't want it to be the default white, I want to change the colour of the button block.
@BuildThatWebsite
Жыл бұрын
You would use the .wp-block-buttons selector, and give it a background color with CSS. The easier method is to use GenerateBlocks, which is a completely free (and lightweight) plugin. It will let you customize many aspects of the built-in button block including padding/margin and background color.
@valj137
2 жыл бұрын
This is great! Thank you!
@user-l9v7xff567
Жыл бұрын
Do I have to put the same code again to rewrite the created button in a new place?
@BuildThatWebsite
Жыл бұрын
No, if it's all on the same page you can just insert the css once. And if you want to use the button on multiple pages, just put the code in you sitewide css
@benardmuntet7709
Жыл бұрын
how can you begin your video from adding buttons, how did you reach there
@BuildThatWebsite
Жыл бұрын
It's just the standard gutenberg editor. Are you using the classic editor instead?
@WorldEnglishBlog
3 жыл бұрын
Good stuff again, thanks❗
@BuildThatWebsite
3 жыл бұрын
Thanks! I love what you're doing over on your channel. One suggestion for your website: the font-size is quite large on mobile devices, and I bet it's hurting your bounce rate and time-on-site for mobile visitors. Interestingly, you have a media query that increases the base font-size for small screens: @media (min-width: 480px) html { font-size: 24px; } But I'd actually suggest doing the opposite: @media screen and (max-width: 480px) { html { font-size: 16px } } And perhaps increasing your font-size a bit for larger screens. And please let me know if there are any tutorial topics you'd find useful!
@BuildThatWebsite
3 жыл бұрын
One more for ya. I love that you're using gutenberg blocks and groups. So many people are resisting the switch. @media screen and (max-width: 480px) { .wp-block-group.has-background { padding: 1.25em 1.25em; } } This will leave a little more room for your inner block group content on mobile screens. Keep up the awesome work!
@WorldEnglishBlog
3 жыл бұрын
@@BuildThatWebsite Thanks a lot for this. I have just started looking at CSS thanks to your tutorials but I haven't added any yet. The font size code must be automatic, but it's odd because as you say it doesn't look good on mobile. As a complete newbie can I just add the code you recommended with the smaller font size to Appearance -> Additional CSS or do I have to change the current code?
@BuildThatWebsite
3 жыл бұрын
I checked the source code of your site and my best guess is you're running X-theme as your theme. I've never used it, but I'm confident you get full control of your typography in the backend settings, and that's the best place to change this, rather than trying to override with CSS (which you CAN do if necessary). Here's a help doc that might be relevant: theme.co/forum/t/best-way-to-do-responsive-fonts/74086 But definitely see if the support team can help you out. It's always better to set things up correctly in your theme first before trying to override styles.
@WorldEnglishBlog
3 жыл бұрын
@@BuildThatWebsite Thanks for this Matt. You're right, I'm using X-theme. I went to Theme options -> Typography and I switched from Stepped to Scaling. This seems to have done the trick. It was super simple to fix, thanks for bringing it to my attention.
@srrywrongname57
3 жыл бұрын
I want to make a button that is basically almost a sqaure with 0 radius on left,top,bottom but on the right i want it to be closed in an arrow shape. How can i do it and put in elementor ppl say add btn triangle but im not good with css
@BuildThatWebsite
3 жыл бұрын
You either need to us CSS triangles in a pseudo-element, or you could create a transparent PNG image and use it as the button background. Either way, you're going to need some CSS. There are free CSS triangle generators online that are very helpful: triangle.designyourcode.io/
@jonathanmora8208
2 жыл бұрын
What about moving the button position using css
@BuildThatWebsite
2 жыл бұрын
You can use the transform: translate(x, y); property. I have a demo in this tutorial: www.buildthatwebsite.com/wordpress-button-hover-effects
@exposedhobo
3 жыл бұрын
how does guttenburg have a button but no built in option for button hover, what are we back to 2001 wtf
@BuildThatWebsite
3 жыл бұрын
I agree with you. It's a completely ridiculous omission. They need to fix that soon.
Пікірлер: 22