JetBlocks

JetBlocks Widgets

Here you can learn more about the widgets represented in JetBlocks addon.

Hamburger Panel

This widget allows adding a neat hamburger panel to the pages built with Elementor in order to make access to the needed template more easy for your visitors.

Please, notice that You need to create at least one template in order to be able to display it in the open Hamburger area.

Content

  • Icon - here you can specify which icon you want to use for the Hamburger element.
  • Active Icon - here you need to set the icon that shows up when the panel is open. By clicking on the icon the user will be able to close the Hamburger panel.
  • Close Icon - here you need to set the icon by clicking on which the user will be able to close the Hamburger panel.
  • Label - here you can set the Hamburger label text.
  • Toggle Alignment - switch the toggle alignment to the one needed (right, center, left).
  • Choose Template - here you’ll be able to select the template to use for the Hamburger panel.

Please, note that You’re also able to edit the templates right from current Elementor editing page. To do it, please, open the Hamburger panel and click Edit Template button.

Settings

  • Position - here you can change the Hamburger element panel position (attach it to the right or the the left side of the page).
  • Effect - here you can select which effect you want to apply for the Hamburger panel (slide or fade).
  • Z Order - here you can change the position of the Hamburger menu to be always on top (to stay on top of other elements that have the lower Z index value).

Style

Panel

  • Panel Width - here you can change the width of the opened Hamburger panel and make it responsive.
  • Background Type - here you can set the preferable background type to use for the panel. It can be Classic or Gradient background.
  • Classic Background Type

  • Color - here you can set the specific color to use for the panel.
  • Image - click the image box and upload an image in order to use it as a background for the panel.
  • Position - here you can position the image used for the background according to your needs.
  • Attachment - here you can make the image fixed or allow it to be scrolled.
  • Repeat - here you can allow the image to be repeated horizontally, vertically, tiled or restrict repeating.
  • Size - select Cover, Contain or Auto image sizing in order to make it fitted into the panel container.

Gradient Background Type

  • Color - add the first color to use for the gradient background of the panel.
  • Location - here you can change the location of the first gradient color.
  • Second Color - add the second color to use for the gradient background.
  • Location - here you can change the location of the second gradient color.
  • Type - here you can change the gradient location from linear to radial.
  • Angle - if the gradient type is lineer, you can change the angle to use for it.
  • Position - if the gradient is radial, here you can change the position of its center to the preferable one.
  • Padding - here you can set the padding for the panel content.

  • Border type - here you can change the border type to the one needed (solid, dotted, dashed, double, groove or none).
  • Width - here you can set the width of the border in px.
  • Color - here you can choose the color to use for the border.
  • Border Radius - here you can apply a radius for the border andles to make them more smooth.
  • Box Shadow - here you can apply a shadow and change the shadow settings for the panel.
  • Padding - here you can change the padding values to your custom ones according to your needs.
Close Button

    Switch between Normal and Hover modes in order to change the style of the Close button when in is in its normal state and when it is on mouse hover.

  • Close Icon - here you can customize the Close Icon appearance (Color, Background Type, Icon Size, Box Size, Border Type, Border Radius, Box Shadow).
Toggle

Switch between Normal and Hover modes in order to change the styles of the toggle elements when it is in its normal state or when it is on mouse hover.

  • Background Type - here you can set the preferable background type to use for the element. It can be Classic or Gradient background. The settings are similar for all of the JetBlocks widgets that have a background type feature.
  • Border Type - here you can specify the suiting border type to use for the element (solid, dotted, double, dashed, groove or none).
  • Width - here you can set the width to use for the border in px.
  • Color - here you can specify the color to use for the border.
  • Border Radius - here you can apply the radius for the borders to make the angles more round and smooth.
  • Box Shadow - here you can set the shadow and customize its settings.
  • Padding - here you can change the padding values to custom ones making them responsive.
  • Margin - here you can set the margin values to custom ones making them responsive.
Icon Styles

Switch between Normal and Hover modes in order to customize the Icon appearance in normal state or when on mouse hover.

  • Toggle Icon - click the Pencil icon to change the icon appearance using all the available settings (they are similar for all the icons possessing this feature in the JetBlocks widgets).
Label Styles

Switch between Normal and Hover modes in order to customize the Label appearance in normal state or when on mouse hover.

  • Label Color - here you can change the label color using color picker tool.
  • Typography - turn the option on to view the typography settings for the text. The typography settings are similar to the other ones available for JetBlocks elements included into the widgets.

Login Form

This widget allows to add and customize a login form to the pages built with Elementor.

Content

  • Username Label - here you can change the username label text to your custom one.
  • Password Label - here you can change the password label to the one more suitable.
  • Remember Me Label - here you can specify the Remember Me label according to your needs.
  • Log In Button Label - here you can change the Log In button label to your custom one.
  • Redirect After Login - here you can select to which page the user needs to be redirected after login (home page, stay on the current page, specify your custom URL).
  • Logged in Message - here you can set your preferable message to make is shown when the user is logged in.

Style

Fields

  • Background Color - here you can set the preferable color to use for the background.
  • Text Color - here you can set the color to use for the text.
  • Typography - turn the option on to view the typography settings for the text. The typography settings are similar to the other ones available for JetBlocks elements included into the widgets.
  • Padding - here you can change the padding setting to the custom ones making the paddings responsive.
  • Margin - here you can specify the margins to apply them for the elements making them responsive.
  • Border Type - here you can specify the suiting border type to use for the element (solid, dotted, double, dashed, groove or none).
  • Width - here you can set the width to use for the border in px.
  • Color - here you can specify the color to use for the border.
  • Border Radius - here you can apply the radius for the borders to make the angles more round and smooth.
  • Box Shadow - here you can set the shadow and customize its settings.
Labels

  • Background Color - here you can set the preferable color to use for the background.
  • Text Color - here you can set the color to use for the text.
  • Typography - turn the option on to view the typography settings for the text. The typography settings are similar to the other ones available for JetBlocks elements included into the widgets.
  • Padding - here you can change the padding setting to the custom ones making the paddings responsive.
  • Margin - here you can specify the margins to apply them for the elements making them responsive.
  • Border Type - here you can specify the suiting border type to use for the element (solid, dotted, double, dashed, groove or none).
  • Width - here you can set the width to use for the border in px.
  • Color - here you can specify the color to use for the border.
  • Border Radius - here you can apply the radius for the borders to make the angles more round and smooth.
  • Box Shadow - here you can set the shadow and customize its settings.
  • Submit

    Switch between Normal and Hover modes in order to customize the Submit button in its normal state and when it is on mouse hover.

    • Background Color - here you can set the preferable color to use for the background.
    • Text Color - here you can set the color to use for the text.
    • Typography - turn the option on to view the typography settings for the text. The typography settings are similar to the other ones available for JetBlocks elements included into the widgets.
    • Padding - here you can change the padding setting to the custom ones making the paddings responsive.
    • Margin - here you can specify the margins to apply them for the elements making them responsive.
    • Border Type - here you can specify the suiting border type to use for the element (solid, dotted, double, dashed, groove or none).
    • Width - here you can set the width to use for the border in px.
    • Color - here you can specify the color to use for the border.
    • Border Radius - here you can apply the radius for the borders to make the angles more round and smooth.
    • Box Shadow - here you can set the shadow and customize its settings.
    • Alignment - here you can change the Submit button alignment to right, left or centered.
    Errors

    • Background Color - here you can set the preferable color to use for the background.
    • Text Color - here you can set the color to use for the text.
    • Typography - turn the option on to view the typography settings for the text. The typography settings are similar to the other ones available for JetBlocks elements included into the widgets.
    • Padding - here you can change the padding setting to the custom ones making the paddings responsive.
    • Margin - here you can specify the margins to apply them for the elements making them responsive.
    • Border Type - here you can specify the suiting border type to use for the element (solid, dotted, double, dashed, groove or none).
    • Width - here you can set the width to use for the border in px.
    • Color - here you can specify the color to use for the border.
    • Border Radius - here you can apply the radius for the borders to make the angles more round and smooth.
    • Box Shadow - here you can set the shadow and customize its settings.

Registration Form

This widget is made for adding registration forms to website's header and footer templates.

Content

  • Username Label - here you can set your custom label for the field where one needs to enter his username.
  • Username Placeholder - here you can set your own placeholder text to be shown in the field where one needs to enter his username.
  • Email Label - here you can set your custom label for the field where one needs to enter his email.
  • Email Placeholder - here you can set your own placeholder text to be shown in the field where one needs to enter his email.
  • Password Label - here you can set your custom label for the field where one needs to enter his password.
  • Password Placeholder - here you can set your own placeholder text to be shown in the field where one needs to enter his password.
  • Show Confirm Password Field - enable this option in order to display the field where one needs to confirm his password.
  • Confirm Password Label - here you can set your custom label for the field where one needs to enter his password to confirm it.
  • Confirm Password Placeholder - here you can set your own placeholder text to be shown in the field where one needs to enter his password to confirm it.
  • Register Button Label - here you can set your custom label for the button where one needs to click to register.
  • Redirect After Register - here you can set the page to which you need to redirect the users after they are registered (home page, current page or the custom URL you need to specify in the case you’ve selected this option).
  • User Registered Message - here you can input the message to be shown when the user is already registered.

Style

Fields

  • Background Color - here you can change the color set for the fields background.
  • Text Color - here you can change the color of the text.
  • Typography - turn the option on to view the typography settings for the text. The typography settings are similar to the other ones available for JetBlocks elements included into the widgets.
Placeholder

  • Placeholder Color - here you can change the color of the placeholder text.
  • Typography - turn the option on to view the typography settings for the text. The typography settings are similar to the other ones available for JetBlocks elements included into the widgets.
  • Padding - here you can add the custom paddings to use for the input field areas in order to make them responsive.
  • Margin - here you can specify the margins to use for the input fields.
  • Border Type - here you can specify the suiting border type to use for the element (solid, dotted, double, dashed, groove or none).
  • Width - here you can set the width to use for the border in px.
  • Color - here you can specify the color to use for the border.
  • Border Radius - here you can apply the radius for the borders to make the angles more round and smooth.
  • Box Shadow - here you can set the shadow and customize its settings.
Labels

  • Background Color - here you can set the color to use for the label text background.
  • Text Color - here you can specify the color of the label text.
  • Typography - turn the option on to view the typography settings for the text. The typography settings are similar to the other ones available for JetBlocks elements included into the widgets.
  • Padding - here you can specify the padding values to use for the labels.
  • Margin - here you can set the margin values for the labels to make them fully responsive.
  • Border Type - here you can specify the suiting border type to use for the element (solid, dotted, double, dashed, groove or none).
  • Width - here you can set the width to use for the border in px.
  • Color - here you can specify the color to use for the border.
  • Border Radius - here you can apply the radius for the borders to make the angles more round and smooth.
  • Box Shadow - here you can set the shadow and customize its settings.
Submit

Switch between Normal and Hover modes in order to make the Submit button appearance fully responsive.

  • Background Color - here you can set the background color for the Submit button.
  • Text Color - here you can specify the color of the label text for the Submit button.
  • Typography - turn the option on to view the typography settings for the text. The typography settings are similar to the other ones available for JetBlocks elements included into the widgets.
  • Padding - here you can specify the padding values to use for the button.
  • Margin - here you can set the margin values for the button to make it fully responsive.
  • Border Type - here you can specify the suiting border type to use for the element (solid, dotted, double, dashed, groove or none).
  • Width - here you can set the width to use for the border in px.
  • Color - here you can specify the color to use for the border.
  • Border Radius - here you can apply the radius for the borders to make the angles more round and smooth.
  • Box Shadow - here you can set the shadow and customize its settings.
  • Alignment - here you can set the needed alignment for the button (right, left, centered).
Errors

  • Background Color - here you can change the background color of the error blocks.
  • Text Color - here you can change the color of the text shown when there is an error in the provided information.
  • Padding - here you can change the padding of the error elements.
  • Margin - here you can change the margins for the error elements and make them fully responsive.
  • Border Type - here you can specify the suiting border type to use for the element (solid, dotted, double, dashed, groove or none).
  • Width - here you can set the width to use for the border in px.
  • Color - here you can specify the color to use for the border.
  • Border Radius - here you can apply the radius for the borders to make the angles more round and smooth.
  • Box Shadow - here you can set the shadow and customize its settings.

WooCommerce Shopping Cart

The widget adds the shopping cart to website's header or footer and customize its appearance in about few clicks.

Content

Settings

  • Label - input the text in the corresponding field to use it as a label.
  • Icon - here you can change the icon shown for the Cart to the one more suitable from the list of available icons.
  • Show Products Count - here you can enable the products count to be displayed.
  • Products Count Format - here you can change the format of the product count to the one more preferable.
  • Show Cart Total - enable this option if you want the users to be able to see the total value of the products added into cart.
  • Cart Total Format - here you can specify the format of the total cart value.
  • Cart Dropdown Label - here you can specify the text to be shown as the card dropdown label.

Style

General Styles

  • Alignment - here you can change the Cart alignment and make it responsive (specify left, right or centered alignment).
Cart link

Switch between Normal and Hover modes in order to customize the elements when on mouse hover or when in the normal state.

  • Background Color - here you can change the color of the Cart element background.
  • Label Color - here you can set the color of the Cart label text.
  • Icon Color - here you can set the specific color to use for the Cart icon.
  • Count Background Color - here you can change the color of the count background.
  • Count Color - specify the color of the cart count value.
  • Totals Color - here you can set the color of the cart total value.
  • Typography - turn the option on to view the typography settings for the text. The typography settings are similar to the other ones available for JetBlocks elements included into the widgets.
  • Padding - here you can set the padding values to make the paddings responsive.
  • Border Type - here you can specify the suiting border type to use for the element (solid, dotted, double, dashed, groove or none).
  • Width - here you can set the width to use for the border in px.
  • Color - here you can specify the color to use for the border.
  • Border Radius - here you can apply the radius for the borders to make the angles more round and smooth.
  • Icon Size - here you can set the size of the icon to apply for different responsiveness modes and suit your webpage’s design.
  • Gap After Icon - here you can add a responsive gap distance after the Cart icon.
  • Label

  • Label Font Size - here you can specify the font size to use for the label text.
  • Gap After Label - here you can add a responsive gap distance after the textual label.
Count

  • Count Font Size - here you can set the font size to use for the count characters.
  • Count Box Size - here you can change the size of the count box to the one needed using the control.
  • Margin - apply your custom responsive margins to make the count element stand out.
  • Border Radius - here you can change the border radius values to make the angles of the element more smooth and rounded.
Totals

  • Totals Font Size - use the controls in order to change the size of total cart value font and make it responsive.
Cart Dropdown
Container Styles

  • Background Color - here you can set your custom color to use for the container background.
  • Border Type - here you can specify the suiting border type to use for the element (solid, dotted, double, dashed, groove or none).
  • Width - here you can set the width to use for the border in px.
  • Color - here you can specify the color to use for the border.
  • Border Radius - here you can apply the radius for the borders to make the angles more round and smooth.
  • Box Shadow - here you can set the shadow and customize its settings.
  • Width - here you can change the width of the container in px and make it responsive.
  • Padding - input your custom padding values to make them responsive and make the container stand out.
  • Border Radius - here you can change the border radius border radius values to your custom ones to make the angles more smooth and rounded.
  • Horizontal Position By - here you can change the container’s horizontal position to the needed one depending on what you want it to be.
  • Left (Right) Indent - add an indent distance for the container depending on what horizontal position you’re using.
Dropdown Label Styles

  • Typography - turn the option on to view the typography settings for the text. The typography settings are similar to the other ones available for JetBlocks elements included into the widgets.
  • Margin - here you can set the custom margins to use for the labels shown in the dropdown block.
  • Padding - here you can add the responsive padding values to apply for the labels inside the box.
  • Border Type - here you can specify the suiting border type to use for the element (solid, dotted, double, dashed, groove or none).
  • Width - here you can set the width to use for the border in px.
  • Color - here you can specify the color to use for the border.
  • Border Radius - here you can apply the radius for the borders to make the angles more round and smooth.
  • Alignment - here you can change the box’s content alignment to the one more preferable (left, right, centered).
Cart Items Style
Product List Style

  • Max Height - here you can change the maximum height of the products list.
  • Margin - here you can set the responsive margins to use for the products.
  • Padding - here you need to set the responsive paddings for the products.
  • Border Type - here you can specify the suiting border type to use for the element (solid, dotted, double, dashed, groove or none).
  • Width - here you can set the width to use for the border in px.
  • Color - here you can specify the color to use for the border.
  • Border Radius - here you can apply the radius for the borders to make the angles more round and smooth.
Product Item Style

  • Margin - here you can apply the custom responsive margins to use for the product items.
  • Padding - here you can set the responsive padding values to use for the product items.
  • Divider - enable this option in the case you want the product items to be separated by a divider.
  • Style - select the divider’s style from the list of the styles available (solid, dashed, double, dotted).
  • Weight - here you can set the preferable weight for the divider (from 1 to 20) using the controls.
  • Color - here you can set the needed color for the divider.
