Assets: Create the Upload section
  1. Create a “uploads” folder inside the /web folder.
  2. Go to Craft CMS -> Backend -> Settings (Leftside Menu) -> Filesystems
  3. Click “New filesystem” (Button -> Right side at the top)
  4. Create a new Filesystem
    a. Name -> “Uploads”
    b. Filesystem Type -> “Local Folder”
    c. Activate -> Files in this filesystem have public URLs
    d. Base URL -> “@web/uploads”
    e. Base Path -> “@webroot/uploads”
    f. Save
  5. Go to Craft CMS -> Backend -> Settings (Leftside Menu) -> Media -> Assets
    a. Click “+ New volume”
    b. Give it a name (For ex. Uploads or Images)
    c. Asset Filesystem -> Select the Filesystem created earlier.
    d. Transform Filesystem -> Select the Filesystem created earlier.
    e. Save
  6. Now, on the leftside menu, there is a new tab called “Assets”, where you can upload your files.
Assets: Create Image Transforms for Mobile
  1. Go to Craft CMS -> Backend -> Settings (Leftside Menu) -> Assets
  2. Click on “Image Transforms” and press the “+ New image transform” button
  3. Add 2 new Image Tranforms (One with the Image Format .jpeg and one .webp)
  4. You can call them whatever you want, but I recommend something like this:
    a. Mobile - Jpeg and Mobile - WebP
    b. Mode -> Select “Crop”
    c. Width -> 576px (Media Query for Mobile from Bootstrap)
    d. Height -> 1024px
    e. Allow Upscaling (Activated)
    f. Image format (Depending on the Image Transform, either .webp or .jpeg)
  5. How to use them will be described on the next page.
Fields: Create Fields and add them to Sections.
  1. Go to Craft CMS -> Backend -> Settings (Leftside Menu) -> Fields
  2. Click on “+ New Field” button
  3. Give it a name and the handle will be created automatically
  4. Select the Field Type
  5. Press "Save" in the right top corner button
  6. Go to Settings and select Sections
  7. Press "Edit entry type" on the wanted section you wish to add field
  8. To have a nice structure, it's recommended to create a new Section, by clicking on "+ New Tab" button.
  9. After the tab is created, drag and the drop the new created field from the right section.
  10. Press "Save" in the right top corner button
  11. Go to Entries (Leftside Menu) and click on the section you have added the field to.
  12. Edit the field with the content you need and press "Save" in the right top corner button.
Fields: Create Global Fields

Global fields can be used globally in any existing section. Examples of global content: Address, phone numbers, email, navigation, footer content and so on.

Notice: There can be several global sections. I usually have at least 3: Globals, Header and Footer. Every time you want to add a field to the template, use the handle of the section instead of "entry.".

Example:
Header -> header.NameOfTheField
Footer -> footer.NameOfTheField
Globals -> globals.NameOfTheField

  1. Go to Craft CMS -> Backend -> Settings (Leftside Menu) -> Globals
  2. Click on “+ New global set” button
  3. Give it a name and the handle will be created automatically
  4. Create a New Tab inside the table by pressing "+ New Tab" and give it name.
  5. Select the Field from the right table and drag and drop it into the table.
  6. Press "Save" in the right top corner button
  7. Now, in the main Leftside Menu, there is a new Tab called "Globals". Click on it!
  8. You can now edit the content you wish to show in Front-End
  9. Adding the field to the template: Let's assume there is a field called "Heading" in the Globals section. The handle of the "Globals" section is the same as the name, except that you have given it a different handle. To add it into the template, simply write the following code: