Flatsome

Mega Menu & Custom Dropdown with UX Builder

Posted on June 29, 2023June 29, 2023 by David Smith

If you don’t know how to add a UX Block as a dropdown menu on your Flatsome site, this tutorial will solve your issue.

To add a UX Block to your menu, do the following:

1. Go to Appearance > Menus

2. Select the menu to edit

3. On Menu structure, click on the menu item you want to add it

4. On Design, choose what fits better to your dropdown menu design

5. On UX Block, select the UX Block where you have the dropdown menu available

6. On the right bottom corner, click on Save Menu

And done!

And now, go to your website, hover/click the menu item and see the dropdown menu available there.

In case it doesn’t look like the expected result, try another design on the #4 step above.

That’s all, enjoy it!

How to Upload a Shortcode in Flatsome

Posted on March 1, 2023March 1, 2023 by David Smith

Learn how to add your pre-made shortcode on your website or ecommerce built on Flatsome UX Builder.

Here’s how to upload the copied shortcode in a Product Page built on your Flatsome UX Builder:

As you can see, here’s how to add the shortcode in a product page. Pay attention in every step because you can face some issues during the process if you don’t follow them.

Soon we will add more videos explaining on how to add the shortcode in a simple page, in the UX Block (not for products) and much more.

Feel free to send an email to info@flatzone.cc if you’re not able to do that by yourself.

Done! Enjoy it.

How to Upload CSS in Flatsome

Posted on March 1, 2023March 1, 2023 by David Smith

Learn how to add your pre-made Custom CSS on your website or ecommerce built on Flatsome UX Builder.

Here’s how:

As you can see, here’s how to add the Custom CSS to bring more style to your page built in Flatsome. Pay attention in every step because you can face some issues during the process if you don’t follow them.

Do you know what is CSS?

CSS is the language we use to style a Web page, to sum up, CSS (Cascading Style Sheets) allows you to create great-looking web pages.

If you don’t like your page style at all, CSS is what you will use to make your website more similar to your company’s identity. If you have a lot of expertise in designing a website with CSS, you are more free than a lot of people in this world.

Enjoy this code language because this is what brings more happiness to your customers while they are navigating.

How to Open a Lightbox with Flatsome

Posted on March 1, 2023March 1, 2023 by David Smith

In this tutorial you will learn how to popup a Lightbox after clicking in a link into your page. You need to follow some steps in order to have it done.

Here’s how:

Step 1: Create your own UX Block

In order to make it clearer, you need to understand that the Block you will create will be inserted into the Lightbox window so make sure to create a responsive UX Block to make it more user-friendly.

Go to UX Blocks > Add new > Open UX Builder

Build your own UX Block with the elements you want the visitors and clients to see and after you finish, save it and done!

Paste your lightbox shortcode in a notepad, you will need it in the next steps.

P.s.: The UX Block shortcode I created is block id=”extra-size-chart”

Step 2: Add it into the Flatsome Lightbox shortcode

The Flatsome Theme has your own lightbox shortcode, you don’t need to write a sort of lines to make it happen, that’s the best part of being a Flatsomer.

Now you just need to copy the original shortcode of this page.

Before start doing the next steps, firstly you need to understand what means each part of this code:

id=”test” is the URL parameter of this lightbox, it means that the “link” you will add into your hyperlink is #test. It’s recommended to choose your own id (ex.: id=”size-guide”, id=”exchanges-returns”, etc)
lightbox is the name of the shortcode
width is the size of the windows that will popup in the visitor’s browser.
padding is the distance between the content and the end of the popup window.

After copying and pasting it into your notepad on your computer, you will replace the phrase ADD YOUR UX BLOCK SHORTCODE HERE with the UX Block shortcode you created in the first step.

Step 3: Add shortcode into the page you want

In order to see it working in a proper way, you should add the shortcode you built in the previous step into the page you want. For example, if it’s a product page, you must add it in the last part of the page, before closing the <body> tag or right below of the link, it’s up to you, the most important thing is that this shortcode must be inserted into the same page of the page you want the visitors to see the lightbox.

Step 4: Add hyperlink into the specific word

It’s time to add a link into the word you want the visitors to click in order to open the popup window with this Block content.

How do you do that?

Open the Text Editor, select the word and click on Add link. You will add as a hyperlink exatcly the id you’ve chosen to your lightbox, for example, the ID I’ve chosen for mine one was size-guide so in the link I’ll add #size-guide.

