With the lightweight plugin, you can apply the Custom site logo with the specific size of the current site logo or upload your own image from the media library. Choose one of 25 available hover animations for your picture to make it more attractive. There are offered Custom and Image link types except for the homepage site URL.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content tab
In the Content section, you can manage the basic logo settings like image uploading, size specifying, hover animation, etc.
Logo
- Custom logo – the option allows you to display the current site logo or upload your own image/text.
- Image Size – choose one of the predefined logo image sizes or set custom height or width.
- Alignment – specify the alignment for the logo: Left, Center, Right.
- Hover Animation – select one of the available logo hover animations from the list.
- Link type – allows you to choose different types of logo links: Site url, Custom url, Media file. Select “None” to disable the link.
- Caption – a toggle to enable/disable the caption display. When the option is enabled, you can select Caption type: Site title, Site description, Custom text and Caption position.
Style tab
On the style tab, you can manage the logo styles in different states, its sizes, typography, borders, padding/margin, etc.
Logo
- Margin – the setting allows managing the margin of the current element in different units(px, %,em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, %,em) for desktops, tablets, or phones.
- Height – specify the height of the logo block in different units(px, %,em)
- for desktops, tablets, or phones.
- Width – specify the width of the logo block in different units(px, %,em)
- for desktops, tablets, or phones.
NORMAL/HOVER
The logo block style settings for different states.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Logo Image
NORMAL/HOVER
- CSS Filters – the option allows you to add various CSS filters for the image box as Blur, Brightness, Contrast, Saturation, Hue.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Caption
- Margin – the setting allows managing the margin of the current element in different units(px, %,em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, %,em) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER
The button style settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.