[Tutorial] Customize the "Info Bar Extended" preset

The Info Bar Extended preset offers you a lot of customization possibilities. We already add different variants for this preset under the preset settings > style, but there is so much more you can do.

You can e.g. create this design:


Let us show you how:

  1. Go to Add content > Presets and drag and drop the Info bar extended preset into your website
  2. Double-click on the logo in the preset and change the width to your preferred width
  3. Change the alignment to centered
  4. Now move the logo from the left side to the center of the preset. You can do this by either
  • hovering over the container that should be left of the logo and clicking the arrow icon in the top left corner to move the container OR
  • if you like working with shortcuts, click on the logo, hold Ctrl + Shift and use the arrow keys to move the logo
  1. The design for the desktop is done. Feel free to use the preset settings to further customize the preset to your liking.

  2. Ready for the next step? Let’s make it responsive :iphone:
    By default, all our menus make sure that the phone icon is repsonsive, so we can simply hide the information about the phone numbers to achieve this design:

image

Simply double-click the container you want to hide on other viewports and go to element settings to uncheck visibility

As you can see in the screenshot indicated by the blue color of “Visibility” this setting will work on all mobile viewports, starting at tablet size and cascading down to mobile/phone.

  1. Again, you can change the settings to your liking…and you’re done! Simple as that and done in under 5 minutes! :raised_hands:

Feel free to test this yourself - and stay creative :wink:

4 Likes