Widgets – Jedi Help Center https://support.jedithemes.com Theme Documentation Tue, 27 Feb 2024 10:14:31 +0000 en-US hourly 1 https://wordpress.org/?v=6.7 https://support.jedithemes.com/wp-content/uploads/2021/04/jedi-favicon-150x150.png Widgets – Jedi Help Center https://support.jedithemes.com 32 32 WordPress: How to Add Instagram Feed https://support.jedithemes.com/wordpress-how-to-add-instagram-feed/ Sun, 18 Jun 2023 13:53:11 +0000 http://support.jedithemes.com/?p=988 With our themes, showcasing your Instagram feed featuring images from your account is made easy. You can incorporate the feed into various widget areas, including the footer, sidebar, before header (at the top of the page), and other predefined locations. However, before adding it, it’s essential to connect to your Instagram account to generate an access token, enabling the widget to function properly.

Connect your Instagram account

From your dashboard, click on your Theme Name and choose “Connect Instagram” for the menu. This will redirect you to a new page where you can click to connect to your Instagram account.

Add Instagram Feed

Once connected, go to Appearance > Widgets > Click “+” on the area where you want to show the feed and search for the Instagram Feed block. This will provide several options such as title, number of images/columns to show, gap between columns/rows etc.

After you set the options the way you desire, you can save your changes by clicking the Update button on the upper right side.

Note: if the widget is still loading, give it a time and press “Update” again. Then you can visit your site to see if the Instagram feed has been added.

]]> WordPress: Adding an Email Newsletter Signup https://support.jedithemes.com/how-to-add-an-email-newsletter-signup/ Mon, 10 Apr 2023 12:13:35 +0000 http://support.jedithemes.com/?p=826 Adding an email newsletter signup form is a fantastic way to stay in touch with your visitors. You can send weekly or monthly emails with your new posts, events or products. In this tutorial, we’ll show how to add a newsletter signup using MailChimp, Flodesk, ConvertKit and Mailerlite. So let’s get started!

Table of Contents

Important

  • After adding your signup form, try to subscribe to make sure everything works. If you’re still not able to subscribe after following all the steps, copy the entire HTML/script from the platform you’re using and see if that solves the issue.
  • Our Signup Form widget includes only the email and first/last name fields. Adding any extra functions like checkboxes might prevent the form from working. For this reason, you can use the HTML of the form you want to embed from your account instead.

MailChimp

Create the form

  1. Login to your MailChimp account > Audience > Signup forms > Embedded forms.
  2. Choose Form Fields > select the fields you want to display.
  3. Click Continue on the top right corner of the page.
  4. From the Embedded Form Code box, copy the line after <form action=" as highlighted below:

Add the form

  1. Login to your WordPress dashboard and go to Appearance > Widgets.
  2. Click “+” on the area where you want to show the form > search for the Signup Form block.
  3. When the settings appear, select the Mailchimp platform and add the link you’ve copied in the ‘Form Link‘ field (note: if you don’t see the settings, wait for the widget to load and then click on the preview).
  4. Press the Update button on the upper right corner of the page to save the changes.

Flodesk

  1. Login to your Flodesk account > click on Forms > + New form.
  2. Select Inline > move the cursor on the right & click on Customize it.
  1. Create a new segment (or choose from the existing ones) > click the Save button.
  2. Click anywhere on your form to start editing (you may want to remove the title & text below it, as this is already added):

Note: we would recommend you to edit only the colors because the form will inherit the theme’s fonts.

  1. Make sure to set the Canvas and Background colors to transparent (0:42 in the video above).
  2. After you’re done, click on Next > choose the settings > hit the ‘Continue‘ button.
  3. Copy the “Header code” and add it to the <head></head> of your site (see this tutorial for more help).
  4. Also, copy the “Inline code” and go to your WordPress dashboard > Appearances > Widgets and click “+” on the area where you want to show the form > search for the Custom HTML block.
  5. Add the inline code that you copied inside the Custom HTML box.

