Why do you need to customize the Cassiopeia layout?
An eye-catching website design will help you attract more visitors. That is one of the best ways to make an impression on the visitors when they access your site. It also helps you retain visitors so that they stay on your site longer and start discovering the content you display on it. If you are using the Cassiopeia template for your Joomla 4 website, but you don’t have much coding knowledge to edit the layout of your site, this blog is for you. So, today, we will show you how to customize the Cassiopeia layout without coding. Let’s get started now!
How to customize Cassiopeia layout without coding in Joomla 4
To make everything simpler, we will show you how to edit the layout by using the KickstartCassiopeia module. With the support of the module, you can easily add the topbar, edit the header as well as change the color of the footer without any coding. Today, we will use it again to customize the layout.
First of all, you need to download the KickstartCassiopeia module. After that, simply install the module on your Joomla 4 site.
The next step you need to do is go to Content -> Site Modules, then search for the KickstartCassiopeia module in the search bar to open it.
In the Module tab, set it to the main-bottom position. After that, move on to the Menu Assignment and select the On all pages option.
Now, let’s start editing the layout of your site by opening the Layout tab. As you can see in the image below, this module allows you to change the body background with a color or image you want. Simply select the color you love or upload the image you want to showcase on the body background.
Here is an example after changing the color for the body background. You can do the same thing with the image for the background.
If you want to change the content background color, then you can do this by using the color picker tool next to the Content Background Color option.
Once you have edited the content background color, save it and visit your site to check the result. The content background color will be changed. You can see our example below.
Whenever you click on the boxed layout, the image in the banner position will look like the example below.
For the Site Width section, you will have 3 options to choose from: default, wider and widest. Besides that, you can also enable the Text Decoration Hover by clicking on the Yes button.
In case you need to change the Button Border Radius, you can do this by increasing or decreasing the number in the box. For instance, in the following example, we set 3.5 REM for the button border radius.
Moreover, this module also allows you to edit the Content Border Radius. As you can see, we set 3.5 REM for content border radius in the following example image.
Finally, you can also disable right-click to prevent visitors from copying the content or inspect any element on your site. Don’t forget to save all your settings and check the result on your front-end website.
Final thoughts
In conclusion, with the assistance of the KickstartCassiopeia module, we hope that you can easily customize the Cassiopeia layout in a few simple steps. If you have any queries, don’t hesitate to leave a message in the comment box below. Also, visit our site to get more high-quality Joomla 4 Templates. Thanks for reading. We hope you enjoyed today’s blog.
