[Support request] How to made changes on Home Page

Home Forums Support [Support request] How to made changes on Home Page

Home Forums Support How to made changes on Home Page

Viewing 15 posts - 31 through 45 (of 46 total)
  • Author
    Posts
  • #2375102
    Youssef

    Hi Fernando ,

    Hope all going well.
    Many thanks for the links πŸ™‚ Yeah i have created an account on mailchimp
    On the footer i can manage 5 widgets
    Inside the widget the Main idea is to grab Mailchimp code and paste it in a regular text widget.

    Sincerely i do not know which part of the code to insert.
    Could you help please ?

    Regards
    Youssef

    #2375129
    Youssef

    Hello Fernando and Team support

    I am using :
    – Generate press Version: 3.1.3
    – GP Premium Version: 2.1.2
    – Template : prime

    Appearance > customize > layout > footer > Footer Widgets > I chosse 4
    Now when i

    Appearance > Widgets> Footerwidget 1 > I have added the headline “suscribe now ”
    I click to add a block
    I choose code πŸ™‚
    what should I type ; I m realy …. not finding the right word

    By reading topics on Generate press forum this code is the one that i want
    https://generatepress.com/forums/topic/help-adjusting-email-newsletter/

    when i pass it , it appears the same

    .mc4wp-form-fields,
    .mc4wp-form-fields input[type=”email”],
    .mc4wp-form-fields input[type=”submit”] {
    border-radius: 50px;
    }
    .mc4wp-form-fields,
    .mc4wp-form-fields input[type=”email”] {
    background-color: #fff;
    }

    .mc4wp-form-fields {
    padding: 8px;
    display: flex;
    max-width: 600px;
    margin: 10px auto;

    }
    .mc4wp-form-fields input[type=”email”] {
    flex: 1;
    border: 0;
    }


    @media
    (max-width: 500px) {
    .mc4wp-form-fields {
    flex-wrap: wrap;
    }
    .mc4wp-form-fields input[type=”submit”] {
    flex: 1;
    }
    .mc4wp-form-fields {
    border-radius: 30px;
    }
    }

    Means that there is something i’am missing
    any help most welcome πŸ™‚

    I am not a developer nor a coder but just someone who is trying to make his site successful
    I rely on your kind support to achieve my own challenge

    Many thanks in advance
    Youssef

    #2375637
    Youssef

    By searching on google and reading topics
    I have to add HTML code , πŸ™‚
    That’s fine but Mailchaimp code is not so beauty

    Could you help me to modifiy the mailchimp code and have something beautiful
    similar as described on this topic
    Please i do not know where to make changes

    Topic : https://generatepress.com/forums/topic/help-adjusting-email-newsletter/

    Code I want to implement :

    .mc4wp-form-fields,
    .mc4wp-form-fields input[type=”email”],
    .mc4wp-form-fields input[type=”submit”] {
    border-radius: 50px;
    }
    .mc4wp-form-fields,
    .mc4wp-form-fields input[type=”email”] {
    background-color: #fff;
    }

    .mc4wp-form-fields {
    padding: 8px;
    display: flex;
    max-width: 600px;
    margin: 10px auto;

    }
    .mc4wp-form-fields input[type=”email”] {
    flex: 1;
    border: 0;
    }


    @media
    (max-width: 500px) {
    .mc4wp-form-fields {
    flex-wrap: wrap;
    }
    .mc4wp-form-fields input[type=”submit”] {
    flex: 1;
    }
    .mc4wp-form-fields {
    border-radius: 30px;
    }
    }

    MailChimp Code :

    <!– Begin Mailchimp Signup Form –>
    <link href=”//cdn-images.mailchimp.com/embedcode/classic-071822.css” rel=”stylesheet” type=”text/css”>
    <style type=”text/css”>
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:600px;}
    /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
    We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
    </style>

    <form action=”https://.us17.list-manage.com/subscribe/post?u=782dea04db6aee96106a0a400&id=0ccce1d2ab&f_id=00e64be0f0&#8243; method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” class=”validate” target=”_blank” novalidate>

    <h2>Subscribe</h2>

    <span class=”asterisk”>*</span> indicates required
    <label for=”mce-EMAIL”>Email Address <span class=”asterisk”>*</span>
    </label>
    <input type=”email” value=”” name=”EMAIL” class=”required email” id=”mce-EMAIL” required>
    <span id=”mce-EMAIL-HELPERTEXT” class=”helper_text”></span>

    <!– real people should not fill this in and expect good things – do not remove this or risk form bot signups–>

    <input type=”text” name=”b_782dea04db6aee96106a0a400_0ccce1d2ab” tabindex=”-1″ value=””>
    <input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe” class=”button”>
    <p class=”brandingLogo”></p>

    </form>

    <script type=’text/javascript’ src=’//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js’></script><script type=’text/javascript’>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]=’EMAIL’;ftypes[0]=’email’;fnames[1]=’FNAME’;ftypes[1]=’text’;fnames[2]=’LNAME’;ftypes[2]=’text’;fnames[3]=’ADDRESS’;ftypes[3]=’address’;fnames[4]=’PHONE’;ftypes[4]=’phone’;fnames[5]=’BIRTHDAY’;ftypes[5]=’birthday’;}(jQuery));var $mcj = jQuery.noConflict(true);</script>
    <!–End mc_embed_signup–>

    #2375682
    Fernando
    Customer Support

    I see. For reference, can you provide the link to the site in question? Can you also point us to the specific location where you’ve added the form?

    Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    #2376835
    Youssef

    Hello Fernando

    Thank you so much for your assistance, I am struggling to meet my own challenge.
    well the hope is to have : Would like to have

    What I have right now is :

    Could you please correct my code , to have something beautiful as https://i.ibb.co/k2B75Bj/loi.png

    Code HTML , which is inside footer Widget 1

    <p><!– Begin MailChimp Signup Form –></p>

    <form action=”https://youssefinc.us17.list-manage.com/subscribe/post?u=782dea04db6aee96106a0a400&id=0ccce1d2ab&f_id=00e64be0f0&#8243; method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” class=”validate” target=”_blank”>
    <p> <input type=”email” size=”30″ value=”Enter your email” name=”EMAIL” class=”required email” id=”mce-EMAIL” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;”></p>

    <p></p>

    <input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe” class=”button”>

    <p></p></form>

    <p><!–End mc_embed_signup–></p>

    Code CSS : From a topic on forum generatepress , it’s recommended to use plugin : simplecss
    I have put the below code

    .mc4wp-form-fields,
    .mc4wp-form-fields input[type=”email”],
    .mc4wp-form-fields input[type=”submit”] {
    border-radius: 50px;
    }
    .mc4wp-form-fields,
    .mc4wp-form-fields input[type=”email”] {
    background-color: #fff;
    }

    .mc4wp-form-fields {
    padding: 8px;
    display: flex;
    max-width: 600px;
    margin: 10px auto;

    }
    .mc4wp-form-fields input[type=”email”] {
    flex: 1;
    border: 0;
    }


    @media
    (max-width: 500px) {
    .mc4wp-form-fields {
    flex-wrap: wrap;
    }
    .mc4wp-form-fields input[type=”submit”] {
    flex: 1;
    }
    .mc4wp-form-fields {
    border-radius: 30px;
    }
    }

    #2376837
    Youssef

    #2376886
    Fernando
    Customer Support

    I’m not seeing the screenshot. To clarify, is this the form you’re referring to?: https://share.getcloudapp.com/ApuDPkAO

    If so, try adding this in Appearance > Customize > Additional CSS:

    .site-footer form#mc-embedded-subscribe-form {
        display: flex;
    }
    
    .site-footer div#optin {
        border-radius: 20px;
        background-color: #fff;
        overflow: hidden;
        padding: 5px;
    }
    
    .site-footer div#optin p {
        margin-bottom: 0;
    }
    
    .site-footer div#optin input[type="email"] {
        background-color:transparent;
        color: #000;
        border: none;
    }
    
    .site-footer div#optin input[type="submit"] {
        background-color: #ff0000;
        color: #fff;
        border-radius: 20px;
    }

    If not, please provide the link to the page where we can see the form.

    #2381419
    Youssef

    Hello Fernando

    You rock !!
    On desktop it’s appear so fine
    but on mobile not
    how cn we adjust it please ?

    Regards
    YOussef

    #2381437
    David
    Staff
    Customer Support

    Change this CSS:

    
    .site-footer div#optin p {
        margin-bottom: 0;
    }

    to:

    
    .site-footer div#optin p {
        margin-bottom: 0;
        flex: 1;
    }
    #2381576
    Youssef

    Hello David

    nope πŸ™ not work

    regards
    Youssef

    #2381580
    Youssef

    this is the code that i have

    .site-footer form#mc-embedded-subscribe-form {
    display: flex;
    }

    .site-footer div#optin {
    border-radius: 20px;
    background-color: #fff;
    overflow: hidden;
    padding: 5px;
    }

    .site-footer div#optin p {
    margin-bottom: 0;
    flex: 1;
    }

    .site-footer div#optin input[type=”email”] {
    background-color:transparent;
    color: #000;
    border: none;
    }

    .site-footer div#optin input[type=”submit”] {
    background-color: #e9772e;
    color: #fff;
    border-radius: 20px;
    }

    #2382772
    David
    Staff
    Customer Support

    Try this instead:

    
    #optin form {
        display: flex;
        padding: 4px 10px 4px 15px;
        background-color: #fff;
        border-radius: 30px;
    }
    #optin form * {
        margin-bottom: 0;
    }
    #optin form input.email {
        background-color: transparent;
        border: 0;
    }
    #optin form input.button {
        border-radius: 30px;
    }
    #optin form .clear {
        margin-left: auto;
    }
    @media(max-width: 500px) {
        #optin form {
            flex-wrap: wrap;
        }
        #optin form p, #optin form .clear {
            flex: 1 0 100%;
        }
        #optin form input.email,
        #optin form input.button {
            width: 100%;
            text-align: center;
        }
        #optin form input.button {
            border-radius: 0 0 30px 30px;
        }
    }
    #2386258
    Youssef

    Thank you i will try and update

    #2387279
    David
    Staff
    Customer Support
    #2395579
    Youssef

    Hello ,
    things are not easy to do
    as I am neither a coder nor a developer, I have done a complete reset of my entire site.
    I start from the beginning, I rely on this site: https://beaverhero.com/prime-template-generatepress/
    I will not throw away the sponge
    I’ll box with this code until I have my e-commerce online
    if you have any tips, anything that can help me to modify the template premium πŸ™‚
    I am interested, my goal is traced I want to succeed
    thank you for any support
    With this code the news letter is so big

    #optin form {
    display: flex;
    padding: 4px 10px 4px 15px;
    background-color: #fff;
    border-radius: 30px;
    }
    #optin form * {
    margin-bottom: 0;
    }
    #optin form input.email {
    background-color: transparent;
    border: 0;
    }
    #optin form input.button {
    border-radius: 30px;
    }
    #optin form .clear {
    margin-left: auto;
    }

    @media
    (max-width: 500px) {
    #optin form {
    flex-wrap: wrap;
    }
    #optin form p, #optin form .clear {
    flex: 1 0 100%;
    }
    #optin form input.email,
    #optin form input.button {
    width: 100%;
    text-align: center;
    }
    #optin form input.button {
    border-radius: 0 0 30px 30px;
    }
    }

Viewing 15 posts - 31 through 45 (of 46 total)
  • You must be logged in to reply to this topic.