FILTROS

Pendientes de plata de ley 925 y de plata de ley bañados en oro.

How to use this template?

Whether you just bought Soul Cermaic Template, or are simply having a look, we are happy to have you here. As you might know, On Consult is built on Webflow - the powerful no-code tool for creating websites. If you are already familiar with it, I'm sure editing this template will be a piece of cake.

This documentation covers general rules of working with Webflow that we thought are worth sharing. On the other hand, if it's your first time using Webflow, you might want to have a look at Webflow university and their 101 crash course.

Styling

Variables

This template comes with Webflow Color Swatches and sizing guidelines. It means that you can change color in one place, and it will be applied to all the elements that share the same swatch.

To change variables:

  1. Click on the variables list on the left hand side (or hit 'V' on your keyboard).
  2. Search through the variables and find the option you'd like to edit.
  3. Select and make adjustments.
  4. Click save.
Webflow Variables

Fonts

Soul Ceramic is using only one font throughout, which is Geist. It is an open source font from Vercel and it can be downloaded https://vercel.com/font. This font is 100% free for commercial use.

Geist is applied to the Body of the website, and because of that, it is automatically applied to all paragraphs and text blocks. You can change it globally by:

  1. Selecting "Body"
  2. In the styles tab on the right, click selector and select "Body (All pages)"
  3. Scroll down to "Typography" and change for the desired font.

Geist font is also applied to headings (H1-H6). You can also edit them the same way by:

  1. Selecting heading type you want to edit
  2. In the styles tab on the right, click selector and select "All H(1, 2, 3, 4, 5, 6) Headings"
  3. Scroll down to "Typography" and change for the desired font.
Geist Font

Icons

All of the icons are in the .svg format, so changing the Color Swatches on the website will not affect them. You can download these icons from the "Untitled UI Icons – 1,100+ essential Figma icons" and edit them in your Figma, Sketch etc. You can also upload your own icons directly.

Editing

Static content vs. dynamic content

When it comes to copy, in Webflow we distinguish two different copy types - static content and dynamic content (CMS) and eCommerce content (shop). To quickly distinguish these copy types you can have a look in the navigator tab, where static content will be displayed using white font. And dynamic content will be displayed using purple color.

You can also directly see which element is static and which dynamic, by directly hovering over it in the designer space. The static content will have a blue border around it, while dynamic content will be purple.

Editing content

Copy and images that are static (blue outline) is content that you need to edit it directly on the page. This content is mostly found on the 'Home' and the 'About' pages.

You can edit static content in two ways:

  1. In the "Designer mode" simply double click on the text you want to edit, and change it. Webflow will autosave it for you.
  2. In "Editor mode" similarly click on the text and change it.

Editing dynamic content is very easy, but can be a little confusing at the beginning. This type of content you will need to edit through collections. Once you get it, it's as simple as filling in the web form.

To edit Article/Journal content:

  1. Go to CMS Collections on the left side, and find the collection you want to edit (ex. Journal).
  2. Click on the collection item (ex. specific article).
  3. Change the inputs that you want to edit (ex. Title)
  4. Save and it's done.

You can read more about editing collections and working with Webflow CMS on their university page.

Webflow CMS for Journal Articles

Editing (static) images

There's two different image types used in this template - normal image and background image. You might notice that we used normal images mostly for icons, and the big images are implemented as a background image.

To edit normal image:

  1. Find the image you want to change and select it.
  2. In settings tab on the right click replace image and choose the new one.

Have a look at the video below to see how to edit background image.

Static image editing

Editing products (eCommerce)

Editing your eCommerce products is very similar to editing dynamic content.

To edit your products:

  1. Go to "Ecommerce" and click on "Products". Find the product you want to edit and select it.
  2. Once in the product edit all the fields you want.
  3. Save and it's done!
Ecommerce Page

Support

If you purchased Soul Ceramics we do offer you basic support. For questions directly related to our template please leave us an email on phantomtemplates@gmail.com

For questions connected to using Webflow as a tool please have a look at their university or contact their support.