Header
Header
Open the Yo!Classifieds Options tab in the wp dashboard. Choose Header Setup. For the Header Type pick Custom Header and then click Save.
Open the Headers section in the Yo!Classifieds Elements tab. Here you can add an unlimited amount of new headers. Simply as that, you can make beautiful headers with Theme Navigation Menu Shortcode.
If you don’t see Edit with the Elementor option, you need to enable it in the Elementor/Settings tab.
In this example, you can see the replica of the Header made with Elementor and Theme Navigation Menu Shortcode.
You can choose a different header for each page. Just pick one that you want from the tab Page Options – Choose Page Header dropdown button.
Take a look at this tutorial to see how easy is to make an amazing header with Yo!Classifieds Theme Navigation Menu Shortcode and Elementor.
Elements Cart Icon and Navigation Avatar will be displayed only to the logged-in user, as well as the chosen icon and link in the tab Logged In in the Yo!Classifieds button element. The Login icon will show only to the unlogged users.
Cart Icon
Guide on how to use Cart Icon shortcode
When inserting the Cart Icon shortcode, an element with a predefined style will show.
The Cart Icon will be displayed only to logged-in users.
To use another icon, switch Use different icon switcher and settings fields will appear. Choose an icon from the Icon Library or upload SVG.
If you leave the default icon, the tab Icon Style will look different then if you choose to use a different icon.
Default Icon
Icon Style tab, Active section for the default icon
Icon Style tab, On hover section for the default icon
Uploaded icon
Icon Style tab for the uploaded icon
Uploaded SVG
Icon Style tab for the uploaded SVG
Badge Style – these are style settings for the Badge that will appear if there is any product in the cart.
Settings for the Badge on hover
Theme Navigation Menu
Guide on how to use Yo!Classifieds Theme Navigation Menu shortcode
With the Theme Navigation Menu Shortcode, you can easily display and style menu items.
Navigation Position – change the alignment of the navigation menu to the left, center, or to the right.
Menu Item Style – in the tab Menu Item Style in the section Style, you can change typography, color, padding, and margin of the menu items.
Submenu – in the tab Submenu in the section Style, you can change the border style, border-radius, padding, and background color of the submenu.
Submenu Item and Submenu Item on Hover– in these sections in the section Style, you can change the typography, color, background color, padding, border-radius, and border style of the submenu items and submenu items on hover.
Button
Guide on how to use Yo!Classifieds Button shortcode
In the Yo!Classifieds Button Shortcode, you can place an icon and link, and style the button as you want.
In the Default tab in the Content section, you could place the link and icon as default values.
If you want a button that will have a different link and icon for the logged in users, you could simply switch the switcher in the Logged In tab in the Content section. Settings fields will appear.
The icon and link that you choose in the Default tab will appear as the default unless you choose different ones for the logged in users in Logged In tab.
In the tab Default in the section Style, there are all styles for the default button. You can play around and easily get a nice looking button. You can change typography, color, background color, border, padding, hover animation, the position of the button, etc.
In the Hover section, you can change the color of the text and background color of the button on hover.
In the tab Logged In in the section Style, there are all styles for the button that will appear if users are logged in. You can change typography, color, background color, border, padding, hover animation, the position of the button, etc.
In the Hover section, you can change the color of the text and background color of the button on hover.
Fields for the styling button for logged in users, in the Logged In tab in the Style section will appear only if the Use different Link switcher is switched to show in the Logged In tab in the Content section.
Navigation Avatar
Guide on how to use Navigation Avatar shortcode
In the Navigation Avatar Shortcode, you can display and style the Avatar element.
In the Avatar Style tab, you can change border-radius, box-shadow, width, and height, as well as the position of the avatar.
The Avatar element will be displayed only to logged-in users.
Navigation Notification
Guide on how to use Navigation Notification shortcode
When inserting the Navigation Notification shortcode, an element with a predefined style will show.
To use another icon, switch Use different icon switcher and settings fields will appear. Choose an icon from the Icon Library or upload SVG.
If you leave the default icon, the tab Icon Style will look different then if you choose to use a different icon.
Default Icon
Icon Style tab for the default icon
Icon Style tab, Active section for the default icon
Icon Style tab, On hover section for the default icon
Uploaded icon
Icon Style tab for the uploaded icon
Uploaded SVG
Icon Style tab for the uploaded SVG
Badge Style – these are style settings for the Badge that will appear if there is any notification.
Settings for the Badge on hover
Settings for the Badge when the icon is active
Notification Message Style – set the style of the notification message box.
Style the title, content, and position image with a couple of clicks.
Style the footer time element,
as well as the footer link.
Sort the link and the time element as you wish.
Compare Icon
Guide on how to use Compare Icon shortcode
When inserting the Compare Icon shortcode, an element with a predefined style will show.
To use another icon, switch Use different icon switcher and settings fields will appear. Choose an icon from the Icon Library or upload SVG.
If you leave the default icon, the tab Icon Style will look different then if you choose to use a different icon.
Default Icon
Icon Style tab for the default icon
Icon Style tab, Active section for the default icon
Icon Style tab, On hover section for the default icon
Uploaded icon
Icon Style tab for the uploaded icon
Uploaded SVG
Icon Style tab for the uploaded SVG
Login Icon
Guide on how to use Login Icon shortcode
When inserting the Login Icon shortcode, an element with a predefined style and link will show.
Login Icon will be displayed only to the unlogged users.
In the Settings tab is displayed input field for the link with a predefine link to the Login page.
To use another icon, switch Use different icon switcher and settings fields will appear. Choose an icon from the Icon Library or upload SVG.
If you leave the default icon, the tab Icon Style will look different then if you choose to use a different icon.
Default Icon
Icon Style tab for the default icon
Icon Style tab, On hover section for the default icon
Uploaded icon
Icon Style tab for the uploaded icon
Uploaded SVG
Icon Style tab for the uploaded SVG
Search Keyword
Guide on how to use Search Keyword shortcode
Search Bar Style
Search Bar Style Fields
Search Button Style
Search Button Style Fields
The button icon can be changed. Simply switch Use different icon Switcher and choose the desired icon. If you leave the default icon, the tab Icon Style will look different then if you choose to use a different icon.
Default Icon
Icon Style tab for the default icon
Uploaded icon
Uploaded SVG
Icon Style tab for the uploaded SVG