How to set up and how to use Basel theme website poster (banner)? (04)

In this installment, we talk about how to add and change banners yourself (DIY).

A beautifully crafted poster (banner) can be effective in grabbing a user's attention and conveying a brand message. Whether you're a webmaster, designer or small business owner, mastering how to add and change banners DIY is an important skill. This article will take you through the simple steps of adding text, images and buttons and optimizing these elements to ensure the best possible presentation.
1.Step → Add Layer

Here you can add text, images, as well as buttons, shapes, videos, music, etc. (but commonly used text, images, buttons)
2.Steps Add Layer→text

The text can be edited in any way, as well as dragged and dropped and sized, see "How to set up and how to use Basel theme website poster (banner)? (03)"
3.Steps Add Layer→image

Images can be put product images or characters, or anything related to your product, but make sure that the image is in PNG transparent format, otherwise the display is not very satisfactory (reference)How to set up and how to use Basel theme website poster (banner)? (03))
4.Steps Add Layer→button

Choose the style of the buttons according to your needs, and don't worry about the colors, they can be changed (refer toHow to set up and how to use Basel theme website poster (banner)? (03))
Other settings can be found in the previous article on how to set them up

Well this is how some of the basic functions work, and then we'll get to some of the more common problems.

1. How do we determine the size of the background image for the poster (banner)?

In the picture we can see the blue dotted lines, length and width, this can be used as a reference

There is also a way to set the size of the display poster

2.Step Setting→Layout

The general size of the display is twice the size of the image For example, if the graphic is 1000*1000, then we need to set twice the data. But this is to be able to display the background completely, but the front-end homepage poster will be equally large, so it is recommended that the background image can be smaller

3.Step Computer Icons

Desktop: Display Interface

Notebook: Notebook Display Interface

Tablet: flat panel interface

Mobile: cell phone interface

You can turn them all on, but if you turn them all on you will need to set up each screen individually to create a better user experience

You can also turn it all off and leave just the monitor, so the rest of the interface will adapt.

Here are the interfaces for three different devices

Summary:
With the above steps, you have learned how to add and change banners. from choosing the right text and images, to setting the button style and background size, every step is critical. Remember to optimize the interface for different devices to provide a better user experience. I hope this article has helped you and inspired your design creativity. Keep exploring these tips, and I'm sure you'll be able to design even more beautiful banners! We wish you a smooth and happy design journey!