Create own modular template with custom fields

Hello, I read the documentation, looked at the examples, but I still can't make my own page template.
What I want to do:
create own fields for the modular page. I looked for an example in the video and did not find it.

I’m looking at the structure of the template Quark, and I don’t understand how to use it as an example to make tabs for a module page with their own fields.

@NataliaB, You might want to download the "One-Page Site" skeleton. It contains a sample modular page with modules. Then take a look at /themes/blueprints/modular/features.yaml. This form creates its own 'Feature' tab in Admin with its own fields.

How correctly duplicate features.yaml with custom fields.
1) I create a services.yaml with fields text like in features.yaml
How display Services tab in admin panel on page setting ?

@NataliaB,

Do you have:

• a "services" template in /users/themes/quark/templates/modular/services.html.twig
• and a module using the template like /pages/01.home/05._services/services.md

Oh, I miss services.html.twig
Now I can echo images from my field

This my services.yaml

title: Services
'@extends': default

form:
  fields:
    tabs:
      type: tabs
      active: 1

      fields:
        content:
          type: tab

          #
          # Add your custom fields here.
          # These fields will be available in the page's Content tab
          # inside the Admin Panel.
          #
          fields:

            #
            # Custom text field
            #
            header.custom.textField:
              type: text
              label: Custom text field

            #
            # Cover image
            #
            header.custom.coverImage:
              type: file
              label: Cover image
              destination: 'self@'
              multiple: false
              accept:
                - image/*

and my services.twig.html

<div class="container">

  <!-- custom text field content from default.yaml blueprints file -->
  <h1 class="customTitle">
    {{page.header.custom.textField}}
  </h1>
  <!-- custom image select field content from default.yaml blueprints file useful for including a specific image somewhere. since it relative, we can just use the twig tag here in an img html tag -->
  <img src= " {{page.header.custom.coverImage}} " />

    <!-- main content / markdown area! -->
    <div class="mainContent">
      {{page.content}}
    </div>

</div>

On web site:

Some custom text from my fields Text
<img src="Array">
<p>content from page here</p> (but why show on page with <p> ?)

@NataliaB, Please ask separate questions in a new post with a proper title:

• A post can only have a single 'solution' which is the solution to the issue mentioned in the title.
• Questions and solutions buried inside a single post are hard to find. Most people only read the title to find a related question.

I've already split your second question into a new post.

@NataliaB, Has this topic been solved?

Yes. All the solutions in the topic helped me. Thank you

@NataliaB, Then please pick one and mark it as solution...

The forum is a two-way street where everyone has its share. It is not only for the benefit of people asking questions. The idea is that the asker also gives feedback on proposes solution (does it work or not) and mark a post as solved if a solution has been provided. By doing so, the knowledgebase in enriched by both answerers and askers.