Grateful you've chosen to invest in our Midori template! This tutorial encompasses the essentials on editing basic components like color schemes, typefaces, and CMS material within the Midori template on Webflow.
If you're a newcomer to Webflow, we strongly advise you to enroll in Webflow University's Webflow 101 Crash Course, which will arm you with the basics to hit the ground running.
The Midori layout relies on Color Swatches, offering you a seamless way to universally adjust a color scheme. To do this, simply navigate to the Style menu found on the right-hand panel, proceed to the Colors subsection under Typography, and click on the color. This will unveil all color swatches, giving you the freedom to change them site-wide as needed.
In terms of fonts, Midori employs a unified font throughout the site, which can be manipulated through the Body (All Pages) selector. To do this, click on the "Body" element in the navigator on the left hand side. Then navigate to the style panel on the right, and in the "style selector" choose the pink "Body (All Pages)" HTML tag. Once there, scroll down to the Typography subsection and choose the typeface that aligns with your brand identity.
Take note that some graphic elements, such as icons, are image files and thus will retain the original template color even after color scheme adjustments. This is because they are separate media files like PNGs, JPGs, or SVGs. Should you wish to modify these, you can download the images from the site, and use design tools like Photoshop, Illustrator, or Figma, or upload your own visuals that better suit your branding. Or reach out to us at hello@juno-templates.com and, with proof of purchase, we will share the original Figma file with you - from where you can change the colors of images and export before uploading to your Webflow project.
Static content refers to the material that lacks CMS integration. This is essentially all content on your site that's not connected to a CMS collection, and are highlighted in blue in the Navigator panel (e.g., unlike a blog post).
Content that is dynamic will automatically populate based on what you input in the CMS tab on the left-hand sidebar (located below the Pages icon). Such content is easily identifiable, as it appears in purple within the left sidebar's Navigator and will highlight with a purple border upon clicking or hovering over it.
Content related to eCommerce products operates much like CMS-based dynamic content but focuses solely on online merchandise. Similar to CMS content, it is marked in purple in the left sidebar Navigator and highlighted with a purple border upon interaction. To alter this data, head to the eCommerce tab in the left sidebar.
If you're looking to edit the Title, Description, and Featured Image that display when your site is shared on various platforms (like Facebook or Twitter), simply head over to the Pages section on the left sidebar, click the small Settings gear of your desired page, and all relevant options will be available for editing. Note that you'll need to update these fields for each page individually.
Should you face any challenges, such as an undesirable design direction or accidental deletion of vital elements, worry not! Click on the gear icon in the left sidebar, and navigate to the "Backups" section and choose a backup file to revert to an earlier version of the site at any time.
