Static Slider, CTA, Shop icon & More

Hi guys, I have a lot of questions I’d like help with. I’ll go at them one at a time and let’s chip them down.

1. Static slider - I would like to use the existing slider on Sparkling, but only have a single image. That way it acts as a “hero layout” feature something similar to this static page. As you can see, the author is visible and remains so with a call to action “Get Started Here”

I want to create something similar, which I believe is possible. On the demo content, there are slider images that have text on them. I’d like to put an image as a slider that has no text (the image will have text). How is this possible? I also want to make sure (as I’ve had this problem in the past) that new blog posts do not get added to the slider.

2. Call to Action - Under this static slider, I’d like a simple call to action similar to what is on the Sparkling “Demo” page. If you visit that page (here) you will see a “Download Now!” button at the bottom. I’d like to know how to add that on my site AND then link it to a “Start Here” page

Both the static slider and the call to action under it help me to replicate the blog I showed above while still using the Sparkling template (just so you know what I’m going for).

3. Featured images and sidebar images - In the documentation I see the featured images for a single post are 750 x 410 pixels. Is this true? I want to make sure that I have a featured image template so every new post that we create has an image that can go with it.

Also, I notice that on the demo for Sparkling, the featured image creates a sidebar image. Is this automatic? Are there size specs that I need to change or it will automatically pull?

4. Shop icon - As you can see from our site, we also have a “Shop”, but it is through WooCommerce. Right now it is just a custom link to the /shop/ page (done manually). Because that is the case, I’d like to get a grocery cart icon next to it. How do I do this? Is there a better way to integrate Woocommerce with the domain

5. Static header - Last time I asked this I was told that it was going to require custom code. Is that still the case? That doesn’t make much sense because the demo version of Sparkling has the same header feature I’m looking for!

6. Full-width bottom - At the bottom of the Sparkling demo there is a full-width bottom, which is a different color. It has Popular Posts, Categories, and then a colorlib logo and some text. How do I replicate and then customize this space? I’d like to put Popular Posts, have an email opt-in in the middle, and then logo and text on the side.

Please let me know how to get the full-width bottom. This is different than the footer, which I already have a few links in (the same spot where Home, Full-width Page… etc) are in the demo.

7. iTunes social icon - We are going to have a podcast and I’d like the social icon to reflect Apple or iTunes so they can go to download it. Is this possible or is it a custom thing?

Hi @mdent,

I hope you are well today and thank you for your questions.

It would be helpful for others if you create separate topics for each questions.

1. Static slider – I would like to use the existing slider on Sparkling, but only have a single image. That way it acts as a “hero layout” feature something similar to this static page. As you can see, the author is visible and remains so with a call to action “Get Started Here”

I want to create something similar, which I believe is possible. On the demo content, there are slider images that have text on them. I’d like to put an image as a slider that has no text (the image will have text). How is this possible? I also want to make sure (as I’ve had this problem in the past) that new blog posts do not get added to the slider.

You can try achieving this by attaching only one post to the slider category that have featured image then you can hide the slider text by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

.flex-caption {
    display: none;
}
2. Call to Action – Under this static slider, I’d like a simple call to action similar to what is on the Sparkling “Demo” page. If you visit that page (here) you will see a “Download Now!” button at the bottom. I’d like to know how to add that on my site AND then link it to a “Start Here” page

Both the static slider and the call to action under it help me to replicate the blog I showed above while still using the Sparkling template (just so you know what I’m going for).

You can achieve this by configuring the Call to Action settings in the theme options on the following path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Action Button

3. Featured images and sidebar images – In the documentation I see the featured images for a single post are 750 x 410 pixels. Is this true?

Yes it’s true.

Also, I notice that on the demo for Sparkling, the featured image creates a sidebar image. Is this automatic? Are there size specs that I need to change or it will automatically pull?

It’s created automatically.

4. Shop icon – As you can see from our site, we also have a “Shop”, but it is through WooCommerce. Right now it is just a custom link to the /shop/ page (done manually). Because that is the case, I’d like to get a grocery cart icon next to it. How do I do this? Is there a better way to integrate Woocommerce with the domain

You can achieve this by configuring the shop menu item as shown in the attached screenshot that contains the following code in the navigation label field.

<span class="glyphicon glyphicon-shopping-cart"></span> Shop

5. Static header – Last time I asked this I was told that it was going to require custom code. Is that still the case? That doesn’t make much sense because the demo version of Sparkling has the same header feature I’m looking for!

It’s now implemented in the latest version of theme which you can enable by checking the theme option “Sticky Header” on the below path as shown in the second attached screenshot.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Header

