Aiden
Aiden
Aiden
Documentation
Documentation
Documentation
Watch the Aiden customization tutorial
Colors
To change the global colors, navigate to the "Assets" tab on the left sidebar.
Then scroll down until you see the "Colors" toggle. From there, simply click on the color you want to change and pick the new color you want.
To change an element on the page that is not affected by the global color styles, simply click it, navigate to the "Color" or "Fill" property on the right sidebar, and pick the color you want.
Fonts
To change the global colors, navigate to the "Assets" tab on the left sidebar.
Then scroll down until you see the "Text" toggle. After that, click on any of the Headings or Body texts you want to change and edit the properties.
If you want to change the font of a text element that is not affected by the global style, simply select the text block, navigate to the "Text" category on the right sidebar, and change the font, and the font properties from there.
Buttons
To change the navigation button style, double-click the navigation. That will open the navigation component screen.
From there, double-click the button. Now you can customize the button styling, and the button hover state.
If you want to edit any other button component, simply double click it, and style the button and it's hover effect however you want.
Logo & branding
To change the logo simply double-click on the navigation. Then, select the Wize logo, go to the right side panel, and scroll down until you see the "Fill" property. Click on it, and replace the image. Then, resize the logo until it fits correctly (you may need to disable the aspect ratio lock (the lock symbol).
Images
To change any image, simply click on it once, navigate to the "Fill" property on the right sidebar, click it, and choose the new image you want to insert. You may need to adjust the width and height properties to make it fit nicely.
You may also need to disable the aspect-ratio lock.
Make sure that once you've adjusted the sizing, you enable the aspect-ratio lock so we keep it consistent on all screen sizes.
Videos
To change a YouTube video embed, simply click the video element, navigate to the right sidebar, and paste your link on the "Video" text field.
To change a local-file video, simply click the video element, and find the "Upload" property on the right sidebar.
Testimonials
You will find your testimonials to the left of the Desktop screen.
They are positioned outside of the canvas because they are connected to the page via a "Carousel" widget.
If you click on the Testimonials section on the page, you will see that the Carousel has a purple outline, and three vertical dots to the right that connect to the testimonials outside of the canvas.
To edit the existing testimonials, simply click the text or picture you want to change, and adjust it to your liking.
To add more testimonials, you can copy and paste one of the testimonials, edit it, and then click on the Carousel widget, and drag the three vertical dots to the new testimonial you just added.
Client logos
Client logos are similar to the testimonials widget because it uses a similar component - the "Ticker".
The "Ticker" automatically creates infinite loops that are perfect for a section like this.
You will notice that you have your client logos to the left of the canvas.
To remove any of the placeholder logos, simply click on the logos on the Desktop screen, on the "Ticker" widget, go to the right sidebar where you will find the Ticker property settings.
Click on the Children property, and from there you can right-click any of the elements, and remove them.
To add your own logos, you can simply drag them onto the canvas, next to the already existing placeholder logos, size them so they look similar to the other logos, and then click on the Ticker, drag the three vertical dots on the right side and connect it to your new logos.
You can also find the placeholder logos as a reference in the "Aiden Assets" Figma file: https://www.figma.com/file/j1VQGaiWhfKrTW5jFGTnND/Aiden-Assets?type=design&node-id=0%3A1&mode=design&t=mvVPyyI9M97CeEQQ-1
There you can find the color we have used for the logos so you can apply it to your own logos too.
FAQ
The FAQ section is made from an FAQ component.
To edit the questions, you can double-click on the FAQ component.
Then, you can edit any of the existing questions by clicking once on any of them, and on the right side you will see two properties: "Question" and "Answer". Simply edit those and the question will be changed.
To remove any of the questions, click on any of them and press delete or backspace.
To add more questions, click once on any of them, and press Ctrl / CMD + D to duplicate the question.
Process
You can edit the process section text like any other text on the page. Simply double-click it and edit it.
To remove any steps from the process, make sure you have selected the main Steps container. You can ensure that by checking the layers tab on the left sidebar. You should have selected one of the "Step 1" to "Step 4" layers. If you've selected correctly, press delete.
To add more steps, you need to make sure you've selected again the main Steps container, and simply press Ctrl / CMD + D to duplicate the step, and edit it accordingly.
Calendly
To edit the Calendly link, simply click it, go to the Calendar property in the right sidebar, and put your calendar name there.
You can get your calendar name by checking your Calendly link.
For example:
https://calendly.com/wizedesign/democall
If this is your link, in the Calendar property you would put everything after https://calendly.com/
So, it that would be wizedesign/democall
Footer
In the footer you simply need to replace the default logo with your own, edit the copyright notice so it has your agency's name there, and on the right side, you can put your social media links.
To see how to edit the social media links, please refer to the video tutorial at 19:59 mark: https://youtu.be/wG2MRN8LnXI?si=ovzOOLcQCP41kbxp
Hide & show sections
To either hide or show a section, you must first select the main section layer.
To make sure you've done that, simply go to the layers tab on the left sidebar, and ensure you've selected the main section.
Each main section is titled according to what content it contains, and the only parent layer above it, should be the Desktop layer.
Once you've selected it, you can hide it by going to the right sidebar, and selecting "No" on the Visible property.
If you want to later bring it back, select it from the layers tab, and select "Yes" on the Visible property.
If you want to change the section's position, you can drag it on the canvas and put it wherever you see fit.
Features
Scroll effects
Responsiveness
Section and layout flexibility
Conversion funnel
FAQ
I like it but I think it will be too difficult to customize
What platform are the templates made for? Can I use them with GHL?
Wouldn't a template make my website look too similar to others?
Is it optimized for speed and performance?
If I get stuck when customizing can I get help from you?
Where will my site be hosted?
Watch the Aiden customization tutorial
Colors
To change the global colors, navigate to the "Assets" tab on the left sidebar.
Then scroll down until you see the "Colors" toggle. From there, simply click on the color you want to change and pick the new color you want.
To change an element on the page that is not affected by the global color styles, simply click it, navigate to the "Color" or "Fill" property on the right sidebar, and pick the color you want.
Fonts
To change the global colors, navigate to the "Assets" tab on the left sidebar.
Then scroll down until you see the "Text" toggle. After that, click on any of the Headings or Body texts you want to change and edit the properties.
If you want to change the font of a text element that is not affected by the global style, simply select the text block, navigate to the "Text" category on the right sidebar, and change the font, and the font properties from there.
Buttons
To change the navigation button style, double-click the navigation. That will open the navigation component screen.
From there, double-click the button. Now you can customize the button styling, and the button hover state.
If you want to edit any other button component, simply double click it, and style the button and it's hover effect however you want.
Logo & branding
To change the logo simply double-click on the navigation. Then, select the Wize logo, go to the right side panel, and scroll down until you see the "Fill" property. Click on it, and replace the image. Then, resize the logo until it fits correctly (you may need to disable the aspect ratio lock (the lock symbol).
Images
To change any image, simply click on it once, navigate to the "Fill" property on the right sidebar, click it, and choose the new image you want to insert. You may need to adjust the width and height properties to make it fit nicely.
You may also need to disable the aspect-ratio lock.
Make sure that once you've adjusted the sizing, you enable the aspect-ratio lock so we keep it consistent on all screen sizes.
Videos
To change a YouTube video embed, simply click the video element, navigate to the right sidebar, and paste your link on the "Video" text field.
To change a local-file video, simply click the video element, and find the "Upload" property on the right sidebar.
Testimonials
You will find your testimonials to the left of the Desktop screen.
They are positioned outside of the canvas because they are connected to the page via a "Carousel" widget.
If you click on the Testimonials section on the page, you will see that the Carousel has a purple outline, and three vertical dots to the right that connect to the testimonials outside of the canvas.
To edit the existing testimonials, simply click the text or picture you want to change, and adjust it to your liking.
To add more testimonials, you can copy and paste one of the testimonials, edit it, and then click on the Carousel widget, and drag the three vertical dots to the new testimonial you just added.
Client logos
Client logos are similar to the testimonials widget because it uses a similar component - the "Ticker".
The "Ticker" automatically creates infinite loops that are perfect for a section like this.
You will notice that you have your client logos to the left of the canvas.
To remove any of the placeholder logos, simply click on the logos on the Desktop screen, on the "Ticker" widget, go to the right sidebar where you will find the Ticker property settings.
Click on the Children property, and from there you can right-click any of the elements, and remove them.
To add your own logos, you can simply drag them onto the canvas, next to the already existing placeholder logos, size them so they look similar to the other logos, and then click on the Ticker, drag the three vertical dots on the right side and connect it to your new logos.
You can also find the placeholder logos as a reference in the "Aiden Assets" Figma file: https://www.figma.com/file/j1VQGaiWhfKrTW5jFGTnND/Aiden-Assets?type=design&node-id=0%3A1&mode=design&t=mvVPyyI9M97CeEQQ-1
There you can find the color we have used for the logos so you can apply it to your own logos too.
FAQ
The FAQ section is made from an FAQ component.
To edit the questions, you can double-click on the FAQ component.
Then, you can edit any of the existing questions by clicking once on any of them, and on the right side you will see two properties: "Question" and "Answer". Simply edit those and the question will be changed.
To remove any of the questions, click on any of them and press delete or backspace.
To add more questions, click once on any of them, and press Ctrl / CMD + D to duplicate the question.
Process
You can edit the process section text like any other text on the page. Simply double-click it and edit it.
To remove any steps from the process, make sure you have selected the main Steps container. You can ensure that by checking the layers tab on the left sidebar. You should have selected one of the "Step 1" to "Step 4" layers. If you've selected correctly, press delete.
To add more steps, you need to make sure you've selected again the main Steps container, and simply press Ctrl / CMD + D to duplicate the step, and edit it accordingly.
Calendly
To edit the Calendly link, simply click it, go to the Calendar property in the right sidebar, and put your calendar name there.
You can get your calendar name by checking your Calendly link.
For example:
https://calendly.com/wizedesign/democall
If this is your link, in the Calendar property you would put everything after https://calendly.com/
So, it that would be wizedesign/democall
Footer
In the footer you simply need to replace the default logo with your own, edit the copyright notice so it has your agency's name there, and on the right side, you can put your social media links.
To see how to edit the social media links, please refer to the video tutorial at 19:59 mark: https://youtu.be/wG2MRN8LnXI?si=ovzOOLcQCP41kbxp
Hide & show sections
To either hide or show a section, you must first select the main section layer.
To make sure you've done that, simply go to the layers tab on the left sidebar, and ensure you've selected the main section.
Each main section is titled according to what content it contains, and the only parent layer above it, should be the Desktop layer.
Once you've selected it, you can hide it by going to the right sidebar, and selecting "No" on the Visible property.
If you want to later bring it back, select it from the layers tab, and select "Yes" on the Visible property.
If you want to change the section's position, you can drag it on the canvas and put it wherever you see fit.
Features
Scroll effects
Responsiveness
Section and layout flexibility
Conversion funnel
FAQ
I like it but I think it will be too difficult to customize
What platform are the templates made for? Can I use them with GHL?
Wouldn't a template make my website look too similar to others?
Is it optimized for speed and performance?
If I get stuck when customizing can I get help from you?
Where will my site be hosted?
Watch the Aiden customization tutorial
Colors
To change the global colors, navigate to the "Assets" tab on the left sidebar.
Then scroll down until you see the "Colors" toggle. From there, simply click on the color you want to change and pick the new color you want.
To change an element on the page that is not affected by the global color styles, simply click it, navigate to the "Color" or "Fill" property on the right sidebar, and pick the color you want.
Fonts
To change the global colors, navigate to the "Assets" tab on the left sidebar.
Then scroll down until you see the "Text" toggle. After that, click on any of the Headings or Body texts you want to change and edit the properties.
If you want to change the font of a text element that is not affected by the global style, simply select the text block, navigate to the "Text" category on the right sidebar, and change the font, and the font properties from there.
Buttons
To change the navigation button style, double-click the navigation. That will open the navigation component screen.
From there, double-click the button. Now you can customize the button styling, and the button hover state.
If you want to edit any other button component, simply double click it, and style the button and it's hover effect however you want.
Logo & branding
To change the logo simply double-click on the navigation. Then, select the Wize logo, go to the right side panel, and scroll down until you see the "Fill" property. Click on it, and replace the image. Then, resize the logo until it fits correctly (you may need to disable the aspect ratio lock (the lock symbol).
Images
To change any image, simply click on it once, navigate to the "Fill" property on the right sidebar, click it, and choose the new image you want to insert. You may need to adjust the width and height properties to make it fit nicely.
You may also need to disable the aspect-ratio lock.
Make sure that once you've adjusted the sizing, you enable the aspect-ratio lock so we keep it consistent on all screen sizes.
Videos
To change a YouTube video embed, simply click the video element, navigate to the right sidebar, and paste your link on the "Video" text field.
To change a local-file video, simply click the video element, and find the "Upload" property on the right sidebar.
Testimonials
You will find your testimonials to the left of the Desktop screen.
They are positioned outside of the canvas because they are connected to the page via a "Carousel" widget.
If you click on the Testimonials section on the page, you will see that the Carousel has a purple outline, and three vertical dots to the right that connect to the testimonials outside of the canvas.
To edit the existing testimonials, simply click the text or picture you want to change, and adjust it to your liking.
To add more testimonials, you can copy and paste one of the testimonials, edit it, and then click on the Carousel widget, and drag the three vertical dots to the new testimonial you just added.
Client logos
Client logos are similar to the testimonials widget because it uses a similar component - the "Ticker".
The "Ticker" automatically creates infinite loops that are perfect for a section like this.
You will notice that you have your client logos to the left of the canvas.
To remove any of the placeholder logos, simply click on the logos on the Desktop screen, on the "Ticker" widget, go to the right sidebar where you will find the Ticker property settings.
Click on the Children property, and from there you can right-click any of the elements, and remove them.
To add your own logos, you can simply drag them onto the canvas, next to the already existing placeholder logos, size them so they look similar to the other logos, and then click on the Ticker, drag the three vertical dots on the right side and connect it to your new logos.
You can also find the placeholder logos as a reference in the "Aiden Assets" Figma file: https://www.figma.com/file/j1VQGaiWhfKrTW5jFGTnND/Aiden-Assets?type=design&node-id=0%3A1&mode=design&t=mvVPyyI9M97CeEQQ-1
There you can find the color we have used for the logos so you can apply it to your own logos too.
FAQ
The FAQ section is made from an FAQ component.
To edit the questions, you can double-click on the FAQ component.
Then, you can edit any of the existing questions by clicking once on any of them, and on the right side you will see two properties: "Question" and "Answer". Simply edit those and the question will be changed.
To remove any of the questions, click on any of them and press delete or backspace.
To add more questions, click once on any of them, and press Ctrl / CMD + D to duplicate the question.
Process
You can edit the process section text like any other text on the page. Simply double-click it and edit it.
To remove any steps from the process, make sure you have selected the main Steps container. You can ensure that by checking the layers tab on the left sidebar. You should have selected one of the "Step 1" to "Step 4" layers. If you've selected correctly, press delete.
To add more steps, you need to make sure you've selected again the main Steps container, and simply press Ctrl / CMD + D to duplicate the step, and edit it accordingly.
Calendly
To edit the Calendly link, simply click it, go to the Calendar property in the right sidebar, and put your calendar name there.
You can get your calendar name by checking your Calendly link.
For example:
https://calendly.com/wizedesign/democall
If this is your link, in the Calendar property you would put everything after https://calendly.com/
So, it that would be wizedesign/democall
Footer
In the footer you simply need to replace the default logo with your own, edit the copyright notice so it has your agency's name there, and on the right side, you can put your social media links.
To see how to edit the social media links, please refer to the video tutorial at 19:59 mark: https://youtu.be/wG2MRN8LnXI?si=ovzOOLcQCP41kbxp
Hide & show sections
To either hide or show a section, you must first select the main section layer.
To make sure you've done that, simply go to the layers tab on the left sidebar, and ensure you've selected the main section.
Each main section is titled according to what content it contains, and the only parent layer above it, should be the Desktop layer.
Once you've selected it, you can hide it by going to the right sidebar, and selecting "No" on the Visible property.
If you want to later bring it back, select it from the layers tab, and select "Yes" on the Visible property.
If you want to change the section's position, you can drag it on the canvas and put it wherever you see fit.
Features
Scroll effects
Responsiveness
Section and layout flexibility
Conversion funnel
FAQ
I like it but I think it will be too difficult to customize
What platform are the templates made for? Can I use them with GHL?
Wouldn't a template make my website look too similar to others?
Is it optimized for speed and performance?
If I get stuck when customizing can I get help from you?
Where will my site be hosted?
Resources
Copyright © 2023 Wize Templates. All rights reserved.
Resources
Copyright © 2023 Wize Templates. All rights reserved.
Resources
Copyright © 2023 Wize Templates. All rights reserved.