How to Customize Your Theme in Weebly?

Weebly offers handful of inbuilt beautiful themes for your site and you can customize the templates to suit your site’s requirement further. You can choose one of the responsive themes so that you do not need to adjust the site’s layout separately for mobile. All customizations will be available as a custom theme which allows you to use the customizations on any site in your account. However, you should be careful in modifying custom themes as it will affect all the site’s using the same theme.

Selecting Theme in Weebly

You need to choose a theme when creating a site for the first time. However, you do not need to strict with the initially selected theme and change it anytime later. Login to your Weebly using your Square account and edit the site which you want to customize the theme. Under “Theme” tab of Weebly editor, click on the “Change Theme” button.

You will see a list of responsive themes classified under different categories for selection. For selecting a non-responsive theme, scroll down to bottom and click on the “Show Old Themes” button.

Click on any of the theme to read more details. Click on the “Preview Theme” button to check the demo and then click on the “Choose Theme” button to use the theme for your site.

You have the following options during the theme selection:

• Sort and view the themes by category.
• Preview the theme before choosing it for your site.
• Import your own theme.
• View your custom themes.

Customizing Weebly Theme

Once you have chosen a theme, you have the following options to customize it under “Theme” tab. However, the available options will differ based on the theme you select.

• Apply “Light” or “Dark” style for the current theme, some themes also offer color scheme to select.

• Click “Change Fonts” button and change the font style, color, weight, line height and size of the site elements in header, footer and content area. You can also customize font for Media elements like image captions, gallery captions and slideshow captions.
• Click “Theme Options” to enable additional options / elements like search box, banner overlay, sticky navigation, etc. (note search Box is a Weebly premium element).

• Edit your source HTML/CSS and see instant preview of your site by clicking on the “Edit HTML / CSS” button.

Edit HTML / CSS

One of the biggest reason users prefer Weebly is that the full access and control over the site’s HTML/CSS. This makes very easy for the webmasters enable countless features in your site or even you can upload your own theme for your site. You can access your site’s source HTML/CSS by clicking on the “Edit HTML/CSS” button available under “Design” tab.

Following are the options available for you in the Weebly HTML/CSS code editor :

• 1 & 11 – Top tool bar to check the documentation, enable auto preview and save the changes.
• 2, 3, 4, 5, 6 & 7 – Various sections for customizing theme’s templates and export theme.
• 8 – View and edit the code.
• 9 – Live preview of content.
• 10 – See the preview in a new window.

You can access main CSS under “Styles” section, add custom formats under “Header Type” layouts and upload your own files under “Assets” section.