6. Full-width bottom – At the bottom of the Sparkling demo there is a full-width bottom, which is a different color. It has Popular Posts, Categories, and then a colorlib logo and some text. How do I replicate and then customize this space? I’d like to put Popular Posts, have an email opt-in in the middle, and then logo and text on the side.

Please let me know how to get the full-width bottom. This is different than the footer, which I already have a few links in (the same spot where Home, Full-width Page… etc) are in the demo.

You can get it by adding the widgets in the footer widget areas in the Widgets screen.

7. iTunes social icon – We are going to have a podcast and I’d like the social icon to reflect Apple or iTunes so they can go to download it. Is this possible or is it a custom thing?

It is custom thing but you can achieve this easily by developing CSS code as described in the following reply.

https://colorlibsupport.com/t/social-icon-xing/

In the sparkling theme you can use the code shared in the above reply by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

Best Regards,
Movin

You can try achieving this by attaching only one post to the slider category that have featured image then you can hide the slider text by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

Great! This worked.

However, if I am trying to create a static “hero layout”, I have to create a new post specifically for this featured image with the Slider category. I do not want this post and it is definitely not the top of the “Popular Posts” as it shows up. Please see what I mean here (specifically side panel and footer widgets prominently displaying this “Welcome - Come Play With Us!” post that I want to be invisible for people to read.

It is custom thing but you can achieve this easily by developing CSS code as described in the following reply.

[Social Icon Xing]

In the sparkling theme you can use the code shared in the above reply by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

Ok, I have tried this with the following information:

I added another Menu item to the Social Links menu (right next to Facebook, Instagram, and YouTube). I entitled it “Apple” and put the link for the podcast (‎Connecting to Apple Podcasts…)

Then I went to the Custom CSS area and inserted the following code:

#social li a[href*="apple.com"] .fa:before, .fa-apple:before { content: "\f179" }

The reason I used this code was because I found it at Font Awesome here (as mentioned in the Xing thread).

However, as you can see on the homepage it is not working.

==========

Finally, how do I remove the “sparking theme by Colorlib Powered by WordPress” from the footer?

Do I have to continually do this upon theme updates? It seems like I’ve done it before and it got re-added.

Thanks

EDIT:

Also, with the slider, it links back to the post. We don’t want it to link to the post. We want it to link to nothing (or at the very least the “Start Here” page). How can I change this?

However, if I am trying to create a static “hero layout”, I have to create a new post specifically for this featured image with the Slider category. I do not want this post and it is definitely not the top of the “Popular Posts” as it shows up. Please see what I mean here (specifically side panel and footer widgets prominently displaying this “Welcome – Come Play With Us!” post that I want to be invisible for people to read.

To achieve this you have to use the pages for the slider instead of posts.

You can achieve this by using the attached child theme of Sparkling theme that contains some custom code to do this.

Unlike posts the pages don’t have category so you have to add ‘slider_page’ custom fields to the pages that you want to display in the slider as shown in the attached screenshot.

Also, with the slider, it links back to the post. We don’t want it to link to the post. We want it to link to nothing (or at the very least the “Start Here” page). How can I change this?

The shared child theme will make it not to link anywhere.

However, as you can see on the homepage it is not working.

Try using the below CSS code.

.social-icons li a[href*="apple.com"] .fa:before, 
.fa-apple:before { content: "\f179" }

Finally, how do I remove the “sparking theme by Colorlib Powered by WordPress” from the footer?

Do I have to continually do this upon theme updates? It seems like I’ve done it before and it got re-added.

The shared child theme will remove it for you and you don’t have to redo this again after theme update as child theme is update proof.

Just want to request you here again as said previously that to help us keep support thread separates could you please create separate thread for your separate question here Sparkling - Colorlib Support Forum instead of replying on your existing thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread for your new questions.

Hi Movin,
can I highjack this thread to ask a question regarding the slider problem?

Ive got the same exact issue. I want a static slider (with a call to action “Start here” as seen on smartpassiveincome.com) that links nowhere.

You provided the solution with a Child Theme. Technical Question: How can I implement that Code into my Child Theme? I was hoping to find some Code in the Child Theme to copy into mine - cant find much.

All in all: A static Slider that links nowhere, with a call to action.

I`m on Activello (iamfasting.de).

Thanks!

Hi @svenirl,

I hope you are well today.

To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/sparkling/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Cheers,
Movin

dear friends i would like to ask to check my websites for the same errors
نقل عفش بجدة
نقل عفش بجدة

@etch2014 As stated above please create new topic for your question.