Pauple Studios

In this Elementary Tutorial, let me show you how to create a simple banner within seconds using Elementary WordPress Plugin.

[elementary id=’497′]

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,

1. 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.
3. 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.
4. I also choose featured image, title, excerpt to be my content fields in the banner.
5. Styling:
   1. I clicked on the label for Title, in this case text1 for me and changed the font-size, and same for text2.
   2. 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.

       

6. To display only one banner and not a series of them, go to Collection Settings -> Max num of posts. Set it to 1.
7. 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!

BONUS:

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 hello@pauple.com

Did you know that you can try out elementary for free. Check out : http://pauple.com/elementary/ 

Looking forward to hearing your thoughts.