See example of how you need to fill in your shortcode parameters:

id=”size-guide”
width=”1500px”
padding=”20px”
hyperlink must be #size-guide

See how it works: See size guide

Don’t worry if you see the shortcode when you’re adding it into your page, when you publish it the visitors will not see. I recommend you to try it.

Step 5: Publish it and test

After having the work done, it’s time to publish and test.

Hope this tutorial might help you and make your website more friendly and optimized for your customers’ experience.

And done! That’s what you need to do to have your own lightbox in your Product Page and in anywhere.

Flatsome

How to Hide/Customize Elements with CSS

Posted on March 1, 2023March 4, 2023 by David Smith

Sometimes you need to hide certain elements from the WooCommerce Product Page in order to make it more aesthetically pleasing and to address any issues.

Examples of elements include the Add to Cart button, Meta Description, and Tags. For example, you may wish to hide the Tags on the Meta Description and have only the SKU and Categories visible.

This tutorial will teach you exactly how to do that.

However, if you don’t find the elements you need here, feel free to contact us at info@flatzone.cc and we will be more than happy to help you.

Hide elements from Meta Description:

/*HIDE SKU FROM META DESCRIPTION*/

.product_meta span.sku_wrapper {
display: none;
}

/*HIDE CATEGORIES FROM META DESCRIPTION*/

.product_meta span.posted_in {
display: none;
}

/*HIDE TAGS FROM META DESCRIPTION*/

.product_meta span.tagged_as {
display: none;
}

Customize gap below Product Price:

/*Gap After Product Pricing*/.product-price-container p {margin-bottom: 10px; /*Choose the margin you want*/
}

Make Add to Cart Button as Full-width

/*Make Add to Cart Button as Full-width*/

.single_add_to_cart_button {
    display: inline-block;
    width: 100%; /*width = 100% is the same as full*/
}
}

Hide Quantity button only from Single and Variation products

/*Hide quantity button from all single product pages*/
.add-to-cart-container .quantity {
	display: none;
}

/*Hide quantity button from all variation product pages*/
.variations_button .quantity {
	display: none !important;
}

Set a Full Screen Mobile Menu:

/* Mobile Menu Full */
.off-canvas .mobile-sidebar-slide {
	width: 100% !important;
}

.mfp-content {
	width: 100% !important;
}

Flatsome

How to Fix Instagram Feed in Flatsome

Posted on February 28, 2023March 1, 2023 by David Smith

Learn how to add your Instagram Feed on your website or ecommerce built on Flatsome UX Builder.

You’re probably getting the error message Instagram did not return a 200 it means that Instagram is not finding the authentication of your Instagram account inside Flatsome, here’s how to solve this issue:

If you don’t find your Instagram account on the list that Facebook will return to you, bear in mind that your account needs to be setup as an Instagram Business account.

This is how to setup an Instagram Business account.

Done! Enjoy your Instagram feed and increase your sales and customer retention.

Help & Support

Mega Menu & Custom Dropdown with UX Builder

How to Upload a Shortcode in Flatsome

Couldn't find what you need?

Looking for new elements?

Flatsome

Mega Menu & Custom Dropdown with UX Builder

Flatsome

How to Upload a Shortcode in Flatsome

Flatsome

How to Upload CSS in Flatsome

Flatsome

How to Open a Lightbox with Flatsome

Step 1: Create your own UX Block

Step 2: Add it into the Flatsome Lightbox shortcode

Step 3: Add shortcode into the page you want

Step 4: Add hyperlink into the specific word

How do you do that?

💡 ASK A QUESTION

Step 5: Publish it and test

Flatsome

How to Hide/Customize Elements with CSS

Hide elements from Meta Description:

Customize gap below Product Price:

Make Add to Cart Button as Full-width

Hide Quantity button only from Single and Variation products

Set a Full Screen Mobile Menu:

Flatsome

How to Fix Instagram Feed in Flatsome

Help & Support

Couldn't find what you need?

Looking for new elements?

Step 1: Create your own UX Block

Step 2: Add it into the Flatsome Lightbox shortcode

Step 3: Add shortcode into the page you want

Step 4: Add hyperlink into the specific word

How do you do that?

S I Z E C H A R T

💡 ASK A QUESTION

Step 5: Publish it and test

Hide elements from Meta Description:

Customize gap below Product Price:

Make Add to Cart Button as Full-width

Hide Quantity button only from Single and Variation products

Set a Full Screen Mobile Menu:

Register

Login