Create Custom Button With The Buttons+ Section

The Standard Button sections provide the most common buttons people use and allow you to add new Buttons using Text and Icons from the included Icon library and to add a Custom button by linking to a suitable image that it is already hosted online by specifying the URL of the file. 

The Buttons + section takes it a step further and allows you to create buttons by uploading your preferred images and supports jpeg, png or gif format You also have more control over the color and size of your custom buttons.  

You can create your own Icon set in programs like  Adobe PhotoShop or InDesign and add effects such as bevels and drop shadows to create a more 3-dimensional look to your buttons or commission a graphic designer to create an icon set that matches your Brand.  

A simple Google search will reveal a wealth of free and low-cost Icon sets and market places like Etsy.com and Creativemarket.com are a good source of hand drawn or painted ones and you can find everything from glitter and glam to pastel watercolor or any theme you can think of that you want to match. 

I have found a couple of free icon sets online - a nice bling sparkly one for free and a water color one that will match my boudoir color scheme nicely for less than $3.  Custom buttons should be designed with the correct color scheme and size ready for use.  The recommended size is 65 x 65 pixels but they can be any size you want and usually come as Png files.  

The new Buttons+ section doesn't come with any buttons already in it and you will need to Add each button that you want. After you have added your new Buttons+ section click on the settings cog to begin. 

1.  The first menu Button Settings allows you to set some global settings that will apply to the Button+ section.   The first thing to add is a Title for the section that will appear above the buttons - I am going to create Social Media buttons so I'll add Follow Us On Social Media as the title.  Next, I'm going to increase the Title font from the default 8 to 12 and then set the color using the color picker or by entering the hexadecimal #, I'm using a nice gold to match the bling button Icons I'll be using.  I'm not sure on the exact size I'm going to want for the buttons yet so I'll just increase it from 12 to 22 which is usually about right.   Because I'm going to upload my blink custom Icon png files I don't need to bother with a Button Color so I'll just add the hexadecimal # for the gold for the button label color in case I add them, button labels appear under each button. 

2.  Click on Button Section and click  Add Button to add the first button. Choose ONE of the following:

  • Add an Icon from the Icon Library
  • Type in Text for the button
  • Upload a custom jpeg, png or Gif file

Next type in the URL for the button which is the URL of the social media site followed by your Account ID like this:    

www.facebook.com/VanityFlairPhotography

3.  Repeat step 2 adding more buttons until you have finished and have a button for each of your Social media accounts. You can now change the size of the buttons or text labels until you are happy with the design. 

4.  Click on Other Settings and add a Label for the section so it will be easy to identify amongst the other Sections.   Most of the other settings are not really relevant to a buttons section but you can add some vertical and horizontal padding to the section or add a background color or image to the section to make the buttons stand out more.  Click Save to update the section. 

5. Finally, it's time to publish the App and test the buttons to make sure all the links are working properly and that the size and texts look good on different devices.  

Make any changes necessary and then when you are happy with everything it's a good idea to save your Buttons+ section as a custom section by clicking on the Save As Custom Section button so you can quickly add it to your future Apps

 

Here is an example of how the custom bling buttons look compared to some gold ones:

 

And here are some custom watercolor Icons compared to plain pink ones:

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk