Hi everyone,
I am working on redoing the icons and banner for our LMS. What dimensions do you all use for each? My boss and I set it up for what the platform says, but it doesn’t seem to look how we would like it too.
Any advice is appreciated. :)
-Shelby
Best answer by Adam Ballhaussen
As a general rule of thumb, I recommend staying under a maximum height of 300px for full-width banners at the top of the page. This ensures that you don’t push any important content below the fold. That rule of thumb can apply to any widget, really.
Some widgets like the custom content box widget allow you to define a minimum height of the widget, which ensures the widget never scales below a certain height. This helps ensure you don’t lose important information in the widget or risk having your page designs look “wonky” when viewed on certain screens.
Widgets on pages can be split in up to 3 columns. See below for the maximum widget widths based on the configuration you set per row in your page designs. You can find more information about this in the image section of the List of Widgets for Custom Widget Pages knowledge article.
Widget widths are:
If you use a Mac, you can use the screenshot tool to measure pixels on screen to help you design pages. I’m not a Windows user, but it looks like there might be similar tools you can install on Windows.
Page design is sometimes more of an art than a science. With that said, it’s always helpful to know the parameters you’re working within. I hope this information helps! Please let me know if you have any other questions. In the meantime, I recommend scrolling through some of the threads I’ve shared below for more design inspiration. I’m sure the community members in these threads would be willing to give you more help and info.
+4Hey Shelby! Are you referring to the favicon in Configure Branding and Look? If so, I recommend trying a few different sizes. 200x200 px has worked for me in the past for the favicon. Many areas of the platform that allow for image upload include recommended dimensions next to the image upload button.
These are recommended based on an optimal combination of performance and quality. If you find that your images don’t look right at the minimum dimensions, I recommend scaling the image by 2x to see if that looks better for you. This has potential to cause performance in the platform to slow over time, but it should be very minor and I don’t anticipate you’ll notice the effects.
Thank you for getting back to me. I am more referring too the images for new pages. If I wanted to make a banner and also the dimensions for the widgets.
+4
As a general rule of thumb, I recommend staying under a maximum height of 300px for full-width banners at the top of the page. This ensures that you don’t push any important content below the fold. That rule of thumb can apply to any widget, really.
Some widgets like the custom content box widget allow you to define a minimum height of the widget, which ensures the widget never scales below a certain height. This helps ensure you don’t lose important information in the widget or risk having your page designs look “wonky” when viewed on certain screens.
Widgets on pages can be split in up to 3 columns. See below for the maximum widget widths based on the configuration you set per row in your page designs. You can find more information about this in the image section of the List of Widgets for Custom Widget Pages knowledge article.
Widget widths are:
If you use a Mac, you can use the screenshot tool to measure pixels on screen to help you design pages. I’m not a Windows user, but it looks like there might be similar tools you can install on Windows.
Page design is sometimes more of an art than a science. With that said, it’s always helpful to know the parameters you’re working within. I hope this information helps! Please let me know if you have any other questions. In the meantime, I recommend scrolling through some of the threads I’ve shared below for more design inspiration. I’m sure the community members in these threads would be willing to give you more help and info.
Hi Adam
Thanks for the reply you gave here as this is extremely useful to all our clients!
Would it at all be possible for the page you shared above List of Widgets for Custom Widget Pages – Docebo Help & Support to be updated to also include the standard pixel dimensions for when it is added to a page?
Each client I am working with for example are creating their own widgets to sit next to standard ones and each time they are using lots of trial by error to work our the right heights so that they can have a tidy and consistent look to their pages. This would help a number of people. Thanks
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
