Worried that you aren\u2019t tech savvy enough? Both these design modifications can actually be performed without being an expert developer. With our walkthrough, you will even see that playing with the hidden settings of the GoodBarber platform is easy as 1,2,3.<\/p>\n

Modifications related to design, are, for the most part, first applied through the already exhaustive list of settings provided for each view for features and sections alike. Here is the default view included with a ready made theme.<\/p>\n

Here, is the same view personalized using only the default settings provided in the GoodBarber back office:<\/p>\n

<\/p>\n

These include background images, fonts, colors, effects, which can all be managed directly from the design panel. Want to take things up a notch?<\/p>\n

By default, the template used here (menu Template n\u00b03) only displays 1 image and 1 title per section. Let\u2019s start by making the icon of each section visible shall we?<\/p>\n

To do so, you will need to activate the API access Add-On, included with the GoodBarber Advanced plan, and available for try out during the 30 days free trial we offer.<\/p>\n

<\/p>\n

Once the Add-On is activated, a <\/> Json tab will show, next to the preview and settings tabs in the back office.<\/p>\n

<\/p>\n

From that tab, under \u201cGBNodeListTemplateTypeUneGrid\u201d (that is how the Template n\u00b03 is identified in the Json tab), advanced customization can be applied.<\/p>\n

<\/p>\n

First, you want to start by adding the property \u201cshowIcon\u201d = 1.<\/p>\n

<\/p>\n

Don\u2019t forget to save your changes before moving on to the next steps of the tutorial. To go back or delete the property, you can click on the red cross next to it (as seen below).<\/p>\n

<\/p>\n

This properly will trigger the display of the icons attached to each section within the menu, as you can see below:<\/p>\n

<\/p>\n

If you want to edit the icons used for each section (Articles sections here), you can simply use the options provided in the back office to assign new and more illustrative icons, for a better user experience and unique design.<\/p>\n

<\/p>\n

By the way, the GoodBarber platform provides a gallery of over 1500 icons, but you can also import your own graphic elements.<\/p>\n

<\/p>\n

Now that we have added icons, let\u2019s see how we can add another property, the subtitle or catchphrase: \u201cdisplaySubtitleOnFirst\u201d = 1. This will display a subtitle or catchphrase under the title of the first section.<\/p>\n

<\/p>\n

You can customize the display of this subtitle by registering information related to the font used, as well as the color and size. To do so, click on \u201cAdd object\u201d this time, and add the above properties.<\/p>\n

<\/p>\n

That\u2019s it!<\/p>\n

<\/p>\n

Of course, the personalization of the API settings will vary for each project, based on the navigation you choose or the templates you activate. For more efficiency, it also helps to pick the right theme to get started. The back office will generate the architecture of the app, the design panel will bring your design to life, while the API access will let you adjust the little big details. <\/p>\n

And yes, they are the ones that make the biggest difference in the end, so don\u2019t be afraid to roll up your sleeves a little bit. These finishing touches are what will make an app unique unique, so that it can never come across as delivered using an app builder in the app stores.<\/p>\n