Design options and panels

Each block has a unique set of options but Greenshift uses a component system so there are common panels for most of the blocks. Panels can be accessed from the Inspector and from the Toolbar. They are available only when you click on the block. All options are available in Inspector (sidebar), there are some panels (spacing, typography/background) that are available in the toolbar so you can access them more easily. Some blocks (for example, advanced buttons) can have more quick panels in toolbar.

When you change an option, the panel will have a blue dot which will indicate that there are some changed options that are different from the default.

Each panel has clean button in end.

Let’s make a quick overview.

Typography

In typography, you can set everything related to typography. There are also some advanced options that you can get when you click on Cog icons.

Additionally, typography option has Fluid typography support and some quick effects.

Fluid typography has quick presets which are usually enough in 99% of scenarios for the best fluid options. Fluid typography changes related to the available width of the viewport but still keeps it’s best view. For example, big text will remain big on mobiles, but at the same time it will be not so big as on desktop.

Quick typography panel is available in toolbar of blocks (but it’s simplified, more options are always available in side panel)

Underline Quick effect

This allows to make dynamic underline on Hover. This works only if you add links to text

Spacing

The spacing panel allows to add padding and margin and also sets how a block is using space when inner content overflows width of block.

Margin bottom and top can be set with visual helpers

Spacing options can be added manually or by using WordPress Core presets. If you click on link/unlink button, you can attach the option to all fields at once.

Border

Border options give you border styles. Please note that to make border working, you need to add style, size and color. If you enable Custom border, you can use border css option as text.

Shadow

Shadow has the preset option and available 3 shadow set. But you can also enable custom shadow and use shadow css

Find more about CSS shadow property

Sizing panel

This panel allows to add width and height to block. You can add not only static sizing but also variable size based on calc, min, max, clamp modern properties. Also, instead of size, you can set Aspect Ratio

Background panel

Everything related to background is available in this panel

Background image property is Device related. It means that you can set different images for different resolutions.

Once you enable Image, additional options, like focus, and background size are available. You can also enable Lazy loading, but use this option only if your block is out of first view.

Background has also parallax effect. More about different kind of parallax effects

Background panel is available also from toolbar quick panel

Background has also Mix blending option

Overlay panel

This panel is very similar to background panel, but it’s working on top of it as separate layer. This can give you overlayed effect. For example, you can add image in background and add black self transparent overlay layer above it

Overlay has also filters and hover effects. Filters are required if you want to have monochrome, glass, sepia, overexposure effects. Hover effects allows you to add effects on hover. For example, you can add monochrome filter and set fade effect in hover effects. In this way, monochrome will be applied only when user hover over block

Read More about advanced effects related to overlay

Advanced Options

You can switch to advanced options to find advanced panels

Animation options

Animation options allow to add quick animation preset to block.

Find more about the Animation panel

Position options

Position panel adds position CSS option to element. There are also quick presets in Position which will use position and CSS transformation.

Some blocks have also quick drag position toolbar button.

Please, note that if you use Absolute Position inside another element, make sure that you set Position Relative to parent block. In editor, wordpress adds Relative position to all blocks automatically, but on Frontend part, this block can have no position

CSS transform

CSS transform is a very powerful feature and you can build custom unique effects if you understand how it works

CSS transform has 4 states: Init, Hover, Active and Infinite

Init is when the block is loaded on the page

Hover is when you hover on it

Active is used when the block has an active class on the parent block. There are some presets there. For example, Slider Active will be used in the Advanced slider block when the slider is active.

Infinite for making infinite movement effects

Responsive and Custom CSS

In this panel, you can hide a block for each resolution. Also, you can add here custom css. When you click on the Placeholder button, special code {CURRENT} will be added. It will be replaced by the id of the block on frontend, so you can limit custom CSS by block

Visibility options

You can also limit block visibility by different conditions. For example, you can show block only on specific category pages. Or only when users visit your site from another site.

Find more about Visibility Options
«
»