Peter
Import a Template Kit to Your Website
01
On your WordPress dashboard, go to Elementor > Settings, find the Import-Export template kit, and activate it, then save your changes. By default, it will be active but just check to make sure.
When you’re done go to Templates > Kit Library, here you’ll find several free, pro, and expert templates you can choose from. If you like a kit, you can just click on it and you can check it out, and browse through the pages to see if it can work for you.
Let’s check out the Ceramic Studio kit for example, it has perfectly designed pages and it is responsive on tablet and mobile devices. When you’re satisfied with the template and you want to use it, click the Apply Kit button, then you’ll have to connect your website to the Elementor account, click Get started.
In the next window, before the importing process starts, you get to choose whether to import everything, or you can uncheck some features if you would rather do without them. In this case, we’re going to import everything so just leave everything checked and click Next
When your kit is done importing, go back to the dashboard, and when you reload your preview site, your kit is now active, browse through your pages and see how well they’re working.
Customize Your Kit’s Header and Footer
02
Our next step is to set up/customize the header and footer, but first, let’s create a menu for our website.
Back to your WordPress dashboard, go to Appearance > Menus, give it a name; Menu then check the Primary option, and the next step is assigning menu pages to your menu. Under Pages select the About us, Contact, Workshop, and Workshops pages and click Add to Menu.
Drag the contact page to the bottom of the menu, then the Workshops page just below the Workshop page. When you’re done save the menu When you go back and reload the homepage, your menu should now display as you just set it
Back under Menus, go to Settings > Permalinks (09:59), here, check the Post name option, so that the menu item’s URL appears as the domain name/the page name, save changes when done.
When Elementor is creating these template kits, they’re using their own Hello theme, so if you want to achieve the exact results you’ll have to install the Hello Elementor theme. However, the template kits still work with other themes too.
To install the Hello Elementor theme, go to your dashboard, under Appearance > Themes, install and activate the theme Go back to your website and reload Back on your dashboard, go to Pages and open up the Home page with Elementor, here we’re going to use the Elementor Header Footer builder.
If you don’t see it in your Elementor editor, first go back to your dashboard and under Elementor > Settings > Experiments, activate the Hello Theme Header & Footer, then save your changes. Back in your editor reload the page then click on the Hamburger icon (☰) in the corner and go to Site Settings, here you’ll find the Header and Footer options
Go to the Header option, enable the Site Logo and Menu options, then set the Width to Full Width. Select the Site Logo option and under Type select the Title option to use the title of your website.
To make changes to your website title you can go to the Customizer of the Hello theme; under Site Identity > Site Title, give it a title of your choice and add a Tagline if you want to Alternatively, you can change this in your Elementor editor under Site Settings > Site Identity. Just change the Site name to ‘eramic’ as it is in the kit, then click the Update button.
Select the Site Logo option, under Text Color select the Accent color option, this is one of the Global styles that are imported with your Elementor kit , so you don’t have to struggle to make changes with custom settings. Under Typography select the Primary option, and you can further customize it to your preference, for example, change the font Weight to 800.
Go to the Menu option next and under Color, select Accent. When you’re done customizing your header, go to the Footer option back under Site Settings, enable the Site Logo and Copyright options.
Go to the Site Logo option, under Type select Title, set the Text Color to Accent, then under Typography set the Size to 15pixels
The Elementor Design System
03
When you go back to Site Settings, there’s an option called Design System, here you can make changes to the Global Colors and Global Fonts, any changes you make to these global styles under the design system will be applied wherever these styles are applied on your website.
Under Global Colors; You can set up specific colors for your website and apply them in the various sections of your web pages by just clicking on the global icon (🌐)
For example, if you go to the Accent global color (the one we’ve been using on the site logo, menu icons, etc), if you change it to a different color for example green, it will automatically change to green in all the places where you had applied this Accent global color
Using global colors saves you the time you would have spent going to every section or widget or element of your website to change the color to what you want. The same applies to the Global Fonts option. Under this option, you can have specific fonts created and saved for specific sections on your website for example heading fonts, body text, etc
If you make any changes to any of the global fonts under the design system, for example, if you change the size or weight of the text, it will be applied wherever this particular global font has been applied on your website.
You can also create a new global font; for example, a new font for your buttons by clicking on the Add Style option, name it ‘Button text’ then choose the particular font you want for it and save (18:26), and wherever you’ll apply this button text on your website, this style will be applied. And if you want to make changes you just go back to the design system and do so.
Export a Kit From Your Elementor Website
04
You can export the particular kit you’ve edited from your Elementor website so that you can use it somewhere else.
To do this: Go to your dashboard, under Elementor > Tools > Import/Export Kit, click Start Export Under Kit Information, add the Name of your kit and a Description, then click the Export button
When it finishes exporting it will download as a zipped file, and you can rename it to what you want If you want to import an exported kit into your Elementor website;
Back on your dashboard, under Elementor > Tools > Import/Export Kit, click on Start Import then in the next window you can select the file you exported/downloaded and import it.
Video: Elementor Template Kits Tutorial
Check out more on this story on the link below.