Product Image Style

  • Width - here you can set the suitable width of the product’s featured image.
  • Margin - here you can set the custom responsive margins for the product’s featured images.
Product Title Styles

  • Typography - turn the option on to view the typography settings for the text. The typography settings are similar to the other ones available for JetBlocks elements included into the widgets.
  • Color - here you can set the color to use for the product title.
  • Hover Color - here you can set the color which will be shown when on mouse hover.
Product Remove Button Styles

  • Color - here you can set the color to use for the button used to remove the product from the cart.
  • Hover Color - here you can change the color which will be shown on mouse hover.
Product Quantity Styles

  • Typography - turn the option on to view the typography settings for the text. The typography settings are similar to the other ones available for JetBlocks elements included into the widgets.
  • Color - here you can set the color to use for the product number.
Product Amount Styles

  • Typography - turn the option on to view the typography settings for the text. The typography settings are similar to the other ones available for JetBlocks elements included into the widgets.
  • Color - here you can change the color in which the product amount is shown.
Product Container Styles

  • Margin - here you can set the responsive margins to use for the product container.
  • Padding - here you can specify the responsive paddings for the product container.
  • Border Type - here you can specify the suiting border type to use for the element (solid, dotted, double, dashed, groove or none).
  • Width - here you can set the width to use for the border in px.
  • Color - here you can specify the color to use for the border.
  • Border Radius - here you can apply the radius for the borders to make the angles more round and smooth.
  • Alignment - here you can set the container alignment ot the one preferable (left, right or centered).
Total Title Styles

  • Typography - turn the option on to view the typography settings for the text. The typography settings are similar to the other ones available for JetBlocks elements included into the widgets.
  • Color - here you can change the color to use for the total title.
Total Amount Styles

  • Typography - turn the option on to view the typography settings for the text. The typography settings are similar to the other ones available for JetBlocks elements included into the widgets.
  • Color - here you can change the color of the total amount characters.
Cart Buttons Style
Button Container Styles

  • Margin - here you need to specify the responsive margins to apply them for the button container.
  • Padding - here you can set the responsive paddings to use them for the button container.
  • Border Type - here you can specify the suiting border type to use for the element (solid, dotted, double, dashed, groove or none).
  • Width - here you can set the width to use for the border in px.
  • Color - here you can specify the color to use for the border.
  • Border Radius - here you can apply the radius for the borders to make the angles more round and smooth.
View Cart Button Styles

  • Typography - turn the option on to view the typography settings for the text. The typography settings are similar to the other ones available for JetBlocks elements included into the widgets.

Switch between Normal and Hover modes in order to customize both the appearance of the elements on hover and in their normal state.

  • Background Color - here you can change the color of the background to the suitable one.
  • Text Color - here you can set the color you want to use for the button text.
  • Border Type - here you can specify the suiting border type to use for the element (solid, dotted, double, dashed, groove or none).
  • Width - here you can set the width to use for the border in px.
  • Color - here you can specify the color to use for the border.
  • Border Radius - here you can apply the radius for the borders to make the angles more round and smooth.
  • Box Shadow - here you can set the shadow and customize its settings.
  • Padding - here you can specify the paddings for the button and make them fully responsive.
  • Margin - here you can specify the margins for the button and make them fully responsive.
Checkout Button Styles

  • Typography - turn the option on to view the typography settings for the text. The typography settings are similar to the other ones available for JetBlocks elements included into the widgets.

Switch between Normal and Hover modes in order to customize the appearance of the Checkout button when on hover and in its normal state.

  • Background Color - here you can set the button’s background color to the one you need.
  • Text Color - here you can change the text color using color picker tool.
  • Border Type - here you can specify the suiting border type to use for the element (solid, dotted, double, dashed, groove or none).
  • Width - here you can set the width to use for the border in px.
  • Color - here you can specify the color to use for the border.
  • Border Radius - here you can apply the radius for the borders to make the angles more round and smooth.
  • Box Shadow - here you can set the shadow and customize its settings.
  • Padding - here you can specify the paddings for the button and make them fully responsive.
  • Margin - here you can specify the margins for the button and make them fully responsive.