Featured slider text and arrows

Hi there,

I took a look at educacionmeraki.com and it seems to be set up in the way you described: There’s a single image at the top of each page.

Are you happy with the way your site looks or would you like to add a slider to it? If you can clarify exactly what you’d like to achieve, I can help from there.

Hi Siobhan , thanks I got it sorted in the end. One more thing I would like is to amend the footer – change the background colour and the text colour and put the social media icons in the centre, and on the right side I would like a location map but can not get an api from google – Is there any other way of doing it?

I’m glad you sorted the original question by yourself. ??

One more thing I would like is to amend the footer – change the background colour and the text colour

These changes can be made with some custom CSS.

To add CSS, navigate to Appearance > Customize > Additional CSS. You can copy/paste the following to change the colour of the footer’s background and text:

.footer-widget-area {
    background-color: #663399;
    color: #15b6b8;
}

You can change the value of background-color from #663399 to any hex colour code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of hex colour codes and their corresponding values. Here’s an example of a site that I’ve used before:

https://www.color-hex.com/

Similarly, change the value of color from #15b6b8 to any colour you’d like for the text in the footer.

You’ll also need to use the following to change the links in the footer:

.footer-widget-area a {
    color: #15b6b8;
}

and put the social media icons in the centre

Dara supports a social links menu that will display centred below your site’s footer by default. You can check this out on the theme’s demo site here:

https://darademo.wordpress.com/

The following guidance on setting up a social links menu is specific to WordPress.com, so the dashboard differs slightly to what you see (unless you manage your site through WordPress.com via Jetpack) but the overall steps are the same:

https://en.support.wordpress.com/menus/social-links-menu/

and on the right side I would like a location map but can not get an api from google – Is there any other way of doing it?

The Contact Info widget requires a Google API key, which you should be able to get via the following link:

https://developers.google.com/maps/documentation/embed/get-api-key

If you’re not able to get an API key (and you have Jetpack enabled) you could follow these steps to embed a Google map into a text widget:

https://en.support.wordpress.com/google-maps/

Let me know if the above helps out or if you have any further questions.

Hello,

I have a related question, which is:
Is it possible for me to move the text on the featured image, and/or move the arrows? More important is the text. I would like the text to be in the middle-left of the image instead of the bottom-left, so that it is visible upon opening the page.

Thank you so much! Let me know if I should begin a new thread instead.

Irene

Hey, I answered my own question by googling a bit more and reading some helpful pages.

Wanted to share here for the next soul who is wondering.

What worked for me is:

.featured-posts h2.entry-title {
margin-bottom: 27% !important;
}

Change the 27% to see what works for you.

Thanks!
Irene

Thanks for sharing your solution, Irene!

A note on the use of !important in the CSS you’re using: It’s best to avoid using !important in CSS whenever possible. It’s usually not needed (like here) and it can make it more difficult to troubleshoot your CSS down the road, since !important acts as an override. Generally it’s best to write more specific CSS if you need to, rather than rely on !important to force the code to work.

An alternative to that CSS is here:

.hero-content-wrapper .featured-post {
    bottom: 27%;
}

You can change the value of bottom to your liking in the above snippet.

You can then move the arrows up to match, if you’d like, with the following:

.flex-direction-nav a {
    bottom: 27%;
}

If you have any extra questions around that, please can you start a new thread on this forum? It helps us to ensure that no questions slip through the cracks if they’re kept to separate threads and also prevents the original poster from receiving unnecessary email notifications.

Thanks!

HI siobhan thank you so much for all your help . One last thing – I now have a map and contact details. Is there anyway I can move the contact details or the map over to the right ie. I split the content of the footer and have some of the info on the left of the page footer and some on the right footer

siobhan How do I change the size of the logo and the text underneath the logo?

One last thing – I now have a map and contact details. Is there anyway I can move the contact details or the map over to the right ie. I split the content of the footer and have some of the info on the left of the page footer and some on the right foote

The simplest approach would be for you to do the following:

1. Add the map to a text widget and place it in the theme’s Footer 1 area. It’s possible to embed a Google Map into a text widget using Jetpack’s built-in Google Maps shortcode:

https://jetpack.com/support/shortcode-embeds/

2. Add the contact details to a second text widget and then place it in the theme’s Footer 2 area.

If both widgets are placed into the two separate footer areas, they’ll appear side by side by default.

siobhan How do I change the size of the logo and the text underneath the logo?

You can use the following custom CSS to change the width and height of the logo:

.custom-logo-link {
    max-width: 700px;
}

.custom-logo {
    max-height: 220px;
}

Increase/decrease the value of max-width and max-height to increase/decrease the logo’s width and height. Please note that there may be some loss in quality as the above is not changing the size of the actual image, only the size it appears at.

To then decrease the size of the title, decrease the font-size in the following custom CSS:

.site-title {
    font-size: 30px;
}

Similarly, use the following to decrease the tagline’s font-size:

.site-description {
    font-size: 14px;
}

Hope that’s helpful!