Jump to content

Creating a gallery with text and button aside. (Mixing Headline and Gallery)

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://fancythatinglewood.com.au/

Hello, 

I like the ‘Headlines’ blocks with the image on one side and some text and button on the other as it’s a great way to highlight a category of product and lead to it very quickly with a button. 
However I’d really like to have a gallery playing automatically (slideshow) instead of having just one image, which would give a better insight with 3-4 pictures playing for that same category. 
if you access the website and scroll down the home page you’ll see a gallery playing the way I want and further down this ‘blue vase’ headline. I’d like this image to be an auto play slideshow gallery. 
Is it possible? 
 

Thanks for your help!

password : FTI452

3B518E77-E228-4906-9B69-771191404067.jpeg

Link to comment
7 minutes ago, VJO said:

Hi Tuan,

thanks for your reply unfortunately your link leads to a page not found. 
Best,

VJO 

Hi Tuan, 

link now works. One question, how would you add this plugin to the website? Thanks. I’ve never done it.

Link to comment
  • Solution
On 6/24/2021 at 6:26 PM, VJO said:

Hi Tuan, 

link now works. One question, how would you add this plugin to the website? Thanks. I’ve never done it.

When you purchase plugin, you will get a txt file with code. Copy code & add to Code Injection > Footer. Then save & reload the site.

Then, you edit the page >> add a block >> you will see Gallery Block.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
On 6/24/2021 at 6:26 PM, VJO said:

Hi Tuan, 

link now works. One question, how would you add this plugin to the website? Thanks. I’ve never done it.

Do you need help on these?

Site URL – https://fancythatinglewood.com.au/?FTI452

1. (Homepage) Equal white box – button height.

https://fancythatinglewood.com.au/?FTI452

fancythatinglewood.com_.au-01-min.png

2. (Mobile – Header) Reduce logo size?

https://fancythatinglewood.com.au/?FTI542

fancythatinglewood.com_.au-03-min.png

3. (Mobile – Shop) Want to change text to 2 rows?

https://fancythatinglewood.com.au/shop/?FTI542

fancythatinglewood.com_.au-04-min.png

4. (Mobile – footer) Make Shipping & Refund in 1 line?

fancythatinglewood.com_.au-05-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
11 hours ago, tuanphan said:

Do you need help on these?

Yes, yes, Yes ! 
thank you for taking the time and spotting these details. 

1. (Homepage) Equal white box – button height. 
Yes please.

2. (Mobile – Header) Reduce logo size?
no, it is fine. 


3. (Mobile – Shop) Want to change text to 2 rows? 
Yes please absolutely. I don’t see many people understand that you’ve got to scroll through. 

4. (Mobile – footer) Make Shipping & Refund in 1 line? 
Yes please. 

 

thank you so much, Tuan, for your assistance so far. 

Link to comment
On 7/11/2021 at 10:01 AM, VJO said:

Yes, yes, Yes ! 
thank you for taking the time and spotting these details. 

1. (Homepage) Equal white box – button height. 
Yes please.

2. (Mobile – Header) Reduce logo size?
no, it is fine. 


3. (Mobile – Shop) Want to change text to 2 rows? 
Yes please absolutely. I don’t see many people understand that you’ve got to scroll through. 

4. (Mobile – footer) Make Shipping & Refund in 1 line? 
Yes please. 

 

thank you so much, Tuan, for your assistance so far. 

Q1. 2. Add to Design > Custom CSS. If it works, let me know. I will continue checking 3, 4.

/* Equal newsletter button */
@media screen and (min-width:992px) {
footer#footer-sections button {
    padding-top: 26px !important;
    padding-bottom: 26px !Important;
}
}
/* Mobile site title */
@media screen and (max-width:767px) {
a#site-title {
    font-size: 19px;
    white-space: nowrap;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
4 hours ago, tuanphan said:

Q1. 2. Add to Design > Custom CSS. If it works, let me know. I will continue checking 3, 4.

/* Equal newsletter button */
@media screen and (min-width:992px) {
footer#footer-sections button {
    padding-top: 26px !important;
    padding-bottom: 26px !Important;
}
}
/* Mobile site title */
@media screen and (max-width:767px) {
a#site-title {
    font-size: 19px;
    white-space: nowrap;
}
}

 

It worked! Thank you

Link to comment

Hey,

this is how it turns out. Any way it can automatically ‘justify’ the text based on screen width ? And adapt font size automatically. 
thanks, 

VJO

7 hours ago, tuanphan said:

Q3. Add to Design > Custom CSS

/* Shop links */
@media screen and (max-width:767px) {
ul.nested-category-children {
    flex-wrap: wrap !important;
}
}

 

588A9F3E-1314-4EBF-A3CE-E820A66EC4AC.jpeg

Link to comment
On 7/15/2021 at 11:19 PM, VJO said:

Hey,

this is how it turns out. Any way it can automatically ‘justify’ the text based on screen width ? And adapt font size automatically. 
thanks, 

VJO

588A9F3E-1314-4EBF-A3CE-E820A66EC4AC.jpeg

add justify-content: center;

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
6 hours ago, tuanphan said:

 

You mean reduce text size + center them?

I’d probably prefer having it justified problem is it’s not doing it when I add justify-content: center;

but anything that makes the display more pleasant/aesthetic is welcome.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.