[Resolved] create page designs with Elementor

Home Forums Support create page designs with Elementor

This topic contains 24 replies, has 7 voices, and was last updated by  Joanne Smith 3 years, 6 months ago.

Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
  • #210588

    Joanne Smith

    To create page designs with Elementor, we use 3 types of elements: Sections, Columns and Widgets. Combining these elements lets you design and compose very complex web pages. You can control and edit the appearance of each of them.

    Have you seen this new plugin — ??? Do you think it is compatible with your theme ??

    It poppped up on my plugin screen when I was updating a plugin


    looks very interesting and easy to use!!



    Joanne Smith

    I have just been using it with your theme and it is compatible and one of the best and easy to use editors out there — more than just drop and drag — it is VERY advanced and more like dreamweaver with LIVE views with a touch of a button to see how the design layout is going !! Lots of great additional features — this reminds me so much of dreamweaver — for advanced users with CSS skills — !! The best this is you can create columns and borders and such the like at a touch of a button! So with your theme and this editor progam — I will be able to design even MORE advanced websites!!

    Take a look see –



    Tom Lead Developer

    Definitely a cool plugin! You can also create full width sections with it using our new Page Builder Integration metabox 🙂


    Joanne Smith


    Just q quick one

    I am testing a layout for a landing page and need some of the rows with background content — ie colour and video to be Full width

    I created a new page and then choose full width tab and turned off the header and page title

    I added the column and added background content but there still is a GAP showing on live view — I think this is because in the Custom settings I told it to put a gap in the layout — which is needed for the rest of the site normal web pages

    see images to show what happens when I go to the custom settings and change the layout container gaps to 0 left and right — it solves the full page problem but then the normal pages are not correct

    can you provide some CSS to solve or am I going about it the wrong way ?

    is there a css tip to remove gap from any full width columns or is it something incompatible with your theme and eliminator page builder >




    i need your theme to show their demo layout



    Tom Lead Developer

    Hi there,

    I believe I have this fixed in the next version of the theme.

    You can grab the development version to test here: https://github.com/tomusborne/GeneratePress



    … sounds (and looks) just like the same problem as here: pading-problems

    elementors guys need to put an eye on that 🙂


    Joanne Smith

    yes — It seems to have WORKED at first glance — will play around with it tomorrow — where I can push the booundaries — but the Landing page has a full background with no padding and the main pages have the padding!! Yahoo — it taken me hours to get this fix — going back and forth with other themes and always wanting to use yours!!!

    I also added some Custom CSS for the SMALLER mobile screens from previous threads — and that has worked great too for the H1 and H2 and H3 text —

    I have been telling everyone on blog posts ( and the Elementor developers too ) and even my LinkedIn wordpress group to use your GP theme with Elementor to use to build websites – as you have the Clean THEME and they have the clean page builder — a developers dream web designers toolkit for custom website designs not more off the shelf themes that you can’t do anything with and are stuck with what is out of the box — design by numbers — the same as paint by numbers — now I am free to design what I want to design layout the pages the way I want — no more boring coding — let the designers design and the coders code I say!!

    I think this is the RIGHT combination and takes me back to my Adobe Dreamweaver days and now I can build even MORE professional looking websites with cleaner instant CSS on the fly — most importantly it is front end editor so you get the LIVE view as you design …….and it is indeed as they say…very vert VERY VERY fast to edit.

    They did suggest using a child theme of Twenty Sixteen but it did not have the header and navigation layout controls like you offer ( among-st other items ) — so thank you for a GREAT theme!!

    I hope this help your business model grow!



    Tom Lead Developer

    Thanks, Joanne! Glad you’re finding both tools useful!

    BTW – there are font size controls for h1, h2 and h3 on mobile inside the Typography panel in GP Premium.

    I appreciate the feedback 🙂


    Joanne Smith

    did not know it was part of the upgrade — I deleted my custom style sheet and nothing seemed to change –maybe it has something to do with the other program with it sown style sheet


    when I used my custom CSS code it has worked


    see code below

    @media (max-width: 768px) {
    .main-title {
    font-size: 25px;

    .entry-content h1 {
    font-size: 24px !important;
    .entry-content h2 {
    font-size: 22px !important;

    .entry-content h3 {
    font-size:18px !important;

    .entry-content p {
    font-size:18px !important;

    .site-logo {
    margin-bottom: 20px;

    .page-header-image.grid-container {
    max-width: 100%;

    .page-header-image img {
    width: 100%;

    .page .wpb_single_image .vc_figure {
    display: inherit;



    Tom Lead Developer

    Hmm, the H1 itself might have an inline style, or as you said another plugin is adding the size with !important or a more specific selector.


    Joanne Smith

    a little bit of hand coding now and then is OK as long as you get the right result!!



    Tom Lead Developer


    Hi Joanne, can I see what you’re doing with GP and Elementor? Just curious I’m planning to do a site with this combination of theme and page builder.


    Joanne Smith


    here is one website completed for a client recently – I had built it about 10 years ago using Macromedia Dreamweaver – HTML with a typical web banner which was the correct web design layout back them – and the client still liked the layout and design BUT wanted it to be mobile friendly – so I upgraded it using both the GP and Elementor but kept the original design. I love the advanced tab where you can add box shadows and borders —


    I am working on another site with a landing page layout that I learned from this video below

    ” Lesson 1 How to Create a Stunning Landing Page on WordPress in Minutes ”

    and then the main pages have correct layout with the Custom CSS as shown above – you have to install a custom CSS plugin and then add the CSS to correct the page layout (when you use the full width page )– the video background on the landing page will be full width.

    hope it helps




    Pretty cool!

Viewing 15 posts - 1 through 15 (of 25 total)

You must be logged in to reply to this topic.