How to style a block: border, background, padding, shadow

← Back

Hover over the block and click the gear icon — a styles window will open with the tabs "Border", "Block", "Text", "Links", "Animation", "Positioning".

The gear icon appears when you hover over a block — the header, footer, content area, form columns, cards. It opens the styles window. Changes are saved automatically as you type; the "Clear" button resets the block's styling.

What is where:

  • "Border" — position (all sides or a specific one), color, thickness, corner radius.
  • "Block" — background color, gradient ("Use background gradient"), "Block shadow", "Padding" and "Margin", background image, width and height (including minimum and maximum), "Text align" and "Block align", "Visibility" — hide the block on desktop, tablet, or phone.
  • "Text" — font, size, color.
  • "Links" — link color inside the block separately from regular text.
  • "Animation" — appearance, hover reaction, and continuous motion.
  • "Positioning" — "Position type" (block sticking to the top or bottom of the window), offset, rotation.

Hover view is set by the switch in the window header: "Normal" / "On hover" / "Active" (the last one only for menu items). On the "Border", "Block", "Text", and "Links" tabs, the settings apply to the selected state; an empty field means "same as normal".

The main switch is "Apply only to this block". Without the checkbox, the setting applies to all blocks of this type across the site: if you set a border for the content area, it will appear on every page. With the checkbox, only on this block of this page.

If it didn't work

  • The wrong block got styled. Blocks are nested inside each other: hover more precisely, the gear icon appears on the block under the cursor.
  • You changed it on one page, but it changed everywhere. The "Apply only to this block" checkbox wasn't checked. Revert the value and repeat with the checkbox.
  • Text alignment doesn't work. Check whether block alignment is also set on the same block — they conflict with each other.
Did the article help?

See also

How to set a logo and faviconBoth images are uploaded in the settings of the "Logo" informer — using the "Logo" and "Fav icon" fields.How to add a counter or third-party widget to all pagesThe "About site" tab in general settings, the "Widget HTML code" field — the code is inserted on every page of the site.What are informers in the menuThese are small widgets that sit in the menu alongside items: logo, cart, search, language switcher, chat, and others.How to change block size and padding with the mouseHover over a block and drag the handle on its edge. Usually all blocks of this type change, with Ctrl — only this one; for product tiles it's the opposite.

Tips for working with the builder

The "Help" section is made for those who are building a website on "Pervaya Liniya" for the first time. It contains answers to common questions: how to create a website, what to write in the fields, how to edit texts and photos, how to connect your own domain, and how to set up sections. The materials will help you figure things out without contacting support.

The builder is simple: you fill in the fields on the creation page, and then edit the content directly on the finished website. If something does not work or is unclear, check the relevant help item. The instructions are written in plain language and describe every step.

In Help you will find answers to questions:

  • how to come up with a website address and what to do if the name is taken;
  • how to change the title, description, and other texts on the page;
  • how to add products, services, or request forms;
  • how to connect your own domain instead of an address on firstline.com.ua;
  • how to set up sections and modules for your business needs.

If you cannot find the answer you need, use the feedback form — we will help you figure it out. The section is updated so that you can always find current information about working with the builder.