Digital experiences for all disciplines
New Landing › How can we help? › Atelier › Make Row full screen width + a few other bits
New Landing › How can we help? › Atelier › Make Row full screen width + a few other bits
- This topic has 11 replies, 2 voices, and was last updated 7 years by David Martin – Support.
-
Posted in: Atelier
-
February 21, 2017 at 1:45 pm #314591
Hi guys,
Just a
1. I had my homepage looking exactly as I wanted it with the images going full width and next to each other with no padding, BUT then I had to put some text into a row so that I could show and hide some of the content for different screen sizes. Putting one element of my homepage into a row seems to have completely spoilt the ability for anything to be full width so I now have the horrid white spacing in between my images and to the right and left. How do i make this be full width please?
Is it possible for content to be full width, no white spacing when it is in a row?
http://testsite.thelevelcollective.co.uk/
2. How do I change the text color of this button text so that it stands out more on my dark background (see attached)
3. How on earth do I create these two email sign-up options that looks this good and how do I plug that in with my Mailchimp? See two attached images…
4. I have some buttons on my banner images of the drink bottle and woman with misty mountains on the home page, how can I configure the hover styling please?
Thanks in advance for your help
Cheers
Mark
Attachments:
You must be logged in to view attached files.February 23, 2017 at 2:36 pm #3148511) Set the Row to remove element spacing.
2) Add a custom class to the Row the element resides in, ex:
custom-class
. Then add the below to your custom CSS..custom-class a.sf-button.stroke-to-fill { color: red!important; }
3) Enable it here: Theme Options => Newsletter/Subscribe Bar Options and then read the docs: http://www.swiftideas.com/knowledgebase/replicate-the-newsletter-bar-form/
4) What exactly do you want to change, please be specific?
February 23, 2017 at 6:04 pm #314919Thanks for getting back to me and for your help.
2. Thanks for this, but now I have the opposite problem when the button hovers I can no longer see the text because it is white. Can you give me some code for setting the color of the text in this button when hovered please. (see attached screenshot)
3. thanks you for showing me how to put the email banner at the bottom, but how do I do the other kind of email sign up line like you have in the footer in the attached screen shot please?
Also I have send the email banner to be global but it doesn’t seem to come up on the shop page. Any ideas?
4. I would like the buttons on this banner to change colour when I hover on them
…also, on my homepage ( http://testsite.thelevelcollective.co.uk/ ) when I go to mobile screen, a white gap appears below the intro text (see attached screenshot) even though doesn’t seem to be any blank spacing. Can you tell me how to get rid of this gap please.
Thanks for your time
Attachments:
You must be logged in to view attached files.February 23, 2017 at 6:22 pm #3149252) Yes, you need to set both colors for hover/standard:
.custom-class a.sf-button.stroke-to-fill:hover { color: blue!important; }
3) We simply use Contact Form 7 plugin for this. We add their form shortcode to a text widget for demo purposes.
4) What banner?
5) You can remove that using:
@media only screen and (max-width: 767px) { .home .spb_text_column { margin-bottom: 0; } }
February 23, 2017 at 6:27 pm #3149262. Thank you
3. So with using the contact form plugin and the shortcode to create the email sign up, it this still connected with Mailchimp and if so how?
4. The banner I initially referred to in my question with attached screenshot. Attached again.
5. Thank you
Attachments:
You must be logged in to view attached files.February 23, 2017 at 6:35 pm #3149293) It’s just for demo purposes, we don’t actually do it. You’d need to read the Mailchimp/CF 7 docs: https://connect.mailchimp.com/integrations/mailchimp-for-wordpress
4) It would not be possible as they are within a linked image banner asset.
March 16, 2017 at 6:03 pm #317453Hi folks,
Just following up on my enquiry about formatting the email sign up like the attached screenshot.
I’ve got the Mail chimp WP plugin you recommended and have put my API key in. And I understad how to copy the shortcode and add that to the widget in the foot. I’m just now not sure where I enter the details in Contact form 7 to style it like this screenshot because it looks great…
Attachments:
You must be logged in to view attached files.March 16, 2017 at 6:27 pm #317459You would place the shortcode within a text widget, within one of your Footer widget areas.
Thanks.
March 17, 2017 at 12:31 pm #317510Hi David,
I think we have crossed wires.
As I said, I am aware that I need to paste the short code in the footer widget. But when I do this, it is styled like this attached screenshot 1, but I want it be be styled like screenshot 2. how do i style it like this please? is it using the shortcode from Mailchimp plugin or from Contact forms?
Attachments:
You must be logged in to view attached files.March 17, 2017 at 12:40 pm #317513Hi,
On our demo, we use Contact Form 7 + the minimal form styling. Customizer -> Color – UI Elements -> Form Styling.
March 17, 2017 at 3:58 pm #317541Ok thanks,
not quite got it working with contact form 7, how do i tell it to send it to mailchimp because it doesn’t seem to pull through to the mailchimp database when I subscribe?
Also when formatting it, how can I change the style of the subscribe button because currently the colours clash with my footer. See attached screenshot
March 20, 2017 at 12:59 pm #3177021) The form is just for demo purposes on our demo site (using Contact Form 7), we do not have it linked up on the demo to Mailchimp. You would need to research this integration further:
https://dannyvankooten.com/mailchimp-newsletter-checkbox-contact-form-7/
https://mc4wp.com/kb/connecting-contact-form-7-and-mailchimp-for-wordpress/
https://connect.mailchimp.com/integrations/mailchimp-for-wordpress2) Please add this to your site so I can see this. You’d likely use some simple CSS to weak the button. If you use the Chrome inspector you can view the button classes and alter those as you require.
Thanks.
-
Posted in: Atelier
You must be logged in and have valid license to reply to this topic.