How to make COOL BANNERS with Elementary WordPress Plugin

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 )

Banner in Desktop view.
Banner in Desktop view.

 

Banner in Mobile View
Banner in Mobile View

 

 

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.
  2. Screen Shot 2016-05-05 at 10.26.48 PM
  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.
      Elementary Plugin Screen
      Elementary Plugin Screen

       

  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.

Banner with pink border.
Banner with pink border.

 

2. Add a background color to your Banner title.

Banner with pink border, title with pink background.
Banner with pink border, title with pink background.

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.

Essekia Paul
Essekia is the lead developer and designer at Pauple Studios. Say Hi via hello@pauple.

Leave a Reply

Your email address will not be published. Required fields are marked *