Note: If you want to use a stacked form (with fields on top of each other, instead of appearing side by side), choose the Inline without image form template:

ConvertKit

Create the form

  1. Login to your ConvertKit account > click Grow in the top menu > select Landing Pages & Forms.
  2. Click on + Create new button > Form > Inline > select ‘Clare’ template.
  3. To add a ‘First name’ field in addition to the ‘Email’ field, click on the “+” sign below the form.
  4. Select “First name” from the Custom field drop-down on the right.
  5. Click on the Publish button > choose HTML > copy the line after <form action=" as highlighted below:

Add the form

  1. Login to your WordPress dashboard > Appearance > Widgets.
  2. Click “+” on the area where you want to show the form > search for the Signup Form block.
  3. When the settings appear, select the ConvertKit platform and add the link you’ve copied in the ‘Form Link‘ field.
  4. To add the First Name field, also check the ‘Show First Name field?‘ option.
  5. Press the Update button on the upper right corner of the page to save the changes.

Mailerlite

  1. Go to your Mailerlite account > Forms > Embedded forms > click on the Create button.
  2. Add a form name > click on Save and continue.
  3. Create a group for your subscribers > Continue.
  4. To add the First/Last Name fields in addition to the Email field, click on the Email field > then click on the Add field button.
  5. Click on Done editing.
  6. Scroll down to Embed form into your website > select HTML code.
  7. Scroll down to <form class="ml-block-form"…> and copy the form action link.

Add the form

  1. Go to your WordPress dashboard > Appearance > Widgets.
  2. Click “+” on the area where you want to show the form > search for the Signup Form block.
  3. When the settings appear, select the MailerLite platform and add the link you’ve copied in the ‘Form Link‘ field.
  4. Also, add the form ID (you’ll find it in the HTML code section in Mailerlite starting width “mlb2-” (copy only the numbers)).
  5. Press the Update button on the upper right corner of the page to save the changes.

Choose Form Style

In the Signup Form widget you can decide if the input fields will be aligned one below another by checking the ‘Show Stacked Form‘ option which is ideal for the sidebar. You can also leave this option unchecked if you want the fields to appear side by side (in the footer, for example).

]]> WordPress: Display Social Icons https://support.jedithemes.com/social-icons/ Sat, 08 Apr 2023 15:08:12 +0000 http://support.jedithemes.com/?p=776 Our themes empower you to effortlessly integrate social icons into specified areas, enhancing your website’s connectivity and engagement. By simply providing the URLs to your various social media profiles, our system seamlessly translates them into visually appealing icons, seamlessly aligning with your website’s aesthetic and functionality. This intuitive feature not only saves you time but also ensures that your online presence remains cohesive and dynamic across platforms, fostering stronger connections with your audience.

How to Display Social Icons

Here are the steps to display social media icons on your website:

  1. From your WordPress dashboard, go to Appearance > Customize > Social Profiles.
  2. Insert the link to your social media profile in the appropriate field.
  3. Click on Publish and the icons have been added.

If you want to change the position, go to Appearance > Customize > Header & Menu. Look for the “Social Icons Location” option & select the menu where you want them to appear. If you want to hide them, choose “None“.

For the social icons in the footer, go to Appearance > Customize > Site Footer. Enable/disable the “Display Social Icons” option.

Add Social Icons in the Sidebar

If you want to add social icons in the sidebar or anywhere in the content area:

  1. From your WordPress dashboard, go to Appearance > Widgets.
  2. Select and expand the widget area where you want them to appear and click on the “+” sign.
  3. Find the Shortcode block and add the following:
[jedithemes-social]

Change social icons colors & style

From your WordPress dashboard, go to Appearance > Fonts & Colors > Social Icons.

Here you can choose between 3 styles (plain, bordered and filled) and 3 shapes (square, rounded and circle). You can also change the colors for the social icons in the menu and sidebar, or other areas where the shortcode has been used.

]]>