The Easiest Way to Create a Show More / View More Button in Elementor Without a Plugin - WordPress
The CSS required to do this is pinned 📌 to the top comment.
What I use to build amazing websites:
Elementor (the best WordPress page builder): https://be.elementor.com/visit/?bta=2...
Awesome, affordable hosting (the server your website needs to exist): https://www.hostg.xyz/SHBd2
Elementor Global Settings Explained - How to Correctly Set up the Site Settings for a Great Workflow: • Elementor Global Settings Explained -...
Elementor Units Explained - How and When You Should Use PX, REM, EM, %, VH and VW: • Elementor Units Explained - How and W...
A 'show more' button is a very simple way of adding content to your website without displaying it immediately. By revealing content when users press a button, they're still going to stay on the same page as opposed to being redirected elsewhere. It also makes designing things easier and it shows the content only to those who are really interested in it.
There's a very easy way create this kind of button in Elementor. We're going to use the new nested accordion widget and we're going to style it and change the way it works with some CSS. It is by far the easiest way to create this kind of button without using any additional plugins.
You can style the way it looks. You can place in any kind of content, from text, images, videos, products or even whole containers that include a large part of your page. You can name it anything you want - see more, read more, view more, show more or anything else. And, of course, we're going to make it fully responsive as well.
On top of all that, you can apply some simple motion effects to your content, that will make the whole effect even more dynamic and interesting.
#showmore #button #elementor
CHAPTERS:
00:00 - Intro
00:31 - Enabling the nested accordion widget
00:51 - Adding and preparing the accordion widget
02:42 - Styling the accordion widget
04:09 - Adding in the CSS
05:10 - Explaining and customizing the CSS
06:40 - Note regarding the CSS
07:53 - Explaining and customizing the CSS
11:58 - Making everything responsive
12:33 - Adjusting the CSS for the free version of Elementor
13:24 - Adding motion effects to your content
Get in touch:
https://www.reialesa.com/youtube/
Don’t be shy! Let me know what you’d like to see next, ask me anything related to design or just simply say hi.
Please note that some of the above are affiliate links, which means I earn a commission if you make a purchase, at no additional cost to you. Thank you very much if you decide to use them!
