Why do you need to customize Cassiopeia layout?
An eye-catching appearance of a website will help you attract more visitors’ attention. That is one of the best ways to make an impression on the visitors when they access your site. Thanks to it, you can effectively 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 Joomla 4 website, but you don’t have much coding knowledge to edit the layout of your site, the blog is for you. So, today, we would like to instruct you to customize the Cassiopeia layout without coding. Let’s get started now!
How to customize Cassiopeia Layout without coding in Joomla 4
In order to make everything become 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 coding requirements. Today, we will still use it to customize the layout.
The next step you need to do is go to Content -> Site Modules, then enter the KickstartCassiopeia module on the search bar to open it.
In the Module tab, let’s set it as the main-bottom position. After that, let’s 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 the image you can see 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 hope to alter the content background color, then you can do this by customizing the color picker tool next to the Content Background Color option.
Once editing the color for content background, let’s save it and visit your site to check the result. So, 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 become like the example image we tried below.
For the Site Width section, you will have 3 options to select, including 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.
Ultimately, you can also disable right-click to prevent visitors to copy 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.
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 submit your messages with the comment box below. Besides that, let’s visit our site and get more high-quality Joomla 4 Templates. Thanks for reading. Hope you enjoy the blog today.