.svg)
Below we have explained the global page structure that is mandatory to start a new page in the Zeal Consult Template.
You can place your elements between the Header Component and the Footer Component.
Press ‘ctrl + e’ or ‘cmd + e’ from your keyboard and then type div and then you can insert the div in the page. And add class ‘nav_fixed’ then select the newly added div and press ‘ctrl + e’ or ‘cmd + e’ from your keyboard and type navbar and you then click on the navbar to get the navbar inside your page.
Once the Navbar component is in your page then you have to simply click on it and then move your eye to the right side of the screen where you can find the update options for all the links, texts, and logos of the navbar.
Or you can Double click on the link inside the navbar to update text for that particular page.
If you want to update the navbar globally then click on the placed navbar twice so that you will be in the default navbar. And then you can update the text and links of the navbar and those changes will appear in all the pages where the navbar component is placed.
Select the page-wrapper from the navigator panel located inside the left panel of the screen.
Press ‘ctrl + e’ or ‘cmd + e’ from your keyboard and then type ‘Global’ and then you see a component named ‘Global Styles’ click on it and the component will be placed inside the ‘page-wrapper’. This component is necessary because it contains custom css for globally used margins and paddings classes.
Place the header section always inside the div with class ‘main-wrapper’. And the main-wrapper should be placed inside the ‘page-wrapper’. Once your page has a ‘main-wrapper’ div then press ‘ctrl + e’ or ‘cmd + e’ from your keyboard and then type ‘header’ in the search box and you will be able to see the Header Section component in the search results. Click on it and you will have the ‘Header Section’ component in your page.
You can double click on the title or the description paragraph or the button to update its text. Also there is another way to do it, You can click on the Header Section component and in the right side you will see various options to edit the component texts or images. You can replace the existing header Image as well. Also you can hide the paragraph or the button from the left side of the Header Section for that particular page.
Place the Footer Component always inside the div with class ‘main-wrapper’. And the main-wrapper should be placed inside the ‘page-wrapper’. Once your page has a ‘main-wrapper’ div then press ‘ctrl + e’ or ‘cmd + e’ from your keyboard and then type ‘Footer’ in the search box and you will be able to see the Footer Section component in the search results. Click on it and you will have the ‘Footer’ component in your page.
You can double click on the title or the description paragraph or the button to update its text. Also there is another way to do it. You can click on the Footer component and on the right side you will see various options to edit the component texts or images. You can replace the existing logo Image as well. Also you can hide the paragraph or the button from the left side of the ‘Footer’ for that particular page.
The prerequisite structure required for placing the Cards Grid Component is
Body > page-wrapper > main-wrapper > section > padding-global > container-large
The Cards Grid component is a component binded with CMS which means that each of the elements content inside the cards page is coming from the Services Collection so if you want to update the content you can directly go to the Services CMS and it will be reflected here.
The prerequisite structure required for placing the Cards Grid Component is
Body > page-wrapper > main-wrapper
The Center CTA Component can be placed anywhere inside the main-wrapper. Once your page has a ‘main-wrapper’ div then press ‘ctrl + e’ or ‘cmd + e’ from your keyboard and then type ‘Center CTA’ in the search box and you will be able to see the ‘center CTA component’ in the search results. Click on it and you will have the ‘Center cta Component’ component in your page.
You can update the text and the button link of the component from the right side properties panel.
The prerequisite structure required for placing the Counters Component is
Body > page-wrapper > main-wrapper
The Counters Component can be placed anywhere inside the main-wrapper. Once your page has a ‘main-wrapper’ div then press ‘ctrl + e’ or ‘cmd + e’ from your keyboard and then type ‘Counters’ in the search box and you will be able to see the ‘Counters’ in the search results. Click on it and you will have the ‘Counters’ component in your page.
You can update the texts from the right side properties panel.Or by simply a double click on the text.
The prerequisite structure required for placing the fifty_fifty_comp is
Body > page-wrapper > main-wrapper
The fifty_fifty_comp can be placed anywhere inside the main-wrapper. Once your page has a ‘main-wrapper’ div then press ‘ctrl + e’ or ‘cmd + e’ from your keyboard and then type ‘fifty_fifty’ in the search box and you will be able to see the ‘fifty_fifty’ in the search results. Click on it and you will have the ‘fifty_fifty_component’ component in your page.
You can update the texts from the right side properties panel.Or by simply a double click on the text.Also you can hide the title or button from the Properties panel on the right side of the screen.
The prerequisite structure required for placing the fifty_fifty_comp_alternate is
Body > page-wrapper > main-wrapper.
The fifty_fifty_comp_alternate can be placed anywhere inside the main-wrapper. Once your page has a ‘main-wrapper’ div then press ‘ctrl + e’ or ‘cmd + e’ from your keyboard and then type ‘fifty_fifty_comp_alternate’ in the search box and you will be able to see the ‘fifty_fifty_comp_alternate’ in the search results. Click on it and you will have the ‘fifty_fifty_component_alternate’ component in your page.
You can update the texts from the right side properties panel.Or by simply a double click on the text.Also you can hide the title or button from the Properties panel on the right side of the screen.
The prerequisite structure required for placing the Four Col Component is
Body > page-wrapper > main-wrapper > section > padding-global > container-large
The Four Col Component can be placed inside the prerequisite structure. Press ‘ctrl + e’ or ‘cmd + e’ from your keyboard and then type ‘Four Col’ in the search box and you will be able to see the ‘Four Col Component’ in the search results. Click on it and you will have the ‘Four Col Component’ in your page.
You can update the texts from the right side properties panel.Or by simply a double click on the text.Also you can hide the title or button from the Properties panel on the right side of the screen.
The prerequisite structure required for placing the Four Column Image Grid is
Body > page-wrapper > main-wrapper > section > padding-global > container-large
The Four Column Image Grid can be placed inside the prerequisite structure. Press ‘ctrl + e’ or ‘cmd + e’ from your keyboard and then type ‘Four Column’ in the search box and you will be able to see the ‘Four Column Image Grid’ in the search results. Click on it and you will have the ‘Four Column Image Grid’ in your page.
You can update the texts from the right side properties panel.Or by simply a double click on the text.Also you can hide the title or button from the Properties panel on the right side of the screen.
The prerequisite structure required for placing the Title in Two Columns is
Body > page-wrapper > main-wrapper > section > padding-global > container-large
The Title inTwo Columns can be placed inside the prerequisite structure. Press ‘ctrl + e’ or ‘cmd + e’ from your keyboard and then type ‘Title in Two Columns’ in the search box and you will be able to see the ‘Title in Two Columns’ in the search results. Click on it and you will have the ‘Title in Two Columns’ in your page.
You can update the texts from the right side properties panel.Or by simply a double click on the text.Also you can hide the title or button from the Properties panel on the right side of the screen.
The prerequisite structure required for placing the Title Center Secondary is
Body > page-wrapper > main-wrapper > section > padding-global > container-large
The Title Center Secondary can be placed inside the prerequisite structure. Press ‘ctrl + e’ or ‘cmd + e’ from your keyboard and then type ‘Title Center Secondary’ in the search box and you will be able to see the ‘Title Center Secondary’ in the search results. Click on it and you will have the ‘Title Center Secondary’ in your page.
You can update the texts from the right side properties panel.Or by simply a double click on the text.Also you can hide the title or button from the Properties panel on the right side of the screen.
Use this component when your background is dark.
The prerequisite structure required for placing the Title Center Block is
Body > page-wrapper > main-wrapper > section > padding-global > container-large
The Title Center Block can be placed inside the prerequisite structure. Press ‘ctrl + e’ or ‘cmd + e’ from your keyboard and then type ‘Title Center Block’ in the search box and you will be able to see the ‘Title Center Block’ in the search results. Click on it and you will have the ‘Title Center Block’ in your page.
You can update the texts from the right side properties panel.Or by simply a double click on the text.Also you can hide the title or button from the Properties panel on the right side of the screen.
Use this component when your background is light.
The prerequisite structure required for placing the Title Center Block is
Body > page-wrapper > main-wrapper > section > padding-global > container-large
The Three Col Comp can be placed inside the prerequisite structure. Press ‘ctrl + e’ or ‘cmd + e’ from your keyboard and then type ‘Three Col Comp’ in the search box and you will be able to see the ‘Three Col Comp’ in the search results. Click on it and you will have the ‘Three Col Comp’ in your page.
You can update the texts from the right side properties panel.Or by simply a double click on the text.Also you can hide the title or button from the Properties panel on the right side of the screen.
The prerequisite structure required for placing the Logos grid is
Body > page-wrapper > main-wrapper
Logos Grid is a component having 4 logos in 4 column you can update all the logos from the right side panel.
The prerequisite structure required for placing the Infinite Moving Logos is is
Body > page-wrapper > main-wrapper
The latest_news_comp can be placed inside the prerequisite structure. Press ‘ctrl + e’ or ‘cmd + e’ from your keyboard and then type ‘latest_news_comp’ in the search box and you will be able to see the ‘latest_news_comp’ in the search results. Click on it and you will have the ‘latest_news_comp’ in your page.
The data inside this component is dynamically binded with the Blogs Collection. To update the content here you need to update the content in the Blogs Collection.
In the Designer Click on the Variables Icon from the left panel and you will be able to see all the Color Variables Used in the Zeal Consult Template.
First we have declared colors with color codes.
And then used the declared variable as a value for the new variable.
For Example:
We created zc Citrus Green : #bde162.
And then we created a new variable zc background tertiary : zc Citrus Green.
In the above declaration we have re-used the same variable zc Citrus Green as color value for zc background tertiary. Which means, if you will change the color code of zc Citrus Green then it will impact the color value for zc background tertiary as well. So, that someone using the template has to change the color only at one place and get that reflected in all the possible places.
Login > Click on Three dots > Site Settings > Custom Code
Login : Go to https://webflow.com/login
Click on Three Dots : Click on the three dots located at the bottom-right corner of the site thumbnail.
Site Settings : Click on the three dots and then click on Settings.
Custom Code : From the links panel on the left side click on the Custom Code. To see the custom code. The upper block has css code required for adding the background color in the navigation when the user scrolls down.
The Below code has the Javascript applied to navigation on the scroll of the page.
