What is a banner?

When visiting any website, have you ever wondered what the banner of a website is? It is understood as a rectangular or square billboard and is placed somewhere on the website. A banner will include images, text as well as links to another page of the same web, or to the advertiser’s website. So, we usually see the banner on e-commerce or entertainment websites. If your website has been updated to Joomla 4 and you decided to use the Cassiopeia template, do you know how to show the banner with it? If you desire to find out more guides and information about that, don’t miss the blog today. Now, we will help you show the banner with Cassiopeia in Joomla 4 step-by-step. Thus, let’s take a look!

Where should you show the banner with the Cassiopeia template?

Normally, you can show the banner anywhere on your website. However, if you are utilizing the Cassiopeia template, it’s a good idea for you to display it on the suggested position below.

• Using module position Topbar to show the banner:

If you use this module position, your banner will appear at the very top. Besides that, your banner will be expanded to the full width of the screen. You can see the following image as an example of that.

• Utilizing the module position below-top to do that:

When you use the module position, your banner will be located below the topbar position but above the logo or the alternative text. However, your banner won’t be extended to the full width of the screen. Let’s check out our example of the module position below-top here.

• Choosing module position Banner to display the banner:

Whenever you utilize the module position, your banner will be shown under the logo area as well as the horizontal menu. Moreover, in the module position, you can use text combined with a background and an overlay effect instead of the banner. Let’s take a look at the following instance about using the module position Banner to display the banner.

How to show banner with Cassiopeia

Create and edit the banner module

Firstly, you need to open Content -> Site Modules, then click on the + New button at the top of the screen.

Now, you should select the Custom section to generate a new module.

Next, it’s time for you to customize the banner module.

First of all, you need to fill out the Title. So, let’s give it a reasonable name such as Banner. After that, don’t forget to turn off the display of the module name. Then, you simply find and select Below Top at the Position section.

Now, let’s move on to the Advanced tab to make some settings so that you can style the module later.

At the Module Class, you just need to type: my-banner. In addition, at the Module Style, simply select Cassiopeia Card. If not, the Module Class can’t work.

In the next step, you will go back to the Module tab so that you can add the image banner.

Now, let’s insert the image by clicking on CMS Content -> Media. Then, you are able to use the available image banner you uploaded before or upload the new one.

Style the banner module

Because the screen widths of electronic devices are different, sometimes the banner cannot cover the full width of the container. To fix this, you should specify the minimum size of the banner to be 100%. To do this, let’s add the imported “my-banner” class to the banner first.

Now, you need to switch your editor from text mode to code mode. For TinyMCE, you just need to press Toggle Editor. For JCE, do it with the Code tab. In our example below, we are using the WYSIWYG editor, so we will open Tools -> Source Code.

A popup Source Code will appear and it contains the code of the image banner you added. Thus, you simply insert class=”my-banner” like the descriptive image below.

Don’t forget to save it. After that, let’s save all your settings for the module by pressing on the Save or Save & Close button at the top of the screen.

Now, all you need to do is add the code to the user.css file. In order to do that, you need to open System -> Site Templates (under the Templates tab). Then, choose the template that you created the user.css before.

Next, in the CSS section, you simply click on the user.css file and add the following code:

.my-banner {
min-width: 100%;
}

The last step you need to do is Save it.

Let’s see the banner that is always filled the full width of the container on all screen sizes. You can check it by expanding or shrinking the browser to resize the web page width. As a result, the banner always fills the width no matter the size.

Use the text with background and overlay effect instead of banner

As we mentioned above, you can use the Position Module Banner to insert text in combination with background images and overlay effects. In order to do that easily, you just need to follow the steps below.

First of all, let’s generate a new module. Simply go to Content -> Site Modules, then click the + Next button. After that, just need to choose Custom for the module type.

In the next step, you need to enter the Title of the module such as Banner-Overlay or something like that.

Next, let’s disable the display Title. Then, choose the Banner for the Position section.

Now, don’t forget to type the text in the editor box that you want to show in the module.

In the Options tab, you simply insert the background image you like.

Next, in the Advanced tab, let’s choose the Banner layout.

Finally, don’t forget to Save or Save & Close to store all your settings.

Now, let’s see the result below.

Wind-up

All in all, with the instruction above, we hope that you can generate and show Banner with Cassiopeia on your site effectively. If you believe that the blog will be useful for your friends, don’t hesitate to share it with them. Furthermore, don’t forget to leave your comment below if you have any question and want to ask us. Last but not least, if you are looking for a template for your Joomla 4 website, let’s visit our well-organized and responsive Joomla 4 Templates here.

• Author
• Recent Posts

LT Digital Team (Content & Marketing)

Welcome to LT Digital Team. We make daily blogs for Joomla! and WordPress CMS, support customers and everyone who has issues with these CMSs and solve any issues with blog instruction posts, trusted by over 1.5 million readers worldwide.

Latest posts by LT Digital Team (Content & Marketing) (see all)

• How to place menu items in helix joomla 5 ? - December 14, 2024
• How to reduce the size of helix 2 layout ? - December 14, 2024
• What’s J4 starter template and how to use it - December 3, 2024