Help with changing animated text to image in a theme

• 

  jm89king · Member · Apr 11, 2024 at 2:08 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I’m pretty new to WordPress (used to get HTML5 templates and work from that), and I’m working on a new site for myself. I purchased this theme/template (https://themeforest.net/item/haar-a-portfolio-theme-for-designers-artists-and-illustrators/21641125), and the author cannot help with “customization.” In the live preview (or what I found to be “Landing” under pages in WordPress), the text is animated with a cool glitch effect. What I’m hoping is to use my own logo there instead of text. The author directed me with this path to try to help me: /wp-content/plugins/edgtf-core/shortcodes/intro-section/

  I’m pretty sure it can be changed in the following css (I only copied the “headline” section), or if that’s not the case, help me figure out how to do this, I’d be grateful. The edge intro section has a place for “headline,” and that’s the text that gets animated.

  .edgtf-is-headline-holder {
  		position: relative;
  		overflow: hidden;
  		z-index: 10;
  		cursor: pointer;
  	}
  
  	%headline {
  		font-family: $default-heading-font;
  		font-weight: 700;
  		font-size: 50px;
  		letter-spacing: 0.18em;
  		line-height: 1em;
  		color: #fff;
  	}
  
  	.edgtf-is-headline {
  		@extend %headline;
  		visibility: hidden;
  
  		.no-touch & {
  			visibility: visible;
  
  			&.edgtf-is-headline-original {
  				visibility: hidden;
  			}
  
  			&.edgtf-is-headline-top {
  				position: absolute;
  				top: 0;
  				left: 0;
  				height: 50%;
  				width: 100%;
  				overflow: hidden;
  				z-index: 10;
  				@include edgtfTransform(translate3d(-110%, 0, 0));
  			}
  
  			&.edgtf-is-headline-bottom {
  				position: absolute;
  				top: 0;
  				right: 0;
  				height: 100%;
  				width: 100%;
  				@include edgtfTransform(translate3d(110%, 0, 0));
  
  				&:after {
  					content:'';
  					position: absolute;
  					top: 0;
  					right: 0;
  					height: 50%;
  					width: 100%;
  					background-color: $first-main-color;
  				}
  			}
  		}

  The blog I need help with is: (visible only to logged in users)

• 

  maciejpilarski · Staff · Apr 16, 2024 at 8:43 pm

  • Copy link

  Hi there!

  Thank you for your message. At WordPress.com, we don’t provide support for custom coding.
  If you would like someone to help you with your customizations, you can hire someone at Codeable who will do the required changes for you:
  https://www.codeable.io/partners/wordpresscom/?ref=2ycmr