In this Elementary Tutorial, let me show you how to create a simple banner within seconds using Elementary WordPress Plugin.
The banner above is created with Elementary. This is how it looks on Desktop and Media ( for those using either device to get a preview of the other )
How did I create this Banner?
That’s simple. Here is what I did,
- I choose the “banner-card” in the list of pre-made element styles in Elementary. The banner card is the easiest way to create a banner. You can customise the default style of course.
- I used the content filter options to select which post to show. I choose “demo” post type, and filtered by post_id, choosing post_id = 306 in my case.
- I also choose featured image, title, excerpt to be my content fields in the banner.
- I clicked on the label for Title, in this case text1 for me and changed the font-size, and same for text2.
- For Mobile: I switch the media to mobile from the top-left dropdown in the top bar. Then, I changed the font size of text1 to a smaller font ( 21px in my case ). To hide the excerpt in mobile, I switched to text2 and changed display style property to none.
- To display only one banner and not a series of them, go to Collection Settings -> Max num of posts. Set it to 1.
- Now, all you have to do is copy the short-code from Dashboard -> Elements page, and paste in any post / page you want to.
Viola and done!
You can also play around with other properties like
1. Add a border to your banner.
2. Add a background color to your Banner title.
You can play around and you can also mail me what you came up with. Mail to firstname.lastname@example.org
Did you know that you can try out elementary for free. Check out : http://pauple.com/elementary/
Looking forward to hearing your thoughts.