Home / Help center / Customizable Templates

Customizable Templates

20 Feb 2024


https://microweber.com/userfiles/media/default/template-style-editor.jpg


In Microweber.com you are able to customize your website template using the live edit and visual editor settings. 
In general you are able to change anything from your template. You can set different fonts, colors, lign-height space between the text elements and even you are able to define the style of your buttons size, color and font size. 
Let me show you how to do that in few steps.


1. From the main menu on the top you need to click on  icon. This will open the Template Style Editor which allows you to define a global styles of you template like colors, fonts sizes, spicing and more. Here is how it's look like:


This is how the Template Style Editor looks like. From it your are able to setup and control all of the global template settings.

Change Font / Typography 

https://microweber.com/userfiles/media/default/typography-microweber1.jpg

From the Typography settings you can define your general font size of the website template. Just choose from the dropdown the loaded fonts.

https://microweber.com/userfiles/media/default/typography-microweber.jpg


Add New Font

Scroll to the end of the list to add new Google font clicking on ADD MORE FONTS. Then a new window with all of the fonts that Microweber support will upper. Here is what you will see:

https://microweber.com/userfiles/media/default/add-new-font-microweber.jpg


Spacing in Text

In the Typography section there is few more settings we can use and discover. We are going to explore here the Spacing settings.
The Spacing section allows you to define the right space between the reads or words. Most useful setting is related with the line-height between the text roads. Here are the useful settings that Microweber Spacing settings give you. 

Line Height
Letter Spacing
Font Wight

https://microweber.com/userfiles/media/default/spacing-microweber.jpg


Also there is availably options for text display like Lowercase, Uppercase, Capitalize and None.

Headings

In the Heading section part of the Typography you can define the headings of your website. This is a global settings and each of the defined heading will apply in the flowing settings:

https://microweber.com/userfiles/media/default/headings.jpg

 

Paragraph 

The same as the Heading settings you can define the fonts size of the normal text called paragraphs of you website. Just pick up the size of the font you want to have in your website.

https://microweber.com/userfiles/media/default/paragraph.jpg

Links

To define the style of your website links you can do that from the links section in Typography main menu. 
The availably options are: None, Underline, Underline Dotted, Wavy Underline and Overline. Depending of your design you can choose which to use.


Below you can read more of how to make your own template if you are using the open-source version of Microweber Website Builder.


How to create own template

Creating templates for Microweber involves understanding its structure and utilizing its features effectively. Microweber primarily operates with HTML, CSS, and PHP, and it offers a variety of template tags for dynamic content integration. Here's a step-by-step guide to creating templates for Microweber:


  • Set Up Your Development Environment: Ensure you have a local or remote environment where you can install and test Microweber. You'll need a web server (like Apache or Nginx) with PHP and a MySQL database.

  • Install MicroweberDownload and install Microweber on your server. Follow the installation instructions provided on the Microweber website or in the documentation.

  • Understand Microweber's Template Structure: Microweber's templates are stored in the /userfiles/templates/ directory. Each template typically consists of PHP, HTML, CSS, and JavaScript files.

  • Create a New Template Directory: Inside the /userfiles/templates/ directory, create a new folder for your custom template. Name it appropriately.

  • Create Template FilesWithin your template directory, create the necessary files such as index.php, header.php, footer.php, style.css, etc. These files will define the structure, layout, and styling of your template.

  • HTML Structure: Design the HTML structure of your template in the index.php, header.php, and footer.php files. Use HTML markup to create sections for header, navigation, content, sidebar, and footer.

  • CSS Styling: Style your template using CSS in the style.css file. Customize the appearance of various elements such as fonts, colors, spacing, and layout to match your design preferences.

  • PHP Integration: Utilize Microweber's PHP functions and template tags to integrate dynamic content into your template. This may include displaying posts, pages, categories, tags, and other dynamic elements.


  • Responsive Design: Ensure your template is responsive and mobile-friendly by using CSS media queries and responsive design techniques. Test your template across different devices and screen sizes.


  • Testing and Debugging: Test your template thoroughly to ensure it works correctly with Microweber's CMS features. Debug any issues or errors that may arise during testing.


  • Documentation: Provide documentation or instructions on how users can install and customize your template. Include details on customizing colors, fonts, adding widgets, and any other customization options.


  • Package and Distribute: Once your template is ready, package it into a ZIP file for distribution. You can share it with others, offer it for download through Microweber's marketplace, or sell it on your website.

By following these steps, you can create custom templates for Microweber that allow users to easily customize and build their websites. Make sure to stay updated with Microweber's documentation and community for any new features or best practices related to template development. 
Share this article: