You searched for Effect - Porto Documentation

Points to be noted when migrating to Porto 6.10.0

porto_admin — Fri, 11 Aug 2023 01:47:58 +0000

Porto 6.10.0 released and fixed major user-friendly issues.

Porto 6.10.0 release is here, bringing exciting new features and important bug fixes. First of all, we strongly recommend backing up your database before updating. This precautionary measure will ensure the safety of your data in case any unforeseen issues arise during the update process.

Our diligent development team has detected significant user-friendly issues in the previous Porto version. We know these issues may cause some backward compatibility problems, but have to address to improve the user experience and user-friendly to build the site in the future. It is important to us that you understand our grievances.

Okay, so we introduced to solve problems, if you encounter issues after updating the theme.

1. You can see the intro section which full-width decreases the boxed.

In any case, a full-width section works as full-width and boxed as boxed.

Regarding to this, there is a issue in which sections that were previously seen as full-width appear as boxed.
I showed you how to solve it with a gif file below.

2. Header builder, especially the problem of unbalanced sizes and spacing of icons has been resolved.

Main purpose is to eliminate the disproportionate size and different spacing of the shopping cart and wishlist icons, which were previously inconvenient to customize.

For a detailed look at new version, 6.10.0 Blog in www.portotheme.com or What’s New 6.10.0.

The post Points to be noted when migrating to Porto 6.10.0 appeared first on Porto Documentation.

Porto Addons for WPBakery Column

porto_admin — Wed, 02 Nov 2022 04:07:02 +0000

– Sticky Options

– effect/">Hover Split

The post Porto Addons for WPBakery Column appeared first on Porto Documentation.

How to use Scroll in Viewport

porto_admin — Wed, 02 Nov 2022 03:36:54 +0000

“Scroll in Viewport” is an effect that allows you to vitalize the site. The below shows a detailed description for each option. You can see an example in Business Consulting 5. For this effect, you shouldn’t set Section( Row for WPBakery ) background.

Inside Background Color: Control the background color when the target section is inside of the viewport.

Outside Background Color: Control the background color when the target section is outside of the viewport.

Top Offset: The background of target section is supposed to be changed if the top of target passes the threshold(this option value) of the screen. This value must be smaller than height of the section.

Bottom Offset: The background of target section is supposed to be changed if the bottom of target passes the threshold(this option value) of the screen. This value must be smaller than height of the section.

The post How to use Scroll in Viewport appeared first on Porto Documentation.

Porto Addons for WPBakery Row

porto_admin — Sat, 29 Oct 2022 18:24:01 +0000

– effect/">Scroll Parallax
– effect/">Particles Effect
– effect/">Mouse Hover Split
– Scroll In Viewport
– Sticky Options

The post Porto Addons for WPBakery Row appeared first on Porto Documentation.

Effects in Porto Heading

porto_admin — Fri, 28 Oct 2022 23:03:51 +0000

Porto 6.6.0 updates Porto Heading by adding two effects – Hover Image Floating and Highlight Animation.

What is Hover Image Floating?

This effect is to show the floating image on the inside of the text and hide on the outside.

Options

Floating Image: Select the hover floating image.

Floating Offset: Control the offset of image hover position. This value is horizontal and vertical offset. Unit is px.

What is Highlight Animation

With this option, you can make some text conspicuously. For this effect, the main heading should have the HTML Mark Text element.

Options

Background Type: Control the background of highlight. Classic or gradient.

Height: Control the height of the highlight.

Vertical(Horizontal) Position: Control the position of the heighlight background.

The post Effects in Porto Heading appeared first on Porto Documentation.

How to use Horizontal Scoller?

porto_admin — Fri, 28 Oct 2022 16:28:20 +0000

Porto 6.6.0 offers new effects in Elmentor and WPBakery. Horizontal scroller is one of them. You can see an example in Seo3.

How To Use the Horizontal Scroller

The use way is different in Elementor and WPBakery.

In Elementor, you should choose “Horizontal Scroller” in the Porto Additional Settings.

In WPBakery, Porto offers Horizontal Scroller Widget.

Options

Vertical Alignment: To controls the item’s alignment. Top, Center, Bottom.

Items Spacing: To controls the item’s padding.

Scroller Padding: To controls the padding of scroller wrapper.

And you can also control the item count with options.

The post How to use Horizontal Scoller? appeared first on Porto Documentation.

How to use Hover Split Effect?

porto_admin — Fri, 28 Oct 2022 06:25:32 +0000

Hover Split is new in Porto 6.6.0 and is the wonderful effect to actively make your sites. You can see an example in Seo3. You can use it in Elmentor and WPBakery.

How To Use the Hover Split.

Create, or choose the section or row and enable “Mouse Hover Split?” in the Porto Options. And you need to add 2 columns in section( row ).
Each column should be set “Hover Split Slide” option.

Min Height: This is value of split slide at the first load time. Default is 300px.

WPBakery

Elementor

The post How to use Hover Split Effect? appeared first on Porto Documentation.

Cursor effect Widget

porto_admin — Mon, 13 Jun 2022 08:44:25 +0000

Porto 6.4.0 add this effect with Porto Cursor Effect widget. If you want to know how Cursor effect works, please check Business Consulting3 Demos. This effect changes your cursor variously. It is available in both Elementor and WPBakery.

How To Use.

First you should select the Hover Effect on Target. Outline Target is to use for normal cursor. And with Change Mouse Cursor, you can change cursor above the selected target. The cursor is made up of cursor and cursor inner.

Target: Select the DOM selector to show cursor effect.

Icon Class for cursor inner: Control the icon type of cursor inner.

Tranition Duration: Control the duration time of cursor and cursor inner.

Tranition Delay(Cursor Inner Transition Delay): Control the delay time of effect for cursor(cursor inner).

You can also control the border and background with style options.

If you empty the Target option, the cursor will be appear on the global page. With this option, you can show cursor on selected page or selected object.

The post Cursor effect Widget appeared first on Porto Documentation.

How to add Particles effect

porto_admin — Mon, 13 Jun 2022 08:07:51 +0000

Porto Demo Business Consulting4 used Particles effect with custom styles and js. Porto 6.4.0 provides this function to Elementor Section and WPBakery Row. It’s also easy to realize this effect.

How To Use the Particels Effect

Create, or choose the section or row and enable “Particles Effect” in the Porto Options.

Particles Image: Select the image to show particles effect.

Particles Hover Effect: Control the particles hover effect.

Particles Click Effect: Control the particles click effect.

The post How to add Particles effect appeared first on Porto Documentation.

How to add Scroll Paralax effect

porto_admin — Mon, 13 Jun 2022 07:26:03 +0000

Several Porto Demos (Architecture 2, Law Firm2 and etc) used Scroll Parallax effect with custom styles and js. Porto 6.4.0 provides this feature to Elementor Section and WPBakery Row. It’s also easy to realize this effect.

How To Use the Scoll Parallax.

Create, or choose the section or row and enable “Scoll Parallax” in the Porto Options.

CSS Unit. This is unit of the number which is to control the width of section(row) by mouse scroll.

Start Width. This option controls the width when the scollbar is at the top of Scroll Parallax Section

The post How to add Scroll Paralax effect appeared first on Porto Documentation.