Customization – Jedi Help Center https://support.jedithemes.com Theme Documentation Tue, 27 Feb 2024 10:11:00 +0000 en-US hourly 1 https://wordpress.org/?v=6.7 https://support.jedithemes.com/wp-content/uploads/2021/04/jedi-favicon-150x150.png Customization – Jedi Help Center https://support.jedithemes.com 32 32 WordPress: Footer Bar Widget Area https://support.jedithemes.com/footer-bar-widget-area/ Mon, 10 Apr 2023 06:53:39 +0000 http://support.jedithemes.com/?p=808 Menus and set the ‘Display Location’ to Footer […]]]> You can add widgets into the footer bar, which is the area that holds the shop credit.

This can be super useful for adding things like menus or social icons.

Table of Contents

First, you want to create a new menu in Appearance > Menus and set the ‘Display Location’ to Footer Menu. You can learn how to that here.

Add Social Icons

You can display social icons easily by adding links to your profiles as explained here.

Footer Bar Settings

To access the footer settings, go to your WordPress Dashboard > Appearance > Customize > Site Footer. Within the Site Footer settings, you’ll find various options, including the ability to modify the copyright text, remove the shop credit and customize fonts & colors.

]]> WordPress: Add Code to Header and Footer https://support.jedithemes.com/how-to-add-code-to-wordpress-header-and-footer/ Mon, 10 Apr 2023 06:13:12 +0000 http://support.jedithemes.com/?p=804 Often you need to add code to WordPress header and footer when trying to integrate with web services like Google Analytics, Google Search Console, etc. The easiest way to add code to the WordPress header and footer is via a plugin called WPCode:

  1. Login to your WordPress Dashboard and go to Plugins > Add New.
  2. Search for the WPCode – Insert Headers and Footers + Custom Code Snippets plugin > install and activate it
  3. Go to Code Snippets (left column) and select Header & Footer (see the screenshot below).
  4. If you have to insert any code between <head> and </head>, add it to the Header box.
  5. If you have to insert any code just below <body>, add it to the Body box.
  6. If you want to add a code above </body>, add it to the Footer box.

Once you’re done, don’t forget to click the ‘Save Changes‘ button to save your settings.

]]> WordPress: How to Change Fonts https://support.jedithemes.com/how-to-change-fonts/ Sat, 08 Apr 2023 18:36:27 +0000 http://support.jedithemes.com/?p=793 There are a few typography controls, so that you may select different fonts for most of the elements. To change the fonts, navigate to your WordPress dashboard and click on Appearance > Customize > Fonts & Colors.

The font options to choose from are:

  • Font Family – you can choose any Google font family; however, this only allows you to select a font family that is available in the Google Fonts list.
  • Variants – choose the font weight and style.
  • Font Size – change the font size by entering the pixel value inside the box.
  • Text Transform – transform the text to either Capitalize, Uppercase or Lowercase.
  • Line Height – this will reduce or increase the gap between the lines. You can type the numeric pixel value in the box as per your requirement.
  • Letter Spacing – increases or decreases the space between characters in a text.

Note: Even though you may individually setup different elements, please make sure to use two or three font families max in order to keep your website loading fast.

]]> WordPress: How to Change Colors https://support.jedithemes.com/how-to-change-colors/ Sat, 08 Apr 2023 18:01:53 +0000 http://support.jedithemes.com/?p=786 If you want to spice things up a bit and make your website look different, then changing the colors might be a good idea. Leveraging the built-in Customizer, you can easily modify colors both globally, affecting the entire website, and individually, targeting specific page elements. This flexibility allows you to tailor the visual experience to your liking, ensuring your website reflects your unique style and vision.

Note: it’s much easier and faster to change colors using the palette. But if you want to adjust the colors of a few elements, do it individually.

Change Color Palette (Globally)

Go to your WordPress dashboard > Appearance > Customize > Fonts & Colors > Global Palette. Within this section, you have the option to adjust not only the background color from light to dark but also the colors of text and accents to suit your preferences.

Change Colors Individually

To change your site colors individually, simply navigate to Appearance > Customize > Fonts & Colors and click on the location or element you want to change.

All color controls support the live-preview feature, so you may instantly preview changes before saving your configuration.

]]> WordPress: Slider Settings https://support.jedithemes.com/slider-settings/ Sat, 08 Apr 2023 09:14:10 +0000 http://support.jedithemes.com/?p=768 Our Slider allows you to use WordPress posts in your slideshow, as well as insert images to generate slides. You can show or hide slider buttons, change the width, layout, number of slides to scroll and so on.

Adding the Slider

Note: you can use only one the slider per page.

Select & open the page (or go to Appearance > Widgets and select & expand a widget area) where you want to use the slider > find the Shortcode block and add the following:

[jedithemes-slider]

Slider Options

Go to your WordPress dashboard > Appearance > Customize > Featured Slider > Slider Settings.

Here you can choose the slider type:

  • Automatic – it will display your blog posts.
  • Manual – allows you to upload your own images, add text and links.

You can also change the width, layout, how many slides to display, change buttons etc.

Change Fonts & Colors

To change fonts & colors, go to Appearance > Customize > Featured Slider > Fonts & Colors.

]]> WordPress: Navigation Menu Settings https://support.jedithemes.com/navigation-menu-settings/ Sat, 08 Apr 2023 08:16:43 +0000 http://support.jedithemes.com/?p=761 The navigation menu plays a significant role in producing a great user experience. It facilitates visitors’ viewing and access to various parts of your site. Therefore, it’s important that your navigation menu appear and function as you intend. Here’s how to access the navigation menu settings to change the fonts, colors and some other options:

