5 CSS Tricks that will Instantly Beautify Your Weebly Site

  •    Namrata is the Founder and Editor in Chief of Miraya a contemporary jewelry and accessories brand approached from an ethnic perspective.

Whether you are in pursuit of a creative challenge or simply are looking to enhance your existing Weebly website design, the “edit HTML / CSS” under “Theme” can be an incredibly useful tool. While the editor easily allows you to drag and drop elements without coding, additional customized solutions can help reflect your brand or personality, leaving you with a website that is truly your own.

Here are 5 tips that require little to no coding expertise that will help make your website more user-friendly and personal. Moreover, this is a great real-world opportunity for you to familiarize yourself with HTML and CSS.

1. Add a fullscreen slider on your homepage

Adding a responsive slider on your homepage instantly makes your website attractive and sticky. You can use this area to display highlight stories or promote content that entices your visitors to browse through other pages on your website. Get started by following the tutorial page. ​

2. Include text banner on the top of your site

Banners are extremely useful to showcase trending news or alerts at a glance. If you have an eCommerce website, this can be especially useful to reveal sales, discounts and promotions. The best part? It is responsive and you can link your stories directly onto the banner text. Learn more here.

3. Insert a sidebar onto any pages

A sidebar uplifts your website like no other element. You can drag & drop a variety of elements ranging from slideshows, galleries, photos, text and videos, based on how you want to display your content. A sidebar can be used to display your top or latest stories that your audience would be interested in. It can also function as an area that shows the diversity of your site’s content.

4. Change colors

Although this requires more effort, we promise it will be worth it. You can change every color from the default Weebly colors based on your brand guidelines and color concepts. ​

Here are some examples:

To change your site’s background color go to “main_style.css” of the Code Editor, and under “.bg-wrapper” (approximately around line 44 of the code), change the hex code next to “background-color”.

You can find hex codes anywhere on the Internet and this is a small change that will make a noticable visual impact on your website.

The navigation menu has several different color settings (color upon hovering, upon clicking, and static color) and the code for these colors lies between lines 161 and 188. While the exact attributes of the navigation menu vary with the theme, in general, the same rule applies: change the hex codes based on your preferences.

5. Make your header linkable

Your header photo plays an integral role to the success of your website as well as its stickiness. Since it occupies so much space on your website, it makes sense to link the header. Your header image could represent a story or category, therefore, directing your audience to the page would be beneficial. Learn more here.

Disclaimer: I advise that you make a copy of your site before making any CSS changes, so that you can revert your site to its default design in case you are not happy with the changes. Weebly does not offer HTML/CSS customer support, we suggest that you consult somebody familiar with CSS before modifying the code.