HTML Slide HTML e Token do Insta

Sha Capell · 5 de março de 2019

Olá!

Alguém poderia me ajudar a tirar esse slide e colocar uma imagem de fundo com um texto flutuante por cima com link?

https://www.babadeanimais.net/

E colocar uma imagem de fundo, atrás do título do site.

.owl-backSlide-out{-webkit-animation:backSlideOut 1s both ease;-moz-animation:backSlideOut 1s both ease;animation:backSlideOut 1s both ease}
.owl-backSlide-in{-webkit-animation:backSlideIn 1s both ease;-moz-animation:backSlideIn 1s both ease;animation:backSlideIn 1s both ease}



@-webkit-keyframes backSlideOut {
25%{opacity:.5;-webkit-transform:translateZ(-500px)}
75%{opacity:.5;-webkit-transform:translateZ(-500px) translateX(-200%)}
100%{opacity:.5;-webkit-transform:translateZ(-500px) translateX(-200%)}
}
@-moz-keyframes backSlideOut {
25%{opacity:.5;-moz-transform:translateZ(-500px)}
75%{opacity:.5;-moz-transform:translateZ(-500px) translateX(-200%)}
100%{opacity:.5;-moz-transform:translateZ(-500px) translateX(-200%)}
}
@keyframes backSlideOut {
25%{opacity:.5;transform:translateZ(-500px)}
75%{opacity:.5;transform:translateZ(-500px) translateX(-200%)}
100%{opacity:.5;transform:translateZ(-500px) translateX(-200%)}
}
@-webkit-keyframes backSlideIn {
0%,25%{opacity:.5;-webkit-transform:translateZ(-500px) translateX(200%)}
75%{opacity:.5;-webkit-transform:translateZ(-500px)}
100%{opacity:1;-webkit-transform:translateZ(0) translateX(0)}
}
@-moz-keyframes backSlideIn {
0%,25%{opacity:.5;-moz-transform:translateZ(-500px) translateX(200%)}
75%{opacity:.5;-moz-transform:translateZ(-500px)}
100%{opacity:1;-moz-transform:translateZ(0) translateX(0)}
}
@keyframes backSlideIn {
0%,25%{opacity:.5;transform:translateZ(-500px) translateX(200%)}
75%{opacity:.5;transform:translateZ(-500px)}
100%{opacity:1;transform:translateZ(0) translateX(0)}
}
@-webkit-keyframes scaleToFade {
to{opacity:0;-webkit-transform:scale(.8)}
}
@-moz-keyframes scaleToFade {
to{opacity:0;-moz-transform:scale(.8)}
}
@keyframes scaleToFade {
to{opacity:0;transform:scale(.8)}
}
@-webkit-keyframes goDown {
from{-webkit-transform:translateY(-100%)}
}
@-moz-keyframes goDown {
from{-moz-transform:translateY(-100%)}
}
@keyframes goDown {
from{transform:translateY(-100%)}
}
@-webkit-keyframes scaleUpFrom {
from{opacity:0;-webkit-transform:scale(1.5)}
}
@-moz-keyframes scaleUpFrom {
from{opacity:0;-moz-transform:scale(1.5)}
}
@keyframes scaleUpFrom {
from{opacity:0;transform:scale(1.5)}
}
@-webkit-keyframes scaleUpTo {
to{opacity:0;-webkit-transform:scale(1.5)}
}
@-moz-keyframes scaleUpTo {
to{opacity:0;-moz-transform:scale(1.5)}
}
@keyframes scaleUpTo {
to{opacity:0;transform:scale(1.5)}
}
.owl-carousel .owl-wrapper:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel{display:none;position:relative;width:100%;-ms-touch-action:pan-y}
.owl-carousel .owl-wrapper{display:none;position:relative;-webkit-transform:translate3d(0px,0px,0px)}
.owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%}
.owl-carousel .owl-wrapper-outer.autoHeight{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}
.owl-carousel .owl-item{float:left}
.owl-controls .owl-page,.owl-controls .owl-buttons div{cursor:pointer}
.owl-controls{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
.grabbing{cursor:url(grabbing.png) 8 8,move}
.owl-carousel .owl-wrapper,.owl-carousel .owl-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
.content-wrapper .featured-posts-split,.featured-posts{margin-bottom:40px}
.featured-posts .item .caption{background:#fff}
.featured-posts .item .caption .category,.featured-posts .item .caption .post-meta,.featured-posts .item .caption .post-title{margin-bottom:10px}
.featured-posts .item .caption .category>a{margin:5px}
.featured-posts .item .caption .post-title a{color:#50514f}
.featured-posts .item .caption .post-title a:hover{text-decoration:none}
.featured-posts .item .caption .post-meta span{margin:0 5px}
.featured-posts-split{position:relative;margin-bottom:10px;-webkit-box-shadow:0 5px 0 0 $(theme.color);-moz-box-shadow:0 5px 0 0 $(theme.color);box-shadow:0 5px 0 0 $(theme.color)}
.featured-posts-split .owl-main-slide .item{margin:0;width:100%;height:600px;position:relative;z-index:2;overflow:hidden}
.featured-posts-split .owl-main-slide .item img{display:block;position:absolute;margin:auto;top:-9999px;right:-9999px;bottom:-9999px;left:-9999px;width:100%;height:auto;z-index:1}
.featured-posts-split .owl-post-nav-content{position:absolute;z-index:3;top:0;bottom:0;left:0;right:0;content:" "}
.featured-posts-split .owl-post-nav-content .item{cursor:pointer;position:relative;background:rgba(0,0,0,.4);height:600px;border-right:1px solid rgba(255,255,255,.2);overflow:hidden;-webkit-transition:background-color ease .3s;-moz-transition:background-color ease .3s;-o-transition:background-color ease .3s;transition:background-color ease .3s}
.featured-posts-split .owl-post-nav-content .item:hover{background-color:rgba(0,0,0,.3)}
.featured-posts-split .owl-post-nav-content .item .caption{position:absolute;z-index:4;bottom:-70px;left:10px;right:10px;background-color:rgba(0,0,0,0);padding:30px;text-align:center;-webkit-transition:background-color ease .3s,bottom ease .3s;-moz-transition:background-color ease .3s,bottom ease .3s;-o-transition:background-color ease .3s,bottom ease .3s;transition:background-color ease .3s,bottom ease .3s}
.featured-posts-split .owl-post-nav-content .item .caption .post-title{font-size:18px;line-height:1.4}
.featured-posts-split .owl-post-nav-content .item .caption .category{margin-bottom:5px}
.featured-posts-split .owl-post-nav-content .item .caption .category a{margin:0 5px}
.featured-posts-split .owl-post-nav-content .item .caption .category a,.featured-posts-split .owl-post-nav-content .item .caption .post-meta,.featured-posts-split .owl-post-nav-content .item .caption .post-meta a,.featured-posts-split .owl-post-nav-content .item .caption .post-title,.featured-posts-split .owl-post-nav-content .item .caption .post-title a{color:rgba(255,255,255,.5);-webkit-transition:color ease .3s;-moz-transition:color ease .3s;-o-transition:color ease .3s;transition:color ease .3s}
.featured-posts-split .owl-post-nav-content .item .caption .btn{margin-top:15px}
.featured-posts-split .owl-post-nav-content .synced .item{background-color:rgba(0,0,0,.3)}
.featured-posts-split .owl-post-nav-content .synced .item .caption{background-color:rgba(0,0,0,.5);bottom:0}
.featured-posts-split .owl-post-nav-content .synced .item .caption .post-title a{color:#fff}
.featured-posts-split .owl-post-nav-content .synced .item .caption .post-title a:hover{text-decoration:underline}
.featured-posts-split .owl-post-nav-content .synced .item .caption .category a,.featured-posts-split .owl-post-nav-content .synced .item .caption .post-meta span a:hover{color:$(theme.color)}
@media only screen and (max-width:900px) {
.featured-posts-split .owl-main-slide .item{width:100%;height:500px;position:relative;z-index:2;overflow:hidden}
.featured-posts-split .owl-post-nav-content .item{height:500px}
.featured-posts-split .owl-post-nav-content .item .caption{padding:20px}
}
@media only screen and (max-width:800px) {
.featured-posts-split .owl-main-slide .item{width:100%;height:400px;position:relative;z-index:2;overflow:hidden}
.featured-posts-split .owl-post-nav-content .item{height:400px}
.featured-posts-split .owl-post-nav-content .item .caption{padding:20px}
}
@media only screen and (max-width:600px) {
.featured-posts-split .owl-main-slide .item img{position:absolute;margin:auto;top:-9999px;right:-9999px;bottom:-9999px;left:-9999px;width:auto;height:100%;z-index:1;object-fit:cover}
}
@media only screen and (max-width:480px) {
.featured-posts-split .owl-main-slide .item img{position:absolute;margin:auto;top:-9999px;right:-9999px;bottom:-9999px;left:-9999px;width:auto;height:130%;z-index:1}
.featured-posts-split .owl-post-nav-content .item{height:400px}>



header .header-content .main-logo{float:left;padding:20px 0;margin-right:30px}
header .header-content .main-logo img{height:60px;margin-top:-10px}
header .header-content .main-logo h1,header .header-content .main-logo p{padding:0;margin:0;line-height:1}
header .header-content .main-logo h1{font-family:Droid Serif,cursive;margin-bottom:10px;font-size:40px;text-shadow:4px 4px rgba(0,0,0,.08);color:$(theme.color);max-width:555px}
header .header-content .main-logo p{font-style:italic;color:#cecece;font-family:'Droid Serif',serif;font-weight:400;font-size:12px;display:none}
header .header-content .main-logo.text-logo{height:80px}
header .header-content .main-logo.text-logo img{display:none}
header .header-content .main-logo.text-logo h1,header .header-content .main-logo.text-logo p{display:block}
header .header-content .main-logo.text-logo.without-description{padding:5px 0}
header .header-content .main-logo.text-logo.without-description h1{line-height:60px}
header .header-content .main-logo.text-logo.without-description p{display:none}

Outra dúvida é o token do instagram. Eu tenho um perfil principal pessoal e o de trabalho. Para entrar no segundo, preciso entrar no primeiro. Então seria a mesma senha e e-mail. Por isso, só consigo o token de acesso do perfil pessoal. Tem como resolver isso?

(Não sei se são esses os códigos corretos)

DiF · 5 de março de 2019

@Sha Capell Olá seja bem vinda em nosso Clube do Hardware.

De fato, os códigos necessários para apontar onde alterar na estrutura HTML, não são estes que postou. Estes são de estilo CSS.

No caso, você quer colocar uma imagem de fundo no cabeçalho, onde está o título do site e remover o slide. Onde vai ter uma outra imagem com algo escrito.

Você vai ter que alterar uma parte da estrutura HTML. Felizmente, mesmo sem ter posto o código, você deixou o link, então pude analisar.

Para colocar a imagem de fundo no título, tem dois elementos que podem ser usados para colocar a imagem.

<div class="header-content"> e no <header> contido no elemento <div class="wrapper fixed-layout header-lg">

O primeiro elemento é pai do logo e do campo de busca.

Já o segundo elemento em destaque, é um <header> que está dentro de outro elemento.

No caso este elemento DIV class wrapper é o container do cabeçalho inteiro que agrega o menu também.

Se colocar no primeiro elemento, vai ficar limitado as proporções daquele elemento.. mas se quiser colocar para prencher o espaço todo.. aí eu acho que seria melhor adaptar uma imagem no container.

Sobre o slide, o código está no elemento <div id="main-slider" class="slick-initialized slick-slider">

Você pode retirar aproveitar o mesmo elemento, mas retire o conteúdo dele.. aí é só colocar a imagem de fundo e o texto com o link

Sha Capell · 6 de março de 2019

Então pro slide eu tiro tudo isso?

Citação

#main-slider .slick-prev,.main-gallery .slick-prev,#main-slider .slick-next,.main-gallery .slick-next,.related-stuff .slick-prev,.related-stuff .slick-next{font-size:25px;color:#000;display:block;text-align:center;background:#fff;outline:0;padding:0;width:35px;height:50px;position:absolute;top:50%;margin-top:-15px;cursor:pointer;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}
button.slick-nav.slick-prev i{color:#252525}
button.slick-nav.slick-next i{color:#252525}
span.feat-cat a{color:#FFF;padding:5px 15px;background-color:$(theme.sec.color);border-radius:40px}
h2.feat-title a{color:#252525}
.feat-readmore a{color:#FFF;padding:6px 10px;background-color:$(theme.color);box-shadow:3px 3px 0 0 $(theme.sec.color)}
.feat-readmore a:hover{box-shadow:none}
.related-stuff .slick-prev,.related-stuff .slick-next{top:30%}
#main-slider .slick-prev{left:200px}
.main-gallery .slick-prev,.related-stuff .slick-prev{left:-40px}
.main-gallery .slick-next,.related-stuff .slick-next{right:-40px}
.main-gallery:hover .slick-prev,.related-stuff:hover .slick-prev{left:0}
.main-gallery:hover .slick-next,.related-stuff:hover .slick-next{right:0}
.slick-prev:before,.slick-next:before{content:''}
#main-slider .slick-next{right:200px}
.item{position:relative}
#section-featured{position:relative;min-height:50px;width:100%}
#main-slider div img{max-width:100%;height:490px;object-fit:cover;width:100%}
#main-slider div span.title{font-size:19px;color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:25px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s}
div#main-slider{width:100%;overflow:hidden}
div#bt-slider-main .title{display:none}
.feat-wrapper{position:absolute;left:10px;bottom:120px;right:10px;padding:20px;width:60%;margin:0 auto}
.feat-wrapper-inner{position:relative;height:100%;z-index:99;width:100%;display:table;padding:40px;vertical-align:middle;text-align:center;border-top:0;background:#fff;color:#fff;-webkit-box-shadow:9px 9px 0 0 #F1F1F1;-moz-box-shadow:9px 9px 0 0 #F1F1F1;box-shadow:9px 9px 0 0 #F1F1F1}
.feat--inner{vertical-align:middle;display:table-cell}
.feat-header{margin-bottom:0;padding:0 20px}
.feat-cat:before{content:'';display:inline-block;height:2px;width:40px;background:#A2A2A2;margin-bottom:5px;margin-right:0}
.feat-cat:after{content:'';display:inline-block;height:2px;width:40px;background:#A2A2A2;margin-bottom:5px;margin-left:0}
span.feat-cat{font-size:12px;letter-spacing:1px;padding-bottom:2px;display:inline-block;margin:0 0 10px 5px;font-weight:400;text-transform:uppercase}
.slick-slide{opacity:1;transition:.2s}
.item.slick-slide.slick-active.slick-center{opacity:1;transition:.2s}
.slick-slider{position:relative;display:block;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}
.slick-list.dragging{cursor:pointer;cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}
.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left;height:100%;min-height:1px}
[dir='rtl'] .slick-slide{float:right}
.slick-slide img{display:block}
.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
.slick-prev,.slick-next{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:20px;height:20px;margin-top:-10px;padding:0;cursor:pointer;color:transparent;border:none;outline:none;background:transparent}
.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus{color:transparent;outline:none;background:transparent}
.slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before{opacity:1}
.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{opacity:.25}
.slick-prev:before,.slick-next:before{font-family:'slick';font-size:20px;line-height:1;opacity:.75;color:#252525;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.slick-prev{left:-25px}
[dir='rtl'] .slick-prev{right:-25px;left:auto}
.slick-next{right:-25px}
[dir='rtl'] .slick-next{right:auto;left:-25px}
.slick-slider{margin-bottom:30px}
.slick-dots{text-align:center}
.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 8px;padding:0;cursor:pointer}
.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:none;background:transparent}
.slick-dots li button:hover,.slick-dots li button:focus{outline:none}
.slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;background-color:$(theme.color)}
.slick-dots li button:before{position:absolute;top:0;display:block;left:0;content:'';text-align:center;opacity:.35;height:5px;width:22px;background-color:#656464;margin-top:5px;transition:.2s;border-radius:50px}
.slick-dots li.slick-active button:before{opacity:.75;background-color:$(theme.color)}
@media only screen and (max-width:767px) and (min-width:480px) {
#main-slider .slick-prev,.main-gallery .slick-prev,.related-stuff .slick-prev{left:0}
#main-slider .slick-next,.main-gallery .slick-next,.related-stuff .slick-next{right:0}
#main-slider div img{height:350px}
.feat-wrapper{bottom:15px;padding:10px;width:430px}
h2.feat-title{line-height:32px;font-size:23px}
.thumbnail{margin:0 auto}
.item.slick-slide:before{opacity:1;background:0 0}
}
@media only screen and (max-width:479px) {
.fixedheader .grid,span.feat-cat{display:none}
.header img,.thumbnail{margin:0 auto}
#main-slider .slick-next{right:0}
#main-slider .slick-prev{left:0}
#main-slider div img{height:275px}
.gal4 img{height:250px}
.feat-readmore{width:135px}
img.thumb-single{max-height:300px}
h2.feat-title{line-height:32px;font-size:23px}
.feat-wrapper{bottom:15px;padding:5px;width:94%}
}
.large-12.column{text-align:center}
@-webkit-keyframes justified-gallery-show-caption-animation {
from{opacity:0}
to{opacity:.7}
}
@-moz-keyframes justified-gallery-show-caption-animation {
from{opacity:0}
to{opacity:.7}
}
@-o-keyframes justified-gallery-show-caption-animation {
from{opacity:0}
to{opacity:.7}
}
@keyframes justified-gallery-show-caption-animation {
from{opacity:0}
to{opacity:.7}
}
@-webkit-keyframes justified-gallery-show-entry-animation {
from{opacity:0}
to{opacity:1}
}
@-moz-keyframes justified-gallery-show-entry-animation {
from{opacity:0}
to{opacity:1}
}
@-o-keyframes justified-gallery-show-entry-animation {
from{opacity:0}
to{opacity:1}
}
@keyframes justified-gallery-show-entry-animation {
from{opacity:0}
to{opacity:1}
}
.justified-gallery{width:100%;position:relative;overflow:hidden;margin-bottom:30px}
.justified-gallery>a,.justified-gallery>div{position:absolute;display:inline-block;overflow:hidden;opacity:0;filter:alpha(opacity=0)}
.justified-gallery>a>a>img,.justified-gallery>a>img,.justified-gallery>div>a>img,.justified-gallery>div>img{position:absolute;top:50%;left:50%;margin:0;padding:0;border:0}
.justified-gallery>a>.caption,.justified-gallery>div>.caption{display:none;position:absolute;bottom:0;padding:5px;background-color:#000;left:0;right:0;margin:0;color:#fff;font-size:12px;font-weight:300;font-family:sans-serif}
.justified-gallery>a>.caption.caption-visible,.justified-gallery>div>.caption.caption-visible{display:initial;opacity:.7;filter:"-webkit-animation:justified-gallery-show-caption-animation 500ms 0 ease;-moz-animation:justified-gallery-show-caption-animation 500ms 0 ease;-ms-animation:justified-gallery-show-caption-animation 500ms 0 ease}
.justified-gallery>.entry-visible{opacity:1;filter:alpha(opacity=100);-webkit-animation:justified-gallery-show-entry-animation 500ms 0 ease;-moz-animation:justified-gallery-show-entry-animation 500ms 0 ease;-ms-animation:justified-gallery-show-entry-animation 500ms 0 ease}
.justified-gallery>.spinner{position:absolute;bottom:0;margin-left:-24px;padding:10px 0;left:50%;opacity:initial;filter:initial;overflow:initial}
.justified-gallery>.spinner>span{display:inline-block;opacity:0;filter:alpha(opacity=0);width:8px;height:8px;margin:0 4px;background-color:#000;border-radius:6px}
]]></b:skin>

E coloco o quê pra ficar a imagem de fundo com o texto por cima?

adicionado 10 minutos depois

E a imagem em cima é aqui. Só que não quero tirar o texto e colocar um logo. Quero uma imagem de fundo que cubra toda essa parte de cima, incluindo o menu. (e manter o título como está)

<div class='wrapper fixed-layout header-lg'>

        <!-- BEGIN HEADER -->
        <header itemscope='' itemtype='http://schema.org/WPHeader'>

            <!-- Begin header content -->
            <div class='header-content'>

                <!-- Begin Main Logo -->
                <div class='main-logo'>
				<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Babá de Animais (Cabeçalho)' type='Header' version='1'>
  <b:widget-settings>
    <b:widget-setting name='displayUrl'/>
    <b:widget-setting name='displayHeight'>0</b:widget-setting>
    <b:widget-setting name='sectionWidth'>600</b:widget-setting>
    <b:widget-setting name='useImage'>false</b:widget-setting>
    <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
    <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
    <b:widget-setting name='displayWidth'>0</b:widget-setting>
  </b:widget-settings>