Make a WordPress Pricing Table with TablePress

No video

Make a WordPress Pricing Table with TablePress

Рет қаралды 14,040

Күн бұрын

In this video, I'll show you how to build this beautiful pricing table, using nothing but the free TablePress plugin and some CSS.
➜ Get the complete CSS code: www.buildthatw...
➜ More Tablepress CSS: www.buildthatw...
In this video, you'll learn how to add images to TablePress, change the background colors and text colors for table cells, adjust font-sizes and more!
Along the way, you'll learn some handy CSS code, as well as how to laser-target specific rows, columns and cells in TablePress by using its built-in classes. For more on that, see this article:
www.buildthatw...
👉 Tools & Plugins I Use
-----------------------------------------------
• Hosting: Cloudways buildthatwebsi...
• Theme: Generatepress - buildthatwebsi...
• Page Builder: Elementor Pro - buildthatwebsi...
• Site speed & Optimization: WPRocket - buildthatwebsi...

Пікірлер: 21

@the23rdsubject 5 ай бұрын

Still relevant (2024). Thank you for the simple and detailed explanation! :)

@larryfarr 2 жыл бұрын

Whoa! What an excellent tutorial. Top notch content along with an excellent delivery. You deserve 10 stars! Thank you very much for sharing your expertise with us.

@BuildThatWebsite 2 жыл бұрын

Thanks Larry. Please let me know if you have an idea for a future video.

@dvlprsakib9970 3 жыл бұрын

awesome tutorial ..thank you

@BuildThatWebsite 3 жыл бұрын

Glad you liked it!

@user-cg5xo8xt6q 3 жыл бұрын

Hey guys, thanks for sharing. Would be great if you can share the CSS code examples that you use in that video.

@BuildThatWebsite 3 жыл бұрын

I do plan to, I haven't figured out exactly where I want to host it though.

@mahendrashah7214 3 жыл бұрын

nice video and very useful too. can you also show how add star rating ? Thanks !

@BuildThatWebsite 3 жыл бұрын

There are a number of free plugins that have a star-rating shortcode. That's the easiest method. If you know a little PHP, you can use the built-in WordPress star rating function: developer.wordpress.org/reference/functions/wp_star_rating/

@theuttamgupta 3 жыл бұрын

Hey, You give a Amazing design in tablepress by custom CSS Can you share whole CSS (same as table image look) I Checkout your blog post but not found Whole CSS. If you can share whole CSS then You'll make my Day!

@BuildThatWebsite 3 жыл бұрын

I definitely need to do that. I really hope I have the demo page saved somewhere so I don't have to rebuild. I'm travelling at the moment but will try to find it when I return.

@theuttamgupta 3 жыл бұрын

@@BuildThatWebsite Thanks buddy! Try to find that'll really helpful for me. And do mentioned me if are adding. Happy Traveling ❤️

@jovanperic4214 3 жыл бұрын

Thank you so much for this tutorial. The following code doesn't work on images but text is OK. .tablepress.test-table td { text-align: center; } .tablepress.test-table th { text-align: center; }

@BuildThatWebsite 3 жыл бұрын

If your images aren't being centered then the most likely cause is the HTML you're using to insert the image has a class in it that is setting a different alignment. For example

@calebfortune Жыл бұрын

I love this! Question tho. My tablepress table has a super thin black border around the whole thing. It appears to be default and my css isn’t affecting it. Any idea what that is?

@BuildThatWebsite Жыл бұрын

Probably default table styling from your theme. You can use the developer tools in your browser to find the css rule that is causing it. If you've never used it before, this can get you started: kzfaq.info/get/bejne/Z5thgbt-0JbFYpc.html

@calebfortune Жыл бұрын

@@BuildThatWebsite Thanks! I tinkered and was able to kill it on the column level using border: hidden;

@johnhelyar1366 3 жыл бұрын

I am working with table press and I am stuck on being able to add a gap between the columns I have the columns and want to add say 10px between them can you help?

@BuildThatWebsite 3 жыл бұрын

Add a class to the table, such as 'border-spacing'. Then you can write a CSS rule: table.border-spacing { border-collapse: separate; border-spacing: 10px 0; } I think I may have covered this at the very end of the video.

@johnhelyar1366 3 жыл бұрын

@@BuildThatWebsite you may of done but might of missed it sorry if I did. I have another question on my site i have 3 tables next to each other currently i have them as 3 separate tables which is ok but increases the DOM count of my site but when looking on a mobile it stacks them nicely down the page but when i have 3 in the same table it just squishes them together and doesnt stack them down nicely is there away to get around this?

@BuildThatWebsite 3 жыл бұрын

Place them vertically instead of side by side? I'd have to see what you're talking about, but 3 tables next to each other would definitely be squished.