Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 7, 2021 at 12:44 am #1292942
    SoundComposer

    Hi everyone!

    I’m loving Enfold and I’ve done every website for my clients till now through Enfold :)

    Now I’m creating a website for our own album release and I can’t see a straight forward solution to this in Enfold. Maybe someone can chip in how to do it.
    This is how I would like it to look like:

    Design example of how I want it to look like

    One quadrant artwork with another larger white quadrant around it (or some kind of white padding) where I can insert text on the white background. I need to be able to insert text on all 4 white sides and be able to rotate the text 90/-90 degrees depending on which side the text is placed on.

    Also it’s important that each artwork is a full page view. So it fills the screen fully and the viewer needs to push the “scroll down’ arrow to move to the next page/artwork which also fits the whole screen. So it becomes a one-pager with one artwork per view/page.

    Anyone any ideas how to create this in Enfold? I tried the Advanced Layerslider but couldn’t find the option to rotate text and making break lines </br> in the text didn’t work either for some reason (se example here: https://amiba.dk/amiba-vue/)

    Thankful for any help here!

    All the best
    Toni

    April 7, 2021 at 12:46 am #1292943
    SoundComposer

    Doesn’t seem like the image link worked so here it is again: https://ibb.co/SJFRb2T

    April 8, 2021 at 3:12 pm #1293282
    Yigit

    Hi Toni,

    Thanks for contacting us!

    The simplest way would be adding text to your image and upload it as background image of Color Section element with 100% height. If you really need to add text, you could add Text Block elements with custom CSS class and use custom CSS code to place it around your image however as you would imagine, that would require a lot more work :)

    Best regards,
    Yigit

    April 13, 2021 at 12:53 pm #1294101
    SoundComposer

    Hi Yigit!

    Thanks for the answer!

    I thought of creating the image with text as well, but then all SEO disappears… Everything on the webpage is supposed to be written around the images.

    As a non-programmer would there be anywhere you could guide me for understanding how to do the custom CSS class/custom CSS code to place the text around? Any ideas would be appreciated :)

    All the best
    Toni

    April 15, 2021 at 8:10 am #1294509
    Rikard

    Hi Toni,

    I think you will have to place the text on the left and right in an absolute position, then rotate it using CSS. You can give your text a class or ID like this:

    <p id="left-vertical-text">Your left vertical text goes here</p>

    Then add CSS like this in Quick CSS:

    #left-vertical-text {
        position: absolute; 
        top: 0; 
        left: 0;
	transform: rotate(90deg);
	transform-origin: left top 0;
}

    https://davidwalsh.name/css-vertical-text
    https://www.w3schools.com/css/css_positioning.asp

    Best regards,
    Rikard

    April 15, 2021 at 11:12 am #1294543
    SoundComposer

    Amazing! Thank you Rikard! :)

    Have a wonderful day!

    April 18, 2021 at 7:32 am #1294965
    Rikard

    Hi,

    Great, I’m glad that we could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.