Elementor Elements
Elementor Elements
Guide on how to use custom made theme shortcodes for the Elementor plugin
The Yo!Classifieds theme provides various shortcodes that are available to use through the Elementor Page Builder Plugins. Below you will find a list of all the currently available shortcodes with detailed guides on each option that they’re offering.
List of available shortcodes
If you look on the theme’s demo page and try to recreate it you will have to use the shortcodes but the demo is still not showcasing all available options that they have. In order to learn all that you will need to refer to their documentation.
Business Profile Shortcodes
Guide on how to use Yo!Classifieds Business Profile shortcodes
Add a new page and choose the profile that you wish to serve as Elementor Business Profile Mockup.
Business Store
Guide on how to use Yo!Classifieds Business Store shortcode
Yo!Classifieds Business Store shortcode, once it has been set up will be displayed on your site similar to the screenshot below.
Let’s go over each option that is available in the shortcode.
Breadcrumbs Style
Default – in the Style Section -> Breadcrumbs Style -> Default – set the typography, background color, padding, margin, border, and box-shadow of the Breadcrumbs wrapper.
Filter Dropdown – in the Style Section -> Breadcrumbs Style -> Filter Dropdown – change the icon, icon’s color, and icon’s size, as well as selected item’s typography, label typography, background color (active, default, and on hover) and typography of the dropdown items.
Sidebar Style
Wrapper – in the Style Section -> Sidebar Style -> Wrapper – set the background color, padding, margin, border, and box-shadow of the Sidebar wrapper.
Title – in the Style Section -> Sidebar Style -> Title – change the text, padding, margin, border, and typography of the Sidebar title.
Reset – in the Style Section -> Sidebar Style -> Reset – change the padding, background color (disabled, on hover), border, box-shadow, and icon of the Sidebar Reset button, as well as the text and the typography of the text.
Label – in the Style Section -> Sidebar Style -> Label – change the padding, margin, position, and typography of the Sidebar label.
Select – in the Style Section -> Sidebar Style -> Select – change the background color, border, and typography of the select, as well as the background color (default and on hover), and typography dropdown items.
Checkbox – in the Style Section -> Sidebar Style -> Checkbox – set the structures options, padding, typography, background colors (active and default), box-shadow, and the border (active and default) of the checkbox fields.
Range – in the Style Section -> Sidebar Style -> Range – change the background color and the border of the range fields.
Button – in the Style Section -> Button Style you can change the icon and icon styles, different button text, and styles – background color, border, box-shadow, and typography (hover and default) of the sidebar submit button.
Chosen Filters
Wrapper – in the Style Section -> Chosen Filters -> Wrapper – set the background color, padding, margin, border, and box-shadow of the Chosen Filters wrapper.
Label – in the Style Section -> Chosen Filters -> Label – change the padding, margin, position, and typography of the Chosen Filters label.
Items – in the Style Section -> Chosen Filters -> Items – you can change the icon and icon styles, typography (default and on hover), margin, padding, background color (default and on hover), box-shadow, border of the selected filter’s items.
Listing’s styles
Listings styles – in the Style Section -> Listings Styles – change the style of the listings.
If you choose the Custom Style, you’re going to be able to change the style of the prices, title, bookmarks, images, info icons.
Listing’s layouts
Listings layouts – in the Style Section -> Listings layouts – change the layout of the listings, as well as the column gap (vertical and horizontal).
Taxonomies
Taxonomies – in the Style Section -> Taxonomies – change the background color, typography, text color, icon’s size and color, and the alignment of the taxonomies.
Taxonomies that will be displayed in the listing’s box can be set from Yo!Classifieds Options -> Listings Setup -> Listing Taxonomies.
Pagination
Pagination – in the Style Section -> Pagination – change the background color, typography, border, box-shadow, padding, and margin of the top pagination (default and active). As well as the typography, icon’s size, and color of the previous and next item of the bottom pagination.
Business Reviews
Guide on how to use Yo!Classifieds Business Reviews shortcode
Yo!Classifieds Business Reviews shortcode, once it has been set up will be displayed on your site similar to the screenshot below.
Let’s go over each option that is available in the shortcode.
Wrapper Style – in the Style Section -> Wrapper Style set the background color, padding, margin, border, and box-shadow of the form wrapper.
Content Style – in the Style Section -> Content Style set the typography and the text color, padding, margin, different icon, and icon’s styles of the content.
Footer Style – in the Style Section -> Footer Style set the padding and the margin of the footer. In the Author tab, you can change the width, height, border, padding, margin, and position of the logo. You can set the text color and the typography of the year and the author’s name. In the Icon tab, set the background color, border-radius, width, and height of the icon’s background, as well as change the icon and icon style, and set the position of the element.
Sort the elements – in the Style Section -> Sort the elements sort the footer and the content part as you wish.
Business Contact
Guide on how to use Yo!Classifieds
Business Contact shortcode
Yo!Classifieds Business Reviews shortcode, once it has been set up will be displayed on your site similar to the screenshot below.
Let’s go over each option that is available in the shortcode.
Map Style – in the Style Section -> Map Style choose whether to display or not map. Set the width, height, background color, border-radius, and box-shadow of the map.
Address Style – in the Address Section -> Content Style choose whether to display or not address. Set the typography, margin, and padding of the address.
Tabs
Guide on how to use Yo!Classifieds Tabs shortcodes
To use this shortcode, the first thing that you need to do is to create elements that will be displayed as tab content. You can do that in WP-Admin Dashboard -> Yo!Classifieds Elements -> Global Elements.
After creating elements, you can style them as you wish with Elementor.
Once you created elements, you can add Tabs Yo!Classifieds Shortcode to the page where you want to display it and then choose them as tabs.
Let’s go over each option that is available in the shortcode.
Global Elements Tabs – in the Content Section -> Global Elements Tabs choose the elements you created in the dashboard to display as tabs.
Tabs Wrapper – in the Content Section -> Tabs Wrapper set the background color, border-radius, border, box-shadow, padding, margin, and alignment of the tabs wrapper.
Tabs Style – in the Content Section -> Tabs Style set the typography, text color (default and on hover), background color (default and on hover), border-radius, border, box-shadow, padding, and the margin of the tabs ( default and active).
Tabs Content Wrapper – in the Content Section -> Tabs Content Wrapper set the background color, border-radius, border, box-shadow, padding, and the margin of the tabs wrapper.
Authors
Guide on how to use Yo!Classifieds Authors shortcodes
Author Box
Guide on how to use Yo!Classifieds
Author Box shortcode
Yo!Classifieds Author Box shortcode, once it has been set up will be displayed on your site similar to the screenshot below.
Let’s go over each option that is available in the shortcode.
Display Boxes – in the Content Section -> Display Boxes choose the author boxes to display(promoted, all authors, or handpicked authors).
Wrapper Style – in the Style Section -> Wrapper Style set the background color, padding, margin, border, and box-shadow of the form wrapper.
Image Style – in the Style Section -> Image Style set the width, height, background color, padding, margin, border, and border-radius of the image.
Title Style – in the Style Section -> Title Style set the alignment, typography, background color, padding, margin, and border-radius of the title and the title on hover.
Listing Info Style – in the Style Section -> Listing Info Style you can hide elements. Change the icon, icon color, and icon size, background color, border-radius, and typography.
Author Search
Guide on how to use Yo!Classifieds
Author Search shortcode
Yo!Classifieds Author Search shortcode, once it has been set up will be displayed on your site similar to the screenshot below.
Let’s go over each option that is available in the shortcode.
Letters – in the Style Section -> Letters set the typography, background color, padding, margin, and the border-radius of the letters fields (active, on hover, and default).
Input Field – in the Style Section -> Input Field set the background color, padding, margin, border, and typography of the input fields.
Select Field – in the Style Section -> Select Field set the background color, border, and typography of the select field, then typography and background color (default, active, and on hover) of the dropdown. You can change the typography, margin, and padding of the label, or change the icon and icon color and the size.
Auth
Guide on how to use Yo!Classifieds Auth shortcodes
Register Form
Guide on how to use Yo!Classifieds Register Form shortcode
Yo!Classifieds Register Form shortcode, once it has been set up will be displayed on your site similar to the screenshot below.
Let’s go over each option that is available in the shortcode.
Form Fields – in the Content Section -> Form Fields choose the fields you want to display in your form. You can change icons and icon styles for each field.
Form Wrapper – in the Style Section -> Form Wrapper set the background color, padding, margin, border, and box-shadow of the form wrapper.
Form Fields Labels – in the Style Section -> Form Fields Labels set the padding, margin, typography, and the position of the field label.
Input Fields – in the Style Section -> Input Fields set the background color, padding, margin, border, and typography of the input fields.
Checkbox Fields – in the Style Section -> Checkbox Fields set the structures options, padding, typography, background colors (active and default), box-shadow, and the border (active and default) of the input fields.
Submit Button – in the Style Section -> Submit Button you can change the width, position, margin, and, padding of the button, then you can set different icon and icon styles, different button text, and button styles – background color, border, box-shadow, and typography (hover and default).
Have Account – in the Style Section -> Have Account you can change the background color, padding, margin, and position. Change the text and the text typography or use different link text.
Password Reset Form
Guide on how to use Yo!Classifieds Password Reset Form shortcode
Yo!Classifieds Password Reset Form shortcode, once it has been set up will be displayed on your site similar to the screenshot below.
Let’s go over each option that is available in the shortcode.
Input – in the Style Section -> Input set the background color, padding, margin, typography, and the border of the input field. You can use a different icon and set the icon color, size, and icon position.
Label – in the Style Section -> Label set the padding, margin, typography, and the position of the field label.
Submit Button – in the Style Section -> Submit Button you can change the width, position, margin, and, padding of the button, then you can set different icon and icon styles, different button text, and button styles – background color, border, box-shadow, and typography (hover and default).
Back to Login – in the Style Section -> Back to Login you can change the text and the typography (default and hover) of the text.
Success Message Style – in the Style Section -> Success Message Style you can change the width, position, margin, and, padding of the button, then you can set different icon and icon styles, different text, and the typography of the text.
Error Message Style – in the Style Section -> Error Message Style you can change the width, position, margin, and, padding of the button, then you can set different icon and icon styles, different text, and the typography of the text.
Login Form
Guide on how to use Yo!Classifieds Login Form shortcode
Yo!Classifieds Login Form shortcode, once it has been set up will be displayed on your site similar to the screenshot below.
Let’s go over each option that is available in the shortcode.
Form Fields – in the Content Section -> Form Fields choose the fields you want to display in your form. You can change icons and icon styles for each field.
Form Wrapper – in the Style Section -> Form Wrapper set the background color, padding, margin, border, and box-shadow of the form wrapper.
Form Fields Labels – in the Style Section -> Form Fields Labels set the padding, margin, typography, and the position of the field label.
Input Fields – in the Style Section -> Input Fields set the background color, padding, margin, border, and typography of the input fields.
Checkbox Fields – in the Style Section -> Checkbox Fields set the structures options, padding, typography, background colors (active and default), box-shadow, and the border (active and default) of the checkbox fields.
Forgot Password – in the Style Section -> Forgot Password you can change the text and the typography (default and hover) of the text.
Submit Button – in the Style Section -> Submit Button you can change the width, position, margin, and, padding of the button, then you can set different icon and icon styles, different button text, and button styles – background color, border, box-shadow, and typography (hover and default).
No Account – in the Style Section -> No Account you can change the background color, padding, margin, and position. Change the text and the text typography or use different link text, as well as the typography of the label and value.
Search Page Elements
Guide on how to use Yo!Classifieds Search Page shortcodes
If you want to create a Search Page with Elementor shortcodes, the first thing that you need to do is to make a new page in WP Dashboard -> Pages. After that, choose that page in WP Dashboard -> Yo!Classifieds Options -> Pages Setup -> Default Pages -> Main Search. The same procedure goes for the Detailed Search Page as well.
If want to use default options, choose default pages for the Page: Main Search and Page: Detailed Search may remain empty.
After that, you can edit your page with Edit with the Elementor button and start creating a beautiful Search Page. If you want to return to the WordPress Editor, press the Back to WordPress Editor button.
Single Listing Elements
Guide on how to use Yo!Classifieds Single Listing shortcodes
If you want to create a Single Listing Page with Elementor shortcodes, the first thing that you need to do is to make a new page in WP Dashboard -> Pages. After that, choose that page in WP Dashboard -> Yo!Classifieds Options -> Pages Setup -> Default Pages.
If you want to use the default Single Listing Page, leave Page: Single Listing field empty.
When done, you can return to the page that you made earlier and choose the product that you wish to serve as Elementor Mockup Listing.
If you don’t have any product, please, create one. If you don’t choose a product, Elementor Single Listing Shortcodes won’t work properly. This is needed because Elementor Widgets used on Single Listing Page are dynamic so we need to choose one Listing as a mockup to provide necessary data.
After that, you can edit your page with Edit with the Elementor button and start creating a beautiful Single Listing page.
To view your page, go to the WP Dashboard -> Products and view the product that you selected as an Elementor Mockup Listing.
Banner Featured Categories
Guide on how to use Yo!Classifieds Banner Features Category shortcode
In the Banner Featured Categories Shortcode, you can display and style the Featured Categories.
In the tab Categories Content click on the Add Item button and pick the category you want to display.
Set the label, link, and choose the icon to display.
Banner Featured Categories style
Categories tab contain three section – one where you can style text, one for the Category Box style and one for the On hover action.
Text – color, typography, and position of the terms.
Category Box – width, height, padding, margin, border-radius, and background color of the category box.
On hover – change the color of the text on hover, width, height, background color, and the border of the category box on hover.
Categories Icon – change the size and the color of the icon and icon on hover.
Banner Search Form
Guide on how to use Yo!Classifieds Banner Search Form shortcode
If you want to use Home Banner Search Form Shortcode, the first thing you need to do is to remove the default banner.
Go to the WordPress admin dashboard and click on the Yo!Classifieds Options in the sidebar. Select the Hero Setup and set the Disable Hero Section on the On.
Save the changes and, that’s it. You removed the default banner successfully.
In the next video, you can see how easy is to recreate the default or make a new banner search form.
If you want to restyle your banner search form, you can do that easily. Take a look at the short tutorial video below.
Search fields are created in Fields Builder Section.
Yo!Classifieds Title
Guide on how to use Yo!Classifieds Title shortcode
Yo!Classifieds Title shortcode, once it has been set up will be displayed on your site similar to the screenshot below.
Yo!Classifieds Title shortcode display
Let’s go over each option that is available in the shortcode.
Heading – This option is used to change the heading of the title shortcode.
Different Shadow Text – Shadow text is the text that is displayed as the big shadowed version of the heading you typed and by enabling this option you can type something different instead of using the same text that is typed in the Heading field.
Shadow Text Color Style – This option is enabling you to choose different colors for the shadow variation of the text instead of the default one.
Subheading – This is the text that is displayed above the heading.
Enable Link – By enabling these options you are enabling the link that is displayed at the right part of the shortcode.
Link Text – If you enable the link then you will need to provide the text that will be displayed to users.
Link URL – If you enable the link then you will need to provide a link to a page where you wish to take users after clicking on it.
Lisifnity Ads
Guide on how to use Yo!Classifieds Ads shortcode
This shortcode is used to set up and displayed the ads feed anywhere on your site. Ultimately you will be allowed to create something like the screenshot below with it.
Yo!Classifieds Ads shortcode display
Let’s go over each option and see what we can do with it. As you may have already noticed there are two available tabs in the settings. Product Feeds and Taxonomies
Product Feeds
The first thing that you need to do in the product feeds is to create a tab that will load many different feed options for you to adjust to your liking. You can create as many ad tabs as you like.
If you create only a single tab then on the frontend red part highlighted below will not be visible.
You can create as many tabs as you wish and apply an independent set of settings to each one of them.
Tab Title – In this field, you need to type the title of the tab that will be displayed on the frontend. In order for this to be visible, you need to have at least 2 or more tabs created.
Product Type – In this option you can choose the categories from which the ads will be loaded. These are the categories that you created through Fields Builder. Leave empty to load ads from every available category. If you select only specific options related to the chosen ad categories that you will have a new set of options that you can choose to adjust.
Choosing from the taxonomy list – This set of taxonomy options will become available if you manually set the product types that will become visible. If you do so, then all available taxonomies for those categories that you have created from the Fields Builder will become available for adjusting. For example, if you decided to list products from the Car category then in one of these options you will be able to list only Diesel cars for example, if you have created that taxonomy.
Number of products to show – Here you can limit the number of ads that will be displayed in the tab feed.
Product – With this option you can manually choose specific ads that you wish to display in the tab feed.
Promoted Products – Enabling this option will make sure that the ads that have Home Ads promotion purchased are displayed as the first set of results. Disabling this option will enable you to choose the sorting and ordering of the products manually.
Products Order – This option is available only if the Promoted Products option is disabled. You can select the way the ads will be ordered in the feed by choosing one of the following options: Ascending or Descending.
Products Sorting – This option is available only if the Promoted Products option is disabled. You can select the way the ads will be ordered in the feed by choosing one of the following options: Date or name.
Taxonomies
In this tab, you will have listed all categories that you have created from the Fields Builder and there you will be able to choose what taxonomies will be displayed in the ad box on the frontend from that taxonomy. Once you set it up it will display the taxonomies like it is shown in the screenshot below.
Yo!Classifieds Ads Taxonomies display in the ad box
If you add an icon for taxonomy in the Fields Builder then the icon will be displayed instead of the taxonomy name as it is shown in the picture above.
Custom Style
Guide on how to use Custom Style
If you think custom style is a better solution for your site, check our Custom Style section.
Custom Style
To be able to custom style elements, you need to choose the Custom Style from the Style dropdown button.
With this style, you can create a variety of beautiful elements. You can take a look at some of our examples below.
Styling elements
When you first insert an element and select Custom Style, a section with default values will appear.
After choosing a suitable layout, we can start styling content.
Example 1
With a couple of clicks, you can create this marvelous look.
Set a border-radius of the box.
Position the image to the left and set the height.
Set the border of the image. That’s it! You have a brand new ad style.
Yo!Classifieds Taxonomies
Guide on how to use Yo!Classifieds Taxonomies shortcode
You can use this shortcode to display any taxonomy that you have created using the Fields Builder. While setting up the shortcode you will find a few options that will allow you to adjust the way it is being displayed and once you’re done it should look similar to the screenshot below.
Display of the Yo!Classifieds Taxonomies shortcode
Let’s go through all of the available options.
Taxonomies Feed
Taxonomies Feed is a section for managing taxonomies and terms.
Taxonomy – Here you can choose the taxonomy that you wish to display from the ones you created in the Fields Builder. You can choose to include as many taxonomies as you wish.
Hide Empty – This field enables you to choose if you wish to display taxonomies that do not have any ad attached to them. So if the taxonomy is empty with ads then it will or will not be displayed depending on this setting.
Number of Terms – In this option, you can set up the maximum number of terms that will be displayed to a user.
Handpick Terms – Here you can manually pick and choose terms from the selected taxonomies that must be displayed. So if the taxonomy is Cities, for example, then you will be able to choose Miami, Los Angeles manually along with any other city that you have created.
Taxonomies Types Style – choose the style type, set the images overlay, display products count.
Box Style – complete the look of the box adding box-shadow, border-radius, and changing the background color.
Content Style – set the color and size of the taxonomies and number of terms. Also, you can set background-color and border-radius of the box of the number of terms.
Content Positioning – set the position of the image, taxonomy term, and the number of terms.
Examples
Insert an element and pick taxonomies and the number of terms that you want to display. An element with a predefined style will show. In a few easy steps, you can create a variety of beautiful elements.
Example 1
To achieve this look you got to choose Style 1 from the Style dropdown button in the Taxonomies Types Style section.
In the section Box Style, choose to display background overlay and overlay color.
Then, enlarge border-radius.
Change the color and size of the taxonomy and the number of terms.
And nothing more! You got a stunning component.
Example 2
Choose Style 2 from the Style dropdown button in the Taxonomies Types Style section.
Change the background color and the border-radius.
Example 3
Choose Style 3 from the Style dropdown button in the Taxonomies Types Style section.
Change the size of the border-radius in the Box Style Section.
Adjust the padding in the Taxonomy section and change background-color and border-radius in the Number of Terms section.
Example 4
Choose Style 4 from the Style dropdown button in the Taxonomies Types Style section.
Set the number of the columns and columns gap.
Change the size of the text and hide the number of terms.
Yo!Classifieds Posts
Guide on how to use Yo!Classifieds Posts shortcode
Yo!Classifieds Posts is a simple shortcode that is allowing you to post your blog posts anywhere on the site. It has a few sets of options that you can manage and in the end, it will look like the below screenshot on the frontend.
Display of the Yo!Classifieds Posts shortcode on the frontend
Let’s see the options that are available for this shortcode.
The number of posts – With this option, you can set the maximum number of posts that will be displayed.
Handpick posts – Here you can handpick an unlimited amount of posts that you wish to display to a user.
Posts Order – Choose the ordering of the posts between Ascending and Descending.
Posts Sorting – Choose the way the posts will be sorted between Date or Name.
Examples
Insert an element and enter the number of posts to display. Element with predefined style will show. In a few easy steps, you can create a variety of beautiful elements.
Example 1
Set the layout of the chosen posts in the section Layout.
Set the position of the image to the left in the section Image Style. Change the height and width of the image.
Hide the Post Category and rearrange title, content, and author section as you wish. In this example, we moved all elements just a little bit down.
That’s it! We got the desired look.
Yo!Classifieds Price Packages
Guide on how to use Yo!Classifieds Price Packages shortcode
With this shortcode, you can display pricing packages that you have created anywhere on the site. Once you’re done they will be displayed in a way similar to the below screenshot.
Display of the Yo!Classifieds Price Packages shortcode
Let’s go over the options available for this shortcode and see how you can create something similar for your installation.
Fist of all you need to make sure that you have at least one package created. In order to find out how to do just that please see Yo!Classifieds Price Packages.
Number of packages to show – This option allows you to set the limit to the number of the price packages that can be displayed in the shortcode.
Products Order – Choose the order of the price packages between Ascending or Descending
Products Sorting – Choose the way the pricing packages are being sorted between Price, Date, and Name.
Handpick Price Packages – With this option, you can manually pick and choose the pricing packages that you wish to display to a user.
Packages Style – change the typography, alignment, color of the title, price, content, and button, and its padding and margin values of the standard.
Recommended Packages Style – change the typography, alignment, color of the title, price, content, and button, and its padding and margin values of the recommended package.
Footnotes Style – change the color and the size of the footnote and footnote’s icon.
Examples
Insert an element and choose the number of packages to display. Element with predefined style will show. In a few easy steps, you can create a variety of beautiful elements.
Change the size and the color of the title in the Title tab in the Packages Style section.
Change the background color of the button in the Button tab in the Packages Style section.
Set the background color of the Price Box in the Price tab in the Recommended Package section.
Change the background color of the button in the Button tab in the Recommended Package section,
as well as the background color of the button on hover.
In the end, change the color and size of the footnote icon in the Footnotes Style section.
Yo!Classifieds Partners
Guide on how to use Yo!Classifieds Partners shortcode
With this shortcode, you can create the partners section just like the one in our demo anywhere on the site. It has three different sections available for the changes. Once you’re done you’ll get results similar to the screenshot below.
Display of the Yo!Classifieds Partners shortcode
Let’s go over each section and their set of settings.
Promo Settings
Promo Background Image – With this option you can select the background image that will be displayed on the left side of the section.
Promo Background Image Height – With this option you can manually set the height of the promo background image. Otherwise, the dynamic value will be used.
Promo Link – If you wish to enable users to click on the background image then you can add the link that they will be lead to here.
Partners Settings
Use Masonry or Grid – Here you can choose the way you wish to display partners boxes in the right part of the section. Choose between Masonry and Grid.
Partners – You can add as many partner boxes as you wish. Once you add a new tab you will get options to add the Name, Image, and Link of the partner.
Title
Options for the title are the same as for the independent title shortcode. See Yo!Classifieds Title.
Yo!Classifieds Profiles
Guide on how to use Yo!Classifieds Profiles shortcode
With this shortcode, you can display Business Profiles of the registered authors anywhere on the site. Once you’re done with that the shortcode will be displayed like in the screenshot below.
Display of the Yo!Classifieds Profiles shortcode
Let’s see the available settings for the shortcode.
Number of Profiles to Show – With this option, you can limit the number of profiles that will be displayed in the shortcode.
Handpick posts – With this option, you can manually choose the profiles that you wish to display in the shortcode.
Posts Order – Choose the ordering of the posts between Ascending and Descending.
Posts Sorting – Choose the way the posts will be sorted between Date or Name.
Profile’s Type Style – choose the style type between Style 1 and Style 2, set the number of columns, and columns gap.
Template Box Style – complete the look of the box adding box-shadow, border-radius, and changing the background color.
Profile Footer and Profile Header Style – depending on the style you choose (Style 1 or Style 2), you will see the Footer or Header Style section. There you can change the style of the author’s information and rating icon. Set the colors, position, and size of the elements.
Title and Text Sections – change the typography, alignment, color of the title, and its padding and margin value.
Examples
Insert an element and enter the number of profiles to display. Element with predefined style will show. In a few easy steps, you can create a variety of beautiful elements.
Example 1
Select Style 1 from the Template Style dropdown button in the Style section.
In the Profile Header Style section, in the Rating Icon tab set the background color, as well as the color and the size of the icon.
After you enable positioning, sliders for placing icon will appear. Place icon on the top left corner of the element.
In the same section, in the Logo tab set the position of the logo to the top right corner.
In the end, we need to style a link. In the section Link, change the color of the text, as well as, the color and the size of the link icon.
Example 2
Select Style 2 from the Template Style dropdown button in the Style section.
Change the border-radius of the profile’s box in the section Box Settings.
Change the typography, color, and alignment of the title in the Title section.
Set color and alignment of the text in the Text section.
Change the background color, the color, and the size of the Icon in the Rating Icon tab in the Profile Footer Style section.
In the end, change the color of the link text and the link icon in the Link tab.
Yo!Classifieds How It Works
Guide on how to use LIsfinity How It Works shortcode
This shortcode is used to display the section just like the one in our demo that is showing How It Works section, hence the name. It will look similar to the screenshot below.
Display of the How It Works Shortcode
Let’s see what kind of options we have for this shortcode.
Display Style – In this option, we can choose the way how it works boxes will be displayed. Cascade option will display the boxes like in the screenshot above while the Grid option will display them in line.
Tabs – In order to create a new how it works box you need to click on the + Add Item button and then you will find these options.
Item Background Color – With this option, we’re choosing the background color of the box.
Image – With this option, we’re setting up the image at the top part of the box.
Title – With this option, we’re setting up the title that will be displayed below the image.
Title Color – With this option, we’re choosing the color of the title text.
Description – With this option, we’re setting up the description for the box.
Description Color – With this option, we’re choosing the color of the description text.
Display Item Count – When enabled then the order number of the box will be displayed at the top left part of how it works box.
Count Number Color – This option enables us to choose the color of the box.
Yo!Classifieds Testimonials
Guide on how to use Yo!Classifieds Testimonials shortcode
This shortcode is used to display the user testimonials on the site. After you’re done setting it up it will be displayed like it is shown on the screenshot below.
Display of the Yo!Classifieds Testimonials shortcode on the frontend
Testimonials Rows – With this option, you can choose how many rows of testimonials you wish to display. Next to each select option is displayed how many testimonials minimally you should have on the site in order for it to work great and look perfectly balanced.
Testimonial Characters Limit – Limit the number of characters that will be displayed in the testimonial boxes.
Template Box Style – complete the look of the box adding box-shadow, border-radius, and changing the background color.
Content Style – change the typography of the content, the color of the text, and its padding and margin value.
Footer Style – there you can change the style of the author’s information and rating icon. Set the colors, position, and size of the elements.
Examples
Insert an element and choose Category Types to display. Element with predefined style will show.
Change the padding and the border-radius of the template box in the Template Box Style section.
Set the padding of the content in the Content Style section.
Set the size and the position of the logo in the Author tab in the Footer Style section.
Change the position of the text in the same tab.
Set the position of the icon in the Icon tab in the Footer Style section.
Yo!Classifieds Category Types
Guide on how to use Yo!Classifieds Category Types shortcode
This option allows you to display Category Types that you created through Fields Builder anywhere on the site. If you’re unsure how to create a different category then please head to Fields Builder section.
When you’re done with setting up the shortcode the result will look similar to the screenshot below.
Display of the Category Types shortcode on the frontend
Let’s go over each available option for the category types shortcode.
Category Types Feed
Template – You can choose how the taxonomies will be displayed between Carousel and Grid.
Category Types – In this select, you can choose the specific category types that you wish to include in the display.
Category Taxonomies – This set of taxonomies for each available category type allows you to choose just the single taxonomy from which the terms would be displayed as a list of tags below the category name. So if, for example, for the Car category you choose to display only Makes taxonomies it would display Alfa Romeo, BMW, Citroen, etc. instead of a list of available taxonomies.
Category Types Style
Images Overlay – With this option you can set up the desired overlay that will be displayed across the boxes in order to beautify them and match the overall look and feel of the site.
Examples
Insert an element and choose Category Types to display. Element with predefined style will show.
Example 1
Set the border-radius in the Category Box Style section.
Change the font size of the text in the Category Text Style section. Change background color, position, and border-radius in the same section.
Change the background color and the size of the product count, as well as the border-radius of the count box.
