[Support request] Visual DIV editor

Home Forums Support [Support request] Visual DIV editor

Home Forums Support Visual DIV editor

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #239763
    Dorian

    Hello All,

    Not a support question, more like a general question.
    I like to divide my content into sections, and I do that using a page builder. I use SiteOrigin’s page builder which is free.
    I don’t really like this anymore, and I would like to migrate from this to cleaner html by using DIV’s.
    I couldn’t find any decent solution to do that in a visual manner. I tried a couple of solutions but you always end up messing the divs, especially when you have nested divs. My typical needs are one div 100% that spans two 40% respectively 60% divs. This way the text flows nicely filling up the space under the associated image. Underneath the image there is a button, so that calls for that div element, and it can’t be done with image>style>float respectively p>style>float.

    Does anybody know of a solution to divs visually?

    I am doing this manually now, in the text editor, and it’s a pain.

    Any suggestion would be greatly appreciated.

    Thanks,

    Dorian

    #239793
    Tom
    Lead Developer
    Lead Developer

    Hi Dorian,

    You can give all of the divs classes so you can style them individually, but if you’re not too comfortable manually applying the divs, a page builder might be your best bet.

    There are others out there like Elementor and Beaver Builder which might be worth trying.

    #239860
    Dorian

    Hi Tom,

    Thanks so much for taking the time to answer this.
    I am trying to migrate away from page builders, period. Too many disadvantages. The only thing I need is a decent way to build my divs. I am pretty comfortable with HTML, but it’s not something I want to spend my time with. And I might delegate the task to migrate from page builder to someone less technical. (my daughter)
    I have three divs that I use for structuring my sections. All of them have classes. I installed TinyMCE Custom Styles and that gives me a button in the editor. In theory this would allow me to select the text/images, and apply the div.

    Here are my problems with this:
    The selection in TinyMCE does not function properly, and I can’t see the divs in the visual editor.
    I tried to add editor-style.css in the theme’s folder and included the classes for those divs. It still doesn’t show in the editor. Maybe you can point me in the right direction with editor-style.css.

    Not sure if there is anything that I can do…

    Thanks again,

    Dorian

    #239891
    Tom
    Lead Developer
    Lead Developer

    You could try adding the div classes into your editor-style.css file which might make them appear as they do on the front end of the site – I’ve never really played with that.

    For example:

    <div class="my-div">Test</div>

    And in your editor-style.css file:

    .my-div {
        float: left;
        width: 50%;
    }

    This is the kind of the reason page builders exist though – the editor doesn’t do well with complex HTML visually. I usually just use the Text editor when implementing a lot of HTML.

    #252799
    Ian

    I’ve just asked the same question here “Splitting sections horizontally“, let me know if you find a good solution. I am currently looking at “Advanced WP Columns

    #252803
    Dorian

    Hi Ian,

    Didn’t find a good solution, but didn’t look too much either.
    Tom suggested Elementor which looks great, I played a bit with it, but didn’t delve too deeply. I plan to do that after I migrate all my content from page builder to the simple WP editor.
    I used his suggestion with manually inserting divs. A little barbaric, (HTML coding era), but it works and it’s the safest and cleanest method.

    There seems to be an option in WP to “Use Sections” didn’t play with that too much either… You can find this at the top right section of the WP editor.

    Cheers,

    Dorian

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