Getting Started

ATWWW.DESIGN would like to thank you for purchasing the Bankeo template. In this brief guide we will cover al the basic concepts on how to edit different elements from the Bankeo Webflow template.

‍

If you are not very familiar with Webflow, we highly recommend you to take the Webflow 101 Crash Course from Webflow University, as it will teach you all the basics to get up and running.

‍

Fonts

‍

The Bankeo template uses one single font side-wide, and it’s set up in the Body (All Pages) selector, so this means you can easily update the font on all the site in one click.

‍

On any page, just click the orange selector option in the top right of the Style tab, and then select Body (All Pages). Once with this, you can go to Typography section below and change the font to any font for your business brand.

‍

In case you need a custom or premium font that is not available on Webflow, you can always go to Project Settings > Fonts and you will be able to upload custom fonts, or connect your Adobe Fonts account.

‍

Graphics & Icons

‍

Some icons or graphics in the template are normal images/graphics, so you will notice that when updating all colors, these will still have the template color.

‍

This happens because these graphics are images (PNG, JPG, SVG, etc), so updating the Webflow CSS (styling) won't affect them. If you would like to reuse this graphics, you can always download them and edit them using any design software (i.e. Photoshop, Illustrator, Sketch, Figma, etc), or directly upload your own images/graphics that match your brand.

‍

Editing Pages

‍

Now it's time to continue with the next steps to edit your website pages. Usually there are 2 types of content that will be edited, which are the following.

‍

Static Pages

Static Content is all the content that is not CMS-based, which means that it is not dynamic (like a Blog Post, for example).

‍

‍

You can easily identify all this content because it's shown as grey in the left sidebar Navigator, and it shows a blue border when you click or hover over it.

‍

If you want to edit this type of content, you can just double click it, and you will be able to directly type right there.

‍

‍

Dynamic Content (CMS)

Dynamic Content is all the content that is dynamic and will be auto-generated based on the content added in the CMS section in the left sidebar (just below Pages icon).

‍

You can easily identify all of this because it's shown as purple in the left sidebar Navigator, and it shows a purple border when you click or hover it.

‍

‍

This content should be updated directly in the CMS section. This is meant to make it very easy for you to update it, as it's very likely it will need to be constantly updated (For example, adding a new blog post)

‍

‍

Also, if you want to edit a complete auto-generated CMS page (for example, a Blog Post), you will find this page available for editing in the bottom of all pages in the Pages section in the left sidebar.

‍

‍

‍

‍

Global Classes

‍

Throughout this template we have used predominantly Global Classes. Global classes are a faster and more efficient way to structure a page. They also allow you to create new pages much faster and without the risk of affecting the overall style of the template. You can also use global classes to bring a specific style to any class in your website.

‍

Global classes are specific styles to a wide range of elements. Similar to combo classes, global classes are added to base classes. However, the original element that you style the global class is separate from the base class element. A great example of planning a global class style is creating a drop shadow style that will be used throughout the website.

‍

‍

‍

‍

‍

‍

‍

To the left you will find one example of Global Classes that we have created in order to make your editing experience a breeze.

‍

Apart from what is shown in this example you will find many more GC’s in the Bankeo Webflow template

‍

Learn more about classes here

‍

‍

‍

‍

‍

‍

‍

‍

‍

Containers

‍

In addition to global classes, there are also classes that can help you style certain elements. Those classes can only be used for their parent element. For example, if we have the Global Class : "Inner Container" we can observe the combo classes that apply for that container. In this case we can decide how wide we want our container to be and at what size to stop.

‍

‍

‍

‍

‍

‍

Bankeo uses only one container across the entire template named “Container Default” that has a max-width of 1440 px. Inside this container we use the “Inner Container” mentioned above.

‍

So using what we have learned so far, the structure should look something like:

‍

"Section" -> "Container Default" -> "Inner Container" - Everything else

‍

Support

‍

Feel like changing something in the template? All of our templates were built using Webflow without writing code.

‍

For any help regarding our template feel free to reach us at hello@atwww.design.