Table of Contents

Header & Navigation Settings

To access the Header & Navigation settings, go to your WordPress dashboard > Appearance > Customize > Header & Menu.

You can make the menu/header sticky, change the width, padding, show social icons or change the mobile navigation layout.

How to Change Fonts & Colors

Go to your WordPress dashboard > Appearance > Customize > Fonts & Colors > Site Header. Note: to access the options for the menu, visit Primary & Secondary Menus, or Left & Right Menus.

]]> WordPress: Change Header & Navigation Layout https://support.jedithemes.com/change-header-navigation-layout/ Fri, 07 Apr 2023 18:08:55 +0000 http://support.jedithemes.com/?p=752 There are a few different ways in which you can display the header and navigation menu on your site. Firstly, your theme will have designated menu areas. The list of available menu locations are displayed at the bottom of the menu screen under the title “Menu Settings” such as:

  1. Primary Menu – appears above the site title.
  2. Secondary Menu – appears below the site title.
  3. Left Menu – appears on the left of the site title.
  4. Right Menu – appears on the right of the site title.
  5. Footer Menu – appears in the site footer.
  6. Mobile Menu – appears on mobile devices.

After setting up the location, you may also want change the look and feel of your header & navigation. Learn more in our Navigation Menu Settings tutorial.

If you’re new to WordPress and need further help, please also follow our tutorial on How to Create a Menu.

]]> WordPress: Site Title, Tagline and Logo https://support.jedithemes.com/site-title-tagline-and-logo/ Fri, 07 Apr 2023 11:54:40 +0000 http://support.jedithemes.com/?p=747 Customize > Site Identity and click on Select logo in the “Logo” section to upload your image. Furthermore, you can adjust the logo size for both desktop & mobile using the Logo Width fields. Some tips Note: Image logos are optional. You may use your […]]]> To add a logo to your website, navigate to Appearance > Customize > Site Identity and click on Select logo in the “Logo” section to upload your image.

Furthermore, you can adjust the logo size for both desktop & mobile using the Logo Width fields.

Some tips

  • To make your logo look crisp on all devices, the image you upload should be twice the size you want it to be; for example, if you set the logo’s width to 400px, the image should be at least 800px or larger.
  • Crop any extra white space around your logo to ensure that it will display the correct dimensions.

Note: Image logos are optional. You may use your site title instead of a logo. Simply remove the logo image and it will automatically fallback to your site title.

Change Title & Tagline font

  1. To change the site title font, go to Appearance > Customize > Fonts & Colors > Global Fonts > Site Title Font.
  2. To change the tagline font, go to Appearance > Customize > Fonts & Colors > Site Title & Tagline.

Change Colors

From your WordPress dashboard, go to Appearance > Customize > Fonts & Colors > Site Title & Tagline.

Upload an image as a background

  1. Go to your WordPress dashboard > Appearance > Customize > Fonts & Colors > Site Header.
  2. Click on Select image under Site Header Background Image.
  3. Below you can adjust background options such as background repeat, position, size and attachment.
]]> WordPress: Change the Content & Sidebar Width https://support.jedithemes.com/how-to-change-the-content-sidebar-width/ Fri, 07 Apr 2023 11:01:19 +0000 http://support.jedithemes.com/?p=737 Our themes include powerful functions to easily change the site layout and adjust the widths of your content and sidebar. All you need to do is go to Appearance > Customize > Site Layout to tweak your layouts and view the changes live.

  • Site Container Width: Your site width (all content).
  • Single Post/Page Width: The area with the content when your left or right sidebar is enabled.
  • Sidebar Width: Your sidebar width.
  • Blog Pages Width: the width of your blog posts container.
  • Archive/Category/Search Page Width: the width of your archive and search results container.

You can use pixels or percentages for the value. There isn’t any max or minimum.

]]> WordPress: Site/Page Layout https://support.jedithemes.com/site-page-layout/ Fri, 07 Apr 2023 08:15:04 +0000 http://support.jedithemes.com/?p=725 You can configure your site layout in Appearance > Customize > Site Layout.

On this location, you will find several layout options including:

  • Right Sidebar
  • Left Sidebar
  • No Sidebar

These options apply to the entire site. If you want to hide the layout on specific pages, check the boxes below them. Some of the other options are:

– Hide sidebar on single posts

This setting is specific to your single posts.

This setting refers to your regular pages.

– Hide sidebar on blog pages

This setting is specific for your blog, archives, search results etc.

Different sidebar layouts for individual pages and posts

For some individual pages or posts, you may want to apply a different layout than your global settings. In this case, you can use the Sidebar Layout setting while editing that page/post.

  1. Go to your WordPress dashboard > Posts (or Pages) on the left.
  2. Edit the post or page.
  3. Click on the Sidebar Layout panel from the right column.
  4. Select Left Sidebar, Right Sidebar or No Sidebar.

Other page templates

  • Blank – removes menu, header and footer and shows only the content you add.
  • Full Width Content – the content spans from right to left and takes the full 100% of the screen’s width.
  • No Sidebar, No Title – removes both the sidebar and the page title.

Note: These can be used only on single pages.

]]>