I can't change the heading image on a WordPress page. I tried using Elementor and the WordPress code editor, but it doesn't work. I can't figure out where to set the image from. This is what I see from the WordPress code editor.
<section class="fw-main-row ">
<div class="fw-container">
<div class="fw-row">
<div class="fw-col-xs-12">
<div class="fw-heading fw-heading-h2 ">
<h2 class="fw-special-title">¿Qué es la lombricultura?</h2>
</div>
</div>
</div>
</div>
Related
I need to put a link href="/favourites_new/" in the text so that when I click on the card (not on the text itself) I could go to another page. There is my simple code
<div class="left-card-parent">
<div class="left-card">
<h1 class="left-card-h2"> ⬅</h1>
<p>selected</p>
</div>
</div>
How should I solve my problem?
Add all you code inside an tag
for example
<a href=your link here>
<div class="left-card-parent">
<div class="left-card">
<h1 class="left-card-h2"> ⬅</h1>
<p>selected</p>
</div>
</div>
</a>
Hey so I am trying to inject a background image to my Django template however for some reason I do not know why it not loading I tried inline styling on the html(** ) tag but nothing
I the tried to to make an external css file but still not working can you please show me what I can be possibly doing wrong here.
** Below is the code to my html tag that I want to put the background image to**
<div class="hero-wrap js-fullheight" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text js-fullheight align-items-center justify-content-start" data-scrollax-parent="true">
<div class="col-md-6 ftco-animate">
<h2 class="subheading">Leave the house cleaning chores to us</h2>
<h1 class="mb-4">Let us do the dirty work, so you don't have to.</h1>
<p>Learn more <span class="ion-ios-arrow-forward"></span></p>
</div>
</div>
</div>
</div>
And here below is the external css file that I made to test if it would work having an external stylesheet
.hero-wrap js-fullheight{
background-image: url('static/images/bg_1.jpg');
}
If possible can you teach me how I can make inline background-image on the html tags using Django templates
try this:
<div class="hero-wrap js-fullheight" data-stellar-background-ratio="0.5" style="background-image: url({% static '/images/bg_1.jpg' %});">
My Angular Version: Angular 7
I just started learning Angular and I'm trying to use a downloaded Bootstrap template in my Angular project. My owl-carousel works great when it's on index.html in my Angular project. But it does not when it's moved to a new component. I'll be providing the steps I followed. Kindly help me troubleshoot
Step 1: I copied all assets (JS, CSS & Images) to the assets folder under src in Angular
Step 2: Copies the code in index.html in the template to the angular index.html and changed the 'src' for images and JS files in index.html
At this point, everything works PERFECT!
Step 3: Since it's not a good practice to keep everything in one file so I tried to refactor the code by moving the home-slider which is based on 'owl-carousel' to a component called 'home' as below
Below is the entire code in home-component.html and all imports such as Javascript and CSS are already in index.html of my Angular Project
<!-- Welcome Area Start -->
<section class="welcome-area">
<div class="welcome-slides owl-carousel">
<!-- Single Welcome Slide -->
<div class="single-welcome-slide bg-img bg-overlay" style="background-image: url(./assets/macbook-1.jpg);" data-img-url="macbook-1.jpg">
<!-- Welcome Content -->
<div class="welcome-content h-100">
<div class="container h-100">
<div class="row h-100 align-items-center">
<!-- Welcome Text -->
<div class="col-12">
<div class="welcome-text text-center">
<h6 data-animation="fadeInLeft" data-delay="200ms">Creativity & Excellence</h6>
<h2 data-animation="fadeInLeft" data-delay="500ms">Welcome to to my Web</h2>
Explore our work
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Single Welcome Slide -->
<div class="single-welcome-slide bg-img bg-overlay" style="background-image: url(./assets/macbook-1.jpg);" data-img-url="macbook-1.jpg">
<!-- Welcome Content -->
<div class="welcome-content h-100">
<div class="container h-100">
<div class="row h-100 align-items-center">
<!-- Welcome Text -->
<div class="col-12">
<div class="welcome-text text-center">
<h6 data-animation="fadeInDown" data-delay="200ms">Hotel & Resort</h6>
<h2 data-animation="fadeInDown" data-delay="500ms">Welcome To my Web </h2>
Discover Now
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I expected the code to have a working owl-carousel slider when the component is selected in app-component.html using <app-home></app-home> but the actual output just gives nothing.
Note: The selector is right as if I give plain text and call the selector as <app-home></app-home> in app-component.html it works but not the owl-carousel
Thanks in advance.
when are you initialising the owl carousel? because index page loads with the application and hence its working in index, but component page only loads when its navigated so you need to call owl initialising explicitly after component is loaded into DOM
$(".owl-carousel").owlCarousel();
I'm working on creating a Jekyll site based on a fork of: https://github.com/barryclark/jekyll-now.
I am trying to replace the header with my own header image but the image shows up as a broken link.
Here is my code:
<div class="wrapper-masthead">
<div class="container">
<header class="masthead clearfix">
<img src="https://goo.gl/photos/pnvSq1hjp4NX9PPq5">
<nav>
Blog
About
</nav>
</header>
</div>
</div>
That's simply because https://goo.gl/photos/pnvSq1hjp4NX9PPq5 doesn't redirect to an image file.
This is the image URL you want to use.
<img src="https://lh3.googleusercontent.com/HNy8Td1CVPcyGEyisc2DjAD0jQeF4gf8fR4ZFcM-5Z19OgFLwhujmmSd7Lw-s6CkKtWHGNJep2gGQ2P0973cB5xBpVhyw_2s1XAk2OQLVKIOFJjTky-OJ1sk9Rv_9rzHcpRBvmS7Y0BIB7a_pB34AB34oJl7NIBh9bBvMdhl36ogVCzjIfk9Tg0wS-crAOEoRfl5yvgUXwHnWeZzj_LZ0b0gFElUFvhYYvJ5LAxXLVjk_AuOcaR4WTuXOTdYHAU2311M26VVOJb7UD0nYDholpt0uioTvNDT3iqCVvMu1LijWqc9qWdyLfh5BzBOk17iSnofTnPNH9PKKRonKpRF_sf-OOagwpGu_BScMfhQns0qusCj3O2SyMbh2577a2Yj9sgNI5LTTyl3GIVMX_PnIPmGuVpe7k7gCZ3jnqwMCy-kz6xCH3XS3asiqCBGmjC4m6yziYMyzYE2xjB7C_LMf_NE7YUu96C8vIW1tbTccUlyTWLO_GKeeuWy3wCm0EceuVhJPNBSmqd4-D3wJ8A9ga2xJkfFSi2kDwxKuyMkPbDQiTrCP0Q6S6lAPpBM7Zh9nKI9=w678-h90-no">
I'm trying to make the banner in my tumblr blog link to another site. I can't figure out how to do it. The following is the code I found in the custom html tab but I can't seem to make my banner clickable. Where exactly should I add the website address for the link? Any help will be appreciated.
<div id="page" class="{block:IfLeftSidebar}left-sidebar{/block:IfLeftSidebar}{block:IfNotLeftSidebar}right-sidebar{/block:IfNotLeftSidebar}">
{block:IfBannerImage}
<div class="banner">
<img id="banner" src="{image:Banner}" alt="banner"/>
</div>
{block:IfBannerImage}
{block:IfNotBannerImage}
{block:IfBlogTitleInPageHeader}
<div class="banner textual">
<h1 class="blog-title">{Title}</h1>
{block:IfTagline}<p class="tagline">{text:Tagline}</p>{/block:IfTagline}
</div>
{/block:IfBlogTitleInPageHeader}
{/block:IfNotBannerImage}
<div id="content">
<div class="banner">
<img id="banner" src="{image:Banner}" alt="banner"/>
</div>
put your website in the
href=""